@squiz/formatted-text-editor 1.34.1-alpha.5 → 1.34.1-alpha.6

package/lib/EditorToolbar/FloatingToolbar.js

@@ -65,7 +65,7 @@ const FloatingToolbar = () => {
     }
     else if (!marks?.[Extensions_1.MarkName.Link].isActive && !marks?.[Extensions_1.MarkName.AssetLink].isActive) {
         // if none of the selected text is a link show the option to create a link.
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
     }
     // Clear formatting will always be the last button in the toolbar
     if (extensionNames.clearFormatting && clearFormatting.enabled()) {

package/lib/EditorToolbar/Toolbar.js

@@ -24,7 +24,7 @@ const Toolbar = () => {
         extensionNames.history && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(UndoButton_1.default, null),
             react_1.default.createElement(RedoButton_1.default, null),
-            react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" }))),
+            react_1.default.createElement(react_components_1.VerticalDivider, null))),
         extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && react_1.default.createElement(TextTypeDropdown_1.default, null),
         extensionNames.bold && react_1.default.createElement(BoldButton_1.default, null),
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),

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

@@ -11,11 +11,11 @@ const JustifyAlignButton_1 = __importDefault(require("./JustifyAlign/JustifyAlig
 const react_components_1 = require("@remirror/react-components");
 const TextAlignButtons = () => {
     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(react_components_1.VerticalDivider, null),
         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" })));
+        react_1.default.createElement(react_components_1.VerticalDivider, null)));
 };
 exports.default = TextAlignButtons;

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

@@ -35,6 +35,6 @@ const TextTypeDropdown = () => {
             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" })));
+        react_1.default.createElement(react_2.VerticalDivider, null)));
 };
 exports.default = TextTypeDropdown;

package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js

@@ -15,7 +15,7 @@ let ClearFormattingExtension = class ClearFormattingExtension extends core_1.Pla
         return 'clearFormatting';
     }
     clearFormatting() {
-        return ({ dispatch, tr, state, view }) => {
+        return ({ dispatch, tr, state }) => {
             const { empty, ranges } = state.selection;
             const schema = state.schema;
             const formattingNodes = (0, getNodeNamesByGroup_1.getNodeNamesByGroup)(schema, core_1.ExtensionTag.FormattingNode);
@@ -49,12 +49,7 @@ let ClearFormattingExtension = class ClearFormattingExtension extends core_1.Pla
                     }
                 });
             });
-            if (!empty) {
-                // Move the cursor to the end of the selection
-                tr.setSelection((0, core_1.getTextSelection)({ from: state.selection.to, to: state.selection.to }, tr.doc));
-            }
             dispatch?.(tr);
-            view?.focus();
             return isChanged;
         };
     }

package/lib/index.css

@@ -812,12 +812,12 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider),
-.squiz-fte-scope .squiz-fte-scope__floating-popover > *:not(:first-child, .editor-divider) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .MuiDivider-root),
+.squiz-fte-scope__floating-popover > *:not(:first-child, .MuiDivider-root) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-toolbar .editor-divider,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
+.squiz-fte-scope .editor-toolbar .MuiDivider-root,
+.squiz-fte-scope__floating-popover .MuiDivider-root {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -827,12 +827,12 @@
   height: auto;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-btn {
   padding: 0.25rem;
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope__floating-popover {
@@ -851,7 +851,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
+.squiz-fte-scope__floating-popover .MuiDivider-root {
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -1042,12 +1042,12 @@
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
+.squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
   padding: 0.25rem;
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope .squiz-fte-modal-footer__button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.34.1-alpha.5",
+  "version": "1.34.1-alpha.6",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.34.1-alpha.5",
-    "@squiz/resource-browser": "1.34.1-alpha.5",
+    "@squiz/dx-json-schema-lib": "1.34.1-alpha.6",
+    "@squiz/resource-browser": "1.34.1-alpha.6",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "96b2fec093ea7e6746c0718074221b9e88b989ba"
+  "gitHead": "82f279a64c198e72d7ccfb6296624052bd4ce510"
 }

package/postcss.config.js

@@ -5,7 +5,7 @@ module.exports = {
     require('postcss-nested'),
     require('postcss-prefix-selector')({
       prefix: '.squiz-fte-scope',
-      exclude: ['.squiz-fte-scope__floating-popover'],
+      exclude: [/\.squiz-fte-scope__floating-popover/],
       includeFiles: ['./src/index.scss'],
     }),
   ],

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -41,10 +41,7 @@ export const FloatingToolbar = () => {
     ];
   } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
     // if none of the selected text is a link show the option to create a link.
-    buttons.push(
-      <VerticalDivider key="link-divider" className="editor-divider" />,
-      <LinkButton key="add-link" inPopover={true} />,
-    );
+    buttons.push(<VerticalDivider key="link-divider" />, <LinkButton key="add-link" inPopover={true} />);
   }
 
   // Clear formatting will always be the last button in the toolbar

package/src/EditorToolbar/Toolbar.tsx

@@ -22,7 +22,7 @@ export const Toolbar = () => {
         <>
           <UndoButton />
           <RedoButton />
-          <VerticalDivider className="editor-divider" />
+          <VerticalDivider />
         </>
       )}
       {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -8,12 +8,12 @@ import { VerticalDivider } from '@remirror/react-components';
 const TextAlignButtons = () => {
   return (
     <>
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
       <LeftAlignButton />
       <CenterAlignButton />
       <RightAlignButton />
       <JustifyAlignButton />
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
     </>
   );
 };

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -36,7 +36,7 @@ const TextTypeDropdown = () => {
         <HeadingButton level={6} />
         <PreformattedButton />
       </ToolbarDropdown>
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
     </>
   );
 };

package/src/EditorToolbar/_floating-toolbar.scss

@@ -3,7 +3,7 @@
   @extend .editor-toolbar;
   @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
 
-  .editor-divider {
+  .MuiDivider-root {
     @apply my-0;
   }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -4,11 +4,11 @@
   display: flex;
   justify-items: center;
 
-  > *:not(:first-child, .editor-divider) {
+  > *:not(:first-child, .MuiDivider-root) {
     margin: 0 0 0 2px;
   }
 
-  .editor-divider {
+  .MuiDivider-root {
     @apply -my-1 mx-1 border;
     margin-right: 2px;
     height: auto;

package/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts

@@ -1,12 +1,4 @@
-import {
-  command,
-  extension,
-  PlainExtension,
-  CommandFunction,
-  Mark,
-  ExtensionTag,
-  getTextSelection,
-} from '@remirror/core';
+import { command, extension, PlainExtension, CommandFunction, Mark, ExtensionTag } from '@remirror/core';
 import { getNodeNamesByGroup } from '../../utils/getNodeNamesByGroup';
 import { getMarkNamesByGroup } from '../../utils/getMarkNamesByGroup';
 
@@ -18,7 +10,7 @@ export class ClearFormattingExtension extends PlainExtension {
 
   @command()
   clearFormatting(): CommandFunction {
-    return ({ dispatch, tr, state, view }) => {
+    return ({ dispatch, tr, state }) => {
       const { empty, ranges } = state.selection;
       const schema = state.schema;
 
@@ -57,13 +49,7 @@ export class ClearFormattingExtension extends PlainExtension {
         });
       });
 
-      if (!empty) {
-        // Move the cursor to the end of the selection
-        tr.setSelection(getTextSelection({ from: state.selection.to, to: state.selection.to }, tr.doc));
-      }
-
       dispatch?.(tr);
-      view?.focus();
 
       return isChanged;
     };