@squiz/formatted-text-editor 1.64.0 → 1.65.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.65.0
+
+### Minor Changes
+
+- e11f4e7: Exported function for transforming HTML to formatted text JSON.
+
 ## 1.64.0
 
 ### Minor Changes

package/lib/Editor/Editor.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 type EditorProps = {
     className?: string;
@@ -11,5 +11,5 @@ type EditorProps = {
     label?: string;
     attributes?: Record<string, string>;
 };
-declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, }: EditorProps) => JSX.Element;
+declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, }: EditorProps) => React.JSX.Element;
 export default Editor;

package/lib/EditorToolbar/FloatingToolbar.d.ts

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

package/lib/EditorToolbar/Toolbar.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 type ToolbarProps = {
     isVisible: boolean;
 };
-export declare const Toolbar: ({ isVisible }: ToolbarProps) => JSX.Element;
+export declare const Toolbar: ({ isVisible }: ToolbarProps) => React.JSX.Element;
 export {};

package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts

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

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts

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

package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.d.ts

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

package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 type ImageButtonProps = {
     inPopover?: boolean;
 };
-declare const ImageButton: ({ inPopover }: ImageButtonProps) => JSX.Element;
+declare const ImageButton: ({ inPopover }: ImageButtonProps) => React.JSX.Element;
 export default ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts

@@ -1,8 +1,9 @@
 import { ImageFormData } from './Form/ImageForm';
+import React from 'react';
 import { SubmitHandler } from 'react-hook-form';
 type ImageModalProps = {
     onCancel: () => void;
     onSubmit: SubmitHandler<ImageFormData>;
 };
-declare const ImageModal: ({ onCancel, onSubmit }: ImageModalProps) => JSX.Element;
+declare const ImageModal: ({ onCancel, onSubmit }: ImageModalProps) => React.JSX.Element;
 export default ImageModal;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts

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

package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export type LinkButtonProps = {
     inPopover?: boolean;
 };
-declare const LinkButton: ({ inPopover }: LinkButtonProps) => JSX.Element;
+declare const LinkButton: ({ inPopover }: LinkButtonProps) => React.JSX.Element;
 export default LinkButton;

package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts

@@ -1,8 +1,9 @@
 import { LinkFormData } from './Form/LinkForm';
+import React from 'react';
 import { SubmitHandler } from 'react-hook-form';
 type LinkModalProps = {
     onCancel: () => void;
     onSubmit: SubmitHandler<LinkFormData>;
 };
-declare const LinkModal: ({ onCancel, onSubmit }: LinkModalProps) => JSX.Element;
+declare const LinkModal: ({ onCancel, onSubmit }: LinkModalProps) => React.JSX.Element;
 export default LinkModal;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { LinkButtonProps } from './LinkButton';
-declare const RemoveLinkButton: ({ inPopover }: LinkButtonProps) => JSX.Element;
+declare const RemoveLinkButton: ({ inPopover }: LinkButtonProps) => React.JSX.Element;
 export default RemoveLinkButton;

package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts

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

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts

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

package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.d.ts

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

package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts

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

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts

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

package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.d.ts

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

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 type HeadingButtonProps = {
     level: number;
 };
-declare const HeadingButton: ({ level }: HeadingButtonProps) => JSX.Element;
+declare const HeadingButton: ({ level }: HeadingButtonProps) => React.JSX.Element;
 export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts

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

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts

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

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts

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

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts

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

package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts

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

package/lib/Extensions/Extensions.js

@@ -30,6 +30,7 @@ const createExtensions = (context, browserContext) => {
         return [
             new CommandsExtension_1.CommandsExtension(),
             new extensions_1.BoldExtension(),
+            new extensions_1.DocExtension(),
             new extensions_1.HeadingExtension(),
             new extensions_1.ItalicExtension(),
             new extensions_1.NodeFormattingExtension({ indents: [] }),
@@ -57,6 +58,7 @@ const createExtensions = (context, browserContext) => {
             new FetchUrlExtension_1.FetchUrlExtension({
                 fetchUrl: browserContext.onRequestResource,
             }),
+            new extensions_1.TextExtension(),
         ];
     };
 };

package/lib/index.d.ts

@@ -2,4 +2,5 @@ import Editor from './Editor/Editor';
 import { EditorContext } from './Editor/EditorContext';
 import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
 import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
-export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode };
+import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.EditorContext = exports.Editor = void 0;
+exports.htmlToSquizNode = exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.EditorContext = exports.Editor = void 0;
 const Editor_1 = __importDefault(require("./Editor/Editor"));
 exports.Editor = Editor_1.default;
 const EditorContext_1 = require("./Editor/EditorContext");
@@ -12,3 +12,5 @@ const remirrorNodeToSquizNode_1 = require("./utils/converters/remirrorNodeToSqui
 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; } });
+const htmlToSquizNode_1 = require("./utils/converters/htmlToSquizNode/htmlToSquizNode");
+Object.defineProperty(exports, "htmlToSquizNode", { enumerable: true, get: function () { return htmlToSquizNode_1.htmlToSquizNode; } });

package/lib/ui/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 type ButtonProps = {
     handleOnClick: () => void;
     isDisabled?: boolean;
@@ -8,5 +8,5 @@ type ButtonProps = {
     icon?: ReactElement;
     className?: string;
 };
-declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => JSX.Element;
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => React.JSX.Element;
 export default Button;

package/lib/ui/Fields/Checkbox/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type CheckboxProps<TChecked, TUnchecked> = {
     label: string;
     onChange: (value: TChecked | TUnchecked) => void;
@@ -5,4 +6,4 @@ export type CheckboxProps<TChecked, TUnchecked> = {
     unchecked: TUnchecked;
     checked: TChecked;
 };
-export declare const Checkbox: <TChecked, TUnchecked>({ label, onChange, defaultChecked, unchecked, checked, }: CheckboxProps<TChecked, TUnchecked>) => JSX.Element;
+export declare const Checkbox: <TChecked, TUnchecked>({ label, onChange, defaultChecked, unchecked, checked, }: CheckboxProps<TChecked, TUnchecked>) => React.JSX.Element;

package/lib/ui/Fields/InputContainer/InputContainer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export type InputContainerProps = {
     name?: string;
     label?: string;
@@ -6,4 +6,4 @@ export type InputContainerProps = {
     required?: boolean;
     children: ReactNode;
 };
-export declare const InputContainer: ({ name, label, error, required, children }: InputContainerProps) => JSX.Element;
+export declare const InputContainer: ({ name, label, error, required, children }: InputContainerProps) => React.JSX.Element;

package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { InputContainerProps } from '../InputContainer/InputContainer';
 type MatrixAssetValue = {
     matrixIdentifier?: string;
@@ -14,5 +15,5 @@ export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerPr
         };
     }) => void;
 };
-export declare const MatrixAsset: <T extends MatrixAssetValue>({ modalTitle, allowedTypes, value, onChange, ...props }: MatrixAssetProps<T>) => JSX.Element;
+export declare const MatrixAsset: <T extends MatrixAssetValue>({ modalTitle, allowedTypes, value, onChange, ...props }: MatrixAssetProps<T>) => React.JSX.Element;
 export {};

package/lib/ui/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type TabOptions = Record<string, TabOption>;
 export type TabOption = {
     label: string;
@@ -7,4 +8,4 @@ export type TabsProps = {
     options: TabOptions;
     onChange?: (value: string) => void;
 };
-export declare const Tabs: ({ value, options, onChange }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ value, options, onChange }: TabsProps) => React.JSX.Element;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 type ToolbarDropdownProps = {
     children: JSX.Element | JSX.Element[];
     label: string;
 };
-declare const ToolbarDropdown: ({ children, label }: ToolbarDropdownProps) => JSX.Element;
+declare const ToolbarDropdown: ({ children, label }: ToolbarDropdownProps) => React.JSX.Element;
 export default ToolbarDropdown;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type DropdownButtonProps = {
     children?: JSX.Element;
     handleOnClick: () => void;
@@ -6,5 +7,5 @@ type DropdownButtonProps = {
     label: string;
     icon?: JSX.Element;
 };
-declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => JSX.Element;
+declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => React.JSX.Element;
 export default DropdownButton;

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

@@ -0,0 +1,5 @@
+import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
+import { HtmlToSquizNodeProps } from './htmlToSquizNode.props';
+type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
+export declare const htmlToSquizNode: ({ content }: HtmlToSquizNodeProps) => FormattedText | undefined;
+export {};

package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlToSquizNode = void 0;
+const remirror_1 = require("remirror");
+const remirrorNodeToSquizNode_1 = require("../remirrorNodeToSquizNode/remirrorNodeToSquizNode");
+const core_1 = require("@remirror/core");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const htmlToSquizNode = ({ content }) => {
+    const extensions = (0, Extensions_1.createExtensions)({
+        matrix: {
+            matrixDomain: 'unsupported',
+        },
+    }, {
+        onRequestResource: () => {
+            throw new Error('Resolving Matrix assets is not supported.');
+        },
+        onRequestSources: () => {
+            throw new Error('Resolving Matrix assets is not supported.');
+        },
+        onRequestChildren: () => {
+            throw new Error('Resolving Matrix assets is not supported.');
+        },
+    });
+    const manager = core_1.RemirrorManager.create(extensions);
+    return (0, remirrorNodeToSquizNode_1.remirrorNodeToSquizNode)((0, remirror_1.htmlToProsemirrorNode)({
+        content,
+        schema: manager.schema,
+    }));
+};
+exports.htmlToSquizNode = htmlToSquizNode;

package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.d.ts

@@ -0,0 +1,3 @@
+export type HtmlToSquizNodeProps = {
+    content: string;
+};

package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.64.0",
+  "version": "1.65.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "vite build",
     "clean": "rimraf ./lib tsconfig.tsbuildinfo",
@@ -32,8 +36,8 @@
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/node": "18.15.2",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "3.0.0",
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",

package/src/Extensions/Extensions.ts

@@ -1,5 +1,6 @@
 import {
   BoldExtension,
+  DocExtension,
   HeadingExtension,
   ItalicExtension,
   NodeFormattingExtension,
@@ -11,6 +12,7 @@ import {
   ListItemExtension,
   PlaceholderExtension,
   HorizontalRuleExtension,
+  TextExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -43,6 +45,7 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
     return [
       new CommandsExtension(),
       new BoldExtension(),
+      new DocExtension(),
       new HeadingExtension(),
       new ItalicExtension(),
       new NodeFormattingExtension({ indents: [] }),
@@ -70,6 +73,7 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
       new FetchUrlExtension({
         fetchUrl: browserContext.onRequestResource,
       }),
+      new TextExtension(),
     ];
   };
 };

package/src/index.ts

@@ -2,5 +2,6 @@ import Editor from './Editor/Editor';
 import { EditorContext } from './Editor/EditorContext';
 import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
 import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
 
-export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode };
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.props.ts

@@ -0,0 +1,3 @@
+export type HtmlToSquizNodeProps = {
+  content: string;
+};

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.spec.ts

@@ -0,0 +1,186 @@
+import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
+import { htmlToSquizNode } from './htmlToSquizNode';
+
+type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
+
+describe('htmlToSquizNode', () => {
+  it.each([
+    ['empty string', '', undefined],
+    [
+      'HTML with missing closing tag is converted',
+      '<p>Some invalid HTML content',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Some invalid HTML content',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    ['unsupported HTML is removed', '<script>var hello = "script tags are not supported";</script>', undefined],
+    [
+      'unsupported HTML is removed, supported HTML is retained',
+      '<p>Paragraphs are support</p><script>var hello = "script tags are not supported";</script>' +
+        '<p>Another paragraph</p>',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Paragraphs are support',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Another paragraph',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'plain text content is nested inside a paragraph tag',
+      'Plain text input',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Plain text input',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'HTML tags that are styled via classes are transformed',
+      '<em>Italicised text</em>, <strong>Bold text</strong>',
+      [
+        {
+          children: [
+            {
+              type: 'tag',
+              tag: 'span',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Italicised text',
+                },
+              ],
+              font: {
+                italics: true,
+              },
+            },
+            {
+              type: 'text',
+              value: ', ',
+            },
+            {
+              type: 'tag',
+              tag: 'span',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Bold text',
+                },
+              ],
+              font: {
+                bold: true,
+              },
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'HTML tags with attributes are transformed',
+      '<a href="https://www.google.com">Google</a>',
+      [
+        {
+          children: [
+            {
+              type: 'tag',
+              tag: 'a',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Google',
+                },
+              ],
+              attributes: {
+                href: 'https://www.google.com',
+                target: '_self',
+              },
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'nested block level tags are un-nested/normalised to a supported structure',
+      "<div><p>Div tags are not support, <p>Nested block element also aren't</p></p>" +
+        '<span>Span tags are not supported</span><br />' +
+        'Break lines also, you got it, not supported.',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Div tags are not support,',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: "Nested block element also aren't",
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Span tags are not supported Break lines also, you got it, not supported.',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+  ])(
+    'should convert HTML to Squiz formatted text JSON - %s',
+    (description: string, content: string, expected: FormattedText | undefined) => {
+      expect(htmlToSquizNode({ content })).toEqual(expected);
+    },
+  );
+});

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts

@@ -0,0 +1,37 @@
+import { htmlToProsemirrorNode } from 'remirror';
+import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
+import { remirrorNodeToSquizNode } from '../remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { RemirrorManager } from '@remirror/core';
+import { createExtensions } from '../../../Extensions/Extensions';
+import { HtmlToSquizNodeProps } from './htmlToSquizNode.props';
+
+type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
+
+export const htmlToSquizNode = ({ content }: HtmlToSquizNodeProps): FormattedText | undefined => {
+  const extensions = createExtensions(
+    {
+      matrix: {
+        matrixDomain: 'unsupported',
+      },
+    },
+    {
+      onRequestResource: () => {
+        throw new Error('Resolving Matrix assets is not supported.');
+      },
+      onRequestSources: () => {
+        throw new Error('Resolving Matrix assets is not supported.');
+      },
+      onRequestChildren: () => {
+        throw new Error('Resolving Matrix assets is not supported.');
+      },
+    },
+  );
+  const manager = RemirrorManager.create(extensions);
+
+  return remirrorNodeToSquizNode(
+    htmlToProsemirrorNode({
+      content,
+      schema: manager.schema,
+    }),
+  );
+};