@contentful/field-editor-rich-text 3.4.21 → 3.5.0

package/dist/esm/helpers/__tests__/extractNodes.test.js

@@ -0,0 +1,295 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { createEditor as createSlateEditor } from '@udecode/plate-test-utils';
+import { extractParagraphs } from '../extractNodes';
+const createEditor = (children)=>createSlateEditor('test-editor', {}, children);
+const buildParagraph = (children = [])=>({
+        type: BLOCKS.PARAGRAPH,
+        data: {},
+        isVoid: false,
+        children: children.map((child)=>({
+                data: {},
+                ...child
+            }))
+    });
+const paragraph = (text = '', marks = {})=>buildParagraph([
+        {
+            text,
+            ...marks
+        }
+    ]);
+const buildList = (type = BLOCKS.UL_LIST, secondType = BLOCKS.UL_LIST)=>({
+        data: {},
+        isVoid: false,
+        type,
+        children: [
+            {
+                data: {},
+                isVoid: false,
+                type: BLOCKS.LIST_ITEM,
+                children: [
+                    {
+                        type: secondType,
+                        isVoid: false,
+                        data: {},
+                        children: [
+                            {
+                                data: {},
+                                isVoid: false,
+                                type: BLOCKS.LIST_ITEM,
+                                children: [
+                                    paragraph('text 1')
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                data: {},
+                isVoid: false,
+                type: BLOCKS.LIST_ITEM,
+                children: [
+                    paragraph('text 2')
+                ]
+            },
+            {
+                data: {},
+                isVoid: false,
+                type: BLOCKS.LIST_ITEM,
+                children: [
+                    paragraph('text 3')
+                ]
+            }
+        ]
+    });
+describe('extractParagraphs', ()=>{
+    it('table', ()=>{
+        const table = {
+            data: {},
+            isVoid: false,
+            type: BLOCKS.TABLE,
+            children: [
+                {
+                    type: BLOCKS.TABLE_ROW,
+                    data: {},
+                    isVoid: false,
+                    children: [
+                        {
+                            type: BLOCKS.TABLE_HEADER_CELL,
+                            data: {},
+                            isVoid: false,
+                            children: [
+                                paragraph('header 1')
+                            ]
+                        },
+                        {
+                            type: BLOCKS.TABLE_HEADER_CELL,
+                            data: {},
+                            isVoid: false,
+                            children: [
+                                paragraph('header 2')
+                            ]
+                        }
+                    ]
+                },
+                {
+                    type: BLOCKS.TABLE_ROW,
+                    data: {},
+                    isVoid: false,
+                    children: [
+                        {
+                            type: BLOCKS.TABLE_CELL,
+                            data: {},
+                            isVoid: false,
+                            children: [
+                                paragraph('cell 1')
+                            ]
+                        },
+                        {
+                            type: BLOCKS.TABLE_CELL,
+                            data: {},
+                            isVoid: false,
+                            children: [
+                                paragraph('cell 2')
+                            ]
+                        }
+                    ]
+                }
+            ]
+        };
+        const editor = createEditor([
+            table
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraph('header 1'),
+            paragraph('header 2'),
+            paragraph('cell 1'),
+            paragraph('cell 2')
+        ]);
+    });
+    it('blockquote', ()=>{
+        const blockquote = {
+            data: {},
+            isVoid: false,
+            type: BLOCKS.QUOTE,
+            children: [
+                paragraph('text 1'),
+                paragraph('text 2')
+            ]
+        };
+        const editor = createEditor([
+            blockquote
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraph('text 1'),
+            paragraph('text 2')
+        ]);
+    });
+    it('list - UL', ()=>{
+        const ul = buildList(BLOCKS.UL_LIST, BLOCKS.OL_LIST);
+        const editor = createEditor([
+            ul
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraph('text 1'),
+            paragraph('text 2'),
+            paragraph('text 3')
+        ]);
+    });
+    it('list - OL', ()=>{
+        const ol = buildList(BLOCKS.OL_LIST, BLOCKS.UL_LIST);
+        const editor = createEditor([
+            ol
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraph('text 1'),
+            paragraph('text 2'),
+            paragraph('text 3')
+        ]);
+    });
+    it('should preserve marks', ()=>{
+        const element = {
+            data: {},
+            isVoid: false,
+            type: BLOCKS.QUOTE,
+            children: [
+                paragraph('text 1', {
+                    bold: true,
+                    italic: true
+                }),
+                paragraph('text 2', {
+                    underline: true,
+                    code: true
+                })
+            ]
+        };
+        const editor = createEditor([
+            element
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraph('text 1', {
+                bold: true,
+                italic: true
+            }),
+            paragraph('text 2', {
+                underline: true,
+                code: true
+            })
+        ]);
+    });
+    it('should preserve hyperlinks', ()=>{
+        const paragraphWithLink = buildParagraph([
+            {
+                text: 'text 1 '
+            },
+            {
+                type: INLINES.HYPERLINK,
+                children: [
+                    {
+                        text: 'with link'
+                    }
+                ],
+                data: {
+                    uri: 'https://link.com'
+                }
+            }
+        ]);
+        const element = {
+            data: {},
+            isVoid: false,
+            type: BLOCKS.QUOTE,
+            children: [
+                paragraphWithLink,
+                paragraph('text 2')
+            ]
+        };
+        const editor = createEditor([
+            element
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraphWithLink,
+            paragraph('text 2')
+        ]);
+    });
+    it('should preserve embedded inline entries', ()=>{
+        const paragraphWithEmbedded = buildParagraph([
+            {
+                text: 'text 1 '
+            },
+            {
+                type: INLINES.EMBEDDED_ENTRY,
+                children: [
+                    {
+                        text: ''
+                    }
+                ],
+                data: {
+                    target: {
+                        sys: {
+                            id: 'inline-id',
+                            linkType: 'Entry',
+                            type: 'Link'
+                        }
+                    }
+                }
+            }
+        ]);
+        const element = {
+            data: {},
+            isVoid: false,
+            type: BLOCKS.QUOTE,
+            children: [
+                paragraphWithEmbedded,
+                paragraph('text 2')
+            ]
+        };
+        const editor = createEditor([
+            element
+        ]);
+        const path = [
+            0
+        ];
+        expect(extractParagraphs(editor, path)).toEqual([
+            paragraphWithEmbedded,
+            paragraph('text 2')
+        ]);
+    });
+});

package/dist/esm/helpers/__tests__/removeInternalMarks.test.js

@@ -0,0 +1,48 @@
+import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
+import { COMMAND_PROMPT } from '../../plugins/CommandPalette/constants';
+import { jsx } from '../../test-utils';
+import { removeInternalMarks } from '../removeInternalMarks';
+describe('internal mark', ()=>{
+    describe('First level nodes', ()=>{
+        const data = [
+            {
+                title: 'Paragraph mark is removed',
+                input: toContentfulDocument(jsx("editor", null, jsx("hp", null, jsx("htext", {
+                    [COMMAND_PROMPT]: true
+                }))).children),
+                expected: toContentfulDocument(jsx("editor", null, jsx("hp", null, jsx("htext", null))).children)
+            },
+            {
+                title: 'Heading mark is removed',
+                input: toContentfulDocument(jsx("editor", null, jsx("hh1", null, jsx("htext", {
+                    [COMMAND_PROMPT]: true
+                }))).children),
+                expected: toContentfulDocument(jsx("editor", null, jsx("hh1", null, jsx("htext", null))).children)
+            },
+            {
+                title: 'Block quote mark is removed',
+                input: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                    [COMMAND_PROMPT]: true
+                })))).children),
+                expected: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", null)))).children)
+            },
+            {
+                title: 'Other marks are not removed',
+                input: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                    bold: true,
+                    underline: true,
+                    [COMMAND_PROMPT]: true
+                })))).children),
+                expected: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                    bold: true,
+                    underline: true
+                })))).children)
+            }
+        ];
+        for (const { input , expected , title  } of data){
+            it(`${title}`, ()=>{
+                expect(removeInternalMarks(input)).toEqual(expected);
+            });
+        }
+    });
+});

package/dist/esm/helpers/__tests__/validations.test.js

@@ -0,0 +1,45 @@
+import { createFakeFieldAPI } from '@contentful/field-editor-test-utils';
+import { MARKS } from '@contentful/rich-text-types';
+import { isMarkEnabled } from '../validations';
+describe('validations', ()=>{
+    describe('isMarkEnabled', ()=>{
+        [
+            MARKS.BOLD,
+            MARKS.CODE,
+            MARKS.ITALIC,
+            MARKS.UNDERLINE
+        ].forEach((mark)=>{
+            it(`returns true for ${mark} mark when no validation explicity set`, ()=>{
+                const [field] = createFakeFieldAPI();
+                const actual = isMarkEnabled(field, mark);
+                expect(actual).toBe(true);
+            });
+            it(`returns false for ${mark} mark when validation explicity set without it`, ()=>{
+                const [field] = createFakeFieldAPI((field)=>{
+                    field.validations = [
+                        {
+                            enabledMarks: Object.values(MARKS).filter((markDefintion)=>markDefintion !== mark)
+                        }
+                    ];
+                    return field;
+                });
+                const actual = isMarkEnabled(field, mark);
+                expect(actual).toBe(false);
+            });
+            it(`returns true for ${mark} mark when validation explicity set with it`, ()=>{
+                const [field] = createFakeFieldAPI((field)=>{
+                    field.validations = [
+                        {
+                            enabledMarks: [
+                                mark
+                            ]
+                        }
+                    ];
+                    return field;
+                });
+                const actual = isMarkEnabled(field, mark);
+                expect(actual).toBe(true);
+            });
+        });
+    });
+});

package/dist/esm/helpers/editor.js

@@ -0,0 +1,198 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { focusEditor } from '../internal/misc';
+import { getText, getNodeEntries, getNodeEntry, getNodeDescendants, isText, isRangeCollapsed as isSelectionCollapsed, isEditor, isElement, getPathLevels, isCommonPath } from '../internal/queries';
+import { setNodes, select, insertNodes, toggleNodeType, moveSelection, unwrapNodes, insertText, wrapNodes, deleteText, collapseSelection } from '../internal/transforms';
+import { IS_SAFARI } from './environment';
+export const LINK_TYPES = [
+    INLINES.HYPERLINK,
+    INLINES.ENTRY_HYPERLINK,
+    INLINES.ASSET_HYPERLINK
+];
+const LIST_TYPES = [
+    BLOCKS.OL_LIST,
+    BLOCKS.UL_LIST
+];
+export function isBlockSelected(editor, type) {
+    const [match] = Array.from(getNodeEntries(editor, {
+        match: (node)=>isElement(node) && node.type === type
+    }));
+    return !!match;
+}
+export function isRootLevel(path) {
+    return path.length === 1;
+}
+export function getNodeEntryFromSelection(editor, nodeTypeOrTypes, path) {
+    path = path ?? editor.selection?.focus.path;
+    if (!path) return [];
+    const nodeTypes = Array.isArray(nodeTypeOrTypes) ? nodeTypeOrTypes : [
+        nodeTypeOrTypes
+    ];
+    for(let i = 0; i < path.length; i++){
+        const nodeEntry = getNodeEntry(editor, path.slice(0, i + 1));
+        if (nodeTypes.includes(nodeEntry[0].type)) return nodeEntry;
+    }
+    return [];
+}
+export function isNodeTypeSelected(editor, nodeType) {
+    if (!editor) return false;
+    const [node] = getNodeEntryFromSelection(editor, nodeType);
+    return !!node;
+}
+export function moveToTheNextLine(editor) {
+    moveSelection(editor, {
+        distance: 1,
+        unit: 'line'
+    });
+}
+export function moveToTheNextChar(editor) {
+    moveSelection(editor, {
+        distance: 1,
+        unit: 'offset'
+    });
+}
+export function insertEmptyParagraph(editor, options) {
+    const emptyParagraph = {
+        type: BLOCKS.PARAGRAPH,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {},
+        isVoid: false
+    };
+    insertNodes(editor, emptyParagraph, options);
+}
+export function getElementFromCurrentSelection(editor) {
+    if (!editor.selection) return [];
+    return Array.from(getNodeEntries(editor, {
+        at: editor.selection,
+        match: (node)=>isElement(node)
+    })).flat();
+}
+export function isList(editor) {
+    if (!editor) {
+        return false;
+    }
+    const element = getElementFromCurrentSelection(editor);
+    return element.some((element)=>isElement(element) && LIST_TYPES.includes(element.type));
+}
+export function getTableSize(table) {
+    const numRows = table.children.length;
+    if (!numRows) return null;
+    const [firstRow] = table.children;
+    const numColumns = firstRow.children?.length;
+    return {
+        numRows,
+        numColumns
+    };
+}
+export function insertLink(editor, options) {
+    if (editor.selection) {
+        wrapLink(editor, options);
+    }
+}
+export function isLinkActive(editor) {
+    if (!editor) {
+        return false;
+    }
+    const [link] = Array.from(getNodeEntries(editor, {
+        match: (node)=>!isEditor(node) && isElement(node) && LINK_TYPES.includes(node.type)
+    }));
+    return !!link;
+}
+export function unwrapLink(editor) {
+    unwrapNodes(editor, {
+        match: (node)=>!isEditor(node) && isElement(node) && LINK_TYPES.includes(node.type)
+    });
+}
+export function wrapLink(editor, { text , url , target , type , path  }) {
+    if (isLinkActive(editor) && !path) {
+        unwrapLink(editor);
+    }
+    const { selection  } = editor;
+    const isCollapsed = selection && isSelectionCollapsed(selection);
+    const link = {
+        type,
+        data: {},
+        children: isCollapsed ? [
+            {
+                text
+            }
+        ] : []
+    };
+    if (url) {
+        link.data = {
+            uri: url
+        };
+    }
+    if (target) {
+        link.data = {
+            target
+        };
+    }
+    if (path) {
+        setNodes(editor, link, {
+            at: path
+        });
+        insertText(editor, text, {
+            at: path
+        });
+        select(editor, path);
+    } else if (isCollapsed) {
+        insertNodes(editor, link);
+    } else {
+        wrapNodes(editor, link, {
+            split: true
+        });
+        deleteText(editor);
+        insertText(editor, text);
+        collapseSelection(editor, {
+            edge: 'end'
+        });
+    }
+}
+export function getAncestorPathFromSelection(editor) {
+    if (!editor.selection) return undefined;
+    return getPathLevels(editor.selection.focus.path).find((level)=>level.length === 1);
+}
+export const isAtEndOfTextSelection = (editor)=>editor.selection?.focus.offset === getText(editor, editor.selection?.focus.path).length;
+export function getNextNode(editor) {
+    if (!editor.selection) {
+        return null;
+    }
+    const descendants = getNodeDescendants(editor, {
+        from: editor.selection.focus.path
+    });
+    while(true){
+        const { done , value  } = descendants.next();
+        if (done) {
+            return null;
+        }
+        const [node, path] = value;
+        if (isCommonPath(path, editor.selection.focus.path)) {
+            continue;
+        }
+        return node;
+    }
+}
+export const INLINE_TYPES = Object.values(INLINES);
+export const isInlineOrText = (node)=>{
+    return isText(node) || isElement(node) && INLINE_TYPES.includes(node.type);
+};
+export const focus = (editor)=>{
+    const x = window.scrollX;
+    const y = window.scrollY;
+    focusEditor(editor);
+    if (IS_SAFARI) {
+        setTimeout(function() {
+            window.scrollTo(x, y);
+        }, 0);
+    }
+};
+export function toggleElement(editor, options, editorOptions) {
+    toggleNodeType(editor, options, editorOptions);
+    setNodes(editor, {
+        data: {}
+    });
+}

package/dist/esm/helpers/environment.js

@@ -0,0 +1,2 @@
+export const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
+export const IS_CHROME = /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);

package/dist/esm/helpers/extractNodes.js

@@ -0,0 +1,17 @@
+import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
+import { getNodeEntries } from '../internal/queries';
+function extractNodes(editor, path, match) {
+    return Array.from(getNodeEntries(editor, {
+        match,
+        at: path,
+        mode: 'lowest'
+    })).map(([node])=>node);
+}
+export function extractParagraphs(editor, path) {
+    return extractNodes(editor, path, {
+        type: TEXT_CONTAINERS
+    }).map((node)=>({
+            ...node,
+            type: BLOCKS.PARAGRAPH
+        }));
+}

package/dist/esm/helpers/formatDateAndTime.js

@@ -0,0 +1,19 @@
+import moment from 'moment';
+export const formatDate = (date, short)=>{
+    switch(moment().startOf('day').diff(moment(date).startOf('day'), 'days')){
+        case 0:
+            return short ? 'Today' : `Today, ${moment(date).format('DD MMM YYYY')}`;
+        case -1:
+            return short ? 'Tomorrow' : `Tomorrow, ${moment(date).format('DD MMM YYYY')}`;
+        case 1:
+            return short ? 'Yesterday' : `Yesterday, ${moment(date).format('DD MMM YYYY')}`;
+        default:
+            return moment(date).format('ddd, DD MMM YYYY');
+    }
+};
+export const formatTime = (date)=>{
+    return moment.utc(date).local().format('h:mm A');
+};
+export const formatDateAndTime = (date, short)=>{
+    return `${formatDate(date, short)} at ${formatTime(date)}`;
+};

package/dist/esm/helpers/getLinkedContentTypeIdsForNodeType.js

@@ -0,0 +1,9 @@
+import find from 'lodash/find';
+import flow from 'lodash/flow';
+import get from 'lodash/get';
+export default function getLinkedContentTypeIdsForNodeType(field, nodeType) {
+    return flow((v)=>find(v, 'nodes'), (v)=>get(v, [
+            'nodes',
+            nodeType
+        ]), (v)=>find(v, 'linkContentType'), (v)=>get(v, 'linkContentType', []))(field.validations);
+}

package/dist/esm/helpers/newEntitySelectorConfigFromRichTextField.js

@@ -0,0 +1,18 @@
+import getLinkedContentTypeIdsForNodeType from './getLinkedContentTypeIdsForNodeType';
+export default function newEntitySelectorConfigFromRichTextField(field, nodeType) {
+    return {
+        entityType: getEntityTypeFromRichTextNode(nodeType),
+        locale: field.locale || null,
+        contentTypes: getLinkedContentTypeIdsForNodeType(field, nodeType)
+    };
+}
+function getEntityTypeFromRichTextNode(nodeType) {
+    const words = nodeType.split('-');
+    if (words.indexOf('entry') !== -1) {
+        return 'Entry';
+    }
+    if (words.indexOf('asset') !== -1) {
+        return 'Asset';
+    }
+    throw new Error(`RichText node type \`${nodeType}\` has no associated \`entityType\``);
+}

package/dist/esm/helpers/nodeFactory.js

@@ -0,0 +1,24 @@
+export const document = (...content)=>({
+        nodeType: 'document',
+        content,
+        data: {}
+    });
+export const block = (nodeType, data, ...content)=>({
+        nodeType,
+        content,
+        data
+    });
+export const inline = (nodeType, data, ...content)=>({
+        nodeType,
+        content,
+        data
+    });
+export const text = (value = '', marks = [])=>({
+        nodeType: 'text',
+        value,
+        marks,
+        data: {}
+    });
+export const mark = (type)=>({
+        type
+    });

package/dist/esm/helpers/removeInternalMarks.js

@@ -0,0 +1,16 @@
+import { COMMAND_PROMPT } from '../plugins/CommandPalette/constants';
+const internalMarks = [
+    COMMAND_PROMPT
+];
+export const removeInternalMarks = (document)=>{
+    return {
+        ...document,
+        content: document.content.map((node)=>{
+            if (node.nodeType === 'text') {
+                node.marks = node.marks.filter((mark)=>!internalMarks.includes(mark.type));
+                return node;
+            }
+            return removeInternalMarks(node);
+        })
+    };
+};