@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/cypress/e2e/bold.spec.cy.ts

@@ -0,0 +1,18 @@
+describe('The formatted text editor renders', () => {
+  it('Should toggle bold on highlighted text', () => {
+    cy.visit('/');
+
+    cy.get('.ProseMirror.remirror-editor')
+      .clear()
+      .type('It was the best of times it was the worst of times.')
+      .setSelection('best of times');
+
+    cy.findAllByRole('button', { name: 'Bold (Ctrl+B)' }).first().click();
+
+    cy.get('strong').should('include.text', 'best of times');
+
+    cy.findAllByRole('button', { name: 'Bold (Ctrl+B)' }).first().click();
+
+    cy.get('strong').should('not.exist');
+  });
+});

package/cypress/global.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    // Custom command
+    selection(subject: any, fn?: any): void;
+    setSelection(subject: any, query?: any, endQuery?: any): void;
+  }
+}

package/cypress/support/commands.ts

@@ -0,0 +1,130 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+
+import '@testing-library/cypress/add-commands';
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+/**
+ * Credits
+ * @Bkucera: https://github.com/cypress-io/cypress/issues/2839#issuecomment-447012818
+ * @Phrogz: https://stackoverflow.com/a/10730777/1556245
+ *
+ * Usage
+ * ```
+ * // Types "foo" and then selects "fo"
+ * cy.get('input')
+ *   .type('foo')
+ *   .setSelection('fo')
+ *
+ * // Types "foo", "bar", "baz", and "qux" on separate lines, then selects "foo", "bar", and "baz"
+ * cy.get('textarea')
+ *   .type('foo{enter}bar{enter}baz{enter}qux{enter}')
+ *   .setSelection('foo', 'baz')
+ *
+ * // Types "foo" and then sets the cursor before the last letter
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorAfter('fo')
+ *
+ * // Types "foo" and then sets the cursor at the beginning of the word
+ * cy.get('input')
+ *   .type('foo')
+ *   .setCursorBefore('foo')
+ *
+ * // `setSelection` can alternatively target starting and ending nodes using query strings,
+ * // plus specific offsets. The queries are processed via `Element.querySelector`.
+ * cy.get('body')
+ *   .setSelection({
+ *     anchorQuery: 'ul > li > p', // required
+ *     anchorOffset: 2 // default: 0
+ *     focusQuery: 'ul > li > p:last-child', // default: anchorQuery
+ *     focusOffset: 0 // default: 0
+ *    })
+ */
+
+// Low level command reused by `setSelection` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+  cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
+
+  cy.document().trigger('selectionchange');
+  return cy.wrap(subject);
+});
+
+Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
+  return cy.wrap(subject).selection(($el: any[]) => {
+    if (typeof query === 'string') {
+      const anchorNode = getTextNode($el[0], query);
+      const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+      const anchorOffset = anchorNode.wholeText.indexOf(query);
+      const focusOffset = endQuery
+        ? focusNode.wholeText.indexOf(endQuery) + endQuery.length
+        : anchorOffset + query.length;
+      setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    } else if (typeof query === 'object') {
+      const el = $el[0];
+      const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+      const anchorOffset = query.anchorOffset || 0;
+      const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
+      const focusOffset = query.focusOffset || 0;
+      setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+    }
+  });
+});
+
+// Helper functions
+function getTextNode(el: HTMLElement, match?: any) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  // const nodes = [];
+  let node;
+  while ((node = walk.nextNode())) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}

package/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "@testing-library/cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

package/cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+  },
+});

package/demo/App.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
+import { RemirrorEventListener, Extension } from '@remirror/core';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+import { AppContext } from './AppContext';
+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';
+const ComponentHandlers = () => (
+  <div style={{ display: 'flex', justifyContent: 'flex-end', maxHeight: '2rem' }}>
+    <Button icon={<TextFieldsOutlinedIcon />} onClick={(x) => x} />
+    <VerticalDivider />
+    <Button icon={<DeleteOutlineOutlinedIcon />} onClick={(x) => x} />
+  </div>
+);
+
+function App() {
+  const [showChildren, setShowChildren] = useState(false);
+  const [doc, setDoc] = useState('');
+  const [squizDoc, setSquizDoc] = useState('');
+  const [reconvertedDoc, setReconvertedDoc] = useState('');
+  const [error, setError] = useState<unknown>(null);
+  const [editable, setEditable] = useState(true);
+  const [enableTableTool, setEnableTableTool] = useState(true);
+  const [border, setBorder] = useState(true);
+
+  const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
+    try {
+      setDoc(JSON.stringify(parameter.state.doc, null, 2));
+
+      const newSquizDoc = remirrorNodeToSquizNode(parameter.state.doc);
+      const newReconvertedDoc = parameter.state.schema.nodeFromJSON(squizNodeToRemirrorNode(newSquizDoc));
+
+      setSquizDoc(JSON.stringify(newSquizDoc, null, 2));
+      setReconvertedDoc(JSON.stringify(newReconvertedDoc, null, 2));
+    } catch (e) {
+      setError(e);
+    }
+  };
+
+  return (
+    <div className="app">
+      <h1>Options</h1>
+      <div className="page-section">
+        <div className="form-group">
+          <label htmlFor="editable">Editable</label>&nbsp;
+          <input id="editable" type="checkbox" onChange={() => setEditable(!editable)} checked={editable} />
+        </div>
+        <div className="form-group">
+          <label htmlFor="border">Border</label>&nbsp;
+          <input id="border" type="checkbox" onChange={() => setBorder(!border)} checked={border} />
+        </div>
+        <div className="form-group">
+          <label htmlFor="showChildren">Show children</label>&nbsp;
+          <input
+            id="showChildren"
+            type="checkbox"
+            onChange={() => setShowChildren(!showChildren)}
+            checked={showChildren}
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="tableTool">Enable table tool</label>&nbsp;
+          <input
+            id="tableTool"
+            type="checkbox"
+            onChange={() => setEnableTableTool(!enableTableTool)}
+            checked={enableTableTool}
+          />
+        </div>
+      </div>
+      <h1>Editor</h1>
+      <div className="page-section">
+        <AppContext>
+          <Editor
+            editable={editable}
+            border={border}
+            content={`
+              <p>Hello
+              <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">
+              </p>
+            `}
+            onChange={handleEditorChange}
+            enableTableTool={enableTableTool}
+          >
+            {showChildren && <ComponentHandlers />}
+          </Editor>
+        </AppContext>
+      </div>
+      <h1>Document</h1>
+      <div className="page-section">
+        {error instanceof Error && (
+          <div className="error">An error occurred when transforming the document: {error.message}</div>
+        )}
+        <div className="code-section">
+          <ReactDiffViewer oldValue={doc} newValue={reconvertedDoc} splitView={false} showDiffOnly={false} />
+          <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/demo/AppContext.tsx

@@ -0,0 +1,70 @@
+import React, { PropsWithChildren } from 'react';
+import { ResourceBrowserSource, ResourceBrowserContextProvider } from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+} from '@squiz/matrix-resource-browser-plugin';
+import { EditorContext } from '../src';
+import resources from './resources.json';
+import sources from './sources.json';
+import { ResolveNodeType } from '../src/types';
+
+export type AppContextProps = PropsWithChildren;
+export const AppContext = ({ children }: AppContextProps) => (
+  <ResourceBrowserContextProvider
+    value={{
+      onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+        Promise.resolve([
+          {
+            name: 'Matrix',
+            id: 'matrixIdentifier',
+            type: 'matrix',
+          },
+        ]),
+      plugins: [
+        MatrixResourceBrowserPlugin({
+          onRequestSources: (): Promise<Source> => Promise.resolve(sources),
+          onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
+            Promise.resolve(resource._children || resources),
+          onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
+            const flattenResources = (resources: unknown[]) => {
+              return [
+                ...resources,
+                ...resources.flatMap((resource) =>
+                  '_children' in resource ? flattenResources(resource._children) : [],
+                ),
+              ];
+            };
+
+            return Promise.resolve(
+              flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+            );
+          },
+        }),
+      ],
+    }}
+  >
+    <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>
+  </ResourceBrowserContextProvider>
+);

package/demo/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formatted text editor - DXP package (SQUIZ)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/demo/index.scss

@@ -0,0 +1,33 @@
+body {
+  font-family: 'Open Sans';
+}
+
+h1 {
+  font-weight: 600;
+  font-size: 1.5rem;
+}
+
+.app {
+  padding: 8px;
+}
+
+.page-section {
+  margin-bottom: 8px;
+}
+
+.form-group {
+  display: flex;
+  align-items: center;
+}
+
+.code-section {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  height: 35vh;
+  overflow: scroll;
+}
+
+.error {
+  color: red;
+}

package/demo/main.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import '@squiz/resource-browser/lib/index.css';
+import '../src/index.scss';
+import './index.scss';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/demo/public/favicon-dxp.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill="#1D9BE2" fill-rule="evenodd" d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4Zm-.883 5.766a4.01 4.01 0 0 0 1.66.909l5.334 1.49c.634.177 1.069-.628.574-1.062L5.532 2.59c-.829-.745-2.255-.827-3.001 0-1.078 1.342-.326 2.328.586 3.176Zm10.137-3.195c.848.761 1.05 2.188.203 2.95l-1.183.92a.903.903 0 0 1-1.134-.02l-1.091-.913a1.846 1.846 0 0 1 .137-2.937c.848-.761 2.221-.761 3.068 0Zm-2.03 6.754a4.01 4.01 0 0 1 1.66.909c.911.848 1.663 1.834.585 3.176-.746.827-2.172.745-3 0L5.314 8.897c-.495-.434-.06-1.239.574-1.061l5.334 1.49ZM2.745 13.43c-.848-.761-1.05-2.188-.203-2.95l1.183-.92a.903.903 0 0 1 1.134.02l1.091.913a1.846 1.846 0 0 1-.137 2.937c-.847.761-2.221.761-3.068 0Z" clip-rule="evenodd"/>
+</svg>

package/demo/resources.json

@@ -0,0 +1,204 @@
+[
+  {
+    "id": "1",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
+    "name": "Example image one",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "2",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
+    "name": "Example image two",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "3",
+    "type": {
+      "code": "page_standard",
+      "name": "Standard Page"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
+    "name": "Example page",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "4",
+    "type": {
+      "code": "folder",
+      "name": "Folder"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
+    "name": "Example folder",
+    "childCount": 10,
+    "url": "",
+    "_children": [
+      {
+        "id": "5",
+        "type": {
+          "code": "image",
+          "name": "Image"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
+        "name": "Example image one #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "6",
+        "type": {
+          "code": "image",
+          "name": "Image"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
+        "name": "Example image two #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "7",
+        "type": {
+          "code": "page_standard",
+          "name": "Standard Page"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
+        "name": "Example page #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "8",
+        "type": {
+          "code": "folder",
+          "name": "Folder"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
+        "name": "Example folder #2",
+        "childCount": 10,
+        "url": "",
+        "_children": [
+          {
+            "id": "9",
+            "type": {
+              "code": "image",
+              "name": "Image"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
+            "name": "Example image one #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          },
+          {
+            "id": "10",
+            "type": {
+              "code": "image",
+              "name": "Image"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
+            "name": "Example image two #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          },
+          {
+            "id": "11",
+            "type": {
+              "code": "page_standard",
+              "name": "Standard Page"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
+            "name": "Example page #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          }
+        ]
+      }
+    ]
+  }
+]

package/demo/sources.json

@@ -0,0 +1,27 @@
+[
+  {
+    "id": "my-matrix-instance",
+    "name": "My Matrix instance",
+    "nodes": [
+      {
+        "id": "1",
+        "name": "My site",
+        "childCount": 100,
+        "url": "https://my-matrix.squiz.net/site",
+        "urls": [],
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        }
+      }
+    ]
+  }
+]

package/demo/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/file-transformer.js

@@ -0,0 +1 @@
+module.exports = {};