@squiz/formatted-text-editor 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -25,8 +25,10 @@
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
     "@squiz/dx-json-schema-lib": "^1.65.1",
+    "@squiz/dxp-ai-client-react": "^0.1.3-alpha",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
+    "@squiz/sds": "^1.0.0-alpha.50",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",

package/src/EditorToolbar/Toolbar.tsx

@@ -15,6 +15,7 @@ import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton
 import ListButtons from './Tools/Lists/ListButtons';
 import HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
 import TableButton from './Tools/Table/TableButton';
+import ContentToolsDropdown from './Tools/ContentTools/ContentToolsDropdown';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
@@ -54,6 +55,7 @@ export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
         {extensionNames.image && <ImageButton />}
         {extensionNames.clearFormatting && <ClearFormattingButton />}
         {enableTableTool && extensionNames.table && <TableButton />}
+        <ContentToolsDropdown />
       </div>
     </RemirrorToolbar>
   );

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

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useAiService } from '@squiz/dxp-ai-client-react';
+import ContentToolsDropdown from './ContentToolsDropdown';
+import { renderWithContext } from '../../../../tests';
+
+// 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>;
+
+describe('Content tools dropdown', () => {
+  it('should not render the content tools dropdown component when there are no content tools', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('.sds-dropdown.active')).toBeFalsy();
+  });
+
+  it('should render the content tools dropdown when there are content tools', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [
+        {
+          id: 'unique-id',
+          name: 'Testing content tools',
+        },
+      ],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+
+    const launchButton = baseElement.querySelector(`.sds-button`) as HTMLButtonElement;
+    expect(launchButton).toBeTruthy();
+
+    fireEvent.click(launchButton);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeTruthy();
+  });
+
+  it('should handle when a content tool is clicked', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [
+        {
+          id: 'unique-id',
+          name: 'Testing content tools',
+        },
+      ],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+
+    const launchButton = baseElement.querySelector(`.sds-button`) as HTMLButtonElement;
+    expect(launchButton).toBeTruthy();
+
+    fireEvent.click(launchButton);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeTruthy();
+
+    const actionItems = baseElement.querySelectorAll(`.sds-dropdown-button`);
+    const firstItem = actionItems[0] as HTMLButtonElement;
+    expect(firstItem.textContent).toBe('Testing content tools');
+
+    fireEvent.click(firstItem);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,46 @@
+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 { useAiService } from '@squiz/dxp-ai-client-react';
+import { VerticalDivider } from '@remirror/react';
+
+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,
+  }));
+
+  // No content tools to show, don't show dropdown at all
+  if (contentTools.length === 0) {
+    return null;
+  }
+
+  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}
+      />
+    </>
+  );
+};
+
+export default ContentToolsDropdown;

package/src/EditorToolbar/Tools/ContentTools/_content-tools.scss

@@ -0,0 +1,45 @@
+.content-tools-dropdown {
+  .sds-button-icon svg {
+    fill: none !important;
+  }
+
+  .sds-dropdown {
+    left: auto;
+    right: auto;
+    top: auto;
+
+    width: 188px;
+    margin-top: 0.45rem;
+    margin-left: -2rem;
+
+    .sds-dropdown-heading {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      letter-spacing: 0;
+      line-height: 1rem;
+      background-color: #f5f5f5;
+      border-radius: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      pointer-events: none;
+      text-transform: none;
+    }
+
+    .sds-dropdown-section {
+      border-top: 1px solid #ededed;
+      border-bottom: none;
+      padding-top: 0.25rem;
+      margin-bottom: 0;
+
+      .sds-dropdown-label {
+        font-size: 0.8125rem;
+        color: #4f4f4f;
+        line-height: 1rem;
+      }
+    }
+
+    &.active {
+      display: block;
+      padding: 0.25rem;
+    }
+  }
+}

package/src/EditorToolbar/Tools/Table/TableButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import { VerticalDivider } from '@remirror/react-components';
 import { TableExtension } from '@remirror/extension-react-tables';
 import Button from '../../../ui/Button/Button';
 import TableViewRoundedIcon from '@mui/icons-material/TableViewRounded';
@@ -24,7 +23,6 @@ const TableButton = () => {
         icon={<TableViewRoundedIcon />}
         label="Insert table"
       />
-      <VerticalDivider />
     </>
   );
 };

package/src/Icons/AiIcon.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+
+export const ICON_AI = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="sq-AI-icon" clipPath="url(#clip0_3060_44545)">
+      <g id="circle" filter="url(#filter0_dd_3060_44545)">
+        <rect x="2" y="2" width="20" height="20" rx="10" fill="url(#paint0_linear_3060_44545)" />
+        <rect x="1.5" y="1.5" width="21" height="21" rx="10.5" stroke="white" />
+      </g>
+      <g id="Vector" filter="url(#filter1_d_3060_44545)">
+        <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"
+        />
+      </g>
+      <g id="Vector_2" opacity="0.8" filter="url(#filter2_d_3060_44545)">
+        <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"
+        />
+      </g>
+      <g id="Ellipse 55" opacity="0.8" filter="url(#filter3_d_3060_44545)">
+        <circle cx="14.5" cy="16.5" r="1.5" fill="white" />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_dd_3060_44545"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <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"
+        />
+        <feOffset dx="1" dy="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <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" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <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"
+        />
+        <feOffset dx="-1" dy="-1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <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" />
+        <feBlend mode="normal" in2="effect1_dropShadow_3060_44545" result="effect2_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter1_d_3060_44545"
+        x="5"
+        y="7"
+        width="9"
+        height="10"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <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"
+        />
+        <feOffset dy="1" />
+        <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" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter2_d_3060_44545"
+        x="14"
+        y="7"
+        width="5"
+        height="6.30682"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <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"
+        />
+        <feOffset dy="1.30682" />
+        <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" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter3_d_3060_44545"
+        x="13"
+        y="15"
+        width="3"
+        height="4.32373"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <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"
+        />
+        <feOffset dy="1.32373" />
+        <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" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_3060_44545"
+        x1="6.54545"
+        y1="3.81818"
+        x2="17"
+        y2="20.1818"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F5D6AB" />
+        <stop offset="0.251162" stopColor="#F895A7" />
+        <stop offset="0.585" stopColor="#77A1F1" />
+        <stop offset="0.861262" stopColor="#68C8FF" />
+      </linearGradient>
+      <clipPath id="clip0_3060_44545">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/index.scss

@@ -3,6 +3,8 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import '@squiz/sds/lib/package.css';
+
 /* So we can use icons inside of FTE content */
 @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded';
 
@@ -22,3 +24,5 @@
 @import './ui/CollapseBox/collapseBox';
 
 @import './ui/Modal/modal';
+
+@import './EditorToolbar/Tools/ContentTools/content-tools';