@plone/volto-slate 18.0.0-alpha.8 → 18.0.0

package/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.less"],
+      "customSyntax": "postcss-less"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "order/properties-alphabetical-order": null
+  }
+}

package/CHANGELOG.md

@@ -8,6 +8,112 @@
 
 <!-- towncrier release notes start -->
 
+## 18.0.0 (2024-10-31)
+
+### Internal
+
+- Release 18.0.0 final @sneridagh 
+
+## 18.0.0-alpha.20 (2024-10-30)
+
+### Bugfix
+
+- Fix slight CSS lint violation in volto-slate @sneridagh [#6444](https://github.com/plone/volto/issues/6444)
+
+## 18.0.0-alpha.19 (2024-10-03)
+
+### Feature
+
+- Update Brazilian Portuguese translations. @ericof [#6292](https://github.com/plone/volto/issues/6292)
+
+### Bugfix
+
+- Fetch `user` before pass it to the `restricted` function of the block settings. @wesleybl [#6293](https://github.com/plone/volto/issues/6293)
+
+## 18.0.0-alpha.18 (2024-09-13)
+
+### Feature
+
+- Pass `user`, `navRoot` and `contentType` objects to the `restricted` function of the block settings. @wesleybl [#6264](https://github.com/plone/volto/issues/6264)
+
+## 18.0.0-alpha.17 (2024-07-05)
+
+### Feature
+
+- Use the unused `toggleButton` prop in `PositionedToolbar` to render the toolbar in a different `portal` target falling back to `document.body` if `toggleButton` is not provided. @ichim-david
+
+  When `toggleButton` is provided as a `portal` target, allow negative left positioning except when the target is `document.body` to prevent the toolbar going off-screen and avoid breaking changes. @ichim-david [#6159](https://github.com/plone/volto/issues/6159)
+
+## 18.0.0-alpha.16 (2024-07-03)
+
+### Internal
+
+- Fix dependencies for the package @sneridagh [#6148](https://github.com/plone/volto/issues/6148)
+
+## 18.0.0-alpha.15 (2024-06-28)
+
+### Internal
+
+- Add proper dependencies to `volto-slate`. @sneridagh [#6130](https://github.com/plone/volto/issues/6130)
+
+## 18.0.0-alpha.14 (2024-06-26)
+
+### Feature
+
+- Added `link-form-container` styles for `AddLinkForm` component. @ichim-david [#5607](https://github.com/plone/volto/issues/5607)
+- Handle breakList in DetachedTextBlockEditor. @giuliaghisini [#6106](https://github.com/plone/volto/issues/6106)
+
+### Bugfix
+
+- In the Slate text block, the markup shortcuts for heading and blockquote work again. @kHAPPY2004 [#5452](https://github.com/plone/volto/issues/5452)
+- When pasting an image into a Slate block, now only an image block is created, instead of both a Slate block and an image block. @aryan7081 [#5818](https://github.com/plone/volto/issues/5818)
+
+### Internal
+
+- Rename files with wrong extension `js->jsx` when they contain JSX. @sneridagh [#6114](https://github.com/plone/volto/issues/6114)
+
+## 18.0.0-alpha.13 (2024-06-13)
+
+### Bugfix
+
+- Fix removal of slate formatting applied to text when toggling the list buttons @robgietema [#6080](https://github.com/plone/volto/issues/6080)
+
+## 18.0.0-alpha.12 (2024-04-23)
+
+### Bugfix
+
+- In the Slate text block, the markup shortcuts for bold, italic and strikethrough work again. @kHAPPY2004 [#5605](https://github.com/plone/volto/issues/5605)
+
+### Internal
+
+- Update imports to work with the new code split components in Volto. @pnicolli [#5295](https://github.com/plone/volto/issues/5295)
+
+## 18.0.0-alpha.11 (2024-04-03)
+
+### Bugfix
+
+- Fix removing an element in slate when cursor is at the end of the element to be removed; Fix losing selection when adding an element. @razvanMiu [#5928](https://github.com/plone/volto/issues/5928)
+
+## 18.0.0-alpha.10 (2024-03-14)
+
+### Breaking
+
+- Remove legacy `text`, `table` and `hero` blocks based in `draftJS` @sneridagh [#5846](https://github.com/plone/volto/issues/5846)
+
+### Bugfix
+
+- Fix other occurrences of mutable (referenced) objects when assigning the default inner `blocksConfig` object for the `grid` block, pass by value instead. sneridagh [#5859](https://github.com/plone/volto/issues/5859)
+
+### Internal
+
+- Fix CSS lint @sneridagh [#5849](https://github.com/plone/volto/issues/5849)
+
+## 18.0.0-alpha.9 (2024-03-02)
+
+### Internal
+
+- Update dependencies @sneridagh [#5815](https://github.com/plone/volto/issues/5815)
+
 ## 18.0.0-alpha.8 (2024-03-01)
 
 ### Feature

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -0,0 +1,205 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2022-07-20T12:45:09.681Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Érico Andrei <ericof@plone.org>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: pt_BR\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+"X-Generator: Poedit 3.5\n"
+
+# defaultMessage: Add link
+#: editor/plugins/Link/index
+msgid "Add link"
+msgstr "Adicionar link"
+
+# defaultMessage: An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.
+#: widgets/HtmlSlateWidget
+#, fuzzy
+msgid "An error has occurred while editing \"{name}\" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator."
+msgstr "Ocorreu um erro ao editar o campo \"{name}\". Fomos notificados e estamos analisando o problema. Salve seu trabalho e tente novamente. Se o problema persistir, entre em contato com o administrador do site."
+
+# defaultMessage: An error has occurred while rendering "{name}" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator.
+#: widgets/RichTextWidgetView
+#, fuzzy
+msgid "An error has occurred while rendering \"{name}\" field. We have been notified and we are looking into it. If the issue persists please contact the site administrator."
+msgstr "Ocorreu um erro ao renderizar o campo \"{name}\". Fomos notificados e estamos analisando o problema. Se o problema persistir, entre em contato com o administrador do site."
+
+# defaultMessage: Bottom
+#: blocks/Table/TableBlockEdit
+msgid "Bottom"
+msgstr "Base"
+
+# defaultMessage: Center
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Center"
+msgstr "Centro"
+
+# defaultMessage: Delete col
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Delete col"
+msgstr "Excluir coluna"
+
+# defaultMessage: Delete row
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Delete row"
+msgstr "Excluir linha"
+
+# defaultMessage: Delete table
+#: editor/plugins/Table/index
+#, fuzzy
+msgid "Delete table"
+msgstr "Excluir tabela"
+
+# defaultMessage: Divide each row into separate cells
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Divide each row into separate cells"
+msgstr "Dividir cada linha em células separadas"
+
+# defaultMessage: Edit element
+#: elementEditor/messages
+#, fuzzy
+msgid "Edit element"
+msgstr "Editar elemento"
+
+# defaultMessage: Edit link
+#: editor/plugins/AdvancedLink/index editor/plugins/Link/index
+#, fuzzy
+msgid "Edit link"
+msgstr "Editar link"
+
+# defaultMessage: Fixed width table cells
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Fixed width table cells"
+msgstr "Células de tabela de largura fixa"
+
+# defaultMessage: Hide headers
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Hide headers"
+msgstr "Ocultar cabeçalhos"
+
+# defaultMessage: Insert col after
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Insert col after"
+msgstr "Inserir coluna após"
+
+# defaultMessage: Insert col before
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Insert col before"
+msgstr "Inserir coluna antes"
+
+# defaultMessage: Insert row after
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Insert row after"
+msgstr "Inserir linha após"
+
+# defaultMessage: Insert row before
+#: blocks/Table/TableBlockEdit editor/plugins/Table/index
+#, fuzzy
+msgid "Insert row before"
+msgstr "Inserir linha antes"
+
+# defaultMessage: Left
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Left"
+msgstr "Esquerda"
+
+# defaultMessage: Make the table compact
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Make the table compact"
+msgstr "Compactar a tabela"
+
+# defaultMessage: Make the table sortable
+#: blocks/Table/TableBlockEdit
+msgid "Make the table sortable"
+msgstr "Tornar a tabela ordenável"
+
+# defaultMessage: Middle
+#: blocks/Table/TableBlockEdit
+msgid "Middle"
+msgstr "Meio"
+
+# defaultMessage: No matching blocks
+#: blocks/Text/SlashMenu
+#, fuzzy
+msgid "No matching blocks"
+msgstr "Não há blocos correspondentes"
+
+# defaultMessage: Reduce complexity
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Reduce complexity"
+msgstr "Reduzir complexidade"
+
+# defaultMessage: Remove element
+#: elementEditor/messages
+#, fuzzy
+msgid "Remove element"
+msgstr "Remover elemento"
+
+# defaultMessage: Remove link
+#: editor/plugins/AdvancedLink/index
+#, fuzzy
+msgid "Remove link"
+msgstr "Remover link"
+
+# defaultMessage: Right
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Right"
+msgstr "Direita"
+
+# defaultMessage: Stripe alternate rows with color
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Stripe alternate rows with color"
+msgstr "Alternar cores das linhas"
+
+# defaultMessage: Table
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Table"
+msgstr "Tabela"
+
+# defaultMessage: Table color inverted
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Table color inverted"
+msgstr "Cor da tabela invertida"
+
+# defaultMessage: Top
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Top"
+msgstr "Topo"
+
+# defaultMessage: Type text…
+#: blocks/Text/DefaultTextBlockEditor blocks/Text/DetachedTextBlockEditor
+#, fuzzy
+msgid "Type text…"
+msgstr "Digite texto…"
+
+# defaultMessage: Visible only in view mode
+#: blocks/Table/TableBlockEdit
+#, fuzzy
+msgid "Visible only in view mode"
+msgstr "Visível apenas no modo de visualização"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "18.0.0-alpha.8",
+  "version": "18.0.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -18,16 +18,27 @@
     "access": "public"
   },
   "dependencies": {
+    "classnames": "2.2.6",
+    "github-slugger": "1.4.0",
     "image-extensions": "1.1.0",
+    "is-hotkey": "0.2.0",
     "is-url": "1.2.4",
     "jsdom": "^16.6.0",
+    "lodash": "4.17.21",
     "react": "18.2.0",
-    "react-intersection-observer": "9.1.0",
     "react-dom": "18.2.0",
+    "react-intersection-observer": "9.1.0",
+    "react-intl": "3.12.1",
+    "react-redux": "8.1.2",
+    "react-router-dom": "5.2.0",
+    "react-toastify": "5.5.0",
+    "redux-mock-store": "1.5.4",
+    "semantic-ui-react": "2.1.5",
     "slate": "0.100.0",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.100.0",
     "slate-react": "0.98.4",
+    "uuid": "^9.0.1",
     "weak-key": "^1.0.2"
   },
   "devDependencies": {

package/src/blocks/Table/TableBlockEdit.jsx

@@ -11,7 +11,8 @@ import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { BlockDataForm, Icon, SidebarPortal } from '@plone/volto/components';
+import { Icon, SidebarPortal } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import TableSchema from './schema';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';

package/src/blocks/Table/TableBlockView.jsx

@@ -101,8 +101,8 @@ const View = ({ data }) => {
                           state.column !== index
                             ? 'ascending'
                             : state.direction === 'ascending'
-                            ? 'descending'
-                            : 'ascending',
+                              ? 'descending'
+                              : 'ascending',
                       });
                     }}
                   >

package/src/blocks/Table/index.js

@@ -50,7 +50,6 @@ export default function install(config) {
     // },
   };
 
-  config.blocks.blocksConfig.table.restricted = true;
   config.blocks.blocksConfig.slateTable = {
     ...tableBlockConfig,
     id: 'slateTable',

package/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -12,11 +12,8 @@ import {
   validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  BlockDataForm,
-  SidebarPortal,
-  BlockChooserButton,
-} from '@plone/volto/components';
+import { SidebarPortal, BlockChooserButton } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';

package/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -4,6 +4,7 @@ import { useInView } from 'react-intersection-observer';
 import { SlateEditor } from '@plone/volto-slate/editor';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import { handleKeyDetached } from './keyboard';
+import config from '@plone/volto/registry';
 
 const DEBUG = false;
 
@@ -29,6 +30,7 @@ export const DetachedTextBlockEditor = (props) => {
   const { value } = data;
 
   const intl = useIntl();
+  const { textblockExtensions } = config.settings.slate;
   const placeholder =
     data.placeholder || formTitle || intl.formatMessage(messages.text);
   let instructions = data?.instructions?.data || data?.instructions;
@@ -41,13 +43,22 @@ export const DetachedTextBlockEditor = (props) => {
     rootMargin: '0px 0px 200px 0px',
   });
 
+  const withBlockProperties = React.useCallback(
+    (editor) => {
+      editor.getBlockProps = () => props;
+      return editor;
+    },
+    [props],
+  );
+
   return (
     <div className="text-slate-editor-inner detached-slate-editor" ref={ref}>
       <SlateEditor
         index={index}
         readOnly={!inView}
         properties={properties}
-        renderExtensions={[]}
+        extensions={textblockExtensions}
+        renderExtensions={[withBlockProperties]}
         value={value}
         block={block /* is this needed? */}
         debug={DEBUG}

package/src/blocks/Text/SlashMenu.jsx

@@ -4,6 +4,7 @@ import { filter, isEmpty } from 'lodash';
 import { Menu } from 'semantic-ui-react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { Icon } from '@plone/volto/components';
+import { useUser } from '@plone/volto/hooks';
 
 const emptySlateBlock = () => ({
   value: [
@@ -105,9 +106,13 @@ const PersistentSlashMenu = ({ editor }) => {
     selected,
     allowedBlocks,
     detached,
+    navRoot,
+    contentType,
   } = props;
   const disableNewBlocks = data?.disableNewBlocks || detached;
 
+  const user = useUser();
+
   const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
 
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
@@ -122,8 +127,14 @@ const PersistentSlashMenu = ({ editor }) => {
         hasAllowedBlocks
           ? allowedBlocks.includes(item.id)
           : typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
-          : !item.restricted,
+            ? !item.restricted({
+                properties,
+                block: item,
+                navRoot,
+                contentType,
+                user,
+              })
+            : !item.restricted,
       )
         .filter((block) => Boolean(block.title && block.id))
         .filter((block) => {
@@ -152,6 +163,9 @@ const PersistentSlashMenu = ({ editor }) => {
       properties,
       slashCommand,
       hasAllowedBlocks,
+      navRoot,
+      contentType,
+      user,
     ],
   );
 

package/src/blocks/Text/extensions/breakList.js

@@ -35,6 +35,8 @@ export const breakList = (editor) => {
 
     const { slate } = config.settings;
     const { anchor } = editor.selection;
+    const blockProps = editor.getBlockProps();
+    const detached = blockProps.detached;
 
     const ref = Editor.rangeRef(editor, editor.selection, {
       affinity: 'inward',
@@ -65,8 +67,7 @@ export const breakList = (editor) => {
       return; // applies default behaviour, as defined in insertBreak.js extension
     }
 
-    if (parent) {
-      const blockProps = editor.getBlockProps();
+    if (parent && !detached) {
       const { data } = blockProps;
       // Don't add new block if not allowed
       if (data?.disableNewBlocks) {
@@ -77,22 +78,36 @@ export const breakList = (editor) => {
     Editor.deleteBackward(editor, { unit: 'line' });
     // also account for empty nodes [{text: ''}]
     if (Editor.isEmpty(editor, parent)) {
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
-      Transforms.removeNodes(editor, { at: ref.current });
+      if (detached) {
+        Transforms.removeNodes(editor, { at: ref.current });
+
+        Transforms.insertNodes(editor, createEmptyParagraph(), {
+          at: [editor.children.length],
+        });
+        Transforms.select(editor, Editor.end(editor, []));
+      } else {
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+        Transforms.removeNodes(editor, { at: ref.current });
+      }
       return true;
     }
 
     Transforms.removeNodes(editor, { at: ref.current });
 
     if (isCursorAtBlockEnd(editor)) {
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+      if (detached) {
+        Editor.insertNode(editor, createEmptyParagraph());
+      } else {
+        createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
+      }
       return true;
     }
 
-    const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
-    setEditorContent(editor, top);
-    createAndSelectNewBlockAfter(editor, bottom);
-
+    if (!detached) {
+      const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
+      setEditorContent(editor, top);
+      createAndSelectNewBlockAfter(editor, bottom);
+    }
     return true;
   };
 

package/src/blocks/Text/extensions/insertBreak.js

@@ -34,7 +34,7 @@ export const withSplitBlocksOnBreak = (editor) => {
         const { data } = blockProps;
 
         // Don't add new block if not allowed
-        if (data?.disableNewBlocks) {
+        if (data?.disableNewBlocks || blockProps.detached) {
           return insertBreak();
         }
 

package/src/blocks/Text/extensions/withDeserializers.js

@@ -46,10 +46,7 @@ export const onImageLoad = (editor, reader) => () => {
     },
   };
 
-  uploadContent(url, content, block).then((data) => {
-    const dlUrl = data.image.download;
-    insertImage(editor, dlUrl);
-  });
+  uploadContent(url, content, block);
 };
 
 export const withDeserializers = (editor) => {

package/src/blocks/Text/{index.js → index.jsx}

@@ -1,8 +1,8 @@
 import React from 'react';
-import redraft from 'redraft';
 import TextBlockView from './TextBlockView';
 import TextBlockEdit from './TextBlockEdit';
 import TextBlockSchema from './TextBlockSchema';
+import { cloneDeep } from 'lodash';
 
 import {
   goDown,
@@ -128,26 +128,8 @@ export default function applyConfig(config) {
       return override_toc && level
         ? [parseInt(level.slice(1)), entry_text]
         : config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), plaintext]
-        : null;
-    },
-  };
-
-  // Make draft js compatible with ToC
-  config.blocks.blocksConfig.text = {
-    ...config.blocks.blocksConfig.text,
-    restricted: true,
-    tocEntry: (block = {}) => {
-      const draft = redraft(
-        block.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      );
-      const type = draft?.[0]?.[0]?.type;
-
-      return config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), block.text.blocks[0].text]
-        : null;
+          ? [parseInt(type.slice(1)), plaintext]
+          : null;
     },
   };
 
@@ -164,7 +146,9 @@ export default function applyConfig(config) {
     // This is required in order to initialize the inner blocksConfig
     // for the grid block, since the slate block lives in an add-on
     // it should be responsible to fill itself into the grid configuration
-    config.blocks.blocksConfig.gridBlock.blocksConfig.slate = slateBlockConfig;
+    // The cloneDeep is mandatory in order to not mess with pass by reference problems
+    config.blocks.blocksConfig.gridBlock.blocksConfig.slate =
+      cloneDeep(slateBlockConfig);
   }
 
   return config;

package/src/blocks/Text/keyboard/indentListItems.js

@@ -55,8 +55,8 @@ export function indentListItems({ editor, event }) {
         ? decreaseMultipleItemsDepth(editor, event)
         : decreaseItemDepth(editor, event)
       : event.ctrlKey
-      ? increaseMultipleItemDepth(editor, event)
-      : increaseItemDepth(editor, event);
+        ? increaseMultipleItemDepth(editor, event)
+        : increaseItemDepth(editor, event);
   }
 }
 

package/src/constants.js

@@ -22,6 +22,9 @@ export const P = 'p';
 export const LI = 'li';
 export const UL = 'ul';
 export const OL = 'ol';
+export const H2 = 'h2';
+export const H3 = 'h3';
+export const BLOCKQUOTE = 'blockquote';
 
 // dom parsing node information
 export const TEXT_NODE = 3;

package/src/editor/less/editor.less

@@ -25,6 +25,12 @@
     &.upper {
       transform: translateY(-100%);
     }
+
+    .link-form-container {
+      margin-left: 2px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   .toolbar-wrapper.active {
@@ -41,12 +47,13 @@
     box-sizing: border-box;
     padding: 3px;
     border: none;
-    background: #fff;
     border-radius: 2px;
+    background: #fff;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
     font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 1rem;
     font-weight: normal;
+    min-width: 300px; // needed for image widget slate toolbar
 
     .expando {
       flex-grow: 1;
@@ -74,8 +81,8 @@
         box-sizing: border-box;
         padding: 4px !important;
         border: 0;
-        background: rgba(255, 255, 255, 0.975);
         border-radius: 1px;
+        background: rgba(255, 255, 255, 0.975);
         color: @brown;
         font-size: 18px;
         vertical-align: bottom;
@@ -91,9 +98,9 @@
         }
 
         &.active {
+          border-radius: 3px;
           // TODO: stop using !important, use smth better
           background: #efefef !important;
-          border-radius: 3px;
           box-shadow: inset 0 0 0 1px @blue !important;
           color: @blue !important;
 
@@ -151,9 +158,11 @@
   top: 29px;
   left: -9px;
   width: 210px;
-  background-color: rgba(255, 255, 255, 0.975);
   border-radius: 2px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.975);
+  box-shadow:
+    0 0 8px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.05);
 
   .ui.menu {
     border: 0;

package/src/editor/less/slate.less

@@ -22,7 +22,9 @@ h4 {
       fill: #42526e;
       opacity: 0;
       transform: rotate(15deg) translate(-8px, 2px);
-      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
+      transition:
+        opacity 0.2s ease 0s,
+        transform 0.2s ease 0s;
     }
   }
 }

package/src/editor/plugins/Markdown/constants.js

@@ -1,6 +1,6 @@
 import { toggleList } from './utils';
 import { isBlockActive } from '@plone/volto-slate/utils';
-import { UL, OL, LI } from '@plone/volto-slate/constants';
+import { UL, OL, LI, H2, H3, BLOCKQUOTE } from '@plone/volto-slate/constants';
 
 /**
  * Uses the old toggleList function to toggle lists on or off or from a type to another.
@@ -22,11 +22,11 @@ export const localToggleList = (editor, format) => {
  */
 export const autoformatRules = [
   {
-    type: 'h2',
+    type: H2,
     markup: '#',
   },
   {
-    type: 'h3',
+    type: H3,
     markup: '##',
   },
   {
@@ -44,36 +44,36 @@ export const autoformatRules = [
     },
   },
   {
-    type: 'blockquote',
+    type: BLOCKQUOTE,
     markup: ['>'],
     // preFormat,
   },
   {
-    type: 'bold',
+    type: 'strong',
     between: ['**', '**'],
     mode: 'inline',
     insertTrigger: true,
   },
   {
-    type: 'bold',
+    type: 'strong',
     between: ['__', '__'],
     mode: 'inline',
     insertTrigger: true,
   },
   {
-    type: 'italic',
+    type: 'em',
     between: ['*', '*'],
     mode: 'inline',
     insertTrigger: true,
   },
   {
-    type: 'italic',
+    type: 'em',
     between: ['_', '_'],
     mode: 'inline',
     insertTrigger: true,
   },
   {
-    type: 'strikethrough',
+    type: 'del',
     between: ['~~', '~~'],
     mode: 'inline',
     insertTrigger: true,

package/src/editor/plugins/Markdown/extensions.js

@@ -170,9 +170,8 @@ export const autoformatInline = (
 
   // add mark to the text between the markups
   Transforms.select(editor, markupRange);
-  editor.addMark(type, true);
+  Transforms.wrapNodes(editor, { type, children: [] }, { split: true });
   Transforms.collapse(editor, { edge: 'end' });
-  editor.removeMark(type);
 
   // delete start markup
   const startMarkupPointBefore = getPointBefore(editor, selection, {
@@ -200,6 +199,7 @@ export const autoformatBlock = (editor, type, at, { preFormat, format }) => {
     Transforms.setNodes(
       editor,
       { type },
+      { at },
       { match: (n) => Editor.isBlock(editor, n) },
     );
   } else {

package/src/editor/ui/PositionedToolbar.jsx

@@ -7,12 +7,19 @@ const PositionedToolbar = ({ toggleButton, className, children, position }) => {
   // TODO: "position" is actually an object like `{ style: {} }`
   // To be renamed as "attributes" or "attrs"
   const ref = React.useRef();
+  const portalTarget = toggleButton || document.body;
 
   React.useEffect(() => {
     const el = ref.current;
 
     const { style } = position || {};
-    const left = `${Math.max(style.left - el.offsetWidth / 2, 0)}px`;
+    // allow negative left positioning when portal isn't document.body
+    // we need to use Math.max to avoid Slate AddLink popup going off screen
+    // and it adds the toolbar to the body
+    const left =
+      portalTarget === document.body
+        ? `${Math.max(style.left - el.offsetWidth / 2, 0)}px`
+        : `${style.left - el.offsetWidth / 2}px`;
     const top = `${style.top - el.offsetHeight}px`;
 
     el.style.opacity = style.opacity;
@@ -24,7 +31,7 @@ const PositionedToolbar = ({ toggleButton, className, children, position }) => {
     <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
       {children}
     </BasicToolbar>,
-    document.body,
+    portalTarget,
   );
 };
 

package/src/elementEditor/PluginEditor.jsx

@@ -3,7 +3,8 @@ import { isEqual } from 'lodash';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { ReactEditor } from 'slate-react';
-import { Icon as VoltoIcon, BlockDataForm } from '@plone/volto/components';
+import { Icon as VoltoIcon } from '@plone/volto/components';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import { setPluginOptions } from '@plone/volto-slate/actions';
 import BaseSchemaProvider from './SchemaProvider';
 

package/src/elementEditor/utils.js

@@ -45,13 +45,16 @@ export const _insertElement = (elementType) => (editor, data) => {
           match: (node) => {
             return Node.string(node).length !== 0;
           },
-        }, //,
+        },
       );
     }
 
     const sel = JSON.parse(JSON.stringify(rangeRef.current));
-    Transforms.select(editor, sel);
-    editor.setSavedSelection(sel);
+
+    setTimeout(() => {
+      Transforms.select(editor, sel);
+      editor.setSavedSelection(sel);
+    });
 
     return true;
   }
@@ -69,10 +72,26 @@ export const _insertElement = (elementType) => (editor, data) => {
  * @returns {Object|null} - current node
  */
 export const _unwrapElement = (elementType) => (editor) => {
-  const [link] = Editor.nodes(editor, {
-    at: editor.selection,
+  const selection = editor.selection || editor.getSavedSelection();
+  let [link] = Editor.nodes(editor, {
+    at: selection,
     match: (node) => node?.type === elementType,
   });
+  const isAtStart =
+    selection.anchor.offset === 0 && selection.focus.offset === 0;
+
+  if (!link && !isAtStart) return false;
+
+  if (!link) {
+    try {
+      link = Editor.previous(editor, {
+        at: selection.anchor.path,
+      });
+    } catch (ex) {
+      link = [];
+    }
+  }
+
   const [, path] = link;
   const [start, end] = Editor.edges(editor, path);
   const range = { anchor: start, focus: end };

package/src/utils/blocks.js

@@ -264,7 +264,7 @@ export const toggleBlock = (editor, format, allowedChildren) => {
   } else if (!isListItem && !wantsList) {
     toggleFormat(editor, format, allowedChildren);
   } else if (isListItem && wantsList && isActive) {
-    clearFormatting(editor);
+    clearList(editor);
   } else {
     console.warn('toggleBlock case not covered, please examine:', {
       wantsList,
@@ -298,6 +298,21 @@ export const switchListType = (editor, format) => {
   Transforms.wrapNodes(editor, block);
 };
 
+/*
+ * Clear list by exploding the block
+ */
+export const clearList = (editor) => {
+  const { slate } = config.settings;
+  Transforms.unwrapNodes(editor, {
+    match: (n) => slate.listTypes.includes(n.type),
+    split: true,
+  });
+  Transforms.setNodes(editor, {
+    type: 'p',
+  });
+  Editor.normalize(editor);
+};
+
 export const changeBlockToList = (editor, format) => {
   const { slate } = config.settings;
   const [match] = Editor.nodes(editor, {

package/src/utils/volto-blocks.js

@@ -3,6 +3,8 @@ import { v4 as uuid } from 'uuid';
 import {
   addBlock,
   changeBlock,
+  insertBlock,
+  blockHasValue,
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
@@ -121,8 +123,19 @@ export function createImageBlock(url, index, props) {
   const blocksFieldname = getBlocksFieldname(properties);
   const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
 
-  const [id, formData] = addBlock(properties, 'image', index + 1);
-  const newFormData = changeBlock(formData, id, { '@type': 'image', url });
+  const currBlockId = properties.blocks_layout.items[index];
+  const currBlockHasValue = blockHasValue(properties.blocks[currBlockId]);
+  let id, newFormData;
+
+  if (currBlockHasValue) {
+    [id, newFormData] = addBlock(properties, 'image', index + 1);
+    newFormData = changeBlock(newFormData, id, { '@type': 'image', url });
+  } else {
+    [id, newFormData] = insertBlock(properties, currBlockId, {
+      '@type': 'image',
+      url,
+    });
+  }
 
   ReactDOM.unstable_batchedUpdates(() => {
     onChangeField(blocksFieldname, newFormData[blocksFieldname]);

package/src/widgets/HtmlSlateWidget.jsx

@@ -9,7 +9,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 import { makeEditor } from '@plone/volto-slate/utils';

package/src/widgets/ObjectByTypeWidget.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Menu, Tab } from 'semantic-ui-react';
-import { Icon, ObjectWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import { ObjectWidget } from '@plone/volto/components/manage/Widgets';
 
 export const ObjectByTypeWidget = (props) => {
   const { schemas, value = {}, onChange, errors = {}, id } = props;

package/src/widgets/RichTextWidget.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 
 import { createEmptyParagraph, createParagraph } from '../utils/blocks';