@contentful/field-editor-rich-text 3.4.22 → 3.6.0

package/dist/esm/prepareDocument.js

@@ -0,0 +1,57 @@
+import { toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
+import { EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import schema from './constants/Schema';
+import { sanitizeIncomingSlateDoc } from './helpers/sanitizeIncomingSlateDoc';
+import { createPlateEditor, withoutNormalizing } from './internal';
+import { getEndPoint, isNode } from './internal/queries';
+import { normalize, select } from './internal/transforms';
+export const hasContent = (doc)=>{
+    return (doc?.content || []).length > 0;
+};
+export const setEditorContent = (editor, nodes)=>{
+    withoutNormalizing(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = isNode(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = getEndPoint(editor, []);
+        if (point) {
+            select(editor, point);
+        }
+    });
+};
+export const documentToEditorValue = (doc)=>{
+    const slateDoc = toSlatejsDocument({
+        document: hasContent(doc) ? doc : EMPTY_DOCUMENT,
+        schema
+    });
+    return sanitizeIncomingSlateDoc(slateDoc);
+};
+export const normalizeEditorValue = (value, options)=>{
+    const editor = createPlateEditor(options);
+    editor.children = value;
+    normalize(editor, {
+        force: true
+    });
+    return editor.children;
+};

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

@@ -0,0 +1,21 @@
+import { normalize } from '../internal';
+import { createTestEditor } from './createEditor';
+import { setEmptyDataAttribute } from './setEmptyDataAttribute';
+export const assertOutput = (options)=>{
+    const editor = options.editor ?? createTestEditor({
+        input: options.input
+    }).editor;
+    normalize(editor);
+    setEmptyDataAttribute(editor);
+    if (options.log) {
+        console.log(JSON.stringify({
+            expected: options.expected,
+            actual: editor.children,
+            actualSelection: editor.selection
+        }, null, 2));
+    }
+    expect(editor.children).toEqual(options.expected.children);
+    if (options.expected.selection !== null) {
+        expect(editor.selection).toEqual(options.expected.selection);
+    }
+};

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

@@ -0,0 +1,21 @@
+import { createPlateEditor } from '@udecode/plate-core';
+import { normalize } from '../internal';
+import { getPlugins } from '../plugins';
+import { randomId } from './randomId';
+export const createTestEditor = (options)=>{
+    const trackingHandler = options.trackingHandler ?? jest.fn();
+    const sdk = options.sdk ?? {
+        field: {
+            validation: []
+        }
+    };
+    const editor = createPlateEditor({
+        id: randomId('editor'),
+        editor: options.input,
+        plugins: options.plugins || getPlugins(sdk, trackingHandler)
+    });
+    return {
+        editor,
+        normalize: ()=>normalize(editor)
+    };
+};

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

@@ -0,0 +1,4 @@
+export * from './jsx';
+export * from './createEditor';
+export * from './mockPlugin';
+export * from './assertOutput';

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

@@ -0,0 +1,149 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { createText } from '@udecode/plate-test-utils';
+import { createHyperscript } from 'slate-hyperscript';
+const voidChildren = [
+    {
+        text: ''
+    }
+];
+const createCode = (_, attrs, children)=>{
+    return createText('text', {
+        code: true,
+        ...attrs
+    }, children);
+};
+const createSysLink = (linkType, id)=>({
+        sys: {
+            id,
+            type: 'Link',
+            linkType
+        }
+    });
+const createHyperlink = (_, attrs, children)=>{
+    const data = {};
+    let type = INLINES.HYPERLINK;
+    if (attrs.uri) {
+        data.uri = attrs.uri;
+        type = INLINES.HYPERLINK;
+    }
+    if (attrs.asset) {
+        type = INLINES.ASSET_HYPERLINK;
+        data.target = createSysLink('Asset', attrs.asset);
+    }
+    if (attrs.entry) {
+        type = INLINES.ENTRY_HYPERLINK;
+        data.target = createSysLink('Entry', attrs.entry);
+    }
+    children = children.map((child)=>typeof child === 'string' ? {
+            text: child
+        } : child);
+    return {
+        type,
+        data,
+        children
+    };
+};
+const createInline = (_, attrs, children)=>{
+    return {
+        type: INLINES.EMBEDDED_ENTRY,
+        data: {
+            target: createSysLink('Entry', attrs.id)
+        },
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createEmbeddedBlock = (_, attrs, children)=>{
+    return {
+        type: attrs.type === 'Entry' ? BLOCKS.EMBEDDED_ENTRY : BLOCKS.EMBEDDED_ASSET,
+        data: {
+            target: createSysLink(attrs.type, attrs.id)
+        },
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createHR = (_, __, children)=>{
+    return {
+        type: BLOCKS.HR,
+        data: {},
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createFragment = (_, __, children)=>{
+    return children;
+};
+export const jsx = createHyperscript({
+    elements: {
+        hquote: {
+            type: BLOCKS.QUOTE,
+            data: {}
+        },
+        hh1: {
+            type: BLOCKS.HEADING_1,
+            data: {}
+        },
+        hh2: {
+            type: BLOCKS.HEADING_2,
+            data: {}
+        },
+        hh3: {
+            type: BLOCKS.HEADING_3,
+            data: {}
+        },
+        hh4: {
+            type: BLOCKS.HEADING_4,
+            data: {}
+        },
+        hh5: {
+            type: BLOCKS.HEADING_5,
+            data: {}
+        },
+        hh6: {
+            type: BLOCKS.HEADING_6,
+            data: {}
+        },
+        hli: {
+            type: BLOCKS.LIST_ITEM,
+            data: {}
+        },
+        hol: {
+            type: BLOCKS.OL_LIST,
+            data: {}
+        },
+        hp: {
+            type: BLOCKS.PARAGRAPH,
+            data: {}
+        },
+        htable: {
+            type: BLOCKS.TABLE,
+            data: {}
+        },
+        htd: {
+            type: BLOCKS.TABLE_CELL,
+            data: {}
+        },
+        hth: {
+            type: BLOCKS.TABLE_HEADER_CELL,
+            data: {}
+        },
+        htr: {
+            type: BLOCKS.TABLE_ROW,
+            data: {}
+        },
+        hul: {
+            type: BLOCKS.UL_LIST,
+            data: {}
+        }
+    },
+    creators: {
+        hlink: createHyperlink,
+        hhr: createHR,
+        htext: createText,
+        hcode: createCode,
+        hinline: createInline,
+        hembed: createEmbeddedBlock,
+        hfragment: createFragment
+    }
+});

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

@@ -0,0 +1,6 @@
+import { mockPlugin as mock } from '@udecode/plate-core';
+import { randomId } from './randomId';
+export const mockPlugin = (p)=>mock({
+        ...p,
+        key: p.key || randomId('plugin')
+    });

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

@@ -0,0 +1,3 @@
+export const randomId = (prefix = '')=>{
+    return `${prefix}-${(Math.random() + 1).toString(36).substring(10)}`;
+};

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

@@ -0,0 +1,11 @@
+import { setNodes } from '@udecode/plate-core';
+import { Element } from 'slate';
+export const setEmptyDataAttribute = (root)=>{
+    setNodes(root, {
+        data: {}
+    }, {
+        at: [],
+        match: (node)=>Element.isElement(node) && !node.data,
+        mode: 'all'
+    });
+};

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

@@ -0,0 +1,112 @@
+import { helpers, BLOCKS } from '@contentful/rich-text-types';
+import { getSchemaWithNodeType } from '@contentful/rich-text-types/dist/schemas';
+import Ajv from 'ajv';
+const ajv = new Ajv({
+    allErrors: true,
+    verbose: true
+});
+export function validateRichTextDocument(document) {
+    const validateRootNode = getValidator(BLOCKS.DOCUMENT);
+    const rootNodeIsValid = validateRootNode(removeGrandChildNodes(document));
+    const errors = [];
+    if (rootNodeIsValid) {
+        validateChildNodes(document, [
+            'content'
+        ], errors);
+    } else {
+        buildSchemaErrors(validateRootNode, [], errors);
+    }
+    return errors;
+}
+function validateChildNodes(node, path, errors) {
+    for(let i = 0; i < node.content.length; i++){
+        validateNode(node.content[i], [
+            ...path,
+            i
+        ], errors);
+    }
+}
+function validateNode(node, path, errors) {
+    const validateSchema = getValidator(node.nodeType);
+    const isValid = validateSchema(removeGrandChildNodes(resetChildNodes(node)));
+    if (!isValid) {
+        buildSchemaErrors(validateSchema, path, errors);
+        return;
+    }
+    if (!isLeafNode(node)) {
+        validateChildNodes(node, [
+            ...path,
+            'content'
+        ], errors);
+    }
+}
+function getValidator(nodeType) {
+    const schema = getSchemaWithNodeType(nodeType);
+    const validate = ajv.compile(schema);
+    const validator = (data)=>{
+        validate(data);
+        validator.errors = removeGrandChildrenMinItemsErrors(validate.errors ?? []);
+        return validator.errors.length === 0;
+    };
+    return validator;
+}
+function buildSchemaErrors(validateSchema, _, errors) {
+    const schemaErrors = validateSchema.errors;
+    const constraintError = schemaErrors.find((e)=>e.keyword === 'enum' || e.keyword === 'anyOf');
+    if (constraintError) {
+        errors.push(constraintError);
+        return;
+    }
+    errors.push(...schemaErrors);
+}
+function resetChildNodes(node) {
+    const { content  } = node;
+    if (isLeafNode(node)) {
+        return node;
+    }
+    return Object.assign({}, node, {
+        content: content.map(resetNode)
+    });
+}
+function resetNode(node) {
+    const { nodeType  } = node;
+    if (helpers.isText(node)) {
+        return {
+            nodeType,
+            data: {},
+            value: '',
+            marks: []
+        };
+    }
+    return {
+        nodeType,
+        data: {},
+        content: []
+    };
+}
+function removeGrandChildNodes(node) {
+    const { content  } = node;
+    if (isLeafNode(node)) {
+        return node;
+    }
+    return Object.assign({}, node, {
+        content: content.map(removeChildNodes)
+    });
+}
+function removeChildNodes(node) {
+    if (helpers.isText(node)) {
+        return node;
+    }
+    return Object.assign({}, node, {
+        content: []
+    });
+}
+function isLeafNode(node) {
+    return helpers.isText(node) || !Array.isArray(node.content);
+}
+function removeGrandChildrenMinItemsErrors(errors) {
+    return errors.filter((error)=>{
+        const level = error.instancePath.split('/').length;
+        return !(level > 3 && error.keyword === 'minItems');
+    });
+}

package/dist/esm/useOnValueChanged.js

@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from 'react';
+import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
+import { getPlateSelectors } from '@udecode/plate-core';
+import debounce from 'lodash/debounce';
+import schema from './constants/Schema';
+import { removeInternalMarks } from './helpers/removeInternalMarks';
+const isRelevantOperation = (op)=>{
+    if (op.type === 'set_selection') {
+        return false;
+    }
+    return true;
+};
+export const useOnValueChanged = ({ editorId , handler , skip , onSkip  })=>{
+    const onChange = useMemo(()=>debounce((document)=>{
+            const contentfulDocument = toContentfulDocument({
+                document: document,
+                schema
+            });
+            const cleanedDocument = removeInternalMarks(contentfulDocument);
+            handler?.(cleanedDocument);
+        }, 500), [
+        handler
+    ]);
+    return useCallback((value)=>{
+        const editor = getPlateSelectors(editorId).editor();
+        if (!editor) {
+            throw new Error('Editor change callback called but editor not defined. Editor id: ' + editorId);
+        }
+        const operations = editor?.operations.filter(isRelevantOperation);
+        if (operations.length > 0) {
+            if (skip) {
+                onSkip?.();
+                return;
+            }
+            onChange(value);
+        }
+    }, [
+        editorId,
+        onChange,
+        skip,
+        onSkip
+    ]);
+};

package/dist/{ContentfulEditorProvider.d.ts → types/ContentfulEditorProvider.d.ts}

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { FieldExtensionSDK } from '@contentful/app-sdk';
-import { PlateEditor } from './internal/types';
-export declare function getContentfulEditorId(sdk: FieldExtensionSDK): string;
-export declare const editorContext: import("react").Context<string>;
-export declare const ContentfulEditorIdProvider: import("react").Provider<string>;
-export declare function useContentfulEditorId(id?: string): string;
-export declare function useContentfulEditor(id?: string): PlateEditor | null;
-export declare function useContentfulEditorRef(id?: string): PlateEditor | null;
+/// <reference types="react" />
+import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { PlateEditor } from './internal/types';
+export declare function getContentfulEditorId(sdk: FieldExtensionSDK): string;
+export declare const editorContext: import("react").Context<string>;
+export declare const ContentfulEditorIdProvider: import("react").Provider<string>;
+export declare function useContentfulEditorId(id?: string): string;
+export declare function useContentfulEditor(id?: string): PlateEditor | null;
+export declare function useContentfulEditorRef(id?: string): PlateEditor | null;

package/dist/{RichTextEditor.d.ts → types/RichTextEditor.d.ts}

@@ -1,20 +1,21 @@
-import { FieldExtensionSDK } from '@contentful/app-sdk';
-import * as Contentful from '@contentful/rich-text-types';
-import { RichTextTrackingActionHandler } from './plugins/Tracking';
-declare type ConnectedProps = {
-    sdk: FieldExtensionSDK;
-    onAction?: RichTextTrackingActionHandler;
-    minHeight?: string | number;
-    value?: object;
-    isDisabled?: boolean;
-    onChange?: (doc: Contentful.Document) => unknown;
-    isToolbarHidden?: boolean;
-    actionsDisabled?: boolean;
-    restrictedMarks?: string[];
-};
-export declare const ConnectedRichTextEditor: (props: ConnectedProps) => JSX.Element;
-declare type Props = ConnectedProps & {
-    isInitiallyDisabled: boolean;
-};
-declare const RichTextEditor: (props: Props) => JSX.Element;
-export default RichTextEditor;
+import React from 'react';
+import { FieldExtensionSDK } from '@contentful/app-sdk';
+import * as Contentful from '@contentful/rich-text-types';
+import { RichTextTrackingActionHandler } from './plugins/Tracking';
+type ConnectedProps = {
+    sdk: FieldExtensionSDK;
+    onAction?: RichTextTrackingActionHandler;
+    minHeight?: string | number;
+    value?: object;
+    isDisabled?: boolean;
+    onChange?: (doc: Contentful.Document) => unknown;
+    isToolbarHidden?: boolean;
+    actionsDisabled?: boolean;
+    restrictedMarks?: string[];
+};
+export declare const ConnectedRichTextEditor: (props: ConnectedProps) => React.JSX.Element;
+type Props = ConnectedProps & {
+    isInitiallyDisabled: boolean;
+};
+declare const RichTextEditor: (props: Props) => React.JSX.Element;
+export default RichTextEditor;

package/dist/{RichTextEditor.styles.d.ts → types/RichTextEditor.styles.d.ts}

@@ -1,7 +1,7 @@
-export declare const styles: {
-    root: string;
-    editor: string;
-    hiddenToolbar: string;
-    enabled: string;
-    disabled: string;
-};
+export declare const styles: {
+    root: string;
+    editor: string;
+    hiddenToolbar: string;
+    enabled: string;
+    disabled: string;
+};

package/dist/{SdkProvider.d.ts → types/SdkProvider.d.ts}

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { FieldExtensionSDK } from '@contentful/app-sdk';
-interface SdkProviderProps {
-    sdk: FieldExtensionSDK;
-}
-export declare const SdkProvider: React.FC<SdkProviderProps>, useSdkContext: () => FieldExtensionSDK;
-export {};
+import * as React from 'react';
+import { FieldExtensionSDK } from '@contentful/app-sdk';
+interface SdkProviderProps {
+    sdk: FieldExtensionSDK;
+}
+export declare const SdkProvider: React.FC<SdkProviderProps>, useSdkContext: () => import("@contentful/app-sdk").FieldAppSDK;
+export {};

package/dist/types/Toolbar/_tests_/toolbar.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/{Toolbar → types/Toolbar}/components/EmbedEntityWidget.d.ts

@@ -1,5 +1,6 @@
-export interface EmbedEntityWidgetProps {
-    isDisabled?: boolean;
-    canInsertBlocks?: boolean;
-}
-export declare const EmbedEntityWidget: ({ isDisabled, canInsertBlocks }: EmbedEntityWidgetProps) => JSX.Element | null;
+import React from 'react';
+export interface EmbedEntityWidgetProps {
+    isDisabled?: boolean;
+    canInsertBlocks?: boolean;
+}
+export declare const EmbedEntityWidget: ({ isDisabled, canInsertBlocks }: EmbedEntityWidgetProps) => React.JSX.Element | null;

package/dist/{Toolbar → types/Toolbar}/components/EmbeddedEntityDropdownButton.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-export interface EmbeddedEntityDropdownButtonProps {
-    children: React.ReactNode;
-    isDisabled: boolean | undefined;
-    isOpen: boolean;
-    onClose: () => void;
-    onToggle: () => void;
-}
-export declare function EmbeddedEntityDropdownButton({ children, isDisabled, isOpen, onClose, onToggle, }: EmbeddedEntityDropdownButtonProps): JSX.Element;
+import * as React from 'react';
+export interface EmbeddedEntityDropdownButtonProps {
+    children: React.ReactNode;
+    isDisabled: boolean | undefined;
+    isOpen: boolean;
+    onClose: () => void;
+    onToggle: () => void;
+}
+export declare function EmbeddedEntityDropdownButton({ children, isDisabled, isOpen, onClose, onToggle, }: EmbeddedEntityDropdownButtonProps): React.JSX.Element;

package/dist/{Toolbar → types/Toolbar}/components/StickyToolbarWrapper.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
-declare type StickyToolbarProps = {
-    isDisabled?: boolean;
-    children: ReactNode;
-};
-declare const StickyToolbarWrapper: ({ isDisabled, children }: StickyToolbarProps) => JSX.Element;
-export default StickyToolbarWrapper;
+import React, { ReactNode } from 'react';
+type StickyToolbarProps = {
+    isDisabled?: boolean;
+    children: ReactNode;
+};
+declare const StickyToolbarWrapper: ({ isDisabled, children }: StickyToolbarProps) => React.JSX.Element;
+export default StickyToolbarWrapper;

package/dist/types/Toolbar/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type ToolbarProps = {
+    isDisabled?: boolean;
+};
+declare const Toolbar: ({ isDisabled }: ToolbarProps) => React.JSX.Element;
+export default Toolbar;

package/dist/types/__fixtures__/FakeSdk.d.ts

@@ -0,0 +1,8 @@
+import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { Emitter } from 'mitt';
+export type ReferenceEditorSdkProps = {
+    initialValue?: any;
+    validations?: any;
+    fetchDelay?: number;
+};
+export declare function newReferenceEditorFakeSdk(props?: ReferenceEditorSdkProps): [FieldExtensionSDK, Emitter];

package/dist/types/__fixtures__/asset/index.d.ts

@@ -0,0 +1,6 @@
+import changed from './changed_asset.json';
+import created from './created_asset.json';
+import empty from './empty_asset.json';
+import invalid from './invalid_asset.json';
+import published from './published_asset.json';
+export { changed, empty, published, invalid, created };

package/dist/types/__fixtures__/content-type/index.d.ts

@@ -0,0 +1,2 @@
+import published from './published_content_type.json';
+export { published };

package/dist/types/__fixtures__/entry/index.d.ts

@@ -0,0 +1,5 @@
+import changed from './changed_entry.json';
+import empty from './empty_entry.json';
+import invalid from './invalid_entry.json';
+import published from './published_entry.json';
+export { changed, empty, published, invalid };

package/dist/types/__fixtures__/fixtures.d.ts

@@ -0,0 +1,6 @@
+import * as assets from './asset';
+import * as contentTypes from './content-type';
+import * as entries from './entry';
+import * as locales from './locale';
+import * as spaces from './space';
+export { assets, contentTypes, entries, locales, spaces };