Add stub table deconstructor

src/blocks/Table/deconstruct.js

@@ -0,0 +1,100 @@
+import { v4 as uuid } from 'uuid';
+import { Editor, Transforms } from 'slate';
+import { TABLE, TD } from 'volto-slate/constants';
+
+export function syncCreateTableBlock(content) {
+  const id = uuid();
+  const block = {
+    '@type': 'slateTable',
+    ...content,
+  };
+  return [id, block];
+}
+
+export const extractTables = (editor, pathRef) => {
+  const tableNodes = Array.from(
+    Editor.nodes(editor, {
+      at: pathRef.current,
+      match: (node) => node.type === TABLE,
+    }),
+  );
+  const tables = tableNodes.map(([el]) => extractVoltoTable(el));
+
+  Transforms.removeNodes(editor, {
+    at: pathRef.current,
+    match: (node) => node.type === TABLE,
+  });
+
+  return tables.map((el) => syncCreateTableBlock(el));
+};
+
+function extractVoltoTable(el) {
+  console.log('table', el);
+  return null;
+}
+
+// import { v4 as uuid } from 'uuid';
+// import { Transforms } from 'slate';
+// import { IMAGE } from 'volto-slate/constants';
+// import { jsx } from 'slate-hyperscript';
+// import { getBaseUrl } from '@plone/volto/helpers';
+// import { createSlateTableBlock } from 'volto-slate/utils';
+// export const deserializeTableTag = (editor, el) => {
+//   if (el.localName !== 'table') {
+//     return null;
+//   }
+//
+//   let rows = [];
+//
+//   el.querySelectorAll('tr').forEach((val, idx) => {
+//     let row = { key: uuid(), cells: [] };
+//     val.childNodes.forEach((val2, idx2) => {
+//       let ds = deserialize(editor, val2);
+//
+//       function dsx(ds) {
+//         return Array.isArray(ds)
+//           ? ds.map((x) => {
+//               if (typeof x === 'string') {
+//                 return { type: 'p', children: [{ text: x }] };
+//               }
+//               return dsx(x);
+//             })
+//           : ds;
+//       }
+//       ds = dsx(ds);
+//
+//       if (val2.localName === 'th') {
+//         row.cells.push({
+//           key: uuid(),
+//           type: 'header',
+//           value: ds,
+//         });
+//       } else if (val2.localName === 'td') {
+//         row.cells.push({
+//           key: uuid(),
+//           type: 'data',
+//           value: ds,
+//         });
+//       }
+//     });
+//
+//     rows.push(row);
+//   });
+//
+//   console.log('TABLE', rows);
+//
+//   // TODO: get the correct index here
+//
+//   // const { onChangeBlock, onAddBlock } = editor.getBlockProps();
+//   // createSlateTableBlock(rows, 0, { onChangeBlock, onAddBlock });
+//
+//   // const attrs = { type: IMAGE };
+//
+//   // for (const name of el.getAttributeNames()) {
+//   //   attrs[name] = el.getAttribute(name);
+//   // }
+//
+//   // return jsx('text', {}, '');
+//   // return [jsx('element', attrs, [{ text: '' }]), jsx('text', {}, '')];
+//   return null; // [jsx('element', attrs, [{ text: '' }])];
+// };

src/blocks/Table/index.js

@@ -1,8 +1,16 @@
 import codeSVG from '@plone/volto/icons/code.svg';
 import TableEdit from './Edit';
 import TableView from './View';
+import { extractTables } from './deconstruct';
 
 export default function install(config) {
+  config.settings.slate = {
+    ...config.settings.slate,
+    voltoBlockEmiters: [
+      ...(config.settings.slate.voltoBlockEmiters || []),
+      extractTables,
+    ],
+  };
   config.blocks.blocksConfig.slateTable = {
     id: 'slateTable',
     title: 'Slate Table',

src/blocks/Text/index.js

@@ -66,7 +66,10 @@ export default (config) => {
     // Used by deconstructToVoltoBlocks to transform tags such as <img> to a Volto image block
     // These emiters receive (editor, path), emit [blockid, blockoptions] and
     // are allowed to change the editor contents (for the given path)
-    voltoBlockEmiters: [extractImages],
+    voltoBlockEmiters: [
+      ...(config.settings.slate.voltoBlockEmiters || []),
+      extractImages,
+    ],
 
     ...config.settings.slate, // TODO: is this correct for volto-slate addons?
   };

src/editor/plugins/Image/deconstruct.js

@@ -11,17 +11,19 @@ export function syncCreateImageBlock(url) {
   return [id, block];
 }
 
-export const extractImages = (editor, path) => {
-  const images = [];
+// This function is used by deconstructToVoltoBlocks, so not directly by the
+// <SlateEditor>. File exists here because there's no "blocks/Image" folder
+export const extractImages = (editor, pathRef) => {
   const imageNodes = Array.from(
     Editor.nodes(editor, {
-      at: path,
+      at: pathRef.current,
       match: (node) => node.type === IMAGE,
     }),
   );
-  imageNodes.forEach(([el, path]) => {
-    images.push(el);
-    Transforms.removeNodes(editor, { at: path });
+  const images = imageNodes.map(([el, path]) => el);
+  Transforms.removeNodes(editor, {
+    at: pathRef.current,
+    match: (node) => node.type === IMAGE,
   });
 
   return images.map((el) => syncCreateImageBlock(el.src));

src/utils/volto-blocks.js

@@ -153,12 +153,13 @@ export function deconstructToVoltoBlocks(editor) {
   // For the Volto blocks manipulation we do low-level changes to the context
   // form state, as that ensures a better performance (no un-needed UI updates)
 
-  console.log('editor.children', editor.children);
   const blockProps = editor.getBlockProps();
   const { slate } = settings;
   const { voltoBlockEmiters } = slate;
 
   return new Promise((resolve, reject) => {
+    console.log('editor', editor);
+    if (!editor?.children) return;
     if (editor.children.length === 1) {
       return resolve([blockProps.block]);
     }
@@ -172,16 +173,22 @@ export function deconstructToVoltoBlocks(editor) {
     const { index } = blockProps;
     let blocks = [];
 
-    for (const [, path] of Node.children(editor, [])) {
-      const pathRef = 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, path)).flat(1);
-      const [childNode] = Editor.node(editor, pathRef.current);
-
-      if (childNode && !Editor.isEmpty(editor, childNode))
-        blocks.push(syncCreateSlateBlock([childNode]));
-
+      let extras = voltoBlockEmiters
+        .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))
+          blocks.push(syncCreateSlateBlock([childNode]));
+      }
       blocks = [...blocks, ...extras];
     }
 
@@ -218,69 +225,3 @@ export function deconstructToVoltoBlocks(editor) {
     setContextData(data).then(() => resolve(blockids));
   });
 }
-
-// import { v4 as uuid } from 'uuid';
-// import { Transforms } from 'slate';
-// import { IMAGE } from 'volto-slate/constants';
-// import { jsx } from 'slate-hyperscript';
-// import { getBaseUrl } from '@plone/volto/helpers';
-// import { createSlateTableBlock } from 'volto-slate/utils';
-// export const deserializeTableTag = (editor, el) => {
-//   if (el.localName !== 'table') {
-//     return null;
-//   }
-//
-//   let rows = [];
-//
-//   el.querySelectorAll('tr').forEach((val, idx) => {
-//     let row = { key: uuid(), cells: [] };
-//     val.childNodes.forEach((val2, idx2) => {
-//       let ds = deserialize(editor, val2);
-//
-//       function dsx(ds) {
-//         return Array.isArray(ds)
-//           ? ds.map((x) => {
-//               if (typeof x === 'string') {
-//                 return { type: 'p', children: [{ text: x }] };
-//               }
-//               return dsx(x);
-//             })
-//           : ds;
-//       }
-//       ds = dsx(ds);
-//
-//       if (val2.localName === 'th') {
-//         row.cells.push({
-//           key: uuid(),
-//           type: 'header',
-//           value: ds,
-//         });
-//       } else if (val2.localName === 'td') {
-//         row.cells.push({
-//           key: uuid(),
-//           type: 'data',
-//           value: ds,
-//         });
-//       }
-//     });
-//
-//     rows.push(row);
-//   });
-//
-//   console.log('TABLE', rows);
-//
-//   // TODO: get the correct index here
-//
-//   // const { onChangeBlock, onAddBlock } = editor.getBlockProps();
-//   // createSlateTableBlock(rows, 0, { onChangeBlock, onAddBlock });
-//
-//   // const attrs = { type: IMAGE };
-//
-//   // for (const name of el.getAttributeNames()) {
-//   //   attrs[name] = el.getAttribute(name);
-//   // }
-//
-//   // return jsx('text', {}, '');
-//   // return [jsx('element', attrs, [{ text: '' }]), jsx('text', {}, '')];
-//   return null; // [jsx('element', attrs, [{ text: '' }])];
-// };