@strapi/admin 4.14.3 → 4.14.5

package/admin/src/content-manager/components/BlocksEditor/Toolbar/index.js

@@ -3,15 +3,22 @@ import * as React from 'react';
 import * as Toolbar from '@radix-ui/react-toolbar';
 import { Flex, Icon, Tooltip, Select, Option, Box, Typography } from '@strapi/design-system';
 import { pxToRem, prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
-import { BulletList, NumberList } from '@strapi/icons';
+import { Link } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Editor, Transforms, Element as SlateElement } from 'slate';
-import { useSlate } from 'slate-react';
+import { ReactEditor, useSlate } from 'slate-react';
 import styled from 'styled-components';
 
 import { useBlocksStore } from '../hooks/useBlocksStore';
 import { useModifiersStore } from '../hooks/useModifiersStore';
+import { insertLink } from '../utils/links';
+
+const ToolbarWrapper = styled(Flex)`
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
 
 const Separator = styled(Toolbar.Separator)`
   background: ${({ theme }) => theme.colors.neutral150};
@@ -20,32 +27,58 @@ const Separator = styled(Toolbar.Separator)`
 `;
 
 const FlexButton = styled(Flex).attrs({ as: 'button' })`
-  &:hover {
-    background: ${({ theme }) => theme.colors.primary100};
+  // Inherit the not-allowed cursor from ToolbarWrapper when disabled
+  &[aria-disabled] {
+    cursor: inherit;
+  }
+
+  &[aria-disabled='false'] {
+    cursor: pointer;
+
+    // Only apply hover styles if the button is enabled
+    &:hover {
+      background: ${({ theme }) => theme.colors.primary100};
+    }
   }
 `;
 
-const ToolbarButton = ({ icon, name, label, isActive, handleClick }) => {
+const ToolbarButton = ({ icon, name, label, isActive, disabled, handleClick }) => {
+  const editor = useSlate();
   const { formatMessage } = useIntl();
   const labelMessage = formatMessage(label);
 
+  const enabledColor = isActive ? 'primary600' : 'neutral600';
+
   return (
     <Tooltip description={labelMessage}>
-      <Toolbar.ToggleItem value={name} data-state={isActive ? 'on' : 'off'} asChild>
+      <Toolbar.ToggleItem
+        value={name}
+        data-state={isActive ? 'on' : 'off'}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          handleClick();
+        }}
+        aria-disabled={disabled}
+        disabled={disabled}
+        aria-label={labelMessage}
+        asChild
+      >
         <FlexButton
+          disabled={disabled}
           background={isActive ? 'primary100' : ''}
           alignItems="center"
           justifyContent="center"
           width={7}
           height={7}
           hasRadius
-          onMouseDown={(e) => {
-            e.preventDefault();
+          onMouseDown={() => {
             handleClick();
+            // When a button is clicked it blurs the editor, restore the focus to the editor
+            ReactEditor.focus(editor);
           }}
           aria-label={labelMessage}
         >
-          <Icon width={3} height={3} as={icon} color={isActive ? 'primary600' : 'neutral600'} />
+          <Icon width={3} height={3} as={icon} color={disabled ? 'neutral300' : enabledColor} />
         </FlexButton>
       </Toolbar.ToggleItem>
     </Tooltip>
@@ -60,74 +93,63 @@ ToolbarButton.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
   }).isRequired,
   isActive: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
   handleClick: PropTypes.func.isRequired,
 };
 
-const ModifierButton = ({ icon, name, label }) => {
-  const editor = useSlate();
-
-  const isModifierActive = () => {
-    const modifiers = Editor.marks(editor);
-
-    if (!modifiers) return false;
-
-    return Boolean(modifiers[name]);
-  };
-
-  const isActive = isModifierActive();
-
-  const toggleModifier = () => {
-    if (isActive) {
-      Editor.removeMark(editor, name);
-    } else {
-      Editor.addMark(editor, name, true);
-    }
-  };
-
-  return (
-    <ToolbarButton
-      icon={icon}
-      name={name}
-      label={label}
-      isActive={isActive}
-      handleClick={toggleModifier}
-    />
-  );
-};
-
-ModifierButton.propTypes = {
-  icon: PropTypes.elementType.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-const isBlockActive = (editor, matchNode) => {
-  const { selection } = editor;
-
-  if (!selection) return false;
-
-  const match = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && matchNode(n),
-    })
-  );
-
-  return match.length > 0;
-};
-
 const toggleBlock = (editor, value) => {
-  const { type, level } = value;
+  const { type, level, format } = value;
 
-  const newProperties = {
+  // Set the selected block properties received from the useBlockStore
+  const blockProperties = {
     type,
     level: level || null,
+    format: format || null,
   };
 
-  Transforms.setNodes(editor, newProperties);
+  if (editor.selection) {
+    // If the selection is inside a list, split the list so that the modified block is outside of it
+    Transforms.unwrapNodes(editor, {
+      match: (node) => node.type === 'list',
+      split: true,
+    });
+
+    // When there is a selection, update the existing block in the tree
+    Transforms.setNodes(editor, blockProperties);
+  } else {
+    /**
+     * When there is no selection, we want to insert a new block just after
+     * the last node inserted and prevent the code to add an empty paragraph
+     * between them.
+     */
+    const [, lastNodePath] = Editor.last(editor, []);
+    const [parentNode] = Editor.parent(editor, lastNodePath, {
+      // Makes sure we get a block node, not an inline node
+      match: (node) => node.type !== 'text',
+    });
+    Transforms.removeNodes(editor, {
+      void: true,
+      hanging: true,
+      at: {
+        anchor: { path: lastNodePath, offset: 0 },
+        focus: { path: lastNodePath, offset: 0 },
+      },
+    });
+    Transforms.insertNodes(
+      editor,
+      {
+        ...blockProperties,
+        children: parentNode.children,
+      },
+      {
+        at: [lastNodePath[0]],
+        select: true,
+      }
+    );
+  }
+
+  // When the select is clicked it blurs the editor, restore the focus to the editor
+  ReactEditor.focus(editor);
 };
 
 const ALLOWED_MEDIA_TYPE = 'images';
@@ -167,6 +189,8 @@ const ImageDialog = ({ handleClose }) => {
   const MediaLibraryDialog = components['media-library'];
 
   const insertImages = (images) => {
+    // Image node created using select or existing selection node needs to be deleted before adding new image nodes
+    Transforms.removeNodes(editor);
     images.forEach((img) => {
       const image = { type: 'image', image: img, children: [{ type: 'text', text: '' }] };
       Transforms.insertNodes(editor, image);
@@ -175,7 +199,7 @@ const ImageDialog = ({ handleClose }) => {
 
   const handleSelectAssets = (images) => {
     const formattedImages = images.map((image) => {
-      // create an object with imageSchema defined and exclude unnecessary props coming from media library config
+      // Create an object with imageSchema defined and exclude unnecessary props coming from media library config
       const expectedImage = pick(image, IMAGE_SCHEMA_FIELDS);
 
       return {
@@ -186,6 +210,12 @@ const ImageDialog = ({ handleClose }) => {
     });
 
     insertImages(formattedImages);
+
+    if (isLastBlockType(editor, 'image')) {
+      // Insert blank line to add new blocks below image block
+      insertEmptyBlockAtLast(editor);
+    }
+
     handleClose();
   };
 
@@ -202,18 +232,18 @@ ImageDialog.propTypes = {
   handleClose: PropTypes.func.isRequired,
 };
 
-const isLastBlockImageOrCode = (editor) => {
+const isLastBlockType = (editor, type) => {
   const { selection } = editor;
 
   if (!selection) return false;
 
-  const [currentImageORCodeBlock] = Editor.nodes(editor, {
+  const [currentBlock] = Editor.nodes(editor, {
     at: selection,
-    match: (n) => n.type === 'image' || n.type === 'code',
+    match: (n) => n.type === type,
   });
 
-  if (currentImageORCodeBlock) {
-    const [, currentNodePath] = currentImageORCodeBlock;
+  if (currentBlock) {
+    const [, currentNodePath] = currentBlock;
 
     const isNodeAfter = Boolean(Editor.after(editor, currentNodePath));
 
@@ -223,7 +253,18 @@ const isLastBlockImageOrCode = (editor) => {
   return false;
 };
 
-export const BlocksDropdown = () => {
+const insertEmptyBlockAtLast = (editor) => {
+  Transforms.insertNodes(
+    editor,
+    {
+      type: 'paragraph',
+      children: [{ type: 'text', text: '' }],
+    },
+    { at: [editor.children.length] }
+  );
+};
+
+const BlocksDropdown = ({ disabled }) => {
   const editor = useSlate();
   const { formatMessage } = useIntl();
   const [isMediaLibraryVisible, setIsMediaLibraryVisible] = React.useState(false);
@@ -241,20 +282,24 @@ export const BlocksDropdown = () => {
    * @param {string} optionKey - key of the heading selected
    */
   const selectOption = (optionKey) => {
-    toggleBlock(editor, blocks[optionKey].value);
+    if (['list-ordered', 'list-unordered'].includes(optionKey)) {
+      // retrieve the list format
+      const listFormat = blocks[optionKey].value.format;
+
+      // check if the list is already active
+      const isActive = isListActive(editor, blocks[optionKey].matchNode);
+
+      // toggle the list
+      toggleList(editor, isActive, listFormat);
+    } else if (optionKey !== 'image') {
+      toggleBlock(editor, blocks[optionKey].value);
+    }
 
     setBlockSelected(optionKey);
 
-    if (isLastBlockImageOrCode(editor)) {
-      // insert blank line to add new blocks below code or image blocks
-      Transforms.insertNodes(
-        editor,
-        {
-          type: 'paragraph',
-          children: [{ type: 'text', text: '' }],
-        },
-        { at: [editor.children.length] }
-      );
+    if (optionKey === 'code' && isLastBlockType(editor, 'code')) {
+      // Insert blank line to add new blocks below code block
+      insertEmptyBlockAtLast(editor);
     }
 
     if (optionKey === 'image') {
@@ -262,6 +307,37 @@ export const BlocksDropdown = () => {
     }
   };
 
+  /**
+   * Prevent the select from focusing itself so ReactEditor.focus(editor) can focus the editor instead.
+   *
+   * The editor first loses focus to a blur event when clicking the select button. However,
+   * refocusing the editor is not enough since the select's default behavior is to refocus itself
+   * after an option is selected.
+   *
+   */
+  const preventSelectFocus = (e) => e.preventDefault();
+
+  // Listen to the selection change and update the selected block in the dropdown
+  React.useEffect(() => {
+    if (editor.selection) {
+      // Get the parent node of the anchor
+      // with a depth of two to retrieve also the list item parents
+      const [anchorNode] = Editor.parent(editor, editor.selection.anchor, {
+        edge: 'start',
+        depth: 2,
+      });
+      // Find the block key that matches the anchor node
+      const anchorBlockKey = Object.keys(blocks).find((blockKey) =>
+        blocks[blockKey].matchNode(anchorNode)
+      );
+
+      // Change the value selected in the dropdown if it doesn't match the anchor block key
+      if (anchorBlockKey && anchorBlockKey !== blockSelected) {
+        setBlockSelected(anchorBlockKey);
+      }
+    }
+  }, [editor.selection, editor, blocks, blockSelected]);
+
   return (
     <>
       <Select
@@ -269,10 +345,12 @@ export const BlocksDropdown = () => {
         onChange={selectOption}
         placeholder={blocks[blockSelected].label}
         value={blockSelected}
+        onCloseAutoFocus={preventSelectFocus}
         aria-label={formatMessage({
           id: 'components.Blocks.blocks.selectBlock',
           defaultMessage: 'Select a block',
         })}
+        disabled={disabled}
       >
         {blockKeysToInclude.map((key) => (
           <BlockOption
@@ -280,8 +358,6 @@ export const BlocksDropdown = () => {
             value={key}
             label={blocks[key].label}
             icon={blocks[key].icon}
-            matchNode={blocks[key].matchNode}
-            handleSelection={setBlockSelected}
             blockSelected={blockSelected}
           />
         ))}
@@ -291,19 +367,15 @@ export const BlocksDropdown = () => {
   );
 };
 
-const BlockOption = ({ value, icon, label, handleSelection, blockSelected, matchNode }) => {
+BlocksDropdown.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+};
+
+const BlockOption = ({ value, icon, label, blockSelected }) => {
   const { formatMessage } = useIntl();
-  const editor = useSlate();
 
-  const isActive = isBlockActive(editor, matchNode);
   const isSelected = value === blockSelected;
 
-  React.useEffect(() => {
-    if (isActive && !isSelected) {
-      handleSelection(value);
-    }
-  }, [handleSelection, isActive, isSelected, value]);
-
   return (
     <Option
       startIcon={<Icon as={icon} color={isSelected ? 'primary600' : 'neutral600'} />}
@@ -321,58 +393,101 @@ BlockOption.propTypes = {
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,
   }).isRequired,
-  matchNode: PropTypes.func.isRequired,
-  handleSelection: PropTypes.func.isRequired,
   blockSelected: PropTypes.string.isRequired,
 };
 
-const ListButton = ({ icon, format, label }) => {
-  const editor = useSlate();
-
-  /**
-   *
-   * @param {import('slate').Node} node
-   * @returns boolean
-   */
-  const isListNode = (node) => {
-    return !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === 'list';
-  };
-
-  const isListActive = () => {
-    const { selection } = editor;
+/**
+ *
+ * @param {import('slate').Node} node
+ * @returns boolean
+ */
+const isListNode = (node) => {
+  return !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === 'list';
+};
 
-    if (!selection) return false;
+const isListActive = (editor, matchNode) => {
+  const { selection } = editor;
 
-    const [match] = Array.from(
-      Editor.nodes(editor, {
-        at: Editor.unhangRange(editor, selection),
-        match: (node) => isListNode(node) && node.format === format,
-      })
-    );
+  if (!selection) return false;
 
-    return Boolean(match);
-  };
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: matchNode,
+    })
+  );
 
-  const isActive = isListActive();
+  return Boolean(match);
+};
 
-  const toggleList = () => {
-    // Delete the parent list so that we're left with only the list items directly
+const toggleList = (editor, isActive, format) => {
+  // If we have selected a portion of content in the editor,
+  // we want to convert it to a list or if it is already a list,
+  // convert it back to a paragraph
+  if (editor.selection) {
     Transforms.unwrapNodes(editor, {
       match: (node) => isListNode(node) && ['ordered', 'unordered'].includes(node.format),
       split: true,
     });
 
-    // Change the type of the current selection
     Transforms.setNodes(editor, {
       type: isActive ? 'paragraph' : 'list-item',
     });
 
-    // If the selection is now a list item, wrap it inside a list
     if (!isActive) {
       const block = { type: 'list', format, children: [] };
       Transforms.wrapNodes(editor, block);
     }
-  };
+  } else {
+    // There is no selection, convert the last inserted node to a list
+    // If it is already a list, convert it back to a paragraph
+    const [, lastNodePath] = Editor.last(editor, []);
+
+    const [parentNode] = Editor.parent(editor, lastNodePath, {
+      // Makes sure we get a block node, not an inline node
+      match: (node) => node.type !== 'text',
+    });
+
+    Transforms.removeNodes(editor, {
+      void: true,
+      hanging: true,
+      at: {
+        anchor: { path: lastNodePath, offset: 0 },
+        focus: { path: lastNodePath, offset: 0 },
+      },
+    });
+
+    Transforms.insertNodes(
+      editor,
+      {
+        type: isActive ? 'paragraph' : 'list-item',
+        children: [...parentNode.children],
+      },
+      {
+        at: [lastNodePath[0]],
+        select: true,
+      }
+    );
+
+    if (!isActive) {
+      // If the selection is now a list item, wrap it inside a list
+      const block = { type: 'list', format, children: [] };
+      Transforms.wrapNodes(editor, block);
+    }
+  }
+};
+
+const ListButton = ({ block, disabled }) => {
+  const editor = useSlate();
+
+  const {
+    icon,
+    matchNode,
+    value: { format },
+    label,
+  } = block;
+
+  const isActive = isListActive(editor, matchNode);
 
   return (
     <ToolbarButton
@@ -380,40 +495,140 @@ const ListButton = ({ icon, format, label }) => {
       name={format}
       label={label}
       isActive={isActive}
-      handleClick={toggleList}
+      disabled={disabled}
+      handleClick={() => toggleList(editor, isActive, format)}
     />
   );
 };
 
 ListButton.propTypes = {
-  icon: PropTypes.elementType.isRequired,
-  format: PropTypes.string.isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
+  block: PropTypes.shape({
+    icon: PropTypes.elementType.isRequired,
+    matchNode: PropTypes.func.isRequired,
+    value: PropTypes.shape({
+      format: PropTypes.string.isRequired,
+    }).isRequired,
+    label: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+    }).isRequired,
   }).isRequired,
+  disabled: PropTypes.bool.isRequired,
+};
+
+const LinkButton = ({ disabled }) => {
+  const editor = useSlate();
+
+  const isLinkActive = () => {
+    const { selection } = editor;
+
+    if (!selection) return false;
+
+    const [match] = Array.from(
+      Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: (node) => SlateElement.isElement(node) && node.type === 'link',
+      })
+    );
+
+    return Boolean(match);
+  };
+
+  const isLinkDisabled = () => {
+    // Always disabled when the whole editor is disabled
+    if (disabled) {
+      return true;
+    }
+
+    // Always enabled when there's no selection
+    if (!editor.selection) {
+      return false;
+    }
+
+    // Get the block node closest to the anchor and focus
+    const anchorNodeEntry = Editor.above(editor, {
+      at: editor.selection.anchor,
+      match: (node) => node.type !== 'text',
+    });
+    const focusNodeEntry = Editor.above(editor, {
+      at: editor.selection.focus,
+      match: (node) => node.type !== 'text',
+    });
+
+    // Disabled if the anchor and focus are not in the same block
+    return anchorNodeEntry[0] !== focusNodeEntry[0];
+  };
+
+  const addLink = () => {
+    // We insert an empty anchor, so we split the DOM to have a element we can use as reference for the popover
+    insertLink(editor, { url: '' });
+  };
+
+  return (
+    <ToolbarButton
+      icon={Link}
+      name="link"
+      label={{
+        id: 'components.Blocks.link',
+        defaultMessage: 'Link',
+      }}
+      isActive={isLinkActive()}
+      handleClick={addLink}
+      disabled={isLinkDisabled()}
+    />
+  );
+};
+
+LinkButton.propTypes = {
+  disabled: PropTypes.bool.isRequired,
 };
 
-// TODO: Remove after the RTE Blocks Alpha release
-const AlphaTag = styled(Box)`
-  background-color: ${({ theme }) => theme.colors.warning100};
-  border: ${({ theme }) => `1px solid ${theme.colors.warning200}`};
+// TODO: Remove after the RTE Blocks Beta release
+const BetaTag = styled(Box)`
+  background-color: ${({ theme }) => theme.colors.secondary100};
+  border: ${({ theme }) => `1px solid ${theme.colors.secondary200}`};
   border-radius: ${({ theme }) => theme.borderRadius};
   font-size: ${({ theme }) => theme.fontSizes[0]};
   padding: ${({ theme }) => `${2 / 16}rem ${theme.spaces[1]}`};
 `;
 
-const BlocksToolbar = () => {
+const BlocksToolbar = ({ disabled }) => {
   const modifiers = useModifiersStore();
+  const blocks = useBlocksStore();
+  const editor = useSlate();
+
+  /**
+   * The modifier buttons are disabled when an image is selected.
+   */
+
+  const checkButtonDisabled = () => {
+    // Always disabled when the whole editor is disabled
+    if (disabled) {
+      return true;
+    }
+
+    if (!editor.selection) {
+      return false;
+    }
+
+    const selectedNode = editor.children[editor.selection.anchor.path[0]];
+
+    if (['image', 'code'].includes(selectedNode.type)) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const isButtonDisabled = checkButtonDisabled();
 
   return (
-    <Toolbar.Root asChild>
-      {/* Remove after the RTE Blocks Alpha release (paddingRight and width) */}
-      <Flex gap={1} padding={2} paddingRight={4} width="100%">
-        <BlocksDropdown />
-        <Separator />
+    <Toolbar.Root aria-disabled={disabled} asChild>
+      {/* Remove after the RTE Blocks Beta release (paddingRight and width) */}
+      <ToolbarWrapper gap={2} padding={2} paddingRight={4} width="100%">
+        <BlocksDropdown disabled={disabled} />
         <Toolbar.ToggleGroup type="multiple" asChild>
-          <Flex gap={1}>
+          <Flex gap={1} marginLeft={1}>
             {Object.entries(modifiers).map(([name, modifier]) => (
               <ToolbarButton
                 key={name}
@@ -422,42 +637,34 @@ const BlocksToolbar = () => {
                 label={modifier.label}
                 isActive={modifier.checkIsActive()}
                 handleClick={modifier.handleToggle}
+                disabled={isButtonDisabled}
               />
             ))}
+            <LinkButton disabled={isButtonDisabled} />
           </Flex>
         </Toolbar.ToggleGroup>
         <Separator />
         <Toolbar.ToggleGroup type="single" asChild>
           <Flex gap={1}>
-            <ListButton
-              label={{
-                id: 'components.Blocks.blocks.unorderedList',
-                defaultMessage: 'Bulleted list',
-              }}
-              format="unordered"
-              icon={BulletList}
-            />
-            <ListButton
-              label={{
-                id: 'components.Blocks.blocks.orderedList',
-                defaultMessage: 'Numbered list',
-              }}
-              format="ordered"
-              icon={NumberList}
-            />
+            <ListButton block={blocks['list-unordered']} disabled={disabled} />
+            <ListButton block={blocks['list-ordered']} disabled={disabled} />
           </Flex>
         </Toolbar.ToggleGroup>
-        {/* TODO: Remove after the RTE Blocks Alpha release */}
+        {/* TODO: Remove after the RTE Blocks Beta release */}
         <Flex grow={1} justifyContent="flex-end">
-          <AlphaTag>
-            <Typography textColor="warning600" variant="sigma">
-              ALPHA
+          <BetaTag>
+            <Typography textColor="secondary600" variant="sigma">
+              BETA
             </Typography>
-          </AlphaTag>
+          </BetaTag>
         </Flex>
-      </Flex>
+      </ToolbarWrapper>
     </Toolbar.Root>
   );
 };
 
+BlocksToolbar.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+};
+
 export { BlocksToolbar };