@strapi/admin 4.14.4 → 4.14.6

package/admin/src/components/PluginsInitializer.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+
+import {
+  LoadingIndicatorPage,
+  useStrapiApp,
+  type StrapiAppContextValue,
+} from '@strapi/helper-plugin';
+import produce from 'immer';
+import set from 'lodash/set';
+
+// @ts-expect-error pages/Admin has not been converted yet.
+import Admin from '../pages/Admin';
+
+/**
+ * TODO: this isn't great, and we really should focus on fixing this.
+ */
+const PluginsInitializer = () => {
+  const { plugins: appPlugins } = useStrapiApp();
+  const [{ plugins }, dispatch] = React.useReducer<React.Reducer<State, Action>, State>(
+    reducer,
+    initialState,
+    () => init(appPlugins)
+  );
+  const setPlugin = React.useRef((pluginId: string) => {
+    dispatch({ type: 'SET_PLUGIN_READY', pluginId });
+  });
+
+  const hasApluginNotReady = Object.keys(plugins).some(
+    (plugin) => plugins[plugin].isReady === false
+  );
+
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
+  if (hasApluginNotReady) {
+    const initializers = Object.keys(plugins).reduce((acc, current) => {
+      const InitializerComponent = plugins[current].initializer;
+
+      if (InitializerComponent) {
+        const key = plugins[current].pluginId;
+
+        acc.push(<InitializerComponent key={key} setPlugin={setPlugin.current} />);
+      }
+
+      return acc;
+    }, [] as React.ReactNode[]);
+
+    return (
+      <>
+        {initializers}
+        <LoadingIndicatorPage />
+      </>
+    );
+  }
+
+  return <Admin />;
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Reducer
+ * -----------------------------------------------------------------------------------------------*/
+
+interface State {
+  plugins: StrapiAppContextValue['plugins'];
+}
+
+const initialState: State = {
+  plugins: {},
+};
+
+type SetPluginReadyAction = {
+  type: 'SET_PLUGIN_READY';
+  pluginId: string;
+};
+
+type Action = SetPluginReadyAction;
+
+const reducer: React.Reducer<State, Action> = (state = initialState, action: Action): State =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'SET_PLUGIN_READY': {
+        set(draftState, ['plugins', action.pluginId, 'isReady'], true);
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+/* -------------------------------------------------------------------------------------------------
+ * Init state
+ * -----------------------------------------------------------------------------------------------*/
+
+const init = (plugins: State['plugins']): State => {
+  return {
+    plugins: Object.keys(plugins).reduce<State['plugins']>((acc, current) => {
+      acc[current] = { ...plugins[current] };
+
+      return acc;
+    }, {}),
+  };
+};
+
+export { PluginsInitializer };

package/admin/src/components/Providers/index.js

@@ -12,10 +12,10 @@ import PropTypes from 'prop-types';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 
-import { AdminContext } from '../../contexts';
-import ConfigurationsProvider from '../ConfigurationsProvider';
+import { AdminContext } from '../../contexts/admin';
+import { ConfigurationProvider } from '../ConfigurationProvider';
 import GuidedTour from '../GuidedTour';
-import LanguageProvider from '../LanguageProvider';
+import { LanguageProvider } from '../LanguageProvider';
 import { Theme } from '../Theme';
 import { ThemeToggleProvider } from '../ThemeToggleProvider';
 
@@ -56,7 +56,7 @@ const Providers = ({
           <QueryClientProvider client={queryClient}>
             <Provider store={store}>
               <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-                <ConfigurationsProvider
+                <ConfigurationProvider
                   authLogo={authLogo}
                   menuLogo={menuLogo}
                   showReleaseNotification={showReleaseNotification}
@@ -83,7 +83,7 @@ const Providers = ({
                       </CustomFieldsProvider>
                     </LibraryProvider>
                   </StrapiAppProvider>
-                </ConfigurationsProvider>
+                </ConfigurationProvider>
               </AdminContext.Provider>
             </Provider>
           </QueryClientProvider>
@@ -95,7 +95,7 @@ const Providers = ({
 
 Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
-  children: PropTypes.element.isRequired,
+  children: PropTypes.node.isRequired,
   components: PropTypes.object.isRequired,
   customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,

package/admin/src/components/UnauthenticatedLogo.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { useConfigurations } from '../hooks/useConfigurations';
+import { useConfiguration } from '../hooks/useConfiguration';
 
 const Img = styled.img`
   height: ${72 / 16}rem;
@@ -9,7 +9,7 @@ const Img = styled.img`
 const Logo = () => {
   const {
     logos: { auth },
-  } = useConfigurations();
+  } = useConfiguration();
 
   return <Img src={auth?.custom ?? auth.default} aria-hidden alt="" />;
 };

package/admin/src/components/{LocalesProvider/__mocks__/useLocalesProvider.js → __mocks__/LanguageProvider.js}

@@ -1,4 +1,4 @@
-export default function useLocalesProvider() {
+export function useLocalesProvider() {
   return {
     changeLocale() {},
     localeNames: { en: 'English' },

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { Box } from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { Editable, useSlate } from 'slate-react';
 import { useTheme } from 'styled-components';
@@ -41,6 +42,7 @@ const baseRenderElement = (props, blocks) => {
 const BlocksInput = ({ disabled, placeholder }) => {
   const theme = useTheme();
   const editor = useSlate();
+  const blocksRef = React.useRef();
 
   // Create renderLeaf function based on the modifiers store
   const modifiers = useModifiersStore();
@@ -82,15 +84,53 @@ const BlocksInput = ({ disabled, placeholder }) => {
     }
   };
 
+  /**
+   *  scrollSelectionIntoView : Slate's default method to scroll a DOM selection into the view,
+   *  thats shifting layout for us when there is a overflowY:scroll on the viewport.
+   *  We are overriding it to check if the selection is not fully within the visible area of the editor,
+   *  we use scrollBy one line to the bottom
+   */
+  const handleScrollSelectionIntoView = (_, domRange) => {
+    const domRect = domRange.getBoundingClientRect();
+    const blocksInput = blocksRef.current;
+    const editorRect = blocksInput.getBoundingClientRect();
+
+    // Check if the selection is not fully within the visible area of the editor
+    if (domRect.top < editorRect.top || domRect.bottom > editorRect.bottom) {
+      // Scroll by one line to the bottom
+      blocksInput.scrollBy({
+        top: 28, // 20px is the line-height + 8px line gap
+        behavior: 'smooth',
+      });
+    }
+  };
+
   return (
-    <Editable
-      readOnly={disabled}
-      placeholder={placeholder}
-      style={getEditorStyle(theme)}
-      renderElement={renderElement}
-      renderLeaf={renderLeaf}
-      onKeyDown={handleKeyDown}
-    />
+    <Box
+      ref={blocksRef}
+      grow={1}
+      width="100%"
+      overflow="auto"
+      fontSize={2}
+      background="neutral0"
+      color="neutral800"
+      lineHeight={6}
+      hasRadius
+      paddingLeft={4}
+      paddingRight={4}
+      marginTop={3}
+      marginBottom={3}
+    >
+      <Editable
+        readOnly={disabled}
+        placeholder={placeholder}
+        style={getEditorStyle(theme)}
+        renderElement={renderElement}
+        renderLeaf={renderLeaf}
+        onKeyDown={handleKeyDown}
+        scrollSelectionIntoView={handleScrollSelectionIntoView}
+      />
+    </Box>
   );
 };
 

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

@@ -97,49 +97,6 @@ ToolbarButton.propTypes = {
   handleClick: PropTypes.func.isRequired,
 };
 
-const ModifierButton = ({ icon, name, label, disabled }) => {
-  const editor = useSlate();
-
-  const isModifierActive = () => {
-    const modifiers = Editor.marks(editor);
-
-    if (!modifiers) return false;
-
-    return Boolean(modifiers[name]);
-  };
-
-  const isActive = isModifierActive();
-
-  const toggleModifier = () => {
-    if (isActive) {
-      Editor.removeMark(editor, name);
-    } else {
-      Editor.addMark(editor, name, true);
-    }
-  };
-
-  return (
-    <ToolbarButton
-      icon={icon}
-      name={name}
-      label={label}
-      isActive={isActive}
-      disabled={disabled}
-      handleClick={toggleModifier}
-    />
-  );
-};
-
-ModifierButton.propTypes = {
-  icon: PropTypes.elementType.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
-  disabled: PropTypes.bool.isRequired,
-};
-
 const toggleBlock = (editor, value) => {
   const { type, level, format } = value;
 
@@ -151,11 +108,44 @@ const toggleBlock = (editor, value) => {
   };
 
   if (editor.selection) {
+    // If the selection is inside a list, split the list so that the modified block is outside of it
+    Transforms.unwrapNodes(editor, {
+      match: (node) => node.type === 'list',
+      split: true,
+    });
+
     // 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 there is no selection, we want to insert a new block just after
+     * the last node inserted and prevent the code to add an empty paragraph
+     * between them.
+     */
+    const [, lastNodePath] = Editor.last(editor, []);
+    const [parentNode] = Editor.parent(editor, lastNodePath, {
+      // Makes sure we get a block node, not an inline node
+      match: (node) => node.type !== 'text',
+    });
+    Transforms.removeNodes(editor, {
+      void: true,
+      hanging: true,
+      at: {
+        anchor: { path: lastNodePath, offset: 0 },
+        focus: { path: lastNodePath, offset: 0 },
+      },
+    });
+    Transforms.insertNodes(
+      editor,
+      {
+        ...blockProperties,
+        children: parentNode.children,
+      },
+      {
+        at: [lastNodePath[0]],
+        select: true,
+      }
+    );
   }
 
   // When the select is clicked it blurs the editor, restore the focus to the editor
@@ -199,6 +189,8 @@ const ImageDialog = ({ handleClose }) => {
   const MediaLibraryDialog = components['media-library'];
 
   const insertImages = (images) => {
+    // Image node created using select or existing selection node needs to be deleted before adding new image nodes
+    Transforms.removeNodes(editor);
     images.forEach((img) => {
       const image = { type: 'image', image: img, children: [{ type: 'text', text: '' }] };
       Transforms.insertNodes(editor, image);
@@ -272,7 +264,7 @@ const insertEmptyBlockAtLast = (editor) => {
   );
 };
 
-export const BlocksDropdown = ({ disabled }) => {
+const BlocksDropdown = ({ disabled }) => {
   const editor = useSlate();
   const { formatMessage } = useIntl();
   const [isMediaLibraryVisible, setIsMediaLibraryVisible] = React.useState(false);
@@ -290,10 +282,7 @@ export const BlocksDropdown = ({ disabled }) => {
    * @param {string} optionKey - key of the heading selected
    */
   const selectOption = (optionKey) => {
-    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)) {
+    if (['list-ordered', 'list-unordered'].includes(optionKey)) {
       // retrieve the list format
       const listFormat = blocks[optionKey].value.format;
 
@@ -302,7 +291,7 @@ export const BlocksDropdown = ({ disabled }) => {
 
       // toggle the list
       toggleList(editor, isActive, listFormat);
-    } else {
+    } else if (optionKey !== 'image') {
       toggleBlock(editor, blocks[optionKey].value);
     }
 
@@ -432,21 +421,59 @@ const isListActive = (editor, matchNode) => {
 };
 
 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,
-  });
+  // If we have selected a portion of content in the editor,
+  // we want to convert it to a list or if it is already a list,
+  // convert it back to a paragraph
+  if (editor.selection) {
+    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',
-  });
+    Transforms.setNodes(editor, {
+      type: isActive ? 'paragraph' : 'list-item',
+    });
+
+    if (!isActive) {
+      const block = { type: 'list', format, children: [] };
+      Transforms.wrapNodes(editor, block);
+    }
+  } else {
+    // There is no selection, convert the last inserted node to a list
+    // If it is already a list, convert it back to a paragraph
+    const [, lastNodePath] = Editor.last(editor, []);
+
+    const [parentNode] = Editor.parent(editor, lastNodePath, {
+      // Makes sure we get a block node, not an inline node
+      match: (node) => node.type !== 'text',
+    });
+
+    Transforms.removeNodes(editor, {
+      void: true,
+      hanging: true,
+      at: {
+        anchor: { path: lastNodePath, offset: 0 },
+        focus: { path: lastNodePath, offset: 0 },
+      },
+    });
 
-  // 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);
+    Transforms.insertNodes(
+      editor,
+      {
+        type: isActive ? 'paragraph' : 'list-item',
+        children: [...parentNode.children],
+      },
+      {
+        at: [lastNodePath[0]],
+        select: true,
+      }
+    );
+
+    if (!isActive) {
+      // If the selection is now a list item, wrap it inside a list
+      const block = { type: 'list', format, children: [] };
+      Transforms.wrapNodes(editor, block);
+    }
   }
 };
 
@@ -507,6 +534,31 @@ const LinkButton = ({ disabled }) => {
     return Boolean(match);
   };
 
+  const isLinkDisabled = () => {
+    // Always disabled when the whole editor is disabled
+    if (disabled) {
+      return true;
+    }
+
+    // Always enabled when there's no selection
+    if (!editor.selection) {
+      return false;
+    }
+
+    // Get the block node closest to the anchor and focus
+    const anchorNodeEntry = Editor.above(editor, {
+      at: editor.selection.anchor,
+      match: (node) => node.type !== 'text',
+    });
+    const focusNodeEntry = Editor.above(editor, {
+      at: editor.selection.focus,
+      match: (node) => node.type !== 'text',
+    });
+
+    // Disabled if the anchor and focus are not in the same block
+    return anchorNodeEntry[0] !== focusNodeEntry[0];
+  };
+
   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: '' });
@@ -522,7 +574,7 @@ const LinkButton = ({ disabled }) => {
       }}
       isActive={isLinkActive()}
       handleClick={addLink}
-      disabled={disabled}
+      disabled={isLinkDisabled()}
     />
   );
 };
@@ -543,11 +595,37 @@ const BetaTag = styled(Box)`
 const BlocksToolbar = ({ disabled }) => {
   const modifiers = useModifiersStore();
   const blocks = useBlocksStore();
+  const editor = useSlate();
+
+  /**
+   * The modifier buttons are disabled when an image is selected.
+   */
+
+  const checkButtonDisabled = () => {
+    // Always disabled when the whole editor is disabled
+    if (disabled) {
+      return true;
+    }
+
+    if (!editor.selection) {
+      return false;
+    }
+
+    const selectedNode = editor.children[editor.selection.anchor.path[0]];
+
+    if (['image', 'code'].includes(selectedNode.type)) {
+      return true;
+    }
+
+    return false;
+  };
+
+  const isButtonDisabled = checkButtonDisabled();
 
   return (
     <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%">
+      <ToolbarWrapper gap={2} padding={2} paddingRight={4} width="100%">
         <BlocksDropdown disabled={disabled} />
         <Toolbar.ToggleGroup type="multiple" asChild>
           <Flex gap={1} marginLeft={1}>
@@ -559,10 +637,10 @@ const BlocksToolbar = ({ disabled }) => {
                 label={modifier.label}
                 isActive={modifier.checkIsActive()}
                 handleClick={modifier.handleToggle}
-                disabled={disabled}
+                disabled={isButtonDisabled}
               />
             ))}
-            <LinkButton disabled={disabled} />
+            <LinkButton disabled={isButtonDisabled} />
           </Flex>
         </Toolbar.ToggleGroup>
         <Separator />