Meta info should be saved after copy/paste

package.json

@@ -10,7 +10,7 @@
   "private": true,
   "scripts": {
     "dev": "npm-run-all --parallel start serve",
-    "start": "yarn lerna run start --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/code --scope @yoopta/embed --scope @yoopta/file --scope @yoopta/image --scope @yoopta/video --parallel --ignore development",
     "serve": "yarn lerna run dev --scope=development",
     "build": "yarn clean && yarn install && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",

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;

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 '';

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[];

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;