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

package/dist/esm/plugins/Marks/Bold.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { FormatBoldIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createBoldPlugin as createDefaultBoldPlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { someHtmlElement } from '../../internal/queries';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+export const ToolbarBoldButton = createMarkToolbarButton({
+    title: 'Bold',
+    mark: MARKS.BOLD,
+    icon: React.createElement(FormatBoldIcon, null)
+});
+const styles = {
+    bold: css({
+        fontWeight: 600
+    })
+};
+export function Bold(props) {
+    return React.createElement("strong", {
+        ...props.attributes,
+        className: styles.bold
+    }, props.children);
+}
+const isGoogleBoldWrapper = (el)=>el.id.startsWith('docs-internal-guid') && el.nodeName === 'B';
+export const createBoldPlugin = ()=>createDefaultBoldPlugin({
+        type: MARKS.BOLD,
+        component: Bold,
+        options: {
+            hotkey: [
+                'mod+b'
+            ]
+        },
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.BOLD)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'STRONG',
+                        'B'
+                    ]
+                },
+                {
+                    validStyle: {
+                        fontWeight: [
+                            '600',
+                            '700',
+                            'bold'
+                        ]
+                    }
+                }
+            ],
+            query: (el)=>{
+                return !isGoogleBoldWrapper(el) && !someHtmlElement(el, (node)=>node.style.fontWeight === 'normal');
+            }
+        }
+    });

package/dist/esm/plugins/Marks/Code.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { CodeIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createCodePlugin as createDefaultCodePlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+export const ToolbarCodeButton = createMarkToolbarButton({
+    title: 'Code',
+    mark: MARKS.CODE,
+    icon: React.createElement(CodeIcon, null)
+});
+export const ToolbarDropdownCodeButton = createMarkToolbarButton({
+    title: 'Code',
+    mark: MARKS.CODE
+});
+const styles = {
+    code: css({
+        fontFamily: 'monospace',
+        fontSize: '.9em'
+    })
+};
+export function Code(props) {
+    return React.createElement("code", {
+        ...props.attributes,
+        className: styles.code
+    }, props.children);
+}
+export const createCodePlugin = ()=>createDefaultCodePlugin({
+        type: MARKS.CODE,
+        component: Code,
+        options: {
+            hotkey: [
+                'mod+/',
+                'mod+shift+7'
+            ]
+        },
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.CODE)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'CODE',
+                        'PRE'
+                    ]
+                },
+                {
+                    validStyle: {
+                        fontFamily: [
+                            'Consolas',
+                            'monospace'
+                        ]
+                    }
+                }
+            ]
+        }
+    });

package/dist/esm/plugins/Marks/Italic.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { FormatItalicIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createItalicPlugin as createDefaultItalicPlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { someHtmlElement } from '../../internal/queries';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+export const ToolbarItalicButton = createMarkToolbarButton({
+    title: 'Italic',
+    mark: MARKS.ITALIC,
+    icon: React.createElement(FormatItalicIcon, null)
+});
+const styles = {
+    italic: css({
+        fontStyle: 'italic'
+    })
+};
+export function Italic(props) {
+    return React.createElement("em", {
+        ...props.attributes,
+        className: styles.italic
+    }, props.children);
+}
+export const createItalicPlugin = ()=>createDefaultItalicPlugin({
+        type: MARKS.ITALIC,
+        component: Italic,
+        options: {
+            hotkey: [
+                'mod+i'
+            ]
+        },
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.ITALIC)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'I',
+                        'EM'
+                    ]
+                },
+                {
+                    validStyle: {
+                        fontStyle: 'italic'
+                    }
+                }
+            ],
+            query: (el)=>{
+                return !someHtmlElement(el, (node)=>node.style.fontStyle === 'normal');
+            }
+        }
+    });

package/dist/esm/plugins/Marks/Subscript.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { SubscriptIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createSubscriptPlugin as createDefaultSubscriptPlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+const styles = {
+    subscript: css({
+        verticalAlign: 'sub',
+        fontSize: 'smaller'
+    })
+};
+export const ToolbarSubscriptButton = createMarkToolbarButton({
+    title: 'Subscript',
+    mark: MARKS.SUBSCRIPT,
+    icon: React.createElement(SubscriptIcon, {
+        viewBox: "0 0 23 18"
+    })
+});
+export const ToolbarDropdownSubscriptButton = createMarkToolbarButton({
+    title: 'Subscript',
+    mark: MARKS.SUBSCRIPT
+});
+export function Subscript(props) {
+    return React.createElement("sub", {
+        ...props.attributes,
+        className: styles.subscript
+    }, props.children);
+}
+export const createSubscriptPlugin = ()=>createDefaultSubscriptPlugin({
+        type: MARKS.SUBSCRIPT,
+        component: Subscript,
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.SUBSCRIPT)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'SUB'
+                    ]
+                }
+            ]
+        }
+    });

package/dist/esm/plugins/Marks/Superscript.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { SuperscriptIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createSuperscriptPlugin as createDefaultSuperscriptPlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+const styles = {
+    superscript: css({
+        verticalAlign: 'super',
+        fontSize: 'smaller'
+    })
+};
+export const ToolbarSuperscriptButton = createMarkToolbarButton({
+    title: 'Superscript',
+    mark: MARKS.SUPERSCRIPT,
+    icon: React.createElement(SuperscriptIcon, null)
+});
+export const ToolbarDropdownSuperscriptButton = createMarkToolbarButton({
+    title: 'Superscript',
+    mark: MARKS.SUPERSCRIPT
+});
+export function Superscript(props) {
+    return React.createElement("sup", {
+        ...props.attributes,
+        className: styles.superscript
+    }, props.children);
+}
+export const createSuperscriptPlugin = ()=>createDefaultSuperscriptPlugin({
+        type: MARKS.SUPERSCRIPT,
+        component: Superscript,
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.SUPERSCRIPT)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'SUP'
+                    ]
+                }
+            ]
+        }
+    });

package/dist/esm/plugins/Marks/Underline.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { FormatUnderlinedIcon } from '@contentful/f36-icons';
+import { MARKS } from '@contentful/rich-text-types';
+import { createUnderlinePlugin as createDefaultUnderlinePlugin } from '@udecode/plate-basic-marks';
+import { someHtmlElement } from '../../internal/queries';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+export const ToolbarUnderlineButton = createMarkToolbarButton({
+    title: 'Underline',
+    mark: MARKS.UNDERLINE,
+    icon: React.createElement(FormatUnderlinedIcon, null)
+});
+export function Underline(props) {
+    return React.createElement("u", props.attributes, props.children);
+}
+export const createUnderlinePlugin = ()=>createDefaultUnderlinePlugin({
+        type: MARKS.UNDERLINE,
+        component: Underline,
+        options: {
+            hotkey: [
+                'mod+u'
+            ]
+        },
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.UNDERLINE)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'U'
+                    ]
+                },
+                {
+                    validStyle: {
+                        textDecoration: [
+                            'underline'
+                        ]
+                    }
+                }
+            ],
+            query: (el)=>{
+                return !someHtmlElement(el, (node)=>node.style.textDecoration === 'none');
+            }
+        }
+    });

package/dist/esm/plugins/Marks/components/MarkToolbarButton.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Menu } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { focus } from '../../../helpers/editor';
+import { isMarkActive } from '../../../internal/queries';
+import { ToolbarButton } from '../../shared/ToolbarButton';
+import { toggleMarkAndDeactivateConflictingMarks } from '../helpers';
+const styles = {
+    isActive: css({
+        backgroundColor: tokens.blue100,
+        color: tokens.blue600
+    })
+};
+export const createMarkToolbarButton = ({ mark , title , icon  })=>{
+    const Mark = ({ isDisabled  })=>{
+        const editor = useContentfulEditor();
+        const handleClick = React.useCallback(()=>{
+            if (!editor?.selection) return;
+            const isActive = isMarkActive(editor, mark);
+            editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
+                markType: mark
+            });
+            toggleMarkAndDeactivateConflictingMarks(editor, mark);
+            focus(editor);
+        }, [
+            editor
+        ]);
+        if (!editor) return null;
+        if (!icon) {
+            return React.createElement(Menu.Item, {
+                onClick: handleClick,
+                disabled: isDisabled,
+                className: cx({
+                    [styles.isActive]: isMarkActive(editor, mark)
+                }),
+                testId: `${mark}-toolbar-button`
+            }, title);
+        }
+        return React.createElement(ToolbarButton, {
+            title: title,
+            testId: `${mark}-toolbar-button`,
+            onClick: handleClick,
+            isActive: isMarkActive(editor, mark),
+            isDisabled: isDisabled
+        }, icon);
+    };
+    Mark.displayName = mark;
+    return Mark;
+};

package/dist/esm/plugins/Marks/helpers.js

@@ -0,0 +1,25 @@
+import { MARKS } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { isMarkActive } from '../../internal/queries';
+import { toggleMark } from '../../internal/transforms';
+export const toggleMarkAndDeactivateConflictingMarks = (editor, mark)=>{
+    const subs = [
+        MARKS.SUPERSCRIPT,
+        MARKS.SUBSCRIPT
+    ];
+    const clear = subs.includes(mark) ? subs : [];
+    toggleMark(editor, {
+        key: mark,
+        clear
+    });
+};
+export const buildMarkEventHandler = (type)=>(editor, { options: { hotkey  }  })=>(event)=>{
+            if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+                event.preventDefault();
+                const isActive = isMarkActive(editor, type);
+                editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+                    markType: type
+                });
+                toggleMarkAndDeactivateConflictingMarks(editor, type);
+            }
+        };

package/dist/esm/plugins/Marks/index.js

@@ -0,0 +1,17 @@
+import { createBoldPlugin } from './Bold';
+import { createCodePlugin } from './Code';
+import { createItalicPlugin } from './Italic';
+import { createSubscriptPlugin } from './Subscript';
+import { createSuperscriptPlugin } from './Superscript';
+import { createUnderlinePlugin } from './Underline';
+export const createMarksPlugin = ()=>({
+        key: 'Marks',
+        plugins: [
+            createBoldPlugin(),
+            createCodePlugin(),
+            createItalicPlugin(),
+            createUnderlinePlugin(),
+            createSuperscriptPlugin(),
+            createSubscriptPlugin()
+        ]
+    });

package/dist/esm/plugins/Normalizer/baseRules.js

@@ -0,0 +1,28 @@
+import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
+import { INLINE_TYPES } from '../../helpers/editor';
+import { transformWrapIn } from '../../helpers/transformers';
+import { getParentNode, isText } from '../../internal/queries';
+const isInline = (node)=>INLINE_TYPES.includes(node.type);
+const isTextContainer = (node)=>TEXT_CONTAINERS.includes(node.type);
+export const baseRules = [
+    {
+        match: isText,
+        validNode: (editor, [, path])=>{
+            const parent = getParentNode(editor, path)?.[0];
+            return !!parent && (isTextContainer(parent) || isInline(parent) || editor.isVoid(parent));
+        },
+        transform: (editor, entry)=>{
+            return transformWrapIn(BLOCKS.PARAGRAPH)(editor, entry);
+        }
+    },
+    {
+        match: {
+            type: INLINE_TYPES
+        },
+        validNode: (editor, [, path])=>{
+            const parent = getParentNode(editor, path)?.[0];
+            return !!parent && isTextContainer(parent);
+        },
+        transform: transformWrapIn(BLOCKS.PARAGRAPH)
+    }
+];

package/dist/esm/plugins/Normalizer/createNormalizerPlugin.js

@@ -0,0 +1,5 @@
+import { withNormalizer } from './withNormalizer';
+export const createNormalizerPlugin = ()=>({
+        key: 'NormalizerPlugin',
+        withOverrides: withNormalizer
+    });

package/dist/esm/plugins/Normalizer/createNormalizerPlugin.test.js

@@ -0,0 +1,113 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { transformWrapIn } from '../../helpers/transformers';
+import { jsx, createTestEditor, mockPlugin, assertOutput } from '../../test-utils';
+import { createNormalizerPlugin } from './createNormalizerPlugin';
+describe('Normalizer', ()=>{
+    const rules = [
+        {
+            validChildren: [
+                BLOCKS.PARAGRAPH
+            ]
+        }
+    ];
+    let input;
+    beforeEach(()=>{
+        input = jsx("editor", null, jsx("hul", null, jsx("hli", null, jsx("hembed", {
+            type: "Entry",
+            id: "embedded-entry"
+        }), jsx("hp", null, "List item"))));
+    });
+    const expected = jsx("editor", null, jsx("hul", null, jsx("hli", null, jsx("hp", null, "List item"))));
+    describe('rule.match', ()=>{
+        it('matches elements of type "plugin.type" by default', ()=>{
+            const { editor  } = createTestEditor({
+                input,
+                plugins: [
+                    mockPlugin({
+                        isElement: true,
+                        type: BLOCKS.LIST_ITEM,
+                        normalizer: rules
+                    }),
+                    createNormalizerPlugin()
+                ]
+            });
+            assertOutput({
+                editor,
+                expected
+            });
+        });
+        it('rejects rules without "match" in a non-element plugin', ()=>{
+            expect(()=>createTestEditor({
+                    input,
+                    plugins: [
+                        mockPlugin({
+                            normalizer: rules
+                        }),
+                        createNormalizerPlugin()
+                    ]
+                })).toThrow(/rule.match MUST be defined/);
+        });
+    });
+    describe('rule.transform', ()=>{
+        it('works with conditional transformation', ()=>{
+            const { editor  } = createTestEditor({
+                input: jsx("editor", null, jsx("hul", null, jsx("hli", null, jsx("hembed", {
+                    type: "Entry",
+                    id: "embedded-entry"
+                }), jsx("hinline", {
+                    type: "Entry",
+                    id: "inline-entry"
+                }), jsx("hp", null, "List item")))),
+                plugins: [
+                    mockPlugin({
+                        isElement: true,
+                        type: BLOCKS.LIST_ITEM,
+                        normalizer: [
+                            {
+                                validChildren: [
+                                    BLOCKS.PARAGRAPH
+                                ],
+                                transform: {
+                                    [INLINES.EMBEDDED_ENTRY]: transformWrapIn(BLOCKS.PARAGRAPH)
+                                }
+                            }
+                        ]
+                    }),
+                    createNormalizerPlugin()
+                ]
+            });
+            assertOutput({
+                editor,
+                expected: jsx("editor", null, jsx("hul", null, jsx("hli", null, jsx("hp", null, jsx("hinline", {
+                    type: "Entry",
+                    id: "inline-entry"
+                })), jsx("hp", null, "List item"))))
+            });
+        });
+    });
+    describe('rule.validChildren', ()=>{
+        it('supports custom functions', ()=>{
+            const { editor  } = createTestEditor({
+                input,
+                plugins: [
+                    mockPlugin({
+                        isElement: true,
+                        type: BLOCKS.LIST_ITEM,
+                        normalizer: [
+                            {
+                                validChildren: (_, [node])=>{
+                                    return node.type === BLOCKS.PARAGRAPH;
+                                }
+                            }
+                        ]
+                    }),
+                    createNormalizerPlugin()
+                ]
+            });
+            assertOutput({
+                editor,
+                expected
+            });
+        });
+    });
+});

package/dist/esm/plugins/Normalizer/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './createNormalizerPlugin';

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

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

package/dist/esm/plugins/Normalizer/utils.js

@@ -0,0 +1,18 @@
+import { isElement } from '../../internal/queries';
+export class NormalizerError extends Error {
+}
+export const createValidatorFromTypes = (types)=>(_, [node])=>{
+        return isElement(node) && types.includes(node.type);
+    };
+export const createTransformerFromObject = (transforms)=>{
+    const fallback = transforms['default'];
+    if (!fallback) {
+        throw new NormalizerError('A default transformer MUST be provided');
+    }
+    return (editor, entry)=>{
+        const [node] = entry;
+        const key = isElement(node) ? node.type : 'default';
+        const transformer = transforms[key] || fallback;
+        return transformer(editor, entry);
+    };
+};

package/dist/esm/plugins/Normalizer/withNormalizer.js

@@ -0,0 +1,73 @@
+import isPlainObject from 'is-plain-obj';
+import { transformRemove } from '../../helpers/transformers';
+import { withoutNormalizing } from '../../internal';
+import { getChildren, matchNode, getPluginType } from '../../internal/queries';
+import { baseRules } from './baseRules';
+import { NormalizerError, createValidatorFromTypes, createTransformerFromObject } from './utils';
+export const withNormalizer = (editor)=>{
+    const rules = baseRules;
+    for (const p of editor.plugins){
+        const { normalizer: _rules  } = p;
+        if (!_rules) {
+            continue;
+        }
+        for (const _rule of _rules){
+            const rule = {
+                ..._rule
+            };
+            if (!rule.match && !p.isElement) {
+                throw new NormalizerError('rule.match MUST be defined in a non-element plugin');
+            }
+            if (!rule.match) {
+                rule.match = {
+                    type: getPluginType(editor, p.key)
+                };
+            }
+            if (isPlainObject(rule.transform)) {
+                if ('validNode' in rule) {
+                    throw new NormalizerError('conditional transformations are not supported in validNode rules');
+                }
+                rule.transform = createTransformerFromObject({
+                    default: transformRemove,
+                    ...rule.transform
+                });
+            }
+            if (!rule.transform) {
+                rule.transform = transformRemove;
+            }
+            if ('validChildren' in rule && Array.isArray(rule.validChildren)) {
+                rule.validChildren = createValidatorFromTypes(rule.validChildren);
+            }
+            rules.push(rule);
+        }
+    }
+    const _transform = (tr, entry)=>{
+        withoutNormalizing(editor, ()=>{
+            tr(editor, entry);
+        });
+    };
+    const { normalizeNode  } = editor;
+    editor.normalizeNode = (entry)=>{
+        const [node, path] = entry;
+        const children = getChildren(entry);
+        for (const rule of rules){
+            if (!matchNode(node, path, rule.match)) {
+                continue;
+            }
+            if ('validNode' in rule && !rule.validNode(editor, entry)) {
+                _transform(rule.transform, entry);
+                return;
+            }
+            if ('validChildren' in rule) {
+                const isValidChild = rule.validChildren;
+                const invalidChildEntry = children.find((entry)=>!isValidChild(editor, entry));
+                if (invalidChildEntry) {
+                    _transform(rule.transform, invalidChildEntry);
+                    return;
+                }
+            }
+        }
+        return normalizeNode(entry);
+    };
+    return editor;
+};

package/dist/esm/plugins/Paragraph/Paragraph.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+const styles = {
+    [BLOCKS.PARAGRAPH]: css`
+    line-height: ${tokens.lineHeightDefault};
+    margin-bottom: 1.5em;
+  `
+};
+export function Paragraph(props) {
+    return React.createElement("div", {
+        ...props.attributes,
+        className: styles[BLOCKS.PARAGRAPH]
+    }, props.children);
+}