@squiz/formatted-text-editor 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.2.2
+
+### Patch Changes
+
+- e5b062a: AI Content Tools button now launches modal
+
 ## 2.2.1
 
 ### Patch Changes

package/demo/App.tsx

@@ -7,6 +7,7 @@ import Button from '../src/ui/Button/Button';
 import TextFieldsOutlinedIcon from '@mui/icons-material/TextFieldsOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import { VerticalDivider } from '@remirror/react-components';
+import { Dialog, useDialogStore } from '@squiz/sds';
 const ComponentHandlers = () => (
   <div style={{ display: 'flex', justifyContent: 'flex-end', maxHeight: '2rem' }}>
     <Button icon={<TextFieldsOutlinedIcon />} onClick={(x) => x} />
@@ -24,6 +25,7 @@ function App() {
   const [editable, setEditable] = useState(true);
   const [enableTableTool, setEnableTableTool] = useState(true);
   const [border, setBorder] = useState(true);
+  const { activeDialog } = useDialogStore();
 
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
     try {
@@ -105,6 +107,7 @@ function App() {
           <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />
         </div>
       </div>
+      {activeDialog && <Dialog {...activeDialog} />}
     </div>
   );
 }

package/demo/index.scss

@@ -31,3 +31,7 @@ h1 {
 .error {
   color: red;
 }
+
+.sr-only {
+  display: none;
+}

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

@@ -8,28 +8,94 @@ 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 ContentToolsDropdown = () => {
-    const { contentTools } = (0, dxp_ai_client_react_1.useAiService)();
-    const dropdownItems = contentTools?.map((item) => ({
-        items: [
-            {
-                action: () => alert(JSON.stringify(item, null, 2)),
-                key: item.id,
-                label: react_1.default.createElement("span", null, item.name),
-            },
-        ],
-        key: item.id,
-    }));
+    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)();
     // No content tools to show, don't show dropdown at all
     if (!contentTools || contentTools?.length === 0) {
         return null;
     }
+    const hasContent = getState().doc.textContent.length > 0;
+    const getSelectedRichText = () => {
+        const { from, to } = getState().selection;
+        const fragment = getState().doc.slice(from, to).content;
+        const div = document.createElement('div');
+        fragment.forEach((node) => {
+            div.appendChild(model_1.DOMSerializer.fromSchema(getState().schema).serializeNode(node));
+        });
+        return div.innerHTML;
+    };
+    const onInsertAfter = (content) => {
+        const schema = getState().schema;
+        const doc = getState().doc;
+        const tr = getState().tr;
+        // Parse the HTML string into a document fragment
+        const element = document.createElement('div');
+        element.innerHTML = content;
+        const newContent = prosemirror_model_1.DOMParser.fromSchema(schema).parse(element);
+        // Append the new content to the existing document
+        const newTransaction = tr.insert(doc.content.size, newContent.content);
+        view.dispatch(newTransaction);
+    };
+    const onReplace = (content) => {
+        const schema = getState().schema;
+        const { from, to, empty } = getState().selection;
+        const { tr } = getState();
+        // Parse the HTML string into a document fragment
+        const element = document.createElement('div');
+        element.innerHTML = content;
+        const newContent = prosemirror_model_1.DOMParser.fromSchema(schema).parse(element);
+        if (empty) {
+            // If there is no selection, replace the entire document content
+            const newTransaction = tr.replaceWith(0, getState().doc.content.size, newContent.content);
+            view.dispatch(newTransaction);
+        }
+        else {
+            // Replace the selected content with the new content
+            const newTransaction = tr.replaceWith(from, to, newContent.content);
+            view.dispatch(newTransaction);
+        }
+    };
+    const dropdownItems = contentTools?.map((item) => {
+        return {
+            items: [
+                {
+                    action: () => {
+                        // 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 = {
+                            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 }));
+                                },
+                            },
+                            dialogSize: sds_1.DIALOG_SIZE_XL,
+                            heading: `Rewrite content to ... ${item.name}`,
+                            icon: dxp_content_tools_modal_1.ICON_DXP_AI,
+                            stateHandler: sds_1.useDialogStore,
+                        };
+                        updateActiveDialog(dialogProps);
+                    },
+                    key: item.id,
+                    label: react_1.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),
-        react_1.default.createElement(sds_1.Dropdown, { title: "Content tools", "aria-label": "Content tools", buttonProps: {
+        hasContent && (react_1.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 ?? [] })));
+            }, 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)));
 };
 exports.default = ContentToolsDropdown;

package/lib/index.css

@@ -2655,7 +2655,8 @@
 .squiz-fte-scope .sds-text-field textarea {
   resize: vertical;
 }
-.squiz-fte-scope .sds-text-field .sds-field-error__icon {
+.squiz-fte-scope .sds-text-field .sds-field-error__icon,
+.squiz-fte-scope .sds-text-field .sds-text-field__copy-icon {
   align-items: center;
   display: flex;
   height: 100%;
@@ -2664,6 +2665,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);
@@ -4179,6 +4183,63 @@
   width: 400px;
 }
 
+/* ../../node_modules/@squiz/dxp-content-tools-modal/lib/package.css */
+@keyframes skeleton-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.squiz-fte-scope .dxp-ctm-section__header {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 36px;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.squiz-fte-scope .dxp-ctm-section__header h3 {
+  font-size: 0.96rem;
+}
+.squiz-fte-scope .dxp-ctm-section__spinner {
+  display: flex;
+  justify-content: center;
+  padding-top: 1.5rem;
+}
+.squiz-fte-scope .dxp-ctm-content {
+  align-content: stretch;
+  align-items: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.25rem;
+}
+.squiz-fte-scope .dxp-ctm-content > .dxp-ctm-section {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 1rem;
+}
+.squiz-fte-scope .dxp-ctm-content > .dxp-ctm-section > .squiz-fte-scope {
+  flex-grow: 1;
+}
+.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-section {
+  background-color: #ededed;
+  border-radius: 0.5rem;
+  min-height: 400px;
+  padding: 0.5rem;
+}
+.squiz-fte-scope .dxp-ctm-section__header h3 {
+  margin: 0;
+}
+
 /* src/index.scss */
 .squiz-fte-scope *,
 .squiz-fte-scope ::before,
@@ -5376,6 +5437,12 @@
 .squiz-fte-scope .editor-toolbar__tools .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
+.squiz-fte-scope .editor-toolbar .content-tools-dropdown--disabled,
+.squiz-fte-scope__floating-popover .content-tools-dropdown--disabled {
+  cursor: not-allowed;
+  filter: grayscale(100%);
+  padding: 6px 8px;
+}
 .squiz-fte-scope .header-toolbar {
   transition-duration: 0.3s;
   transition-property: max-height, opacity;
@@ -5746,4 +5813,10 @@
    * @license
    * Copyright Squiz Australia Pty Ltd. All Rights Reserved.
    *)
+
+@squiz/dxp-content-tools-modal/lib/package.css:
+  (*!
+   * @license
+   * Copyright Squiz Australia Pty Ltd. All Rights Reserved.
+   *)
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -24,12 +24,13 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
+    "@squiz/dam-resource-browser-plugin": "^0.9.0-rc.0",
     "@squiz/dx-json-schema-lib": "^1.72.0",
-    "@squiz/dxp-ai-client-react": "^0.1.3-alpha",
+    "@squiz/dxp-ai-client-react": "^0.2.0",
+    "@squiz/dxp-content-tools-modal": "^0.1.0",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
-    "@squiz/sds": "^1.0.0-alpha.50",
-    "@squiz/dam-resource-browser-plugin": "^0.9.0-rc.0",
+    "@squiz/sds": "^1.0.0-alpha.59",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",

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

@@ -10,6 +10,44 @@ jest.mock('@squiz/dxp-ai-client-react', () => ({
   useAiService: jest.fn(),
 }));
 
+jest.mock('@remirror/react', () => {
+  const actualModule = jest.requireActual('@remirror/react');
+
+  return {
+    ...actualModule,
+    useHelpers: () => ({
+      isSelectionEmpty: jest.fn().mockReturnValue(false),
+      getHTML: jest.fn().mockReturnValue('<strong>test</strong>'),
+    }),
+    useRemirrorContext: () => ({
+      getState: jest.fn().mockReturnValue({
+        doc: {
+          textContent: 'test',
+          slice: jest.fn().mockReturnValue({
+            content: { forEach: jest.fn() },
+          }),
+        },
+        selection: {
+          from: 1,
+          to: 2,
+        },
+      }),
+      view: jest.fn().mockReturnValue({}),
+    }),
+  };
+});
+
+jest.mock('@squiz/sds', () => {
+  const actualModule = jest.requireActual('@squiz/sds');
+
+  return {
+    ...actualModule,
+    useDialogStore: () => ({
+      updateActiveDialog: jest.fn(),
+    }),
+  };
+});
+
 // Cast useAiService to a Jest mock
 const mockedUseAiService = useAiService as jest.MockedFunction<typeof useAiService>;
 

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

@@ -1,44 +1,143 @@
 import React from 'react';
 import { ICON_AI } from '../../../Icons/AiIcon';
-import { BUTTON_FORMAT_TRANSPARENT, BUTTON_THEME_DEFAULT, DROPDOWN_POSITION_RIGHT, Dropdown } from '@squiz/sds';
+import {
+  BUTTON_FORMAT_TRANSPARENT,
+  BUTTON_THEME_DEFAULT,
+  DIALOG_SIZE_XL,
+  DROPDOWN_POSITION_RIGHT,
+  DialogContentProps,
+  DialogProps,
+  Dropdown,
+  DropdownSectionData,
+  useDialogStore,
+} from '@squiz/sds';
 import { useAiService } from '@squiz/dxp-ai-client-react';
-import { VerticalDivider } from '@remirror/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';
 
 const ContentToolsDropdown = () => {
-  const { contentTools } = useAiService();
-
-  const dropdownItems = contentTools?.map((item) => ({
-    items: [
-      {
-        action: () => alert(JSON.stringify(item, null, 2)),
-        key: item.id,
-        label: <span>{item.name}</span>,
-      },
-    ],
-    key: item.id,
-  }));
+  const aiService = useAiService();
+  const { contentTools } = aiService;
+  const { updateActiveDialog } = useDialogStore();
+  const { isSelectionEmpty, getHTML } = useHelpers();
+  const { getState, view } = useRemirrorContext();
 
   // No content tools to show, don't show dropdown at all
   if (!contentTools || contentTools?.length === 0) {
     return null;
   }
 
+  const hasContent = getState().doc.textContent.length > 0;
+
+  const getSelectedRichText = () => {
+    const { from, to } = getState().selection;
+    const fragment = getState().doc.slice(from, to).content;
+    const div = document.createElement('div');
+
+    fragment.forEach((node) => {
+      div.appendChild(DOMSerializer.fromSchema(getState().schema).serializeNode(node));
+    });
+
+    return div.innerHTML;
+  };
+
+  const onInsertAfter = (content: string) => {
+    const schema = getState().schema;
+    const doc = getState().doc;
+    const tr = getState().tr;
+
+    // Parse the HTML string into a document fragment
+    const element = document.createElement('div');
+    element.innerHTML = content;
+    const newContent = ProseMirrorDOMParser.fromSchema(schema).parse(element);
+
+    // Append the new content to the existing document
+    const newTransaction = tr.insert(doc.content.size, newContent.content);
+    view.dispatch(newTransaction);
+  };
+
+  const onReplace = (content: string) => {
+    const schema = getState().schema;
+    const { from, to, empty } = getState().selection;
+    const { tr } = getState();
+
+    // Parse the HTML string into a document fragment
+    const element = document.createElement('div');
+    element.innerHTML = content;
+    const newContent = ProseMirrorDOMParser.fromSchema(schema).parse(element);
+
+    if (empty) {
+      // If there is no selection, replace the entire document content
+      const newTransaction = tr.replaceWith(0, getState().doc.content.size, newContent.content);
+      view.dispatch(newTransaction);
+    } else {
+      // Replace the selected content with the new content
+      const newTransaction = tr.replaceWith(from, to, newContent.content);
+      view.dispatch(newTransaction);
+    }
+  };
+
+  const dropdownItems: Array<DropdownSectionData> = contentTools?.map((item) => {
+    return {
+      items: [
+        {
+          action: () => {
+            // 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 = {
+              dialogContent: {
+                renderContent: (dialogContentProps: DialogContentProps) => {
+                  return (
+                    <ModalContent
+                      aiServiceOverride={aiService}
+                      content={richContent}
+                      contentTool={item}
+                      dialogContentProps={dialogContentProps}
+                      onInsertAfter={onInsertAfter}
+                      onReplace={onReplace}
+                    />
+                  );
+                },
+              },
+              dialogSize: DIALOG_SIZE_XL,
+              heading: `Rewrite content to ... ${item.name}`,
+              icon: ICON_DXP_AI,
+              stateHandler: useDialogStore,
+            };
+
+            updateActiveDialog(dialogProps);
+          },
+          key: item.id,
+          label: <span>{item.name}</span>,
+        },
+      ],
+      key: item.id,
+    };
+  });
+
   return (
     <>
       <VerticalDivider />
-      <Dropdown
-        title="Content tools"
-        aria-label="Content tools"
-        buttonProps={{
-          format: BUTTON_FORMAT_TRANSPARENT,
-          icon: ICON_AI,
-          theme: BUTTON_THEME_DEFAULT,
-        }}
-        className="content-tools-dropdown"
-        dropdownPosition={DROPDOWN_POSITION_RIGHT}
-        heading={'Rewrite to...'}
-        sections={dropdownItems ?? []}
-      />
+      {hasContent && (
+        <Dropdown
+          title="Content tools"
+          aria-label="Content tools"
+          buttonProps={{
+            format: BUTTON_FORMAT_TRANSPARENT,
+            icon: ICON_AI,
+            theme: BUTTON_THEME_DEFAULT,
+          }}
+          className="content-tools-dropdown"
+          dropdownPosition={DROPDOWN_POSITION_RIGHT}
+          heading={'Rewrite to...'}
+          sections={dropdownItems ?? []}
+          disabled={!hasContent}
+        />
+      )}
+      {!hasContent && <div className="content-tools-dropdown--disabled">{ICON_AI}</div>}
     </>
   );
 };

package/src/EditorToolbar/_toolbar.scss

@@ -21,6 +21,12 @@
       }
     }
   }
+
+  .content-tools-dropdown--disabled {
+    cursor: not-allowed;
+    filter: grayscale(100%);
+    padding: 6px 8px;
+  }
 }
 
 .header-toolbar {

package/src/index.scss

@@ -4,6 +4,7 @@
 @import 'tailwindcss/utilities';
 
 @import '@squiz/sds/lib/package.css';
+@import '@squiz/dxp-content-tools-modal/lib/package.css';
 
 /* So we can use icons inside of FTE content */
 @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded';