@strapi/admin 4.15.0-alpha.0 → 4.15.0

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

@@ -4,23 +4,29 @@ 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 from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const BoldText = styled(Typography).attrs({ fontWeight: 'bold' })`
+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;
-  font-size: inherit;
+  ${stylesToInherit}
 `;
 
 const UnderlineText = styled(Typography).attrs({ textDecoration: 'underline' })`
-  font-size: inherit;
+  ${stylesToInherit}
 `;
 
 const StrikeThroughText = styled(Typography).attrs({ textDecoration: 'line-through' })`
-  font-size: inherit;
+  ${stylesToInherit}
 `;
 
 const InlineCode = styled.code`
@@ -29,6 +35,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,14 +55,24 @@ 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]) {
+    if (modifiers?.[name]) {
       Editor.removeMark(editor, name);
     } else {
       Editor.addMark(editor, name, true);

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

@@ -8,33 +8,92 @@ 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};
 `;
 
-const Wrapper = styled(Box)`
-  width: 100%;
-  max-height: 512px;
-  overflow: auto;
-  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[4]}`};
-  font-size: ${({ theme }) => theme.fontSizes[2]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  color: ${({ theme }) => theme.colors.neutral800};
-  line-height: ${({ theme }) => theme.lineHeights[6]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-`;
+/**
+ * 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, name, readOnly, required, error, value, onChange }, ref) => {
+  (
+    { intlLabel, labelAction, name, disabled, required, error, value, onChange, placeholder, hint },
+    ref
+  ) => {
     const { formatMessage } = useIntl();
-    const [editor] = React.useState(() => withReact(withHistory(createEditor())));
+    const [editor] = React.useState(() =>
+      withReact(withStrapiSchema(withLinks(withImages(withHistory(createEditor())))))
+    );
 
     const label = intlLabel.id
       ? formatMessage(
@@ -43,6 +102,10 @@ const BlocksEditor = React.forwardRef(
         )
       : 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.
@@ -57,10 +120,14 @@ const BlocksEditor = React.forwardRef(
       [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' },
         });
@@ -75,20 +142,21 @@ const BlocksEditor = React.forwardRef(
               {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">
-              <BlocksToolbar />
+            <InputWrapper direction="column" alignItems="flex-start" height="512px">
+              <BlocksToolbar disabled={disabled} />
               <EditorDivider width="100%" />
-              <Wrapper>
-                <BlocksInput readOnly={readOnly} />
-              </Wrapper>
+              <BlocksInput disabled={disabled} placeholder={formattedPlaceholder} />
             </InputWrapper>
           </Slate>
+          <Hint hint={hint} name={name} error={error} />
         </Flex>
         {error && (
           <Box paddingTop={1}>
@@ -103,10 +171,13 @@ const BlocksEditor = React.forwardRef(
 );
 
 BlocksEditor.defaultProps = {
+  labelAction: null,
+  disabled: false,
   required: false,
-  readOnly: false,
   error: '',
   value: null,
+  placeholder: null,
+  hint: null,
 };
 
 BlocksEditor.propTypes = {
@@ -115,12 +186,18 @@ BlocksEditor.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }).isRequired,
+  labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
   required: PropTypes.bool,
-  readOnly: 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

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

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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,90 @@
+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 };

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

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from 'react-query';
 
-import useDebounce from '../../../hooks/useDebounce';
+import { useDebounce } from '../../../hooks/useDebounce';
 
 import { FieldActionWrapper, LoadingWrapper, TextValidation } from './endActionStyle';
 import UID_REGEX from './regex';

package/admin/src/content-manager/hooks/useAllowedAttributes.js

@@ -2,7 +2,15 @@ import { useRBACProvider, findMatchingPermissions } from '@strapi/helper-plugin'
 
 import { CREATOR_FIELDS } from '../constants/attributes';
 
-const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
+const NOT_ALLOWED_FILTERS = [
+  'json',
+  'component',
+  'media',
+  'richtext',
+  'dynamiczone',
+  'password',
+  'blocks',
+];
 const TIMESTAMPS = ['createdAt', 'updatedAt'];
 
 export const useAllowedAttributes = (contentType, slug) => {

package/admin/src/content-manager/pages/App/selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { initialState } from './reducer';
 

package/admin/src/content-manager/pages/App/useContentManagerInitData.js

@@ -11,13 +11,15 @@ import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } from '../../../exposedHooks';
+import { HOOKS } from '../../../constants';
 import { getTrad } from '../../utils';
 
 import { getInitData, resetInitData, setInitData } from './actions';
 import { selectAppDomain } from './selectors';
 import getContentTypeLinks from './utils/getContentTypeLinks';
 
+const { MUTATE_COLLECTION_TYPES_LINKS, MUTATE_SINGLE_TYPES_LINKS } = HOOKS;
+
 const useContentManagerInitData = () => {
   const dispatch = useDispatch();
   const toggleNotification = useNotification();

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -73,6 +73,7 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
         'password',
         'richtext',
         'timestamp',
+        'blocks',
       ].includes(type) && !!type
     );
   });

package/admin/src/content-manager/pages/EditSettingsView/utils/createPossibleMainFieldsForModelsAndComponents.js

@@ -12,6 +12,7 @@ const createPossibleMainFieldsForModelsAndComponents = (array) => {
         'relation',
         'text',
         'richtext',
+        'blocks',
       ].includes(attributes?.[attr]?.type ?? '');
     });
 

package/admin/src/content-manager/pages/EditView/selectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
 
 import { createAttributesLayout, getCustomFieldUidsFromLayout } from './utils';
 

package/admin/src/content-manager/pages/EditViewLayoutManager/index.js

@@ -4,13 +4,15 @@ import { LoadingIndicatorPage, useQueryParams, useStrapiApp } from '@strapi/help
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { MUTATE_EDIT_VIEW_LAYOUT } from '../../../exposedHooks';
+import { HOOKS } from '../../../constants';
 import { useSyncRbac } from '../../hooks';
 
 import { resetProps, setLayout } from './actions';
 import Permissions from './Permissions';
 import selectLayout from './selectors';
 
+const { MUTATE_EDIT_VIEW_LAYOUT } = HOOKS;
+
 const EditViewLayoutManager = ({ layout, ...rest }) => {
   const currentLayout = useSelector(selectLayout);
   const dispatch = useDispatch();

package/admin/src/content-manager/pages/ListSettingsView/constants.js

@@ -5,4 +5,5 @@ export const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
   'relation',
   'component',
   'json',
+  'blocks',
 ];