@strapi/admin 4.14.2 → 4.14.4

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

@@ -8,20 +8,28 @@ 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]};
@@ -31,10 +39,72 @@ const Wrapper = styled(Box)`
   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 +113,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 +131,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 +153,23 @@ 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 grow={1}>
+                <BlocksInput disabled={disabled} placeholder={formattedPlaceholder} />
               </Wrapper>
             </InputWrapper>
           </Slate>
+          <Hint hint={hint} name={name} error={error} />
         </Flex>
         {error && (
           <Box paddingTop={1}>
@@ -103,10 +184,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 +199,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/hooks/useRelation/useRelation.js

@@ -166,6 +166,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
     setSearchParams({
       ...options,
       _q: term,
+      _filter: '$startsWithi',
     });
   };
 

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/ListSettingsView/constants.js

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

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

@@ -185,6 +185,7 @@ function ListView({
       };
 
       filter.fieldSchema.mainField = {
+        ...mainField,
         name: 'id',
       };
     }
@@ -720,7 +721,7 @@ function ListView({
                 {/* Empty content */}
                 <Table.EmptyBody
                   contentType={headerLayoutTitle}
-                  aciton={getCreateAction({ variant: 'secondary' })}
+                  action={getCreateAction({ variant: 'secondary' })}
                 />
                 {/* Content */}
                 <Body.Root

package/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js

@@ -5,7 +5,7 @@ const checkIfAttributeIsDisplayable = (attribute) => {
     return !(attribute?.relationType ?? '').toLowerCase().includes('morph');
   }
 
-  return !['json', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
+  return !['json', 'dynamiczone', 'richtext', 'password', 'blocks'].includes(type) && !!type;
 };
 
 export default checkIfAttributeIsDisplayable;

package/admin/src/content-manager/utils/schema.js

@@ -228,8 +228,8 @@ const createYupSchemaAttribute = (type, validations, options) => {
         return true;
       }
 
-      // The backend validates the actual schema
-      if (!Array.isArray(value)) {
+      // The backend validates the actual schema, check if a value different than null is not an array
+      if (value && !Array.isArray(value)) {
         return false;
       }
 

package/admin/src/contexts/configuration.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+interface ConfigurationsContextValue {
+  logos: {
+    auth: { custom?: string; default: string };
+  };
+}
+
+const ConfigurationsContext = createContext<ConfigurationsContextValue>({
+  logos: {
+    auth: { default: '' },
+  },
+});
+
+export { ConfigurationsContext };

package/admin/src/contexts/index.js

@@ -1,4 +1,3 @@
 export { default as AdminContext } from './Admin';
-export { default as ConfigurationsContext } from './Configurations';
+export { ConfigurationsContext } from './configuration';
 export { default as PermissionsDataManagerContext } from './PermisssionsDataManagerContext';
-export { default as ThemeToggleContext } from './ThemeToggle';

package/admin/src/contexts/themeToggle.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { DefaultTheme } from 'styled-components';
+
+export type ThemeName = 'light' | 'dark';
+
+interface ThemeToggleContextContextValue {
+  currentTheme?: ThemeName;
+  onChangeTheme?: (nextTheme: ThemeName) => void;
+  themes?: {
+    dark: DefaultTheme;
+    light: DefaultTheme;
+  };
+}
+
+export const ThemeToggleContext = createContext<ThemeToggleContextContextValue>({});

package/admin/src/hooks/{useConfigurations/__mocks__/index.js → __mocks__/useConfigurations.ts}

@@ -1,7 +1,9 @@
-export default function () {
+const useConfigurations = () => {
   return {
     logos: {
       auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
     },
   };
-}
+};
+
+export { useConfigurations };

package/admin/src/hooks/index.js

@@ -1,10 +1,6 @@
-export { default as useConfigurations } from './useConfigurations';
+export { useConfigurations } from './useConfigurations';
 export { useContentTypes } from './useContentTypes';
-export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
 export { default as useMenu } from './useMenu';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
-export { default as useRegenerate } from './useRegenerate';
-export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useSettingsForm } from './useSettingsForm';
 export { default as useSettingsMenu } from './useSettingsMenu';
-export { default as useThemeToggle } from './useThemeToggle';

package/admin/src/hooks/useConfigurations.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ConfigurationsContext } from '../contexts/configuration';
+
+export const useConfigurations = () => useContext(ConfigurationsContext);

package/admin/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export function useDebounce<TValue>(value: TValue, delay: number): TValue {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+  React.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/admin/src/hooks/useLicenseLimitNotification.ts

@@ -0,0 +1,3 @@
+export const useLicenseLimitNotification = () => {
+  return null;
+};

package/admin/src/hooks/useThemeToggle.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+
+import { ThemeToggleContext } from '../contexts/themeToggle';
+
+export const useThemeToggle = () => {
+  const context = useContext(ThemeToggleContext);
+
+  return context;
+};

package/admin/src/pages/App/index.js

@@ -21,7 +21,7 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import PrivateRoute from '../../components/PrivateRoute';
+import { PrivateRoute } from '../../components/PrivateRoute';
 import { ADMIN_PERMISSIONS_CE } from '../../constants';
 import { useConfigurations } from '../../hooks';
 import { useEnterprise } from '../../hooks/useEnterprise';

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -6,7 +6,7 @@ import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -4,7 +4,7 @@ import { Box, Flex, Main, Typography } from '@strapi/design-system';
 import { Link, useQuery } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -30,7 +30,7 @@ import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { useNpsSurveySettings } from '../../../../components/NpsSurvey/hooks/useNpsSurveySettings';
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, { LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
 import FieldActionWrapper from '../FieldActionWrapper';
 

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import Logo from '../../../../components/UnauthenticatedLogo';
+import { Logo } from '../../../../components/UnauthenticatedLogo';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,