@strapi/admin 4.15.0 → 4.15.1

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

@@ -1,119 +0,0 @@
-import * as React from 'react';
-
-import { Typography } from '@strapi/design-system';
-import { Bold, Italic, Underline, StrikeThrough, Code } from '@strapi/icons';
-import { Editor } from 'slate';
-import { useSlate } from 'slate-react';
-import styled, { css } from 'styled-components';
-
-const stylesToInherit = css`
-  font-size: inherit;
-  color: inherit;
-  line-height: inherit;
-`;
-
-const BoldText = styled(Typography).attrs({ fontWeight: 'bold' })`
-  ${stylesToInherit}
-`;
-
-const ItalicText = styled(Typography)`
-  font-style: italic;
-  ${stylesToInherit}
-`;
-
-const UnderlineText = styled(Typography).attrs({ textDecoration: 'underline' })`
-  ${stylesToInherit}
-`;
-
-const StrikeThroughText = styled(Typography).attrs({ textDecoration: 'line-through' })`
-  ${stylesToInherit}
-`;
-
-const InlineCode = styled.code`
-  background-color: ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
-  font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas,
-    monospace;
-  color: inherit;
-`;
-
-/**
- * Manages a store of all the available modifiers.
- *
- * @returns {{
- *   [key: string]: {
- *     icon: IconComponent,
- *     label: {id: string, defaultMessage: string},
- *     checkIsActive: () => boolean,
- *     handleToggle: () => void,
- *     renderLeaf: (children: JSX.Element) => JSX.Element,
- *   }
- * }} An object containing rendering functions and metadata for different text modifiers, indexed by name.
- */
-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);
-    } else {
-      Editor.addMark(editor, name, true);
-    }
-  };
-
-  return {
-    bold: {
-      icon: Bold,
-      label: { id: 'components.Blocks.modifiers.bold', defaultMessage: 'Bold' },
-      checkIsActive: () => baseCheckIsActive('bold'),
-      handleToggle: () => baseHandleToggle('bold'),
-      renderLeaf: (children) => <BoldText>{children}</BoldText>,
-    },
-    italic: {
-      icon: Italic,
-      label: { id: 'components.Blocks.modifiers.italic', defaultMessage: 'Italic' },
-      checkIsActive: () => baseCheckIsActive('italic'),
-      handleToggle: () => baseHandleToggle('italic'),
-      renderLeaf: (children) => <ItalicText>{children}</ItalicText>,
-    },
-    underline: {
-      icon: Underline,
-      label: { id: 'components.Blocks.modifiers.underline', defaultMessage: 'Underline' },
-      checkIsActive: () => baseCheckIsActive('underline'),
-      handleToggle: () => baseHandleToggle('underline'),
-      renderLeaf: (children) => <UnderlineText>{children}</UnderlineText>,
-    },
-    strikethrough: {
-      icon: StrikeThrough,
-      label: { id: 'components.Blocks.modifiers.strikethrough', defaultMessage: 'Strikethrough' },
-      checkIsActive: () => baseCheckIsActive('strikethrough'),
-      handleToggle: () => baseHandleToggle('strikethrough'),
-      renderLeaf: (children) => <StrikeThroughText>{children}</StrikeThroughText>,
-    },
-    code: {
-      icon: Code,
-      label: { id: 'components.Blocks.modifiers.code', defaultMessage: 'Code' },
-      checkIsActive: () => baseCheckIsActive('code'),
-      handleToggle: () => baseHandleToggle('code'),
-      renderLeaf: (children) => <InlineCode>{children}</InlineCode>,
-    },
-  };
-}

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

@@ -1,203 +0,0 @@
-import * as React from 'react';
-
-import { Box, Flex, Typography, InputWrapper, Divider } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { createEditor } from 'slate';
-import { withHistory } from 'slate-history';
-import { Slate, withReact, ReactEditor } from 'slate-react';
-import styled from 'styled-components';
-
-import Hint from '../Hint';
-
-import BlocksInput from './BlocksInput';
-import { withLinks, withStrapiSchema } from './plugins';
-import { BlocksToolbar } from './Toolbar';
-
-const TypographyAsterisk = styled(Typography)`
-  line-height: 0;
-`;
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const EditorDivider = styled(Divider)`
-  background: ${({ theme }) => theme.colors.neutral200};
-`;
-
-/**
- * Images are void elements. They handle the rendering of their children instead of Slate.
- * See the Slate documentation for more information:
- * - https://docs.slatejs.org/api/nodes/element#void-vs-not-void
- * - https://docs.slatejs.org/api/nodes/element#rendering-void-elements
- *
- * @param {import('slate').Editor} editor
- */
-const withImages = (editor) => {
-  const { isVoid } = editor;
-
-  editor.isVoid = (element) => {
-    return element.type === 'image' ? true : isVoid(element);
-  };
-
-  return editor;
-};
-
-/**
- * Forces an update of the Slate editor when the value prop changes from outside of Slate.
- * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612
- * Why not use JSON.stringify(value) as the key?
- * Because it would force a rerender of the entire editor every time the user types a character.
- * Why not use the entity id as the key, since it's unique for each locale?
- * Because it would not solve the problem when using the "fill in from other locale" feature
- *
- * @param {import('slate').Descendant[]} value
- * @returns {{
- *   key: number,
- *   incrementSlateUpdatesCount: () => void
- * }}
- */
-function useResetKey(value) {
-  // Keep track how how many times Slate detected a change from a user interaction in the editor
-  const slateUpdatesCount = React.useRef(0);
-  // Keep track of how many times the value prop was updated, whether from within editor or from outside
-  const valueUpdatesCount = React.useRef(0);
-  // Use a key to force a rerender of the Slate editor when needed
-  const [key, setKey] = React.useState(0);
-
-  React.useEffect(() => {
-    valueUpdatesCount.current += 1;
-
-    // If the 2 refs are not equal, it means the value was updated from outside
-    if (valueUpdatesCount.current !== slateUpdatesCount.current) {
-      // So we change the key to force a rerender of the Slate editor,
-      // which will pick up the new value through its initialValue prop
-      setKey((previousKey) => previousKey + 1);
-
-      // Then bring the 2 refs back in sync
-      slateUpdatesCount.current = valueUpdatesCount.current;
-    }
-  }, [value]);
-
-  return { key, incrementSlateUpdatesCount: () => (slateUpdatesCount.current += 1) };
-}
-
-const BlocksEditor = React.forwardRef(
-  (
-    { intlLabel, labelAction, name, disabled, required, error, value, onChange, placeholder, hint },
-    ref
-  ) => {
-    const { formatMessage } = useIntl();
-    const [editor] = React.useState(() =>
-      withReact(withStrapiSchema(withLinks(withImages(withHistory(createEditor())))))
-    );
-
-    const label = intlLabel.id
-      ? formatMessage(
-          { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
-          { ...intlLabel.values }
-        )
-      : name;
-
-    const formattedPlaceholder = placeholder
-      ? formatMessage({ id: placeholder.id, defaultMessage: placeholder.defaultMessage })
-      : null;
-
-    /** Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082
-     *  so with "useImperativeHandle" we can use ReactEditor methods to expose to the parent above
-     *  also not passing forwarded ref here, gives console warning.
-     */
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        focus() {
-          ReactEditor.focus(editor);
-        },
-      }),
-      [editor]
-    );
-
-    const { key, incrementSlateUpdatesCount } = useResetKey(value);
-
-    const handleSlateChange = (state) => {
-      const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');
-
-      if (isAstChange) {
-        incrementSlateUpdatesCount();
-
-        onChange({
-          target: { name, value: state, type: 'blocks' },
-        });
-      }
-    };
-
-    return (
-      <>
-        <Flex direction="column" alignItems="stretch" gap={1}>
-          <Flex gap={1}>
-            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-              {label}
-              {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
-            </Typography>
-            {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-          </Flex>
-          <Slate
-            editor={editor}
-            initialValue={value || [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]}
-            onChange={handleSlateChange}
-            key={key}
-          >
-            <InputWrapper direction="column" alignItems="flex-start" height="512px">
-              <BlocksToolbar disabled={disabled} />
-              <EditorDivider width="100%" />
-              <BlocksInput disabled={disabled} placeholder={formattedPlaceholder} />
-            </InputWrapper>
-          </Slate>
-          <Hint hint={hint} name={name} error={error} />
-        </Flex>
-        {error && (
-          <Box paddingTop={1}>
-            <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-              {error}
-            </Typography>
-          </Box>
-        )}
-      </>
-    );
-  }
-);
-
-BlocksEditor.defaultProps = {
-  labelAction: null,
-  disabled: false,
-  required: false,
-  error: '',
-  value: null,
-  placeholder: null,
-  hint: null,
-};
-
-BlocksEditor.propTypes = {
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }).isRequired,
-  labelAction: PropTypes.element,
-  name: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.array,
-  placeholder: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }),
-  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-};
-
-export default BlocksEditor;

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

@@ -1,4 +0,0 @@
-import { withLinks } from './withLinks';
-import { withStrapiSchema } from './withStrapiSchema';
-
-export { withLinks, withStrapiSchema };

package/admin/src/content-manager/components/BlocksEditor/plugins/withLinks.js

@@ -1,61 +0,0 @@
-import { Path, Transforms, Range, Point, Editor } from 'slate';
-
-const withLinks = (editor) => {
-  const { isInline, apply, insertText } = editor;
-
-  // Links are inline elements, so we need to override the isInline method for slate
-  editor.isInline = (element) => {
-    return element.type === 'link' ? true : isInline(element);
-  };
-
-  // We keep a track of the last inserted link path
-  // So we can show the popover on the link component if that link is the last one inserted
-  editor.lastInsertedLinkPath = null;
-
-  // We intercept the apply method, so everytime we insert a new link, we save its path
-  editor.apply = (operation) => {
-    if (operation.type === 'insert_node') {
-      if (operation.node.type === 'link') {
-        editor.lastInsertedLinkPath = operation.path;
-      }
-    } else if (operation.type === 'move_node') {
-      // We need to update the last inserted link path when link is moved
-      // If link is the first word in the paragraph we dont need to update the path
-      if (Path.hasPrevious(operation.path)) {
-        editor.lastInsertedLinkPath = Path.transform(editor.lastInsertedLinkPath, operation);
-      }
-    }
-
-    apply(operation);
-  };
-
-  editor.insertText = (text) => {
-    // When selection is at the end of a link and user types a space, we want to break the link
-    if (Range.isCollapsed(editor.selection) && text === ' ') {
-      const linksInSelection = Array.from(
-        Editor.nodes(editor, { at: editor.selection, match: (node) => node.type === 'link' })
-      );
-
-      const selectionIsInLink = editor.selection && linksInSelection.length > 0;
-      const selectionIsAtEndOfLink =
-        selectionIsInLink &&
-        Point.equals(editor.selection.anchor, Editor.end(editor, linksInSelection[0][1]));
-
-      if (selectionIsAtEndOfLink) {
-        Transforms.insertNodes(
-          editor,
-          { text: ' ', type: 'text' },
-          { at: Path.next(linksInSelection[0][1]), select: true }
-        );
-
-        return;
-      }
-    }
-
-    insertText(text);
-  };
-
-  return editor;
-};
-
-export { withLinks };

package/admin/src/content-manager/components/BlocksEditor/plugins/withStrapiSchema.js

@@ -1,33 +0,0 @@
-import { Element, Transforms } from 'slate';
-
-/**
- * This plugin is used to normalize the Slate document to match the Strapi schema.
- *
- * @param {import('slate').Editor} editor
- */
-const withStrapiSchema = (editor) => {
-  const { normalizeNode } = editor;
-
-  /**
-   * On the strapi schema, we want text nodes to have type: text
-   * By default, Slate add text nodes without type: text
-   * So we add this normalization for the cases when Slate add text nodes automatically
-   */
-  editor.normalizeNode = (entry) => {
-    const [node, path] = entry;
-
-    if (!Element.isElement(node)) {
-      if (node.type !== 'text') {
-        Transforms.setNodes(editor, { type: 'text' }, { at: path });
-
-        return;
-      }
-    }
-
-    normalizeNode(entry);
-  };
-
-  return editor;
-};
-
-export { withStrapiSchema };

package/admin/src/content-manager/components/BlocksEditor/utils/links.js

@@ -1,90 +0,0 @@
-import { Transforms, Editor, Element as SlateElement, Node, Range } from 'slate';
-
-/**
- *
- * @param {string} url
- * @param {string} protocol
- */
-const addProtocol = (url, protocol = 'https://') => {
-  const allowedProtocols = ['http://', 'https://', 'mailto:', 'tel:'];
-
-  if (allowedProtocols.some((allowedProtocol) => url.startsWith(allowedProtocol))) {
-    return url;
-  }
-
-  return `${protocol}${url}`;
-};
-
-/**
- *
- * @param {import('slate').Editor} editor
- */
-const removeLink = (editor) => {
-  Transforms.unwrapNodes(editor, {
-    match: (node) => !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === 'link',
-  });
-};
-
-/**
- *
- * @param {import('slate').Editor} editor
- * @param {object} link
- * @param {string} link.url
- */
-const insertLink = (editor, { url }) => {
-  if (editor.selection) {
-    // We want to remove all link on the selection
-    const linkNodes = Array.from(
-      Editor.nodes(editor, {
-        at: editor.selection,
-        match: (node) => node.type === 'link',
-      })
-    );
-
-    linkNodes.forEach(([, path]) => {
-      Transforms.unwrapNodes(editor, { at: path });
-    });
-
-    if (Range.isCollapsed(editor.selection)) {
-      const link = { type: 'link', url: url ? addProtocol(url) : '', children: [{ text: url }] };
-
-      Transforms.insertNodes(editor, link);
-    } else {
-      Transforms.wrapNodes(
-        editor,
-        { type: 'link', url: url ? addProtocol(url) : '' },
-        { split: true }
-      );
-    }
-  }
-};
-
-/**
- *
- * @param {import('slate').Editor} editor
- * @param {object} link
- * @param {string} link.url
- * @param {string} link.text
- */
-const editLink = (editor, { url, text }) => {
-  if (editor.selection) {
-    const [linkNode, linkPath] = Editor.above(editor, { match: (node) => node.type === 'link' });
-
-    if (linkNode) {
-      Transforms.setNodes(editor, { url: addProtocol(url) }, { at: linkPath });
-
-      // If link text is different, we remove the old text and insert the new one
-      if (text !== '' && text !== Editor.string(editor, linkPath)) {
-        const linkNodeChildrens = Array.from(Node.children(editor, linkPath, { reverse: true }));
-
-        linkNodeChildrens.forEach(([, childPath]) => {
-          Transforms.removeNodes(editor, { at: childPath });
-        });
-
-        Transforms.insertNodes(editor, [{ text }], { at: linkPath.concat(0) });
-      }
-    }
-  }
-};
-
-export { insertLink, editLink, removeLink };