@squiz/formatted-text-editor 1.12.0-alpha.8 → 1.12.1-alpha.0

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -0,0 +1,34 @@
+import React, { useCallback, useState } from 'react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import LinkModal from './LinkModal';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+const LinkButton = ({ inPopover = false }) => {
+    const [showModal, setShowModal] = useState(false);
+    const { selectLink, updateLink } = useCommands();
+    const active = useActive();
+    const handleClick = () => {
+        if (!showModal) {
+            selectLink();
+            // form element are uncontrolled, let the event loop run to
+            // update the selected text in state before showing the modal.
+            requestAnimationFrame(() => {
+                setShowModal(true);
+            });
+        }
+    };
+    const handleSubmit = (data) => {
+        updateLink(data);
+        setShowModal(false);
+    };
+    if (!inPopover) {
+        // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+        // being double handled.
+        useExtensionEvent(LinkExtension, 'onShortcut', useCallback(() => handleClick(), []));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToolbarButton, { handleOnClick: handleClick, isActive: active.link(), icon: React.createElement(InsertLinkRoundedIcon, null), label: "Link (cmd+K)" }),
+        showModal && React.createElement(LinkModal, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
+};
+export default LinkButton;

package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts

@@ -0,0 +1,8 @@
+import { LinkFormData } from './Form/LinkForm';
+import { SubmitHandler } from 'react-hook-form';
+type LinkModalProps = {
+    onCancel: () => void;
+    onSubmit: SubmitHandler<LinkFormData>;
+};
+declare const LinkModal: ({ onCancel, onSubmit }: LinkModalProps) => JSX.Element;
+export default LinkModal;

package/lib/EditorToolbar/Tools/Link/LinkModal.js

@@ -0,0 +1,14 @@
+import { getMarkRanges } from 'remirror';
+import LinkForm from './Form/LinkForm';
+import React from 'react';
+import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import FormModal from '../../../ui/Modal/FormModal';
+const LinkModal = ({ onCancel, onSubmit }) => {
+    const { helpers, view: { state }, } = useRemirrorContext();
+    const selection = useCurrentSelection();
+    const currentLink = getMarkRanges(selection, 'link')[0];
+    const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+    return (React.createElement(FormModal, { title: "Link", onCancel: onCancel },
+        React.createElement(LinkForm, { data: { ...currentLink?.mark.attrs, text: selectedText }, onSubmit: onSubmit })));
+};
+export default LinkModal;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts

@@ -0,0 +1,2 @@
+declare const RemoveLinkButton: () => JSX.Element;
+export default RemoveLinkButton;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useRemirrorContext, useChainedCommands } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+const RemoveLinkButton = () => {
+    const { commands } = useRemirrorContext({ autoUpdate: true });
+    const chain = useChainedCommands();
+    const enabled = commands.removeLink.enabled();
+    const handleClick = () => {
+        if (enabled) {
+            chain.removeLink().focus().run();
+        }
+    };
+    return (React.createElement(ToolbarButton, { handleOnClick: handleClick, isActive: false, isDisabled: !enabled, icon: React.createElement(LinkOffIcon, null), label: "Remove link" }));
+};
+export default RemoveLinkButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts

@@ -0,0 +1,2 @@
+declare const RedoButton: () => JSX.Element;
+export default RedoButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
+const RedoButton = () => {
+    const { redo } = useCommands();
+    const { redoDepth } = useHelpers(true);
+    const handleSelect = () => {
+        if (redo.enabled()) {
+            redo();
+        }
+    };
+    const enabled = redoDepth() > 0;
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(RedoRoundedIcon, null), label: "Redo (shift+cmd+Z)" }));
+};
+export default RedoButton;

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js

@@ -3,11 +3,14 @@ import LeftAlignButton from './LeftAlign/LeftAlignButton';
 import CenterAlignButton from './CenterAlign/CenterAlignButton';
 import RightAlignButton from './RightAlign/RightAlignButton';
 import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
+import { VerticalDivider } from '@remirror/react-components';
 const TextAlignButtons = () => {
     return (React.createElement(React.Fragment, null,
+        React.createElement(VerticalDivider, { className: "editor-divider" }),
         React.createElement(LeftAlignButton, null),
         React.createElement(CenterAlignButton, null),
         React.createElement(RightAlignButton, null),
-        React.createElement(JustifyAlignButton, null)));
+        React.createElement(JustifyAlignButton, null),
+        React.createElement(VerticalDivider, { className: "editor-divider" })));
 };
 export default TextAlignButtons;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts

@@ -0,0 +1,5 @@
+type HeadingButtonProps = {
+    level: number;
+};
+declare const HeadingButton: ({ level }: HeadingButtonProps) => JSX.Element;
+export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+const HeadingButton = ({ level }) => {
+    const { toggleHeading } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const enabled = toggleHeading.enabled({ level });
+    const handleSelect = () => {
+        if (toggleHeading.enabled({ level })) {
+            chain.toggleHeading({ level }).focus().run();
+        }
+    };
+    const headingContent = () => {
+        switch (level) {
+            case 1:
+                return React.createElement("h1", null, "Heading 1");
+            case 2:
+                return React.createElement("h2", null, "Heading 2");
+            case 3:
+                return React.createElement("h3", null, "Heading 3");
+            case 4:
+                return React.createElement("h4", null, "Heading 4");
+            case 5:
+                return React.createElement("h5", null, "Heading 5");
+            case 6:
+                return React.createElement("h6", null, "Heading 6");
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
+};
+export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts

@@ -0,0 +1,2 @@
+declare const ParagraphButton: () => JSX.Element;
+export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+const ParagraphButton = () => {
+    const { convertParagraph } = useCommands();
+    const chain = useChainedCommands();
+    const active = useActive();
+    const handleSelect = () => {
+        if (convertParagraph.enabled()) {
+            chain.convertParagraph().focus().run();
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
+        React.createElement("p", null, "Paragraph")));
+};
+export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts

@@ -0,0 +1,2 @@
+declare const PreformattedButton: () => JSX.Element;
+export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+const PreformattedButton = () => {
+    const { togglePreformatted } = useCommands();
+    const active = useActive();
+    const enabled = togglePreformatted.enabled();
+    const handleSelect = () => {
+        if (togglePreformatted.enabled()) {
+            togglePreformatted();
+        }
+    };
+    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
+        React.createElement("pre", null, "Preformatted")));
+};
+export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts

@@ -0,0 +1,2 @@
+declare const TextTypeDropdown: () => JSX.Element;
+export default TextTypeDropdown;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import HeadingButton from './Heading/HeadingButton';
+import ParagraphButton from './Paragraph/ParagraphButton';
+import PreformattedButton from './Preformatted/PreformattedButton';
+import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
+import { useActive, VerticalDivider } from '@remirror/react';
+const TextTypeDropdown = () => {
+    const active = useActive();
+    const activeLabel = () => {
+        // Determine if preformatted is active
+        if (active.preformatted()) {
+            return 'Preformatted';
+        }
+        // Determine if a heading is active
+        for (let i = 1; i <= 6; i++) {
+            if (active.heading({ level: i })) {
+                return `Heading ${i}`;
+            }
+        }
+        // Default to paragraph
+        return 'Paragraph';
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToolbarDropdown, { label: activeLabel() },
+            React.createElement(ParagraphButton, null),
+            React.createElement(HeadingButton, { level: 1 }),
+            React.createElement(HeadingButton, { level: 2 }),
+            React.createElement(HeadingButton, { level: 3 }),
+            React.createElement(HeadingButton, { level: 4 }),
+            React.createElement(HeadingButton, { level: 5 }),
+            React.createElement(HeadingButton, { level: 6 }),
+            React.createElement(PreformattedButton, null)),
+        React.createElement(VerticalDivider, { className: "editor-divider" })));
+};
+export default TextTypeDropdown;

package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts

@@ -0,0 +1,2 @@
+declare const UndoButton: () => JSX.Element;
+export default UndoButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+const UndoButton = () => {
+    const { undo } = useCommands();
+    const { undoDepth } = useHelpers(true);
+    const handleSelect = () => {
+        if (undo.enabled()) {
+            undo();
+        }
+    };
+    const enabled = undoDepth() > 0;
+    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(UndoRoundedIcon, null), label: "Undo (cmd+Z)" }));
+};
+export default UndoButton;

package/lib/EditorToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar';
+export * from './Toolbar';

package/lib/EditorToolbar/index.js

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar';
+export * from './Toolbar';

package/lib/Extensions/Extensions.d.ts

@@ -0,0 +1,4 @@
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension } from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { LinkExtension } from './LinkExtension/LinkExtension';
+export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | ItalicExtension | NodeFormattingExtension | ParagraphExtension | UnderlineExtension | LinkExtension | PreformattedExtension)[];

package/lib/Extensions/Extensions.js

@@ -0,0 +1,20 @@
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, } from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { LinkExtension } from './LinkExtension/LinkExtension';
+export const Extensions = () => [
+    new BoldExtension(),
+    new HeadingExtension(),
+    new ItalicExtension(),
+    new NodeFormattingExtension(),
+    new ParagraphExtension(),
+    new PreformattedExtension(),
+    new UnderlineExtension(),
+    new HistoryExtension(),
+    new LinkExtension({
+        supportedTargets: [
+            // '_self' is the browser default and will be used when encountering a link with a
+            // different target is encountered.
+            '_blank',
+        ],
+    }),
+];

package/lib/Extensions/LinkExtension/LinkExtension.d.ts

@@ -0,0 +1,16 @@
+import { ApplySchemaAttributes, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { KeyBindingProps } from '@remirror/core';
+import { CommandFunction } from '@remirror/pm';
+import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
+export type UpdateLinkOptions = LinkAttributes & {
+    text: string;
+};
+export type LinkAttributes = RemirrorLinkAttributes & {
+    title?: string;
+};
+export declare class LinkExtension extends RemirrorLinkExtension {
+    createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
+    shortcut({ tr }: KeyBindingProps): boolean;
+    selectLink(): CommandFunction;
+    updateLink(options: UpdateLinkOptions): CommandFunction;
+}

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -0,0 +1,91 @@
+import { getMarkRanges, isElementDomNode } from 'remirror';
+import { getTextSelection, getMarkRange, updateMark, removeMark } from '@remirror/core';
+import { LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
+export class LinkExtension extends RemirrorLinkExtension {
+    createMarkSpec(extra, override) {
+        const spec = super.createMarkSpec(extra, override);
+        return {
+            ...spec,
+            excludes: undefined,
+            attrs: {
+                ...spec.attrs,
+                title: { default: undefined },
+            },
+            parseDOM: [
+                {
+                    tag: 'a[href]',
+                    getAttrs: (node) => {
+                        if (!isElementDomNode(node)) {
+                            return false;
+                        }
+                        return {
+                            ...extra.parse(node),
+                            auto: false,
+                            href: node.getAttribute('href'),
+                            target: node.getAttribute('target'),
+                            title: node.getAttribute('title'),
+                        };
+                    },
+                },
+            ],
+        };
+    }
+    shortcut({ tr }) {
+        // override parent implementation to allow a link to be inserted without requiring a text selection first.
+        const { from, to, $from } = tr.selection;
+        const mark = getMarkRange($from, this.type);
+        const selectedText = tr.doc.textBetween(from, to);
+        this.options.onShortcut({
+            activeLink: mark ? { attrs: mark.mark.attrs, from: mark.from, to: mark.to } : undefined,
+            selectedText,
+            from,
+            to,
+        });
+        return true;
+    }
+    selectLink() {
+        // parent implementation selects only the link text, this mimics closer to Google Docs where
+        // the select text is widened to include the link but retains non-link selected text as well.
+        return (props) => {
+            const { tr } = props;
+            const ranges = getMarkRanges(tr.selection, this.type);
+            if (ranges.length === 0) {
+                return false;
+            }
+            // work out the start position of the first link and end position of the last link in the selection.
+            const from = Math.min(tr.selection.from, ...ranges.map((range) => range.from));
+            const to = Math.max(tr.selection.to, ...ranges.map((range) => range.to));
+            // don't need to widen the selection, return early.
+            if (tr.selection.from === from && tr.selection.to === to) {
+                return false;
+            }
+            // widen the selection to make sure the full link is included.
+            this.store.commands.selectText.original({ from, to })(props);
+            return true;
+        };
+    }
+    updateLink(options) {
+        const { text, ...attrs } = options;
+        return (props) => {
+            const { tr, dispatch, view } = props;
+            const range = { from: tr.selection.from, to: tr.selection.to };
+            const selectedText = tr.doc.textBetween(range.from, range.to);
+            if (text !== selectedText) {
+                // update the text in the editor if it was updated, update the range to cover the length of the new text.
+                dispatch?.(tr.insertText(text));
+                range.to = range.from + text.length;
+            }
+            // apply the link, or remove it if no URL was provided.
+            if (attrs.href.length > 0) {
+                updateMark({ type: this.type, attrs, range })(props);
+            }
+            else {
+                removeMark({ type: this.type, range })(props);
+            }
+            // move the cursor to the end of the link and re-focus the editor.
+            dispatch?.(tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc)));
+            view?.focus();
+            return true;
+        };
+    }
+}

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -0,0 +1,10 @@
+import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+export declare class PreformattedExtension extends NodeExtension {
+    get name(): "preformatted";
+    createTags(): ("formattingNode" | "block" | "textBlock")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted(): CommandFunction;
+}

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { command, extension, ExtensionTag, NodeExtension, toggleBlockItem, } from '@remirror/core';
+let PreformattedExtension = class PreformattedExtension extends NodeExtension {
+    get name() {
+        return 'preformatted';
+    }
+    createTags() {
+        return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            content: 'inline*',
+            defining: true,
+            draggable: false,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+            },
+            parseDOM: [...(override.parseDOM ?? [])],
+            toDOM: (node) => {
+                return [`pre`, extra.dom(node), 0];
+            },
+        };
+    }
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted() {
+        return toggleBlockItem({
+            type: this.type,
+            toggleType: 'paragraph',
+        });
+    }
+};
+__decorate([
+    command()
+], PreformattedExtension.prototype, "togglePreformatted", null);
+PreformattedExtension = __decorate([
+    extension({})
+], PreformattedExtension);
+export { PreformattedExtension };

package/lib/FormattedTextEditor.d.ts

@@ -1,2 +1,2 @@
-declare const FormattedTextEditor: () => JSX.Element;
-export default FormattedTextEditor;
+import Editor from './Editor/Editor';
+export default Editor;

package/lib/FormattedTextEditor.js

@@ -1,7 +1,2 @@
-import React from 'react';
 import Editor from './Editor/Editor';
-const FormattedTextEditor = () => {
-    return (React.createElement("div", { className: "remirror-theme formatted-text-editor editor-wrapper" },
-        React.createElement(Editor, null)));
-};
-export default FormattedTextEditor;
+export default Editor;

package/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useExtensionNames';

package/lib/hooks/index.js

@@ -0,0 +1 @@
+export * from './useExtensionNames';

package/lib/hooks/useExtensionNames.d.ts

@@ -0,0 +1 @@
+export declare const useExtensionNames: () => Record<string, true>;

package/lib/hooks/useExtensionNames.js

@@ -0,0 +1,12 @@
+import { useRemirrorContext } from '@remirror/react';
+import { useMemo } from 'react';
+export const useExtensionNames = () => {
+    const { manager } = useRemirrorContext();
+    return useMemo(() => {
+        const extensionNames = {};
+        manager.extensions.forEach((extension) => {
+            extensionNames[extension.name] = true;
+        });
+        return extensionNames;
+    }, [manager]);
+};