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

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

@@ -35,18 +35,18 @@ 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 Select_1 = require("../../../../ui/Fields/Select/Select");
 const EditorContext_1 = require("../../../../Editor/EditorContext");
 const validation_1 = require("../../../../utils/validation");
+const Tabs_1 = require("../../../../ui/Tabs/Tabs");
 const imageTypeOptions = {
-    [Extensions_1.NodeName.Image]: { label: 'External image' },
-    [Extensions_1.NodeName.AssetImage]: { label: 'Asset image' },
+    [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)({
         defaultValues: data,
     });
-    const imageType = watch('imageType') || Extensions_1.NodeName.Image;
+    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);
@@ -88,8 +88,8 @@ const ImageForm = ({ data, onSubmit }) => {
         setAspectRatioLocked(!aspectRatioLocked);
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Select_1.Select, { name: "imageType", label: "Type", value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
         imageType === Extensions_1.NodeName.Image && (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: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
@@ -107,13 +107,6 @@ const ImageForm = ({ data, onSubmit }) => {
                             noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
-            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', {
-                        required: 'Alternative description is required',
-                        validate: {
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
             react_1.default.createElement("div", { className: "flex flex-row" },
                 react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                     react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.image?.width?.message, ...register('image.width', {
@@ -140,7 +133,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', {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
+const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageModal = ({ onCancel, onSubmit }) => {
@@ -13,11 +14,11 @@ const ImageModal = ({ onCancel, onSubmit }) => {
     const currentImage = selection?.node;
     const currentImageAttrs = { ...currentImage?.attrs };
     const formData = {
-        imageType: currentImage?.type.name === Extensions_1.NodeName.AssetImage ? Extensions_1.NodeName.AssetImage : Extensions_1.NodeName.Image,
+        imageType: currentImage?.type.name === Extensions_1.NodeName.Image ? Extensions_1.NodeName.Image : Extensions_1.NodeName.AssetImage,
         image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
         assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImageAttrs : {},
     };
-    return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
+    return (react_1.default.createElement(FormModal_1.default, { title: "Image", icon: react_1.default.createElement(ImageRounded_1.default, null), onCancel: onCancel },
         react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));
 };
 exports.default = ImageModal;

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

@@ -31,28 +31,25 @@ const react_1 = __importStar(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 Select_1 = require("../../../../ui/Fields/Select/Select");
+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 linkTypeOptions = {
-    [Extensions_1.MarkName.Link]: { label: 'Link to URL' },
-    [Extensions_1.MarkName.AssetLink]: { label: 'Link to asset' },
-};
-const targetOptions = {
-    [common_1.LinkTarget.Self]: { label: 'Current window' },
-    [common_1.LinkTarget.Blank]: { label: 'New window' },
+    [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)({
         defaultValues: data,
     });
-    const linkType = watch('linkType') || Extensions_1.MarkName.Link;
+    const linkType = watch('linkType') || Extensions_1.MarkName.AssetLink;
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Select_1.Select, { name: "linkType", label: "Type", value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
         linkType === Extensions_1.MarkName.Link && (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: "URL", required: true, error: errors?.link?.href?.message, ...register('link.href', {
@@ -69,14 +66,9 @@ const LinkForm = ({ data, onSubmit }) => {
                         },
                     }) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
-                react_1.default.createElement(Input_1.Input, { label: "Title", required: true, error: errors?.link?.title?.message, ...register('link.title', {
-                        required: 'Title is required',
-                        validate: {
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
-            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
-                react_1.default.createElement(Select_1.Select, { name: "link.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('link.target', value) })))),
+                react_1.default.createElement(Input_1.Input, { label: "Title", error: errors?.link?.title?.message, ...register('link.title') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                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', {
@@ -97,7 +89,7 @@ const LinkForm = ({ data, onSubmit }) => {
                             noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
-            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
-                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.assetLink?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('assetLink.target', value), defaultChecked: data?.assetLink?.target === '_blank', unchecked: '_self', checked: '_blank' }))))));
 };
 exports.LinkForm = LinkForm;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const LinkForm_1 = require("./Form/LinkForm");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const hooks_1 = require("../../../hooks");
 const Extensions_1 = require("../../../Extensions/Extensions");
@@ -14,13 +15,13 @@ const LinkModal = ({ onCancel, onSubmit }) => {
     const { selection, marks } = (0, hooks_1.useExpandedSelection)([Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink]);
     const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
     const data = {
-        linkType: marks[0]?.type?.name === Extensions_1.MarkName.AssetLink ? Extensions_1.MarkName.AssetLink : Extensions_1.MarkName.Link,
+        linkType: marks[0]?.type?.name === Extensions_1.MarkName.Link ? Extensions_1.MarkName.Link : Extensions_1.MarkName.AssetLink,
         text: selectedText,
         link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
         assetLink: { ...marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs },
         range: { from: selection.from, to: selection.to },
     };
-    return (react_1.default.createElement(FormModal_1.default, { title: "Link", onCancel: onCancel },
+    return (react_1.default.createElement(FormModal_1.default, { title: "Link", icon: react_1.default.createElement(InsertLinkRounded_1.default, null), onCancel: onCancel },
         react_1.default.createElement(LinkForm_1.LinkForm, { data: data, onSubmit: onSubmit })));
 };
 exports.default = LinkModal;

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -20,7 +20,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: Extensions_1.MarkName.Link,
+            excludes: [this.name, Extensions_1.MarkName.Link].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -19,7 +19,7 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: Extensions_1.MarkName.AssetLink,
+            excludes: [this.name, Extensions_1.MarkName.AssetLink].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),

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;
 }
@@ -901,6 +954,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/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 }, label)));
+};
+exports.Checkbox = Checkbox;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.33.1-alpha.2",
+  "version": "1.33.1-alpha.3",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "593039274a41b1b39826723fc8bd3bb05224def6"
+  "gitHead": "5189e21fcd9ad091397cacfa50765caf6138b034"
 }

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

@@ -19,7 +19,7 @@ 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);
@@ -38,7 +38,7 @@ describe('Image Form', () => {
       />,
     );
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Asset image');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
     expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
   });
 

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

@@ -10,9 +10,9 @@ import clsx from 'clsx';
 import { NodeName } from '../../../../Extensions/Extensions';
 import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
 import { DeepPartial } from '../../../../types';
-import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
 import { EditorContext } from '../../../../Editor/EditorContext';
 import { noEmptySpacesValidation, regexDataURI } from '../../../../utils/validation';
+import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
 
 export type ImageFormData = {
   imageType: NodeName;
@@ -20,9 +20,9 @@ export type ImageFormData = {
   assetImage: AssetImageAttributes;
 };
 
-const imageTypeOptions: SelectOptions = {
-  [NodeName.Image]: { label: 'External image' },
-  [NodeName.AssetImage]: { label: 'Asset image' },
+const imageTypeOptions: TabOptions = {
+  [NodeName.AssetImage]: { label: 'From source' },
+  [NodeName.Image]: { label: 'From URL' },
 };
 
 export type FormProps = {
@@ -41,7 +41,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<ImageFormData>({
     defaultValues: data,
   });
-  const imageType = watch('imageType') || NodeName.Image;
+  const imageType = watch('imageType') || NodeName.AssetImage;
   const context = useContext(EditorContext);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
@@ -88,10 +88,8 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
 
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
-      <div className="squiz-fte-form-group mb-2">
-        <Select
-          name="imageType"
-          label="Type"
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
           value={imageType}
           options={imageTypeOptions}
           onChange={(value) => setValue('imageType', value as NodeName)}
@@ -121,19 +119,6 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               })}
             />
           </div>
-          <div className="squiz-fte-form-group mb-2">
-            <Input
-              label="Alternative description"
-              required
-              error={errors?.image?.alt?.message}
-              {...register('image.alt', {
-                required: 'Alternative description is required',
-                validate: {
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
-            />
-          </div>
           <div className="flex flex-row">
             <div className="squiz-fte-form-group mb-2">
               <Input
@@ -146,7 +131,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                   required: 'Width is required',
                   validate: {
                     isValidWidth: (value) => {
-                      if (value && !(value > 0)) {
+                      if (value && !((value as number) > 0)) {
                         return 'Must be higher than 0';
                       }
                     },
@@ -175,7 +160,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                   required: 'Height is required',
                   validate: {
                     isValidHeight: (value) => {
-                      if (value && !(value > 0)) {
+                      if (value && !((value as number) > 0)) {
                         return 'Must be higher than 0';
                       }
                     },
@@ -184,6 +169,9 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               />
             </div>
           </div>
+          <div className="squiz-fte-form-group mb-2">
+            <Input label="Alternative description" error={errors?.image?.alt?.message} {...register('image.alt')} />
+          </div>
         </>
       )}
       {imageType === NodeName.AssetImage && (