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

package/dist/esm/helpers/sanitizeIncomingSlateDoc.js

@@ -0,0 +1,23 @@
+const isTextElement = (node)=>'text' in node;
+export function sanitizeIncomingSlateDoc(nodes = []) {
+    return nodes.map((node)=>{
+        if (isTextElement(node)) {
+            return node;
+        }
+        if (node.children?.length === 0) {
+            return {
+                ...node,
+                children: [
+                    {
+                        text: '',
+                        data: {}
+                    }
+                ]
+            };
+        }
+        return {
+            ...node,
+            children: sanitizeIncomingSlateDoc(node?.children)
+        };
+    });
+}

package/dist/esm/helpers/sdkNavigatorSlideIn.js

@@ -0,0 +1,42 @@
+import noop from 'lodash/noop';
+export function watchCurrentSlide(navigator) {
+    const onActiveCallbacks = new Set();
+    let wasSlideClosed = false;
+    let initialSlideLevel;
+    let lastSlideLevel;
+    const status = ()=>({
+            wasClosed: wasSlideClosed,
+            isActive: !wasSlideClosed && lastSlideLevel === initialSlideLevel
+        });
+    const off = navigator.onSlideInNavigation(({ oldSlideLevel , newSlideLevel  })=>{
+        if (initialSlideLevel === undefined) {
+            initialSlideLevel = oldSlideLevel;
+        }
+        lastSlideLevel = newSlideLevel;
+        if (newSlideLevel < initialSlideLevel) {
+            wasSlideClosed = true;
+            off();
+            onActiveCallbacks.clear();
+        }
+        if (status().isActive && newSlideLevel !== oldSlideLevel) {
+            onActiveCallbacks.forEach((cb)=>cb());
+        }
+    });
+    function unwatch() {
+        off();
+        onActiveCallbacks.clear();
+    }
+    function onActive(cb) {
+        if (wasSlideClosed) return noop;
+        if (status().isActive) {
+            cb();
+        }
+        onActiveCallbacks.add(cb);
+        return ()=>onActiveCallbacks.delete(cb);
+    }
+    return {
+        status,
+        onActive,
+        unwatch
+    };
+}

package/dist/esm/helpers/sdkNavigatorSlideIn.spec.js

@@ -0,0 +1,200 @@
+import cloneDeep from 'lodash/cloneDeep';
+import mitt from 'mitt';
+import { watchCurrentSlide } from './sdkNavigatorSlideIn';
+function createFakeNavigatorAPI() {
+    const localEmitter = mitt();
+    const navigatorEmitter = {
+        slideIn: (slide)=>localEmitter.emit('onSlideInNavigation', slide)
+    };
+    const api = {
+        openNewAsset: async ()=>({
+                navigated: false
+            }),
+        openAsset: async ()=>({
+                navigated: false
+            }),
+        openNewEntry: async ()=>({
+                navigated: false
+            }),
+        openEntry: async ()=>({
+                navigated: false
+            }),
+        onSlideInNavigation: (handler)=>{
+            const type = `onSlideInNavigation`;
+            localEmitter.on(type, handler);
+            return ()=>{
+                localEmitter.off(type, handler);
+            };
+        }
+    };
+    return [
+        api,
+        navigatorEmitter
+    ];
+}
+describe('watchCurrentSlide().info()', ()=>{
+    let fake, slide;
+    beforeEach(()=>{
+        const fakeNavigator = createFakeNavigatorAPI();
+        const api = fakeNavigator[0];
+        fake = fakeNavigator[1];
+        slide = watchCurrentSlide(api);
+    });
+    it('considers current slide active initially', ()=>{
+        expect(slide.status()).toEqual({
+            wasClosed: false,
+            isActive: true
+        });
+    });
+    it('no longer considers slide active after another slide opens', ()=>{
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 1
+        });
+        expect(slide.status()).toEqual({
+            wasClosed: false,
+            isActive: false
+        });
+    });
+    it('considers the original slide active after opening and closing another slide', ()=>{
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 1
+        });
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        expect(slide.status()).toEqual({
+            wasClosed: false,
+            isActive: true
+        });
+    });
+    it('considers slide closed after jumping to slide below', ()=>{
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        expect(slide.status()).toEqual({
+            wasClosed: true,
+            isActive: false
+        });
+    });
+    it('still considers slide closed after jumping to slide below and opening a new one', ()=>{
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 1
+        });
+        expect(slide.status()).toEqual({
+            wasClosed: true,
+            isActive: false
+        });
+    });
+    it('considers slide closed after opening new slide and then jumping to slide below', ()=>{
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 2
+        });
+        fake.slideIn({
+            oldSlideLevel: 2,
+            newSlideLevel: 0
+        });
+        expect(slide.status()).toEqual({
+            wasClosed: true,
+            isActive: false
+        });
+    });
+});
+describe('watchCurrentSlide().onActive()', ()=>{
+    let api, fake, spy;
+    beforeEach(()=>{
+        const fakeNavigator = createFakeNavigatorAPI();
+        api = fakeNavigator[0];
+        fake = fakeNavigator[1];
+        spy = jest.fn();
+    });
+    it('fires initially if there was no slide event', ()=>{
+        const slide = watchCurrentSlide(api);
+        slide.onActive(spy);
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('does not fire initially, if new slide already opened, but fires after slide gets closed again', ()=>{
+        const slide = watchCurrentSlide(api);
+        fake.slideIn({
+            oldSlideLevel: 2,
+            newSlideLevel: 3
+        });
+        slide.onActive(spy);
+        expect(spy).toHaveBeenCalledTimes(0);
+        fake.slideIn({
+            oldSlideLevel: 3,
+            newSlideLevel: 2
+        });
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('fires every time slide becomes active again', ()=>{
+        const slide = watchCurrentSlide(api);
+        slide.onActive(spy);
+        expect(spy).toHaveBeenCalledTimes(1);
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 1
+        });
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        expect(spy).toHaveBeenCalledTimes(2);
+    });
+    it('does not fire on a slide-in event for the same slide we are already on', ()=>{
+        const slide = watchCurrentSlide(api);
+        slide.onActive(spy);
+        expect(spy).toHaveBeenCalledTimes(1);
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 0
+        });
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+});
+describe('watchCurrentSlide().unwatch()', ()=>{
+    let api, fake;
+    beforeEach(()=>{
+        const fakeNavigator = createFakeNavigatorAPI();
+        api = fakeNavigator[0];
+        fake = fakeNavigator[1];
+    });
+    it('does not update .info() after .unwatch()', ()=>{
+        const slide = watchCurrentSlide(api);
+        const lastStatus = cloneDeep(slide.status());
+        slide.unwatch();
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        expect(lastStatus).toEqual(slide.status());
+    });
+    it('does not fire outstanding onActive after unwatch()', ()=>{
+        const slide = watchCurrentSlide(api);
+        const slide2 = watchCurrentSlide(api);
+        const spy = jest.fn();
+        const spy2 = jest.fn();
+        fake.slideIn({
+            oldSlideLevel: 0,
+            newSlideLevel: 1
+        });
+        slide.onActive(spy);
+        slide2.onActive(spy2);
+        slide.unwatch();
+        fake.slideIn({
+            oldSlideLevel: 1,
+            newSlideLevel: 0
+        });
+        expect(spy).toHaveBeenCalledTimes(0);
+        expect(spy2).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/esm/helpers/transformers.js

@@ -0,0 +1,34 @@
+import { insertNodes, removeNodes, unwrapNodes, wrapNodes, liftNodes } from '../internal/transforms';
+import { extractParagraphs } from './extractNodes';
+export const transformRemove = (editor, [, path])=>{
+    removeNodes(editor, {
+        at: path
+    });
+};
+export const transformParagraphs = (editor, entry)=>{
+    const path = entry[1];
+    const nodes = extractParagraphs(editor, path);
+    transformRemove(editor, entry);
+    insertNodes(editor, nodes, {
+        at: path
+    });
+};
+export const transformUnwrap = (editor, [, path])=>{
+    unwrapNodes(editor, {
+        at: path
+    });
+};
+export const transformWrapIn = (type)=>(editor, [, path])=>{
+        wrapNodes(editor, {
+            type,
+            data: {},
+            children: []
+        }, {
+            at: path
+        });
+    };
+export const transformLift = (editor, [, path])=>{
+    liftNodes(editor, {
+        at: path
+    });
+};

package/dist/esm/helpers/validations.js

@@ -0,0 +1,24 @@
+import { BLOCKS, INLINES, TOP_LEVEL_BLOCKS } from '@contentful/rich-text-types';
+import find from 'lodash/find';
+import flow from 'lodash/flow';
+import get from 'lodash/get';
+export const VALIDATIONS = {
+    ENABLED_MARKS: 'enabledMarks',
+    ENABLED_NODE_TYPES: 'enabledNodeTypes'
+};
+export const DEFAULT_ENABLED_NODE_TYPES = [
+    BLOCKS.DOCUMENT,
+    BLOCKS.PARAGRAPH,
+    'text'
+];
+export const VALIDATABLE_NODE_TYPES = [].concat(TOP_LEVEL_BLOCKS).filter((type)=>type !== BLOCKS.PARAGRAPH).concat(Object.values(INLINES));
+const getRichTextValidation = (field, validationType)=>flow((v)=>find(v, validationType), (v)=>get(v, validationType))(field.validations);
+const isFormattingOptionEnabled = (field, validationType, nodeTypeOrMark)=>{
+    const enabledFormattings = getRichTextValidation(field, validationType);
+    if (enabledFormattings === undefined) {
+        return true;
+    }
+    return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
+};
+export const isNodeTypeEnabled = (field, nodeType)=>isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
+export const isMarkEnabled = (field, mark)=>isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export { default as RichTextEditor } from './RichTextEditor';
+export { ConnectedRichTextEditor } from './RichTextEditor';
+export { openRichTextDialog } from './dialogs/openRichTextDialog';
+export { renderRichTextDialog } from './dialogs/renderRichTextDialog';

package/dist/esm/internal/constants.js

@@ -0,0 +1,2 @@
+import * as p from '@udecode/plate-core';
+export const ELEMENT_DEFAULT = p.ELEMENT_DEFAULT;

package/dist/esm/internal/hooks.js

@@ -0,0 +1,5 @@
+import * as p from '@udecode/plate-core';
+import * as sr from 'slate-react';
+export const useReadOnly = sr.useReadOnly;
+export const usePlateEditorRef = p.usePlateEditorRef;
+export const usePlateEditorState = p.usePlateEditorState;

package/dist/esm/internal/index.js

@@ -0,0 +1,4 @@
+export * from './queries';
+export * from './types';
+export * from './misc';
+export * from './transforms';

package/dist/esm/internal/misc.js

@@ -0,0 +1,28 @@
+import * as p from '@udecode/plate-core';
+export const createPlateEditor = (options = {})=>{
+    return p.createPlateEditor(options);
+};
+export const withoutNormalizing = (editor, fn)=>{
+    return p.withoutNormalizing(editor, fn);
+};
+export const focusEditor = (editor, target)=>{
+    p.focusEditor(editor, target);
+};
+export const blurEditor = (editor)=>{
+    p.blurEditor(editor);
+};
+export const selectEditor = (editor, opts)=>{
+    p.selectEditor(editor, opts);
+};
+export const fromDOMPoint = (editor, domPoint, opts = {
+    exactMatch: false,
+    suppressThrow: false
+})=>{
+    return p.toSlatePoint(editor, domPoint, opts);
+};
+export const mockPlugin = (plugin)=>{
+    return p.mockPlugin(plugin);
+};
+export const getPlateSelectors = (id)=>{
+    return p.getPlateSelectors(id);
+};

package/dist/esm/internal/queries.js

@@ -0,0 +1,182 @@
+import * as p from '@udecode/plate-core';
+import * as s from 'slate';
+export const getText = (editor, at)=>{
+    return p.getEditorString(editor, at);
+};
+export const isText = (value)=>{
+    return p.isText(value);
+};
+export const getEndPoint = (editor, at)=>{
+    return p.getEndPoint(editor, at);
+};
+export const getStartPoint = (editor, at)=>{
+    return p.getStartPoint(editor, at);
+};
+export const isNode = (value)=>{
+    return p.isNode(value);
+};
+export const isSelectionAtBlockEnd = (editor, options)=>{
+    return p.isSelectionAtBlockEnd(editor, options);
+};
+export const isSelectionAtBlockStart = (editor, options)=>{
+    return p.isSelectionAtBlockStart(editor, options);
+};
+export const getBlockAbove = (editor, options)=>{
+    return p.getBlockAbove(editor, options);
+};
+export const getNodeEntry = (editor, at, options)=>{
+    return p.getNodeEntry(editor, at, options);
+};
+export const getNodeEntries = (editor, options)=>{
+    return p.getNodeEntries(editor, options);
+};
+export const getNodeChildren = (root, path, options)=>{
+    return p.getNodeChildren(root, path, options);
+};
+export const getParentNode = (editor, at, options)=>{
+    return p.getParentNode(editor, at, options);
+};
+export const someNode = (editor, options)=>{
+    return p.someNode(editor, options);
+};
+export const getChildren = (entry)=>{
+    if (s.Text.isText(entry[0])) {
+        return [];
+    }
+    return p.getChildren(entry);
+};
+export const isFirstChild = (path)=>{
+    return p.isFirstChild(path);
+};
+export const getDescendantNodeByPath = (root, path)=>{
+    return s.Node.get(root, path);
+};
+export const getNodeDescendants = (root, options)=>{
+    return p.getNodeDescendants(root, {
+        ...options,
+        pass: undefined
+    });
+};
+export const isRangeCollapsed = (range)=>{
+    return p.isCollapsed(range);
+};
+export const isRangeAcrossBlocks = (editor, options)=>{
+    return p.isRangeAcrossBlocks(editor, options);
+};
+export const isRangeExpanded = (range)=>{
+    return p.isExpanded(range);
+};
+export const getRange = (editor, at, to)=>{
+    return p.getRange(editor, at, to);
+};
+export const getRangeEdges = (range)=>{
+    return s.Range.edges(range);
+};
+export const getRangeStart = (range)=>{
+    return s.Range.start(range);
+};
+export const getRangeEnd = (range)=>{
+    return s.Range.end(range);
+};
+export const getAboveNode = (editor, opts)=>{
+    return p.getAboveNode(editor, opts);
+};
+export const getNextNode = (editor, opts)=>{
+    return p.getNextNode(editor, opts);
+};
+export const getCommonNode = (root, path, another)=>{
+    return p.getCommonNode(root, path, another);
+};
+export const getNodeTexts = (root, opts)=>{
+    return p.getNodeTexts(root, opts);
+};
+export const findNode = (editor, options)=>{
+    return p.findNode(editor, options);
+};
+export const isMarkActive = (editor, type)=>{
+    return p.isMarkActive(editor, type);
+};
+export const getMarks = (editor)=>{
+    return p.getMarks(editor);
+};
+export const isEditor = (value)=>{
+    return p.isEditor(value);
+};
+export const isEditorReadOnly = (editor)=>{
+    return p.isEditorReadOnly(editor);
+};
+export const isElement = (value)=>{
+    return p.isElement(value);
+};
+export const isBlockNode = (editor, value)=>{
+    return p.isBlock(editor, value);
+};
+export const findNodePath = (editor, node)=>{
+    return p.findNodePath(editor, node);
+};
+export const isAncestorPath = (path, another)=>{
+    return s.Path.isAncestor(path, another);
+};
+export const isAncestorEmpty = (editor, node)=>{
+    return p.isAncestorEmpty(editor, node);
+};
+export const getParentPath = (path)=>{
+    return s.Path.parent(path);
+};
+export const getNextPath = (path)=>{
+    return s.Path.next(path);
+};
+export const getPreviousPath = (path)=>{
+    return s.Path.previous(path);
+};
+export const getLastChildPath = (nodeEntry)=>{
+    return p.getLastChildPath(nodeEntry);
+};
+export const getPathLevels = (path, options)=>{
+    return s.Path.levels(path, options);
+};
+export const isCommonPath = (path, anotherPath)=>{
+    return s.Path.isCommon(path, anotherPath);
+};
+export const isFirstChildPath = (path)=>{
+    return p.isFirstChild(path);
+};
+export const isLastChildPath = (entry, childPath)=>{
+    return p.isLastChild(entry, childPath);
+};
+export const isChildPath = (path, another)=>{
+    return s.Path.isChild(path, another);
+};
+export const matchNode = (node, path, fn)=>{
+    return p.match(node, path, fn);
+};
+export const someHtmlElement = (rootNode, predicate)=>{
+    return p.someHtmlElement(rootNode, predicate);
+};
+export const getPointBefore = (editor, at, options)=>{
+    return p.getPointBefore(editor, at, options);
+};
+export const getPointAfter = (editor, at, options)=>{
+    return p.getPointAfter(editor, at, options);
+};
+export const isEndPoint = (editor, point, at)=>{
+    return p.isEndPoint(editor, point, at);
+};
+export const isInline = (editor, value)=>{
+    return p.isInline(editor, value);
+};
+export const queryNode = (entry, options)=>{
+    return p.queryNode(entry, options);
+};
+export const getPluginType = (editor, key)=>{
+    return p.getPluginType(editor, key);
+};
+export const createPathRef = (editor, at)=>{
+    return p.createPathRef(editor, at);
+};
+export const match = (obj, path, predicate)=>{
+    return p.match(obj, path, predicate);
+};
+export const getLastNodeByLevel = (editor, level)=>{
+    return p.getLastNodeByLevel(editor, level);
+};

package/dist/esm/internal/transforms.js

@@ -0,0 +1,75 @@
+import * as p from '@udecode/plate-core';
+export const normalize = (editor, options = {
+    force: true
+})=>{
+    return p.normalizeEditor(editor, options);
+};
+export const setSelection = (editor, props)=>{
+    return p.setSelection(editor, props);
+};
+export const select = (editor, location)=>{
+    return p.select(editor, location);
+};
+export const moveSelection = (editor, options)=>{
+    return p.moveSelection(editor, options);
+};
+export const moveChildren = (editor, options)=>{
+    return p.moveChildren(editor, options);
+};
+export const collapseSelection = (editor, options)=>{
+    return p.collapseSelection(editor, options);
+};
+export const setNodes = (editor, attrs, opts)=>{
+    p.setNodes(editor, attrs, opts);
+};
+export const unsetNodes = (editor, props, options)=>{
+    p.unsetNodes(editor, props, options);
+};
+export const insertNodes = (editor, nodes, opts)=>{
+    return p.insertNodes(editor, nodes, opts);
+};
+export const splitNodes = (editor, options)=>{
+    return p.splitNodes(editor, options);
+};
+export const liftNodes = (editor, options)=>{
+    return p.liftNodes(editor, options);
+};
+export const unwrapNodes = (editor, options)=>{
+    return p.unwrapNodes(editor, options);
+};
+export const wrapNodes = (editor, element, options)=>{
+    return p.wrapNodes(editor, element, options);
+};
+export const toggleNodeType = (editor, options, editorOptions)=>{
+    p.toggleNodeType(editor, options, editorOptions);
+};
+export const removeMark = (editor, type, at)=>{
+    p.removeMark(editor, {
+        key: type,
+        at
+    });
+};
+export const unhangRange = (editor, range, options)=>{
+    return p.unhangRange(editor, range, options);
+};
+export const toggleMark = (editor, options)=>{
+    return p.toggleMark(editor, options);
+};
+export const addMark = (editor, type, value = true)=>{
+    p.addMark(editor, type, value);
+};
+export const insertText = (editor, text, options)=>{
+    return p.insertText(editor, text, options);
+};
+export const deleteText = (editor, opts)=>{
+    p.deleteText(editor, opts);
+};
+export const removeNodes = (editor, opts)=>{
+    p.removeNodes(editor, opts);
+};
+export const moveNodes = (editor, opts)=>{
+    p.moveNodes(editor, opts);
+};
+export const deleteFragment = (editor, options)=>{
+    return p.deleteFragment(editor, options);
+};

package/dist/esm/internal/types/editor.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/internal/types/index.js

@@ -0,0 +1,2 @@
+export * from './editor';
+export * from './plugins';

package/dist/esm/internal/types/plugins.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/plugins/Break/createExitBreakPlugin.js

@@ -0,0 +1,16 @@
+import { createExitBreakPlugin as createDefaultExitBreakPlugin } from '@udecode/plate-break';
+export const createExitBreakPlugin = ()=>createDefaultExitBreakPlugin({
+        options: {
+            rules: []
+        },
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.exitBreak || [];
+            });
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

package/dist/esm/plugins/Break/createExitBreakPlugin.test.js

@@ -0,0 +1,32 @@
+import { KEY_EXIT_BREAK } from '@udecode/plate-break';
+import { jsx, createTestEditor, mockPlugin } from '../../test-utils';
+import { createExitBreakPlugin } from './createExitBreakPlugin';
+describe('Exit Break', ()=>{
+    it('derives its config from other plugins', ()=>{
+        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null)));
+        const rules = [
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: 'h1',
+                    end: true,
+                    start: true
+                }
+            }
+        ];
+        const { editor  } = createTestEditor({
+            input,
+            plugins: [
+                mockPlugin({}),
+                mockPlugin({
+                    exitBreak: rules
+                }),
+                createExitBreakPlugin()
+            ]
+        });
+        const outPlugin = editor.pluginsByKey[KEY_EXIT_BREAK];
+        expect(outPlugin.options).toEqual({
+            rules: expect.arrayContaining(rules)
+        });
+    });
+});