@squiz/formatted-text-editor 2.3.0 → 2.5.0

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
+const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
+const ImageModal_1 = __importDefault(require("./ImageModal"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const Extensions_1 = require("../../../Extensions/Extensions");
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const ImageButton = ({ inPopover = false }) => {
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const { insertImage, insertAssetImage, insertDAMImage } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const selection = (0, react_2.useCurrentSelection)();
+    // if the active selection is not an image, disable the button as it means it will be text
+    const disabled = (!selection.empty && !active.image() && !active.assetImage() && !active.DAMImage()) || active.codeBlock();
+    const handleClick = () => {
+        if (!showModal) {
+            setShowModal(true);
+        }
+    };
+    const insertImageFromData = (data) => {
+        const { imageType, image, resourceImage } = data;
+        if (imageType === Extensions_1.NodeName.Image) {
+            insertImage(image);
+        }
+        else if (imageType === Extensions_1.NodeName.DAMImage) {
+            insertDAMImage(resourceImage);
+        }
+        else {
+            insertAssetImage(resourceImage);
+        }
+    };
+    const handleSubmit = async (data) => {
+        insertImageFromData(data);
+        setShowModal(false);
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    if (!inPopover) {
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Mod-l', disabled ? () => false : handleShortcut);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage() || active.DAMImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: `Image (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+L)`, isDisabled: disabled }),
+        showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
+};
+exports.default = ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts

@@ -0,0 +1,9 @@
+import { ImageFormData } from './Form/ImageForm';
+import React from 'react';
+import { SubmitHandler } from 'react-hook-form';
+type ImageModalProps = {
+    onCancel: () => void;
+    onSubmit: SubmitHandler<ImageFormData>;
+};
+declare const ImageModal: ({ onCancel, onSubmit }: ImageModalProps) => React.JSX.Element;
+export default ImageModal;

package/lib/EditorToolbar/Tools/Image/ImageModal.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
+const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
+const Extensions_1 = require("../../../Extensions/Extensions");
+const ImageModal = ({ onCancel, onSubmit }) => {
+    const selection = (0, react_2.useCurrentSelection)();
+    const currentImage = selection?.node;
+    const currentImageAttrs = { ...currentImage?.attrs };
+    const formData = {
+        imageType: currentImage?.type.name === Extensions_1.NodeName.Image ? Extensions_1.NodeName.Image : Extensions_1.NodeName.AssetImage,
+        image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
+        resourceImage: currentImage?.type?.name === Extensions_1.NodeName.DAMImage || currentImage?.type?.name === Extensions_1.NodeName.AssetImage
+            ? currentImageAttrs
+            : {},
+    };
+    return (react_1.default.createElement(FormModal_1.default, { title: "Image", icon: react_1.default.createElement(ImageRounded_1.default, null), onCancel: onCancel },
+        react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));
+};
+exports.default = ImageModal;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ItalicButton: () => React.JSX.Element;
+export default ItalicButton;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const FormatItalicRounded_1 = __importDefault(require("@mui/icons-material/FormatItalicRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const ItalicButton = () => {
+    const { toggleItalic } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleItalic.enabled();
+    const handleSelect = () => {
+        if (toggleItalic.enabled()) {
+            chain.toggleItalic().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(FormatItalicRounded_1.default, null), label: `Italic (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+I)` }));
+};
+exports.default = ItalicButton;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { SubmitHandler } from 'react-hook-form';
+import { FromToProps } from 'remirror';
+import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
+import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
+import { MarkName } from '../../../../Extensions/Extensions';
+import { DeepPartial } from '../../../../types';
+export type LinkFormData = {
+    linkType: MarkName;
+    text: string;
+    link: UpdateLinkProps['attrs'];
+    assetLink: UpdateAssetLinkProps['attrs'];
+    range: FromToProps;
+};
+export type FormProps = {
+    data?: DeepPartial<LinkFormData>;
+    onSubmit: SubmitHandler<LinkFormData>;
+};
+export declare const LinkForm: ({ data, onSubmit }: FormProps) => ReactElement;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkForm = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const react_hook_form_1 = require("react-hook-form");
+const Input_1 = require("../../../../ui/Fields/Input/Input");
+const Checkbox_1 = require("../../../../ui/Fields/Checkbox/Checkbox");
+const common_1 = require("../../../../Extensions/LinkExtension/common");
+const Extensions_1 = require("../../../../Extensions/Extensions");
+const validation_1 = require("../../../../utils/validation");
+const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
+const linkTypeOptions = {
+    [Extensions_1.MarkName.AssetLink]: { label: 'From source' },
+    [Extensions_1.MarkName.Link]: { label: 'From URL' },
+};
+const LinkForm = ({ data, onSubmit }) => {
+    const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+        defaultValues: data,
+    });
+    const linkType = watch('linkType') || Extensions_1.MarkName.AssetLink;
+    return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
+        linkType === Extensions_1.MarkName.Link && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "URL", required: true, error: errors?.link?.href?.message, ...register('link.href', {
+                        required: 'URL is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Title", error: errors?.link?.title?.message, ...register('link.title') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('link.target', value), defaultChecked: data?.link?.target === common_1.LinkTarget.Blank, unchecked: common_1.LinkTarget.Self, checked: common_1.LinkTarget.Blank })))),
+        linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetLink", rules: {
+                        validate: (0, validation_1.hasProperties)('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                    }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert link", value: value, onChange: onChange, error: error?.message })) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
+                        required: 'Text is required',
+                        validate: {
+                            noEmptySpaces: validation_1.noEmptySpacesValidation,
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('assetLink.target', value), defaultChecked: data?.assetLink?.target === '_blank', unchecked: '_self', checked: '_blank' }))))));
+};
+exports.LinkForm = LinkForm;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type LinkButtonProps = {
+    inPopover?: boolean;
+};
+declare const LinkButton: ({ inPopover }: LinkButtonProps) => React.JSX.Element;
+export default LinkButton;

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

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+const LinkModal_1 = __importDefault(require("./LinkModal"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const react_2 = require("@remirror/react");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const LinkButton = ({ inPopover = false }) => {
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const { updateLink, updateAssetLink } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    // If the image tool is active, disable the link tool as they shouldn't work at the same time
+    const disabled = active.image() || active.codeBlock();
+    const handleClick = () => {
+        if (!showModal) {
+            setShowModal(true);
+        }
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    const handleSubmit = (data) => {
+        if (data.linkType === Extensions_1.MarkName.AssetLink) {
+            updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+        }
+        else {
+            updateLink({ text: data.text, attrs: data.link, range: data.range });
+        }
+        setShowModal(false);
+    };
+    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    if (!inPopover) {
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Mod-k', disabled ? () => true : handleShortcut);
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: `Link (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)`, isDisabled: disabled }),
+        showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
+};
+exports.default = LinkButton;

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const LinkForm_1 = require("./Form/LinkForm");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
+const hooks_1 = require("../../../hooks");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const LinkModal = ({ onCancel, onSubmit }) => {
+    const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
+    const { selection, marks } = (0, hooks_1.useExpandedSelection)([Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink]);
+    const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+    const data = {
+        linkType: marks[0]?.type?.name === Extensions_1.MarkName.Link ? Extensions_1.MarkName.Link : Extensions_1.MarkName.AssetLink,
+        text: selectedText,
+        link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
+        assetLink: { ...marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs },
+        range: { from: selection.from, to: selection.to },
+    };
+    return (react_1.default.createElement(FormModal_1.default, { title: "Link", icon: react_1.default.createElement(InsertLinkRounded_1.default, null), onCancel: onCancel },
+        react_1.default.createElement(LinkForm_1.LinkForm, { data: data, onSubmit: onSubmit })));
+};
+exports.default = LinkModal;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkButtonProps } from './LinkButton';
+declare const RemoveLinkButton: ({ inPopover }: LinkButtonProps) => React.JSX.Element;
+export default RemoveLinkButton;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const RemoveLinkButton = ({ inPopover = false }) => {
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const disabled = !active.link() && !active.assetLink();
+    const handleClick = () => {
+        chain.removeLink().removeAssetLink().focus().run();
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    // when Shift+Ctrl+k is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    if (!inPopover) {
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Shift-Mod-k', disabled ? () => true : handleShortcut);
+    }
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: disabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: `Remove link (Shift+${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)` }));
+};
+exports.default = RemoveLinkButton;

package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ListButtons: () => React.JSX.Element;
+export default ListButtons;

package/lib/EditorToolbar/Tools/Lists/ListButtons.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const OrderedListButton_1 = __importDefault(require("./OrderedList/OrderedListButton"));
+const UnorderedListButton_1 = __importDefault(require("./UnorderedList/UnorderedListButton"));
+const react_components_1 = require("@remirror/react-components");
+const ListButtons = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(UnorderedListButton_1.default, null),
+    react_1.default.createElement(OrderedListButton_1.default, null),
+    react_1.default.createElement(react_components_1.VerticalDivider, null)));
+exports.default = ListButtons;

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const OrderedListButton: () => React.JSX.Element;
+export default OrderedListButton;

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatListNumbered_1 = __importDefault(require("@mui/icons-material/FormatListNumbered"));
+const OrderedListButton = () => {
+    const { toggleOrderedList } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleOrderedList.enabled();
+    const handleSelect = () => {
+        if (toggleOrderedList.enabled()) {
+            chain.toggleOrderedList().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.orderedList(), icon: react_1.default.createElement(FormatListNumbered_1.default, null), label: "Ordered list" }));
+};
+exports.default = OrderedListButton;

package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const UnorderedListButton: () => React.JSX.Element;
+export default UnorderedListButton;

package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatListBulletedRounded_1 = __importDefault(require("@mui/icons-material/FormatListBulletedRounded"));
+const UnorderedListButton = () => {
+    const { toggleBulletList } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleBulletList.enabled();
+    const handleSelect = () => {
+        if (toggleBulletList.enabled()) {
+            chain.toggleBulletList().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bulletList(), icon: react_1.default.createElement(FormatListBulletedRounded_1.default, null), label: "Unordered list" }));
+};
+exports.default = UnorderedListButton;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RedoButton: () => React.JSX.Element;
+export default RedoButton;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const RedoRounded_1 = __importDefault(require("@mui/icons-material/RedoRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const RedoButton = () => {
+    const { redo } = (0, react_2.useCommands)();
+    const { redoDepth } = (0, react_2.useHelpers)(true);
+    const handleSelect = () => {
+        if (redo.enabled()) {
+            redo();
+        }
+    };
+    const enabled = redoDepth() > 0;
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(RedoRounded_1.default, null), label: `Redo (Shift+${(0, getShortcutSymbol_1.getShortcutSymbol)()}+Z)` }));
+};
+exports.default = RedoButton;

package/lib/EditorToolbar/Tools/Table/TableButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TableButton: () => React.JSX.Element;
+export default TableButton;

package/lib/EditorToolbar/Tools/Table/TableButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const TableViewRounded_1 = __importDefault(require("@mui/icons-material/TableViewRounded"));
+const TableButton = () => {
+    const { createTable } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = createTable.enabled();
+    const handleSelect = () => {
+        createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" })));
+};
+exports.default = TableButton;

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CenterAlignButton: () => React.JSX.Element;
+export default CenterAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatAlignCenter_1 = __importDefault(require("@mui/icons-material/FormatAlignCenter"));
+const CenterAlignButton = () => {
+    const { centerAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const handleSelect = () => {
+        if (centerAlign.enabled()) {
+            chain.centerAlign().focus().run();
+        }
+    };
+    const active = centerAlign.active?.() || false;
+    const enabled = centerAlign.enabled();
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignCenter_1.default, null), label: "Align center" }));
+};
+exports.default = CenterAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const JustifyAlignButton: () => React.JSX.Element;
+export default JustifyAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatAlignJustify_1 = __importDefault(require("@mui/icons-material/FormatAlignJustify"));
+const JustifyAlignButton = () => {
+    const { justifyAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const handleSelect = () => {
+        if (justifyAlign.enabled()) {
+            chain.justifyAlign().focus().run();
+        }
+    };
+    const active = justifyAlign.active?.() || false;
+    const enabled = justifyAlign.enabled();
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignJustify_1.default, null), label: "Justify" }));
+};
+exports.default = JustifyAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LeftAlignButton: () => React.JSX.Element;
+export default LeftAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatAlignLeft_1 = __importDefault(require("@mui/icons-material/FormatAlignLeft"));
+const LeftAlignButton = () => {
+    const { leftAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const handleSelect = () => {
+        if (leftAlign.enabled()) {
+            chain.leftAlign().focus().run();
+        }
+    };
+    const active = leftAlign.active?.() || false;
+    const enabled = leftAlign.enabled();
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignLeft_1.default, null), label: "Align left" }));
+};
+exports.default = LeftAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const RightAlignButton: () => React.JSX.Element;
+export default RightAlignButton;