@sckyzo/cosmos-react 0.5.0 → 0.6.0

package/dist/editor/index.js

@@ -6,11 +6,14 @@ import { useEditor, EditorContent, useEditorState } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
 import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Redo2, Undo2, Link, Code, Quote, ListOrdered, List, Heading2, Strikethrough, Italic, Bold } from 'lucide-react';
-import { PluginKey, Plugin } from '@tiptap/pm/state';
+import { Pilcrow, Heading1, Heading2, Heading3, Redo2, Undo2, Image as Image$1, Link, TextAlignStart, TextAlignCenter, TextAlignEnd, SquareCode, Code, Quote, ListOrdered, List, Strikethrough, Underline, Italic, Bold } from 'lucide-react';
+import { Image } from '@tiptap/extension-image';
+import { DOMParser } from '@tiptap/pm/model';
+import { Plugin, PluginKey, NodeSelection, Selection } from '@tiptap/pm/state';
 import { Decoration, DecorationSet } from '@tiptap/pm/view';
-import { Popover, Tooltip, Button } from '@sckyzo/cosmos-react';
+import { Menu, Popover, Tooltip, Button, Checkbox } from '@sckyzo/cosmos-react';
 
 // src/editor/RichTextEditor.tsx
 function useControllableState({
@@ -124,26 +127,86 @@ var RequiredMark = ({ srText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-0.5 text-red-700 dark:text-red-400", children: "*" }),
   srText && /* @__PURE__ */ jsx("span", { className: "sr-only", children: srText })
 ] });
+var isSafeSource = (src) => typeof src === "string" && isHttpUrl(src);
+var RichTextImage = Image.extend({
+  // Written out in full: `extend` calls `addOptions` again, and a `configure` before it is lost.
+  addOptions() {
+    return { inline: true, allowBase64: false, HTMLAttributes: {}, resize: false };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        renderHTML: ({ src }) => isSafeSource(src) ? { src } : {}
+      },
+      // `alt=""` is kept, as it says the image is decorative: no `alt` says nothing.
+      alt: { default: null }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "img[src]",
+        getAttrs: (element) => isSafeSource(element.getAttribute("src")) ? null : false
+      }
+    ];
+  },
+  addInputRules() {
+    return [];
+  },
+  addProseMirrorPlugins() {
+    const { schema } = this.editor;
+    const rules = DOMParser.fromSchema(schema).rules.filter(
+      (rule) => !("node" in rule && rule.node === this.name)
+    );
+    return [new Plugin({ props: { clipboardParser: new DOMParser(schema, rules) } })];
+  }
+});
+var selectedImage = (editor) => {
+  const { selection } = editor.state;
+  if (!(selection instanceof NodeSelection) || selection.node.type.name !== RichTextImage.name) {
+    return void 0;
+  }
+  const { src, alt } = selection.node.attrs;
+  return { src: src ?? "", alt };
+};
+var imagePosition = (editor) => {
+  const end = Selection.near(editor.state.selection.$to, -1).$to;
+  const image = editor.schema.nodes[RichTextImage.name];
+  return image && end.parent.canReplaceWith(end.index(), end.index(), image) ? end.pos : void 0;
+};
+
+// src/editor/actions.ts
 var RICH_TEXT_ACTIONS = [
   "bold",
   "italic",
+  "underline",
   "strike",
   "heading",
   "bulletList",
   "orderedList",
   "blockquote",
   "code",
+  "codeBlock",
+  "align",
   "link",
+  "image",
   "undo",
   "redo"
 ];
 var BUBBLE_ACTIONS = [
   "bold",
   "italic",
+  "underline",
   "strike",
   "code",
   "link"
 ];
+var HEADINGS = [
+  { id: "heading1", level: 1, icon: Heading1 },
+  { id: "heading2", level: 2, icon: Heading2 },
+  { id: "heading3", level: 3, icon: Heading3 }
+];
 var ACTION_SPECS = {
   bold: {
     icon: Bold,
@@ -159,6 +222,13 @@ var ACTION_SPECS = {
     isActive: (editor) => editor.isActive("italic"),
     run: (editor) => editor.chain().toggleItalic().run()
   },
+  underline: {
+    icon: Underline,
+    label: "Underline",
+    shortcut: ["Mod", "U"],
+    isActive: (editor) => editor.isActive("underline"),
+    run: (editor) => editor.chain().toggleUnderline().run()
+  },
   strike: {
     icon: Strikethrough,
     label: "Strikethrough",
@@ -169,9 +239,27 @@ var ACTION_SPECS = {
   heading: {
     icon: Heading2,
     label: "Heading",
-    shortcut: ["Mod", "Alt", "2"],
-    isActive: (editor) => editor.isActive("heading", { level: 2 }),
-    run: (editor) => editor.chain().toggleHeading({ level: 2 }).run()
+    isActive: (editor) => editor.isActive("heading"),
+    menu: {
+      rest: "paragraph",
+      current: (editor) => HEADINGS.find(({ level }) => editor.isActive("heading", { level }))?.id ?? "paragraph",
+      choices: [
+        {
+          id: "paragraph",
+          label: "Paragraph",
+          icon: Pilcrow,
+          shortcut: ["Mod", "Alt", "0"],
+          run: (editor) => editor.chain().focus().setParagraph().run()
+        },
+        ...HEADINGS.map(({ id, level, icon }) => ({
+          id,
+          label: `Heading ${level}`,
+          icon,
+          shortcut: ["Mod", "Alt", String(level)],
+          run: (editor) => editor.chain().focus().setHeading({ level }).run()
+        }))
+      ]
+    }
   },
   bulletList: {
     icon: List,
@@ -204,11 +292,60 @@ var ACTION_SPECS = {
     isActive: (editor) => editor.isActive("code"),
     run: (editor) => editor.chain().toggleCode().run()
   },
+  codeBlock: {
+    icon: SquareCode,
+    label: "Code block",
+    shortcut: ["Mod", "Alt", "C"],
+    isActive: (editor) => editor.isActive("codeBlock"),
+    run: (editor) => editor.chain().toggleCodeBlock().run()
+  },
+  align: {
+    icon: TextAlignStart,
+    mirror: true,
+    label: "Text alignment",
+    isActive: (editor) => editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "end" }),
+    menu: {
+      rest: "alignStart",
+      current: (editor) => editor.isActive({ textAlign: "center" }) ? "alignCenter" : editor.isActive({ textAlign: "end" }) ? "alignEnd" : "alignStart",
+      choices: [
+        {
+          id: "alignStart",
+          label: "Align start",
+          icon: TextAlignStart,
+          mirror: true,
+          // The start is what a block has when nothing is set.
+          run: (editor) => editor.chain().focus().unsetTextAlign().run()
+        },
+        {
+          id: "alignCenter",
+          label: "Align center",
+          icon: TextAlignCenter,
+          run: (editor) => editor.chain().focus().setTextAlign("center").run()
+        },
+        {
+          id: "alignEnd",
+          label: "Align end",
+          icon: TextAlignEnd,
+          mirror: true,
+          run: (editor) => editor.chain().focus().setTextAlign("end").run()
+        }
+      ]
+    }
+  },
   link: {
     icon: Link,
     label: "Link",
     shortcut: ["Mod", "K"],
-    isActive: (editor) => editor.isActive("link")
+    isActive: (editor) => editor.isActive("link"),
+    form: "link"
+  },
+  image: {
+    icon: Image$1,
+    label: "Image",
+    isActive: (editor) => selectedImage(editor) !== void 0,
+    // An image lives in a line of text, and a code block has none.
+    isIdle: (editor) => selectedImage(editor) === void 0 && imagePosition(editor) === void 0,
+    form: "image"
   },
   undo: {
     icon: Undo2,
@@ -281,6 +418,19 @@ var BlockDirection = Extension.create({
     ];
   }
 });
+
+// src/editor/documentJson.ts
+var withoutDefaultAlignment = (node) => {
+  const { attrs, content, ...rest } = node;
+  const result = { ...rest };
+  if (attrs) {
+    const { textAlign, ...others } = attrs;
+    const kept = textAlign == null ? others : { ...others, textAlign };
+    if (Object.keys(kept).length > 0) result.attrs = kept;
+  }
+  if (content) result.content = content.map(withoutDefaultAlignment);
+  return result;
+};
 var directionOf2 = (element, read = (el) => getComputedStyle(el)) => element && read(element).direction === "rtl" ? "rtl" : "ltr";
 
 // src/ui/mergeRefs.ts
@@ -304,6 +454,139 @@ function mergeRefs(...refs) {
   };
 }
 
+// src/editor/imageUrl.ts
+var normalizeImageUrl = (input) => {
+  const value = input.trim();
+  return isHttpUrl(value) ? value : void 0;
+};
+var LABEL = "text-xs font-medium text-gray-700 dark:text-gray-300";
+var ERROR = "text-xs text-red-700 dark:text-red-400";
+function ImageForm({ editor, labels, onDone, className }) {
+  const urlId = useId();
+  const altId = useId();
+  const urlErrorId = useId();
+  const altErrorId = useId();
+  const urlRef = useRef(null);
+  const altRef = useRef(null);
+  const [selected] = useState(() => selectedImage(editor));
+  const [src, setSrc] = useState(selected?.src ?? "");
+  const [alt, setAlt] = useState(selected?.alt ?? "");
+  const [decorative, setDecorative] = useState(selected?.alt === "");
+  const [invalid, setInvalid] = useState(null);
+  const apply = () => {
+    const address = normalizeImageUrl(src);
+    if (!address) {
+      setInvalid("url");
+      urlRef.current?.focus();
+      return;
+    }
+    const description = decorative ? "" : alt.trim();
+    if (!decorative && !description) {
+      setInvalid("alt");
+      altRef.current?.focus();
+      return;
+    }
+    const attrs = { src: address, alt: description };
+    const chain = editor.chain().focus();
+    const at = imagePosition(editor);
+    if (selected) chain.updateAttributes("image", attrs);
+    else if (at !== void 0) chain.insertContentAt(at, { type: "image", attrs });
+    chain.run();
+    onDone();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      apply();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      onDone();
+      editor.commands.focus();
+    }
+  };
+  const input = (side) => clsx(
+    "block w-full",
+    fieldClass({ size: "sm", invalid: invalid === side, fixedHeight: false }),
+    FIELD_PAD_X.sm,
+    FIELD_PAD_Y.sm,
+    FIELD_PLACEHOLDER
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": labels.imageDialog,
+      className: clsx("flex flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: urlId, className: LABEL, children: labels.imageUrl }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: urlRef,
+              id: urlId,
+              type: "text",
+              inputMode: "url",
+              autoFocus: true,
+              autoComplete: "off",
+              spellCheck: false,
+              dir: "ltr",
+              "aria-invalid": invalid === "url" || void 0,
+              "aria-describedby": invalid === "url" ? urlErrorId : void 0,
+              placeholder: "https://",
+              value: src,
+              onChange: (e) => {
+                setSrc(e.target.value);
+                setInvalid(null);
+              },
+              onKeyDown,
+              className: input("url")
+            }
+          ),
+          invalid === "url" && /* @__PURE__ */ jsx("span", { id: urlErrorId, className: ERROR, children: labels.imageInvalid })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: altId, className: LABEL, children: labels.imageAlt }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: altRef,
+              id: altId,
+              type: "text",
+              autoComplete: "off",
+              disabled: decorative,
+              "aria-invalid": invalid === "alt" || void 0,
+              "aria-describedby": invalid === "alt" ? altErrorId : void 0,
+              value: alt,
+              onChange: (e) => {
+                setAlt(e.target.value);
+                setInvalid(null);
+              },
+              onKeyDown,
+              className: clsx(input("alt"), "disabled:cursor-not-allowed disabled:opacity-50")
+            }
+          ),
+          invalid === "alt" && /* @__PURE__ */ jsx("span", { id: altErrorId, className: ERROR, children: labels.imageAltRequired })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "sm",
+            label: labels.imageDecorative,
+            checked: decorative,
+            onChange: (checked) => {
+              setDecorative(checked);
+              setInvalid((was) => was === "alt" ? null : was);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", onClick: apply, children: labels.imageApply }) })
+      ]
+    }
+  );
+}
+
 // src/editor/linkUrl.ts
 var BARE_HOST = /^(?:[a-z0-9-]+\.)+[a-z]{2,}(?:[/?#]\S*)?$/i;
 var EMAIL = /^[^\s@<>"'\\:/]+@(?:[a-z0-9-]+\.)+[a-z]{2,}$/i;
@@ -400,9 +683,9 @@ function FormattingToolbar({
   actions,
   labels,
   disabled,
-  linkOpen,
-  onLinkOpenChange,
-  linkMode,
+  form,
+  onFormChange,
+  formMode,
   onEscape,
   className,
   ref
@@ -416,7 +699,8 @@ function FormattingToolbar({
         action,
         {
           active: ACTION_SPECS[action].isActive(current),
-          idle: ACTION_SPECS[action].isIdle?.(current) ?? false
+          idle: ACTION_SPECS[action].isIdle?.(current) ?? false,
+          choice: ACTION_SPECS[action].menu?.current(current)
         }
       ])
     )
@@ -425,6 +709,7 @@ function FormattingToolbar({
   const tabStop = Math.min(stop, actions.length - 1);
   const buttons = () => Array.from(root.current?.querySelectorAll("button[data-rt-action]") ?? []);
   const onKeyDown = (event) => {
+    if (!(event.target instanceof Node) || !root.current?.contains(event.target)) return;
     if (event.key === "Escape" && onEscape) {
       event.preventDefault();
       onEscape();
@@ -439,15 +724,15 @@ function FormattingToolbar({
     event.preventDefault();
     list[next]?.focus();
   };
-  const linkField = /* @__PURE__ */ jsx(
-    LinkForm,
-    {
+  const field = (which) => {
+    const props = {
       editor,
       labels,
-      onDone: () => onLinkOpenChange(false),
-      className: linkMode === "inline" ? "w-64 p-2" : void 0
-    }
-  );
+      onDone: () => onFormChange(null),
+      className: formMode === "inline" ? "w-64 p-2" : void 0
+    };
+    return which === "link" ? /* @__PURE__ */ jsx(LinkForm, { ...props }) : /* @__PURE__ */ jsx(ImageForm, { ...props });
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -457,15 +742,16 @@ function FormattingToolbar({
       "aria-orientation": "horizontal",
       onKeyDown,
       className: clsx("flex flex-wrap items-center gap-0.5", className),
-      children: linkMode === "inline" && linkOpen ? linkField : actions.map((action, index) => {
+      children: formMode === "inline" && form ? field(form) : actions.map((action, index) => {
         const spec = ACTION_SPECS[action];
-        const { active, idle } = state[action];
-        const Icon = spec.icon;
+        const { active, idle, choice } = state[action];
         const inert = disabled || idle;
+        const shown = active && spec.menu ? spec.menu.choices.find(({ id }) => id === choice) : void 0;
+        const Icon = shown?.icon ?? spec.icon;
         const common = {
           "data-rt-action": action,
           "aria-label": labels[action],
-          "aria-keyshortcuts": ariaShortcut(spec.shortcut),
+          "aria-keyshortcuts": spec.shortcut && ariaShortcut(spec.shortcut),
           "aria-pressed": active,
           "aria-disabled": inert || void 0,
           tabIndex: index === tabStop ? 0 : -1,
@@ -474,43 +760,82 @@ function FormattingToolbar({
           onMouseDown: (e) => e.preventDefault(),
           className: clsx(BUTTON, active ? PRESSED : IDLE)
         };
-        const icon = /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: clsx("h-4 w-4", spec.mirror && "rtl:-scale-x-100") });
+        const icon = /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": true,
+            className: clsx(
+              "h-4 w-4",
+              (shown ? shown.mirror : spec.mirror) && "rtl:-scale-x-100"
+            )
+          }
+        );
         const tooltip = (child) => /* @__PURE__ */ jsx(
           Tooltip,
           {
             content: labels[action],
-            shortcut: shortcutKeys(spec.shortcut),
+            shortcut: spec.shortcut && shortcutKeys(spec.shortcut),
             position: "top",
             children: child
           },
           action
         );
-        if (action === "link" && linkMode === "popover") {
-          return /* @__PURE__ */ jsxs(Popover, { open: linkOpen && !disabled, onOpenChange: onLinkOpenChange, children: [
-            tooltip(/* @__PURE__ */ jsx(Popover.Trigger, { ...common, children: icon })),
-            /* @__PURE__ */ jsx(
-              Popover.Content,
+        if (spec.menu) {
+          return /* @__PURE__ */ jsxs(Menu, { children: [
+            tooltip(
+              /* @__PURE__ */ jsx(
+                Menu.Trigger,
+                {
+                  ...common,
+                  onClick: (e) => inert && e.preventDefault(),
+                  onKeyDown: (e) => {
+                    if (inert && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+                      e.preventDefault();
+                    }
+                  },
+                  children: icon
+                }
+              )
+            ),
+            /* @__PURE__ */ jsx(Menu.Content, { width: "w-44", children: spec.menu.choices.map((item) => /* @__PURE__ */ jsx(
+              Menu.RadioItem,
               {
-                "aria-label": labels.linkDialog,
-                position: "bottom",
-                width: "w-72",
-                padding: "p-3",
-                children: linkField
-              }
-            )
+                checked: item.id === choice,
+                "aria-keyshortcuts": item.shortcut && ariaShortcut(item.shortcut),
+                onSelect: () => item.run(editor),
+                children: labels[item.id]
+              },
+              item.id
+            )) })
           ] }, action);
         }
-        if (action === "link") {
+        if (spec.form && formMode === "popover") {
+          return /* @__PURE__ */ jsxs(
+            Popover,
+            {
+              open: form === spec.form && !inert,
+              onOpenChange: (open) => onFormChange(open ? spec.form ?? null : null),
+              children: [
+                tooltip(/* @__PURE__ */ jsx(Popover.Trigger, { ...common, children: icon })),
+                /* @__PURE__ */ jsx(
+                  Popover.Content,
+                  {
+                    "aria-label": spec.form === "image" ? labels.imageDialog : labels.linkDialog,
+                    position: "bottom",
+                    width: spec.form === "image" ? "w-80" : "w-72",
+                    padding: "p-3",
+                    children: field(spec.form)
+                  }
+                )
+              ]
+            },
+            action
+          );
+        }
+        if (spec.form) {
+          const opens = spec.form;
           return tooltip(
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                ...common,
-                onClick: () => !disabled && onLinkOpenChange(true),
-                children: icon
-              }
-            )
+            /* @__PURE__ */ jsx("button", { type: "button", ...common, onClick: () => !inert && onFormChange(opens), children: icon })
           );
         }
         return tooltip(
@@ -528,23 +853,40 @@ var DEFAULTS = {
   linkDialog: "Edit link",
   linkApply: "Apply",
   linkRemove: "Remove link",
-  linkInvalid: "Enter an http(s), mailto or relative link."
+  linkInvalid: "Enter an http(s), mailto or relative link.",
+  imageDialog: "Image details",
+  imageUrl: "Image URL",
+  imageAlt: "Description (alt text)",
+  imageDecorative: "Decorative image, no description",
+  imageApply: "Apply",
+  imageInvalid: "Enter an http(s) image address.",
+  imageAltRequired: "Describe the image, or mark it decorative."
 };
+var NAMED_DEFAULTS = Object.fromEntries([
+  ...Object.entries(ACTION_SPECS).map(([action, spec]) => [action, spec.label]),
+  ...Object.values(ACTION_SPECS).flatMap(
+    ({ menu }) => (menu?.choices ?? []).map((choice) => [choice.id, choice.label])
+  )
+]);
 var resolveLabels = (labels = {}) => {
-  const actions = Object.fromEntries(
-    Object.keys(ACTION_SPECS).map((action) => [
-      action,
-      labels[action] ?? ACTION_SPECS[action].label
-    ])
+  const named = Object.fromEntries(
+    Object.keys(NAMED_DEFAULTS).map((key2) => [key2, labels[key2] ?? NAMED_DEFAULTS[key2]])
   );
   return {
-    ...actions,
+    ...named,
     toolbar: labels.toolbar ?? DEFAULTS.toolbar,
     linkUrl: labels.linkUrl ?? DEFAULTS.linkUrl,
     linkDialog: labels.linkDialog ?? DEFAULTS.linkDialog,
     linkApply: labels.linkApply ?? DEFAULTS.linkApply,
     linkRemove: labels.linkRemove ?? DEFAULTS.linkRemove,
-    linkInvalid: labels.linkInvalid ?? DEFAULTS.linkInvalid
+    linkInvalid: labels.linkInvalid ?? DEFAULTS.linkInvalid,
+    imageDialog: labels.imageDialog ?? DEFAULTS.imageDialog,
+    imageUrl: labels.imageUrl ?? DEFAULTS.imageUrl,
+    imageAlt: labels.imageAlt ?? DEFAULTS.imageAlt,
+    imageDecorative: labels.imageDecorative ?? DEFAULTS.imageDecorative,
+    imageApply: labels.imageApply ?? DEFAULTS.imageApply,
+    imageInvalid: labels.imageInvalid ?? DEFAULTS.imageInvalid,
+    imageAltRequired: labels.imageAltRequired ?? DEFAULTS.imageAltRequired
   };
 };
 var NO_PROPS = { format: "html", setCurrent: () => {
@@ -559,7 +901,7 @@ var createStore = (initial) => {
   };
 };
 var EMPTY_DOC = { type: "doc", content: [{ type: "paragraph" }] };
-var readContent = (editor, format) => format === "json" ? editor.getJSON() : editor.isEmpty ? "" : editor.getHTML();
+var readContent = (editor, format) => format === "json" ? withoutDefaultAlignment(editor.getJSON()) : editor.isEmpty ? "" : editor.getHTML();
 var countCharacters = (editor) => editor.storage.characterCount?.characters() ?? 0;
 var sameContent = (a, b) => typeof a === "string" || typeof b === "string" ? a === b : JSON.stringify(a) === JSON.stringify(b);
 var LinkShortcut = Extension.create({
@@ -569,12 +911,14 @@ var LinkShortcut = Extension.create({
     return { "Mod-k": () => this.options.open() };
   }
 });
+var BlockAlign = TextAlign.extend({ addKeyboardShortcuts: () => ({}) });
 var CONTENT_CLASS = [
   "min-w-0 outline-hidden break-words",
   "[&>*+*]:mt-2",
   // Each block follows the direction of what is typed in it, as a Textarea's paragraphs do
   // (`FIELD_PLAINTEXT`); lists and quotes take a `dir` from `BlockDirection`.
-  "[&_p]:[unicode-bidi:plaintext] [&_h2]:[unicode-bidi:plaintext] [&_h3]:[unicode-bidi:plaintext]",
+  "[&_p]:[unicode-bidi:plaintext] [&_h1]:[unicode-bidi:plaintext] [&_h2]:[unicode-bidi:plaintext] [&_h3]:[unicode-bidi:plaintext]",
+  "[&_h1]:text-xl [&_h1]:leading-tight [&_h1]:font-semibold",
   "[&_h2]:text-lg [&_h2]:leading-snug [&_h2]:font-semibold",
   "[&_h3]:text-base [&_h3]:leading-snug [&_h3]:font-semibold",
   "[&_ul]:list-disc [&_ul]:ps-5 [&_ol]:list-decimal [&_ol]:ps-5 [&_li>p]:my-0",
@@ -582,6 +926,13 @@ var CONTENT_CLASS = [
   "dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300",
   "[&_code]:rounded-sm [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.9em]",
   "dark:[&_code]:bg-gray-800",
+  // A code block reads left to right in any page, as `CodeBlock` does; its `code` drops the pill.
+  "[&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[0.9em] [&_pre]:leading-snug",
+  "dark:[&_pre]:bg-gray-800 [&_pre]:[direction:ltr] [&_pre]:text-start",
+  "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[1em]",
+  // An image is in the line: it never grows past it, and a selected one shows it.
+  "[&_img[src]]:inline-block [&_img[src]]:h-auto [&_img[src]]:max-w-full [&_img[src]]:align-middle",
+  "[&_img.ProseMirror-selectednode]:outline-brand-500 [&_img.ProseMirror-selectednode]:outline-2",
   "[&_a]:text-brand-600 dark:[&_a]:text-brand-400 [&_a]:underline [&_a]:underline-offset-2",
   "[&_p.is-editor-empty:first-child]:before:pointer-events-none [&_p.is-editor-empty:first-child]:before:float-start [&_p.is-editor-empty:first-child]:before:h-0",
   "[&_p.is-editor-empty:first-child]:before:text-gray-500 dark:[&_p.is-editor-empty:first-child]:before:text-gray-400",
@@ -626,7 +977,7 @@ function RichTextEditor({
     onChange: (next) => onChange?.(next),
     name: "RichTextEditor.value"
   });
-  const [linkOpen, setLinkOpen] = useState(false);
+  const [form, setForm] = useState(null);
   const [characters, setCharacters] = useState(0);
   const [latest] = useState(() => createStore(NO_PROPS));
   const [echoes] = useState(() => createStore([]));
@@ -637,7 +988,7 @@ function RichTextEditor({
       setCurrent,
       openLink: () => {
         if (!hasLinkField || !editable) return false;
-        setLinkOpen(true);
+        setForm("link");
         return true;
       }
     });
@@ -652,11 +1003,9 @@ function RichTextEditor({
       content: current,
       extensions: [
         StarterKit.configure({
-          heading: { levels: [2, 3] },
+          heading: { levels: [1, 2, 3] },
           // What the editor doesn't offer is out of the schema, so no paste or value brings it in.
-          codeBlock: false,
           horizontalRule: false,
-          underline: false,
           trailingNode: false,
           link: {
             openOnClick: false,
@@ -665,6 +1014,10 @@ function RichTextEditor({
             isAllowedUri: (url) => isSafeLinkUrl(url)
           }
         }),
+        // Center and end only, as the sides of the line: a pasted `left`, `right` or `justify` is
+        // dropped, and the start is a block with nothing set.
+        BlockAlign.configure({ types: ["paragraph", "heading"], alignments: ["center", "end"] }),
+        RichTextImage,
         Placeholder.configure({ placeholder: () => latest.get().placeholder ?? "" }),
         ...maxLength !== void 0 ? [CharacterCount.configure({ limit: maxLength })] : [],
         LinkShortcut.configure({ open: () => latest.get().openLink() }),
@@ -784,9 +1137,9 @@ function RichTextEditor({
               actions,
               labels,
               disabled,
-              linkOpen,
-              onLinkOpenChange: setLinkOpen,
-              linkMode: "popover",
+              form,
+              onFormChange: setForm,
+              formMode: "popover",
               className: "border-b border-gray-200 p-1 dark:border-gray-700"
             }
           ),
@@ -800,7 +1153,7 @@ function RichTextEditor({
                 strategy: "fixed",
                 placement: "top",
                 offset: 8,
-                onHide: () => setLinkOpen(false)
+                onHide: () => setForm(null)
               },
               className: "z-[9999]",
               children: /* @__PURE__ */ jsx(
@@ -811,11 +1164,11 @@ function RichTextEditor({
                   actions,
                   labels,
                   disabled,
-                  linkOpen,
-                  onLinkOpenChange: setLinkOpen,
-                  linkMode: "inline",
+                  form,
+                  onFormChange: setForm,
+                  formMode: "inline",
                   onEscape: () => {
-                    setLinkOpen(false);
+                    setForm(null);
                     editor.commands.focus();
                   },
                   className: "rounded-lg border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-900"
@@ -861,6 +1214,7 @@ function RichTextEditor({
       {
         type: "hidden",
         name,
+        disabled,
         value: typeof current === "string" ? current : JSON.stringify(current)
       }
     )