Merge pull request #10 from eea/develop

Release 0.7.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "volto-slate",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "scripts": {

src/actions/content.js

@@ -1,6 +1,8 @@
 import { nestContent } from '@plone/volto/helpers';
 import { UPLOAD_CONTENT } from 'volto-slate/constants';
 
+// TODO: the PR has been merged into Volto, so this should be cleaned up
+
 /**
  * @summary Upload content function.
  *

src/blocks/Table/index.js

@@ -24,7 +24,7 @@ export default function install(config) {
     view: TableView,
     edit: TableEdit,
     restricted: false,
-    mostUsed: true,
+    mostUsed: false,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
     security: {

src/blocks/Text/TextBlockEdit.jsx

@@ -7,7 +7,6 @@ import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 
 import { Icon, BlockChooser, SidebarPortal } from '@plone/volto/components';
-import { useFormStateContext } from '@plone/volto/components/manage/Form/FormContext';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
@@ -37,7 +36,6 @@ const TextBlockEdit = (props) => {
     data,
     detached,
     index,
-    onAddBlock,
     onChangeBlock,
     onMutateBlock,
     onSelectBlock,
@@ -62,19 +60,12 @@ const TextBlockEdit = (props) => {
 
   const prevReq = React.useRef(null);
 
-  const formContext = useFormStateContext();
-
   const withBlockProperties = React.useCallback(
     (editor) => {
-      editor.getBlockProps = () => {
-        return {
-          ...props,
-        };
-      };
-      editor.formContext = formContext;
+      editor.getBlockProps = () => props;
       return editor;
     },
-    [props, formContext],
+    [props],
   );
 
   const onDrop = React.useCallback(
@@ -117,33 +108,13 @@ const TextBlockEdit = (props) => {
     if (loaded && !loading && !prevLoaded && newImageId !== imageId) {
       const url = flattenToAppURL(imageId);
       setNewImageId(imageId);
-      createImageBlock('', index, {
-        onChangeBlock,
-        onAddBlock,
-      }).then((imageblockid) => {
-        const options = {
-          '@type': 'image',
-          url,
-        };
-        onChangeBlock(imageblockid, options);
-      });
+
+      createImageBlock(url, index, props);
     }
     prevReq.current = loaded;
-  }, [
-    loaded,
-    loading,
-    prevLoaded,
-    imageId,
-    newImageId,
-    index,
-    onChangeBlock,
-    onAddBlock,
-  ]);
+  }, [props, loaded, loading, prevLoaded, imageId, newImageId, index]);
 
-  // const blockChooserRef = React.useRef();
-  /**
-   * This event handler unregisters itself after its first call.
-   */
+  // This event handler unregisters itself after its first call.
   const handleClickOutside = React.useCallback((e) => {
     const blockChooser = document.querySelector('.blocks-chooser');
     document.removeEventListener('mousedown', handleClickOutside, false);
@@ -162,7 +133,9 @@ const TextBlockEdit = (props) => {
           setTimeout(() => {
             Transforms.select(editor, selection);
             saveSlateBlockSelection(block, null);
-          }, 120); // without setTimeout, the join is not correct
+          }, 120);
+          // without setTimeout, the join is not correct. Slate uses internally
+          // a 100ms throttle, so setting to a bigger value seems to help
         }
       }
     },
@@ -232,7 +205,7 @@ const TextBlockEdit = (props) => {
           />
         )}
       </Dropzone>
-      {!detached && !data.plaintext && (
+      {!detached && !data.plaintext && !data.disableNewBlocks && (
         <Button
           basic
           icon

src/blocks/Text/extensions/breakList.js

@@ -60,6 +60,15 @@ export const breakList = (editor) => {
       return; // applies default behaviour, as defined in insertBreak.js extension
     }
 
+    if (parent) {
+      const blockProps = editor.getBlockProps();
+      const { data } = blockProps;
+      // Don't add new block if not allowed
+      if (data?.disableNewBlocks) {
+        return insertBreak();
+      }
+    }
+
     // TODO: while this is interesting as a tech demo, I'm not sure that this is
     // what we really want (break lists in two separate blocks)
 

src/blocks/Text/extensions/insertBreak.js

@@ -28,6 +28,14 @@ export const withSplitBlocksOnBreak = (editor) => {
       const block = Editor.parent(editor, editor.selection);
 
       if (block) {
+        const blockProps = editor.getBlockProps();
+        const { data } = blockProps;
+
+        // Don't add new block if not allowed
+        if (data?.disableNewBlocks) {
+          return insertBreak();
+        }
+
         const [top, bottom] = splitEditorInTwoFragments(editor);
         setEditorContent(editor, top);
         ReactEditor.blur(editor);

src/blocks/Text/index.js

@@ -84,7 +84,7 @@ export default (config) => {
     view: TextBlockView,
     edit: TextBlockEdit,
     restricted: false,
-    mostUsed: true,
+    mostUsed: false,
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
     security: {

src/blocks/Text/keyboard/backspaceInList.js

@@ -1,4 +1,4 @@
-import { Transforms, Editor } from 'slate';
+import { Transforms } from 'slate';
 import { settings } from '~/config';
 import {
   isCursorInList,
@@ -13,17 +13,10 @@ import {
  * @param {string[]} newIds The IDs of the newly created Volto blocks.
  */
 const handleNewVoltoBlocks = (editor, newIds) => {
-  // TODO: (done?) rewrite to benefit from FormContext and Form promises
-
   // Get the Edit component's props as received from Volto the last time it was
   // rendered.
   const props = editor.getBlockProps();
-  // Unfortunately, until Volto's on* methods don't have Promise support, we
-  // have to use a setTimeout with a bigger value, to be able to properly select
-  // the proper block
-  setTimeout(() => {
-    props.onSelectBlock(newIds[0]);
-  }, 100);
+  props.onSelectBlock(newIds[0]);
 };
 
 /**
@@ -39,6 +32,11 @@ export function backspaceInList({ editor, event }) {
   // If the cursor is at list block start, do something different:
   if (isCursorAtListBlockStart(editor)) {
     const { slate } = settings;
+    const blockProps = editor.getBlockProps();
+    const { data } = blockProps;
+
+    // Can't split if block is required
+    if (data?.required) return;
 
     // Raise all LI-s as direct children of the editor.
     Transforms.liftNodes(editor, {

src/blocks/Text/keyboard/indentListItems.js

@@ -66,24 +66,9 @@ export function indentListItems({ editor, event }) {
  * volto-slate addon.
  * @param {string[]} newIds The IDs of the newly created Volto blocks.
  */
-const handleNewVoltoBlocks = (editor, [newId1, newId2, newId3]) => {
-  // TODO: (done?) rewrite to benefit from FormContext and Form promises
-  let newId;
-  // If there is a 3rd new block
-  if (newId3) {
-    // Set it to be selected (focused) with the call below
-    newId = newId2;
-  } else {
-    // If there are just 1-2 new blocks
-    newId = newId1; // TODO: or newId2 in some situations?
-  }
-  // Get the Edit component's props as received from Volto the last time it was
-  // rendered.
+const handleNewVoltoBlocks = (editor, blockIds) => {
   const props = editor.getBlockProps();
-  // Unfortunately, until Volto's on* methods don't have Promise support, we
-  // have to use a setTimeout with a bigger value, to be able to properly select
-  // the proper block
-  setTimeout(() => props.onSelectBlock(newId), 10);
+  props.onSelectBlock(blockIds[blockIds.length - 1]);
 };
 
 /**