@squiz/formatted-text-editor 2.0.1-rc.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.1.0
+
+### Minor Changes
+
+- 37094f9: Added content tools dropdown & context to FTE
+
+## 2.0.1
+
+### Patch Changes
+
+- 6838083: Updated repo package-lock.json to consume shared resource browsers with bumped versions with correct peer dependencies to be consumed by both Matrix and Page Builder
+
 ## 2.0.0
 
 ### Major Changes

package/demo/AppContext.tsx

@@ -9,6 +9,7 @@ import { EditorContext } from '../src';
 import resources from './resources.json';
 import sources from './sources.json';
 import { ResolveNodeType } from '../src/types';
+import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
 
 export type AppContextProps = PropsWithChildren;
 export const AppContext = ({ children }: AppContextProps) => (
@@ -45,26 +46,48 @@ export const AppContext = ({ children }: AppContextProps) => (
       ],
     }}
   >
-    <EditorContext.Provider
-      value={{
-        matrix: {
-          matrixDomain: 'https://matrix-domain.squiz.net',
+    <AiServiceProvider
+      clientConfig={{
+        // We are using a simple Express proxy here for testing locally in FTE
+        // You can find this proxy here: https://gitlab.squiz.net/tgrob/dxp-ai-client-proxy
+        baseUrl: 'http://localhost:7777',
+        baseApiParams: {
+          headers: {
+            // You will need to create an API key to test this in FTE, details can be found here:
+            // https://squizgroup.atlassian.net/wiki/spaces/PRODUCT/pages/2895119377/FEaaS+Playbook+Configuring+a+Matrix+instance+for+the+Component+Service#Create-an-API-key
+            'x-api-key': '',
+          },
         },
-        resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
-          const nodeResource = node.matrixAssetId;
-          const flattenResources = (resources: unknown[]) => {
-            return [
-              ...resources,
-              ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
-            ];
-          };
-
-          const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
-          return Promise.resolve(resource.url || '');
+        customFetch: async (input, init) => {
+          const response = await fetch(input, init);
+          return response;
         },
       }}
+      tags={['tag1']}
     >
-      {children}
-    </EditorContext.Provider>
+      <EditorContext.Provider
+        value={{
+          matrix: {
+            matrixDomain: 'https://matrix-domain.squiz.net',
+          },
+          resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
+            const nodeResource = node.matrixAssetId;
+            const flattenResources = (resources: unknown[]) => {
+              return [
+                ...resources,
+                ...resources.flatMap((resource) =>
+                  '_children' in resource ? flattenResources(resource._children) : [],
+                ),
+              ];
+            };
+
+            const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
+            return Promise.resolve(resource.url || '');
+          },
+        }}
+      >
+        {children}
+      </EditorContext.Provider>
+    </AiServiceProvider>
   </ResourceBrowserContextProvider>
 );

package/jest.config.ts

@@ -23,5 +23,5 @@ export default {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
       '<rootDir>/file-transformer.js',
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts', '<rootDir>/jest.setup.ts'],
 };

package/jest.setup.ts

@@ -0,0 +1,16 @@
+import { useAiService } from '@squiz/dxp-ai-client-react';
+
+// Mock the module
+jest.mock('@squiz/dxp-ai-client-react', () => ({
+  useAiService: jest.fn(),
+}));
+
+// Cast useAiService to a Jest mock
+const mockedUseAiService = useAiService as jest.MockedFunction<typeof useAiService>;
+
+beforeEach(() => {
+  // Provide the mock implementation before each test
+  mockedUseAiService.mockReturnValue({
+    contentTools: [],
+  } as any);
+});

package/lib/EditorToolbar/Toolbar.js

@@ -21,6 +21,7 @@ const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting
 const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
 const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/HorizontalLineButton"));
 const TableButton_1 = __importDefault(require("./Tools/Table/TableButton"));
+const ContentToolsDropdown_1 = __importDefault(require("./Tools/ContentTools/ContentToolsDropdown"));
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible, enableTableTool }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
@@ -42,6 +43,7 @@ const Toolbar = ({ isVisible, enableTableTool }) => {
                 react_1.default.createElement(RemoveLinkButton_1.default, null))),
             extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
             extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null),
-            enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null))));
+            enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null),
+            react_1.default.createElement(ContentToolsDropdown_1.default, null))));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ContentToolsDropdown: () => React.JSX.Element | null;
+export default ContentToolsDropdown;

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

@@ -0,0 +1,35 @@
+"use strict";
+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 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,
+    }));
+    // No content tools to show, don't show dropdown at all
+    if (contentTools.length === 0) {
+        return null;
+    }
+    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: {
+                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 })));
+};
+exports.default = ContentToolsDropdown;

package/lib/EditorToolbar/Tools/Table/TableButton.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const react_components_1 = require("@remirror/react-components");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const TableViewRounded_1 = __importDefault(require("@mui/icons-material/TableViewRounded"));
 const TableButton = () => {
@@ -16,7 +15,6 @@ const TableButton = () => {
         createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" }),
-        react_1.default.createElement(react_components_1.VerticalDivider, null)));
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" })));
 };
 exports.default = TableButton;

package/lib/Icons/AiIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ICON_AI: React.JSX.Element;

package/lib/Icons/AiIcon.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_AI = void 0;
+const react_1 = __importDefault(require("react"));
+exports.ICON_AI = (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("g", { id: "sq-AI-icon", clipPath: "url(#clip0_3060_44545)" },
+        react_1.default.createElement("g", { id: "circle", filter: "url(#filter0_dd_3060_44545)" },
+            react_1.default.createElement("rect", { x: "2", y: "2", width: "20", height: "20", rx: "10", fill: "url(#paint0_linear_3060_44545)" }),
+            react_1.default.createElement("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10.5", stroke: "white" })),
+        react_1.default.createElement("g", { id: "Vector", filter: "url(#filter1_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M11.2084 9.79157L10.1219 7.39977C9.88269 6.86674 9.11731 6.86674 8.87813 7.39977L7.79157 9.79157L5.39977 10.8781C4.86674 11.1241 4.86674 11.8827 5.39977 12.1219L7.79157 13.2084L8.87813 15.6002C9.12415 16.1333 9.88269 16.1333 10.1219 15.6002L11.2084 13.2084L13.6002 12.1219C14.1333 11.8759 14.1333 11.1173 13.6002 10.8781L11.2084 9.79157Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Vector_2", opacity: "0.8", filter: "url(#filter2_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M17.4491 10.4491L16.8493 11.7779C16.7126 12.074 16.2874 12.074 16.1507 11.7779L15.5509 10.4415L14.2221 9.84169C13.926 9.70501 13.926 9.2874 14.2221 9.15072L15.5585 8.55087L16.1583 7.2221C16.295 6.92597 16.7126 6.92597 16.8493 7.2221L17.4491 8.55847L18.7779 9.15831C19.074 9.29499 19.074 9.7126 18.7779 9.84928L17.4491 10.4491Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Ellipse 55", opacity: "0.8", filter: "url(#filter3_d_3060_44545)" },
+            react_1.default.createElement("circle", { cx: "14.5", cy: "16.5", r: "1.5", fill: "white" }))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_dd_3060_44545", x: "0", y: "0", width: "24", height: "24", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "1", dy: "1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.2 0 0 0 0 0.709941 0 0 0 0 1 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "-1", dy: "-1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.96 0 0 0 0 0.76 0 0 0 0 0.48 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_3060_44545", result: "effect2_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter1_d_3060_44545", x: "5", y: "7", width: "9", height: "10", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter2_d_3060_44545", x: "14", y: "7", width: "5", height: "6.30682", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.30682" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter3_d_3060_44545", x: "13", y: "15", width: "3", height: "4.32373", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.32373" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("linearGradient", { id: "paint0_linear_3060_44545", x1: "6.54545", y1: "3.81818", x2: "17", y2: "20.1818", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#F5D6AB" }),
+            react_1.default.createElement("stop", { offset: "0.251162", stopColor: "#F895A7" }),
+            react_1.default.createElement("stop", { offset: "0.585", stopColor: "#77A1F1" }),
+            react_1.default.createElement("stop", { offset: "0.861262", stopColor: "#68C8FF" })),
+        react_1.default.createElement("clipPath", { id: "clip0_3060_44545" },
+            react_1.default.createElement("rect", { width: "24", height: "24", fill: "white" })))));