npm - @squiz/formatted-text-editor - Versions diffs - 2.3.0 → 2.5.0 - Mend

@squiz/formatted-text-editor 2.3.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # Change Log
+## 2.5.0
+### Minor Changes
+- 0025f46: Allow mounting the editor and toolbar at arbitrary locations in the DOM.
+## 2.4.0
+### Minor Changes
+- 0d281a8: test changeset to trigger job
 ## 2.3.0
 ### Minor Changes

package/demo/{App.tsx → diff/App.tsx} RENAMED Viewed

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
+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 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} />

package/demo/{AppContext.tsx → diff/AppContext.tsx} RENAMED Viewed

@@ -8,8 +8,7 @@ import MatrixResourceBrowserPlugin, {
 import { ResourceBrowserContextProvider, ResourceBrowserSource } from '@squiz/resource-browser';
 import React, { PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { EditorContext } from '../src';
-import { ResolveNodeType } from '../src/types';
+import { EditorContext, ResolveNodeType } from '../../src';
 import resources from './resources.json';
 import sources from './sources.json';

package/demo/diff/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!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>
+    <style rel="./index.scss" lang="scss"></style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/demo/{main.tsx → diff/main.tsx} RENAMED Viewed

@@ -2,7 +2,7 @@ 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 '../../src/index.scss';
 import './index.scss';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

package/demo/index.html CHANGED Viewed

@@ -5,9 +5,54 @@
     <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>
+    <style>
+      pre {
+        white-space: pre-line;
+      }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
+    <h1>Formatted text editor demo</h1>
+    <h2>Diff</h2>
+    <p>
+      <a href="./diff/index.html">View demo</a>
+    </p>
+    <pre>
+        Demonstrates how the formatted text editor is typically rendered.
+        Beneath the editor is 2 code blocks. On the left is the Remirror JSON representation of the content.
+        On the right is the Squiz JSON representation of the content.
+        You should typically expect there is no highlighted (red/green) content in either block. If there is
+        highlighted content this is indicative of the transformation logic not producing identical input
+        when run through a cycle of Remirror -> Squiz -> Remirror -> Squiz conversion. This may indicate that
+        the transformation logic is losing information during one of the transformation phases.
+    </pre>
+    <h2>Portals</h2>
+    <p>
+      <a href="./portals/index.html?withRemirror">View demo</a>
+      (<a href="./portals/index.html">without formatted text editor</a>)
+    </p>
+    <pre>
+        Demonstrates rendering the input and toolbar of a formatted text editor in arbitrary DOM locations.
+        Intended to show an "inline editing" variant where the editor will attempt to minimize how much it changes
+        the DOM where it is mounted. Including:
+         * Code/pre blocks don't have the decorative icons around them.
+         * Code blocks don't have a wrapping &lt;pre&gt; element.
+        The following manipulations still occur due to limitations which have not been overcome:
+         * Each editor input has 3 wrapping &lt;div&gt; elements.
+         * Each list item is wrapped in a &lt;p&gt; element.
+         * Remirror is strongly opinionated about its DOM structure. This is fine if the content being placed
+           in the editor was constructed by Remirror previously but if it wasn't then anything unexpected will
+           be transformed.
+        Including:
+         * Rendering the input in an iframe, with the other parts of the editor rendered outside.
+         * Attaching an editor to formatted content that is dynamically mounted after initially loaded
+           (collapse/expand accordion).
+    </pre>
   </body>
 </html>

package/demo/portals/Accordion.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import React, { useCallback, useState } from 'react';
+import clsx from 'clsx';
+export type AccordionProps = {
+  items: Array<{ title: string; content: string; defaultExpanded: boolean }>;
+};
+export const Accordion = ({ items }: AccordionProps) => {
+  const [expandedItems, setExpandedItems] = useState(() => items.map((item) => !!item.defaultExpanded));
+  const toggleItem = useCallback((index: number) => {
+    setExpandedItems((previous) => {
+      const updated = [...previous];
+      updated[index] = !previous[index];
+      return updated;
+    });
+  }, []);
+  return (
+    <>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={clsx(
+            'accordion-item',
+            expandedItems[index] && 'accordion-item-expanded',
+            !expandedItems[index] && 'accordion-item-collapsed',
+          )}
+        >
+          <button
+            type="button"
+            className="accordion-item-header"
+            data-sq-content-type="string"
+            data-sq-field="items[0].title"
+            onClick={() => toggleItem(index)}
+          >
+            {item.title}
+          </button>
+          {expandedItems[index] && (
+            <div
+              className="accordion-item-content"
+              data-sq-content-type="formatted-text"
+              data-sq-field="items[0].content"
+              dangerouslySetInnerHTML={{ __html: item.content }}
+            ></div>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};

package/demo/portals/App.tsx ADDED Viewed

@@ -0,0 +1,150 @@
+import { Editor } from '../../src';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+const editorIdentifierAttribute = 'data-sq-editor-key';
+let editorIndex = 0;
+const extractFormattedTextBlocks = (root: Element): Record<string, { container: Element; content: string }> => {
+  const selector = '[data-sq-content-type="formatted-text"][data-sq-block-index]';
+  const ungrouped = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
+  const grouped: Record<string, Array<Element>> = {};
+  const editors: Record<string, { container: Element; content: string }> = {};
+  ungrouped?.forEach((element) => {
+    if (!element.parentElement) {
+      return;
+    }
+    const index = element.getAttribute('data-sq-block-index') as string;
+    grouped[index] ||= [];
+    grouped[index].push(element);
+  });
+  Object.values(grouped).forEach((elements) => {
+    const container = document.createElement('div');
+    const content = elements.map((element) => element.outerHTML).join('');
+    const key = `editor-${editorIndex++}`;
+    container.setAttribute(editorIdentifierAttribute, key);
+    elements[0].parentElement?.insertBefore(container, elements[0]);
+    elements.forEach((element) => element.remove());
+    editors[key] = { container, content };
+  });
+  return editors;
+};
+const extractFormattedTextComponentInputs = (
+  root: Element,
+): Record<string, { container: Element; content: string }> => {
+  const selector = '[data-sq-content-type="formatted-text"][data-sq-field]';
+  const elements = root.matches(selector) ? [root] : Array.from(root.querySelectorAll(selector));
+  const editors: Record<string, { container: Element; content: string }> = {};
+  elements.forEach((element) => {
+    const container = element;
+    const content = container.innerHTML;
+    let key = container.getAttribute(editorIdentifierAttribute);
+    if (!key) {
+      key = `editor-${editorIndex++}`;
+      container.setAttribute(editorIdentifierAttribute, key);
+    }
+    container.innerHTML = '';
+    editors[key] = { container, content };
+  });
+  return editors;
+};
+export const App = () => {
+  const toolbar = useRef<HTMLDivElement>(null);
+  const preview = useRef<HTMLIFrameElement>(null);
+  const mutationObserver = useRef<MutationObserver>();
+  const [, setIsMounting] = useState(true);
+  const [editors, setEditors] = useState<Record<string, { container: Element; content: string }>>({});
+  const withRemirror = window.location.search.includes('withRemirror');
+  const handleLoad = useCallback(() => {
+    if (!withRemirror) {
+      return;
+    }
+    const document = preview.current?.contentDocument;
+    if (!document) {
+      throw new Error('Preview is not loaded.');
+    }
+    setEditors({
+      ...extractFormattedTextBlocks(preview.current.contentDocument.body),
+      ...extractFormattedTextComponentInputs(preview.current.contentDocument.body),
+    });
+  }, [withRemirror]);
+  useEffect(() => {
+    mutationObserver.current?.disconnect();
+    if (!preview.current?.contentDocument) {
+      return;
+    }
+    const updatedEditors = { ...editors };
+    let hasUpdatedEditors = false;
+    mutationObserver.current = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.removedNodes.length > 0) {
+          Object.keys(updatedEditors).forEach((key) => {
+            if (!updatedEditors[key].container.parentElement) {
+              delete updatedEditors[key];
+              hasUpdatedEditors = true;
+            }
+          });
+        } else if (mutation.addedNodes.length > 0) {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const newEditors = extractFormattedTextComponentInputs(node as Element);
+              Object.assign(updatedEditors, newEditors);
+              hasUpdatedEditors ||= Object.keys(newEditors).length > 0;
+            }
+          });
+        }
+      });
+      if (hasUpdatedEditors) {
+        setEditors(updatedEditors);
+      }
+    });
+    mutationObserver.current.observe(preview.current?.contentDocument, {
+      childList: true,
+      subtree: true,
+    });
+  }, [editors]);
+  useEffect(() => {
+    setIsMounting(false);
+  }, []);
+  return (
+    <>
+      <div ref={toolbar} id="toolbar"></div>
+      <iframe ref={preview} id="preview" title="Preview" src="./preview.html" onLoad={handleLoad} />
+      {Object.keys(editors).map((key) => (
+        <Editor
+          key={key}
+          enableDecorations={false}
+          content={editors[key].content}
+          containers={{
+            input: editors[key].container,
+            toolbar: toolbar.current,
+          }}
+        />
+      ))}
+    </>
+  );
+};

package/demo/portals/index.html ADDED Viewed

@@ -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="./index.tsx"></script>
+  </body>
+</html>

package/demo/portals/index.scss ADDED Viewed

@@ -0,0 +1,8 @@
+#toolbar {
+  height: 32px;
+}
+#preview {
+  width: 100%;
+  height: calc(100vh - 32px);
+}

package/demo/portals/index.tsx ADDED Viewed

@@ -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/portals/preview.html ADDED Viewed

@@ -0,0 +1,91 @@
+<html>
+  <head>
+    <title>Remirror portal example</title>
+    <style>
+      body {
+        font-family: Palatino, Georgia, Times, 'Times New Roman', Serif;
+      }
+      #content {
+        margin: 24px;
+      }
+      .separator {
+        background-color: yellow;
+      }
+      .underline {
+        text-decoration: underline;
+      }
+      .accordion-item-collapsed .accordion-item-content {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="content" spellcheck="false">
+      <h1 data-sq-content-type="formatted-text" data-sq-block-index="1">Remirror example</h1>
+      <!-- comment goes here la -->
+      <div data-sq-content-type="formatted-text" data-sq-block-index="1">
+        Australian governments at all levels have
+        <u
+          ><strong><em>endorsed</em></strong></u
+        >
+        WCAG 2.0, and require all government websites (federal, state and territory) to meet the new guidelines at the
+        minimum compliance level (Single A) by the end of 2012. In addition, the Australian Government requires all
+        federal websites to meet the medium conformance level (Double A) by the end of 2014.
+      </div>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="1">
+        Federal government agencies must update <strong>all government</strong> websites (as specified within scope
+        under the Website Accessibility National Transition Strategy (NTS)) to WCAG 2.0 conformance. Agencies should use
+        the principle of progressive enhancement when building and managing websites, and test for conformance across
+        multiple browsers and operating system configurations.
+      </p>
+      <p class="separator">The below section shows most formatting options/supported element tags.</p>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <img
+          src="https://www.squiz.net/__data/assets/file/0014/11075/glyphsquiz-darkblue.svg"
+          alt="Squiz logo"
+          width="200px"
+        />
+      </p>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        Visit <a href="https://www.squiz.net/" target="_blank">squiz.net</a>.
+      </p>
+      <code data-sq-content-type="formatted-text" data-sq-block-index="2">This is a code block.</code>
+      <pre data-sq-content-type="formatted-text" data-sq-block-index="2">This is a pre block.</pre>
+      <ul data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ul>
+      <ol data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ol>
+      <hr data-sq-content-type="formatted-text" data-sq-block-index="2" />
+      <h1 data-sq-content-type="formatted-text" data-sq-block-index="2">Heading</h1>
+      <p data-sq-content-type="formatted-text" data-sq-block-index="2">
+        <strong>Bold</strong>, <em>Italics</em>, <span class="underline">underline</span>
+      </p>
+      <p class="separator">
+        The below section shows a React mounted element with formatted text input. The input is dynamically
+        added/removed from the DOM by clicking the button.
+      </p>
+      <div
+        data-sq-content-type="component"
+        data-sq-block-index="3"
+        class="accordion"
+        data-hydration-component="accordion"
+        data-hydration-props='{"items":[{"title":"Accordion title","content":"<p><strong>Accordion content</strong></p>","defaultExpanded":true}]}'
+      ></div>
+    </div>
+    <script type="module" src="./preview.tsx"></script>
+  </body>
+</html>

package/demo/portals/preview.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Accordion } from './Accordion';
+document.querySelectorAll('[data-hydration-component="accordion"]').forEach((element) => {
+  const props = JSON.parse(element.getAttribute('data-hydration-props') || '');
+  const root = ReactDOM.createRoot(element);
+  root.render(<Accordion {...props} />);
+});

package/lib/Editor/Editor.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
+type EditorProps = {
+    attributes?: Record<string, string>;
+    border?: boolean;
+    children?: ReactNode;
+    className?: string;
+    containers?: {
+        input?: Element | null;
+        toolbar?: Element | null;
+    };
+    content?: RemirrorContentType;
+    editable?: boolean;
+    enableDecorations?: boolean;
+    enableTableTool?: boolean;
+    isFocused?: boolean;
+    label?: string;
+    onChange?: RemirrorEventListener<Extension>;
+};
+declare const Editor: ({ attributes, border, children, className, containers, content, editable, enableDecorations, enableTableTool, isFocused: isInitiallyFocused, label, onChange, }: EditorProps) => React.JSX.Element;
+export default Editor;

package/lib/Editor/Editor.js ADDED Viewed

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
+const clsx_1 = __importDefault(require("clsx"));
+const EditorToolbar_1 = require("../EditorToolbar");
+const EditorContext_1 = require("./EditorContext");
+const Extensions_1 = require("../Extensions/Extensions");
+const hooks_1 = require("../hooks");
+const extension_react_tables_1 = require("@remirror/extension-react-tables");
+const EditorInput_1 = require("../ui/EditorInput/EditorInput");
+const Editor = ({ attributes, border = true, children, className, containers, content, editable = true, enableDecorations = true, enableTableTool = false, isFocused: isInitiallyFocused = false, label = 'Text editor', onChange, }) => {
+    const isEmpty = containers?.toolbar && containers.input && !children;
+    const { manager, state, setState } = (0, react_2.useRemirror)({
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), enableDecorations),
+        content,
+        selection: 'start',
+        stringHandler: 'html',
+    });
+    const handleChange = (parameter) => {
+        setState(parameter.state);
+        onChange?.(parameter);
+    };
+    const wrapperRef = (0, react_1.useRef)(null);
+    const { isFocused, handleFocus, handleBlur } = (0, hooks_1.useFocus)(isInitiallyFocused, (0, react_1.useCallback)((element) => {
+        return Boolean(wrapperRef.current?.contains(element) ||
+            containers?.input?.contains(element) ||
+            containers?.toolbar?.contains(element));
+    }, [containers?.input, containers?.toolbar]));
+    // On initial load, check if we need to focus the actual text content
+    (0, react_1.useEffect)(() => {
+        if (isInitiallyFocused) {
+            manager.view.dom.focus();
+        }
+        // TODO: May want to come back to this and see if there's a better solution
+        // We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
+        const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
+        tableDeleteButtons.forEach((button) => {
+            button.setAttribute('type', 'button');
+        });
+    }, []);
+    return (react_1.default.createElement("div", { ref: wrapperRef, onBlurCapture: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', isEmpty && 'squiz-fte-scope__editor--empty', className) },
+        react_1.default.createElement(react_2.Remirror, { manager: manager, initialContent: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: label, attributes: attributes },
+            editable && (react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isFocused, enableTableTool: enableTableTool, container: containers?.toolbar })),
+            children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
+            react_1.default.createElement(EditorInput_1.EditorInput, { container: containers?.input }),
+            enableTableTool && react_1.default.createElement(extension_react_tables_1.TableComponents, { enableTableCellMenu: false }),
+            editable && isFocused && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
+};
+exports.default = Editor;

package/lib/Editor/EditorContext.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ResolveNodeToUrl } from '../types';
+export type EditorContextOptions = {
+    matrix: {
+        matrixDomain: string;
+    };
+    resolveNodeToUrl: ResolveNodeToUrl;
+};
+export declare const defaultEditorContext: EditorContextOptions;
+export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js ADDED Viewed

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = exports.defaultEditorContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.defaultEditorContext = {
+    matrix: {
+        matrixDomain: '',
+    },
+    resolveNodeToUrl: () => {
+        throw new Error('resolveNodeToUrl has not been configured.');
+    },
+};
+exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/FloatingToolbar.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export declare const FloatingToolbar: () => React.JSX.Element;