@strapi/admin 4.14.2 → 4.14.4

package/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js

@@ -1,6 +1,17 @@
 import * as React from 'react';
 
-import { Box, Typography, BaseLink } from '@strapi/design-system';
+import {
+  Box,
+  Typography,
+  BaseLink,
+  Popover,
+  IconButton,
+  Field,
+  FieldLabel,
+  FieldInput,
+  Flex,
+  Button,
+} from '@strapi/design-system';
 import {
   Code,
   Quote,
@@ -12,11 +23,20 @@ import {
   HeadingFour,
   HeadingFive,
   HeadingSix,
+  Trash,
+  Pencil,
+  BulletList,
+  NumberList,
 } from '@strapi/icons';
 import PropTypes from 'prop-types';
-import { Editor, Path, Transforms } from 'slate';
+import { useIntl } from 'react-intl';
+import { Editor, Path, Transforms, Range } from 'slate';
+import { useSlate, ReactEditor } from 'slate-react';
 import styled, { css } from 'styled-components';
 
+import { composeRefs } from '../../../utils';
+import { editLink, removeLink } from '../utils/links';
+
 const H1 = styled(Typography).attrs({ as: 'h1' })`
   font-size: ${42 / 16}rem;
   line-height: ${({ theme }) => theme.lineHeights[1]};
@@ -76,23 +96,24 @@ Heading.propTypes = {
 
 const CodeBlock = styled.pre.attrs({ role: 'code' })`
   border-radius: ${({ theme }) => theme.borderRadius};
-  background-color: #32324d; // since the color is same between the themes
+  background-color: ${({ theme }) => theme.colors.neutral100};
   max-width: 100%;
   overflow: auto;
-  padding: ${({ theme }) => theme.spaces[2]};
+  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
+  flex-shrink: 0;
   & > code {
-    color: #839496; // TODO: to confirm with design and get theme color
+    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
+      monospace;
+    color: ${({ theme }) => theme.colors.neutral800};
     overflow: auto;
     max-width: 100%;
-    padding: ${({ theme }) => theme.spaces[2]};
   }
 `;
 
 const Blockquote = styled.blockquote.attrs({ role: 'blockquote' })`
-  margin: ${({ theme }) => `${theme.spaces[6]} 0`};
+  margin: ${({ theme }) => `${theme.spaces[4]} 0`};
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   border-left: ${({ theme }) => `${theme.spaces[1]} solid ${theme.colors.neutral150}`};
-  font-style: italic;
   padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[5]};
 `;
 
@@ -134,35 +155,42 @@ List.propTypes = {
   }).isRequired,
 };
 
-const Img = styled.img`
-  max-width: 100%;
-`;
-
-const Image = ({ attributes, children, element }) => {
-  if (!element.image) return null;
-  const { url, alternativeText, width, height } = element.image;
+/**
+ * @param {import('slate').Editor} editor
+ * @param {Path} currentListPath
+ */
+const replaceListWithEmptyBlock = (editor, currentListPath) => {
+  // Delete the empty list
+  Transforms.removeNodes(editor, { at: currentListPath });
 
-  return (
-    <Box {...attributes}>
-      {children}
-      <Box contentEditable={false}>
-        <Img src={url} alt={alternativeText} width={width} height={height} />
-      </Box>
-    </Box>
-  );
+  if (currentListPath[0] === 0) {
+    // If the list was the only (or first) block element then insert empty paragraph as editor needs default value
+    Transforms.insertNodes(
+      editor,
+      {
+        type: 'paragraph',
+        children: [{ type: 'text', text: '' }],
+      },
+      { at: currentListPath }
+    );
+    Transforms.select(editor, currentListPath);
+  }
 };
 
-Image.propTypes = {
-  attributes: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  element: PropTypes.shape({
-    image: PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      alternativeText: PropTypes.string,
-      width: PropTypes.number,
-      height: PropTypes.number,
-    }),
-  }).isRequired,
+/**
+ * Common handler for the backspace event on ordered and unordered lists
+ * @param {import('slate').Editor} editor
+ * @param {Event} event
+ */
+const handleBackspaceKeyOnList = (editor, event) => {
+  const [currentListItem, currentListItemPath] = Editor.parent(editor, editor.selection.anchor);
+  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);
+  const isListEmpty = currentList.children.length === 1 && currentListItem.children[0].text === '';
+
+  if (isListEmpty) {
+    event.preventDefault();
+    replaceListWithEmptyBlock(editor, currentListPath);
+  }
 };
 
 /**
@@ -170,18 +198,21 @@ Image.propTypes = {
  * @param {import('slate').Editor} editor
  */
 const handleEnterKeyOnList = (editor) => {
-  // Check if the selected list item is empty
   const [currentListItem, currentListItemPath] = Editor.above(editor, {
     matchNode: (node) => node.type === 'list-item',
   });
-  const isEmptyListItem =
+  const [currentList, currentListPath] = Editor.parent(editor, currentListItemPath);
+  const isListEmpty = currentList.children.length === 1 && currentListItem.children[0].text === '';
+  const isListItemEmpty =
     currentListItem.children.length === 1 && currentListItem.children[0].text === '';
 
-  if (isEmptyListItem) {
+  if (isListEmpty) {
+    replaceListWithEmptyBlock(editor, currentListPath);
+  } else if (isListItemEmpty) {
     // Delete the empty list item
     Transforms.removeNodes(editor, { at: currentListItemPath });
 
-    // And create a new paragraph below the parent list
+    // Create a new paragraph below the parent list
     const listNodeEntry = Editor.above(editor, { match: (n) => n.type === 'list' });
     const createdParagraphPath = Path.next(listNodeEntry[1]);
     Transforms.insertNodes(
@@ -193,7 +224,7 @@ const handleEnterKeyOnList = (editor) => {
       { at: createdParagraphPath }
     );
 
-    // Move selection to the newly created paragraph
+    // Move the selection to the newly created paragraph
     Transforms.select(editor, createdParagraphPath);
   } else {
     // Otherwise just create a new list item by splitting the current one
@@ -201,6 +232,193 @@ const handleEnterKeyOnList = (editor) => {
   }
 };
 
+// The max-height is decided with the design team, the 56px is the height of the toolbar
+const Img = styled.img`
+  max-height: calc(512px - 56px);
+  max-width: 100%;
+  object-fit: contain;
+`;
+
+// Added a background color to the image wrapper to make it easier to recognize the image block
+const Image = ({ attributes, children, element }) => {
+  if (!element.image) return null;
+  const { url, alternativeText, width, height } = element.image;
+
+  return (
+    <Box {...attributes}>
+      {children}
+      <Flex background="neutral100" contentEditable={false} justifyContent="center">
+        <Img src={url} alt={alternativeText} width={width} height={height} />
+      </Flex>
+    </Box>
+  );
+};
+
+Image.propTypes = {
+  attributes: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  element: PropTypes.shape({
+    image: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      alternativeText: PropTypes.string,
+      width: PropTypes.number,
+      height: PropTypes.number,
+    }),
+  }).isRequired,
+};
+
+const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRef) => {
+  const { formatMessage } = useIntl();
+  const editor = useSlate();
+  const path = ReactEditor.findPath(editor, element);
+  const [popoverOpen, setPopoverOpen] = React.useState(
+    editor.lastInsertedLinkPath ? Path.equals(path, editor.lastInsertedLinkPath) : false
+  );
+  const [isEditing, setIsEditing] = React.useState(element.url === '');
+  const linkRef = React.useRef(null);
+  const elementText = element.children.map((child) => child.text).join('');
+  const [linkText, setLinkText] = React.useState(elementText);
+  const [linkUrl, setLinkUrl] = React.useState(element.url);
+
+  const handleOpenEditPopover = (e) => {
+    e.preventDefault();
+    setPopoverOpen(true);
+  };
+
+  const handleSave = (e) => {
+    e.stopPropagation();
+
+    // If the selection is collapsed, we select the parent node because we want all the link to be replaced
+    if (Range.isCollapsed(editor.selection)) {
+      const [, parentPath] = Editor.parent(editor, editor.selection.focus?.path);
+      Transforms.select(editor, parentPath);
+    }
+
+    editLink(editor, { url: linkUrl, text: linkText });
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+
+    if (element.url === '') {
+      removeLink(editor);
+    }
+  };
+
+  const handleDismiss = () => {
+    setPopoverOpen(false);
+
+    if (element.url === '') {
+      removeLink(editor);
+    }
+
+    ReactEditor.focus(editor);
+  };
+
+  const composedRefs = composeRefs(linkRef, forwardedRef);
+
+  return (
+    <>
+      <BaseLink
+        {...attributes}
+        ref={composedRefs}
+        href={element.url}
+        onClick={handleOpenEditPopover}
+        color="primary600"
+      >
+        {children}
+      </BaseLink>
+      {popoverOpen && (
+        <Popover source={linkRef} onDismiss={handleDismiss} padding={4} contentEditable={false}>
+          {isEditing ? (
+            <Flex as="form" onSubmit={handleSave} direction="column" gap={4}>
+              <Field width="300px">
+                <FieldLabel>
+                  {formatMessage({
+                    id: 'components.Blocks.popover.text',
+                    defaultMessage: 'Text',
+                  })}
+                </FieldLabel>
+                <FieldInput
+                  name="text"
+                  placeholder={formatMessage({
+                    id: 'components.Blocks.popover.text.placeholder',
+                    defaultMessage: 'Enter link text',
+                  })}
+                  value={linkText}
+                  onChange={(e) => setLinkText(e.target.value)}
+                />
+              </Field>
+              <Field width="300px">
+                <FieldLabel>
+                  {formatMessage({
+                    id: 'components.Blocks.popover.link',
+                    defaultMessage: 'Link',
+                  })}
+                </FieldLabel>
+                <FieldInput
+                  name="url"
+                  placeholder="https://strapi.io"
+                  value={linkUrl}
+                  onChange={(e) => setLinkUrl(e.target.value)}
+                />
+              </Field>
+              <Flex justifyContent="end" width="100%" gap={2}>
+                <Button variant="tertiary" onClick={handleCancel}>
+                  {formatMessage({
+                    id: 'components.Blocks.popover.cancel',
+                    defaultMessage: 'Cancel',
+                  })}
+                </Button>
+                <Button type="submit" disabled={!linkText || !linkUrl}>
+                  {formatMessage({
+                    id: 'components.Blocks.popover.save',
+                    defaultMessage: 'Save',
+                  })}
+                </Button>
+              </Flex>
+            </Flex>
+          ) : (
+            <Flex direction="column" gap={4} alignItems="start" width="400px">
+              <Typography>{elementText}</Typography>
+              <BaseLink href={element.url} target="_blank" color="primary600">
+                {element.url}
+              </BaseLink>
+              <Flex justifyContent="end" width="100%" gap={2}>
+                <IconButton
+                  icon={<Trash />}
+                  size="L"
+                  variant="danger"
+                  onClick={() => removeLink(editor)}
+                  label={formatMessage({
+                    id: 'components.Blocks.popover.delete',
+                    defaultMessage: 'Delete',
+                  })}
+                />
+                <IconButton
+                  icon={<Pencil />}
+                  size="L"
+                  onClick={() => setIsEditing(true)}
+                  label={formatMessage({
+                    id: 'components.Blocks.popover.edit',
+                    defaultMessage: 'Edit',
+                  })}
+                />
+              </Flex>
+            </Flex>
+          )}
+        </Popover>
+      )}
+    </>
+  );
+});
+
+Link.propTypes = {
+  element: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
 /**
  * Manages a store of all the available blocks.
  *
@@ -213,6 +431,7 @@ const handleEnterKeyOnList = (editor) => {
  *     matchNode: (node: Object) => boolean,
  *     isInBlocksSelector: true,
  *     handleEnterKey: (editor: import('slate').Editor) => void,
+ *     handleBackspaceKey?:(editor: import('slate').Editor, event: Event) => void,
  *   }
  * }} an object containing rendering functions and metadata for different blocks, indexed by name.
  */
@@ -235,6 +454,8 @@ export function useBlocksStore() {
       matchNode: (node) => node.type === 'paragraph',
       isInBlocksSelector: true,
       handleEnterKey(editor) {
+        // We need to keep track of the initial position of the cursor
+        const anchorPathInitialPosition = editor.selection.anchor.path;
         /**
          * Split the nodes where the cursor is. This will create a new paragraph with the content
          * after the cursor, while retaining all the children, modifiers etc.
@@ -254,12 +475,23 @@ export function useBlocksStore() {
          * Select the parent of the selection because we want the full block, not the leaf.
          * And copy its children to make sure we keep the modifiers.
          */
-        const [createdNode] = Editor.parent(editor, editor.selection.anchor.path);
+        const [fragmentedNode] = Editor.parent(editor, editor.selection.anchor.path);
         Transforms.removeNodes(editor, editor.selection);
-        Transforms.insertNodes(editor, {
-          type: 'paragraph',
-          children: createdNode.children,
-        });
+
+        // Check if after the current position there is another node
+        const hasNextNode = editor.children.length - anchorPathInitialPosition[0] > 1;
+
+        // Insert the new node at the right position. The next line after the editor selection if present or otherwise at the end of the editor.
+        Transforms.insertNodes(
+          editor,
+          {
+            type: 'paragraph',
+            children: fragmentedNode.children,
+          },
+          {
+            at: hasNextNode ? [anchorPathInitialPosition[0] + 1] : [editor.children.length],
+          }
+        );
 
         /**
          * The new selection will by default be at the end of the created node.
@@ -267,7 +499,7 @@ export function useBlocksStore() {
          * Use slice(0, -1) to go 1 level higher in the tree,
          * so we go to the start of the node and not the start of the leaf.
          */
-        Transforms.select(editor, editor.start(editor.selection.anchor.path.slice(0, -1)));
+        Transforms.select(editor, editor.start([anchorPathInitialPosition[0] + 1]));
       },
     },
     'heading-one': {
@@ -354,73 +586,37 @@ export function useBlocksStore() {
       matchNode: (node) => node.type === 'heading' && node.level === 6,
       isInBlocksSelector: true,
     },
-    link: {
-      renderElement: (props) => (
-        <BaseLink href={props.element.url} {...props.attributes}>
-          {props.children}
-        </BaseLink>
-      ),
-      value: {
-        type: 'link',
-      },
-      matchNode: (node) => node.type === 'link',
-      isInBlocksSelector: false,
-    },
-    code: {
-      renderElement: (props) => (
-        <CodeBlock {...props.attributes}>
-          <code>{props.children}</code>
-        </CodeBlock>
-      ),
-      icon: Code,
-      label: {
-        id: 'components.Blocks.blocks.code',
-        defaultMessage: 'Code',
-      },
-      value: {
-        type: 'code',
-      },
-      matchNode: (node) => node.type === 'code',
-      isInBlocksSelector: true,
-      handleEnterKey(editor) {
-        // Insert a new line within the block
-        Transforms.insertText(editor, '\n');
-      },
-    },
-    quote: {
-      renderElement: (props) => <Blockquote {...props.attributes}>{props.children}</Blockquote>,
-      icon: Quote,
-      label: {
-        id: 'components.Blocks.blocks.quote',
-        defaultMessage: 'Quote',
-      },
-      value: {
-        type: 'quote',
-      },
-      matchNode: (node) => node.type === 'quote',
-      isInBlocksSelector: true,
-    },
     'list-ordered': {
       renderElement: (props) => <List {...props} />,
+      label: {
+        id: 'components.Blocks.blocks.orderedList',
+        defaultMessage: 'Numbered list',
+      },
       value: {
         type: 'list',
         format: 'ordered',
       },
+      icon: NumberList,
       matchNode: (node) => node.type === 'list' && node.format === 'ordered',
-      // TODO add icon and label and set isInBlocksEditor to true
-      isInBlocksSelector: false,
+      isInBlocksSelector: true,
       handleEnterKey: handleEnterKeyOnList,
+      handleBackspaceKey: handleBackspaceKeyOnList,
     },
     'list-unordered': {
       renderElement: (props) => <List {...props} />,
+      label: {
+        id: 'components.Blocks.blocks.unorderedList',
+        defaultMessage: 'Bulleted list',
+      },
       value: {
         type: 'list',
         format: 'unordered',
       },
+      icon: BulletList,
       matchNode: (node) => node.type === 'list' && node.format === 'unordered',
-      // TODO add icon and label and set isInBlocksEditor to true
-      isInBlocksSelector: false,
+      isInBlocksSelector: true,
       handleEnterKey: handleEnterKeyOnList,
+      handleBackspaceKey: handleBackspaceKeyOnList,
     },
     'list-item': {
       renderElement: (props) => (
@@ -434,6 +630,18 @@ export function useBlocksStore() {
       matchNode: (node) => node.type === 'list-item',
       isInBlocksSelector: false,
     },
+    link: {
+      renderElement: (props) => (
+        <Link element={props.element} {...props.attributes}>
+          {props.children}
+        </Link>
+      ),
+      value: {
+        type: 'link',
+      },
+      matchNode: (node) => node.type === 'link',
+      isInBlocksSelector: false,
+    },
     image: {
       renderElement: (props) => <Image {...props} />,
       icon: Picture,
@@ -447,5 +655,64 @@ export function useBlocksStore() {
       matchNode: (node) => node.type === 'image',
       isInBlocksSelector: true,
     },
+    quote: {
+      renderElement: (props) => <Blockquote {...props.attributes}>{props.children}</Blockquote>,
+      icon: Quote,
+      label: {
+        id: 'components.Blocks.blocks.quote',
+        defaultMessage: 'Quote',
+      },
+      value: {
+        type: 'quote',
+      },
+      matchNode: (node) => node.type === 'quote',
+      isInBlocksSelector: true,
+      handleEnterKey(editor) {
+        /**
+         * To determine if we should break out of the quote node, check 2 things:
+         * 1. If the cursor is at the end of the quote node
+         * 2. If the last line of the quote node is empty
+         */
+        const [quoteNode, quoteNodePath] = Editor.above(editor, {
+          match: (n) => n.type === 'quote',
+        });
+        const isNodeEnd = Editor.isEnd(editor, editor.selection.anchor, quoteNodePath);
+        const isEmptyLine = quoteNode.children.at(-1).text.endsWith('\n');
+
+        if (isNodeEnd && isEmptyLine) {
+          // Remove the last line break
+          Transforms.delete(editor, { distance: 1, unit: 'character', reverse: true });
+          // Break out of the quote node new paragraph
+          Transforms.insertNodes(editor, {
+            type: 'paragraph',
+            children: [{ type: 'text', text: '' }],
+          });
+        } else {
+          // Otherwise insert a new line within the quote node
+          Transforms.insertText(editor, '\n');
+        }
+      },
+    },
+    code: {
+      renderElement: (props) => (
+        <CodeBlock {...props.attributes}>
+          <code>{props.children}</code>
+        </CodeBlock>
+      ),
+      icon: Code,
+      label: {
+        id: 'components.Blocks.blocks.code',
+        defaultMessage: 'Code',
+      },
+      value: {
+        type: 'code',
+      },
+      matchNode: (node) => node.type === 'code',
+      isInBlocksSelector: true,
+      handleEnterKey(editor) {
+        // Insert a new line within the block
+        Transforms.insertText(editor, '\n');
+      },
+    },
   };
 }

package/admin/src/content-manager/components/BlocksEditor/hooks/useModifiersStore.js

@@ -8,19 +8,23 @@ import styled from 'styled-components';
 
 const BoldText = styled(Typography).attrs({ fontWeight: 'bold' })`
   font-size: inherit;
+  color: inherit;
 `;
 
 const ItalicText = styled(Typography)`
   font-style: italic;
   font-size: inherit;
+  color: inherit;
 `;
 
 const UnderlineText = styled(Typography).attrs({ textDecoration: 'underline' })`
   font-size: inherit;
+  color: inherit;
 `;
 
 const StrikeThroughText = styled(Typography).attrs({ textDecoration: 'line-through' })`
   font-size: inherit;
+  color: inherit;
 `;
 
 const InlineCode = styled.code`
@@ -29,6 +33,7 @@ const InlineCode = styled.code`
   padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
   font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
     monospace;
+  color: inherit;
 `;
 
 /**
@@ -48,12 +53,22 @@ export function useModifiersStore() {
   const editor = useSlate();
   const modifiers = Editor.marks(editor);
 
+  /**
+   * The default handler for checking if a modifier is active
+   *
+   * @param {string} name - The name of the modifier to check
+   */
   const baseCheckIsActive = (name) => {
     if (!modifiers) return false;
 
     return Boolean(modifiers[name]);
   };
 
+  /**
+   * The default handler for toggling a modifier
+   *
+   * @param {string} name - The name of the modifier to toggle
+   */
   const baseHandleToggle = (name) => {
     if (modifiers[name]) {
       Editor.removeMark(editor, name);