@squiz/formatted-text-editor 2.2.4 → 2.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.2.6
+
+### Patch Changes
+
+- fea05b9: Added fullscreen option to content tools modal in FTE
+
+## 2.2.5
+
+### Patch Changes
+
+- 4b34889: Update content-tools-modal
+
 ## 2.2.4
 
 ### Patch Changes

package/demo/AppContext.tsx

@@ -1,17 +1,17 @@
-import React, { PropsWithChildren } from 'react';
-import { ResourceBrowserSource, ResourceBrowserContextProvider } from '@squiz/resource-browser';
+import DamResourceBrowserPlugin from '@squiz/dam-resource-browser-plugin';
+import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
 import MatrixResourceBrowserPlugin, {
-  Source,
   Resource,
   ResourceReference,
+  Source,
 } from '@squiz/matrix-resource-browser-plugin';
-import DamResourceBrowserPlugin from '@squiz/dam-resource-browser-plugin';
+import { ResourceBrowserContextProvider, ResourceBrowserSource } from '@squiz/resource-browser';
+import React, { PropsWithChildren } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { EditorContext } from '../src';
+import { ResolveNodeType } from '../src/types';
 import resources from './resources.json';
 import sources from './sources.json';
-import { ResolveNodeType } from '../src/types';
-import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
-import { QueryClientProvider, QueryClient } from 'react-query';
 
 export type AppContextProps = PropsWithChildren;
 

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.js

@@ -3,20 +3,20 @@ 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 AiIcon_1 = require("../../../Icons/AiIcon");
-const sds_1 = require("@squiz/sds");
-const dxp_ai_client_react_1 = require("@squiz/dxp-ai-client-react");
-const react_2 = require("@remirror/react");
 const model_1 = require("@remirror/pm/model");
+const react_1 = require("@remirror/react");
+const dxp_ai_client_react_1 = require("@squiz/dxp-ai-client-react");
+const sds_1 = require("@squiz/sds");
 const prosemirror_model_1 = require("prosemirror-model");
+const react_2 = __importDefault(require("react"));
+const AiIcon_1 = require("../../../Icons/AiIcon");
 const dxp_content_tools_modal_1 = require("@squiz/dxp-content-tools-modal");
 const ContentToolsDropdown = () => {
     const aiService = (0, dxp_ai_client_react_1.useAiService)();
     const { contentTools } = aiService;
     const { updateActiveDialog } = (0, sds_1.useDialogStore)();
-    const { isSelectionEmpty, getHTML } = (0, react_2.useHelpers)();
-    const { getState, view } = (0, react_2.useRemirrorContext)();
+    const { isSelectionEmpty, getHTML } = (0, react_1.useHelpers)();
+    const { getState, view } = (0, react_1.useRemirrorContext)();
     // No content tools to show, don't show dropdown at all
     if (!contentTools || contentTools?.length === 0) {
         return null;
@@ -73,31 +73,32 @@ const ContentToolsDropdown = () => {
                             classes: ['dxp-ctm-dialog'],
                             dialogContent: {
                                 renderContent: (dialogContentProps) => {
-                                    return (react_1.default.createElement(dxp_content_tools_modal_1.ModalContent, { aiServiceOverride: aiService, content: richContent, contentTool: item, dialogContentProps: dialogContentProps, onInsertAfter: onInsertAfter, onReplace: onReplace }));
+                                    return (react_2.default.createElement(dxp_content_tools_modal_1.ModalContent, { aiServiceOverride: aiService, content: richContent, contentTool: item, dialogContentProps: dialogContentProps, onInsertAfter: onInsertAfter, onReplace: onReplace }));
                                 },
                             },
                             dialogSize: sds_1.DIALOG_SIZE_XL,
                             heading: `Rewrite content to ... ${item.name}`,
                             icon: dxp_content_tools_modal_1.ICON_DXP_AI,
-                            footer: react_1.default.createElement(dxp_content_tools_modal_1.ModalFooter, { contentTool: item }),
+                            footer: react_2.default.createElement(dxp_content_tools_modal_1.ModalFooter, { contentTool: item }),
                             stateHandler: sds_1.useDialogStore,
+                            showFullScreenButton: true,
                         };
                         updateActiveDialog(dialogProps);
                     },
                     key: item.id,
-                    label: react_1.default.createElement("span", null, item.name),
+                    label: react_2.default.createElement("span", null, item.name),
                 },
             ],
             key: item.id,
         };
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.VerticalDivider, null),
-        hasContent && (react_1.default.createElement(sds_1.Dropdown, { title: "Content tools", "aria-label": "Content tools", buttonProps: {
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.VerticalDivider, null),
+        hasContent && (react_2.default.createElement(sds_1.Dropdown, { title: "Content tools", "aria-label": "Content tools", buttonProps: {
                 format: sds_1.BUTTON_FORMAT_TRANSPARENT,
                 icon: AiIcon_1.ICON_AI,
                 theme: sds_1.BUTTON_THEME_DEFAULT,
             }, className: "content-tools-dropdown", dropdownPosition: sds_1.DROPDOWN_POSITION_RIGHT, heading: 'Rewrite to...', sections: dropdownItems ?? [], disabled: !hasContent })),
-        !hasContent && react_1.default.createElement("div", { className: "content-tools-dropdown--disabled" }, AiIcon_1.ICON_AI)));
+        !hasContent && react_2.default.createElement("div", { className: "content-tools-dropdown--disabled" }, AiIcon_1.ICON_AI)));
 };
 exports.default = ContentToolsDropdown;

package/lib/index.css

@@ -1522,6 +1522,20 @@
 .squiz-fte-scope .chip-filter--no-icon .chip-filter__btn-content {
   padding-left: 0.25rem;
 }
+.squiz-fte-scope .chip-filter--radio-simplified .chip-filter__dropdown-btn-container,
+.squiz-fte-scope .chip-filter--radio-simplified .sds-form-control-option button[role=radio] {
+  display: none;
+}
+.squiz-fte-scope .chip-filter--radio-simplified .sds-form-control-item {
+  cursor: pointer;
+  transition: 0.3s background-color ease-in-out;
+}
+.squiz-fte-scope .chip-filter--radio-simplified .sds-form-control-item:hover {
+  background-color: #ededed;
+}
+.squiz-fte-scope .chip-filter--radio-simplified .sds-form-control-option {
+  padding-left: 1.25rem;
+}
 .squiz-fte-scope .chip-filter__btn-content {
   align-items: center;
   display: flex;
@@ -1567,6 +1581,9 @@
   line-height: 1.6875rem;
   color: #000;
 }
+.squiz-fte-scope .chip-filter__dropdown-header .chip-filter__dropdown-title {
+  padding-left: 1.25rem;
+}
 .squiz-fte-scope .chip-filter__dropdown-body {
   max-height: 17rem;
   overflow-y: auto;
@@ -2080,6 +2097,11 @@
 .squiz-fte-scope .sds-dialog.xl {
   max-width: 62.5rem;
 }
+.squiz-fte-scope .sds-dialog.fullscreen {
+  height: 100%;
+  max-width: 100%;
+  width: 100%;
+}
 .squiz-fte-scope .sds-dialog.sm-md .sds-form,
 .squiz-fte-scope .sds-dialog.md .sds-form {
   max-width: 100%;
@@ -2088,13 +2110,20 @@
   padding: 1.5rem 1.5rem 1rem 1.5rem;
   position: relative;
 }
-.squiz-fte-scope .sds-dialog__close {
+.squiz-fte-scope .sds-dialog__action-buttons {
+  display: flex;
+  gap: 0.75rem;
   padding: 0.75rem;
   position: absolute;
   right: 0;
   top: 0;
 }
-.squiz-fte-scope .sds-dialog__close:hover .svg-wrapper svg {
+.squiz-fte-scope .sds-dialog__action-buttons button {
+  background: none;
+  border: 0;
+  color: #707070;
+}
+.squiz-fte-scope .sds-dialog__action-buttons button:hover .svg-wrapper svg {
   fill: #3d3d3d;
 }
 .squiz-fte-scope .sds-dialog__heading {
@@ -2170,6 +2199,9 @@
     height: -moz-fit-content;
     height: fit-content;
   }
+  .squiz-fte-scope .sds-dialog__fullscreen {
+    display: none;
+  }
   .squiz-fte-scope .sds-dialog__body {
     flex-grow: 1;
   }
@@ -2665,6 +2697,9 @@
   right: 0;
   top: 0;
 }
+.squiz-fte-scope .sds-text-field:has(.sds-text-field__copy-icon) input {
+  padding-right: 2rem;
+}
 .squiz-fte-scope .sds-text-field.readonly input,
 .squiz-fte-scope .sds-text-field.readonly textarea {
   background: rgba(0, 0, 0, 0.04);
@@ -4214,6 +4249,7 @@
   display: flex;
   flex-flow: row nowrap;
   gap: 0.25rem;
+  height: 100%;
 }
 .squiz-fte-scope .dxp-ctm-content > .dxp-ctm-section {
   display: flex;
@@ -4227,6 +4263,10 @@
 .squiz-fte-scope .dxp-ctm-content > .dxp-ctm-section > .squiz-fte-scope:not(.dxp-ctm-section__spinner) {
   background-color: #fff;
 }
+.squiz-fte-scope .dxp-ctm-dialog .sds-dialog__content {
+  height: 100%;
+  max-height: 100%;
+}
 .squiz-fte-scope .dxp-ctm-dialog > .sds-dialog__footer {
   align-items: center;
   color: #707070;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -27,10 +27,10 @@
     "@squiz/dam-resource-browser-plugin": "^0.9.0-rc.0",
     "@squiz/dx-json-schema-lib": "^1.72.0",
     "@squiz/dxp-ai-client-react": "^0.2.0",
-    "@squiz/dxp-content-tools-modal": "^0.2.0",
+    "@squiz/dxp-content-tools-modal": "^0.3.1",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
-    "@squiz/sds": "^1.0.0",
+    "@squiz/sds": "^1.0.2",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",

package/src/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { ICON_AI } from '../../../Icons/AiIcon';
+import { DOMSerializer } from '@remirror/pm/model';
+import { VerticalDivider, useHelpers, useRemirrorContext } from '@remirror/react';
+import { useAiService } from '@squiz/dxp-ai-client-react';
 import {
   BUTTON_FORMAT_TRANSPARENT,
   BUTTON_THEME_DEFAULT,
@@ -11,10 +12,9 @@ import {
   DropdownSectionData,
   useDialogStore,
 } from '@squiz/sds';
-import { useAiService } from '@squiz/dxp-ai-client-react';
-import { VerticalDivider, useHelpers, useRemirrorContext } from '@remirror/react';
-import { DOMSerializer } from '@remirror/pm/model';
 import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
+import React from 'react';
+import { ICON_AI } from '../../../Icons/AiIcon';
 
 import { ICON_DXP_AI, ModalContent, ModalFooter } from '@squiz/dxp-content-tools-modal';
 
@@ -109,6 +109,7 @@ const ContentToolsDropdown = () => {
               icon: ICON_DXP_AI,
               footer: <ModalFooter contentTool={item} />,
               stateHandler: useDialogStore,
+              showFullScreenButton: true,
             };
 
             updateActiveDialog(dialogProps as DialogProps);