@squiz/formatted-text-editor 2.2.3 → 2.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.2.4
+
+### Patch Changes
+
+- 7837e7f: AI Content Tools button now launches modal
+
 ## 2.2.3
 
 ### Patch Changes

package/demo/App.tsx

@@ -95,6 +95,7 @@ function App() {
           >
             {showChildren && <ComponentHandlers />}
           </Editor>
+          {activeDialog && <Dialog {...activeDialog} />}
         </AppContext>
       </div>
       <h1>Document</h1>
@@ -107,7 +108,6 @@ function App() {
           <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />
         </div>
       </div>
-      {activeDialog && <Dialog {...activeDialog} />}
     </div>
   );
 }

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

@@ -8,9 +8,9 @@ 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 dxp_content_tools_modal_1 = require("@squiz/dxp-content-tools-modal");
 const model_1 = require("@remirror/pm/model");
 const prosemirror_model_1 = require("prosemirror-model");
+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;
@@ -70,6 +70,7 @@ const ContentToolsDropdown = () => {
                         // If we don't have a selection, use all text
                         const richContent = isSelectionEmpty() ? getHTML() : getSelectedRichText(); // NOTE: selected rich text may not work as expected
                         const dialogProps = {
+                            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 }));
@@ -78,6 +79,7 @@ const ContentToolsDropdown = () => {
                             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 }),
                             stateHandler: sds_1.useDialogStore,
                         };
                         updateActiveDialog(dialogProps);

package/lib/index.css

@@ -2665,9 +2665,6 @@
   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);
@@ -4230,6 +4227,32 @@
 .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__footer {
+  align-items: center;
+  color: #707070;
+  display: flex;
+}
+.squiz-fte-scope .dxp-ctm-dialog > .sds-dialog__footer > .sds-dialog__footer-text {
+  flex: 1;
+  padding: 0;
+}
+.squiz-fte-scope .dxp-ctm-dialog > .sds-dialog__footer > .sds-dialog__footer-text > span {
+  align-items: center;
+  display: flex;
+  font-size: 0.875rem;
+  gap: 0.5rem;
+}
+.squiz-fte-scope .dxp-ctm-dialog .dxp-ctm-flagged {
+  align-items: center;
+  color: #000;
+  display: flex;
+  font-weight: 600;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
+}
+.squiz-fte-scope .dxp-ctm-dialog .dxp-ctm-flagged svg path {
+  fill: #e96900;
+}
 .squiz-fte-scope .dxp-ctm-section {
   background-color: #ededed;
   border-radius: 0.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "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.1.2",
+    "@squiz/dxp-content-tools-modal": "^0.2.0",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
-    "@squiz/sds": "^1.0.0-alpha.59",
+    "@squiz/sds": "^1.0.0",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",

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

@@ -13,10 +13,11 @@ import {
 } from '@squiz/sds';
 import { useAiService } from '@squiz/dxp-ai-client-react';
 import { VerticalDivider, useHelpers, useRemirrorContext } from '@remirror/react';
-import { ICON_DXP_AI, ModalContent } from '@squiz/dxp-content-tools-modal';
 import { DOMSerializer } from '@remirror/pm/model';
 import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
 
+import { ICON_DXP_AI, ModalContent, ModalFooter } from '@squiz/dxp-content-tools-modal';
+
 const ContentToolsDropdown = () => {
   const aiService = useAiService();
   const { contentTools } = aiService;
@@ -87,7 +88,8 @@ const ContentToolsDropdown = () => {
             // If we don't have a selection, use all text
             const richContent = isSelectionEmpty() ? getHTML() : getSelectedRichText(); // NOTE: selected rich text may not work as expected
 
-            const dialogProps: DialogProps = {
+            const dialogProps: unknown = {
+              classes: ['dxp-ctm-dialog'],
               dialogContent: {
                 renderContent: (dialogContentProps: DialogContentProps) => {
                   return (
@@ -105,10 +107,11 @@ const ContentToolsDropdown = () => {
               dialogSize: DIALOG_SIZE_XL,
               heading: `Rewrite content to ... ${item.name}`,
               icon: ICON_DXP_AI,
+              footer: <ModalFooter contentTool={item} />,
               stateHandler: useDialogStore,
             };
 
-            updateActiveDialog(dialogProps);
+            updateActiveDialog(dialogProps as DialogProps);
           },
           key: item.id,
           label: <span>{item.name}</span>,