diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml deleted file mode 100644 index 124ec23d3..000000000 --- a/.github/workflows/playwright.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Playwright Tests -on: - push: - branches: [ main, master ] - pull_request: - branches: [ main, master ] -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - name: Install dependencies - run: yarn - - name: Install Playwright Browsers - run: yarn playwright install --with-deps - - name: Run Playwright tests - run: yarn playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 diff --git a/packages/core/editor/package.json b/packages/core/editor/package.json index 667b7e640..d59247f8f 100644 --- a/packages/core/editor/package.json +++ b/packages/core/editor/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/editor", - "version": "4.6.6", + "version": "4.6.7-rc.0", "license": "MIT", "private": false, "main": "dist/index.js", diff --git a/packages/core/editor/src/parsers/deserializeHTML.ts b/packages/core/editor/src/parsers/deserializeHTML.ts index fcec34345..5c3c2f336 100644 --- a/packages/core/editor/src/parsers/deserializeHTML.ts +++ b/packages/core/editor/src/parsers/deserializeHTML.ts @@ -1,6 +1,6 @@ import { Element } from 'slate'; import { buildBlockData } from '../components/Editor/utils'; -import { SlateElement, YooEditor, YooptaBlockData } from '../editor/types'; +import { SlateElement, YooEditor, YooptaBlockBaseMeta, YooptaBlockData } from '../editor/types'; import { PluginDeserializeParser } from '../plugins/types'; import { getRootBlockElementType } from '../utils/blockElements'; import { generateId } from '../utils/generateId'; @@ -64,7 +64,7 @@ function getMappedPluginByNodeNames(editor: YooEditor): PluginsMapByNodeNames { return PLUGINS_NODE_NAME_MATCHERS_MAP; } -function buildBlocks(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElement, children: any[]) { +function buildBlock(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElement, children: any[]) { let nodeElementOrBlocks; if (plugin.parse) { @@ -100,13 +100,17 @@ function buildBlocks(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElemen rootNode.children = [{ text: '' }]; } + const align = (el.getAttribute('data-meta-align') || 'left') as YooptaBlockBaseMeta['align']; + const depth = parseInt(el.getAttribute('data-meta-depth') || '0', 10); + const blockData = buildBlockData({ id: generateId(), type: plugin.type, value: [rootNode], meta: { order: 0, - depth: 0, + depth: depth, + align: align, }, }); @@ -140,10 +144,10 @@ export function deserialize(editor: YooEditor, pluginsMap: PluginsMapByNodeNames if (plugin) { if (Array.isArray(plugin)) { - return plugin.map((p) => buildBlocks(editor, p, el as HTMLElement, children)); + return plugin.map((p) => buildBlock(editor, p, el as HTMLElement, children)); } - return buildBlocks(editor, plugin, el as HTMLElement, children); + return buildBlock(editor, plugin, el as HTMLElement, children); } return children; diff --git a/packages/core/editor/src/parsers/getHTML.ts b/packages/core/editor/src/parsers/getHTML.ts index b48e8f86a..fa7e923fb 100644 --- a/packages/core/editor/src/parsers/getHTML.ts +++ b/packages/core/editor/src/parsers/getHTML.ts @@ -28,6 +28,7 @@ function serializeChildren(children, plugins) { const childPlugin = getPluginByInlineElement(plugins, child.type); if (childPlugin && childPlugin.parsers?.html?.serialize) { + // We don't pass block meta data to this because it's inline element inside block innerHtml = childPlugin.parsers.html.serialize(child, serializeChildren(child.children, plugins)); return innerHtml; } @@ -48,7 +49,7 @@ export function getHTML(editor: YooEditor, content: YooptaContentValue): string if (plugin && plugin.parsers?.html?.serialize) { const content = serializeChildren((blockData.value[0] as SlateElement).children, editor.plugins); - return plugin.parsers.html.serialize(blockData.value[0] as SlateElement, content); + return plugin.parsers.html.serialize(blockData.value[0] as SlateElement, content, blockData.meta); } return ''; diff --git a/packages/core/editor/src/plugins/types.ts b/packages/core/editor/src/plugins/types.ts index ae5a5b614..c7b7f23d1 100644 --- a/packages/core/editor/src/plugins/types.ts +++ b/packages/core/editor/src/plugins/types.ts @@ -1,7 +1,7 @@ import { HTMLAttributes, ReactElement, ReactNode } from 'react'; import { Descendant, Editor, Path } from 'slate'; import { RenderElementProps as RenderSlateElementProps, RenderLeafProps } from 'slate-react'; -import { SlateElement, YooEditor, YooptaBlockData } from '../editor/types'; +import { SlateElement, YooEditor, YooptaBlockBaseMeta, YooptaBlockData } from '../editor/types'; import { YooptaMark } from '../marks'; import { EditorEventHandlers } from '../types/eventHandlers'; import { HOTKEYS_TYPE } from '../utils/hotkeys'; @@ -86,7 +86,11 @@ export type PluginParsers = { export type PluginParserTypes = 'html' | 'markdown'; export type PluginParserValues = 'deserialize' | 'serialize'; -export type PluginserializeParser = (element: SlateElement, text: string) => string; +export type PluginserializeParser = ( + element: SlateElement, + text: string, + blockMetaData?: YooptaBlockBaseMeta, +) => string; export type PluginDeserializeParser = { nodeNames: string[]; diff --git a/packages/core/exports/package.json b/packages/core/exports/package.json index 3a97ddd93..157bf2a3d 100644 --- a/packages/core/exports/package.json +++ b/packages/core/exports/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/exports", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Serialize/deserialize exports in different formats for Yoopta-Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/core/exports/src/html/deserialize.ts b/packages/core/exports/src/html/deserialize.ts index f1b767c28..0f8822569 100644 --- a/packages/core/exports/src/html/deserialize.ts +++ b/packages/core/exports/src/html/deserialize.ts @@ -24,6 +24,12 @@ const MARKS_NODE_NAME_MATCHERS_MAP = { EM: { type: 'italic' }, }; +const JUSTIFY_TO_ALIGNS = { + 'flex-start': 'left', + center: 'center', + 'flex-end': 'right', +}; + type PluginsMapByNode = { type: string; parse: PluginDeserializeParser['parse']; @@ -72,7 +78,7 @@ function getMappedPluginByNodeNames(editor: YooEditor): PluginsMapByNodeNames { return PLUGINS_NODE_NAME_MATCHERS_MAP; } -function buildBlocks(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElement, children: any[]) { +function buildBlock(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElement, children: any[]) { let nodeElementOrBlocks; if (plugin.parse) { @@ -108,13 +114,17 @@ function buildBlocks(editor: YooEditor, plugin: PluginsMapByNode, el: HTMLElemen rootNode.children = [{ text: '' }]; } + const align = (el.getAttribute('data-meta-align') || 'left') as YooptaBlockData['meta']['align']; + const depth = parseInt(el.getAttribute('data-meta-depth') || '0', 10); + const blockData = buildBlockData({ id: generateId(), type: plugin.type, value: [rootNode], meta: { order: 0, - depth: 0, + align, + depth, }, }); @@ -148,10 +158,10 @@ export function deserialize(editor: YooEditor, pluginsMap: PluginsMapByNodeNames if (plugin) { if (Array.isArray(plugin)) { - return plugin.map((p) => buildBlocks(editor, p, el as HTMLElement, children)); + return plugin.map((p) => buildBlock(editor, p, el as HTMLElement, children)); } - return buildBlocks(editor, plugin, el as HTMLElement, children); + return buildBlock(editor, plugin, el as HTMLElement, children); } return children; diff --git a/packages/core/starter-kit/package.json b/packages/core/starter-kit/package.json index 4f64df7d9..433553902 100644 --- a/packages/core/starter-kit/package.json +++ b/packages/core/starter-kit/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/starter-kit", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "StarterKit for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx index 7a6ddd334..b5baa4a0e 100644 --- a/packages/development/src/pages/dev/index.tsx +++ b/packages/development/src/pages/dev/index.tsx @@ -10,7 +10,7 @@ import YooptaEditor, { } from '@yoopta/editor'; import YooptaStarterKit from '@yoopta/starter-kit'; import { html } from '@yoopta/exports'; -import { useMemo, useRef, useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; import { uploadToCloudinary } from '../../utils/cloudinary'; import { MARKS } from '../../utils/yoopta/marks'; import { YOOPTA_PLUGINS } from '../../utils/yoopta/plugins'; @@ -24,6 +24,12 @@ const BasicExample = () => { const [readOnly, setReadOnly] = useState(false); const [value, setValue] = useState(); + useEffect(() => { + editor.on('change', (data) => setValue(data)); + }, []); + + console.log(value); + return (
", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/accordion/package.json b/packages/plugins/accordion/package.json index ed718cd37..d945f404f 100644 --- a/packages/plugins/accordion/package.json +++ b/packages/plugins/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/accordion", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Accordion plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/blockquote/package.json b/packages/plugins/blockquote/package.json index 79ba155d9..49c76f059 100644 --- a/packages/plugins/blockquote/package.json +++ b/packages/plugins/blockquote/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/blockquote", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Blockquote plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/blockquote/src/plugin/index.tsx b/packages/plugins/blockquote/src/plugin/index.tsx index 4be2b13b6..b6090fb35 100644 --- a/packages/plugins/blockquote/src/plugin/index.tsx +++ b/packages/plugins/blockquote/src/plugin/index.tsx @@ -20,8 +20,9 @@ const Blockquote = new YooptaPlugin({ deserialize: { nodeNames: ['BLOCKQUOTE'], }, - serialize: (element, text) => { - return `
${text}
`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + return `
${text}
`; }, }, markdown: { diff --git a/packages/plugins/callout/package.json b/packages/plugins/callout/package.json index cd6527d51..646ec7113 100644 --- a/packages/plugins/callout/package.json +++ b/packages/plugins/callout/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/callout", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Callout plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/callout/src/plugin/index.tsx b/packages/plugins/callout/src/plugin/index.tsx index 3119b0a23..ec4781602 100644 --- a/packages/plugins/callout/src/plugin/index.tsx +++ b/packages/plugins/callout/src/plugin/index.tsx @@ -40,12 +40,13 @@ const Callout = new YooptaPlugin( } }, }, - serialize: (element, text) => { + serialize: (element, text, blockMeta) => { const theme: CSSProperties = CALLOUT_THEME_STYLES[element.props?.theme || 'default']; + const { align = 'left', depth = 0 } = blockMeta || {}; return `
${text}
`; }, diff --git a/packages/plugins/code/package.json b/packages/plugins/code/package.json index 53d4cac62..144716cc1 100644 --- a/packages/plugins/code/package.json +++ b/packages/plugins/code/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/code", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Code plugin with syntax highlighting for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/code/src/plugin/index.tsx b/packages/plugins/code/src/plugin/index.tsx index 97f14a2cd..d8cb173ea 100644 --- a/packages/plugins/code/src/plugin/index.tsx +++ b/packages/plugins/code/src/plugin/index.tsx @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor'; import { CodeElementProps, CodePluginBlockOptions, CodePluginElements } from '../types'; import { CodeEditor } from '../ui/Code'; +const ALIGNS_TO_JUSTIFY = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + const Code = new YooptaPlugin({ type: 'Code', customEditor: CodeEditor, @@ -28,7 +34,7 @@ const Code = new YooptaPlugin { if (el.nodeName === 'PRE') { const code = el.querySelector('code'); const textContent = code ? code.textContent : el.textContent; @@ -46,8 +52,11 @@ const Code = new YooptaPlugin { - return `
${`${text}`}
`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + const justify = ALIGNS_TO_JUSTIFY[align] || 'left'; + + return `
${text}
`.toString(); }, }, markdown: { diff --git a/packages/plugins/embed/package.json b/packages/plugins/embed/package.json index ea3abb60f..16add6c0d 100644 --- a/packages/plugins/embed/package.json +++ b/packages/plugins/embed/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/embed", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Embed plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/embed/src/plugin/index.tsx b/packages/plugins/embed/src/plugin/index.tsx index f2046d61c..ffec03745 100644 --- a/packages/plugins/embed/src/plugin/index.tsx +++ b/packages/plugins/embed/src/plugin/index.tsx @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor'; import { EmbedElementProps, EmbedPluginElements, EmbedPluginOptions, EmbedProviderTypes } from '../types'; import { EmbedRender } from '../ui/Embed'; +const ALIGNS_TO_JUSTIFY = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + const Embed = new YooptaPlugin({ type: 'Embed', elements: { @@ -47,7 +53,10 @@ const Embed = new YooptaPlugin { + serialize: (element, text, blockMeta) => { + const { align = 'center', depth = 0 } = blockMeta || {}; + const justify = ALIGNS_TO_JUSTIFY[align] || 'center'; + const URL_BUILDERS = { youtube: (id: string) => `https://www.youtube.com/embed/${id}`, vimeo: (id: string) => `https://player.vimeo.com/embed/${id}`, @@ -61,8 +70,8 @@ const Embed = new YooptaPlugin -
`; + return `
+
`; }, }, markdown: { diff --git a/packages/plugins/file/package.json b/packages/plugins/file/package.json index 141f97ca2..b9301746a 100644 --- a/packages/plugins/file/package.json +++ b/packages/plugins/file/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/file", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "File plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/file/src/plugin/index.tsx b/packages/plugins/file/src/plugin/index.tsx index 044db3ca4..bfbad2aba 100644 --- a/packages/plugins/file/src/plugin/index.tsx +++ b/packages/plugins/file/src/plugin/index.tsx @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor'; import { FileElementProps, FilePluginElements, FilePluginOptions } from '../types'; import { FileRender } from '../ui/File'; +const ALIGNS_TO_JUSTIFY = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + const File = new YooptaPlugin({ type: 'File', elements: { @@ -26,8 +32,13 @@ const File = new YooptaPlugin { - return `
${ element.props.format ? `${element.props.name}.${element.props.format}` : `${element.props.name}` diff --git a/packages/plugins/headings/package.json b/packages/plugins/headings/package.json index 7620a4582..eda910e28 100644 --- a/packages/plugins/headings/package.json +++ b/packages/plugins/headings/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/headings", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Headings plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/headings/src/plugin/HeadingOne.tsx b/packages/plugins/headings/src/plugin/HeadingOne.tsx index bdf647dea..21c16ae18 100644 --- a/packages/plugins/headings/src/plugin/HeadingOne.tsx +++ b/packages/plugins/headings/src/plugin/HeadingOne.tsx @@ -37,8 +37,10 @@ const HeadingOne = new YooptaPlugin({ deserialize: { nodeNames: ['H1'], }, - serialize: (element, text) => { - return `

${text}

`; + serialize: (element, text, blockMeta) => { + const { depth = 0, align = 'left' } = blockMeta || {}; + + return `

${text}

`; }, }, markdown: { diff --git a/packages/plugins/headings/src/plugin/HeadingThree.tsx b/packages/plugins/headings/src/plugin/HeadingThree.tsx index 99d2f42f1..41352d705 100644 --- a/packages/plugins/headings/src/plugin/HeadingThree.tsx +++ b/packages/plugins/headings/src/plugin/HeadingThree.tsx @@ -43,8 +43,10 @@ const HeadingThree = new YooptaPlugin({ deserialize: { nodeNames: ['H3'], }, - serialize: (element, text) => { - return `

${text}

`; + serialize: (element, text, blockMeta) => { + const { depth = 0, align = 'left' } = blockMeta || {}; + + return `

${text}

`; }, }, markdown: { diff --git a/packages/plugins/headings/src/plugin/HeadingTwo.tsx b/packages/plugins/headings/src/plugin/HeadingTwo.tsx index d6756a916..6427debe2 100644 --- a/packages/plugins/headings/src/plugin/HeadingTwo.tsx +++ b/packages/plugins/headings/src/plugin/HeadingTwo.tsx @@ -37,8 +37,10 @@ const HeadingTwo = new YooptaPlugin({ deserialize: { nodeNames: ['H2'], }, - serialize: (element, text) => { - return `

${text}

`; + serialize: (element, text, blockMeta) => { + const { depth = 0, align = 'left' } = blockMeta || {}; + + return `

${text}

`; }, }, markdown: { diff --git a/packages/plugins/image/package.json b/packages/plugins/image/package.json index c569e565f..ff9a429d2 100644 --- a/packages/plugins/image/package.json +++ b/packages/plugins/image/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/image", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Image plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/image/src/plugin/index.tsx b/packages/plugins/image/src/plugin/index.tsx index 56fce2bf6..178c50237 100644 --- a/packages/plugins/image/src/plugin/index.tsx +++ b/packages/plugins/image/src/plugin/index.tsx @@ -1,7 +1,13 @@ -import { buildBlockData, generateId, SlateElement, YooptaPlugin } from '@yoopta/editor'; +import { generateId, SlateElement, YooptaPlugin } from '@yoopta/editor'; import { ImageElementProps, ImagePluginElements, ImagePluginOptions } from '../types'; import { ImageRender } from '../ui/Image'; +const ALIGNS_TO_JUSTIFY = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + // [TODO] - caption element??, const Image = new YooptaPlugin({ type: 'Image', @@ -39,6 +45,7 @@ const Image = new YooptaPlugin { - return `
- ${element.props.alt} + serialize: (element, text, blockMeta) => { + const { align = 'center', depth = 0 } = blockMeta || {}; + const justify = ALIGNS_TO_JUSTIFY[align] || 'center'; + + return `
+ ${element.props.alt}
`; }, }, diff --git a/packages/plugins/link/package.json b/packages/plugins/link/package.json index 63bbbb70c..1e7c98599 100644 --- a/packages/plugins/link/package.json +++ b/packages/plugins/link/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/link", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Link plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/lists/package.json b/packages/plugins/lists/package.json index c51896706..fb1fa31b3 100644 --- a/packages/plugins/lists/package.json +++ b/packages/plugins/lists/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/lists", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Lists plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/lists/src/plugin/BulletedList.tsx b/packages/plugins/lists/src/plugin/BulletedList.tsx index c9ffb2f4d..b066789ed 100644 --- a/packages/plugins/lists/src/plugin/BulletedList.tsx +++ b/packages/plugins/lists/src/plugin/BulletedList.tsx @@ -57,8 +57,10 @@ const BulletedList = new YooptaPlugin { - return `
  • ${text}
`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + + return `
  • ${text}
`; }, }, markdown: { diff --git a/packages/plugins/lists/src/plugin/NumberedList.tsx b/packages/plugins/lists/src/plugin/NumberedList.tsx index 6811a8e87..bdf0be063 100644 --- a/packages/plugins/lists/src/plugin/NumberedList.tsx +++ b/packages/plugins/lists/src/plugin/NumberedList.tsx @@ -59,8 +59,10 @@ const NumberedList = new YooptaPlugin<'numbered-list', ListElementProps>({ } }, }, - serialize: (element, text) => { - return `
  1. ${text}
`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + + return `
  1. ${text}
`; }, }, markdown: { diff --git a/packages/plugins/lists/src/plugin/TodoList.tsx b/packages/plugins/lists/src/plugin/TodoList.tsx index daee19a4b..854260deb 100644 --- a/packages/plugins/lists/src/plugin/TodoList.tsx +++ b/packages/plugins/lists/src/plugin/TodoList.tsx @@ -64,8 +64,12 @@ const TodoList = new YooptaPlugin({ } }, }, - serialize: (element, text) => { - return `
  • [${element.props.checked ? 'x' : ' '}] ${text}
`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + + return `
  • [${ + element.props.checked ? 'x' : ' ' + }] ${text}
`; }, }, markdown: { diff --git a/packages/plugins/paragraph/package.json b/packages/plugins/paragraph/package.json index 4ce2439b7..3720eede5 100644 --- a/packages/plugins/paragraph/package.json +++ b/packages/plugins/paragraph/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/paragraph", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Paragraph plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/paragraph/src/plugin/index.tsx b/packages/plugins/paragraph/src/plugin/index.tsx index ee964007c..42cc3c5a7 100644 --- a/packages/plugins/paragraph/src/plugin/index.tsx +++ b/packages/plugins/paragraph/src/plugin/index.tsx @@ -20,8 +20,9 @@ const Paragraph = new YooptaPlugin({ deserialize: { nodeNames: ['P'], }, - serialize: (element, text) => { - return `

${text}

`; + serialize: (element, text, blockMeta) => { + const { align = 'left', depth = 0 } = blockMeta || {}; + return `

${text}

`; }, }, markdown: { diff --git a/packages/plugins/video/package.json b/packages/plugins/video/package.json index 8a9ca4e10..e20cfe8bc 100644 --- a/packages/plugins/video/package.json +++ b/packages/plugins/video/package.json @@ -1,6 +1,6 @@ { "name": "@yoopta/video", - "version": "4.6.6", + "version": "4.6.7-rc.0", "description": "Video plugin for Yoopta Editor", "author": "Darginec05 ", "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme", diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx index 73fe67aad..abac2d890 100644 --- a/packages/plugins/video/src/plugin/index.tsx +++ b/packages/plugins/video/src/plugin/index.tsx @@ -2,6 +2,12 @@ import { generateId, YooptaPlugin } from '@yoopta/editor'; import { VideoElementProps, VideoPluginElements, VideoPluginOptions } from '../types'; import { VideoRender } from '../ui/Video'; +const ALIGNS_TO_JUSTIFY = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + const Video = new YooptaPlugin({ type: 'Video', elements: { @@ -14,6 +20,7 @@ const Video = new YooptaPlugin { + serialize: (element, text, blockMeta) => { + const { align = 'center', depth = 0 } = blockMeta || {}; + const justify = ALIGNS_TO_JUSTIFY[align] || 'center'; + return ` -
-