@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js

@@ -0,0 +1,281 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactDom = require('react-dom');
+var reactIntl = require('react-intl');
+var slate = require('slate');
+var slateHistory = require('slate-history');
+var slateReact = require('slate-react');
+var styledComponents = require('styled-components');
+var translations = require('../../../../../utils/translations.js');
+var BlocksContent = require('./BlocksContent.js');
+var BlocksToolbar = require('./BlocksToolbar.js');
+var EditorLayout = require('./EditorLayout.js');
+var Modifiers = require('./Modifiers.js');
+var withStrapiSchema = require('./plugins/withStrapiSchema.js');
+var types = require('./utils/types.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const [BlocksEditorProvider, usePartialBlocksEditorContext] = strapiAdmin.createContext('BlocksEditor');
+function useBlocksEditorContext(consumerName) {
+    const context = usePartialBlocksEditorContext(consumerName, (state)=>state);
+    const editor = slateReact.useSlate();
+    return {
+        ...context,
+        editor
+    };
+}
+/* -------------------------------------------------------------------------------------------------
+ * BlocksEditor
+ * -----------------------------------------------------------------------------------------------*/ const EditorDivider = styledComponents.styled(designSystem.Divider)`
+  background: ${({ theme })=>theme.colors.neutral200};
+`;
+/**
+ * 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
+ */ function useResetKey(editor, value) {
+    // Keep track how many times Slate detected a change from a user interaction in the editor
+    const slateUpdatesCount = React__namespace.useRef(0);
+    // Keep track of how many times the value prop was updated, whether from within editor or from outside
+    const valueUpdatesCount = React__namespace.useRef(0);
+    // Use a key to force a rerender of the Slate editor when needed
+    const [key, setKey] = React__namespace.useState(0);
+    React__namespace.useEffect(()=>{
+        valueUpdatesCount.current += 1;
+        // If the 2 refs are not equal, it means the value was updated from outside
+        if (valueUpdatesCount.current !== slateUpdatesCount.current) {
+            // Bring the 2 refs back in sync
+            slateUpdatesCount.current = valueUpdatesCount.current;
+            // The update may just be an echo of the editor's own content coming back through the form
+            // (e.g. the debounced sync, or a re-render while document queries settle). Remounting in
+            // that case is pointless and destructive: it wipes pending input and the DOM under the
+            // user's caret. Only force a remount when the content is actually different.
+            const externalState = value?.length ? normalizeBlocksState(editor, value) : null;
+            const editorState = normalizeBlocksState(editor, editor.children);
+            if (JSON.stringify(externalState) === JSON.stringify(editorState)) {
+                return;
+            }
+            // The remount reuses the same editor instance, so a selection pointing into the old
+            // content would survive it and crash slate-react's toDOMPoint when the new content is
+            // shorter. Drop the selection before swapping the children.
+            if (editor.selection) {
+                slate.Transforms.deselect(editor);
+            }
+            // 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);
+        }
+    }, [
+        editor,
+        value
+    ]);
+    const incrementSlateUpdatesCount = React__namespace.useCallback(()=>{
+        slateUpdatesCount.current += 1;
+    }, []);
+    return {
+        key,
+        incrementSlateUpdatesCount
+    };
+}
+const pipe = (...fns)=>(value)=>fns.reduce((prev, fn)=>fn(prev), value);
+/**
+ * Normalize the blocks state to null if the editor state is considered empty,
+ * otherwise return the state
+ */ const normalizeBlocksState = (editor, value)=>{
+    const isEmpty = value.length === 1 && slate.Editor.isEmpty(editor, value[0]);
+    return isEmpty ? null : value;
+};
+const BlocksEditor = /*#__PURE__*/ React__namespace.forwardRef(({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef)=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isMobile = strapiAdmin.useIsMobile();
+    const blocks = strapiAdmin.useStrapiApp('BlocksEditor', (state)=>state.plugins['content-manager']?.apis?.getRichTextBlocks() ?? {});
+    const blockRegisteredPlugins = Object.values(blocks).map((block)=>block.plugin).filter(types.isNonNullable);
+    const [editor] = React__namespace.useState(()=>pipe(slateHistory.withHistory, withStrapiSchema.withStrapiSchema, slateReact.withReact, ...blockRegisteredPlugins)(slate.createEditor()));
+    const [liveText, setLiveText] = React__namespace.useState('');
+    const ariaDescriptionId = React__namespace.useId();
+    const [isExpandedMode, handleToggleExpand] = React__namespace.useReducer((prev)=>!prev, false);
+    /**
+     * 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__namespace.useImperativeHandle(forwardedRef, ()=>({
+            focus () {
+                slateReact.ReactEditor.focus(editor);
+            }
+        }), [
+        editor
+    ]);
+    const { key, incrementSlateUpdatesCount } = useResetKey(editor, value);
+    const debounceTimeout = React__namespace.useRef(null);
+    const flushPendingFormSync = React__namespace.useCallback(()=>{
+        if (!debounceTimeout.current) {
+            return;
+        }
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = null;
+        // Counter was already bumped when the AST changed; only push form state here.
+        // Ensure Strapi Form state updates before the next event (e.g. Save click) reads values.
+        reactDom.flushSync(()=>{
+            onChange(name, normalizeBlocksState(editor, editor.children));
+        });
+    }, [
+        editor,
+        name,
+        onChange
+    ]);
+    const handleSlateChange = React__namespace.useCallback((state)=>{
+        const isAstChange = editor.operations.some((op)=>op.type !== 'set_selection');
+        if (isAstChange) {
+            /**
+           * Slate handles the state of the editor internally. We just need to keep Strapi's form
+           * state in sync with it in order to make sure that things like the "modified" state
+           * isn't broken. Updating the whole state on every change is very expensive however,
+           * so we debounce calls to onChange to mitigate input lag.
+           *
+           * Bump the reset-key counter immediately (not inside the debounce). Otherwise any
+           * value-prop identity change during the 300ms window — e.g. clicking the blocks
+           * toolbar — looks like an external update with stale empty form state and remounts
+           * the editor, wiping the pending input (blocks e2e flake).
+           */ incrementSlateUpdatesCount();
+            if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+            // Set a new debounce timeout
+            debounceTimeout.current = setTimeout(()=>{
+                // Normalize the state (empty editor becomes null)
+                onChange(name, normalizeBlocksState(editor, state));
+                debounceTimeout.current = null;
+            }, 300);
+        }
+    }, [
+        editor,
+        incrementSlateUpdatesCount,
+        name,
+        onChange
+    ]);
+    // Clean up the timeout on unmount
+    React__namespace.useEffect(()=>{
+        return ()=>{
+            if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+        };
+    }, []);
+    // Ensure the editor is in sync after discard
+    React__namespace.useEffect(()=>{
+        // Never deselect while the editor is actively focused (typing / editing),
+        if (slateReact.ReactEditor.isFocused(editor)) {
+            return;
+        }
+        // Normalize empty states for comparison to avoid losing focus on the editor when content is deleted
+        const normalizedValue = value?.length ? value : null;
+        const normalizedEditorState = normalizeBlocksState(editor, editor.children);
+        // Compare the field value with the editor state to check for a stale selection
+        if (normalizedValue && normalizedEditorState && JSON.stringify(normalizedEditorState) !== JSON.stringify(normalizedValue)) {
+            // When there is a diff, unset selection to avoid an invalid state
+            slate.Transforms.deselect(editor);
+        }
+    }, [
+        editor,
+        value
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                id: ariaDescriptionId,
+                children: formatMessage({
+                    id: translations.getTranslation('components.Blocks.dnd.instruction'),
+                    defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                "aria-live": "assertive",
+                children: liveText
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(slateReact.Slate, {
+                editor: editor,
+                initialValue: value?.length ? value : [
+                    {
+                        type: 'paragraph',
+                        children: [
+                            {
+                                type: 'text',
+                                text: ''
+                            }
+                        ]
+                    }
+                ],
+                onChange: handleSlateChange,
+                children: /*#__PURE__*/ jsxRuntime.jsx(BlocksEditorProvider, {
+                    blocks: blocks,
+                    modifiers: Modifiers.modifiers,
+                    disabled: disabled,
+                    name: name,
+                    setLiveText: setLiveText,
+                    isExpandedMode: isExpandedMode,
+                    flushPendingFormSync: flushPendingFormSync,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(EditorLayout.EditorLayout, {
+                        error: error,
+                        disabled: disabled,
+                        onToggleExpand: handleToggleExpand,
+                        ariaDescriptionId: ariaDescriptionId,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(BlocksToolbar.BlocksToolbar, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(EditorDivider, {
+                                width: "100%"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(BlocksContent.BlocksContent, {
+                                ...contentProps
+                            }),
+                            !isExpandedMode && !isMobile && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                position: "absolute",
+                                bottom: "1.2rem",
+                                right: "1.2rem",
+                                shadow: "filterShadow",
+                                label: formatMessage({
+                                    id: translations.getTranslation('components.Blocks.expand'),
+                                    defaultMessage: 'Expand'
+                                }),
+                                onClick: handleToggleExpand,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Expand, {})
+                            })
+                        ]
+                    })
+                })
+            }, key)
+        ]
+    });
+});
+
+exports.BlocksEditor = BlocksEditor;
+exports.BlocksEditorProvider = BlocksEditorProvider;
+exports.normalizeBlocksState = normalizeBlocksState;
+exports.useBlocksEditorContext = useBlocksEditorContext;
+//# sourceMappingURL=BlocksEditor.js.map

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksEditor.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport {\r\n  createContext,\r\n  useStrapiApp,\r\n  type FieldValue,\r\n  useIsMobile,\r\n} from '@strapi/admin/strapi-admin';\r\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\r\nimport { Expand } from '@strapi/icons';\r\nimport { flushSync } from 'react-dom';\r\nimport { MessageDescriptor, useIntl } from 'react-intl';\r\nimport { Editor, type Descendant, createEditor, Transforms, Element } from 'slate';\r\nimport { withHistory } from 'slate-history';\r\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\r\nimport { styled, type CSSProperties } from 'styled-components';\r\n\r\nimport { ContentManagerPlugin } from '../../../../../content-manager';\r\nimport { getTranslation } from '../../../../../utils/translations';\r\n\r\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\r\nimport { BlocksToolbar } from './BlocksToolbar';\r\nimport { EditorLayout } from './EditorLayout';\r\nimport { type ModifiersStore, modifiers } from './Modifiers';\r\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\r\nimport { isNonNullable } from './utils/types';\r\n\r\nimport type { Schema } from '@strapi/types';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * BlocksEditorProvider\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface CustomNode extends Omit<Schema.Attribute.BlocksNode, 'type'> {\r\n  type: Schema.Attribute.BlocksNode['type'] | string;\r\n  level?: number;\r\n  format?: string;\r\n}\r\n\r\ninterface BaseBlock {\r\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\r\n  /** Function to check if a given node is of this type of block */\r\n  matchNode: (node: Schema.Attribute.BlocksNode | CustomNode) => boolean;\r\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\r\n  handleEnterKey?: (editor: Editor) => void;\r\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\r\n  handleTab?: (editor: Editor) => void;\r\n  handleShiftTab?: (editor: Editor) => void;\r\n  snippets?: string[];\r\n  /** Adjust the vertical positioning of the drag-to-reorder grip icon */\r\n  dragHandleTopMargin?: CSSProperties['marginTop'];\r\n  /** A Slate plugin: function that will wrap the editor creation */\r\n  plugin?: (editor: Editor) => Editor;\r\n  /**\r\n   * Function that checks if an element should be draggable\r\n   * @default () => true */\r\n  isDraggable?: (element: Element) => boolean;\r\n}\r\n\r\nexport interface NonSelectorBlock extends BaseBlock {\r\n  isInBlocksSelector?: false;\r\n}\r\n\r\nexport interface SelectorBlock extends BaseBlock {\r\n  isInBlocksSelector: true;\r\n  icon?: React.ComponentType;\r\n  label: MessageDescriptor;\r\n}\r\n\r\ntype NonSelectorBlockKey = 'list-item' | 'link';\r\n\r\nconst selectorBlockKeys = [\r\n  'paragraph',\r\n  'heading-one',\r\n  'heading-two',\r\n  'heading-three',\r\n  'heading-four',\r\n  'heading-five',\r\n  'heading-six',\r\n  'list-ordered',\r\n  'list-unordered',\r\n  'image',\r\n  'quote',\r\n  'code',\r\n] as const;\r\n\r\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\r\n\r\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\r\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\r\n};\r\n\r\ntype BlocksStore = {\r\n  [K in SelectorBlockKey]: SelectorBlock;\r\n} & {\r\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\r\n};\r\n\r\ntype RichTextBlocksStore = Partial<BlocksStore> & Record<string, SelectorBlock | NonSelectorBlock>;\r\n\r\ninterface BlocksEditorContextValue {\r\n  blocks: RichTextBlocksStore;\r\n  modifiers: ModifiersStore;\r\n  disabled: boolean;\r\n  name: string;\r\n  setLiveText: (text: string) => void;\r\n  isExpandedMode: boolean;\r\n  /** Push debounced Slate → form sync immediately (e.g. on Editable blur before Save). */\r\n  flushPendingFormSync: () => void;\r\n}\r\n\r\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\r\n  createContext<BlocksEditorContextValue>('BlocksEditor');\r\n\r\nfunction useBlocksEditorContext(consumerName: string): BlocksEditorContextValue & {\r\n  editor: Editor;\r\n} {\r\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\r\n  const editor = useSlate();\r\n\r\n  return {\r\n    ...context,\r\n    editor,\r\n  };\r\n}\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * BlocksEditor\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\nconst EditorDivider = styled(Divider)`\r\n  background: ${({ theme }) => theme.colors.neutral200};\r\n`;\r\n\r\n/**\r\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\r\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\r\n * Why not use JSON.stringify(value) as the key?\r\n * Because it would force a rerender of the entire editor every time the user types a character.\r\n * Why not use the entity id as the key, since it's unique for each locale?\r\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\r\n */\r\nfunction useResetKey(\r\n  editor: Editor,\r\n  value?: Schema.Attribute.BlocksValue\r\n): {\r\n  key: number;\r\n  incrementSlateUpdatesCount: () => void;\r\n} {\r\n  // Keep track how many times Slate detected a change from a user interaction in the editor\r\n  const slateUpdatesCount = React.useRef(0);\r\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\r\n  const valueUpdatesCount = React.useRef(0);\r\n  // Use a key to force a rerender of the Slate editor when needed\r\n  const [key, setKey] = React.useState(0);\r\n\r\n  React.useEffect(() => {\r\n    valueUpdatesCount.current += 1;\r\n\r\n    // If the 2 refs are not equal, it means the value was updated from outside\r\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\r\n      // Bring the 2 refs back in sync\r\n      slateUpdatesCount.current = valueUpdatesCount.current;\r\n\r\n      // The update may just be an echo of the editor's own content coming back through the form\r\n      // (e.g. the debounced sync, or a re-render while document queries settle). Remounting in\r\n      // that case is pointless and destructive: it wipes pending input and the DOM under the\r\n      // user's caret. Only force a remount when the content is actually different.\r\n      const externalState = value?.length ? normalizeBlocksState(editor, value) : null;\r\n      const editorState = normalizeBlocksState(editor, editor.children);\r\n      if (JSON.stringify(externalState) === JSON.stringify(editorState)) {\r\n        return;\r\n      }\r\n\r\n      // The remount reuses the same editor instance, so a selection pointing into the old\r\n      // content would survive it and crash slate-react's toDOMPoint when the new content is\r\n      // shorter. Drop the selection before swapping the children.\r\n      if (editor.selection) {\r\n        Transforms.deselect(editor);\r\n      }\r\n\r\n      // Change the key to force a rerender of the Slate editor,\r\n      // which will pick up the new value through its initialValue prop\r\n      setKey((previousKey) => previousKey + 1);\r\n    }\r\n  }, [editor, value]);\r\n\r\n  const incrementSlateUpdatesCount = React.useCallback(() => {\r\n    slateUpdatesCount.current += 1;\r\n  }, []);\r\n\r\n  return { key, incrementSlateUpdatesCount };\r\n}\r\n\r\nconst pipe =\r\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\r\n  (value: Editor) =>\r\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\r\n\r\n/**\r\n * Normalize the blocks state to null if the editor state is considered empty,\r\n * otherwise return the state\r\n */\r\nconst normalizeBlocksState = (\r\n  editor: Editor,\r\n  value: Schema.Attribute.BlocksValue | Descendant[]\r\n): Schema.Attribute.BlocksValue | Descendant[] | null => {\r\n  const isEmpty =\r\n    value.length === 1 && Editor.isEmpty(editor, value[0] as Schema.Attribute.BlocksNode);\r\n\r\n  return isEmpty ? null : value;\r\n};\r\n\r\ninterface BlocksEditorProps\r\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\r\n    BlocksContentProps {\r\n  disabled?: boolean;\r\n  name: string;\r\n}\r\n\r\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\r\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\r\n    const { formatMessage } = useIntl();\r\n    const isMobile = useIsMobile();\r\n\r\n    const blocks = useStrapiApp(\r\n      'BlocksEditor',\r\n      (state) =>\r\n        (\r\n          state.plugins['content-manager']?.apis as\r\n            | ContentManagerPlugin['config']['apis']\r\n            | undefined\r\n        )?.getRichTextBlocks() ?? ({} as RichTextBlocksStore)\r\n    );\r\n\r\n    const blockRegisteredPlugins = Object.values(blocks)\r\n      .map((block) => block.plugin)\r\n      .filter(isNonNullable);\r\n\r\n    const [editor] = React.useState(() =>\r\n      pipe(withHistory, withStrapiSchema, withReact, ...blockRegisteredPlugins)(createEditor())\r\n    );\r\n    const [liveText, setLiveText] = React.useState('');\r\n    const ariaDescriptionId = React.useId();\r\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\r\n\r\n    /**\r\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\r\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\r\n     * also not passing forwarded ref here, gives console warning.\r\n     */\r\n    React.useImperativeHandle(\r\n      forwardedRef,\r\n      () => ({\r\n        focus() {\r\n          ReactEditor.focus(editor);\r\n        },\r\n      }),\r\n      [editor]\r\n    );\r\n\r\n    const { key, incrementSlateUpdatesCount } = useResetKey(editor, value);\r\n\r\n    const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\r\n\r\n    const flushPendingFormSync = React.useCallback(() => {\r\n      if (!debounceTimeout.current) {\r\n        return;\r\n      }\r\n      clearTimeout(debounceTimeout.current);\r\n      debounceTimeout.current = null;\r\n      // Counter was already bumped when the AST changed; only push form state here.\r\n      // Ensure Strapi Form state updates before the next event (e.g. Save click) reads values.\r\n      flushSync(() => {\r\n        onChange(\r\n          name,\r\n          normalizeBlocksState(editor, editor.children) as Schema.Attribute.BlocksValue\r\n        );\r\n      });\r\n    }, [editor, name, onChange]);\r\n\r\n    const handleSlateChange = React.useCallback(\r\n      (state: Descendant[]) => {\r\n        const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\r\n\r\n        if (isAstChange) {\r\n          /**\r\n           * Slate handles the state of the editor internally. We just need to keep Strapi's form\r\n           * state in sync with it in order to make sure that things like the \"modified\" state\r\n           * isn't broken. Updating the whole state on every change is very expensive however,\r\n           * so we debounce calls to onChange to mitigate input lag.\r\n           *\r\n           * Bump the reset-key counter immediately (not inside the debounce). Otherwise any\r\n           * value-prop identity change during the 300ms window — e.g. clicking the blocks\r\n           * toolbar — looks like an external update with stale empty form state and remounts\r\n           * the editor, wiping the pending input (blocks e2e flake).\r\n           */\r\n          incrementSlateUpdatesCount();\r\n\r\n          if (debounceTimeout.current) {\r\n            clearTimeout(debounceTimeout.current);\r\n          }\r\n\r\n          // Set a new debounce timeout\r\n          debounceTimeout.current = setTimeout(() => {\r\n            // Normalize the state (empty editor becomes null)\r\n            onChange(name, normalizeBlocksState(editor, state) as Schema.Attribute.BlocksValue);\r\n            debounceTimeout.current = null;\r\n          }, 300);\r\n        }\r\n      },\r\n      [editor, incrementSlateUpdatesCount, name, onChange]\r\n    );\r\n\r\n    // Clean up the timeout on unmount\r\n    React.useEffect(() => {\r\n      return () => {\r\n        if (debounceTimeout.current) {\r\n          clearTimeout(debounceTimeout.current);\r\n        }\r\n      };\r\n    }, []);\r\n\r\n    // Ensure the editor is in sync after discard\r\n    React.useEffect(() => {\r\n      // Never deselect while the editor is actively focused (typing / editing),\r\n      if (ReactEditor.isFocused(editor)) {\r\n        return;\r\n      }\r\n\r\n      // Normalize empty states for comparison to avoid losing focus on the editor when content is deleted\r\n      const normalizedValue = value?.length ? value : null;\r\n      const normalizedEditorState = normalizeBlocksState(editor, editor.children);\r\n\r\n      // Compare the field value with the editor state to check for a stale selection\r\n      if (\r\n        normalizedValue &&\r\n        normalizedEditorState &&\r\n        JSON.stringify(normalizedEditorState) !== JSON.stringify(normalizedValue)\r\n      ) {\r\n        // When there is a diff, unset selection to avoid an invalid state\r\n        Transforms.deselect(editor);\r\n      }\r\n    }, [editor, value]);\r\n\r\n    return (\r\n      <>\r\n        <VisuallyHidden id={ariaDescriptionId}>\r\n          {formatMessage({\r\n            id: getTranslation('components.Blocks.dnd.instruction'),\r\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\r\n          })}\r\n        </VisuallyHidden>\r\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\r\n        <Slate\r\n          editor={editor}\r\n          initialValue={\r\n            value?.length ? value : [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]\r\n          }\r\n          onChange={handleSlateChange}\r\n          key={key}\r\n        >\r\n          <BlocksEditorProvider\r\n            blocks={blocks}\r\n            modifiers={modifiers}\r\n            disabled={disabled}\r\n            name={name}\r\n            setLiveText={setLiveText}\r\n            isExpandedMode={isExpandedMode}\r\n            flushPendingFormSync={flushPendingFormSync}\r\n          >\r\n            <EditorLayout\r\n              error={error}\r\n              disabled={disabled}\r\n              onToggleExpand={handleToggleExpand}\r\n              ariaDescriptionId={ariaDescriptionId}\r\n            >\r\n              <BlocksToolbar />\r\n              <EditorDivider width=\"100%\" />\r\n              <BlocksContent {...contentProps} />\r\n              {!isExpandedMode && !isMobile && (\r\n                <IconButton\r\n                  position=\"absolute\"\r\n                  bottom=\"1.2rem\"\r\n                  right=\"1.2rem\"\r\n                  shadow=\"filterShadow\"\r\n                  label={formatMessage({\r\n                    id: getTranslation('components.Blocks.expand'),\r\n                    defaultMessage: 'Expand',\r\n                  })}\r\n                  onClick={handleToggleExpand}\r\n                >\r\n                  <Expand />\r\n                </IconButton>\r\n              )}\r\n            </EditorLayout>\r\n          </BlocksEditorProvider>\r\n        </Slate>\r\n      </>\r\n    );\r\n  }\r\n);\r\n\r\nexport {\r\n  type BlocksStore,\r\n  type RichTextBlocksStore,\r\n  type SelectorBlockKey,\r\n  BlocksEditor,\r\n  BlocksEditorProvider,\r\n  useBlocksEditorContext,\r\n  isSelectorBlockKey,\r\n  normalizeBlocksState,\r\n};\r\n"],"names":["BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","key","setKey","useState","useEffect","current","externalState","length","normalizeBlocksState","editorState","children","JSON","stringify","selection","Transforms","deselect","previousKey","incrementSlateUpdatesCount","useCallback","pipe","fns","reduce","prev","fn","isEmpty","Editor","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","isMobile","useIsMobile","blocks","useStrapiApp","plugins","apis","getRichTextBlocks","blockRegisteredPlugins","Object","values","map","block","plugin","filter","isNonNullable","withHistory","withStrapiSchema","withReact","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","debounceTimeout","flushPendingFormSync","clearTimeout","flushSync","handleSlateChange","isAstChange","operations","some","op","type","setTimeout","isFocused","normalizedValue","normalizedEditorState","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs

@@ -0,0 +1,256 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, useIsMobile, useStrapiApp } from '@strapi/admin/strapi-admin';
+import { Divider, VisuallyHidden, IconButton } from '@strapi/design-system';
+import { Expand } from '@strapi/icons';
+import { flushSync } from 'react-dom';
+import { useIntl } from 'react-intl';
+import { createEditor, Transforms, Editor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact, ReactEditor, Slate, useSlate } from 'slate-react';
+import { styled } from 'styled-components';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { BlocksContent } from './BlocksContent.mjs';
+import { BlocksToolbar } from './BlocksToolbar.mjs';
+import { EditorLayout } from './EditorLayout.mjs';
+import { modifiers } from './Modifiers.mjs';
+import { withStrapiSchema } from './plugins/withStrapiSchema.mjs';
+import { isNonNullable } from './utils/types.mjs';
+
+const [BlocksEditorProvider, usePartialBlocksEditorContext] = createContext('BlocksEditor');
+function useBlocksEditorContext(consumerName) {
+    const context = usePartialBlocksEditorContext(consumerName, (state)=>state);
+    const editor = useSlate();
+    return {
+        ...context,
+        editor
+    };
+}
+/* -------------------------------------------------------------------------------------------------
+ * BlocksEditor
+ * -----------------------------------------------------------------------------------------------*/ const EditorDivider = styled(Divider)`
+  background: ${({ theme })=>theme.colors.neutral200};
+`;
+/**
+ * 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
+ */ function useResetKey(editor, value) {
+    // Keep track 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) {
+            // Bring the 2 refs back in sync
+            slateUpdatesCount.current = valueUpdatesCount.current;
+            // The update may just be an echo of the editor's own content coming back through the form
+            // (e.g. the debounced sync, or a re-render while document queries settle). Remounting in
+            // that case is pointless and destructive: it wipes pending input and the DOM under the
+            // user's caret. Only force a remount when the content is actually different.
+            const externalState = value?.length ? normalizeBlocksState(editor, value) : null;
+            const editorState = normalizeBlocksState(editor, editor.children);
+            if (JSON.stringify(externalState) === JSON.stringify(editorState)) {
+                return;
+            }
+            // The remount reuses the same editor instance, so a selection pointing into the old
+            // content would survive it and crash slate-react's toDOMPoint when the new content is
+            // shorter. Drop the selection before swapping the children.
+            if (editor.selection) {
+                Transforms.deselect(editor);
+            }
+            // 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);
+        }
+    }, [
+        editor,
+        value
+    ]);
+    const incrementSlateUpdatesCount = React.useCallback(()=>{
+        slateUpdatesCount.current += 1;
+    }, []);
+    return {
+        key,
+        incrementSlateUpdatesCount
+    };
+}
+const pipe = (...fns)=>(value)=>fns.reduce((prev, fn)=>fn(prev), value);
+/**
+ * Normalize the blocks state to null if the editor state is considered empty,
+ * otherwise return the state
+ */ const normalizeBlocksState = (editor, value)=>{
+    const isEmpty = value.length === 1 && Editor.isEmpty(editor, value[0]);
+    return isEmpty ? null : value;
+};
+const BlocksEditor = /*#__PURE__*/ React.forwardRef(({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef)=>{
+    const { formatMessage } = useIntl();
+    const isMobile = useIsMobile();
+    const blocks = useStrapiApp('BlocksEditor', (state)=>state.plugins['content-manager']?.apis?.getRichTextBlocks() ?? {});
+    const blockRegisteredPlugins = Object.values(blocks).map((block)=>block.plugin).filter(isNonNullable);
+    const [editor] = React.useState(()=>pipe(withHistory, withStrapiSchema, withReact, ...blockRegisteredPlugins)(createEditor()));
+    const [liveText, setLiveText] = React.useState('');
+    const ariaDescriptionId = React.useId();
+    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev)=>!prev, false);
+    /**
+     * 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(forwardedRef, ()=>({
+            focus () {
+                ReactEditor.focus(editor);
+            }
+        }), [
+        editor
+    ]);
+    const { key, incrementSlateUpdatesCount } = useResetKey(editor, value);
+    const debounceTimeout = React.useRef(null);
+    const flushPendingFormSync = React.useCallback(()=>{
+        if (!debounceTimeout.current) {
+            return;
+        }
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = null;
+        // Counter was already bumped when the AST changed; only push form state here.
+        // Ensure Strapi Form state updates before the next event (e.g. Save click) reads values.
+        flushSync(()=>{
+            onChange(name, normalizeBlocksState(editor, editor.children));
+        });
+    }, [
+        editor,
+        name,
+        onChange
+    ]);
+    const handleSlateChange = React.useCallback((state)=>{
+        const isAstChange = editor.operations.some((op)=>op.type !== 'set_selection');
+        if (isAstChange) {
+            /**
+           * Slate handles the state of the editor internally. We just need to keep Strapi's form
+           * state in sync with it in order to make sure that things like the "modified" state
+           * isn't broken. Updating the whole state on every change is very expensive however,
+           * so we debounce calls to onChange to mitigate input lag.
+           *
+           * Bump the reset-key counter immediately (not inside the debounce). Otherwise any
+           * value-prop identity change during the 300ms window — e.g. clicking the blocks
+           * toolbar — looks like an external update with stale empty form state and remounts
+           * the editor, wiping the pending input (blocks e2e flake).
+           */ incrementSlateUpdatesCount();
+            if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+            // Set a new debounce timeout
+            debounceTimeout.current = setTimeout(()=>{
+                // Normalize the state (empty editor becomes null)
+                onChange(name, normalizeBlocksState(editor, state));
+                debounceTimeout.current = null;
+            }, 300);
+        }
+    }, [
+        editor,
+        incrementSlateUpdatesCount,
+        name,
+        onChange
+    ]);
+    // Clean up the timeout on unmount
+    React.useEffect(()=>{
+        return ()=>{
+            if (debounceTimeout.current) {
+                clearTimeout(debounceTimeout.current);
+            }
+        };
+    }, []);
+    // Ensure the editor is in sync after discard
+    React.useEffect(()=>{
+        // Never deselect while the editor is actively focused (typing / editing),
+        if (ReactEditor.isFocused(editor)) {
+            return;
+        }
+        // Normalize empty states for comparison to avoid losing focus on the editor when content is deleted
+        const normalizedValue = value?.length ? value : null;
+        const normalizedEditorState = normalizeBlocksState(editor, editor.children);
+        // Compare the field value with the editor state to check for a stale selection
+        if (normalizedValue && normalizedEditorState && JSON.stringify(normalizedEditorState) !== JSON.stringify(normalizedValue)) {
+            // When there is a diff, unset selection to avoid an invalid state
+            Transforms.deselect(editor);
+        }
+    }, [
+        editor,
+        value
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                id: ariaDescriptionId,
+                children: formatMessage({
+                    id: getTranslation('components.Blocks.dnd.instruction'),
+                    defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`
+                })
+            }),
+            /*#__PURE__*/ jsx(VisuallyHidden, {
+                "aria-live": "assertive",
+                children: liveText
+            }),
+            /*#__PURE__*/ jsx(Slate, {
+                editor: editor,
+                initialValue: value?.length ? value : [
+                    {
+                        type: 'paragraph',
+                        children: [
+                            {
+                                type: 'text',
+                                text: ''
+                            }
+                        ]
+                    }
+                ],
+                onChange: handleSlateChange,
+                children: /*#__PURE__*/ jsx(BlocksEditorProvider, {
+                    blocks: blocks,
+                    modifiers: modifiers,
+                    disabled: disabled,
+                    name: name,
+                    setLiveText: setLiveText,
+                    isExpandedMode: isExpandedMode,
+                    flushPendingFormSync: flushPendingFormSync,
+                    children: /*#__PURE__*/ jsxs(EditorLayout, {
+                        error: error,
+                        disabled: disabled,
+                        onToggleExpand: handleToggleExpand,
+                        ariaDescriptionId: ariaDescriptionId,
+                        children: [
+                            /*#__PURE__*/ jsx(BlocksToolbar, {}),
+                            /*#__PURE__*/ jsx(EditorDivider, {
+                                width: "100%"
+                            }),
+                            /*#__PURE__*/ jsx(BlocksContent, {
+                                ...contentProps
+                            }),
+                            !isExpandedMode && !isMobile && /*#__PURE__*/ jsx(IconButton, {
+                                position: "absolute",
+                                bottom: "1.2rem",
+                                right: "1.2rem",
+                                shadow: "filterShadow",
+                                label: formatMessage({
+                                    id: getTranslation('components.Blocks.expand'),
+                                    defaultMessage: 'Expand'
+                                }),
+                                onClick: handleToggleExpand,
+                                children: /*#__PURE__*/ jsx(Expand, {})
+                            })
+                        ]
+                    })
+                })
+            }, key)
+        ]
+    });
+});
+
+export { BlocksEditor, BlocksEditorProvider, normalizeBlocksState, useBlocksEditorContext };
+//# sourceMappingURL=BlocksEditor.mjs.map