Upgrade slate libraries; fix empty link element left hanging when hit enter at end of link

cypress/tests/core/volto-slate/06-block-slate-format-link.js

@@ -97,4 +97,32 @@ describe('Block Tests: Links', () => {
     cy.get('[id="page-document"] p a').contains('Colorless green ideas');
     cy.get('[id="page-document"] p a').contains('sleep furiously');
   });
+
+  it('As editor I can add a link and pressing enter does not add another link in the next block', function () {
+    // https://github.com/plone/volto/pull/5186
+    cy.get('#toolbar').click();
+    cy.getSlate().type('Colorless green ideas sleep furiously');
+
+    cy.log('Create a Link');
+
+    cy.setSlateSelection('ideas', 'furiously');
+    cy.clickSlateButton('Add link');
+
+    cy.get('.slate-toolbar .link-form-container input').type(
+      'https://google.com{enter}',
+    );
+    cy.getSlate().should('have.descendants', 'a.slate-editor-link');
+    cy.getSlate().type('{rightarrow}').type('{enter}');
+    cy.getSlate().type('Hello').type('{enter}');
+
+    cy.toolbarSave();
+
+    cy.log('Then the page view should contain a link');
+    cy.get('.ui.container p').contains('Colorless green ideas sleep furiously');
+    // It should be only one, it will fail if there are two
+    cy.get('.ui.container p a')
+      .should('have.text', 'ideas sleep furiously')
+      .and('have.attr', 'href')
+      .and('include', 'https://google.com');
+  });
 });

cypress/tests/core/volto-slate/27-block-slate-paste-html.js

@@ -42,6 +42,6 @@ is simply dummy text of the printing and typesetting industry.
     // Save
     cy.toolbarSave();
 
-    cy.get('[id="page-document"] p a').should('have.length', 1);
+    cy.get('[id="page-document"] p a').should('have.length', 0);
   });
 });

news/5291.bugfix

@@ -0,0 +1 @@
+Fix empty link element left hanging when hit enter at end of link. @iFlameing @tiberiuichim

package.json

@@ -388,9 +388,9 @@
     "semantic-ui-less": "2.4.1",
     "semantic-ui-react": "2.0.3",
     "serialize-javascript": "3.1.0",
-    "slate": "0.84.0",
+    "slate": "0.94.1",
     "slate-hyperscript": "0.81.3",
-    "slate-react": "0.83.2",
+    "slate-react": "0.98.3",
     "start-server-and-test": "1.14.0",
     "style-loader": "3.3.1",
     "stylelint": "15.10.3",

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,14 +9,14 @@ import {
   isCursorAtBlockEnd,
   mergeSlateWithBlockBackward,
   mergeSlateWithBlockForward,
+  makeEditor,
 } from '@plone/volto-slate/utils';
 import {
   changeBlock,
   deleteBlock,
   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;
 

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 ? (

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;
 };
 

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(

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

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

src/components/manage/Blocks/Description/__snapshots__/Edit.test.jsx.snap

@@ -28,7 +28,6 @@ exports[`renders edit blocks renders an edit description block component 1`] = `
   spellCheck={false}
   style={
     Object {
-      "outline": "none",
       "position": "relative",
       "whiteSpace": "pre-wrap",
       "wordWrap": "break-word",

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

@@ -145,7 +145,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}

src/components/manage/Blocks/Title/__snapshots__/Edit.test.jsx.snap

@@ -28,7 +28,6 @@ exports[`renders edit blocks renders an edit title block component 1`] = `
   spellCheck={false}
   style={
     Object {
-      "outline": "none",
       "position": "relative",
       "whiteSpace": "pre-wrap",
       "wordWrap": "break-word",

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}

src/components/manage/TextLineEdit/__snapshots__/TextLineEdit.test.jsx.snap

@@ -28,7 +28,6 @@ exports[`renders TextLineEdit renders an TextLineEdit as h1 1`] = `
   spellCheck={false}
   style={
     Object {
-      "outline": "none",
       "position": "relative",
       "whiteSpace": "pre-wrap",
       "wordWrap": "break-word",
@@ -86,7 +85,6 @@ exports[`renders TextLineEdit renders an TextLineEdit as h2 1`] = `
   spellCheck={false}
   style={
     Object {
-      "outline": "none",
       "position": "relative",
       "whiteSpace": "pre-wrap",
       "wordWrap": "break-word",
@@ -144,7 +142,6 @@ exports[`renders TextLineEdit renders an TextLineEdit as h2 with a classname 1`]
   spellCheck={false}
   style={
     Object {
-      "outline": "none",
       "position": "relative",
       "whiteSpace": "pre-wrap",
       "wordWrap": "break-word",

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);
 }

yarn.lock

@@ -2962,6 +2962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@juggle/resize-observer@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "@juggle/resize-observer@npm:3.4.0"
+  checksum: 2505028c05cc2e17639fcad06218b1c4b60f932a4ebb4b41ab546ef8c157031ae377e3f560903801f6d01706dbefd4943b6c4704bf19ed86dfa1c62f1473a570
+  languageName: node
+  linkType: hard
+
 "@kwsites/file-exists@npm:^1.1.1":
   version: 1.1.1
   resolution: "@kwsites/file-exists@npm:1.1.1"
@@ -3549,9 +3556,9 @@ __metadata:
     semantic-ui-react: 2.0.3
     semver: ^7.5.4
     serialize-javascript: 3.1.0
-    slate: 0.84.0
+    slate: 0.94.1
     slate-hyperscript: 0.81.3
-    slate-react: 0.83.2
+    slate-react: 0.98.3
     start-server-and-test: 1.14.0
     style-loader: 3.3.1
     stylelint: 15.10.3
@@ -23452,10 +23459,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slate-react@npm:0.83.2":
-  version: 0.83.2
-  resolution: "slate-react@npm:0.83.2"
+"slate-react@npm:0.98.3":
+  version: 0.98.3
+  resolution: "slate-react@npm:0.98.3"
   dependencies:
+    "@juggle/resize-observer": ^3.4.0
     "@types/is-hotkey": ^0.1.1
     "@types/lodash": ^4.14.149
     direction: ^1.0.3
@@ -23468,18 +23476,18 @@ __metadata:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
     slate: ">=0.65.3"
-  checksum: 0c18b9dfeab9d0e3baf5b22efb2df3216be326da886bdddab5ccce3d5291cc44229664f582a86936ba51d61efcdb80d13f75dbe5fe4b903f27b3bf5baa6fff48
+  checksum: 52c08b7d149e5b0b9bda5b77368f884a38e5ce772916da11f23e5b1af089c0e26ef223bca234e3b1c5394dfecaf8c73918ba383f0a6803df3e2da91dcd024bab
   languageName: node
   linkType: hard
 
-"slate@npm:0.84.0":
-  version: 0.84.0
-  resolution: "slate@npm:0.84.0"
+"slate@npm:0.94.1":
+  version: 0.94.1
+  resolution: "slate@npm:0.94.1"
   dependencies:
     immer: ^9.0.6
     is-plain-object: ^5.0.0
     tiny-warning: ^1.0.3
-  checksum: d74de16a40571b2513dbd96efee8fe891909357a7011131f8fae738a0eace5b3c7c2da1c0ebfb1ffe66c8c933507ca618772fb607fbc9e44aa5158d3d874c5a2
+  checksum: 07666fe3373e59aaa19261366fd3cf1df546edfc0162fb88d675d71f158ebd1bf0630fd00ecc9152ab6547080f3e90c9f6d1504e09c25b3bf980cceb9b15c3c1
   languageName: node
   linkType: hard