@strapi/admin 4.14.2 → 4.14.4

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,10 +93,11 @@ 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 ModifierButton = ({ icon, name, label, disabled }) => {
   const editor = useSlate();
 
   const isModifierActive = () => {
@@ -90,6 +124,7 @@ const ModifierButton = ({ icon, name, label }) => {
       name={name}
       label={label}
       isActive={isActive}
+      disabled={disabled}
       handleClick={toggleModifier}
     />
   );
@@ -102,32 +137,29 @@ ModifierButton.propTypes = {
     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;
+  disabled: PropTypes.bool.isRequired,
 };
 
 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) {
+    // When there is a selection, update the existing block in the tree
+    Transforms.setNodes(editor, blockProperties);
+  } else {
+    // Otherwise, add a new block to the tree
+    Transforms.insertNodes(editor, { ...blockProperties, children: [{ type: 'text', text: '' }] });
+  }
+
+  // When the select is clicked it blurs the editor, restore the focus to the editor
+  ReactEditor.focus(editor);
 };
 
 const ALLOWED_MEDIA_TYPE = 'images';
@@ -175,7 +207,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 +218,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 +240,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 +261,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] }
+  );
+};
+
+export const BlocksDropdown = ({ disabled }) => {
   const editor = useSlate();
   const { formatMessage } = useIntl();
   const [isMediaLibraryVisible, setIsMediaLibraryVisible] = React.useState(false);
@@ -241,20 +290,27 @@ export const BlocksDropdown = () => {
    * @param {string} optionKey - key of the heading selected
    */
   const selectOption = (optionKey) => {
-    toggleBlock(editor, blocks[optionKey].value);
+    if (optionKey === 'image') {
+      // Image node created using select or existing selection node needs to be deleted before adding new image nodes
+      Transforms.removeNodes(editor);
+    } else 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 {
+      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 +318,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 +356,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 +369,6 @@ export const BlocksDropdown = () => {
             value={key}
             label={blocks[key].label}
             icon={blocks[key].icon}
-            matchNode={blocks[key].matchNode}
-            handleSelection={setBlockSelected}
             blockSelected={blockSelected}
           />
         ))}
@@ -291,19 +378,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,24 +404,95 @@ 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 }) => {
+/**
+ *
+ * @param {import('slate').Node} node
+ * @returns boolean
+ */
+const isListNode = (node) => {
+  return !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === 'list';
+};
+
+const isListActive = (editor, matchNode) => {
+  const { selection } = editor;
+
+  if (!selection) return false;
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: matchNode,
+    })
+  );
+
+  return Boolean(match);
+};
+
+const toggleList = (editor, isActive, format) => {
+  // Delete the parent list so that we're left with only the list items directly
+  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);
+  }
+};
+
+const ListButton = ({ block, disabled }) => {
   const editor = useSlate();
 
-  /**
-   *
-   * @param {import('slate').Node} node
-   * @returns boolean
-   */
-  const isListNode = (node) => {
-    return !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === 'list';
-  };
+  const {
+    icon,
+    matchNode,
+    value: { format },
+    label,
+  } = block;
+
+  const isActive = isListActive(editor, matchNode);
+
+  return (
+    <ToolbarButton
+      icon={icon}
+      name={format}
+      label={label}
+      isActive={isActive}
+      disabled={disabled}
+      handleClick={() => toggleList(editor, isActive, format)}
+    />
+  );
+};
+
+ListButton.propTypes = {
+  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 isListActive = () => {
+  const isLinkActive = () => {
     const { selection } = editor;
 
     if (!selection) return false;
@@ -346,74 +500,57 @@ const ListButton = ({ icon, format, label }) => {
     const [match] = Array.from(
       Editor.nodes(editor, {
         at: Editor.unhangRange(editor, selection),
-        match: (node) => isListNode(node) && node.format === format,
+        match: (node) => SlateElement.isElement(node) && node.type === 'link',
       })
     );
 
     return Boolean(match);
   };
 
-  const isActive = isListActive();
-
-  const toggleList = () => {
-    // Delete the parent list so that we're left with only the list items directly
-    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);
-    }
+  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={icon}
-      name={format}
-      label={label}
-      isActive={isActive}
-      handleClick={toggleList}
+      icon={Link}
+      name="link"
+      label={{
+        id: 'components.Blocks.link',
+        defaultMessage: 'Link',
+      }}
+      isActive={isLinkActive()}
+      handleClick={addLink}
+      disabled={disabled}
     />
   );
 };
 
-ListButton.propTypes = {
-  icon: PropTypes.elementType.isRequired,
-  format: PropTypes.string.isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
+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();
 
   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={1} 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 +559,34 @@ const BlocksToolbar = () => {
                 label={modifier.label}
                 isActive={modifier.checkIsActive()}
                 handleClick={modifier.handleToggle}
+                disabled={disabled}
               />
             ))}
+            <LinkButton disabled={disabled} />
           </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 };