@squiz/formatted-text-editor 1.21.1-alpha.6 → 1.21.1-alpha.9

package/demo/App.tsx

@@ -1,13 +1,24 @@
 import React, { useState } from 'react';
 import FormattedTextEditor from '../src/FormattedTextEditor';
 import { RemirrorEventListener, Extension } from '@remirror/core';
+import { remirrorNodeToSquizNode } from '../src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from '../src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+import ReactDiffViewer from 'react-diff-viewer-continued';
 
 function App() {
-  const [doc, setDoc] = useState(null as any);
+  const [doc, setDoc] = useState('');
+  const [squizDoc, setSquizDoc] = useState('');
+  const [reconvertedDoc, setReconvertedDoc] = useState('');
   const [editable, setEditable] = useState(true);
+
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
     if (doc !== parameter.state.doc) {
-      setDoc(parameter.state.doc);
+      const newSquizDoc = remirrorNodeToSquizNode(parameter.state.doc);
+      const newReconvertedDoc = parameter.state.schema.nodeFromJSON(squizNodeToRemirrorNode(newSquizDoc));
+
+      setDoc(JSON.stringify(parameter.state.doc, null, 2));
+      setSquizDoc(JSON.stringify(newSquizDoc, null, 2));
+      setReconvertedDoc(JSON.stringify(newReconvertedDoc, null, 2));
     }
   };
 
@@ -24,13 +35,16 @@ function App() {
       <div className="page-section">
         <FormattedTextEditor
           editable={editable}
-          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>.</p>`}
+          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"/></p>`}
           onChange={handleEditorChange}
         />
       </div>
       <h1>Document</h1>
       <div className="page-section">
-        <code>{JSON.stringify(doc, null, 2)}</code>
+        <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>
   );

package/demo/index.scss

@@ -22,19 +22,25 @@ h1 {
   align-items: center;
 }
 
-code {
-  padding: 8px;
-  display: block;
-  white-space: pre;
-  background-color: #eee;
-  font-size: 0.8rem;
-  height: 40vh;
-  max-height: 40vh;
+.code-section {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  height: 35vh;
   overflow: scroll;
 }
 
 .remirror-editor {
-  height: 40vh;
-  max-height: 40vh;
+  height: 35vh;
+  max-height: 35vh;
   overflow: scroll;
 }
+
+.squiz-fte-modal-footer__button {
+  margin-top: 1rem;
+}
+
+.mock-buttons {
+  display: flex;
+  gap: 0.5rem;
+}

package/lib/Extensions/Extensions.d.ts

@@ -1,5 +1,2 @@
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension } from 'remirror/extensions';
-import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
-import { LinkExtension } from './LinkExtension/LinkExtension';
-import { ImageExtension } from './ImageExtension/ImageExtension';
-export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | ItalicExtension | NodeFormattingExtension | ParagraphExtension | UnderlineExtension | LinkExtension | PreformattedExtension | ImageExtension)[];
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => Extension[];

package/lib/Extensions/Extensions.js

@@ -9,7 +9,7 @@ const Extensions = () => [
     new extensions_1.BoldExtension(),
     new extensions_1.HeadingExtension(),
     new extensions_1.ItalicExtension(),
-    new extensions_1.NodeFormattingExtension(),
+    new extensions_1.NodeFormattingExtension({ indents: [] }),
     new extensions_1.ParagraphExtension(),
     new PreformattedExtension_1.PreformattedExtension(),
     new extensions_1.UnderlineExtension(),

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -1,7 +1,7 @@
 import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
 export declare class PreformattedExtension extends NodeExtension {
     get name(): "preformatted";
-    createTags(): ("formattingNode" | "block" | "textBlock")[];
+    createTags(): ("block" | "formattingNode" | "textBlock")[];
     createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
     /**
      * Toggle the <pre> for the current block.

package/lib/index.css

@@ -576,6 +576,9 @@
   --tw-blur: blur(8px) !important;
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
+.squiz-fte-scope .filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
+}
 .squiz-fte-scope a {
   --tw-text-opacity: 1;
   color: rgb(7 116 210 / var(--tw-text-opacity));

package/lib/index.d.ts

@@ -1,2 +1,4 @@
 import FormattedTextEditor from './FormattedTextEditor';
-export { FormattedTextEditor };
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+export { FormattedTextEditor, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/lib/index.js

@@ -3,6 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormattedTextEditor = void 0;
+exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.FormattedTextEditor = void 0;
 const FormattedTextEditor_1 = __importDefault(require("./FormattedTextEditor"));
 exports.FormattedTextEditor = FormattedTextEditor_1.default;
+const remirrorNodeToSquizNode_1 = require("./utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode");
+Object.defineProperty(exports, "remirrorNodeToSquizNode", { enumerable: true, get: function () { return remirrorNodeToSquizNode_1.remirrorNodeToSquizNode; } });
+const squizNodeToRemirrorNode_1 = require("./utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode");
+Object.defineProperty(exports, "squizNodeToRemirrorNode", { enumerable: true, get: function () { return squizNodeToRemirrorNode_1.squizNodeToRemirrorNode; } });

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts

@@ -0,0 +1,10 @@
+import { ProsemirrorNode } from 'remirror';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+export declare const resolveNodeTag: (node: ProsemirrorNode) => string | null;
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @export
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedTextModels.v1.FormattedText;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
+const validNodeTypes_1 = require("../validNodeTypes");
+const resolveNodeTag = (node) => {
+    if (node.type.spec?.toDOM) {
+        const domNode = node.type.spec.toDOM(node);
+        if (domNode instanceof window.Node) {
+            return domNode.nodeName.toLowerCase();
+        }
+        if (domNode?.dom instanceof window.Node) {
+            return domNode.dom.nodeName.toLowerCase();
+        }
+        if (domNode instanceof Array) {
+            // [ tag, attributes, ...children ]
+            return domNode[0].toLowerCase();
+        }
+    }
+    return null;
+};
+exports.resolveNodeTag = resolveNodeTag;
+const resolveFormattingOptions = (node) => {
+    const formattingOptions = {};
+    if (node.attrs.nodeTextAlignment) {
+        formattingOptions.alignment = node.attrs.nodeTextAlignment;
+    }
+    return formattingOptions;
+};
+const resolveFontOptions = (node) => {
+    const fontOptions = {};
+    node.marks.forEach((mark) => {
+        switch (mark.type.name) {
+            case 'bold':
+                fontOptions.bold = true;
+                break;
+            case 'italic':
+                fontOptions.italics = true;
+                break;
+            case 'underline':
+                fontOptions.underline = true;
+                break;
+            default:
+                // Currently unsupported mark type
+                break;
+        }
+    });
+    return fontOptions;
+};
+const resolveAttributeOptions = (node, nodeType) => {
+    let attributeOptions = {};
+    if (nodeType === 'image') {
+        attributeOptions = { ...node.attrs };
+    }
+    else {
+        node.marks.forEach((mark) => {
+            switch (mark.type.name) {
+                case 'link':
+                    attributeOptions = { ...mark.attrs };
+                    break;
+                default:
+                    // Currently unsupported mark type
+                    break;
+            }
+        });
+    }
+    // Remove any non string elements from attributes, squiz component only accepts strings.
+    Object.keys(attributeOptions).forEach((key) => {
+        if (typeof attributeOptions[key] !== 'string' && typeof attributeOptions[key] !== 'number') {
+            delete attributeOptions[key];
+            // If it's a number we make it a string so its accepted by component service
+        }
+        else {
+            attributeOptions[key] = String(attributeOptions[key]);
+        }
+    });
+    return attributeOptions;
+};
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @export
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+const remirrorNodeToSquizNode = (node) => {
+    if (!(0, validNodeTypes_1.validRemirrorNode)(node))
+        return [];
+    const nodeType = node.type.name;
+    let nodeTag = (0, exports.resolveNodeTag)(node);
+    // Filter out any children nodes that aren't currently supported.
+    const children = (node.content.content || []).map((child) => (0, exports.remirrorNodeToSquizNode)(child));
+    let transformed = {
+        children,
+        formattingOptions: resolveFormattingOptions(node),
+        attributes: resolveAttributeOptions(node, nodeType),
+        font: resolveFontOptions(node),
+    };
+    if (nodeType === 'doc') {
+        return transformed.children;
+    }
+    // If we don't have a node tag yet, check if there is one needed
+    if (!nodeTag) {
+        node.marks.forEach((mark) => {
+            switch (mark.type.name) {
+                case 'link':
+                    nodeTag = 'a';
+                    break;
+                default:
+                    // Currently unsupported mark type
+                    break;
+            }
+        });
+    }
+    if (nodeTag) {
+        transformed = {
+            ...transformed,
+            type: 'tag',
+            tag: nodeTag,
+        };
+    }
+    if ((Object.keys(transformed.font).length > 0 || Object.keys(transformed.attributes).length > 0) &&
+        !transformed.type) {
+        // Wrap in span so we can apply formatting to it
+        transformed = { ...transformed, tag: 'span', type: 'tag' };
+    }
+    if (nodeType === 'text') {
+        if (transformed.type) {
+            // If we have a tag already nest the text beneath it so we can preserve formatting options, etc.
+            transformed = {
+                ...transformed,
+                children: [
+                    {
+                        type: 'text',
+                        value: node.text,
+                    },
+                ],
+            };
+        }
+        else {
+            // If we don't have a tag just rewrite the transformed value to be the text.
+            transformed = {
+                type: 'text',
+                value: node.text,
+            };
+        }
+    }
+    // Remove empty formatting options from transformed object.
+    if (transformed.formattingOptions && Object.keys(transformed.formattingOptions).length === 0) {
+        delete transformed.formattingOptions;
+    }
+    // Remove empty font options from transformed object.
+    if (transformed.font && Object.keys(transformed.font).length === 0) {
+        delete transformed.font;
+    }
+    // Remove empty attributes options from transformed object.
+    if (transformed.attributes && Object.keys(transformed.attributes).length === 0) {
+        delete transformed.attributes;
+    }
+    return transformed;
+};
+exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts

@@ -0,0 +1,9 @@
+import { RemirrorJSON } from '@remirror/core';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+export declare const squizNodeToRemirrorNode: (nodes: FormattedTextModels.v1.FormattedText) => RemirrorJSON;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.squizNodeToRemirrorNode = void 0;
+const getNodeType = (node) => {
+    const nodeTypeMap = {
+        h1: 'heading',
+        h2: 'heading',
+        h3: 'heading',
+        h4: 'heading',
+        h5: 'heading',
+        h6: 'heading',
+        img: 'image',
+        pre: 'preformatted',
+        p: 'paragraph',
+        text: 'paragraph',
+    };
+    const nodeType = nodeTypeMap[node.tag || node.type];
+    // Unsupported node type
+    if (!nodeType)
+        throw new Error(`Unsupported node type provided: ${node.tag}`);
+    return nodeType;
+};
+const getNodeAttributes = (node) => {
+    const { alignment } = node.formattingOptions || {};
+    return {
+        nodeIndent: null,
+        nodeTextAlignment: alignment ?? null,
+        nodeLineHeight: null,
+        style: '',
+        level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+    };
+};
+const resolveChild = (child) => {
+    if (child.type === 'text') {
+        return { type: 'text', text: child.value };
+    }
+    let text = '';
+    const marks = [];
+    if (child.type === 'tag') {
+        // Handle link type
+        if (child.tag === 'a') {
+            marks.push({
+                type: 'link',
+                attrs: {
+                    href: child.attributes?.href,
+                    target: child.attributes?.target ?? null,
+                    auto: false,
+                    title: child.attributes?.title ?? null,
+                },
+            });
+        }
+        // Handle image type
+        if (child.tag === 'img') {
+            return {
+                type: 'image',
+                attrs: {
+                    alt: child.attributes?.alt,
+                    height: child.attributes?.height,
+                    width: child.attributes?.width,
+                    src: child.attributes?.src,
+                    title: child.attributes?.title,
+                },
+            };
+        }
+        // Handle font formatting
+        child.font?.bold && marks.push({ type: 'bold' });
+        child.font?.italics && marks.push({ type: 'italic' });
+        child.font?.underline && marks.push({ type: 'underline' });
+        // For now all children types should be "text"
+        text = child.children[0].type === 'text' ? child.children[0].value : '';
+    }
+    return { type: 'text', marks, text };
+};
+const formatNode = (node) => {
+    let content;
+    if (node.type === 'tag') {
+        content = node.children.length ? node.children.map((child) => resolveChild(child)) : undefined;
+    }
+    if (node.type === 'text') {
+        content = [
+            {
+                type: 'text',
+                text: node.value,
+            },
+        ];
+    }
+    return {
+        type: getNodeType(node),
+        attrs: getNodeAttributes(node),
+        content,
+    };
+};
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+const squizNodeToRemirrorNode = (nodes) => {
+    return {
+        type: 'doc',
+        content: nodes.filter((node) => getNodeType(node)).map(formatNode),
+    };
+};
+exports.squizNodeToRemirrorNode = squizNodeToRemirrorNode;

package/lib/utils/converters/validNodeTypes.d.ts

@@ -0,0 +1,2 @@
+import { ProsemirrorNode } from 'remirror';
+export declare const validRemirrorNode: (node: ProsemirrorNode) => boolean;

package/lib/utils/converters/validNodeTypes.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validRemirrorNode = void 0;
+const Extensions_1 = require("../../Extensions/Extensions");
+const validRemirrorNode = (node) => {
+    if (!node)
+        return false;
+    const nodeType = node.type.name;
+    const nodeMarks = node.marks;
+    // This is pulling in the currently supported extensions, this works for now...
+    // Could also just hard code these in as we go, but this should make it easier as we add more extensions
+    const supportedNodes = [...(0, Extensions_1.Extensions)().map((extension) => extension.name), 'doc', 'text'];
+    if (!supportedNodes.includes(nodeType))
+        return false;
+    for (let i = 0; i < nodeMarks.length; i++) {
+        if (!supportedNodes.includes(nodeMarks[i].type.name))
+            return false;
+    }
+    return true;
+};
+exports.validRemirrorNode = validRemirrorNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.6",
+  "version": "1.21.1-alpha.9",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,6 +20,7 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
+    "@squiz/dx-json-schema-lib": "1.21.1-alpha.2",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0"
@@ -44,6 +45,7 @@
     "postcss-nested": "6.0.0",
     "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
+    "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
     "tailwindcss": "3.2.6",
@@ -68,5 +70,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "a32356af1c21852bc6cab498923e8da07cc8fbac"
+  "gitHead": "64afcee1b33efbff451aa0ef4e727c4e8a079621"
 }

package/src/Extensions/Extensions.ts

@@ -10,12 +10,13 @@ import {
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
 import { LinkExtension } from './LinkExtension/LinkExtension';
 import { ImageExtension } from './ImageExtension/ImageExtension';
+import { Extension } from '@remirror/core';
 
-export const Extensions = () => [
+export const Extensions = (): Extension[] => [
   new BoldExtension(),
   new HeadingExtension(),
   new ItalicExtension(),
-  new NodeFormattingExtension(),
+  new NodeFormattingExtension({ indents: [] }),
   new ParagraphExtension(),
   new PreformattedExtension(),
   new UnderlineExtension(),

package/src/index.ts

@@ -1,3 +1,5 @@
 import FormattedTextEditor from './FormattedTextEditor';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 
-export { FormattedTextEditor };
+export { FormattedTextEditor, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -0,0 +1,75 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+
+export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
+  {
+    children: [
+      {
+        type: 'text',
+        value: 'Hello ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Mr Bean',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        font: {
+          bold: true,
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: ', nice to ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'meet you',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: '.',
+      },
+      {
+        children: [],
+        attributes: {
+          alt: 'Test',
+          height: '150',
+          width: '200',
+          src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+          title: '',
+          resizable: 'false',
+        },
+        type: 'tag',
+        tag: 'img',
+      },
+    ],
+    type: 'tag',
+    tag: 'p',
+  },
+];
+
+export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
+  {
+    value: 'Hello world!',
+    type: 'text',
+  },
+  {
+    value: 'Another one...',
+    type: 'text',
+  },
+];