@plone/volto 16.25.0 → 16.26.1

package/.changelog.draft

@@ -1,17 +1,12 @@
-## 16.25.0 (2023-10-16)
-
-### Feature
-
-- Add external className to slate Link view. @iFlameing [#5109](https://github.com/plone/volto/issues/5109)
+## 16.26.1 (2023-11-10)
 
 ### Bugfix
 
-- Fix empty slate text block in table of contents. @kreafox [#5156](https://github.com/plone/volto/issues/5156)
-- Fix standalone navigation action call if expander is set @sneridagh [#5197](https://github.com/plone/volto/issues/5197)
-- Added support for blocksConfig configuration in the listing block @sneridagh [#5310](https://github.com/plone/volto/issues/5310)
-- Fix adding multiple path criteria in search and listing blocks. @davisagli [#5317](https://github.com/plone/volto/issues/5317)
+- Fix empty link element left hanging when hit enter at end of link. @iFlameing @tiberiuichim [#5291](https://github.com/plone/volto/issues/5291)
 
 ### Internal
 
-- Fix Cypress ECONNREFUSED error in CI due to latest Chrome headless option handling for Cypress < 12.14.0 @sneridagh [#5233](https://github.com/plone/volto/issues/5233)
+- 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,36 @@
 
 <!-- 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
+
+- 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)
+
+### 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)
+
+### Internal
+
+- Add a new set of acceptance tests with the multilingual fixture using seamless mode. @sneridagh [#5332](https://github.com/plone/volto/issues/5332)
+
 ## 16.25.0 (2023-10-16)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.25.0",
+  "version": "16.26.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -197,6 +197,9 @@
       "release": true,
       "releaseName": "${version}",
       "releaseNotes": "cat .changelog.draft"
+    },
+    "npm": {
+      "tag": "lts"
     }
   },
   "lint-staged": {
@@ -381,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.25.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/Search/components/SelectStyling.jsx

@@ -31,8 +31,7 @@ export const customSelectStyles = {
   }),
   valueContainer: (styles) => ({
     ...styles,
-    padding: '0px',
-    paddingLeft: 0,
+    padding: '8px',
   }),
   dropdownIndicator: (styles) => ({
     paddingRight: 0,

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/Edit/Edit.jsx

@@ -35,7 +35,11 @@ import {
   getSchema,
   listActions,
 } from '@plone/volto/actions';
-import { getBaseUrl, hasBlocksData } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  hasBlocksData,
+} from '@plone/volto/helpers';
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -260,7 +264,12 @@ class Edit extends Component {
 
   setComparingLanguage(lang, content_id) {
     this.setState({ comparingLanguage: lang });
-    this.props.getContent(content_id, null, 'compare_to', null);
+    this.props.getContent(
+      flattenToAppURL(content_id),
+      null,
+      'compare_to',
+      null,
+    );
   }
 
   form = React.createRef();

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/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -246,6 +246,8 @@ export class DatetimeWidgetComponent extends Component {
           )}
           {resettable && (
             <button
+              // FF needs that the type is "button" in order to not POST the form
+              type="button"
               disabled={this.props.isDisabled || !datetime}
               onClick={() => this.onResetDates()}
               className="item ui noborder button"

package/src/components/theme/Footer/Footer.jsx

@@ -41,6 +41,7 @@ const Footer = ({ intl }) => {
       color="grey"
       textAlign="center"
       id="footer"
+      aria-label="Footer"
     >
       <Container>
         <Segment basic inverted color="grey" className="discreet">

package/src/components/theme/Navigation/Navigation.jsx

@@ -128,7 +128,7 @@ class Navigation extends Component {
    */
   render() {
     return (
-      <nav className="navigation" id="navigation" aria-label="navigation">
+      <nav className="navigation" id="navigation" aria-label="Site">
         <div className="hamburger-wrapper mobile tablet only">
           <button
             className={cx('hamburger hamburger--spin', {

package/src/components/theme/SkipLinks/SkipLinks.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
 
 const messages = defineMessages({
   mainView: {
@@ -23,7 +24,7 @@ const SkipLinks = () => {
     <div
       className="skiplinks-wrapper"
       role="complementary"
-      aria-label="skiplinks"
+      aria-label="Skiplinks"
     >
       <a className="skiplink" href="#view">
         {intl.formatMessage(messages.mainView)}
@@ -34,6 +35,7 @@ const SkipLinks = () => {
       <a className="skiplink" href="#footer">
         {intl.formatMessage(messages.footer)}
       </a>
+      <Pluggable name="main.skiplinks" />
     </div>
   );
 };

package/src/components/theme/SkipLinks/SkipLinks.test.jsx

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
+import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
 
 import SkipLinks from './SkipLinks';
 
@@ -18,9 +19,11 @@ describe('SkipLinks', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
-          <SkipLinks />
-        </MemoryRouter>
+        <PluggablesProvider>
+          <MemoryRouter>
+            <SkipLinks />
+          </MemoryRouter>
+        </PluggablesProvider>
       </Provider>,
     );
     const json = component.toJSON();

package/src/helpers/Html/Html.jsx

@@ -183,7 +183,7 @@ class Html extends Component {
         <body className={bodyClass}>
           <div role="navigation" aria-label="Toolbar" id="toolbar" />
           <div id="main" dangerouslySetInnerHTML={{ __html: markup }} />
-          <div id="sidebar" />
+          <div role="complementary" aria-label="Sidebar" id="sidebar" />
           <script
             dangerouslySetInnerHTML={{
               __html: `window.__data=${serialize(

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