@plone/volto 16.26.0 → 16.26.1

package/.changelog.draft

@@ -1,20 +1,12 @@
-## 16.26.0 (2023-10-27)
-
-### Feature
-
-- Updated aria-label for landmarks @ichim-david
-  Added landmark on sidebar @ichim-david
-  Added Pluggable section for skiplinks @ichim-david [#5290](https://github.com/plone/volto/issues/5290)
+## 16.26.1 (2023-11-10)
 
 ### Bugfix
 
-- (FIX): put padding so the text is not clipped #5305 @dobri1408 [#5305](https://github.com/plone/volto/issues/5305)
-- Fix compare translations view @sneridagh [#5327](https://github.com/plone/volto/issues/5327)
-- Fix DatetimeWidget on FF, the button default if no type is set is sending the form. @sneridagh
-  See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod [#5343](https://github.com/plone/volto/issues/5343)
+- Fix empty link element left hanging when hit enter at end of link. @iFlameing @tiberiuichim [#5291](https://github.com/plone/volto/issues/5291)
 
 ### Internal
 
-- Add a new set of acceptance tests with the multilingual fixture using seamless mode. @sneridagh [#5332](https://github.com/plone/volto/issues/5332)
+- Added shim to keep working with value instead of initialValue in upgraded Slate @davisagli [#5291](https://github.com/plone/volto/issues/5291)
+- Update internal Plone version to 6.0.8 @sneridagh [#5384](https://github.com/plone/volto/issues/5384)
 
 

package/CHANGELOG.md

@@ -8,6 +8,17 @@
 
 <!-- towncrier release notes start -->
 
+## 16.26.1 (2023-11-10)
+
+### Bugfix
+
+- Fix empty link element left hanging when hit enter at end of link. @iFlameing @tiberiuichim [#5291](https://github.com/plone/volto/issues/5291)
+
+### Internal
+
+- Added shim to keep working with value instead of initialValue in upgraded Slate @davisagli [#5291](https://github.com/plone/volto/issues/5291)
+- Update internal Plone version to 6.0.8 @sneridagh [#5384](https://github.com/plone/volto/issues/5384)
+
 ## 16.26.0 (2023-10-27)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.26.0",
+  "version": "16.26.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -384,9 +384,9 @@
     "semantic-ui-react": "2.0.3",
     "semver": "5.6.0",
     "serialize-javascript": "3.1.0",
-    "slate": "0.84.0",
-    "slate-hyperscript": "0.81.3",
-    "slate-react": "0.83.2",
+    "slate": "0.100.0",
+    "slate-hyperscript": "0.100.0",
+    "slate-react": "0.98.4",
     "start-server-and-test": "1.14.0",
     "style-loader": "2",
     "stylelint": "14.0.1",

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.26.0",
+  "version": "16.26.1",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,10 +18,10 @@
     "is-url": "1.2.4",
     "jsdom": "^16.6.0",
     "react-intersection-observer": "^8.32.0",
-    "slate": "^0.71.0",
-    "slate-history": "^0.66.0",
-    "slate-hyperscript": "^0.67.0",
-    "slate-react": "^0.71.0",
+    "slate": "0.100.0",
+    "slate-history": "0.100.0",
+    "slate-hyperscript": "0.100.0",
+    "slate-react": "0.98.4",
     "weak-key": "^1.0.2"
   },
   "devDependencies": {

package/packages/volto-slate/src/blocks/Text/keyboard/joinBlocks.js

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom';
+import { cloneDeep } from 'lodash';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import { Editor } from 'slate';
 import {
@@ -8,6 +9,7 @@ import {
   isCursorAtBlockEnd,
   mergeSlateWithBlockBackward,
   mergeSlateWithBlockForward,
+  makeEditor,
 } from '@plone/volto-slate/utils';
 import {
   changeBlock,
@@ -15,7 +17,6 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
-
 /**
  * Joins the current block (which has an active Slate Editor)
  * with the previous block, to make a single block.
@@ -164,9 +165,11 @@ function getBlockEndAsRange(block) {
   const { value } = block;
   const location = [value.length - 1]; // adress of root node
   const editor = { children: value };
-  const path = Editor.last(editor, location)[1]; // last Node in the block
+  const newEditor = makeEditor();
+  newEditor.children = cloneDeep(editor.children);
+  const path = Editor.last(newEditor, location)[1]; // last Node in the block
   // The last Text node (leaf node) entry inside the path computed just above.
-  const [leaf, leafpath] = Editor.leaf(editor, path);
+  const [leaf, leafpath] = Editor.leaf(newEditor, path);
   // The offset of the Points in the collapsed Range computed below:
   const offset = (leaf.text || '').length;
 

package/packages/volto-slate/src/editor/SlateEditor.jsx

@@ -135,6 +135,8 @@ class SlateEditor extends Component {
           } catch {}
         }, 100); // flush
       }
+
+      this.state.editor.normalize({ force: true });
     }
   }
 
@@ -257,7 +259,7 @@ class SlateEditor extends Component {
         <EditorContext.Provider value={editor}>
           <Slate
             editor={editor}
-            value={this.props.value || slateSettings.defaultValue()}
+            initialValue={this.props.value || slateSettings.defaultValue()}
             onChange={this.handleChange}
           >
             {selected ? (

package/packages/volto-slate/src/editor/plugins/Link/extensions.js

@@ -1,33 +1,38 @@
+import { Text, Transforms, Element } from 'slate'; // Editor,
 import { SIMPLELINK } from '@plone/volto-slate/constants';
 import { jsx } from 'slate-hyperscript';
 import { deserialize } from '@plone/volto-slate/editor/deserialize';
 
-export const withSimpleLink = (editor) => {
-  // const { insertData, insertText, isInline } = editor;
+const nodeToText = (node) => {
+  if (Text.isText(node)) {
+    return node.text.trim();
+  } else {
+    return node.children.map(nodeToText).join('');
+  }
+};
 
-  const { isInline } = editor;
+export const withSimpleLink = (editor) => {
+  const { isInline, normalizeNode } = editor;
 
   editor.isInline = (element) => {
     return element && element.type === SIMPLELINK ? true : isInline(element);
   };
 
-  // editor.insertText = (text) => {
-  //   if (text && isUrl(text)) {
-  //     wrapLink(editor, text);
-  //   } else {
-  //     insertText(text);
-  //   }
-  // };
-  //
-  // editor.insertData = (data) => {
-  //   const text = data.getData('text/plain');
-  //
-  //   if (text && isUrl(text)) {
-  //     wrapLink(editor, text);
-  //   } else {
-  //     insertData(data);
-  //   }
-  // };
+  editor.normalizeNode = (entry) => {
+    const [node, path] = entry;
+    const isTextNode = Text.isText(node);
+    const isElementNode = Element.isElement(node);
+    const isLinkTypeNode = node.type === SIMPLELINK;
+
+    // delete childless link nodes
+    if (!isTextNode && isElementNode && isLinkTypeNode && !nodeToText(node)) {
+      Transforms.removeNodes(editor, { at: path });
+      return;
+    }
+
+    return normalizeNode(entry);
+  };
+
   return editor;
 };
 

package/packages/volto-slate/src/slate-react.js

@@ -0,0 +1,26 @@
+import { Slate as OrigSlate } from '@slate-react';
+
+// Components
+export { Editable, DefaultPlaceholder } from '@slate-react';
+
+export { DefaultElement } from '@slate-react';
+export { DefaultLeaf } from '@slate-react';
+
+// Hooks
+export { useEditor } from '@slate-react';
+export { useSlateStatic } from '@slate-react';
+export { useFocused } from '@slate-react';
+export { useReadOnly } from '@slate-react';
+export { useSelected } from '@slate-react';
+export { useSlate, useSlateWithV } from '@slate-react';
+export { useSlateSelector } from '@slate-react';
+export { useSlateSelection } from '@slate-react';
+
+// Plugin
+export { ReactEditor } from '@slate-react';
+export { withReact } from '@slate-react';
+
+export const Slate = (props) => {
+  const initialValue = props.initialValue || props.value;
+  return OrigSlate({ ...props, initialValue });
+};

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

@@ -1,7 +1,7 @@
-import { castArray } from 'lodash';
+import { castArray, cloneDeep } from 'lodash';
 import { Editor, Transforms, Range, Node } from 'slate';
 import { ReactEditor } from 'slate-react';
-import { isCursorInList } from '@plone/volto-slate/utils';
+import { isCursorInList, makeEditor } from '@plone/volto-slate/utils';
 import { LI } from '@plone/volto-slate/constants';
 import config from '@plone/volto/registry';
 
@@ -155,7 +155,8 @@ export function getFragmentFromStartOfSelectionToEndOfEditor(
   }
 
   // immer doesn't like editor.savedSelection
-  const newEditor = { children: editor.children };
+  const newEditor = makeEditor();
+  newEditor.children = cloneDeep(editor.children);
   return Editor.fragment(newEditor, range);
 }
 
@@ -174,7 +175,9 @@ export function getFragmentFromBeginningOfEditorToStartOfSelection(
 
   // immer doesn't like editor.savedSelection
   // TODO: there's a bug here related to splitting lists
-  const newEditor = { children: editor.children };
+  const newEditor = makeEditor();
+  newEditor.children = cloneDeep(editor.children);
+
   return Editor.fragment(
     newEditor,
     Editor.range(

package/razzle.config.js

@@ -251,6 +251,9 @@ const defaultModify = ({
     // avoids including lodash multiple times.
     // semantic-ui-react uses lodash-es, everything else uses lodash
     'lodash-es': path.dirname(require.resolve('lodash')),
+    // workaround for backwards-incompatible change in slate-react
+    '@slate-react': path.dirname(require.resolve('slate-react')),
+    'slate-react$': `${registry.voltoPath}/packages/volto-slate/src/slate-react`,
   };
 
   const [

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

@@ -170,7 +170,7 @@ export const TitleBlockEdit = (props) => {
     <Slate
       editor={editor}
       onChange={handleChange}
-      value={initialValue}
+      initialValue={initialValue}
       className={cx('block description', {
         selected: selected,
       })}

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

@@ -155,7 +155,7 @@ export const TitleBlockEdit = (props) => {
     return <div />;
   }
   return (
-    <Slate editor={editor} onChange={handleChange} value={initialValue}>
+    <Slate editor={editor} onChange={handleChange} initialValue={initialValue}>
       <Editable
         readOnly={!editable}
         onKeyDown={handleKeyDown}

package/src/components/manage/TextLineEdit/TextLineEdit.jsx

@@ -174,7 +174,7 @@ export const TextLineEdit = (props) => {
     return <div />;
   }
   return (
-    <Slate editor={editor} onChange={handleChange} value={initialValue}>
+    <Slate editor={editor} onChange={handleChange} initialValue={initialValue}>
       <Editable
         readOnly={!editable}
         onKeyDown={handleKeyDown}

package/theme/themes/pastanaga/extras/blocks.less

@@ -42,6 +42,15 @@
   border-color: rgba(120, 192, 215, 0.75);
 }
 
+.block-editor-title,
+.block-editor-slate,
+.block-editor-slateTable,
+.slate-editor.selected {
+  :focus-visible {
+    outline: none;
+  }
+}
+
 .block .block:hover::before {
   border-color: rgba(120, 192, 215, 0.375);
 }

package/pyvenv.cfg

@@ -1,3 +0,0 @@
-home = /opt/homebrew/opt/python@3.9/bin
-include-system-site-packages = false
-version = 3.9.16