@squiz/formatted-text-editor 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.6.1
+
+### Patch Changes
+
+- 3e9be63: Add focused classes to FTE
+
 ## 2.6.0
 
 ### Minor Changes

package/lib/Editor/Editor.js

@@ -65,7 +65,7 @@ const Editor = ({ attributes, border = true, children, className, containers, co
             button.setAttribute('type', 'button');
         });
     }, []);
-    return (react_1.default.createElement("div", { ref: wrapperRef, onBlurCapture: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', isEmpty && 'squiz-fte-scope__editor--empty', className) },
+    return (react_1.default.createElement("div", { ref: wrapperRef, onBlurCapture: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', isEmpty && 'squiz-fte-scope__editor--empty', isFocused && (children ? 'squiz-fte-scope__editor--focused-with-children' : 'squiz-fte-scope__editor--focused'), className) },
         react_1.default.createElement(react_2.Remirror, { manager: manager, initialContent: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: label, attributes: attributes },
             editable && (react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isFocused, enableTableTool: enableTableTool, container: containers?.toolbar })),
             children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),

package/lib/index.css

@@ -5627,6 +5627,12 @@
 .squiz-fte-scope .remirror-table-show-predelete.remirror-table-preselect-all th.remirror-table-controller {
   background-color: var(--rmr-color-table-predelete-controller) !important;
 }
+.squiz-fte-scope__editor--focused .remirror-table-insert-button.remirror-controllers-toggle {
+  margin-top: 50px;
+}
+.squiz-fte-scope__editor--focused-with-children .remirror-table-insert-button.remirror-controllers-toggle {
+  margin-top: 80px;
+}
 .squiz-fte-scope .editor-toolbar,
 .squiz-fte-scope__floating-popover {
   border-top-left-radius: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -23,7 +23,7 @@
     "@headlessui/react": "1.7.11",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/icons-material": "5.15.18",
-    "@remirror/extension-react-tables": "^2.2.19",
+    "@remirror/extension-react-tables": "^2.2.21",
     "@remirror/react": "2.0.35",
     "@squiz/dam-resource-browser-plugin": "^3.0.3-rc.0",
     "@squiz/dx-json-schema-lib": "^1.74.1",

package/src/Editor/Editor.tsx

@@ -94,6 +94,7 @@ const Editor = ({
         !editable && 'squiz-fte-scope__editor--is-disabled',
         border && 'squiz-fte-scope__editor--bordered',
         isEmpty && 'squiz-fte-scope__editor--empty',
+        isFocused && (children ? 'squiz-fte-scope__editor--focused-with-children' : 'squiz-fte-scope__editor--focused'),
         className,
       )}
     >

package/src/Editor/_editor.scss

@@ -433,3 +433,15 @@
 .remirror-table-show-predelete.remirror-table-preselect-all th.remirror-table-controller {
   background-color: var(--rmr-color-table-predelete-controller) !important;
 }
+
+.squiz-fte-scope__editor--focused {
+  .remirror-table-insert-button.remirror-controllers-toggle {
+    margin-top: 50px;
+  }
+}
+
+.squiz-fte-scope__editor--focused-with-children {
+  .remirror-table-insert-button.remirror-controllers-toggle {
+    margin-top: 80px;
+  }
+}