Work on normalization

src/blocks/Text/TextBlockEdit.jsx

@@ -32,7 +32,7 @@ import './css/editor.css';
 
 // TODO: refactor dropzone to separate component wrapper
 
-const DEBUG = false;
+const DEBUG = true;
 
 const TextBlockEdit = (props) => {
   const {

src/blocks/Text/extensions/index.js

@@ -2,3 +2,4 @@ export * from './insertBreak';
 export * from './withDeserializers';
 export * from './breakList';
 export * from './withLists';
+export * from './normalizeBlocks';

src/blocks/Text/extensions/insertBreak.js

@@ -25,6 +25,7 @@ export const withSplitBlocksOnBreak = (editor) => {
   const { insertBreak } = editor;
 
   editor.insertBreak = () => {
+    // console.log('insert break');
     // if selection is expanded, delete it
     if (rangeIsInSplittableNode(editor, editor.selection)) {
       const block = Editor.parent(editor, editor.selection);

src/blocks/Text/extensions/normalizeBlocks.js

@@ -0,0 +1,62 @@
+import { Text, Transforms, Element, Node } from 'slate';
+import config from '@plone/volto/registry';
+import { deconstructToVoltoBlocks } from 'volto-slate/utils';
+
+export const normalizeBlocks = (editor) => {
+  // enforce list rules (no block elements, only ol/ul/li as possible children
+  const { normalizeNode } = editor;
+  const { slate } = config.settings;
+  const validListElements = [...slate.listTypes, slate.listItemType];
+
+  editor.normalizeNode = (entry) => {
+    let isNormalizing = false;
+
+    if (!editor.voltoBlockNormalizing) {
+      editor.voltoBlockNormalizing = true;
+      isNormalizing = true;
+    }
+
+    const [node, path] = entry;
+
+    if (
+      !Text.isText(node) &&
+      Element.isElement(node) &&
+      !editor.isInline(node) &&
+      !validListElements.includes(node.type) &&
+      path.length > 1
+    ) {
+      console.log('not inline', node, path);
+      Transforms.liftNodes(editor, { at: path, split: true });
+      // for (const [child, childPath] of Node.children(editor, path)) {
+      //   if (!validListElements.includes(child.type)) {
+      //     Transforms.liftNodes(editor, { at: childPath, split: true });
+      //     return;
+      //   }
+      // }
+    }
+    // if (node.type === 'ol' || node.type === 'ul') {
+    //   if (Element.isElement(node) && slate.listTypes.includes(node.type)) {
+    //     for (const [child, childPath] of Node.children(editor, path)) {
+    //       if (!validListElements.includes(child.type)) {
+    //         Transforms.liftNodes(editor, { at: childPath, split: true });
+    //         return;
+    //       }
+    //     }
+    //   }
+    // }
+
+    // if (node.type === slate.listItemType) {
+    //   console.log('node', node);
+    // }
+
+    normalizeNode(entry);
+
+    if (isNormalizing) {
+      editor.voltoBlockNormalizing = undefined;
+      console.log('deconstruct', editor);
+      deconstructToVoltoBlocks(editor);
+    }
+  };
+
+  return editor;
+};

src/blocks/Text/extensions/withLists.js

@@ -10,16 +10,21 @@ export const withLists = (editor) => {
   editor.normalizeNode = (entry) => {
     const [node, path] = entry;
 
-    if (node.type === 'ol' || node.type === 'ul')
-      if (Element.isElement(node) && slate.listTypes.includes(node.type)) {
-        for (const [child, childPath] of Node.children(editor, path)) {
-          if (!validListElements.includes(child.type)) {
-            Transforms.liftNodes(editor, { at: childPath, split: true });
-            return;
-          }
+    if (Element.isElement(node) && slate.listTypes.includes(node.type)) {
+      for (const [child, childPath] of Node.children(editor, path)) {
+        if (!validListElements.includes(child.type)) {
+          Transforms.liftNodes(editor, { at: childPath, split: true });
+          return;
         }
       }
+    }
 
+    // if (node.type === 'ol' || node.type === 'ul') { }
+    // if (node.type === slate.listItemType) {
+    //   console.log('node', node);
+    // }
+
+    console.log('normalizing', entry);
     normalizeNode(entry);
   };
 

src/blocks/Text/index.js

@@ -22,6 +22,7 @@ import {
   breakList,
   // withParagraphs,
   withLists,
+  normalizeBlocks,
 } from './extensions';
 import { extractImages } from 'volto-slate/editor/plugins/Image/deconstruct';
 import { extractTables } from 'volto-slate/blocks/Table/deconstruct';
@@ -39,6 +40,7 @@ export default (config) => {
       withDeleteSelectionOnEnter,
       withDeserializers,
       breakList,
+      normalizeBlocks,
     ],
 
     // Pluggable handlers for the onKeyDown event of <Editable />

src/components/ElementEditor/SidebarEditor.jsx

@@ -17,7 +17,13 @@ const SidebarEditor = (props) => {
 
   const dispatch = useDispatch();
 
-  const active = getActiveElement(editor);
+  let active;
+  try {
+    active = getActiveElement(editor);
+  } catch {
+    // eslint-disable-next-line
+    console.warn("Error in getting active element", error);
+  }
 
   // Hide the editor when switching to another text element
   React.useEffect(() => {

src/editor/SlateEditor.jsx

@@ -152,10 +152,17 @@ class SlateEditor extends Component {
       'selectionchange',
       this.onDOMSelectionChange,
     );
-
     if (this.props.selected) {
-      if (!ReactEditor.isFocused(this.state.editor)) {
-        setTimeout(() => ReactEditor.focus(this.state.editor), 10); // flush
+      let focused = true;
+      try {
+        focused = ReactEditor.isFocused(this.state.editor);
+      } catch {}
+      if (!focused) {
+        setTimeout(() => {
+          try {
+            ReactEditor.focus(this.state.editor);
+          } catch {}
+        }, 10); // flush
       }
     }
   }

src/editor/extensions/isInline.js

@@ -5,7 +5,7 @@ export const isInline = (editor) => {
   const { slate } = config.settings;
 
   editor.isInline = (element) => {
-    return slate.inlineElements.includes(element.type)
+    return element && slate.inlineElements.includes(element.type)
       ? true
       : isInline(element);
   };

src/editor/plugins/Image/extensions.js

@@ -86,7 +86,7 @@ export const withImage = (editor) => {
   // If it's not marked as inline, Slate will strip the {type:'img"} nodes when
   // it finds them next to {text: ''} nodes
   editor.isInline = (element) => {
-    return element.type === IMAGE ? true : isInline(element);
+    return element && element.type === IMAGE ? true : isInline(element);
   };
 
   editor.htmlTagsToSlate = {

src/editor/plugins/Link/extensions.js

@@ -8,7 +8,7 @@ export const withLink = (editor) => {
   const { isInline } = editor;
 
   editor.isInline = (element) => {
-    return element.type === LINK ? true : isInline(element);
+    return element && element.type === LINK ? true : isInline(element);
   };
 
   // editor.insertText = (text) => {

src/editor/plugins/SimpleLink/extensions.js

@@ -6,7 +6,7 @@ export const withSimpleLink = (editor) => {
   const { isInline } = editor;
 
   editor.isInline = (element) => {
-    return element.type === SIMPLELINK ? true : isInline(element);
+    return element && element.type === SIMPLELINK ? true : isInline(element);
   };
 
   // editor.insertText = (text) => {