@contentful/field-editor-rich-text 3.8.1 → 3.8.3

package/dist/cjs/RichTextEditor.js

@@ -27,6 +27,7 @@ const _noop = _interop_require_default(require("lodash/noop"));
 const _ContentfulEditorProvider = require("./ContentfulEditorProvider");
 const _callbacks = require("./helpers/callbacks");
 const _toSlateValue = require("./helpers/toSlateValue");
+const _misc = require("./internal/misc");
 const _plugins = require("./plugins");
 const _RichTextEditorstyles = require("./RichTextEditor.styles");
 const _SdkProvider = require("./SdkProvider");
@@ -78,32 +79,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const ConnectedRichTextEditor = (props)=>{
-    const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
-    const plugins = _react.useMemo(()=>(0, _plugins.getPlugins)(props.sdk, props.onAction ?? _noop.default, props.restrictedMarks), [
-        props.sdk,
-        props.onAction,
-        props.restrictedMarks
+    const { sdk , onAction , restrictedMarks  } = props;
+    const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(sdk);
+    const plugins = _react.useMemo(()=>(0, _plugins.getPlugins)(sdk, onAction ?? _noop.default, restrictedMarks), [
+        sdk,
+        onAction,
+        restrictedMarks
     ]);
     const handleChange = props.onChange;
-    const isFirstRender = _react.useRef(true);
-    const value = (0, _toSlateValue.toSlateValue)(props.value);
+    const initialValue = _react.useMemo(()=>{
+        return (0, _misc.normalizeInitialValue)({
+            plugins,
+            disableCorePlugins: _plugins.disableCorePlugins
+        }, (0, _toSlateValue.toSlateValue)(props.value));
+    }, [
+        props.value,
+        plugins
+    ]);
     const onChange = _react.useMemo(()=>(0, _callbacks.createOnChangeCallback)((document)=>{
-            if (!isFirstRender.current && handleChange) {
-                handleChange(document);
-            }
+            handleChange?.(document);
         }), [
         handleChange
     ]);
-    const firstInteractionHandler = _react.useCallback(()=>{
-        isFirstRender.current = false;
-    }, [
-        isFirstRender
-    ]);
     const classNames = (0, _emotion.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _emotion.css)({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? _RichTextEditorstyles.styles.disabled : _RichTextEditorstyles.styles.enabled, props.isToolbarHidden && _RichTextEditorstyles.styles.hiddenToolbar);
     return _react.createElement(_SdkProvider.SdkProvider, {
-        sdk: props.sdk
+        sdk: sdk
     }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
         value: id
     }, _react.createElement("div", {
@@ -111,8 +113,7 @@ const ConnectedRichTextEditor = (props)=>{
         "data-test-id": "rich-text-editor"
     }, _react.createElement(_platecore.PlateProvider, {
         id: id,
-        initialValue: value,
-        normalizeInitialValue: true,
+        initialValue: initialValue,
         plugins: plugins,
         disableCorePlugins: _plugins.disableCorePlugins,
         onChange: onChange
@@ -121,15 +122,12 @@ const ConnectedRichTextEditor = (props)=>{
     }, _react.createElement(_Toolbar.default, {
         isDisabled: props.isDisabled
     })), _react.createElement(_SyncEditorValue.SyncEditorValue, {
-        incomingValue: value
+        incomingValue: initialValue
     }), _react.createElement(_platecore.Plate, {
         id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled,
-            onKeyDown: firstInteractionHandler,
-            onChange: firstInteractionHandler,
-            onClick: firstInteractionHandler
+            readOnly: props.isDisabled
         }
     })))));
 };

package/dist/cjs/internal/misc.js

@@ -12,6 +12,9 @@ _export(exports, {
     createPlateEditor: function() {
         return createPlateEditor;
     },
+    normalizeInitialValue: function() {
+        return normalizeInitialValue;
+    },
     withoutNormalizing: function() {
         return withoutNormalizing;
     },
@@ -32,6 +35,7 @@ _export(exports, {
     }
 });
 const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
+const _transforms = require("./transforms");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -74,6 +78,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const createPlateEditor = (options = {})=>{
     return _platecore.createPlateEditor(options);
 };
+const normalizeInitialValue = (options, initialValue)=>{
+    const editor = createPlateEditor(options);
+    if (initialValue) {
+        editor.children = initialValue;
+    }
+    (0, _transforms.normalize)(editor, {
+        force: true
+    });
+    return editor.children;
+};
 const withoutNormalizing = (editor, fn)=>{
     return _platecore.withoutNormalizing(editor, fn);
 };

package/dist/cjs/test-utils/createEditor.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "createTestEditor", {
         return createTestEditor;
     }
 });
-const _platecore = require("@udecode/plate-core");
 const _internal = require("../internal");
 const _plugins = require("../plugins");
 const _randomId = require("./randomId");
@@ -19,10 +18,11 @@ const createTestEditor = (options)=>{
             validation: []
         }
     };
-    const editor = (0, _platecore.createPlateEditor)({
+    const editor = (0, _internal.createPlateEditor)({
         id: (0, _randomId.randomId)('editor'),
         editor: options.input,
-        plugins: options.plugins || (0, _plugins.getPlugins)(sdk, trackingHandler)
+        plugins: options.plugins || (0, _plugins.getPlugins)(sdk, trackingHandler),
+        normalizeInitialValue: false
     });
     return {
         editor,

package/dist/esm/RichTextEditor.js

@@ -9,6 +9,7 @@ import noop from 'lodash/noop';
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
 import { createOnChangeCallback } from './helpers/callbacks';
 import { toSlateValue } from './helpers/toSlateValue';
+import { normalizeInitialValue } from './internal/misc';
 import { getPlugins, disableCorePlugins } from './plugins';
 import { styles } from './RichTextEditor.styles';
 import { SdkProvider } from './SdkProvider';
@@ -16,32 +17,33 @@ import { SyncEditorValue } from './SyncEditorValue';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
 export const ConnectedRichTextEditor = (props)=>{
-    const id = getContentfulEditorId(props.sdk);
-    const plugins = React.useMemo(()=>getPlugins(props.sdk, props.onAction ?? noop, props.restrictedMarks), [
-        props.sdk,
-        props.onAction,
-        props.restrictedMarks
+    const { sdk , onAction , restrictedMarks  } = props;
+    const id = getContentfulEditorId(sdk);
+    const plugins = React.useMemo(()=>getPlugins(sdk, onAction ?? noop, restrictedMarks), [
+        sdk,
+        onAction,
+        restrictedMarks
     ]);
     const handleChange = props.onChange;
-    const isFirstRender = React.useRef(true);
-    const value = toSlateValue(props.value);
+    const initialValue = React.useMemo(()=>{
+        return normalizeInitialValue({
+            plugins,
+            disableCorePlugins
+        }, toSlateValue(props.value));
+    }, [
+        props.value,
+        plugins
+    ]);
     const onChange = React.useMemo(()=>createOnChangeCallback((document)=>{
-            if (!isFirstRender.current && handleChange) {
-                handleChange(document);
-            }
+            handleChange?.(document);
         }), [
         handleChange
     ]);
-    const firstInteractionHandler = React.useCallback(()=>{
-        isFirstRender.current = false;
-    }, [
-        isFirstRender
-    ]);
     const classNames = cx(styles.editor, props.minHeight !== undefined ? css({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar);
     return React.createElement(SdkProvider, {
-        sdk: props.sdk
+        sdk: sdk
     }, React.createElement(ContentfulEditorIdProvider, {
         value: id
     }, React.createElement("div", {
@@ -49,8 +51,7 @@ export const ConnectedRichTextEditor = (props)=>{
         "data-test-id": "rich-text-editor"
     }, React.createElement(PlateProvider, {
         id: id,
-        initialValue: value,
-        normalizeInitialValue: true,
+        initialValue: initialValue,
         plugins: plugins,
         disableCorePlugins: disableCorePlugins,
         onChange: onChange
@@ -59,15 +60,12 @@ export const ConnectedRichTextEditor = (props)=>{
     }, React.createElement(Toolbar, {
         isDisabled: props.isDisabled
     })), React.createElement(SyncEditorValue, {
-        incomingValue: value
+        incomingValue: initialValue
     }), React.createElement(Plate, {
         id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled,
-            onKeyDown: firstInteractionHandler,
-            onChange: firstInteractionHandler,
-            onClick: firstInteractionHandler
+            readOnly: props.isDisabled
         }
     })))));
 };

package/dist/esm/internal/misc.js

@@ -1,7 +1,18 @@
 import * as p from '@udecode/plate-core';
+import { normalize } from './transforms';
 export const createPlateEditor = (options = {})=>{
     return p.createPlateEditor(options);
 };
+export const normalizeInitialValue = (options, initialValue)=>{
+    const editor = createPlateEditor(options);
+    if (initialValue) {
+        editor.children = initialValue;
+    }
+    normalize(editor, {
+        force: true
+    });
+    return editor.children;
+};
 export const withoutNormalizing = (editor, fn)=>{
     return p.withoutNormalizing(editor, fn);
 };

package/dist/esm/test-utils/createEditor.js

@@ -1,5 +1,4 @@
-import { createPlateEditor } from '@udecode/plate-core';
-import { normalize } from '../internal';
+import { normalize, createPlateEditor } from '../internal';
 import { getPlugins } from '../plugins';
 import { randomId } from './randomId';
 export const createTestEditor = (options)=>{
@@ -12,7 +11,8 @@ export const createTestEditor = (options)=>{
     const editor = createPlateEditor({
         id: randomId('editor'),
         editor: options.input,
-        plugins: options.plugins || getPlugins(sdk, trackingHandler)
+        plugins: options.plugins || getPlugins(sdk, trackingHandler),
+        normalizeInitialValue: false
     });
     return {
         editor,

package/dist/types/internal/misc.d.ts

@@ -26,6 +26,28 @@ export declare const createPlateEditor: (options?: CreatePlateEditorOptions) =>
     childrenFactory: () => Value;
     currentKeyboardEvent: import("react").KeyboardEvent<Element> | null;
 };
+/**
+ * The only reason for this helper to exist is to run the initial normalization
+ * before mounting the Plate editor component which in turn avoids the false
+ * trigger of `onChange`.
+ *
+ * Background:
+ *
+ * Due to legacy behavior, it's possible to have "valid" RT document (based on
+ * the schema from rich-text-types) that doesn't make sense. For example, links
+ * with no text nodes?[1]. Solving that requires an initial normalization pass
+ * which modifies the slate tree by definition -> triggering onChange.
+ *
+ * The initial onChange trigger is undesirable as the user may not have touched
+ * the RT content yet or the editor is rendered as readonly.
+ *
+ * Ideally, we should not initialize the editor twice but that's the only
+ * way that I could get this to work. Improvements are welcome.
+ *
+ * [1]: See cypress/e2e/rich-text/.../invalidDocumentNormalizable.js for more
+ *      examples.
+ */
+export declare const normalizeInitialValue: (options: CreatePlateEditorOptions, initialValue?: Value) => Value;
 export declare const withoutNormalizing: (editor: PlateEditor, fn: () => boolean | void) => boolean;
 export declare const focusEditor: (editor: PlateEditor, target?: Location) => void;
 export declare const blurEditor: (editor: PlateEditor) => void;

package/dist/types/test-utils/createEditor.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FieldExtensionSDK } from '@contentful/app-sdk';
-import { PlateEditor, PlatePlugin, Value } from '../internal/types';
+import { PlatePlugin } from '../internal/types';
 import { RichTextTrackingActionHandler } from '../plugins/Tracking';
 export declare const createTestEditor: (options: {
     input?: any;
@@ -8,8 +8,8 @@ export declare const createTestEditor: (options: {
     trackingHandler?: RichTextTrackingActionHandler;
     plugins?: PlatePlugin[];
 }) => {
-    editor: PlateEditor & Omit<import("slate").BaseEditor, "children" | "operations" | "marks" | "isInline" | "isVoid" | "normalizeNode" | "apply" | "getFragment" | "insertFragment" | "insertNode"> & {
-        children: Value;
+    editor: import("../internal").PlateEditor & Omit<import("slate").BaseEditor, "children" | "operations" | "marks" | "isInline" | "isVoid" | "normalizeNode" | "apply" | "getFragment" | "insertFragment" | "insertNode"> & {
+        children: import("../internal").Value;
         operations: import("@udecode/plate-core").TOperation<import("@udecode/plate-core").TDescendant>[];
         marks: Record<string, any> | null;
         isInline: <N extends import("@udecode/plate-core").TElement>(element: N) => boolean;
@@ -22,11 +22,11 @@ export declare const createTestEditor: (options: {
     } & import("@udecode/plate-core").UnknownObject & Pick<import("slate-history").HistoryEditor, "history" | "undo" | "redo"> & Pick<import("slate-react").ReactEditor, "insertData" | "insertFragmentData" | "setFragmentData" | "insertTextData" | "hasRange"> & {
         key: any;
         id: string;
-        plugins: import("@udecode/plate-core").WithPlatePlugin<{}, Value, import("@udecode/plate-core").PlateEditor<Value>>[];
-        pluginsByKey: Record<string, import("@udecode/plate-core").WithPlatePlugin<{}, Value, import("@udecode/plate-core").PlateEditor<Value>>>;
+        plugins: import("@udecode/plate-core").WithPlatePlugin<{}, import("../internal").Value, import("@udecode/plate-core").PlateEditor<import("../internal").Value>>[];
+        pluginsByKey: Record<string, import("@udecode/plate-core").WithPlatePlugin<{}, import("../internal").Value, import("@udecode/plate-core").PlateEditor<import("../internal").Value>>>;
         prevSelection: import("slate").BaseRange | null;
         blockFactory: (node?: Partial<import("@udecode/plate-core").TElement> | undefined, path?: import("slate").Path | undefined) => import("@udecode/plate-core").TElement;
-        childrenFactory: () => Value;
+        childrenFactory: () => import("../internal").Value;
         currentKeyboardEvent: import("react").KeyboardEvent<Element> | null;
     };
     normalize: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,7 +44,7 @@
     "@contentful/f36-icons": "^4.1.1",
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/f36-utils": "^4.19.0",
-    "@contentful/field-editor-reference": "^5.12.0",
+    "@contentful/field-editor-reference": "^5.13.1",
     "@contentful/field-editor-shared": "^1.3.0",
     "@contentful/rich-text-plain-text-renderer": "^16.0.4",
     "@contentful/rich-text-types": "16.1.0",
@@ -81,5 +81,5 @@
     "prism-react-renderer": "2.0.5",
     "react": ">=16.14.0"
   },
-  "gitHead": "f05cad6474475af4d6f4bfd8ad261432878a7f57"
+  "gitHead": "b7e8ebd1b812512d967805061f812350b4cb08bf"
 }