@contentful/field-editor-rich-text 4.18.0 → 4.19.1

package/dist/cjs/helpers/toSlateDoc.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "toSlateDoc", {
+    enumerable: true,
+    get: function() {
+        return toSlateDoc;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _slate = require("slate");
+const _internal = require("../internal");
+const inlineTypes = new Set(Object.values(_richtexttypes.INLINES));
+const voidTypes = new Set([
+    ..._richtexttypes.VOID_BLOCKS,
+    _richtexttypes.INLINES.EMBEDDED_ENTRY,
+    _richtexttypes.INLINES.EMBEDDED_RESOURCE
+]);
+function isEmptyHyperlink(node) {
+    if (node.nodeType !== _richtexttypes.INLINES.HYPERLINK) {
+        return false;
+    }
+    const link = node;
+    if (!link.content?.length) {
+        return true;
+    }
+    return link.content.length === 1 && link.content.at(0)?.value.length === 0;
+}
+function maybeFixUnevenTableRows(el) {
+    const rows = el.children;
+    const rowSize = Math.max(...rows.map((row)=>row.children?.length ?? 0));
+    const fixedRows = [];
+    for (const row of rows){
+        const missingCells = rowSize - row.children.length;
+        if (missingCells === 0) {
+            fixedRows.push(row);
+            continue;
+        }
+        const cellType = row.children.at(-1)?.type === _richtexttypes.BLOCKS.TABLE_HEADER_CELL ? _richtexttypes.BLOCKS.TABLE_HEADER_CELL : _richtexttypes.BLOCKS.TABLE_CELL;
+        const paddedRow = {
+            ...row,
+            children: [
+                ...row.children
+            ]
+        };
+        for(let i = 0; i < missingCells; i++){
+            paddedRow.children.push({
+                type: cellType,
+                data: {},
+                children: [
+                    {
+                        type: _richtexttypes.BLOCKS.PARAGRAPH,
+                        data: {},
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ],
+                        isVoid: false
+                    }
+                ],
+                isVoid: false
+            });
+        }
+        fixedRows.push(paddedRow);
+    }
+    return fixedRows;
+}
+function transformText(node) {
+    const text = {
+        text: node.value,
+        data: node.data ?? {}
+    };
+    for (const mark of node.marks){
+        text[mark.type] = true;
+    }
+    return text;
+}
+function transformNode(node) {
+    const el = {
+        type: node.nodeType,
+        children: [],
+        data: node.data ?? {},
+        isVoid: voidTypes.has(node.nodeType)
+    };
+    for (const child of node.content){
+        const lastChild = el.children.at(-1);
+        if (child.nodeType === 'text') {
+            const text = transformText(child);
+            if ((0, _internal.isText)(lastChild) && _slate.Text.equals(lastChild, text, {
+                loose: true
+            })) {
+                lastChild.text += child.value;
+            } else {
+                el.children.push(text);
+            }
+            continue;
+        }
+        if (isEmptyHyperlink(child)) {
+            continue;
+        }
+        if (inlineTypes.has(child.nodeType) && !(0, _internal.isText)(lastChild)) {
+            el.children.push({
+                text: ''
+            });
+        }
+        el.children.push(transformNode(child));
+    }
+    if (el.children.length === 0) {
+        switch(el.type){
+            case _richtexttypes.BLOCKS.QUOTE:
+            case _richtexttypes.BLOCKS.LIST_ITEM:
+                el.children.push({
+                    type: _richtexttypes.BLOCKS.PARAGRAPH,
+                    data: {},
+                    children: [
+                        {
+                            text: ''
+                        }
+                    ],
+                    isVoid: false
+                });
+                break;
+            case _richtexttypes.BLOCKS.UL_LIST:
+            case _richtexttypes.BLOCKS.OL_LIST:
+                el.children.push({
+                    type: _richtexttypes.BLOCKS.LIST_ITEM,
+                    data: {},
+                    children: [
+                        {
+                            type: _richtexttypes.BLOCKS.PARAGRAPH,
+                            data: {},
+                            children: [
+                                {
+                                    text: ''
+                                }
+                            ],
+                            isVoid: false
+                        }
+                    ],
+                    isVoid: false
+                });
+                break;
+            default:
+                el.children.push({
+                    text: ''
+                });
+                break;
+        }
+    }
+    const lastChildElement = el.children.at(-1);
+    if (_slate.Element.isElement(lastChildElement) && inlineTypes.has(lastChildElement.type)) {
+        el.children.push({
+            text: ''
+        });
+    }
+    if (el.type === _richtexttypes.BLOCKS.TABLE) {
+        el.children = maybeFixUnevenTableRows(el);
+    }
+    return el;
+}
+function toSlateDoc(doc) {
+    if (!doc || !doc?.content?.length) {
+        return [
+            {
+                type: 'paragraph',
+                children: [
+                    {
+                        text: ''
+                    }
+                ],
+                data: {},
+                isVoid: false
+            }
+        ];
+    }
+    const elements = doc.content.map(transformNode);
+    const lastElement = elements.at(-1);
+    if (lastElement?.type !== _richtexttypes.BLOCKS.PARAGRAPH) {
+        elements.push({
+            type: _richtexttypes.BLOCKS.PARAGRAPH,
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            data: {},
+            isVoid: false
+        });
+    }
+    return elements;
+}

package/dist/esm/RichTextEditor.js

@@ -6,11 +6,11 @@ import { PlateContent, Plate } from '@udecode/plate-common';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
+import { useDeepCompareMemo } from 'use-deep-compare';
 import { CharConstraints } from './CharConstraints';
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
 import { defaultScrollSelectionIntoView } from './editor-overrides';
-import { toSlateValue } from './helpers/toSlateValue';
-import { normalizeInitialValue } from './internal/misc';
+import { toSlateDoc } from './helpers/toSlateDoc';
 import { getPlugins, disableCorePlugins } from './plugins';
 import { styles } from './RichTextEditor.styles';
 import { SdkProvider } from './SdkProvider';
@@ -26,14 +26,10 @@ export const ConnectedRichTextEditor = (props)=>{
         restrictedMarks,
         withCharValidation
     ]);
-    const initialValue = React.useMemo(()=>{
-        return normalizeInitialValue({
-            plugins,
-            disableCorePlugins
-        }, toSlateValue(props.value));
+    const initialValue = useDeepCompareMemo(()=>{
+        return toSlateDoc(props.value);
     }, [
-        props.value,
-        plugins
+        props.value
     ]);
     const direction = sdk.locales.direction[sdk.field.locale] ?? 'ltr';
     const classNames = cx(styles.editor, props.minHeight !== undefined ? css({