@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Editor/index.tsx

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './Editor.module.scss';
+import * as React from "react";
+import styles from "./Editor.module.scss";
 import {
   TextB,
   TextItalic,
@@ -16,8 +16,9 @@ import {
   Quotes,
   ArrowCounterClockwise,
   ArrowClockwise,
-} from '@phosphor-icons/react';
-import { KEYBOARD_SHORTCUTS } from '../../utils/keyboard-shortcuts';
+} from "@phosphor-icons/react";
+import { KEYBOARD_SHORTCUTS } from "../../utils/keyboard-shortcuts";
+import { isDevelopmentBuild } from "../../utils/env";
 
 // ============================================
 // Lazy-loaded dependency (TipTap)
@@ -37,13 +38,13 @@ function loadTipTapDeps(): Promise<void> {
     _tiptapLoadPromise = (async () => {
       try {
         const [tiptapReact, starterKit, linkExt] = await Promise.all([
-          import('@tiptap/react'),
-          import('@tiptap/starter-kit'),
-          import('@tiptap/extension-link'),
+          import("@tiptap/react"),
+          import("@tiptap/starter-kit"),
+          import("@tiptap/extension-link"),
         ]);
 
         _useEditor = tiptapReact.useEditor as unknown as (
-          config: Record<string, unknown>,
+          config: Record<string, unknown>
         ) => unknown;
         _EditorContent = tiptapReact.EditorContent as unknown as React.ComponentType<
           Record<string, unknown>
@@ -58,10 +59,10 @@ function loadTipTapDeps(): Promise<void> {
           linkExt;
       } catch {
         _tiptapFailed = true;
-        if (process.env.NODE_ENV === 'development') {
+        if (isDevelopmentBuild()) {
           console.warn(
-            '[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. ' +
-            'Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link'
+            "[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. " +
+              "Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link"
           );
         }
       }
@@ -91,17 +92,25 @@ function useTipTapDeps(): boolean {
 // ============================================
 
 export type EditorFormat =
-  | 'bold' | 'italic' | 'strikethrough' | 'link' | 'code'
-  | 'bulletList' | 'orderedList'
-  | 'heading1' | 'heading2' | 'heading3'
-  | 'blockquote'
-  | 'undo' | 'redo';
-
-export type EditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
-
-export type EditorMode = 'rich' | 'markdown';
-
-export type EditorSize = 'sm' | 'md' | 'lg';
+  | "bold"
+  | "italic"
+  | "strikethrough"
+  | "link"
+  | "code"
+  | "bulletList"
+  | "orderedList"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "blockquote"
+  | "undo"
+  | "redo";
+
+export type EditorSaveStatus = "idle" | "saving" | "saved" | "error";
+
+export type EditorMode = "rich" | "markdown";
+
+export type EditorSize = "sm" | "md" | "lg";
 
 export interface EditorToolbarIconRenderState {
   format: EditorFormat;
@@ -118,7 +127,10 @@ export type EditorToolbarIconSlot =
 
 export type EditorToolbarIcons = Partial<Record<EditorFormat, EditorToolbarIconSlot>>;
 
-export interface EditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+export interface EditorProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
   children?: React.ReactNode;
   /** Controlled value */
   value?: string;
@@ -157,7 +169,7 @@ export interface EditorToolbarProps {
 
 export interface EditorToolbarGroupProps {
   children: React.ReactNode;
-  'aria-label'?: string;
+  "aria-label"?: string;
   className?: string;
 }
 
@@ -196,32 +208,74 @@ export interface EditorStatusBarProps {
 // ============================================
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const FORMAT_META: Record<EditorFormat, { icon: React.ComponentType<any>; label: string; shortcut: string }> = {
-  bold: { icon: TextB, label: 'Bold', shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
-  italic: { icon: TextItalic, label: 'Italic', shortcut: KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
-  strikethrough: { icon: TextStrikethrough, label: 'Strikethrough', shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label },
-  link: { icon: LinkSimple, label: 'Link', shortcut: KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
-  code: { icon: Code, label: 'Code', shortcut: KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
-  bulletList: { icon: ListBullets, label: 'Bullet list', shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label },
-  orderedList: { icon: ListNumbers, label: 'Ordered list', shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label },
-  heading1: { icon: TextHOne, label: 'Heading 1', shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label },
-  heading2: { icon: TextHTwo, label: 'Heading 2', shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label },
-  heading3: { icon: TextHThree, label: 'Heading 3', shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label },
-  blockquote: { icon: Quotes, label: 'Blockquote', shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label },
-  undo: { icon: ArrowCounterClockwise, label: 'Undo', shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label },
-  redo: { icon: ArrowClockwise, label: 'Redo', shortcut: KEYBOARD_SHORTCUTS.EDITOR_REDO.label },
+const FORMAT_META: Record<
+  EditorFormat,
+  { icon: React.ComponentType<any>; label: string; shortcut: string }
+> = {
+  bold: { icon: TextB, label: "Bold", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
+  italic: { icon: TextItalic, label: "Italic", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
+  strikethrough: {
+    icon: TextStrikethrough,
+    label: "Strikethrough",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label,
+  },
+  link: { icon: LinkSimple, label: "Link", shortcut: KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
+  code: { icon: Code, label: "Code", shortcut: KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
+  bulletList: {
+    icon: ListBullets,
+    label: "Bullet list",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label,
+  },
+  orderedList: {
+    icon: ListNumbers,
+    label: "Ordered list",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label,
+  },
+  heading1: {
+    icon: TextHOne,
+    label: "Heading 1",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label,
+  },
+  heading2: {
+    icon: TextHTwo,
+    label: "Heading 2",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label,
+  },
+  heading3: {
+    icon: TextHThree,
+    label: "Heading 3",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label,
+  },
+  blockquote: {
+    icon: Quotes,
+    label: "Blockquote",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label,
+  },
+  undo: {
+    icon: ArrowCounterClockwise,
+    label: "Undo",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label,
+  },
+  redo: { icon: ArrowClockwise, label: "Redo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_REDO.label },
 };
 
-const DEFAULT_FORMATS: EditorFormat[] = ['bold', 'italic', 'strikethrough', 'link', 'code', 'bulletList'];
+const DEFAULT_FORMATS: EditorFormat[] = [
+  "bold",
+  "italic",
+  "strikethrough",
+  "link",
+  "code",
+  "bulletList",
+];
 
 /** Formats that are actions (not toggles) — no aria-pressed, different disable logic */
-const ACTION_FORMATS = new Set<EditorFormat>(['undo', 'redo']);
+const ACTION_FORMATS = new Set<EditorFormat>(["undo", "redo"]);
 
 const DEFAULT_STATUS_LABELS: Record<EditorSaveStatus, string> = {
-  idle: '',
-  saving: 'SAVING...',
-  saved: 'AUTO-SAVED',
-  error: 'SAVE FAILED',
+  idle: "",
+  saving: "SAVING...",
+  saved: "AUTO-SAVED",
+  error: "SAVE FAILED",
 };
 
 // ============================================
@@ -246,19 +300,19 @@ function wrapSelection(
   textarea: HTMLTextAreaElement,
   prefix: string,
   suffix: string,
-  setValue: (v: string) => void,
+  setValue: (v: string) => void
 ) {
   const sel = getSelection(textarea);
   const before = textarea.value.substring(0, sel.start);
   const after = textarea.value.substring(sel.end);
-  const wrapped = `${prefix}${sel.text || 'text'}${suffix}`;
+  const wrapped = `${prefix}${sel.text || "text"}${suffix}`;
   const newValue = `${before}${wrapped}${after}`;
   setValue(newValue);
 
   requestAnimationFrame(() => {
     textarea.focus();
     const newStart = sel.start + prefix.length;
-    const newEnd = newStart + (sel.text || 'text').length;
+    const newEnd = newStart + (sel.text || "text").length;
     textarea.setSelectionRange(newStart, newEnd);
   });
 }
@@ -266,24 +320,24 @@ function wrapSelection(
 function applyMarkdownFormat(
   format: EditorFormat,
   textarea: HTMLTextAreaElement,
-  setValue: (v: string) => void,
+  setValue: (v: string) => void
 ) {
   switch (format) {
-    case 'bold':
-      wrapSelection(textarea, '**', '**', setValue);
+    case "bold":
+      wrapSelection(textarea, "**", "**", setValue);
       break;
-    case 'italic':
-      wrapSelection(textarea, '*', '*', setValue);
+    case "italic":
+      wrapSelection(textarea, "*", "*", setValue);
       break;
-    case 'strikethrough':
-      wrapSelection(textarea, '~~', '~~', setValue);
+    case "strikethrough":
+      wrapSelection(textarea, "~~", "~~", setValue);
       break;
-    case 'code':
-      wrapSelection(textarea, '`', '`', setValue);
+    case "code":
+      wrapSelection(textarea, "`", "`", setValue);
       break;
-    case 'link': {
+    case "link": {
       const sel = getSelection(textarea);
-      const linkText = sel.text || 'link text';
+      const linkText = sel.text || "link text";
       const before = textarea.value.substring(0, sel.start);
       const after = textarea.value.substring(sel.end);
       const newValue = `${before}[${linkText}](url)${after}`;
@@ -295,47 +349,47 @@ function applyMarkdownFormat(
       });
       break;
     }
-    case 'bulletList': {
+    case "bulletList": {
       const sel = getSelection(textarea);
       const before = textarea.value.substring(0, sel.start);
       const after = textarea.value.substring(sel.end);
-      const lines = (sel.text || 'item').split('\n');
-      const bulleted = lines.map((l) => `- ${l}`).join('\n');
+      const lines = (sel.text || "item").split("\n");
+      const bulleted = lines.map((l) => `- ${l}`).join("\n");
       const newValue = `${before}${bulleted}${after}`;
       setValue(newValue);
       break;
     }
-    case 'orderedList': {
+    case "orderedList": {
       const sel = getSelection(textarea);
       const before = textarea.value.substring(0, sel.start);
       const after = textarea.value.substring(sel.end);
-      const lines = (sel.text || 'item').split('\n');
-      const numbered = lines.map((l, i) => `${i + 1}. ${l}`).join('\n');
+      const lines = (sel.text || "item").split("\n");
+      const numbered = lines.map((l, i) => `${i + 1}. ${l}`).join("\n");
       const newValue = `${before}${numbered}${after}`;
       setValue(newValue);
       break;
     }
-    case 'heading1':
-      wrapSelection(textarea, '# ', '', setValue);
+    case "heading1":
+      wrapSelection(textarea, "# ", "", setValue);
       break;
-    case 'heading2':
-      wrapSelection(textarea, '## ', '', setValue);
+    case "heading2":
+      wrapSelection(textarea, "## ", "", setValue);
       break;
-    case 'heading3':
-      wrapSelection(textarea, '### ', '', setValue);
+    case "heading3":
+      wrapSelection(textarea, "### ", "", setValue);
       break;
-    case 'blockquote': {
+    case "blockquote": {
       const sel = getSelection(textarea);
       const before = textarea.value.substring(0, sel.start);
       const after = textarea.value.substring(sel.end);
-      const lines = (sel.text || 'quote').split('\n');
-      const quoted = lines.map((l) => `> ${l}`).join('\n');
+      const lines = (sel.text || "quote").split("\n");
+      const quoted = lines.map((l) => `> ${l}`).join("\n");
       const newValue = `${before}${quoted}${after}`;
       setValue(newValue);
       break;
     }
-    case 'undo':
-    case 'redo':
+    case "undo":
+    case "redo":
       // Undo/redo in textarea mode is handled natively by the browser
       break;
   }
@@ -371,7 +425,7 @@ const EditorContext = React.createContext<EditorContextValue | null>(null);
 function useEditorContext() {
   const context = React.useContext(EditorContext);
   if (!context) {
-    throw new Error('Editor compound components must be used within an Editor');
+    throw new Error("Editor compound components must be used within an Editor");
   }
   return context;
 }
@@ -383,7 +437,7 @@ function useEditorContext() {
 function useControllableState<T>(
   controlledValue: T | undefined,
   defaultValue: T,
-  onChange?: (value: T) => void,
+  onChange?: (value: T) => void
 ): [T, (value: T) => void] {
   const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
   const isControlled = controlledValue !== undefined;
@@ -396,7 +450,7 @@ function useControllableState<T>(
       }
       onChange?.(newValue);
     },
-    [isControlled, onChange],
+    [isControlled, onChange]
   );
 
   return [value, setValue];
@@ -417,16 +471,16 @@ function EditorRoot(props: EditorProps) {
   // The rich implementation calls TipTap's useEditor hook, so an instance's
   // mode must never change mid-lifetime. Keying by mode remounts the
   // implementation exactly once, when the lazy TipTap load resolves.
-  return <EditorImpl key={hasTipTap ? 'rich' : 'markdown'} hasTipTap={hasTipTap} {...props} />;
+  return <EditorImpl key={hasTipTap ? "rich" : "markdown"} hasTipTap={hasTipTap} {...props} />;
 }
 
 function EditorImpl({
   hasTipTap,
   children,
   value: controlledValue,
-  defaultValue = '',
+  defaultValue = "",
   onValueChange,
-  placeholder = 'Start typing...',
+  placeholder = "Start typing...",
   disabled = false,
   readOnly = false,
   formats = DEFAULT_FORMATS,
@@ -434,7 +488,7 @@ function EditorImpl({
   statusBar = true,
   onAutoSave,
   autoSaveInterval = 30000,
-  size = 'md',
+  size = "md",
   maxLength,
   toolbarIcons,
   className,
@@ -442,15 +496,11 @@ function EditorImpl({
 }: EditorProps & { hasTipTap: boolean }) {
   const contentRef = React.useRef<HTMLTextAreaElement>(null);
 
-  const [value, setValue] = useControllableState(
-    controlledValue,
-    defaultValue,
-    onValueChange,
-  );
+  const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
 
-  const [saveStatus, setSaveStatus] = React.useState<EditorSaveStatus>('idle');
+  const [saveStatus, setSaveStatus] = React.useState<EditorSaveStatus>("idle");
 
-  const mode: EditorMode = hasTipTap ? 'rich' : 'markdown';
+  const mode: EditorMode = hasTipTap ? "rich" : "markdown";
 
   // TipTap editor instance (only when available)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -469,14 +519,14 @@ function EditorImpl({
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (_LinkExtension as any).configure({
             openOnClick: false,
-            HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
+            HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
           }),
         ],
         editorProps: {
           attributes: {
-            role: 'textbox',
-            'aria-label': placeholder,
-            'aria-multiline': 'true',
+            role: "textbox",
+            "aria-label": placeholder,
+            "aria-multiline": "true",
           },
         },
         content: controlledValue !== undefined ? controlledValue : defaultValue,
@@ -511,22 +561,22 @@ function EditorImpl({
 
     let cancelled = false;
     const timer = setTimeout(() => {
-      setSaveStatus('saving');
+      setSaveStatus("saving");
       try {
         Promise.resolve(onAutoSave(value))
           .then(() => {
             if (!cancelled) {
-              setSaveStatus('saved');
+              setSaveStatus("saved");
             }
           })
           .catch(() => {
             if (!cancelled) {
-              setSaveStatus('error');
+              setSaveStatus("error");
             }
           });
       } catch {
         if (!cancelled) {
-          setSaveStatus('error');
+          setSaveStatus("error");
         }
       }
     }, autoSaveInterval);
@@ -543,48 +593,48 @@ function EditorImpl({
 
       if (tiptapEditor) {
         switch (format) {
-          case 'bold':
+          case "bold":
             tiptapEditor.chain().focus().toggleBold().run();
             break;
-          case 'italic':
+          case "italic":
             tiptapEditor.chain().focus().toggleItalic().run();
             break;
-          case 'strikethrough':
+          case "strikethrough":
             tiptapEditor.chain().focus().toggleStrike().run();
             break;
-          case 'code':
+          case "code":
             tiptapEditor.chain().focus().toggleCode().run();
             break;
-          case 'bulletList':
+          case "bulletList":
             tiptapEditor.chain().focus().toggleBulletList().run();
             break;
-          case 'orderedList':
+          case "orderedList":
             tiptapEditor.chain().focus().toggleOrderedList().run();
             break;
-          case 'heading1':
+          case "heading1":
             tiptapEditor.chain().focus().toggleHeading({ level: 1 }).run();
             break;
-          case 'heading2':
+          case "heading2":
             tiptapEditor.chain().focus().toggleHeading({ level: 2 }).run();
             break;
-          case 'heading3':
+          case "heading3":
             tiptapEditor.chain().focus().toggleHeading({ level: 3 }).run();
             break;
-          case 'blockquote':
+          case "blockquote":
             tiptapEditor.chain().focus().toggleBlockquote().run();
             break;
-          case 'undo':
+          case "undo":
             tiptapEditor.chain().focus().undo().run();
             break;
-          case 'redo':
+          case "redo":
             tiptapEditor.chain().focus().redo().run();
             break;
-          case 'link': {
-            const previousUrl = tiptapEditor.getAttributes('link').href;
+          case "link": {
+            const previousUrl = tiptapEditor.getAttributes("link").href;
             if (previousUrl) {
               tiptapEditor.chain().focus().unsetLink().run();
             } else {
-              const url = window.prompt('Enter URL');
+              const url = window.prompt("Enter URL");
               if (url) {
                 tiptapEditor.chain().focus().setLink({ href: url }).run();
               }
@@ -596,48 +646,48 @@ function EditorImpl({
         applyMarkdownFormat(format, contentRef.current, setValue);
       }
     },
-    [disabled, readOnly, tiptapEditor, setValue],
+    [disabled, readOnly, tiptapEditor, setValue]
   );
 
   const isFormatActive = React.useCallback(
     (format: EditorFormat): boolean => {
       if (!tiptapEditor) return false;
       switch (format) {
-        case 'bold':
-          return tiptapEditor.isActive('bold');
-        case 'italic':
-          return tiptapEditor.isActive('italic');
-        case 'strikethrough':
-          return tiptapEditor.isActive('strike');
-        case 'code':
-          return tiptapEditor.isActive('code');
-        case 'bulletList':
-          return tiptapEditor.isActive('bulletList');
-        case 'orderedList':
-          return tiptapEditor.isActive('orderedList');
-        case 'heading1':
-          return tiptapEditor.isActive('heading', { level: 1 });
-        case 'heading2':
-          return tiptapEditor.isActive('heading', { level: 2 });
-        case 'heading3':
-          return tiptapEditor.isActive('heading', { level: 3 });
-        case 'blockquote':
-          return tiptapEditor.isActive('blockquote');
-        case 'link':
-          return tiptapEditor.isActive('link');
-        case 'undo':
-        case 'redo':
+        case "bold":
+          return tiptapEditor.isActive("bold");
+        case "italic":
+          return tiptapEditor.isActive("italic");
+        case "strikethrough":
+          return tiptapEditor.isActive("strike");
+        case "code":
+          return tiptapEditor.isActive("code");
+        case "bulletList":
+          return tiptapEditor.isActive("bulletList");
+        case "orderedList":
+          return tiptapEditor.isActive("orderedList");
+        case "heading1":
+          return tiptapEditor.isActive("heading", { level: 1 });
+        case "heading2":
+          return tiptapEditor.isActive("heading", { level: 2 });
+        case "heading3":
+          return tiptapEditor.isActive("heading", { level: 3 });
+        case "blockquote":
+          return tiptapEditor.isActive("blockquote");
+        case "link":
+          return tiptapEditor.isActive("link");
+        case "undo":
+        case "redo":
           return false; // Actions don't have active state
         default:
           return false;
       }
     },
-    [tiptapEditor],
+    [tiptapEditor]
   );
 
   const wordCount = React.useMemo(() => {
     if (tiptapEditor) {
-      const text = tiptapEditor.getText?.() ?? '';
+      const text = tiptapEditor.getText?.() ?? "";
       return countWords(text);
     }
     return countWords(value);
@@ -645,7 +695,7 @@ function EditorImpl({
 
   const charCount = React.useMemo(() => {
     if (tiptapEditor) {
-      return (tiptapEditor.getText?.() ?? '').length;
+      return (tiptapEditor.getText?.() ?? "").length;
     }
     return value.length;
   }, [value, tiptapEditor]);
@@ -675,7 +725,9 @@ function EditorImpl({
     disabled && styles.disabled,
     readOnly && styles.readOnly,
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   const hasCustomChildren = children !== undefined;
 
@@ -711,7 +763,7 @@ function EditorImpl({
 }
 
 function EditorToolbar({ children, className }: EditorToolbarProps) {
-  const classes = [styles.toolbar, className].filter(Boolean).join(' ');
+  const classes = [styles.toolbar, className].filter(Boolean).join(" ");
   return (
     <div className={classes} role="toolbar" aria-label="Editor formatting">
       {children}
@@ -719,8 +771,12 @@ function EditorToolbar({ children, className }: EditorToolbarProps) {
   );
 }
 
-function EditorToolbarGroup({ children, 'aria-label': ariaLabel, className }: EditorToolbarGroupProps) {
-  const classes = [styles.toolbarGroup, className].filter(Boolean).join(' ');
+function EditorToolbarGroup({
+  children,
+  "aria-label": ariaLabel,
+  className,
+}: EditorToolbarGroupProps) {
+  const classes = [styles.toolbarGroup, className].filter(Boolean).join(" ");
   return (
     <div className={classes} role="group" aria-label={ariaLabel}>
       {children}
@@ -729,7 +785,8 @@ function EditorToolbarGroup({ children, 'aria-label': ariaLabel, className }: Ed
 }
 
 function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
-  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode, toolbarIcons } = useEditorContext();
+  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode, toolbarIcons } =
+    useEditorContext();
   const meta = FORMAT_META[format];
   const isAction = ACTION_FORMATS.has(format);
   const active = isAction ? false : isFormatActive(format);
@@ -738,11 +795,11 @@ function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
   // Action buttons (undo/redo) have special disable logic
   let isDisabled = disabled || readOnly;
   if (isAction && !isDisabled) {
-    if (mode === 'markdown') {
+    if (mode === "markdown") {
       // Undo/redo in textarea mode is handled natively by the browser
       isDisabled = true;
     } else if (editor) {
-      isDisabled = format === 'undo' ? !editor.can().undo() : !editor.can().redo();
+      isDisabled = format === "undo" ? !editor.can().undo() : !editor.can().redo();
     }
   }
 
@@ -756,15 +813,12 @@ function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
   };
 
   const iconOverride = toolbarIcons?.[format];
-  const renderedOverride = typeof iconOverride === 'function'
-    ? iconOverride(iconState)
-    : iconOverride;
+  const renderedOverride =
+    typeof iconOverride === "function" ? iconOverride(iconState) : iconOverride;
 
-  const classes = [
-    styles.toolbarButton,
-    active && styles.toolbarButtonActive,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.toolbarButton, active && styles.toolbarButtonActive, className]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <button
@@ -774,21 +828,27 @@ function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
       disabled={isDisabled}
       aria-label={meta.label}
       title={`${meta.label} (${meta.shortcut})`}
-      {...(isAction ? {} : { 'aria-pressed': active })}
+      {...(isAction ? {} : { "aria-pressed": active })}
     >
-      {iconOverride !== undefined
-        ? renderedOverride
-        : <IconComponent size={16} weight={active ? 'bold' : 'regular'} />}
+      {iconOverride !== undefined ? (
+        renderedOverride
+      ) : (
+        <IconComponent size={16} weight={active ? "bold" : "regular"} />
+      )}
     </button>
   );
 }
 
 function EditorSeparator({ className }: EditorSeparatorProps) {
-  const classes = [styles.separator, className].filter(Boolean).join(' ');
+  const classes = [styles.separator, className].filter(Boolean).join(" ");
   return <div className={classes} role="separator" aria-orientation="vertical" />;
 }
 
-function EditorStatusIndicator({ status: statusOverride, labels, className }: EditorStatusIndicatorProps) {
+function EditorStatusIndicator({
+  status: statusOverride,
+  labels,
+  className,
+}: EditorStatusIndicatorProps) {
   const { saveStatus } = useEditorContext();
   const status = statusOverride ?? saveStatus;
   const mergedLabels = { ...DEFAULT_STATUS_LABELS, ...labels };
@@ -796,11 +856,9 @@ function EditorStatusIndicator({ status: statusOverride, labels, className }: Ed
 
   if (!label) return null;
 
-  const classes = [
-    styles.statusIndicator,
-    status === 'error' && styles.statusError,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.statusIndicator, status === "error" && styles.statusError, className]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <span className={classes} aria-live="polite" role="status">
@@ -813,9 +871,9 @@ function EditorContentArea({ className }: EditorContentProps) {
   const { value, setValue, placeholder, disabled, readOnly, editor, mode, contentRef } =
     useEditorContext();
 
-  if (mode === 'rich' && editor && _EditorContent) {
+  if (mode === "rich" && editor && _EditorContent) {
     const TipTapContent = _EditorContent;
-    const classes = [styles.content, styles.contentRich, className].filter(Boolean).join(' ');
+    const classes = [styles.content, styles.contentRich, className].filter(Boolean).join(" ");
     return (
       <div className={classes} data-placeholder={placeholder}>
         <TipTapContent editor={editor} />
@@ -824,7 +882,7 @@ function EditorContentArea({ className }: EditorContentProps) {
   }
 
   // Textarea fallback for markdown mode
-  const classes = [styles.content, className].filter(Boolean).join(' ');
+  const classes = [styles.content, className].filter(Boolean).join(" ");
   return (
     <div className={classes}>
       <textarea
@@ -841,10 +899,14 @@ function EditorContentArea({ className }: EditorContentProps) {
   );
 }
 
-function EditorStatusBar({ showWordCount = true, showCharCount = true, className }: EditorStatusBarProps) {
+function EditorStatusBar({
+  showWordCount = true,
+  showCharCount = true,
+  className,
+}: EditorStatusBarProps) {
   const { wordCount, charCount, maxLength } = useEditorContext();
 
-  const classes = [styles.statusBar, className].filter(Boolean).join(' ');
+  const classes = [styles.statusBar, className].filter(Boolean).join(" ");
 
   const isOverLimit = maxLength !== undefined && charCount > maxLength;
   const isNearLimit = maxLength !== undefined && !isOverLimit && charCount >= maxLength * 0.9;
@@ -853,7 +915,9 @@ function EditorStatusBar({ showWordCount = true, showCharCount = true, className
     styles.statusBarItem,
     isNearLimit && styles.statusBarItemWarning,
     isOverLimit && styles.statusBarItemError,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <div className={classes} aria-label="Editor statistics">
@@ -861,18 +925,15 @@ function EditorStatusBar({ showWordCount = true, showCharCount = true, className
       <div className={styles.statusBarRight}>
         {showWordCount && (
           <span className={styles.statusBarItem}>
-            {wordCount} {wordCount === 1 ? 'Word' : 'Words'}
+            {wordCount} {wordCount === 1 ? "Word" : "Words"}
           </span>
         )}
-        {showWordCount && showCharCount && (
-          <EditorSeparator />
-        )}
+        {showWordCount && showCharCount && <EditorSeparator />}
         {showCharCount && (
           <span className={charLimitClasses}>
             {maxLength !== undefined
               ? `${charCount} / ${maxLength}`
-              : `${charCount} ${charCount === 1 ? 'Character' : 'Characters'}`
-            }
+              : `${charCount} ${charCount === 1 ? "Character" : "Characters"}`}
           </span>
         )}
       </div>