@squiz/formatted-text-editor 1.40.1-alpha.9 → 1.41.1-alpha.0

package/demo/AppContext.tsx

@@ -10,9 +10,20 @@ export const AppContext = ({ children }: AppContextProps) => (
   <ResourceBrowserContext.Provider
     value={{
       onRequestSources: (): Promise<Source> => Promise.resolve(sources),
-      onRequestChildren: (): Promise<Resource[]> => Promise.resolve(resources),
-      onRequestResource: (reference: ResourceReference): Promise<Resource | null> =>
-        Promise.resolve(resources.find((resource) => resource.id === reference.resource) || null),
+      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

package/demo/resources.json

@@ -9,11 +9,26 @@
       "code": "live",
       "name": "Live"
     },
-    "name": "Example image",
-    "childCount": 0
+    "name": "Example image one",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
   },
   {
     "id": "2",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example image two",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "3",
     "type": {
       "code": "page_standard",
       "name": "Standard Page"
@@ -23,6 +38,123 @@
       "name": "Live"
     },
     "name": "Example page",
-    "childCount": 0
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "4",
+    "type": {
+      "code": "folder",
+      "name": "Folder"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example folder",
+    "childCount": 10,
+    "url": "",
+    "_children": [
+      {
+        "id": "5",
+        "type": {
+          "code": "image",
+          "name": "Image"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "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"
+        },
+        "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"
+        },
+        "name": "Example page #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "8",
+        "type": {
+          "code": "folder",
+          "name": "Folder"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Example folder #2",
+        "childCount": 10,
+        "url": "",
+        "_children": [
+          {
+            "id": "9",
+            "type": {
+              "code": "image",
+              "name": "Image"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "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"
+            },
+            "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"
+            },
+            "name": "Example page #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          }
+        ]
+      }
+    ]
   }
 ]

package/lib/Editor/Editor.js

@@ -33,6 +33,7 @@ const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
 const useFocus_1 = __importDefault(require("../hooks/useFocus"));
+const resource_browser_1 = require("@squiz/resource-browser");
 const WrappedEditor = () => {
     const preventImagePaste = (0, react_1.useCallback)((event) => {
         const { clipboardData } = event;
@@ -48,7 +49,7 @@ const WrappedEditor = () => {
 };
 const Editor = ({ content, editable = true, onChange, children, isFocused }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -65,7 +66,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }) =>
         }
     }, []);
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
+        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
             react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
                 editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
                 children,

package/lib/EditorToolbar/Toolbar.js

@@ -9,7 +9,6 @@ const react_components_1 = require("@remirror/react-components");
 const clsx_1 = __importDefault(require("clsx"));
 const ItalicButton_1 = __importDefault(require("./Tools/Italic/ItalicButton"));
 const UnderlineButton_1 = __importDefault(require("./Tools/Underline/UnderlineButton"));
-const UnorderedListButton_1 = __importDefault(require("./Tools/UnorderedList/UnorderedListButton"));
 const BoldButton_1 = __importDefault(require("./Tools/Bold/BoldButton"));
 const TextAlignButtons_1 = __importDefault(require("./Tools/TextAlign/TextAlignButtons"));
 const UndoButton_1 = __importDefault(require("./Tools/Undo/UndoButton"));
@@ -19,6 +18,7 @@ const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
 const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
+const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
@@ -32,9 +32,8 @@ const Toolbar = ({ isVisible }) => {
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
         extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
-        extensionNames.bulletList && react_1.default.createElement(UnorderedListButton_1.default, null),
+        extensionNames.listItem && react_1.default.createElement(ListButtons_1.default, null),
         extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_components_1.VerticalDivider, null),
             react_1.default.createElement(LinkButton_1.default, null),
             react_1.default.createElement(RemoveLinkButton_1.default, null))),
         extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -53,7 +53,7 @@ const ImageButton = ({ inPopover = false }) => {
             insertAssetImage(assetImage);
         }
     };
-    const handleSubmit = (data) => {
+    const handleSubmit = async (data) => {
         insertImageFromData(data);
         setShowModal(false);
     };

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

@@ -0,0 +1,2 @@
+declare const ListButtons: () => JSX.Element;
+export default ListButtons;

package/lib/EditorToolbar/Tools/Lists/ListButtons.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const OrderedListButton_1 = __importDefault(require("./OrderedList/OrderedListButton"));
+const UnorderedListButton_1 = __importDefault(require("./UnorderedList/UnorderedListButton"));
+const react_components_1 = require("@remirror/react-components");
+const ListButtons = () => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(UnorderedListButton_1.default, null),
+    react_1.default.createElement(OrderedListButton_1.default, null),
+    react_1.default.createElement(react_components_1.VerticalDivider, null)));
+exports.default = ListButtons;

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

@@ -0,0 +1,2 @@
+declare const OrderedListButton: () => JSX.Element;
+export default OrderedListButton;

package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatListNumbered_1 = __importDefault(require("@mui/icons-material/FormatListNumbered"));
+const OrderedListButton = () => {
+    const { toggleOrderedList } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleOrderedList.enabled();
+    const handleSelect = () => {
+        if (toggleOrderedList.enabled()) {
+            chain.toggleOrderedList().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.orderedList(), icon: react_1.default.createElement(FormatListNumbered_1.default, null), label: "Ordered list" }));
+};
+exports.default = OrderedListButton;

package/lib/EditorToolbar/Tools/{UnorderedList → Lists/UnorderedList}/UnorderedListButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatListBulletedRounded_1 = __importDefault(require("@mui/icons-material/FormatListBulletedRounded"));
 const UnorderedListButton = () => {
     const { toggleBulletList } = (0, react_2.useCommands)();

package/lib/Extensions/Extensions.d.ts

@@ -1,5 +1,6 @@
 import { Extension } from '@remirror/core';
 import { EditorContextOptions } from '../Editor/EditorContext';
+import { ResourceBrowserContextProps } from '@squiz/resource-browser';
 export declare enum NodeName {
     Image = "image",
     CodeBlock = "codeBlock",
@@ -11,4 +12,4 @@ export declare enum MarkName {
     Link = "link",
     AssetLink = "assetLink"
 }
-export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];
+export declare const createExtensions: (context: EditorContextOptions, browserContext: ResourceBrowserContextProps) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -11,6 +11,7 @@ const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
 const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
 const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
+const FetchUrlExtension_1 = require("./FetchUrlExtension/FetchUrlExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
@@ -24,7 +25,7 @@ var MarkName;
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
-const createExtensions = (context) => {
+const createExtensions = (context, browserContext) => {
     return () => {
         return [
             new CommandsExtension_1.CommandsExtension(),
@@ -50,6 +51,11 @@ const createExtensions = (context) => {
             new ClearFormattingExtension_1.ClearFormattingExtension(),
             new extensions_1.BulletListExtension(),
             new extensions_1.ListItemExtension(),
+            new extensions_1.OrderedListExtension(),
+            new extensions_1.PlaceholderExtension(),
+            new FetchUrlExtension_1.FetchUrlExtension({
+                fetchUrl: browserContext.onRequestResource,
+            }),
         ];
     };
 };

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts

@@ -0,0 +1,14 @@
+import { PlainExtension } from '@remirror/core';
+import { Dispose, EditorView } from '@remirror/core-types';
+export type FetchUrlOptions = {
+    fetchUrl?: (params: {
+        resource: string;
+        source: string;
+    }) => Promise<any>;
+};
+export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
+    get name(): string;
+    onView(view: EditorView): Dispose | void;
+    private findAssetLinkMark;
+    private fetchAndReplace;
+}

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -0,0 +1,63 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FetchUrlExtension = void 0;
+const core_1 = require("@remirror/core");
+const Extensions_1 = require("../Extensions");
+let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
+    get name() {
+        return 'fetchUrl';
+    }
+    // Implement the `onView` lifecycle method to scan for `[fetch]` and replace attributes
+    onView(view) {
+        const { state } = view;
+        const { tr } = state;
+        const promises = [];
+        state.doc.descendants((node, pos) => {
+            if (node.type.name === Extensions_1.NodeName.AssetImage && node.attrs.src === '') {
+                promises.push(this.fetchAndReplace(node.attrs.matrixAssetId, node.attrs.matrixIdentifier, (url) => {
+                    const newNode = state.schema.nodes[Extensions_1.NodeName.AssetImage].create({ ...node.attrs, src: url });
+                    tr.replaceWith(pos, pos + node.nodeSize, newNode);
+                }));
+            }
+            const assetLinkMark = this.findAssetLinkMark(node.marks);
+            if (node.type.name === 'text' && assetLinkMark) {
+                promises.push(this.fetchAndReplace(assetLinkMark.attrs.matrixAssetId, assetLinkMark.attrs.matrixIdentifier, (url) => {
+                    const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
+                    tr.addMark(pos, pos + node.nodeSize, updatedMark);
+                }));
+            }
+        });
+        if (promises.length) {
+            Promise.all(promises).then(() => {
+                view.dispatch(tr);
+            });
+        }
+    }
+    findAssetLinkMark(marks) {
+        return marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink && mark.attrs.href === '');
+    }
+    fetchAndReplace(resource, source, onFetched) {
+        return this.options
+            .fetchUrl({ resource, source })
+            .then((asset) => {
+            onFetched(asset.url);
+        })
+            .catch((error) => {
+            console.error('Error fetching URL:', error);
+        });
+    }
+};
+FetchUrlExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            fetchUrl: () => Promise.resolve(),
+        },
+    })
+], FetchUrlExtension);
+exports.FetchUrlExtension = FetchUrlExtension;

package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts

@@ -7,6 +7,7 @@ export type AssetImageAttributes = {
     matrixAssetId: string;
     matrixIdentifier: string;
     matrixDomain: string;
+    url: string;
 };
 export declare class AssetImageExtension extends NodeExtension<AssetImageOptions> {
     get name(): NodeName.AssetImage;

package/lib/Extensions/ImageExtension/AssetImageExtension.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetImageExtension = void 0;
 const core_1 = require("@remirror/core");
 const remirror_1 = require("remirror");
-const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
 const Extensions_1 = require("../Extensions");
 let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension {
     get name() {
@@ -29,6 +28,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
                 matrixAssetId: {},
                 matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
+                src: { default: '' },
             },
             parseDOM: [
                 {
@@ -53,13 +53,13 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
                 },
             ],
             toDOM: (node) => {
-                const { matrixAssetId, matrixIdentifier, matrixDomain, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const { matrixAssetId, matrixIdentifier, matrixDomain, src, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
                 return [
                     'img',
                     {
                         ...extra.dom(node),
                         ...rest,
-                        src: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                        src,
                         'data-matrix-asset-id': matrixAssetId,
                         'data-matrix-identifier': matrixIdentifier,
                         'data-matrix-domain': matrixDomain,
@@ -71,7 +71,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
     insertAssetImage(attrs) {
         return ({ tr, dispatch }) => {
             const { from, to } = (0, remirror_1.getTextSelection)(tr.selection, tr.doc);
-            const node = this.type.create(attrs);
+            const node = this.type.create({ ...attrs, src: attrs.url });
             dispatch?.(tr.replaceRangeWith(from, to, node));
             return true;
         };

package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts

@@ -6,6 +6,8 @@ export type AssetLinkAttributes = {
     matrixIdentifier: string;
     matrixDomain: string;
     target: LinkTarget;
+    href: string;
+    url: string;
 };
 export type AssetLinkOptions = {
     matrixDomain?: string;

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -12,7 +12,6 @@ const core_1 = require("@remirror/core");
 const common_1 = require("./common");
 const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
 const Extensions_1 = require("../Extensions");
-const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
 let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     get name() {
         return Extensions_1.MarkName.AssetLink;
@@ -26,6 +25,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
                 ...extra.defaults(),
                 matrixAssetId: {},
                 matrixIdentifier: {},
+                href: { default: '' },
                 matrixDomain: { default: this.options.matrixDomain },
                 target: { default: this.options.defaultTarget },
             },
@@ -53,13 +53,13 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
                 },
             ],
             toDOM: (node) => {
-                const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const { matrixAssetId, matrixIdentifier, matrixDomain, target, href, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
                 const rel = 'noopener noreferrer nofollow';
                 const attrs = {
                     ...extra.dom(node),
                     ...rest,
                     rel,
-                    href: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                    href,
                     target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
                     'data-matrix-asset-id': matrixAssetId,
                     'data-matrix-identifier': matrixIdentifier,
@@ -71,7 +71,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     }
     updateAssetLink({ text, attrs, range }) {
         return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
-            attrs,
+            attrs: { ...attrs, href: attrs.url },
             text,
             range,
             mark: this.type,

package/lib/hooks/useFocus.js

@@ -6,13 +6,32 @@ const useFocus = (initialState) => {
     const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
     const handleFocus = (0, react_1.useCallback)(() => {
         setIsVisible(true);
-    }, []);
-    const handleBlur = (event) => {
-        const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget);
-        if (isOutside) {
+    }, [wrapperRef]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+        // The tree deviates when rendering portals (eg. for modals).
+        //
+        // Only hide the toolbar if:
+        // 1. We are blurring a node in the editor **DOM** tree.
+        // 2. We are focusing on something that is not in the editor DOM tree
+        //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+        //
+        // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+        // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+        // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+        // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+        //
+        // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+        // identifiable however without reaching into React internals.
+        //
+        // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+        // (and therefore still in our React tree resulting in the element still effectively being focused).
+        const isBlurringEditor = wrapperRef.current?.contains(event.target);
+        const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
+        if (isBlurringEditor && !isFocusedInEditor) {
             setIsVisible(false);
         }
-    };
+    }, [wrapperRef]);
     return { handleFocus, handleBlur, isVisible, wrapperRef };
 };
 exports.default = useFocus;

package/lib/index.css

@@ -643,6 +643,10 @@
   color: rgb(7 116 210 / var(--tw-text-opacity));
   text-decoration: underline;
 }
+.squiz-fte-scope .remirror-editor p {
+  -webkit-margin-after: 0.8rem;
+  margin-block-end: 0.8rem;
+}
 .squiz-fte-scope .remirror-editor h1 {
   font-size: 1.625rem;
   font-weight: 600;
@@ -709,11 +713,15 @@
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.squiz-fte-scope .remirror-editor ul {
+.squiz-fte-scope .remirror-editor ul,
+.squiz-fte-scope .remirror-editor ol {
   list-style-type: disc;
   padding: 0 0 0 2.5rem;
   margin: 1rem 0;
 }
+.squiz-fte-scope .remirror-editor ol {
+  list-style-type: decimal;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;

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

@@ -2,6 +2,7 @@ import { InputContainerProps } from '../InputContainer/InputContainer';
 type MatrixAssetValue = {
     matrixIdentifier?: string;
     matrixAssetId?: string;
+    url?: string;
 };
 export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
     modalTitle: string;

package/lib/ui/Fields/MatrixAsset/MatrixAsset.js

@@ -21,6 +21,7 @@ const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) =>
                             ...value,
                             matrixIdentifier: reference?.source?.id,
                             matrixAssetId: reference?.resource?.id,
+                            url: reference?.resource?.url,
                         },
                     },
                 });

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

@@ -19,8 +19,9 @@ const getNodeType = (node) => {
         img: 'image',
         pre: 'preformatted',
         p: 'paragraph',
-        ul: 'bulletList',
+        ol: 'orderedList',
         li: 'listItem',
+        ul: 'bulletList',
         a: Extensions_1.NodeName.Text,
         span: Extensions_1.NodeName.Text,
         code: Extensions_1.NodeName.CodeBlock,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.40.1-alpha.9",
+  "version": "1.41.1-alpha.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.40.1-alpha.9",
-    "@squiz/resource-browser": "1.40.1-alpha.9",
+    "@squiz/dx-json-schema-lib": "1.41.1-alpha.0",
+    "@squiz/resource-browser": "1.41.1-alpha.0",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "c613b6cf103eb0e484153adecbef5d589bff872b"
+  "gitHead": "85be9c5f7ecf79f0037fb6124a122aab38ffaa59"
 }