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

package/lib/index.css

@@ -404,18 +404,33 @@
 .squiz-fte-scope .mb-2 {
   margin-bottom: 0.5rem !important;
 }
+.squiz-fte-scope .mb-4 {
+  margin-bottom: 1rem !important;
+}
 .squiz-fte-scope .ml-3 {
   margin-left: 0.75rem !important;
 }
 .squiz-fte-scope .ml-auto {
   margin-left: auto !important;
 }
+.squiz-fte-scope .mr-1 {
+  margin-right: 0.25rem !important;
+}
+.squiz-fte-scope .mr-1\.5 {
+  margin-right: 0.375rem !important;
+}
 .squiz-fte-scope .mr-2 {
   margin-right: 0.5rem !important;
 }
 .squiz-fte-scope .mt-1 {
   margin-top: 0.25rem !important;
 }
+.squiz-fte-scope .mt-\[-1px\] {
+  margin-top: -1px !important;
+}
+.squiz-fte-scope .mt-\[7px\] {
+  margin-top: 7px !important;
+}
 .squiz-fte-scope .block {
   display: block !important;
 }
@@ -425,9 +440,21 @@
 .squiz-fte-scope .flex {
   display: flex !important;
 }
+.squiz-fte-scope .grid {
+  display: grid !important;
+}
 .squiz-fte-scope .hidden {
   display: none !important;
 }
+.squiz-fte-scope .h-10 {
+  height: 2.5rem !important;
+}
+.squiz-fte-scope .h-\[3px\] {
+  height: 3px !important;
+}
+.squiz-fte-scope .w-11\/12 {
+  width: 91.666667% !important;
+}
 .squiz-fte-scope .w-169 {
   width: 169px !important;
 }
@@ -445,17 +472,29 @@
   -moz-user-select: none !important;
   user-select: none !important;
 }
+.squiz-fte-scope .grid-flow-col {
+  grid-auto-flow: column !important;
+}
 .squiz-fte-scope .flex-row {
   flex-direction: row !important;
 }
+.squiz-fte-scope .flex-col {
+  flex-direction: column !important;
+}
 .squiz-fte-scope .items-center {
   align-items: center !important;
 }
+.squiz-fte-scope .justify-between {
+  justify-content: space-between !important;
+}
 .squiz-fte-scope .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0 !important;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
 }
+.squiz-fte-scope .self-center {
+  align-self: center !important;
+}
 .squiz-fte-scope .overflow-auto {
   overflow: auto !important;
 }
@@ -467,12 +506,19 @@
 .squiz-fte-scope .rounded {
   border-radius: 4px !important;
 }
+.squiz-fte-scope .rounded-t-sm {
+  border-top-left-radius: 0.125rem !important;
+  border-top-right-radius: 0.125rem !important;
+}
 .squiz-fte-scope .border-0 {
   border-width: 0px !important;
 }
 .squiz-fte-scope .border-2 {
   border-width: 2px !important;
 }
+.squiz-fte-scope .border-b {
+  border-bottom-width: 1px !important;
+}
 .squiz-fte-scope .border-gray-300 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(224 224 224 / var(--tw-border-opacity)) !important;
@@ -493,6 +539,10 @@
   --tw-bg-opacity: 1 !important;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity)) !important;
 }
+.squiz-fte-scope .bg-gray-800 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(61 61 61 / var(--tw-bg-opacity)) !important;
+}
 .squiz-fte-scope .bg-transparent {
   background-color: transparent !important;
 }
@@ -511,8 +561,8 @@
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
-.squiz-fte-scope .pb-2 {
-  padding-bottom: 0.5rem !important;
+.squiz-fte-scope .pb-4 {
+  padding-bottom: 1rem !important;
 }
 .squiz-fte-scope .pl-3 {
   padding-left: 0.75rem !important;
@@ -533,6 +583,9 @@
 .squiz-fte-scope .text-md {
   font-size: 0.875rem !important;
 }
+.squiz-fte-scope .font-bold {
+  font-weight: 700 !important;
+}
 .squiz-fte-scope .font-semibold {
   font-weight: 600 !important;
 }
@@ -577,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));
@@ -630,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%;
@@ -663,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 {
@@ -901,6 +959,28 @@
 .squiz-fte-scope .dropdown-button:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
+.squiz-fte-scope .squiz-fte-checkbox {
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-top: 0.75rem;
+  gap: 0.75rem;
+}
+.squiz-fte-scope .squiz-fte-checkbox .checkbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: #fff;
+  border: 2px solid #e0e0e0;
+  border-radius: 4px;
+}
+.squiz-fte-scope .squiz-fte-checkbox .checkbox svg {
+  width: 100%;
+}
 .squiz-fte-scope .squiz-fte-modal {
   display: flex;
   width: 100%;

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.d.ts

@@ -0,0 +1,8 @@
+export type CheckboxProps<TChecked, TUnchecked> = {
+    label: string;
+    onChange: (value: TChecked | TUnchecked) => void;
+    defaultChecked?: boolean;
+    unchecked: TUnchecked;
+    checked: TChecked;
+};
+export declare const Checkbox: <TChecked, TUnchecked>({ label, onChange, defaultChecked, unchecked, checked, }: CheckboxProps<TChecked, TUnchecked>) => JSX.Element;

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

@@ -0,0 +1,47 @@
+"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.Checkbox = void 0;
+const react_1 = __importStar(require("react"));
+const CheckRounded_1 = __importDefault(require("@mui/icons-material/CheckRounded"));
+const Checkbox = ({ label, onChange, defaultChecked = false, unchecked, checked, }) => {
+    const [toggled, setToggled] = (0, react_1.useState)(defaultChecked);
+    (0, react_1.useEffect)(() => {
+        if (toggled) {
+            onChange(checked);
+        }
+        else {
+            onChange(unchecked);
+        }
+    }, [toggled]);
+    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, 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/ui/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 export type ModalProps = {
     title: string;
+    icon: ReactElement;
     children: ReactElement;
     onCancel: () => void;
     onSubmit?: () => void;

package/lib/ui/Modal/Modal.js

@@ -31,7 +31,7 @@ const react_dom_1 = require("react-dom");
 const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
 const base_1 = require("@mui/base");
 const clsx_1 = __importDefault(require("clsx"));
-const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
+const Modal = ({ children, title, icon, onCancel, onSubmit, className }, ref) => {
     const content = (0, react_1.useRef)(null);
     const container = (0, react_1.useMemo)(() => {
         const element = document.createElement('div');
@@ -65,7 +65,8 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
             react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)('squiz-fte-modal-wrapper', className), tabIndex: -1 },
                 react_1.default.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
                     react_1.default.createElement("div", { className: "squiz-fte-modal" },
-                        react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-4" },
+                            react_1.default.createElement("div", { className: "squiz-fte-modal-header-icon mr-1.5 mt-[-1px]" }, icon),
                             react_1.default.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
                             react_1.default.createElement("button", { type: "button", className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
                                 react_1.default.createElement(CloseRounded_1.default, null))),

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

@@ -0,0 +1,10 @@
+export type TabOptions = Record<string, TabOption>;
+export type TabOption = {
+    label: string;
+};
+export type TabsProps = {
+    value: string;
+    options: TabOptions;
+    onChange?: (value: string) => void;
+};
+export declare const Tabs: ({ value, options, onChange }: TabsProps) => JSX.Element;

package/lib/ui/Tabs/Tabs.js

@@ -0,0 +1,46 @@
+"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.Tabs = void 0;
+const react_1 = require("@headlessui/react");
+const react_2 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Tabs = ({ value, options, onChange }) => (react_2.default.createElement(react_1.Tab.Group
+// Check what index the selected tab is, otherwise default to first tab
+, { 
+    // Check what index the selected tab is, otherwise default to first tab
+    defaultIndex: Object.keys(options).indexOf(value) || 0, 
+    // Check what the selected tab key is and trigger onChange
+    onChange: (index) => {
+        const selectedTab = Object.keys(options)[index];
+        onChange?.(selectedTab);
+    } },
+    react_2.default.createElement(react_1.Tab.List, { className: "grid grid-flow-col h-10 border-b border-gray-300" }, Object.entries(options).map(([key, option]) => (react_2.default.createElement(react_1.Tab, { key: key, as: react_2.Fragment }, ({ selected }) => (react_2.default.createElement("div", { className: "flex flex-col justify-between", "data-testid": key, "aria-selected": selected },
+        react_2.default.createElement("button", { type: "button", className: (0, clsx_1.default)('mt-[7px] text-gray-800', selected && 'font-bold') }, option.label),
+        selected && react_2.default.createElement("span", { className: "h-[3px] bg-gray-800 w-11/12 self-center rounded-t-sm" })))))))));
+exports.Tabs = Tabs;

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.2",
+  "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": "593039274a41b1b39826723fc8bd3bb05224def6"
+  "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', () => {

package/src/Editor/EditorContext.spec.tsx

@@ -1,26 +1,24 @@
-import React, { useContext } from 'react';
-import { EditorContext } from './EditorContext';
+import React from 'react';
+import { EditorContext, EditorContextOptions } from './EditorContext';
 import { render } from '@testing-library/react';
 
 describe('EditorContext', () => {
-  const defaultContextFn = jest.fn();
-  const Component = () => {
-    defaultContextFn(useContext(EditorContext));
-    return null;
-  };
-
   it('Has expected defaults', async () => {
-    render(<Component />);
+    let defaultContext: EditorContextOptions | null = null;
 
-    const defaultContext = defaultContextFn.mock.calls[0][0];
+    render(
+      <EditorContext.Consumer>
+        {(value) => {
+          defaultContext = value;
+          return null;
+        }}
+      </EditorContext.Consumer>,
+    );
 
     expect(defaultContext).toEqual({
       matrix: {
-        resolveMatrixAsset: expect.any(Function),
         matrixDomain: '',
-        matrixIdentifier: '',
       },
     });
-    expect(await defaultContext.matrix.resolveMatrixAsset('fake-asset-id')).toBeNull();
   });
 });

package/src/Editor/EditorContext.ts

@@ -1,25 +1,14 @@
 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 const defaultEditorContext: EditorContextOptions = {
   matrix: {
-    matrixIdentifier: '',
     matrixDomain: '',
-    resolveMatrixAsset: () => Promise.resolve(null),
   },
 };
 

package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx

@@ -3,6 +3,7 @@ import { render, screen, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
 import { NodeName } from '../../../../Extensions/Extensions';
+import { mockResourceBrowserContext } from '../../../../../tests';
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
@@ -19,27 +20,43 @@ describe('Image Form', () => {
   it('Renders the form with the relevant fields for arbitrary images', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('External image');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From URL');
     expect(screen.getByLabelText('Source')).toHaveValue('https://httpcats.com/302.jpg');
     expect(screen.getByLabelText('Alternative description')).toHaveValue('Cat with mouse in mouth');
     expect(screen.getByLabelText('Width')).toHaveValue(1600);
     expect(screen.getByLabelText('Height')).toHaveValue(1400);
   });
 
-  it('Renders the form with the relevant fields for asset images', () => {
+  it('Renders the form with the relevant fields for asset images', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [
+        {
+          id: '100',
+          name: 'My selected image',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
+        },
+      ],
+    });
+
     render(
-      <ImageForm
-        data={{
-          ...data,
-          imageType: NodeName.AssetImage,
-          assetImage: { matrixAssetId: '100' },
-        }}
-        onSubmit={handleSubmit}
-      />,
+      <MockResourceBrowserContext>
+        <ImageForm
+          data={{
+            ...data,
+            imageType: NodeName.AssetImage,
+            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-identifier' },
+          }}
+          onSubmit={handleSubmit}
+        />
+      </MockResourceBrowserContext>,
     );
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Asset image');
-    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
+    expect(screen.getByText('My selected image')).toBeInTheDocument();
   });
 
   it('calculates the height when width changes and aspect ratio is locked', () => {