Merge pull request #158 from eea/develop

Fix for pasting links breaking slate blocks into multiple blocks

CHANGELOG.md

@@ -4,9 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [4.0.1](https://github.com/eea/volto-slate/compare/4.0.1-alpha.0...4.0.1)
+
+
+#### [4.0.1-alpha.0](https://github.com/eea/volto-slate/compare/4.0.0...4.0.1-alpha.0)
+
+> 27 September 2021
+
+- Fix for pasting links breaking slate blocks into multiple blocks [`1ff750f`](https://github.com/eea/volto-slate/commit/1ff750f43d5ab03e8279387809e258bdcf7cdbb8)
+
 #### [4.0.0](https://github.com/eea/volto-slate/compare/4.0.0-alpha.0...4.0.0)
 
+> 24 September 2021
+
+- Release 4.0.0 [`#157`](https://github.com/eea/volto-slate/pull/157)
 - Namespace the plugins, otherwise there's problems with richtext fields [`#156`](https://github.com/eea/volto-slate/pull/156)
+- Release [`#154`](https://github.com/eea/volto-slate/pull/154)
+- Release 3.1.0 - html widget fixes (#149) [`#152`](https://github.com/eea/volto-slate/pull/152)
+- Upgrade to 3.x.x README update [`#151`](https://github.com/eea/volto-slate/pull/151)
+- Release 3.0.0 [`#150`](https://github.com/eea/volto-slate/pull/150)
 - Fix tableButton profile to enable/disable only table button [`20887a7`](https://github.com/eea/volto-slate/commit/20887a707e793e97054863ea1429c1ca7f862e14)
 
 #### [4.0.0-alpha.0](https://github.com/eea/volto-slate/compare/3.1.1...4.0.0-alpha.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "volto-slate",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/blocks/Text/TextBlockEdit.jsx

@@ -156,6 +156,18 @@ export const DefaultTextBlockEditor = (props) => {
     [defaultSelection, block, saveSlateBlockSelection],
   );
 
+  const onEditorChange = (value, editor) => {
+    ReactDOM.unstable_batchedUpdates(() => {
+      onChangeBlock(block, {
+        ...data,
+        value,
+        plaintext: serializeNodesToText(value || []),
+        // TODO: also add html serialized value
+      });
+      deconstructToVoltoBlocks(editor);
+    });
+  };
+
   // Get editing instructions from block settings or props
   let instructions = data?.instructions?.data || data?.instructions;
   if (!instructions || instructions === '<p><br/></p>') {
@@ -215,17 +227,7 @@ export const DefaultTextBlockEditor = (props) => {
                       onSelectBlock(block);
                     }
                   }}
-                  onChange={(value, editor) => {
-                    ReactDOM.unstable_batchedUpdates(() => {
-                      onChangeBlock(block, {
-                        ...data,
-                        value,
-                        plaintext: serializeNodesToText(value || []),
-                        // TODO: also add html serialized value
-                      });
-                      deconstructToVoltoBlocks(editor);
-                    });
-                  }}
+                  onChange={(value, editor) => onEditorChange(value, editor)}
                   onKeyDown={handleKey}
                   selected={selected}
                   placeholder={placeholder}

src/utils/volto-blocks.js

@@ -138,6 +138,19 @@ export function getPreviousVoltoBlock(index, properties) {
   return [prevBlock, prevBlockId];
 }
 
+//check for existing img childs
+const checkContainImg = (elements) => {
+  var check = false;
+  elements.forEach((e) =>
+    e.children.forEach((c) => {
+      if (c && c.type && c.type === 'img') {
+        check = true;
+      }
+    }),
+  );
+  return check;
+};
+
 /**
  * The editor has the properties `dataTransferHandlers` (object) and
  * `dataTransferFormatsOrder` and in `dataTransferHandlers` are functions which
@@ -175,32 +188,63 @@ export function deconstructToVoltoBlocks(editor) {
 
   return new Promise((resolve, reject) => {
     if (!editor?.children) return;
-    if (editor.children.length === 1) {
+
+    var _editor = editor;
+
+    if (_editor.children.length === 1) {
       return resolve([blockProps.block]);
     }
 
-    const { properties, onChangeField, onSelectBlock } = editor.getBlockProps();
+    //catch for urls that will split the block.
+    //This containsImage checks if the new top-level child contains an image
+    var containsImage = checkContainImg(_editor.children);
+
+    //dont split into new blocks if it's an url. skip this if it has imgs
+    if (_editor.children.length > 1 && !containsImage) {
+      var newChildren = [];
+      _editor.children.forEach((child) =>
+        child.children.forEach((nephew) => newChildren.push({ ...nephew })),
+      );
+      _editor = {
+        ...editor,
+        children: [
+          {
+            ...editor.children[0],
+            children:
+              editor.children.length > 1
+                ? newChildren
+                : [...editor.children[0].children],
+          },
+        ],
+      };
+    }
+
+    const {
+      properties,
+      onChangeField,
+      onSelectBlock,
+    } = _editor.getBlockProps();
     const blocksFieldname = getBlocksFieldname(properties);
     const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
 
     const { index } = blockProps;
     let blocks = [];
 
     // TODO: should use Editor.levels() instead of Node.children
-    const pathRefs = Array.from(Node.children(editor, [])).map(([, path]) =>
-      Editor.pathRef(editor, path),
+    const pathRefs = Array.from(Node.children(_editor, [])).map(([, path]) =>
+      Editor.pathRef(_editor, path),
     );
 
     for (const pathRef of pathRefs) {
       // extra nodes are always extracted after the text node
       let extras = voltoBlockEmiters
-        .map((emit) => emit(editor, pathRef))
+        .map((emit) => emit(_editor, pathRef))
         .flat(1);
 
       // The node might have been replaced with a Volto block
       if (pathRef.current) {
-        const [childNode] = Editor.node(editor, pathRef.current);
-        if (childNode && !Editor.isEmpty(editor, childNode))
+        const [childNode] = Editor.node(_editor, pathRef.current);
+        if (childNode && !Editor.isEmpty(_editor, childNode))
           blocks.push(syncCreateSlateBlock([childNode]));
       }
       blocks = [...blocks, ...extras];