@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.10

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

@@ -1,23 +1,28 @@
-import React from 'react';
-import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
-import { Select } from '../../../../ui/Inputs/Select/Select';
-import { useForm } from 'react-hook-form';
+"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 Input_1 = require("../../../../ui/Fields/Input/Input");
+const Select_1 = require("../../../../ui/Fields/Select/Select");
+const react_hook_form_1 = require("react-hook-form");
 const selectOptions = {
     _self: { label: 'Current window' },
     _blank: { label: 'New window' },
 };
 const LinkForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue } = useForm({
+    const { register, handleSubmit, setValue } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
-    return (React.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
-        React.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            React.createElement(TextInput, { label: "URL", ...register('href') })),
-        React.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            React.createElement(TextInput, { label: "Text", ...register('text') })),
-        React.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            React.createElement(TextInput, { label: "Title", ...register('title') })),
-        React.createElement("div", { className: "squiz-fte-form-group mb-0" },
-            React.createElement(Select, { name: "target", label: "Target", value: data.target || '_self', options: selectOptions, onChange: (value) => setValue('target', value) }))));
+    return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(Input_1.Input, { label: "URL", ...register('href') })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(Input_1.Input, { label: "Title", ...register('title') })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-0" },
+            react_1.default.createElement(Select_1.Select, { name: "target", label: "Target", value: data.target || '_self', options: selectOptions, onChange: (value) => setValue('target', value) }))));
 };
-export default LinkForm;
+exports.default = LinkForm;

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

@@ -1,13 +1,41 @@
-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';
+"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 LinkExtension_1 = require("../../../Extensions/LinkExtension/LinkExtension");
 const LinkButton = ({ inPopover = false }) => {
-    const [showModal, setShowModal] = useState(false);
-    const { selectLink, updateLink } = useCommands();
-    const active = useActive();
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const { selectLink, updateLink } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
     const handleClick = () => {
         if (!showModal) {
             selectLink();
@@ -25,10 +53,10 @@ const LinkButton = ({ inPopover = 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(), []));
+        (0, react_2.useExtensionEvent)(LinkExtension_1.LinkExtension, 'onShortcut', (0, react_1.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 })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)" }),
+        showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
-export default LinkButton;
+exports.default = LinkButton;

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

@@ -1,14 +1,19 @@
-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';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const remirror_1 = require("remirror");
+const LinkForm_1 = __importDefault(require("./Form/LinkForm"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const LinkModal = ({ onCancel, onSubmit }) => {
-    const { helpers, view: { state }, } = useRemirrorContext();
-    const selection = useCurrentSelection();
-    const currentLink = getMarkRanges(selection, 'link')[0];
+    const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
+    const selection = (0, react_2.useCurrentSelection)();
+    const currentLink = (0, remirror_1.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 })));
+    return (react_1.default.createElement(FormModal_1.default, { title: "Link", onCancel: onCancel },
+        react_1.default.createElement(LinkForm_1.default, { data: { ...currentLink?.mark.attrs, text: selectedText }, onSubmit: onSubmit })));
 };
-export default LinkModal;
+exports.default = LinkModal;

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

@@ -1,16 +1,21 @@
-import React from 'react';
-import { useRemirrorContext, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import LinkOffIcon from '@mui/icons-material/LinkOff';
+"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 LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const RemoveLinkButton = () => {
-    const { commands } = useRemirrorContext({ autoUpdate: true });
-    const chain = useChainedCommands();
+    const { commands } = (0, react_2.useRemirrorContext)({ autoUpdate: true });
+    const chain = (0, react_2.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" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: !enabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link" }));
 };
-export default RemoveLinkButton;
+exports.default = RemoveLinkButton;

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

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

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

@@ -1,10 +1,15 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+"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 } = useCommands();
-    const chain = useChainedCommands();
+    const { centerAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
     const handleSelect = () => {
         if (centerAlign.enabled()) {
             chain.centerAlign().focus().run();
@@ -12,6 +17,6 @@ const CenterAlignButton = () => {
     };
     const active = centerAlign.active?.() || false;
     const enabled = centerAlign.enabled();
-    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignCenterIcon, null), label: "Align center" }));
+    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" }));
 };
-export default CenterAlignButton;
+exports.default = CenterAlignButton;

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

@@ -1,10 +1,15 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+"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 } = useCommands();
-    const chain = useChainedCommands();
+    const { justifyAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
     const handleSelect = () => {
         if (justifyAlign.enabled()) {
             chain.justifyAlign().focus().run();
@@ -12,6 +17,6 @@ const JustifyAlignButton = () => {
     };
     const active = justifyAlign.active?.() || false;
     const enabled = justifyAlign.enabled();
-    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignJustifyIcon, null), label: "Justify" }));
+    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" }));
 };
-export default JustifyAlignButton;
+exports.default = JustifyAlignButton;

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

@@ -1,10 +1,15 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+"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 } = useCommands();
-    const chain = useChainedCommands();
+    const { leftAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
     const handleSelect = () => {
         if (leftAlign.enabled()) {
             chain.leftAlign().focus().run();
@@ -12,6 +17,6 @@ const LeftAlignButton = () => {
     };
     const active = leftAlign.active?.() || false;
     const enabled = leftAlign.enabled();
-    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignLeftIcon, null), label: "Align left" }));
+    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" }));
 };
-export default LeftAlignButton;
+exports.default = LeftAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js

@@ -1,10 +1,15 @@
-import React from 'react';
-import { useCommands, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+"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 FormatAlignRight_1 = __importDefault(require("@mui/icons-material/FormatAlignRight"));
 const RightAlignButton = () => {
-    const { rightAlign } = useCommands();
-    const chain = useChainedCommands();
+    const { rightAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
     const handleSelect = () => {
         if (rightAlign.enabled()) {
             chain.rightAlign().focus().run();
@@ -12,6 +17,6 @@ const RightAlignButton = () => {
     };
     const active = rightAlign.active?.() || false;
     const enabled = rightAlign.enabled();
-    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: React.createElement(FormatAlignRightIcon, null), label: "Align right" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignRight_1.default, null), label: "Align right" }));
 };
-export default RightAlignButton;
+exports.default = RightAlignButton;

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

@@ -1,16 +1,21 @@
-import React from 'react';
-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';
+"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 LeftAlignButton_1 = __importDefault(require("./LeftAlign/LeftAlignButton"));
+const CenterAlignButton_1 = __importDefault(require("./CenterAlign/CenterAlignButton"));
+const RightAlignButton_1 = __importDefault(require("./RightAlign/RightAlignButton"));
+const JustifyAlignButton_1 = __importDefault(require("./JustifyAlign/JustifyAlignButton"));
+const react_components_1 = require("@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(VerticalDivider, { className: "editor-divider" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" }),
+        react_1.default.createElement(LeftAlignButton_1.default, null),
+        react_1.default.createElement(CenterAlignButton_1.default, null),
+        react_1.default.createElement(RightAlignButton_1.default, null),
+        react_1.default.createElement(JustifyAlignButton_1.default, null),
+        react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" })));
 };
-export default TextAlignButtons;
+exports.default = TextAlignButtons;

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

@@ -1,10 +1,15 @@
-import React from 'react';
-import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+"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 ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
 const HeadingButton = ({ level }) => {
-    const { toggleHeading } = useCommands();
-    const chain = useChainedCommands();
-    const active = useActive();
+    const { toggleHeading } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
     const enabled = toggleHeading.enabled({ level });
     const handleSelect = () => {
         if (toggleHeading.enabled({ level })) {
@@ -14,19 +19,19 @@ const HeadingButton = ({ level }) => {
     const headingContent = () => {
         switch (level) {
             case 1:
-                return React.createElement("h1", null, "Heading 1");
+                return react_1.default.createElement("h1", null, "Heading 1");
             case 2:
-                return React.createElement("h2", null, "Heading 2");
+                return react_1.default.createElement("h2", null, "Heading 2");
             case 3:
-                return React.createElement("h3", null, "Heading 3");
+                return react_1.default.createElement("h3", null, "Heading 3");
             case 4:
-                return React.createElement("h4", null, "Heading 4");
+                return react_1.default.createElement("h4", null, "Heading 4");
             case 5:
-                return React.createElement("h5", null, "Heading 5");
+                return react_1.default.createElement("h5", null, "Heading 5");
             case 6:
-                return React.createElement("h6", null, "Heading 6");
+                return react_1.default.createElement("h6", null, "Heading 6");
         }
     };
-    return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
 };
-export default HeadingButton;
+exports.default = HeadingButton;

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

@@ -1,16 +1,21 @@
-import React from 'react';
-import { useCommands, useChainedCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+"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 ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
 const ParagraphButton = () => {
-    const { convertParagraph } = useCommands();
-    const chain = useChainedCommands();
-    const active = useActive();
+    const { convertParagraph } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.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")));
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
+        react_1.default.createElement("p", null, "Paragraph")));
 };
-export default ParagraphButton;
+exports.default = ParagraphButton;

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

@@ -1,16 +1,21 @@
-import React from 'react';
-import { useCommands, useActive } from '@remirror/react';
-import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+"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 ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
 const PreformattedButton = () => {
-    const { togglePreformatted } = useCommands();
-    const active = useActive();
+    const { togglePreformatted } = (0, react_2.useCommands)();
+    const active = (0, react_2.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")));
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
+        react_1.default.createElement("pre", null, "Preformatted")));
 };
-export default PreformattedButton;
+exports.default = PreformattedButton;

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

@@ -1,11 +1,16 @@
-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';
+"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 HeadingButton_1 = __importDefault(require("./Heading/HeadingButton"));
+const ParagraphButton_1 = __importDefault(require("./Paragraph/ParagraphButton"));
+const PreformattedButton_1 = __importDefault(require("./Preformatted/PreformattedButton"));
+const ToolbarDropdown_1 = __importDefault(require("../../../ui/ToolbarDropdown/ToolbarDropdown"));
+const react_2 = require("@remirror/react");
 const TextTypeDropdown = () => {
-    const active = useActive();
+    const active = (0, react_2.useActive)();
     const activeLabel = () => {
         // Determine if preformatted is active
         if (active.preformatted()) {
@@ -20,16 +25,16 @@ const TextTypeDropdown = () => {
         // 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" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToolbarDropdown_1.default, { label: activeLabel() },
+            react_1.default.createElement(ParagraphButton_1.default, null),
+            react_1.default.createElement(HeadingButton_1.default, { level: 1 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 2 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 3 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 4 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 5 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 6 }),
+            react_1.default.createElement(PreformattedButton_1.default, null)),
+        react_1.default.createElement(react_2.VerticalDivider, { className: "editor-divider" })));
 };
-export default TextTypeDropdown;
+exports.default = TextTypeDropdown;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js

@@ -1,17 +1,22 @@
-import React from 'react';
-import { useCommands, useActive, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+"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 FormatUnderlinedRounded_1 = __importDefault(require("@mui/icons-material/FormatUnderlinedRounded"));
 const UnderlineButton = () => {
-    const { toggleUnderline } = useCommands();
-    const chain = useChainedCommands();
-    const active = useActive();
+    const { toggleUnderline } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
     const enabled = toggleUnderline.enabled();
     const handleSelect = () => {
         if (toggleUnderline.enabled()) {
             chain.toggleUnderline().focus().run();
         }
     };
-    return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: React.createElement(FormatUnderlinedRoundedIcon, null), label: "Underline (cmd+U)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: "Underline (cmd+U)" }));
 };
-export default UnderlineButton;
+exports.default = UnderlineButton;

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

@@ -1,16 +1,21 @@
-import React from 'react';
-import { useCommands, useHelpers } from '@remirror/react';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+"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 UndoRounded_1 = __importDefault(require("@mui/icons-material/UndoRounded"));
 const UndoButton = () => {
-    const { undo } = useCommands();
-    const { undoDepth } = useHelpers(true);
+    const { undo } = (0, react_2.useCommands)();
+    const { undoDepth } = (0, react_2.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)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: "Undo (cmd+Z)" }));
 };
-export default UndoButton;
+exports.default = UndoButton;