@plone/volto 16.0.0 → 16.2.0

package/packages/volto-slate/src/editor/deserialize.js

@@ -1,70 +1,37 @@
 import { jsx } from 'slate-hyperscript';
 import { Text } from 'slate';
-import { isWhitespace } from '@plone/volto-slate/utils';
-import {
-  TD,
-  TH,
-  COMMENT,
-  ELEMENT_NODE,
-  INLINE_ELEMENTS,
-  TEXT_NODE,
-} from '../constants';
-
-const isInline = (node) =>
-  node &&
-  (node.nodeType === TEXT_NODE || INLINE_ELEMENTS.includes(node.nodeName));
+// import { isWhitespace } from '@plone/volto-slate/utils';
+import { TD, TH, COMMENT, ELEMENT_NODE, TEXT_NODE } from '../constants';
+
+import { collapseInlineSpace } from './utils';
 
 /**
- * Deserialize to an object or an Array.
+ * Deserialize to a Slate Node, an Array of Slate Nodes or null
+ *
+ * One particularity of this function is that it tries to do
+ * a "perception-based" conversion. For example, in html, multiple whitespaces
+ * display as a single space. A new line character in text is actually rendered
+ * as a space, etc. So we try to meet user's expectations that when they
+ * copy/paste content, we'll preserve the aspect of their text.
  *
- * This returns a Slate Node or null.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
  */
 export const deserialize = (editor, el) => {
-  // console.log('deserialize el:', el);
   const { htmlTagsToSlate } = editor;
 
-  // console.log('des:', el.nodeType, el);
   if (el.nodeType === COMMENT) {
     return null;
   } else if (el.nodeType === TEXT_NODE) {
-    // instead of === '\n' we use isWhitespace for when deserializing tables
-    // from Calc and other similar cases
-
-    // console.log('maybe whitespace', {
-    //   text: `-${el.textContent}-`,
-    //   prev: el.previousSibling,
-    //   next: el.nextSibling,
-    //   isPrev: isInline(el.previousSibling),
-    //   isNext: isInline(el.nextSibling),
-    //   prevName: el.previousSibling && el.previousSibling.nodeName,
-    //   nextName: el.nextSibling && el.nextSibling.nodeName,
-    // });
-
-    if (isWhitespace(el.textContent)) {
-      // console.log({
-      //   text: `-${el.textContent}-`,
-      //   prev: el.previousSibling,
-      //   next: el.nextSibling,
-      //   isPrev: isInline(el.previousSibling),
-      //   isNext: isInline(el.nextSibling),
-      //   prevName: el.previousSibling && el.previousSibling.nodeName,
-      //   nextName: el.nextSibling && el.nextSibling.nodeName,
-      // });
-      // if it's empty text between 2 tags, it should be ignored
-      return isInline(el.previousSibling) || isInline(el.nextSibling)
-        ? { text: el.textContent } // perceptually multiple whitespace render as a single space
-        : null;
-    }
-    return {
-      text: el.textContent
-        .replace(/\n$/g, ' ')
-        .replace(/\n/g, ' ')
-        .replace(/\t/g, ''),
-    };
+    const text = collapseInlineSpace(el);
+    return text
+      ? {
+          text,
+        }
+      : null;
   } else if (el.nodeType !== ELEMENT_NODE) {
     return null;
   } else if (el.nodeName === 'BR') {
-    // TODO: is handling <br> like this ok in all cases ?
+    // gets merged with sibling text nodes by Slate normalization in insertData
     return { text: '\n' };
   }
 
@@ -78,7 +45,8 @@ export const deserialize = (editor, el) => {
     return htmlTagsToSlate[nodeName](editor, el);
   }
 
-  return deserializeChildren(el, editor); // fallback deserializer
+  // fallback deserializer, all unknown elements are "stripped"
+  return deserializeChildren(el, editor);
 };
 
 export const typeDeserialize = (editor, el) => {
@@ -138,10 +106,11 @@ export const inlineTagDeserializer = (attrs) => (editor, el) => {
 export const spanTagDeserializer = (editor, el) => {
   const style = el.getAttribute('style') || '';
   let children = el.childNodes;
+
   if (
     // handle formatting from OpenOffice
     children.length === 1 &&
-    children[0].nodeType === 3 &&
+    children[0].nodeType === TEXT_NODE &&
     children[0].textContent === '\n'
   ) {
     return jsx('text', {}, ' ');
@@ -149,7 +118,7 @@ export const spanTagDeserializer = (editor, el) => {
   children = deserializeChildren(el, editor);
 
   // whitespace is replaced by deserialize() with null;
-  children = children.map((c) => (c === null ? ' ' : c));
+  children = children.map((c) => (c === null ? '' : c));
 
   // TODO: handle sub/sup as <sub> and <sup>
   // Handle Google Docs' <sub> formatting
@@ -171,6 +140,7 @@ export const spanTagDeserializer = (editor, el) => {
   const res = children.find((c) => typeof c !== 'string')
     ? children
     : jsx('text', {}, children);
+
   return res;
 };
 

package/packages/volto-slate/src/editor/extensions/index.js

@@ -3,3 +3,4 @@ export * from './insertData';
 export * from './isInline';
 export * from './withDeserializers';
 export * from './normalizeNode';
+export * from './normalizeExternalData';

package/packages/volto-slate/src/editor/extensions/insertData.js

@@ -29,14 +29,27 @@ export const insertData = (editor) => {
 
       let fragment;
 
+      // eslint-disable-next-line no-console
+      console.debug('clipboard operation', {
+        clipboard: dt,
+        parsedBody: body,
+      });
+
       const val = deserialize(editor, body);
       fragment = Array.isArray(val) ? val : [val];
-
-      // external normalization
-      fragment = normalizeExternalData(editor, fragment);
+      fragment = editor.normalizeExternalData(fragment);
 
       editor.insertFragment(fragment);
 
+      // eslint-disable-next-line no-console
+      console.debug('result clipboard operation', {
+        clipboard: dt,
+        parsedBody: body,
+        deserializedValue: val,
+        normalizedFragment: fragment,
+        editorChildren: editor.children,
+      });
+
       return true;
     },
     'text/plain': (dt, fullMime) => {
@@ -94,6 +107,7 @@ export const insertData = (editor) => {
         }
       }
 
+      // always normalize when dealing with plain text
       const nodes = normalizeExternalData(editor, fragment);
       if (!containsText) {
         Transforms.insertNodes(editor, nodes);
@@ -116,7 +130,6 @@ export const insertData = (editor) => {
       editor.beforeInsertData(data);
     }
 
-    // debugger;
     for (let i = 0; i < editor.dataTransferFormatsOrder.length; ++i) {
       const dt = editor.dataTransferFormatsOrder[i];
       if (dt === 'files') {

package/packages/volto-slate/src/editor/extensions/normalizeExternalData.js

@@ -0,0 +1,8 @@
+import { normalizeExternalData as normalize } from '@plone/volto-slate/utils';
+
+export function normalizeExternalData(editor) {
+  editor.normalizeExternalData = (fragment) => {
+    return normalize(fragment);
+  };
+  return editor;
+}

package/packages/volto-slate/src/editor/ui/Toolbar.jsx

@@ -20,7 +20,7 @@ const Toolbar = ({
 
   useEffect(() => {
     const domNode = ref.current;
-    let rect;
+    let rect = { width: 1, top: 0, left: 0 };
 
     if ((children || []).length === 0) {
       domNode.removeAttribute('style');
@@ -63,8 +63,13 @@ const Toolbar = ({
       // TODO: should we fallback to editor.getSelection()?
       // TODO: test with third party plugins
       const slateNode = Node.get(editor, selection.anchor.path);
-      const domEl = ReactEditor.toDOMNode(editor, slateNode);
-      rect = domEl.getBoundingClientRect();
+      try {
+        const domEl = ReactEditor.toDOMNode(editor, slateNode);
+        rect = domEl.getBoundingClientRect();
+      } catch {
+        // ignoring error here is safe, editor is out of sync and the selection
+        // is actually none, so no toolbar should be shown
+      }
     }
 
     domNode.style.opacity = 1;

package/packages/volto-slate/src/editor/ui/ToolbarButton.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
-import { wait, render } from '@testing-library/react';
+import { waitFor, render } from '@testing-library/react';
 
 import ToolbarButton from './ToolbarButton';
 
@@ -20,6 +20,6 @@ describe('ToolbarButton', () => {
         <ToolbarButton />
       </Provider>,
     );
-    await wait(() => expect(asFragment()).toMatchSnapshot());
+    await waitFor(() => expect(asFragment()).toMatchSnapshot());
   });
 });

package/packages/volto-slate/src/editor/utils.js

@@ -0,0 +1,248 @@
+import { INLINE_ELEMENTS, TEXT_NODE } from '../constants';
+
+// Original at https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
+/**
+ * Throughout, whitespace is defined as one of the characters
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * This does not use JavaScript's "\s" because that includes non-breaking
+ * spaces (and also some other characters).
+ */
+
+/**
+ * Determine whether a node's text content is entirely whitespace.
+ *
+ * @param nod  A node implementing the |CharacterData| interface (i.e.,
+ *             a |Text|, |Comment|, or |CDATASection| node
+ * @return     True if all of the text content of |nod| is whitespace,
+ *             otherwise false.
+ */
+export function is_all_ws(text) {
+  return !/[^\t\n\r ]/.test(text);
+}
+
+/**
+ * Version of |data| that doesn't include whitespace at the beginning
+ * and end and normalizes all whitespace to a single space. (Normally
+ * |data| is a property of text nodes that gives the text of the node.)
+ *
+ * @param txt  The text node whose data should be returned
+ * @return     A string giving the contents of the text node with
+ *             whitespace collapsed.
+ */
+export function data_of(txt) {
+  let data = txt.textContent;
+  data = data.replace(/[\t\n\r ]+/g, ' ');
+  if (data[0] === ' ') {
+    data = data.substring(1, data.length);
+  }
+  if (data[data.length - 1] === ' ') {
+    data = data.substring(0, data.length - 1);
+  }
+  return data;
+}
+
+/**
+ * Determine if a node should be ignored by the iterator functions.
+ *
+ * @param nod  An object implementing the DOM1 |Node| interface.
+ * @return     true if the node is:
+ *                1) A |Text| node that is all whitespace
+ *                2) A |Comment| node
+ *             and otherwise false.
+ */
+
+export function is_ignorable(nod) {
+  return (
+    nod.nodeType === 8 || // A comment node
+    (nod.nodeType === 3 && is_all_ws(nod.textContent))
+  ); // a text node, all ws
+}
+
+/**
+ * Version of |previousSibling| that skips nodes that are entirely
+ * whitespace or comments. (Normally |previousSibling| is a property
+ * of all DOM nodes that gives the sibling node, the node that is
+ * a child of the same parent, that occurs immediately before the
+ * reference node.)
+ *
+ * @param sib  The reference node.
+ * @return     Either:
+ *               1) The closest previous sibling to |sib| that is not
+ *                  ignorable according to |is_ignorable|, or
+ *               2) null if no such node exists.
+ */
+export function node_before(sib) {
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) {
+      return sib;
+    }
+  }
+  return null;
+}
+
+/**
+ * Version of |nextSibling| that skips nodes that are entirely
+ * whitespace or comments.
+ *
+ * @param sib  The reference node.
+ * @return     Either:
+ *               1) The closest next sibling to |sib| that is not
+ *                  ignorable according to |is_ignorable|, or
+ *               2) null if no such node exists.
+ */
+export function node_after(sib) {
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) {
+      return sib;
+    }
+  }
+  return null;
+}
+
+/**
+ * Version of |lastChild| that skips nodes that are entirely
+ * whitespace or comments. (Normally |lastChild| is a property
+ * of all DOM nodes that gives the last of the nodes contained
+ * directly in the reference node.)
+ *
+ * @param sib  The reference node.
+ * @return     Either:
+ *               1) The last child of |sib| that is not
+ *                  ignorable according to |is_ignorable|, or
+ *               2) null if no such node exists.
+ */
+export function last_child(par) {
+  let res = par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) {
+      return res;
+    }
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Version of |firstChild| that skips nodes that are entirely
+ * whitespace and comments.
+ *
+ * @param sib  The reference node.
+ * @return     Either:
+ *               1) The first child of |sib| that is not
+ *                  ignorable according to |is_ignorable|, or
+ *               2) null if no such node exists.
+ */
+export function first_child(par) {
+  let res = par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) {
+      return res;
+    }
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+export const removeSpaceBeforeAfterEndLine = (text) => {
+  text = text.replace(/\s+\n/gm, '\n'); // space before endline
+  text = text.replace(/\n\s+/gm, '\n'); // space after endline
+  return text;
+};
+
+export const convertTabsToSpaces = (text) => text.replace(/\t/gm, ' ');
+export const convertLineBreaksToSpaces = (text) => text.replace(/\n/gm, ' ');
+
+export const isInline = (node) =>
+  node &&
+  (node.nodeType === TEXT_NODE || INLINE_ELEMENTS.includes(node.nodeName));
+
+export const removeSpaceFollowSpace = (text, node) => {
+  // Any space immediately following another space (even across two separate
+  // inline elements) is ignored (rule 4)
+  text = text.replace(/ ( +)/gm, ' ');
+  if (!text.startsWith(' ')) return text;
+
+  if (node.previousSibling) {
+    if (node.previousSibling.nodeType === TEXT_NODE) {
+      if (node.previousSibling.textContent.endsWith(' ')) {
+        return text.replace(/^ /, '');
+      }
+    } else if (isInline(node.previousSibling)) {
+      const prevText = collapseInlineSpace(node.previousSibling);
+      if (prevText.endsWith(' ')) {
+        return text.replace(/^ /, '');
+      }
+    }
+  } else {
+    const parent = node.parentNode;
+    if (parent.previousSibling) {
+      //  && isInline(parent.previousSibling)
+      const prevText = collapseInlineSpace(parent.previousSibling);
+      if (prevText && prevText.endsWith(' ')) {
+        return text.replace(/^ /, '');
+      }
+    }
+  }
+
+  return text;
+};
+
+export const removeElementEdges = (text, node) => {
+  if (
+    !isInline(node.parentNode) &&
+    !node.previousSibling &&
+    text.match(/^\s/)
+  ) {
+    text = text.replace(/^\s+/, '');
+  }
+
+  if (text.match(/\s$/) && !node.nextSibling && !isInline(node.parentNode)) {
+    text = text.replace(/\s$/, '');
+  }
+
+  return text;
+};
+
+export const collapseInlineSpace = (node) => {
+  let text = node.textContent;
+
+  // See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
+
+  // 1. all spaces and tabs immediately before and after a line break are ignored
+
+  text = removeSpaceBeforeAfterEndLine(text);
+
+  // 2. Next, all tab characters are handled as space characters
+  text = convertTabsToSpaces(text);
+
+  // 3. Convert all line breaks to spaces
+  text = convertLineBreaksToSpaces(text);
+
+  // 4. Any space immediately following another space
+  // (even across two separate inline elements) is ignored
+  text = removeSpaceFollowSpace(text, node);
+
+  // 5. Sequences of spaces at the beginning and end of an element are removed
+  text = removeElementEdges(text, node);
+
+  // (volto) Return null if the element is not adjacent to an inline node
+  // This will cause the element to be ignored in the deserialization
+  // TODO: use the node traverse functions defined here
+  if (
+    is_all_ws(text) &&
+    !(
+      isInline(node.previousSibling) ||
+      isInline(node.nextSibling) ||
+      isInline(node.parentNode.nextSibling) ||
+      isInline(node.parentNode.previousSibling)
+    )
+  ) {
+    return null;
+  }
+
+  return text;
+};

package/src/components/index.js

@@ -30,6 +30,7 @@ export EventDetails from '@plone/volto/components/theme/EventDetails/EventDetail
 export PreviewImage from '@plone/volto/components/theme/PreviewImage/PreviewImage';
 
 export Error from '@plone/volto/components/theme/Error/Error';
+export ErrorBoundary from '@plone/volto/components/theme/Error/ErrorBoundary';
 export NotFound from '@plone/volto/components/theme/NotFound/NotFound';
 export Forbidden from '@plone/volto/components/theme/Forbidden/Forbidden';
 export Unauthorized from '@plone/volto/components/theme/Unauthorized/Unauthorized';
@@ -172,6 +173,7 @@ export ObjectBrowserWidgetMode from '@plone/volto/components/manage/Widgets/Obje
 export ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 export ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
 
+export EditDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultEdit';
 export EditDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/Edit';
 export EditTitleBlock from '@plone/volto/components/manage/Blocks/Title/Edit';
 export EditToCBlock from '@plone/volto/components/manage/Blocks/ToC/Edit';
@@ -185,6 +187,7 @@ export ViewHeroImageLeftBlock from '@plone/volto/components/manage/Blocks/HeroIm
 export EditMapBlock from '@plone/volto/components/manage/Blocks/Maps/Edit';
 export EditHTMLBlock from '@plone/volto/components/manage/Blocks/HTML/Edit';
 
+export ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 export ViewDescriptionBlock from '@plone/volto/components/manage/Blocks/Description/View';
 export ViewTitleBlock from '@plone/volto/components/manage/Blocks/Title/View';
 export ViewToCBlock from '@plone/volto/components/manage/Blocks/ToC/View';

package/src/components/manage/Blocks/Block/DefaultEdit.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+import { useIntl } from 'react-intl';
+import { SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components';
+import DefaultBlockView from './DefaultView';
+
+const DefaultBlockEdit = (props) => {
+  const { blocksConfig = config.blocks.blocksConfig } = props;
+  const { data, onChangeBlock, block, selected } = props;
+  const intl = useIntl();
+  const blockSchema = blocksConfig?.[data['@type']]?.blockSchema;
+  const schema =
+    typeof blockSchema === 'function'
+      ? blockSchema({ ...props, intl })
+      : blockSchema;
+
+  const BlockView = blocksConfig?.[data['@type']]?.['view'] || DefaultBlockView;
+  return (
+    <>
+      <BlockView {...props} />
+      {schema ? (
+        <SidebarPortal selected={selected}>
+          <BlockDataForm
+            block={block}
+            schema={schema}
+            title={schema.title}
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            formData={data}
+          />
+        </SidebarPortal>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default DefaultBlockEdit;

package/src/components/manage/Blocks/Block/DefaultView.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Container, Segment, Grid, Label } from 'semantic-ui-react';
+import { ErrorBoundary } from '@plone/volto/components';
+import { getWidget } from '@plone/volto/helpers/Widget/utils';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  invalidBlock: {
+    id: 'Invalid Block',
+    defaultMessage: 'Invalid block - Will be removed on saving',
+  },
+});
+
+const DefaultBlockView = (props) => {
+  const { data, block } = props;
+  const intl = useIntl();
+  const { views } = config.widgets;
+  const { blocksConfig = config.blocks.blocksConfig } = props;
+  if (!data)
+    return <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>;
+  // Compatibility with RenderBlocks non-view
+
+  const blockSchema = blocksConfig?.[data['@type']]?.blockSchema;
+  const schema =
+    typeof blockSchema === 'function'
+      ? blockSchema({ ...props, intl })
+      : blockSchema;
+  const fieldsets = schema.fieldsets || [];
+
+  return schema ? (
+    <Container className="page-block">
+      {fieldsets?.map((fs) => {
+        return (
+          <div className="fieldset" key={fs.id}>
+            {fs.id !== 'default' && <h2>{fs.title}</h2>}
+            {fs.fields?.map((f, key) => {
+              let field = {
+                ...schema?.properties[f],
+                id: f,
+                widget: getWidget(f, schema?.properties[f]),
+              };
+              let Widget = views?.getWidget(field);
+              return f !== 'title' ? (
+                <Grid celled="internally" key={key}>
+                  <Grid.Row>
+                    <Label>{field.title}:</Label>
+                  </Grid.Row>
+                  <Grid.Row>
+                    <Segment basic>
+                      <ErrorBoundary name={f}>
+                        <Widget value={data[f]} />
+                      </ErrorBoundary>
+                    </Segment>
+                  </Grid.Row>
+                </Grid>
+              ) : (
+                <Widget key={key} value={data[f]} />
+              );
+            })}
+          </div>
+        );
+      })}
+    </Container>
+  ) : (
+    <div key={block}>
+      {intl.formatMessage(messages.unknownBlock, {
+        block: data['@type'],
+      })}
+    </div>
+  );
+};
+
+export default DefaultBlockView;

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -13,6 +13,7 @@ import { setSidebarTab } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import { applyBlockDefaults } from '@plone/volto/helpers';
+import { ViewDefaultBlock, EditDefaultBlock } from '@plone/volto/components';
 
 import {
   SidebarPortal,
@@ -120,12 +121,12 @@ export class Edit extends Component {
 
     const disableNewBlocks = this.props.data?.disableNewBlocks;
 
-    let Block = blocksConfig?.[type]?.['edit'] || null;
+    let Block = blocksConfig?.[type]?.['edit'] || EditDefaultBlock;
     if (
       this.props.data?.readOnly ||
       (!editable && !config.blocks.showEditBlocksInBabelView)
     ) {
-      Block = blocksConfig?.[type]?.['view'] || null;
+      Block = blocksConfig?.[type]?.['view'] || ViewDefaultBlock;
     }
     const schema = blocksConfig?.[type]?.['schema'] || BlockSettingsSchema;
     const blockHasOwnFocusManagement =

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -9,7 +9,6 @@ const HeroImageLeftBlockData = (props) => {
   const schema = schemaHero({ ...props, intl });
   return (
     <BlockDataForm
-      block={block}
       schema={schema}
       title={schema.title}
       onChangeField={(id, value) => {
@@ -18,7 +17,9 @@ const HeroImageLeftBlockData = (props) => {
           [id]: value,
         });
       }}
+      onChangeBlock={onChangeBlock}
       formData={data}
+      block={block}
     />
   );
 };

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -52,6 +52,7 @@ const ImageSidebar = (props) => {
             [id]: value,
           });
         }}
+        onChangeBlock={onChangeBlock}
         formData={data}
         block={block}
       />