@squiz/formatted-text-editor 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.6.0
+
+### Minor Changes
+
+- ec6d330: Updated packages to use resource browser v3
+
 ## 2.5.0
 
 ### Minor Changes

package/demo/diff/App.tsx

@@ -84,11 +84,6 @@ function App() {
               <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.
               <img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/>
               <img data-matrix-asset-id="1" data-matrix-identifier="matrixIdentifier" data-matrix-domain="https://matrix-domain.squiz.net">
-              <img
-                  data-dam-object-id="CA87B42E-9410-402F-B3669D6900DD0793"
-                  data-dam-system-identifier="byder001"
-                  data-dam-system-type="bynder"
-              >
               </p>
             `}
             onChange={handleEditorChange}

package/demo/diff/AppContext.tsx

@@ -30,6 +30,7 @@ export const AppContext = ({ children }: AppContextProps) => (
   <QueryClientProvider client={testQueryClient}>
     <ResourceBrowserContextProvider
       value={{
+        searchEnabled: true,
         onRequestSources: (): Promise<ResourceBrowserSource[]> =>
           Promise.resolve([
             {
@@ -37,14 +38,6 @@ export const AppContext = ({ children }: AppContextProps) => (
               id: 'matrixIdentifier',
               type: 'matrix',
             },
-            {
-              name: 'Bynder',
-              id: 'byder001',
-              type: 'dam',
-              configuration: {
-                externalType: 'bynder',
-              },
-            },
           ]),
         plugins: [
           DamResourceBrowserPlugin(),
@@ -66,6 +59,19 @@ export const AppContext = ({ children }: AppContextProps) => (
                 flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
               );
             },
+            onSearchRequest: () =>
+              Promise.resolve({
+                results: [],
+                filters: [],
+                resultsSummary: {
+                  totalMatching: 0,
+                  numRanks: 10,
+                  currStart: 0,
+                  currEnd: 0,
+                  prevStart: null,
+                  nextStart: null,
+                },
+              }),
           }),
         ],
       }}

package/demo/diff/index.scss

@@ -1,3 +1,6 @@
+@import '../../../../node_modules/@squiz/resource-browser/lib/index.css';
+@import '../../../../node_modules/@squiz/matrix-resource-browser-plugin/lib/index.css';
+
 body {
   font-family: 'Open Sans';
 }

package/lib/index.css

@@ -1,6 +1,6 @@
 @import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";
 
-/* node_modules/@squiz/sds/lib/package.css */
+/* ../../node_modules/@squiz/sds/lib/package.css */
 .squiz-fte-scope code[class*=language-],
 .squiz-fte-scope pre[class*=language-] {
   color: #ccc;
@@ -280,6 +280,9 @@
   margin-right: 0.5rem;
   max-width: 100%;
 }
+.squiz-fte-scope .sds-alert__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-alert__buttons {
   display: flex;
   margin-bottom: 0.375rem;
@@ -1100,6 +1103,9 @@
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-card-title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-card-subtitle {
   font-size: 1rem;
   font-weight: 700;
@@ -2020,6 +2026,9 @@
   line-height: 1.25rem;
   color: #3d3d3d;
 }
+.squiz-fte-scope .sds-data-list__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 @media screen and (min-width: 768px) {
   .squiz-fte-scope .sds-data-list__icon + div {
     align-items: center;
@@ -2136,6 +2145,9 @@
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-dialog__heading span .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-dialog__icon {
   flex-shrink: 0;
   margin-right: 0.75rem;
@@ -2318,7 +2330,7 @@
 .squiz-fte-scope .sds-dropdown-label {
   display: block;
   padding: 0.5rem;
-  word-break: break-all;
+  word-break: break-word;
 }
 .squiz-fte-scope .sds-empty-state-card {
   align-items: center;
@@ -2355,6 +2367,9 @@
   margin-top: 1rem;
   text-align: center;
 }
+.squiz-fte-scope .sds-empty-state-card__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-empty-state-card__icon > svg {
   height: 11rem;
   width: auto;
@@ -2818,11 +2833,21 @@
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
+.squiz-fte-scope .sds-form-control-text {
+  align-items: center;
+  display: flex;
+}
 .squiz-fte-scope .sds-form-control-label {
   color: #3d3d3d;
   flex-grow: 1;
   text-align: left;
-  word-break: break-all;
+  word-break: break-word;
+}
+.squiz-fte-scope .sds-form-control--prominent .sds-form-control-item {
+  margin-bottom: 1.25rem;
+}
+.squiz-fte-scope .sds-form-control--prominent .sds-form-control-item:last-child {
+  margin-bottom: 0;
 }
 .squiz-fte-scope ::-moz-placeholder {
   color: #949494;
@@ -2941,6 +2966,9 @@
   display: block;
   margin-bottom: 0.75rem;
 }
+.squiz-fte-scope .sds-link-list__heading .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-link-list {
   list-style-type: none;
   margin: 0;
@@ -3045,6 +3073,9 @@
   display: block;
   margin-bottom: 0.75rem;
 }
+.squiz-fte-scope .sds-row__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-row__title:only-child,
 .squiz-fte-scope .sds-row__title:last-child {
   margin-bottom: 0;
@@ -3057,36 +3088,54 @@
   margin-bottom: 1.75rem;
   margin-top: 1.75rem;
 }
+.squiz-fte-scope .sds-heading--level-1 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-2 {
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
+.squiz-fte-scope .sds-heading--level-2 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-3 {
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
 }
+.squiz-fte-scope .sds-heading--level-3 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-4 {
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-4 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-5 {
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-5 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-heading--level-6 {
   font-size: 0.875rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .sds-heading--level-6 .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-text--sm-regular {
   font-size: 0.8125rem;
   font-weight: 400;
@@ -4175,6 +4224,9 @@
   margin-bottom: 1rem;
   margin-top: 0;
 }
+.squiz-fte-scope .sds-popover__title .svg-wrapper svg {
+  fill: #3d3d3d;
+}
 .squiz-fte-scope .sds-popover--left .sds-popover__content-wrapper {
   bottom: 50%;
   right: calc(100% + 1rem);
@@ -4214,6 +4266,108 @@
 .squiz-fte-scope .sds-popover--medium .sds-popover__content-wrapper {
   width: 400px;
 }
+.squiz-fte-scope .sds-sequence-list.presentation-only .sds-sequence-list__item-content {
+  margin-right: unset;
+}
+.squiz-fte-scope .sds-sequence-list__item {
+  background-color: #ededed;
+  border-radius: 0.25rem;
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: 0.3s background-color ease-in;
+}
+.squiz-fte-scope .sds-sequence-list__item--dragging {
+  background-color: #e0e0e0;
+}
+.squiz-fte-scope .sds-sequence-list__item:last-of-type::before {
+  content: none;
+}
+.squiz-fte-scope .sds-sequence-list__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  list-style-type: none;
+}
+.squiz-fte-scope .sds-sequence-list__list--dragging .sds-sequence-list__item-dots {
+  display: none;
+}
+.squiz-fte-scope .sds-sequence-list__list--dragging .sds-tooltip {
+  visibility: hidden;
+}
+.squiz-fte-scope .sds-sequence-list__item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-right: 1.5rem;
+  width: 100%;
+}
+@media screen and (min-width: 576px) {
+  .squiz-fte-scope .sds-sequence-list__item-content {
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: space-evenly;
+  }
+}
+.squiz-fte-scope .sds-sequence-list__item-content .sds-form-field {
+  width: 100%;
+}
+.squiz-fte-scope .sds-sequence-list .sds-tooltip__wrapper {
+  height: -moz-min-content;
+  height: min-content;
+}
+.squiz-fte-scope .sds-sequence-list .sds-tooltip__wrapper:has(.sds-sequence-list__item-remove) {
+  position: absolute;
+  right: 1rem;
+  top: 0.75rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-remove--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.squiz-fte-scope .sds-sequence-list__item-dots {
+  left: -30px;
+  position: absolute;
+  width: 0.25rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-index-mark {
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+  background-color: #f5bb8c;
+  border-radius: 100%;
+  display: grid;
+  height: 2rem;
+  left: -0.75rem;
+  place-items: center;
+  position: absolute;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  width: 2rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn {
+  align-self: baseline;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.squiz-fte-scope .sds-sequence-list__item-drag-btn--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.squiz-fte-scope .sds-sequence-list__add-item-btn {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  margin-left: 3rem;
+}
 
 /* ../../node_modules/@squiz/dxp-content-tools-modal/lib/package.css */
 .dxp-ctm-section .squiz-fte-scope.squiz-fte-scope__editor.squiz-fte-scope__editor--is-disabled.squiz-fte-scope__editor--bordered {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -25,12 +25,12 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
-    "@squiz/dam-resource-browser-plugin": "^0.10.0",
+    "@squiz/dam-resource-browser-plugin": "^3.0.3-rc.0",
     "@squiz/dx-json-schema-lib": "^1.74.1",
     "@squiz/dxp-ai-client-react": "^0.2.0",
     "@squiz/dxp-content-tools-modal": "^0.3.2",
-    "@squiz/matrix-resource-browser-plugin": "^2.0.0",
-    "@squiz/resource-browser": "^2.0.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.0.3-rc.0",
+    "@squiz/resource-browser": "^3.0.1-rc.0",
     "@squiz/sds": "^1.0.2",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
@@ -49,6 +49,7 @@
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
     "deepmerge": "4.3.0",
+    "esbuild-sass-plugin": "^2.8.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",

package/src/Editor/Editor.spec.tsx

@@ -441,6 +441,7 @@ describe('Formatted text editor', () => {
         onRequestSources,
         onRequestChildren,
         onRequestResource,
+        onSearchRequest: jest.fn(),
       } as MatrixResourceBrowserPluginProps,
     });
 

package/tests/mockResourceBrowserContext.tsx

@@ -63,10 +63,25 @@ export const mockResourceBrowserContext = ({ sources, resources, pluginProps }:
         Promise.resolve(resources?.find((resource) => resource.id === reference.resource) || null),
       );
 
+  const onSearchRequest = () =>
+    Promise.resolve({
+      results: [],
+      filters: [],
+      resultsSummary: {
+        totalMatching: 0,
+        numRanks: 10,
+        currStart: 0,
+        currEnd: 0,
+        prevStart: null,
+        nextStart: null,
+      },
+    });
+
   return {
     MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
       <ResourceBrowserContextProvider
         value={{
+          searchEnabled: false,
           onRequestSources: (): Promise<ResourceBrowserSource[]> =>
             Promise.resolve([
               {
@@ -80,7 +95,8 @@ export const mockResourceBrowserContext = ({ sources, resources, pluginProps }:
               onRequestSources: onRequestSources,
               onRequestChildren: onRequestChildren,
               onRequestResource: onRequestResource,
-            } as MatrixResourceBrowserPluginProps),
+              onSearchRequest,
+            } as unknown as MatrixResourceBrowserPluginProps),
           ],
         }}
       >

package/tests/renderWithContext.tsx

@@ -45,12 +45,14 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
   const onRequestSources = jest.fn().mockResolvedValue(sources);
   const onRequestChildren = jest.fn().mockResolvedValue(resources);
   const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
+  const onSearchRequest = jest.fn();
   editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
 
   return render(
     <EditorContext.Provider value={editorContext}>
       <ResourceBrowserContextProvider
         value={{
+          searchEnabled: false,
           onRequestSources: (): Promise<ResourceBrowserSource[]> =>
             Promise.resolve([
               {
@@ -64,6 +66,7 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
               onRequestSources: onRequestSources,
               onRequestChildren: onRequestChildren,
               onRequestResource: onRequestResource,
+              onSearchRequest,
             }),
           ],
         }}