@squiz/formatted-text-editor 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.6.2
+
+### Patch Changes
+
+- 6ee7c0c: Updated various Squiz dependencies.
+
+## 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

@@ -2301,6 +2301,18 @@
   margin: 0;
   padding: 0;
 }
+.squiz-fte-scope .sds-dropdown-section__heading {
+  background: #f5f5f5;
+  border-radius: 0.25rem;
+  color: #707070;
+  font-weight: 600;
+  margin: 0.25rem 0;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+}
+.squiz-fte-scope .sds-dropdown-heading + div > .sds-dropdown-section:nth-child(1) .sds-dropdown-section__heading {
+  margin-top: 0;
+}
 .squiz-fte-scope .sds-dropdown-list {
   list-style-type: none;
   margin: 0;
@@ -3471,6 +3483,67 @@
 .squiz-fte-scope .sds-skip-links__button:active {
   background: #ededed;
 }
+.squiz-fte-scope .sds-sortable-list.presentation-only .sds-sortable-list__item-content {
+  margin-right: unset;
+}
+.squiz-fte-scope .sds-sortable-list__item {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  position: relative;
+}
+.squiz-fte-scope .sds-sortable-list__item:last-of-type::before {
+  content: none;
+}
+.squiz-fte-scope .sds-sortable-list__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style-type: none;
+  padding: 0;
+}
+.squiz-fte-scope .sds-sortable-list__list--dragging .sds-sortable-list__item-dots {
+  display: none;
+}
+.squiz-fte-scope .sds-sortable-list__list--dragging .sds-tooltip {
+  visibility: hidden;
+}
+.squiz-fte-scope .sds-sortable-list__item-content {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  width: 100%;
+}
+@media screen and (min-width: 576px) {
+  .squiz-fte-scope .sds-sortable-list__item-content {
+    gap: 1rem;
+  }
+}
+.squiz-fte-scope .sds-sortable-list .sds-tooltip__wrapper {
+  height: -moz-min-content;
+  height: min-content;
+}
+.squiz-fte-scope .sds-sortable-list .sds-tooltip__wrapper:has(.sds-sortable-list__item-remove) {
+  position: absolute;
+  right: 1rem;
+  top: 0.75rem;
+}
+.squiz-fte-scope .sds-sortable-list__item-drag-btn {
+  align-self: baseline;
+}
+.squiz-fte-scope .sds-sortable-list__item-drag-btn svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.squiz-fte-scope .sds-sortable-list__item-drag-btn--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.squiz-fte-scope .sds-sortable-list--presentation-grey-box .sds-sortable-list__item-content {
+  background-color: #ededed;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.625rem;
+}
 .squiz-fte-scope .sds-source-selector__item button {
   font-size: 0.875rem;
   font-weight: 400;
@@ -3588,6 +3661,12 @@
   border-radius: 50%;
   color: currentcolor;
 }
+.squiz-fte-scope .sds-spinner.spinner--lg {
+  border: 0.1875rem solid currentcolor;
+  height: 3rem;
+  width: 3rem;
+  border-right-color: transparent;
+}
 .squiz-fte-scope .sds-spinner.spinner--regular {
   border: 0.1875rem solid currentcolor;
   height: 2rem;
@@ -4368,6 +4447,9 @@
   gap: 0.75rem;
   margin-left: 3rem;
 }
+.squiz-fte-scope .sds-sequence-list .simple-list {
+  padding-inline-start: 0;
+}
 
 /* ../../node_modules/@squiz/dxp-content-tools-modal/lib/package.css */
 .dxp-ctm-section .squiz-fte-scope.squiz-fte-scope__editor.squiz-fte-scope__editor--is-disabled.squiz-fte-scope__editor--bordered {
@@ -5627,6 +5709,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.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -23,21 +23,21 @@
     "@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",
-    "@squiz/dxp-ai-client-react": "^0.2.0",
     "@squiz/dxp-content-tools-modal": "^0.3.2",
-    "@squiz/matrix-resource-browser-plugin": "^3.0.3-rc.0",
-    "@squiz/resource-browser": "^3.0.1-rc.0",
-    "@squiz/sds": "^1.0.2",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",
     "remirror": "2.0.39"
   },
   "devDependencies": {
+    "@squiz/dam-resource-browser-plugin": "^3.1.0-rc.1",
+    "@squiz/dxp-ai-client-react": "^0.2.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.1.0-rc.5",
+    "@squiz/resource-browser": "^3.1.0-rc.0",
+    "@squiz/sds": "^1.4.0",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
@@ -70,6 +70,11 @@
     "vite": "^4.5.3"
   },
   "peerDependencies": {
+    "@squiz/dam-resource-browser-plugin": "^3.1.0-rc.1",
+    "@squiz/dxp-ai-client-react": "^0.2.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.1.0-rc.5",
+    "@squiz/resource-browser": "^3.1.0-rc.0",
+    "@squiz/sds": "^1.4.0",
     "@types/react": "^16.14.0 || ^17 || ^18",
     "@types/react-dom": "^16.9.0 || ^17 || ^18",
     "lib0": "0.2.69",

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;
+  }
+}