@squiz/formatted-text-editor 1.33.1-alpha.3 → 1.33.1-alpha.4

package/demo/App.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Editor, EditorContext, 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';
 
 function App() {
   const [doc, setDoc] = useState('');
@@ -35,34 +36,13 @@ function App() {
       </div>
       <h1>Editor</h1>
       <div className="page-section">
-        <EditorContext.Provider
-          value={{
-            matrix: {
-              matrixDomain: 'https://matrix-domain.squiz.net',
-              matrixIdentifier: 'matrix-api-identifier',
-              resolveMatrixAsset: (assetId: string) => {
-                return new Promise((resolve) => {
-                  setTimeout(() => {
-                    if (assetId.match(/invalid/i)) {
-                      resolve(null);
-                    } else {
-                      resolve({
-                        id: assetId,
-                        type: assetId.match(/(image)/i)?.[0] || 'unknown',
-                      });
-                    }
-                  }, 200);
-                });
-              },
-            },
-          }}
-        >
+        <AppContext>
           <Editor
             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>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
             onChange={handleEditorChange}
           />
-        </EditorContext.Provider>
+        </AppContext>
       </div>
       <h1>Document</h1>
       <div className="page-section">

package/demo/AppContext.tsx

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { EditorContext } from '../src';
+import resources from './resources.json';
+import sources from './sources.json';
+
+export type AppContextProps = PropsWithChildren;
+
+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),
+    }}
+  >
+    <EditorContext.Provider
+      value={{
+        matrix: {
+          matrixDomain: 'https://matrix-domain.squiz.net',
+        },
+      }}
+    >
+      {children}
+    </EditorContext.Provider>
+  </ResourceBrowserContext.Provider>
+);

package/demo/index.scss

@@ -1,5 +1,3 @@
-@import '../src/index.scss';
-
 body {
   font-family: 'Open Sans';
 }

package/demo/main.tsx

@@ -1,6 +1,8 @@
 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(

package/demo/resources.json

@@ -0,0 +1,28 @@
+[
+  {
+    "id": "1",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example image",
+    "childCount": 0
+  },
+  {
+    "id": "2",
+    "type": {
+      "code": "page_standard",
+      "name": "Standard Page"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example page",
+    "childCount": 0
+  }
+]

package/demo/sources.json

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

package/lib/Editor/EditorContext.d.ts

@@ -1,14 +1,7 @@
 import React from 'react';
-export type MatrixAsset = {
-    id: string;
-    type: string | 'image';
-};
-export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
 export type EditorContextOptions = {
     matrix: {
-        matrixIdentifier: string;
         matrixDomain: string;
-        resolveMatrixAsset: MatrixAssetResolver;
     };
 };
 export declare const defaultEditorContext: EditorContextOptions;

package/lib/Editor/EditorContext.js

@@ -7,9 +7,7 @@ exports.EditorContext = exports.defaultEditorContext = void 0;
 const react_1 = __importDefault(require("react"));
 exports.defaultEditorContext = {
     matrix: {
-        matrixIdentifier: '',
         matrixDomain: '',
-        resolveMatrixAsset: () => Promise.resolve(null),
     },
 };
 exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -27,27 +27,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const Input_1 = require("../../../../ui/Fields/Input/Input");
 const react_hook_form_1 = require("react-hook-form");
 const react_image_size_1 = require("react-image-size");
+const clsx_1 = __importDefault(require("clsx"));
+const Input_1 = require("../../../../ui/Fields/Input/Input");
 const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
-const clsx_1 = __importDefault(require("clsx"));
 const Extensions_1 = require("../../../../Extensions/Extensions");
-const EditorContext_1 = require("../../../../Editor/EditorContext");
 const validation_1 = require("../../../../utils/validation");
 const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
 const imageTypeOptions = {
     [Extensions_1.NodeName.AssetImage]: { label: 'From source' },
     [Extensions_1.NodeName.Image]: { label: 'From URL' },
 };
 const ImageForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+    const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
     const imageType = watch('imageType') || Extensions_1.NodeName.AssetImage;
-    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
     const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
     const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
     const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
@@ -136,19 +135,9 @@ const ImageForm = ({ data, onSubmit }) => {
                         }) }))),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                 react_1.default.createElement(Input_1.Input, { label: "Alternative description", error: errors?.image?.alt?.message, ...register('image.alt') })))),
-        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetImage?.matrixAssetId?.message, ...register('assetImage.matrixAssetId', {
-                        required: 'Asset ID is required',
-                        validate: {
-                            isImage: async (assetId) => {
-                                const asset = await context.matrix.resolveMatrixAsset(assetId);
-                                if (asset?.type !== 'image') {
-                                    return 'Asset ID is invalid or not an image';
-                                }
-                            },
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) }))))));
+        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetImage", rules: {
+                    validate: (0, validation_1.hasProperties)('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: onChange, error: error?.message })) })))));
 };
 exports.default = ImageForm;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -1,49 +1,25 @@
 "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 });
 exports.LinkForm = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_hook_form_1 = require("react-hook-form");
 const Input_1 = require("../../../../ui/Fields/Input/Input");
 const Checkbox_1 = require("../../../../ui/Fields/Checkbox/Checkbox");
 const common_1 = require("../../../../Extensions/LinkExtension/common");
-const EditorContext_1 = require("../../../../Editor/EditorContext");
 const Extensions_1 = require("../../../../Extensions/Extensions");
 const validation_1 = require("../../../../utils/validation");
 const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
 const linkTypeOptions = {
     [Extensions_1.MarkName.AssetLink]: { label: 'From source' },
     [Extensions_1.MarkName.Link]: { label: 'From URL' },
 };
 const LinkForm = ({ data, onSubmit }) => {
-    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
-    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+    const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
     const linkType = watch('linkType') || Extensions_1.MarkName.AssetLink;
@@ -71,17 +47,9 @@ const LinkForm = ({ data, onSubmit }) => {
                 react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('link.target', value), defaultChecked: data?.link?.target === common_1.LinkTarget.Blank, unchecked: common_1.LinkTarget.Self, checked: common_1.LinkTarget.Blank })))),
         linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
-                        required: 'Asset ID is required',
-                        validate: {
-                            isValidAsset: async (assetId) => {
-                                if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
-                                    return 'Invalid asset ID';
-                                }
-                            },
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
+                react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetLink", rules: {
+                        validate: (0, validation_1.hasProperties)('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                    }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert link", value: value, onChange: onChange, error: error?.message })) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
                 react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
                         required: 'Text is required',

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js

@@ -33,7 +33,7 @@ const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const RemoveLinkButton = ({ inPopover = false }) => {
     const chain = (0, react_2.useChainedCommands)();
     const active = (0, react_2.useActive)();
-    const disabled = !active.link();
+    const disabled = !active.link() && !active.assetLink();
     const handleClick = () => {
         chain.removeLink().removeAssetLink().focus().run();
     };

package/lib/Extensions/Extensions.js

@@ -34,12 +34,10 @@ const createExtensions = (context) => {
             new ImageExtension_1.ImageExtension(),
             new ImageExtension_1.ImageExtension({ preferPastedTextContent: false }),
             new AssetImageExtension_1.AssetImageExtension({
-                matrixIdentifier: context.matrix.matrixIdentifier,
                 matrixDomain: context.matrix.matrixDomain,
             }),
             new LinkExtension_1.LinkExtension(),
             new AssetLinkExtension_1.AssetLinkExtension({
-                matrixIdentifier: context.matrix.matrixIdentifier,
                 matrixDomain: context.matrix.matrixDomain,
             }),
         ];

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

@@ -1,7 +1,6 @@
 import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride, CommandFunction } from '@remirror/core';
 import { NodeName } from '../Extensions';
 export type AssetImageOptions = {
-    matrixIdentifier?: string;
     matrixDomain?: string;
 };
 export type AssetImageAttributes = {

package/lib/Extensions/ImageExtension/AssetImageExtension.js

@@ -27,7 +27,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
             attrs: {
                 ...extra.defaults(),
                 matrixAssetId: {},
-                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
             },
             parseDOM: [
@@ -83,7 +83,6 @@ __decorate([
 AssetImageExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            matrixIdentifier: '',
             matrixDomain: '',
         },
         defaultPriority: core_1.ExtensionPriority.High,

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

@@ -8,7 +8,6 @@ export type AssetLinkAttributes = {
     target: LinkTarget;
 };
 export type AssetLinkOptions = {
-    matrixIdentifier?: string;
     matrixDomain?: string;
     defaultTarget?: LinkTarget;
     supportedTargets?: LinkTarget[];

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -25,7 +25,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
             attrs: {
                 ...extra.defaults(),
                 matrixAssetId: {},
-                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
                 target: { default: this.options.defaultTarget },
             },
@@ -91,7 +91,6 @@ __decorate([
 AssetLinkExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            matrixIdentifier: '',
             matrixDomain: '',
             defaultTarget: common_1.LinkTarget.Self,
             supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],

package/lib/index.css

@@ -630,6 +630,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));
@@ -683,6 +686,7 @@
   color: rgb(112 112 112 / var(--tw-text-opacity));
 }
 .squiz-fte-scope .squiz-fte-form-control {
+  height: 36px;
   padding: 6px 12px;
   position: relative;
   width: 100%;
@@ -716,13 +720,14 @@
 .squiz-fte-scope .squiz-fte-form-control:active {
   box-shadow: none;
 }
-.squiz-fte-scope .squiz-fte-invalid-form-field .squiz-fte-form-control {
+.squiz-fte-scope .squiz-fte-invalid-form-field .squiz-fte-form-control,
+.squiz-fte-scope .squiz-fte-invalid-form-field .resource-picker {
   --tw-border-opacity: 1;
   border-color: rgb(215 35 33 / var(--tw-border-opacity));
   background-repeat: no-repeat;
   padding-right: 2rem;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+);
-  background-position: top 0.25rem right 0.25rem;
+  background-position: center right 0.25rem;
   background-size: 1.5rem;
 }
 .squiz-fte-scope .squiz-fte-form-error {

package/lib/types.d.ts

@@ -1,3 +1,3 @@
-export type DeepPartial<T> = T extends Record<string, unknown> ? {
-    [P in keyof T]?: DeepPartial<T[P]>;
-} : T;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};

package/lib/ui/Fields/Checkbox/Checkbox.js

@@ -42,6 +42,6 @@ const Checkbox = ({ label, onChange, defaultChecked = false, unchecked, checked,
     const toggleCheckbox = () => setToggled(!toggled);
     return (react_1.default.createElement("div", { className: "squiz-fte-checkbox" },
         react_1.default.createElement("button", { type: "button", role: "checkbox", "aria-label": label, "aria-checked": toggled, className: "checkbox", onClick: toggleCheckbox }, toggled && react_1.default.createElement(CheckRounded_1.default, null)),
-        react_1.default.createElement("button", { type: "button", className: "label", onClick: toggleCheckbox }, label)));
+        react_1.default.createElement("button", { type: "button", className: "label", onClick: toggleCheckbox, tabIndex: -1 }, label)));
 };
 exports.Checkbox = Checkbox;

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

@@ -1,5 +1,3 @@
 import React from 'react';
-export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label?: string | undefined;
-    error?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+import { InputContainerProps } from '../InputContainer/InputContainer';
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & Omit<InputContainerProps, "children"> & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/Fields/Input/Input.js

@@ -22,18 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.Input = void 0;
 const react_1 = __importStar(require("react"));
-const clsx_1 = __importDefault(require("clsx"));
+const InputContainer_1 = require("../InputContainer/InputContainer");
 const InputInternal = ({ name, label, type = 'text', error, required, ...rest }, ref) => {
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
-        label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
-        required && (react_1.default.createElement("span", { className: "text-gray-600", "aria-label": "Required field" }, "*")),
-        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest }),
-        error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { name: name, label: label, error: error, required: required },
+        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest })));
 };
 exports.Input = (0, react_1.forwardRef)(InputInternal);

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

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

package/lib/ui/Fields/InputContainer/InputContainer.js

@@ -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.InputContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const InputContainer = ({ name, label, error, required, children }) => {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
+        label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
+        label && required && (react_1.default.createElement("span", { className: "text-gray-600", "aria-label": "Required field" }, "*")),
+        children,
+        error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
+};
+exports.InputContainer = InputContainer;

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

@@ -0,0 +1,17 @@
+import { InputContainerProps } from '../InputContainer/InputContainer';
+type MatrixAssetValue = {
+    matrixIdentifier?: string;
+    matrixAssetId?: string;
+};
+export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+    modalTitle: string;
+    allowedTypes?: string[];
+    value?: T | null;
+    onChange: (value: {
+        target: {
+            value: T;
+        };
+    }) => void;
+};
+export declare const MatrixAsset: <T extends MatrixAssetValue>({ modalTitle, allowedTypes, value, onChange, ...props }: MatrixAssetProps<T>) => JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MatrixAsset = void 0;
+const react_1 = __importDefault(require("react"));
+const resource_browser_1 = require("@squiz/resource-browser");
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
+        react_1.default.createElement(resource_browser_1.ResourceBrowserInput, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
+                ? {
+                    source: value.matrixIdentifier,
+                    resource: value.matrixAssetId,
+                }
+                : null, onChange: (reference) => {
+                onChange({
+                    target: {
+                        value: {
+                            ...value,
+                            matrixIdentifier: reference?.source?.id,
+                            matrixAssetId: reference?.resource?.id,
+                        },
+                    },
+                });
+            } })));
+};
+exports.MatrixAsset = MatrixAsset;

package/lib/utils/validation.d.ts

@@ -1,2 +1,3 @@
-export declare const noEmptySpacesValidation: (value: string | undefined) => Promise<"Empty space is not allowed" | undefined>;
+export declare const noEmptySpacesValidation: (value: string | undefined) => "Empty space is not allowed" | undefined;
+export declare const hasProperties: <T>(message: string, properties: (keyof T)[]) => (value: T) => string | undefined;
 export declare const regexDataURI: RegExp;

package/lib/utils/validation.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.regexDataURI = exports.noEmptySpacesValidation = void 0;
-const noEmptySpacesValidation = async (value) => {
+exports.regexDataURI = exports.hasProperties = exports.noEmptySpacesValidation = void 0;
+const noEmptySpacesValidation = (value) => {
     if (value && !(value.trim().length > 0)) {
         return 'Empty space is not allowed';
     }
 };
 exports.noEmptySpacesValidation = noEmptySpacesValidation;
+const hasProperties = (message, properties) => (value) => {
+    if (!value || properties.filter((property) => value[property]).length !== properties.length) {
+        return message;
+    }
+};
+exports.hasProperties = hasProperties;
 exports.regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.33.1-alpha.3",
+  "version": "1.33.1-alpha.4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,7 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.21.1-alpha.2",
+    "@squiz/dx-json-schema-lib": "1.33.1-alpha.4",
+    "@squiz/resource-browser": "1.33.1-alpha.4",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -74,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "5189e21fcd9ad091397cacfa50765caf6138b034"
+  "gitHead": "00015ccc2b5c7761d3a62e8bbcdf88be15038877"
 }

package/src/Editor/Editor.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import Editor from './Editor';
 import '@testing-library/jest-dom';
-import { renderWithEditor } from '../../tests/renderWithEditor';
+import { renderWithEditor } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
 describe('Formatted text editor', () => {