@particle-academy/react-fancy 5.60.2 → 5.61.1

package/dist/use-full-screen-BUJ1ujG4.d.cts

@@ -0,0 +1,94 @@
+import { RefObject, CSSProperties, KeyboardEvent } from 'react';
+
+/**
+ * How a surface goes full screen.
+ *
+ * - `"overlay"` (default): the element itself becomes `position: fixed` over the
+ *   viewport, in place. It always works: inside an iframe without
+ *   `allow="fullscreen"`, inside a dialog, without a user gesture. Nothing is
+ *   reparented, so an editor keeps its caret, undo stack and DOM.
+ * - `"native"`: the browser Fullscreen API (`element.requestFullscreen()`),
+ *   which hides the browser chrome too. The overlay is applied first and stays
+ *   if the request is rejected or the API is missing, so the user gets full
+ *   screen either way; `activeMode` reports which one took.
+ */
+type FullScreenMode = "overlay" | "native";
+interface UseFullScreenOptions {
+    /** Controlled flag. Pair with `onFullScreenChange`. */
+    fullScreen?: boolean;
+    /** Initial flag when uncontrolled. @default false */
+    defaultFullScreen?: boolean;
+    /**
+     * Fired with the requested state — from the toggle, Escape, an agent calling
+     * `setFullScreen`, or the user leaving the browser's own full screen.
+     */
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    /** @default "overlay" */
+    mode?: FullScreenMode;
+    /** Leave full screen on Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Stop the page behind from scrolling while active. @default true */
+    lockScroll?: boolean;
+    /** Stacking order of the overlay. Matches `Modal`. @default 50 */
+    zIndex?: number;
+    /** Accessible names for the toggle. */
+    labels?: {
+        enter?: string;
+        exit?: string;
+    };
+}
+interface FullScreenTargetProps<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    "data-fullscreen": "true" | "false";
+    "data-fullscreen-mode"?: FullScreenMode;
+    "data-fullscreen-layer"?: FullScreenLayer;
+    style?: CSSProperties;
+    onKeyDown: (event: KeyboardEvent<T>) => void;
+}
+interface FullScreenToggleProps {
+    type: "button";
+    onClick: () => void;
+    "aria-pressed": boolean;
+    "aria-label": string;
+    title: string;
+    "data-react-fancy-fullscreen-toggle": "";
+    "data-fullscreen": "true" | "false";
+}
+interface UseFullScreenResult<T extends HTMLElement = HTMLElement> {
+    fullScreen: boolean;
+    setFullScreen: (fullScreen: boolean) => void;
+    toggle: () => void;
+    /** The mechanism in effect while active; `null` when not full screen. */
+    activeMode: FullScreenMode | null;
+    /**
+     * `"top"` while the surface is in the browser's top layer (a manual popover,
+     * or the native full screen), `"fixed"` while it relies on `position: fixed`
+     * (no popover API, or the browser refused). `null` when not full screen.
+     */
+    layer: FullScreenLayer | null;
+    /** Attach to the element that goes full screen. Also inside `targetProps`. */
+    ref: RefObject<T | null>;
+    /**
+     * Spread onto the surface's root. Carries the ref, the `data-fullscreen`
+     * handle, the overlay style and the Escape/Tab handler. Merge your own
+     * `style` / `onKeyDown` if the root has them.
+     */
+    targetProps: FullScreenTargetProps<T>;
+    /** Spread onto a `<button>` to make it the toggle. */
+    toggleProps: FullScreenToggleProps;
+    /**
+     * The element to portal into while active, else `null`. Provide it through
+     * `PortalContainerContext` so menus opened inside stay visible.
+     */
+    portalContainer: HTMLElement | null;
+}
+/** Which mechanism keeps the surface over the page. */
+type FullScreenLayer = "top" | "fixed";
+/**
+ * A controlled full-screen state for any surface: Editor today, DeckEditor and
+ * SheetWorkbook next. Render-time output is pure (no `window`/`document`), so it
+ * server-renders; everything that touches the DOM runs in effects.
+ */
+declare function useFullScreen<T extends HTMLElement = HTMLElement>(options?: UseFullScreenOptions): UseFullScreenResult<T>;
+
+export { type FullScreenLayer as F, type UseFullScreenOptions as U, type FullScreenMode as a, type FullScreenTargetProps as b, type FullScreenToggleProps as c, type UseFullScreenResult as d, useFullScreen as u };

package/dist/use-full-screen-BUJ1ujG4.d.ts

@@ -0,0 +1,94 @@
+import { RefObject, CSSProperties, KeyboardEvent } from 'react';
+
+/**
+ * How a surface goes full screen.
+ *
+ * - `"overlay"` (default): the element itself becomes `position: fixed` over the
+ *   viewport, in place. It always works: inside an iframe without
+ *   `allow="fullscreen"`, inside a dialog, without a user gesture. Nothing is
+ *   reparented, so an editor keeps its caret, undo stack and DOM.
+ * - `"native"`: the browser Fullscreen API (`element.requestFullscreen()`),
+ *   which hides the browser chrome too. The overlay is applied first and stays
+ *   if the request is rejected or the API is missing, so the user gets full
+ *   screen either way; `activeMode` reports which one took.
+ */
+type FullScreenMode = "overlay" | "native";
+interface UseFullScreenOptions {
+    /** Controlled flag. Pair with `onFullScreenChange`. */
+    fullScreen?: boolean;
+    /** Initial flag when uncontrolled. @default false */
+    defaultFullScreen?: boolean;
+    /**
+     * Fired with the requested state — from the toggle, Escape, an agent calling
+     * `setFullScreen`, or the user leaving the browser's own full screen.
+     */
+    onFullScreenChange?: (fullScreen: boolean) => void;
+    /** @default "overlay" */
+    mode?: FullScreenMode;
+    /** Leave full screen on Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Stop the page behind from scrolling while active. @default true */
+    lockScroll?: boolean;
+    /** Stacking order of the overlay. Matches `Modal`. @default 50 */
+    zIndex?: number;
+    /** Accessible names for the toggle. */
+    labels?: {
+        enter?: string;
+        exit?: string;
+    };
+}
+interface FullScreenTargetProps<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    "data-fullscreen": "true" | "false";
+    "data-fullscreen-mode"?: FullScreenMode;
+    "data-fullscreen-layer"?: FullScreenLayer;
+    style?: CSSProperties;
+    onKeyDown: (event: KeyboardEvent<T>) => void;
+}
+interface FullScreenToggleProps {
+    type: "button";
+    onClick: () => void;
+    "aria-pressed": boolean;
+    "aria-label": string;
+    title: string;
+    "data-react-fancy-fullscreen-toggle": "";
+    "data-fullscreen": "true" | "false";
+}
+interface UseFullScreenResult<T extends HTMLElement = HTMLElement> {
+    fullScreen: boolean;
+    setFullScreen: (fullScreen: boolean) => void;
+    toggle: () => void;
+    /** The mechanism in effect while active; `null` when not full screen. */
+    activeMode: FullScreenMode | null;
+    /**
+     * `"top"` while the surface is in the browser's top layer (a manual popover,
+     * or the native full screen), `"fixed"` while it relies on `position: fixed`
+     * (no popover API, or the browser refused). `null` when not full screen.
+     */
+    layer: FullScreenLayer | null;
+    /** Attach to the element that goes full screen. Also inside `targetProps`. */
+    ref: RefObject<T | null>;
+    /**
+     * Spread onto the surface's root. Carries the ref, the `data-fullscreen`
+     * handle, the overlay style and the Escape/Tab handler. Merge your own
+     * `style` / `onKeyDown` if the root has them.
+     */
+    targetProps: FullScreenTargetProps<T>;
+    /** Spread onto a `<button>` to make it the toggle. */
+    toggleProps: FullScreenToggleProps;
+    /**
+     * The element to portal into while active, else `null`. Provide it through
+     * `PortalContainerContext` so menus opened inside stay visible.
+     */
+    portalContainer: HTMLElement | null;
+}
+/** Which mechanism keeps the surface over the page. */
+type FullScreenLayer = "top" | "fixed";
+/**
+ * A controlled full-screen state for any surface: Editor today, DeckEditor and
+ * SheetWorkbook next. Render-time output is pure (no `window`/`document`), so it
+ * server-renders; everything that touches the DOM runs in effects.
+ */
+declare function useFullScreen<T extends HTMLElement = HTMLElement>(options?: UseFullScreenOptions): UseFullScreenResult<T>;
+
+export { type FullScreenLayer as F, type UseFullScreenOptions as U, type FullScreenMode as a, type FullScreenTargetProps as b, type FullScreenToggleProps as c, type UseFullScreenResult as d, useFullScreen as u };

package/docs/Editor.md

@@ -33,6 +33,10 @@ import { Editor } from "@particle-academy/react-fancy";
 | showSource | `boolean` | - | Controlled source-view flag. When `true`, the content area shows the raw `value` (in `outputFormat`) in an editable `<textarea>` |
 | defaultShowSource | `boolean` | `false` | Initial source-view flag when uncontrolled |
 | onShowSourceChange | `(showSource: boolean) => void` | - | Fired when the Source toggle (or an agent) flips source view on/off |
+| fullScreen | `boolean` | - | Controlled full-screen flag. While `true` the editor covers the viewport, the toolbar stays on top and the content fills the rest |
+| defaultFullScreen | `boolean` | `false` | Initial full-screen flag when uncontrolled |
+| onFullScreenChange | `(fullScreen: boolean) => void` | - | Fired by the toggle, Escape, an agent, or the user leaving the browser's full screen |
+| fullScreenMode | `"overlay" \| "native"` | `"overlay"` | `overlay` covers the viewport in place and always works; `native` uses the browser Fullscreen API and falls back to the overlay. See [FullScreen](./FullScreen.md) |
 | className | `string` | - | Additional CSS classes |
 
 ### Editor.Toolbar
@@ -43,6 +47,7 @@ import { Editor } from "@particle-academy/react-fancy";
 | onAction | `(command: string) => void` | - | Custom action handler |
 | children | `ReactNode` | - | Custom toolbar content |
 | showSourceToggle | `boolean` | `true` | Append a Source toggle to the default toolbar. Ignored when `children` are supplied — custom toolbars compose their own `<Editor.SourceToggle />` |
+| showFullScreenToggle | `boolean` | `false` | Append a full-screen toggle (Lucide `maximize-2` / `minimize-2`) at the right end of the default toolbar. Ignored when `children` are supplied — use `<Editor.FullScreenToggle />` |
 | className | `string` | - | Additional CSS classes |
 
 #### EditorAction
@@ -70,6 +75,25 @@ A toolbar button that reveals the raw HTML/Markdown behind the editor. It is app
 | activeTitle | `string` | `"Rich text"` | Accessible title in source mode (click → rich text) |
 | className | `string` | - | Additional CSS classes |
 
+### Editor.FullScreenToggle
+
+Toolbar button that takes the editor full screen and back. Carries `data-react-fancy-editor-fullscreen-toggle` and the shared `data-react-fancy-fullscreen-toggle`, `aria-pressed` and an `aria-label` of "Enter full screen" / "Exit full screen".
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| enterIcon | `string` | `"maximize-2"` | Lucide name shown while not full screen |
+| exitIcon | `string` | `"minimize-2"` | Lucide name shown while full screen |
+| className | `string` | - | Additional CSS classes |
+
+```tsx
+<Editor defaultValue={doc} onFullScreenChange={(on) => console.log(on)}>
+  <Editor.Toolbar showFullScreenToggle />
+  <Editor.Content maxHeight={240} />
+</Editor>
+```
+
+While full screen the root has `data-fullscreen="true"`, `maxHeight` is ignored so the content fills the screen, and Escape leaves. The editor is not remounted, so the caret, undo history and text survive the round trip.
+
 ### Editor.Content
 
 | Prop | Type | Default | Description |

package/docs/FullScreen.md

@@ -0,0 +1,106 @@
+# FullScreen
+
+One full-screen behaviour for every surface that can take over the viewport. `Editor` uses it; DeckEditor (fancy-slides) and SheetWorkbook (fancy-sheets) are meant to adopt the same hook.
+
+## Import
+
+```tsx
+import { FullScreen, useFullScreen, FullScreenProvider } from "@particle-academy/react-fancy";
+// or the subpath
+import { FullScreen } from "@particle-academy/react-fancy/full-screen";
+```
+
+## A box with a toggle
+
+```tsx
+<FullScreen className="rounded-xl border bg-white dark:bg-zinc-900">
+  <FullScreen.Toggle />
+  <Chart … />
+</FullScreen>
+```
+
+Give it a background: while active it covers the page, and in `native` mode the browser paints black behind anything transparent.
+
+## A surface that owns its root
+
+```tsx
+function DeckEditor({ fullScreen, defaultFullScreen, onFullScreenChange }) {
+  const fs = useFullScreen<HTMLDivElement>({ fullScreen, defaultFullScreen, onFullScreenChange });
+  return (
+    <FullScreenProvider value={fs}>
+      <div {...fs.targetProps} data-fancy-deck-editor="" className="flex flex-col …">
+        <Toolbar>
+          <FullScreen.Toggle />
+        </Toolbar>
+        <Canvas className="min-h-0 flex-1" />
+      </div>
+    </FullScreenProvider>
+  );
+}
+```
+
+`targetProps` carries the ref, `data-fullscreen`, the overlay `style` and the `onKeyDown` handler. If the root has its own `style` or `onKeyDown`, merge them. `FullScreenProvider` makes `<FullScreen.Toggle />` work anywhere inside and redirects descendant `<Portal>`s into the surface while it is active.
+
+## Overlay or the browser's Fullscreen API
+
+| `mode` | What happens | When it fails |
+|---|---|---|
+| `"overlay"` (default) | The element covers the viewport in place: `position: fixed` plus, where the browser has the popover API, promotion into the **top layer** with `popover="manual"` | Never refused. Without the popover API it stays `position: fixed` (z-index 50, as `Modal`) and an ancestor with `transform`, `filter`, `perspective` or `contain: paint` confines it to that ancestor |
+| `"native"` | `element.requestFullscreen()`, so the browser chrome hides too | Refused in an iframe without `allow="fullscreen"`, without a user gesture, or by a permissions policy. It then drops to the overlay, top layer included. `data-fullscreen-mode` says which one is active |
+
+The overlay is the default because it never asks the browser for permission. The element is not portalled, so nothing inside remounts. An editor keeps its caret, undo history and seeded content.
+
+**Why the top layer.** `position: fixed` is fixed to the viewport only while no ancestor has a transform, filter, perspective or paint containment. With one, the overlay is fixed to that ancestor instead. A Tabs panel whose fade-in animation holds its end keyframe (`animation-fill-mode: both`) traps it this way, and so does a dialog centred with `transform`. A top-layer element's containing block is the viewport whatever its ancestors do. `data-fullscreen-layer` reports `"top"` (popover, or the native full screen) or `"fixed"` (no popover API, or the browser refused).
+
+What the top layer changes:
+
+- **Light dismiss does not apply.** The popover is `manual`, so outside clicks do not close it, and Escape goes through the surface's own handling.
+- **The UA popover box is reset.** `styles.css` puts padding, border, background, text colour and overflow back to a plain box, in a zero-specificity rule in the `base` layer, so your own classes still win. Geometry is set inline. Without `styles.css` the UA popover padding, border and `Canvas` colours show.
+- **Portals opened from inside stay visible**, because they are redirected into the surface. Overlays rendered from OUTSIDE the surface while it is active, such as an app-level toast, sit under it, like anything else in the page.
+- **Native mode requests the browser's full screen before any popover.** Chromium refuses `requestFullscreen()` on an element that is already an open popover, so the popover is only used if that request fails.
+- If something else closes the popover, the surface drops back to `position: fixed` rather than disappearing.
+
+In `native` mode the browser handles Esc itself. When the user leaves through the browser's UI, `onFullScreenChange(false)` fires so controlled state stays in sync.
+
+## Behaviour
+
+- **Controlled:** `fullScreen` + `onFullScreenChange`, or `defaultFullScreen` uncontrolled. `onFullScreenChange` only fires on real transitions.
+- **Escape** leaves full screen. An Escape that a child already handled (`preventDefault`), or that comes from a menu or dialog opened from inside, is left to that child. The Escape is stopped at the surface, so an enclosing dialog does not also close. `closeOnEscape={false}` turns this off.
+- **Focus** moves inside on entry if it was outside. On exit it returns to the element that had it before, unless the user has since focused something else. Tab wraps within the surface.
+- **Scroll:** body scroll is locked while active (`lockScroll`, reference-counted). On exit the window and every scrolled ancestor go back to their offsets. Those offsets are read before the surface leaves the flow, which would otherwise clamp them.
+- **SSR:** nothing touches `window` or `document` during render. A surface that starts full screen renders the overlay on the server.
+
+## Props / options
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| fullScreen | `boolean` | - | Controlled flag |
+| defaultFullScreen | `boolean` | `false` | Initial flag when uncontrolled |
+| onFullScreenChange | `(fullScreen: boolean) => void` | - | Requested state, from the toggle, Escape, `setFullScreen` or the browser |
+| mode | `"overlay" \| "native"` | `"overlay"` | See above |
+| closeOnEscape | `boolean` | `true` | Leave on Escape |
+| lockScroll | `boolean` | `true` | Lock body scroll while active |
+| zIndex | `number` | `50` | Stacking order of the overlay |
+| labels | `{ enter?: string; exit?: string }` | "Enter full screen" / "Exit full screen" | Toggle accessible names |
+
+`useFullScreen()` returns `{ fullScreen, setFullScreen, toggle, activeMode, layer, ref, targetProps, toggleProps, portalContainer }`.
+
+### FullScreen.Toggle
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| enterIcon | `string` | `"maximize-2"` | Lucide name shown while not full screen |
+| exitIcon | `string` | `"minimize-2"` | Lucide name shown while full screen |
+| children | `ReactNode \| (fullScreen) => ReactNode` | - | Replace the icon |
+
+Renders nothing outside a `FullScreen` / `FullScreenProvider`.
+
+## Data attributes
+
+| Selector | Meaning |
+|---|---|
+| `[data-react-fancy-fullscreen]` | `<FullScreen>` root |
+| `[data-fullscreen="true"]` | Any surface while full screen (also on the toggle) |
+| `[data-fullscreen-mode="overlay" \| "native"]` | Which mechanism is active |
+| `[data-fullscreen-layer="top" \| "fixed"]` | Whether the surface is in the top layer or relies on `position: fixed` |
+| `[data-react-fancy-fullscreen-toggle]` | Any full-screen toggle |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.60.2",
+  "version": "5.61.1",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",
@@ -373,6 +373,16 @@
         "default": "./dist/file-upload.cjs"
       }
     },
+    "./full-screen": {
+      "import": {
+        "types": "./dist/full-screen.d.ts",
+        "default": "./dist/full-screen.js"
+      },
+      "require": {
+        "types": "./dist/full-screen.d.cts",
+        "default": "./dist/full-screen.cjs"
+      }
+    },
     "./grid": {
       "import": {
         "types": "./dist/grid.d.ts",

package/dist/chunk-NBZC6LOB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"names":["useState","useEffect","createPortal","jsx","useRef"],"mappings":";;;;;;;AAQO,SAAS,MAAA,CAAO,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgB;AAO3D,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC5C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,CAAC,OAAA,IAAW,OAAO,QAAA,KAAa,aAAa,OAAO,IAAA;AAExD,EAAA,MAAM,MAAA,GAAS,aAAa,QAAA,CAAS,IAAA;AAErC,EAAA,OAAOC,qBAAA;AAAA,oBACLC,cAAA,CAAC,qBAAmB,QAAA,EAAS,CAAA;AAAA,IAC7B;AAAA,GACF;AACF;AAOA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAS,EAA4B;AAChE,EAAA,MAAM,GAAA,GAAMC,aAAuB,IAAI,CAAA;AAEvC,EAAAH,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,OAAO,QAAA,CAAS,eAAA;AACtB,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,MAAM,MAAA,GACJ,KAAK,SAAA,CAAU,QAAA,CAAS,MAAM,CAAA,IAC9B,IAAA,CAAK,YAAA,CAAa,YAAY,CAAA,KAAM,MAAA;AACtC,MAAA,OAAA,CAAQ,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,IACzC,CAAA;AAEA,IAAA,IAAA,EAAK;AAEL,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,IAAI,CAAA;AAC1C,IAAA,QAAA,CAAS,QAAQ,IAAA,EAAM;AAAA,MACrB,UAAA,EAAY,IAAA;AAAA,MACZ,eAAA,EAAiB,CAAC,OAAA,EAAS,YAAY;AAAA,KACxC,CAAA;AAED,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACEE,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,yBAAA,EAAwB,EAAA,EAAG,OAAO,EAAE,OAAA,EAAS,UAAA,EAAW,EACpE,QAAA,EACH,CAAA;AAEJ","file":"chunk-NBZC6LOB.cjs","sourcesContent":["import { createPortal } from \"react-dom\";\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface PortalProps {\n  children: ReactNode;\n  container?: HTMLElement;\n}\n\nexport function Portal({ children, container }: PortalProps) {\n  // Render nothing on the server AND on the client's first (hydration) render,\n  // then portal after mount. Without the `mounted` gate the client would render\n  // the portal immediately while the server rendered null — a hydration\n  // mismatch (the portal wrapper appears client-only). Deferring to after mount\n  // keeps the first client render identical to the server. SSR-safe for every\n  // Portal consumer (Toast, Modal, Dropdown, Tooltip, Popover, …).\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted || typeof document === \"undefined\") return null;\n\n  const target = container ?? document.body;\n\n  return createPortal(\n    <PortalDarkWrapper>{children}</PortalDarkWrapper>,\n    target,\n  );\n}\n\n/**\n * Wrapper that propagates the `dark` class from <html> into the portal subtree.\n * This ensures Tailwind `dark:` utilities work even though Portal renders\n * outside the React component tree.\n */\nfunction PortalDarkWrapper({ children }: { children: ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    const wrapper = ref.current;\n    if (!wrapper) return;\n\n    const sync = () => {\n      const isDark =\n        root.classList.contains(\"dark\") ||\n        root.getAttribute(\"data-theme\") === \"dark\";\n      wrapper.classList.toggle(\"dark\", isDark);\n    };\n\n    sync();\n\n    const observer = new MutationObserver(sync);\n    observer.observe(root, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    });\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} data-react-fancy-portal=\"\" style={{ display: \"contents\" }}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-VD3C7IA4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Editor/Editor.context.ts","../src/components/Editor/EditorSourceToggle.tsx","../src/components/Editor/EditorToolbar.tsx","../src/components/Editor/EditorToolbarSeparator.tsx","../src/components/Editor/EditorContent.tsx","../src/components/Editor/Editor.tsx"],"names":["jsx","useRef","useEffect","useMemo"],"mappings":"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","file":"chunk-VD3C7IA4.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { RenderExtension } from \"../ContentRenderer/extensions\";\n\nexport interface EditorContextValue {\n  contentRef: RefObject<HTMLDivElement | null>;\n  exec: (command: string, arg?: string) => void;\n  insertText: (text: string) => void;\n  wrapSelection: (before: string, after: string) => void;\n  outputFormat: \"html\" | \"markdown\";\n  lineSpacing: number;\n  placeholder?: string;\n  /** Merged render extensions (global + instance). */\n  extensions: RenderExtension[];\n  /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */\n  showSource: boolean;\n  /** Toggle/set the raw-source view. */\n  setShowSource: (showSource: boolean) => void;\n  /** Initial HTML content to load into the editor on mount */\n  _initialHtml: string;\n  /** @internal Called by EditorContent on input events */\n  _onInput: () => void;\n  /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */\n  _sourceValue: string;\n  /** @internal Commit an edit made directly in the source textarea. */\n  _onSourceInput: (value: string) => void;\n}\n\nexport const EditorContext = createContext<EditorContextValue | null>(null);\n\nexport function useEditor(): EditorContextValue {\n  const ctx = useContext(EditorContext);\n  if (!ctx) {\n    throw new Error(\"useEditor must be used within an <Editor> component\");\n  }\n  return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport type { EditorSourceToggleProps } from \"./Editor.types\";\n\n/**\n * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads\n * `showSource` / `setShowSource` from context, so it works in the default\n * toolbar and in any custom toolbar composed with `useEditor()`.\n */\nexport function EditorSourceToggle({\n  className,\n  icon = \"</>\",\n  title = \"Source\",\n  activeTitle = \"Rich text\",\n}: EditorSourceToggleProps) {\n  const { showSource, setShowSource } = useEditor();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setShowSource(!showSource)}\n      title={showSource ? activeTitle : title}\n      aria-pressed={showSource}\n      data-react-fancy-editor-source-toggle=\"\"\n      className={cn(\n        \"inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors\",\n        showSource\n          ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n          : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        className,\n      )}\n    >\n      {icon}\n    </button>\n  );\n}\n\nEditorSourceToggle.displayName = \"EditorSourceToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport type { EditorToolbarProps } from \"./Editor.types\";\n\nconst DEFAULT_ACTIONS = [\n  { icon: \"B\", label: \"Bold\", command: \"bold\" },\n  { icon: \"I\", label: \"Italic\", command: \"italic\" },\n  { icon: \"U\", label: \"Underline\", command: \"underline\" },\n  { icon: \"S\", label: \"Strikethrough\", command: \"strikeThrough\" },\n];\n\nexport function EditorToolbar({\n  actions = DEFAULT_ACTIONS,\n  onAction,\n  children,\n  className,\n  showSourceToggle = true,\n}: EditorToolbarProps) {\n  const { exec, showSource } = useEditor();\n\n  return (\n    <div\n      data-react-fancy-editor-toolbar=\"\"\n      className={cn(\n        \"flex shrink-0 items-center gap-0.5 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children ?? (\n        <>\n          {actions.map((action) => (\n            <button\n              key={`${action.command}-${action.commandArg ?? \"\"}`}\n              type=\"button\"\n              // Rich-text commands don't apply to the raw-source textarea.\n              disabled={showSource}\n              onClick={() => {\n                if (onAction) {\n                  onAction(action.command);\n                } else {\n                  exec(action.command, action.commandArg);\n                }\n              }}\n              title={action.label}\n              className={cn(\n                \"inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors\",\n                action.active\n                  ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n                  : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n                showSource && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n              )}\n            >\n              {action.icon}\n            </button>\n          ))}\n          {showSourceToggle && <EditorSourceToggle className=\"ml-auto\" />}\n        </>\n      )}\n    </div>\n  );\n}\n\nEditorToolbar.displayName = \"EditorToolbar\";\n","export function EditorToolbarSeparator() {\n  return (\n    <span\n      data-react-fancy-editor-toolbar-separator=\"\"\n      className=\"mx-1 h-5 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n    />\n  );\n}\n\nEditorToolbarSeparator.displayName = \"EditorToolbarSeparator\";\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CodeView } from \"../CodeView\";\nimport { useEditor } from \"./Editor.context\";\nimport { proseClasses, extensionEditorClasses } from \"./editor.utils\";\nimport type { EditorContentProps } from \"./Editor.types\";\n\nexport function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps) {\n  const {\n    contentRef,\n    lineSpacing,\n    placeholder,\n    extensions,\n    outputFormat,\n    showSource,\n    _initialHtml,\n    _onInput,\n    _sourceValue,\n    _onSourceInput,\n  } = useEditor();\n  // Tracks which seed HTML is currently in the contentEditable. Seeding on the\n  // seed VALUE (not a one-shot boolean) re-seeds when the source view rewrites\n  // `value`, while still never re-seeding on plain keystrokes — typing leaves\n  // `_initialHtml` untouched, so `seededHtml.current === _initialHtml` holds.\n  const seededHtml = useRef<string | null>(null);\n\n  useEffect(() => {\n    // Source view replaces the contentEditable in the tree, so it unmounts.\n    // Forget what we seeded — the div that returns is a fresh, empty one and\n    // must always be re-seeded, even if `value` was left untouched.\n    if (showSource) {\n      seededHtml.current = null;\n      return;\n    }\n    const el = contentRef.current;\n    if (el && seededHtml.current !== _initialHtml) {\n      el.innerHTML = _initialHtml;\n      seededHtml.current = _initialHtml;\n    }\n  }, [contentRef, _initialHtml, showSource]);\n\n  const extClasses = useMemo(\n    () => extensionEditorClasses(extensions),\n    [extensions],\n  );\n\n  if (showSource) {\n    // Raw-source view — a syntax-highlighted code surface (HTML highlighted;\n    // markdown/plain un-highlighted), built on the shared fancy-file-commons\n    // primitives. It's a DIRECT child of the flex-column editor root (no\n    // wrapper — a nested flex box collapses the fill), so `flex-auto` makes it\n    // fill the editor body when height-constrained and grow with content\n    // (≥ minHeight) when not. `maxHeight` caps + scrolls.\n    return (\n      <CodeView\n        value={_sourceValue}\n        onChange={_onSourceInput}\n        language={outputFormat === \"html\" ? \"html\" : \"plaintext\"}\n        placeholder={placeholder}\n        maxHeight={maxHeight}\n        className={cn(\"min-h-0 flex-auto\", sourceClassName)}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={contentRef}\n      contentEditable\n      suppressContentEditableWarning\n      data-react-fancy-editor-content=\"\"\n      data-placeholder={placeholder}\n      onInput={_onInput}\n      style={{\n        lineHeight: lineSpacing,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n      }}\n      className={cn(\n        \"min-h-[120px] flex-auto overflow-y-auto px-4 py-3 text-sm outline-none\",\n        \"focus:outline-none\",\n        proseClasses,\n        extClasses,\n        \"empty:before:content-[attr(data-placeholder)] empty:before:text-zinc-400 empty:before:pointer-events-none\",\n        className,\n      )}\n    />\n  );\n}\n\nEditorContent.displayName = \"EditorContent\";\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { marked } from \"marked\";\nimport { cn } from \"../../utils/cn\";\nimport { sanitizeHtml } from \"../../utils/sanitize\";\nimport { useControllableState } from \"../../hooks\";\nimport { EditorContext } from \"./Editor.context\";\nimport { EditorToolbar } from \"./EditorToolbar\";\nimport { EditorToolbarSeparator } from \"./EditorToolbarSeparator\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport { EditorContent } from \"./EditorContent\";\nimport { htmlToMarkdown, detectFormat, markdownToEditorHtml, type MarkdownSource } from \"./editor.utils\";\nimport { mergeExtensions } from \"../ContentRenderer/extensions\";\nimport { ContentRenderer } from \"../ContentRenderer/ContentRenderer\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport type { EditorProps } from \"./Editor.types\";\n\ninterface Seed {\n  html: string;\n  /** Source map for source-preserving markdown output; null when there is none. */\n  source: MarkdownSource | null;\n}\n\nfunction toHtml(\n  value: string,\n  outputFormat: \"html\" | \"markdown\",\n  unsafe: boolean,\n  valueFormat: \"markdown\" | \"html\" | \"auto\" = \"auto\",\n): Seed {\n  if (!value) return { html: \"\", source: null };\n  const sanitize = (html: string) => (unsafe ? html : sanitizeHtml(html));\n  // An explicit valueFormat is authoritative — the sniff misclassifies\n  // markdown that merely MENTIONS HTML-ish snippets (`<code>`, `<table`),\n  // collapsing it into an innerHTML wall of text (#10).\n  const format =\n    valueFormat !== \"auto\"\n      ? valueFormat\n      : outputFormat === \"html\"\n        ? \"html\"\n        : detectFormat(value);\n  if (format === \"html\") return { html: sanitize(value), source: null };\n  // Markdown in, markdown out: tag each block with its source so untouched\n  // blocks are emitted byte-identical.\n  if (outputFormat === \"markdown\") return markdownToEditorHtml(value, sanitize);\n  return { html: sanitize((marked.parse(value, { async: false }) as string).trim()), source: null };\n}\n\nfunction EditorRoot({\n  children,\n  className,\n  value: controlledValue,\n  defaultValue = \"\",\n  onChange,\n  outputFormat = \"html\",\n  valueFormat = \"auto\",\n  lineSpacing = 1.6,\n  placeholder,\n  mode: modeProp,\n  extensions: instanceExtensions,\n  unsafe = false,\n  showSource: showSourceProp,\n  defaultShowSource = false,\n  onShowSourceChange,\n}: EditorProps) {\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);\n  const [showSource, setShowSource] = useControllableState(\n    showSourceProp,\n    defaultShowSource,\n    onShowSourceChange,\n  );\n  // View/edit mode — same resolution as the inputs: prop → <Form> context → \"edit\".\n  const mode = useFieldMode(modeProp);\n  const isView = mode === \"view\";\n\n  // The value this editor last emitted through `onChange`. An incoming `value`\n  // equal to it is our own keystroke echoing back; anything else came from\n  // OUTSIDE — an async load, a host reset, a form repopulating.\n  const lastEmitted = useRef<string | null>(null);\n\n  // Bumped only on an external `value` change, so the seed memo below recomputes\n  // for those and stays put while the user types. Without this, `value` was\n  // excluded from the deps to avoid re-seeding on keystrokes, which also meant a\n  // value arriving after mount was silently dropped and the editor stayed blank\n  // forever (#15).\n  const [externalSeed, setExternalSeed] = useState(0);\n  useEffect(() => {\n    if (value !== lastEmitted.current) setExternalSeed((n) => n + 1);\n  }, [value]);\n\n  const seed = useMemo(\n    () => toHtml(value, outputFormat, unsafe, valueFormat),\n    // Seed the contentEditable from the LIVE value when (re)entering edit mode —\n    // and when returning from the raw-source view, which may have rewritten the\n    // value out from under the rich-text surface. `value` itself stays out of\n    // the deps so typing never re-seeds (which would fight the caret);\n    // `externalSeed` covers the externally-driven case instead.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isView, outputFormat, unsafe, valueFormat, showSource, externalSeed],\n  );\n  const initialHtml = seed.html;\n  const seedSource = seed.source;\n\n  const extensions = useMemo(\n    () => mergeExtensions(instanceExtensions),\n    [instanceExtensions],\n  );\n\n  const getOutputValue = useCallback(\n    (html: string): string => {\n      return outputFormat === \"markdown\" ? htmlToMarkdown(html, seedSource) : html;\n    },\n    [outputFormat, seedSource],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = contentRef.current;\n    if (!el) return;\n    const next = getOutputValue(el.innerHTML);\n    // Record what we emitted BEFORE publishing it, so the value coming back in\n    // is recognised as our own and does not trigger a re-seed mid-keystroke.\n    lastEmitted.current = next;\n    setValue(next);\n  }, [setValue, getOutputValue]);\n\n  const exec = useCallback(\n    (command: string, arg?: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(command, false, arg);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const insertText = useCallback(\n    (text: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, text);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  // The source textarea edits `value` directly — it is already the canonical\n  // source in `outputFormat` (html or markdown), so no conversion round-trip.\n  const handleSourceInput = useCallback(\n    (next: string) => {\n      // Also an internal emission — record it so typing in the source view is\n      // not mistaken for an external change on every keystroke.\n      lastEmitted.current = next;\n      setValue(next);\n    },\n    [setValue],\n  );\n\n  const wrapSelection = useCallback(\n    (before: string, after: string) => {\n      const sel = window.getSelection();\n      if (!sel || sel.rangeCount === 0) return;\n      const range = sel.getRangeAt(0);\n      const selectedText = range.toString();\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, `${before}${selectedText}${after}`);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const contextValue = {\n    contentRef,\n    exec,\n    insertText,\n    wrapSelection,\n    outputFormat,\n    lineSpacing,\n    placeholder,\n    extensions,\n    showSource,\n    setShowSource,\n    _initialHtml: initialHtml,\n    _onInput: handleInput,\n    _sourceValue: value,\n    _onSourceInput: handleSourceInput,\n  };\n\n  // View mode — render the value read-only through ContentRenderer, matching the\n  // editor's own format (markdown/html), instead of the editable toolbar+content\n  // tree. Driven by `mode` / a `<Form mode=\"view\">`, exactly like the inputs.\n  if (isView) {\n    return (\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"view\"\n        className={cn(\n          \"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        <ContentRenderer\n          value={value}\n          format={valueFormat !== \"auto\" ? valueFormat : outputFormat}\n          lineSpacing={lineSpacing}\n          extensions={instanceExtensions}\n          unsafe={unsafe}\n          className=\"px-4 py-3\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <EditorContext.Provider value={contextValue}>\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"edit\"\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </EditorContext.Provider>\n  );\n}\n\nconst ToolbarWithSeparator = Object.assign(EditorToolbar, {\n  Separator: EditorToolbarSeparator,\n});\n\nexport const Editor = Object.assign(EditorRoot, {\n  Toolbar: ToolbarWithSeparator,\n  Content: EditorContent,\n  SourceToggle: EditorSourceToggle,\n});\n"]}

package/dist/chunk-WHEXTDPV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"names":[],"mappings":";;;;;AAQO,SAAS,MAAA,CAAO,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgB;AAO3D,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,IAAI,CAAC,OAAA,IAAW,OAAO,QAAA,KAAa,aAAa,OAAO,IAAA;AAExD,EAAA,MAAM,MAAA,GAAS,aAAa,QAAA,CAAS,IAAA;AAErC,EAAA,OAAO,YAAA;AAAA,oBACL,GAAA,CAAC,qBAAmB,QAAA,EAAS,CAAA;AAAA,IAC7B;AAAA,GACF;AACF;AAOA,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAS,EAA4B;AAChE,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,OAAO,QAAA,CAAS,eAAA;AACtB,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,IAAI,CAAC,OAAA,EAAS;AAEd,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,MAAM,MAAA,GACJ,KAAK,SAAA,CAAU,QAAA,CAAS,MAAM,CAAA,IAC9B,IAAA,CAAK,YAAA,CAAa,YAAY,CAAA,KAAM,MAAA;AACtC,MAAA,OAAA,CAAQ,SAAA,CAAU,MAAA,CAAO,MAAA,EAAQ,MAAM,CAAA;AAAA,IACzC,CAAA;AAEA,IAAA,IAAA,EAAK;AAEL,IAAA,MAAM,QAAA,GAAW,IAAI,gBAAA,CAAiB,IAAI,CAAA;AAC1C,IAAA,QAAA,CAAS,QAAQ,IAAA,EAAM;AAAA,MACrB,UAAA,EAAY,IAAA;AAAA,MACZ,eAAA,EAAiB,CAAC,OAAA,EAAS,YAAY;AAAA,KACxC,CAAA;AAED,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,yBAAA,EAAwB,EAAA,EAAG,OAAO,EAAE,OAAA,EAAS,UAAA,EAAW,EACpE,QAAA,EACH,CAAA;AAEJ","file":"chunk-WHEXTDPV.js","sourcesContent":["import { createPortal } from \"react-dom\";\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\n\nexport interface PortalProps {\n  children: ReactNode;\n  container?: HTMLElement;\n}\n\nexport function Portal({ children, container }: PortalProps) {\n  // Render nothing on the server AND on the client's first (hydration) render,\n  // then portal after mount. Without the `mounted` gate the client would render\n  // the portal immediately while the server rendered null — a hydration\n  // mismatch (the portal wrapper appears client-only). Deferring to after mount\n  // keeps the first client render identical to the server. SSR-safe for every\n  // Portal consumer (Toast, Modal, Dropdown, Tooltip, Popover, …).\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted || typeof document === \"undefined\") return null;\n\n  const target = container ?? document.body;\n\n  return createPortal(\n    <PortalDarkWrapper>{children}</PortalDarkWrapper>,\n    target,\n  );\n}\n\n/**\n * Wrapper that propagates the `dark` class from <html> into the portal subtree.\n * This ensures Tailwind `dark:` utilities work even though Portal renders\n * outside the React component tree.\n */\nfunction PortalDarkWrapper({ children }: { children: ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    const wrapper = ref.current;\n    if (!wrapper) return;\n\n    const sync = () => {\n      const isDark =\n        root.classList.contains(\"dark\") ||\n        root.getAttribute(\"data-theme\") === \"dark\";\n      wrapper.classList.toggle(\"dark\", isDark);\n    };\n\n    sync();\n\n    const observer = new MutationObserver(sync);\n    observer.observe(root, {\n      attributes: true,\n      attributeFilter: [\"class\", \"data-theme\"],\n    });\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div ref={ref} data-react-fancy-portal=\"\" style={{ display: \"contents\" }}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-XAQQX7J2.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Editor/Editor.context.ts","../src/components/Editor/EditorSourceToggle.tsx","../src/components/Editor/EditorToolbar.tsx","../src/components/Editor/EditorToolbarSeparator.tsx","../src/components/Editor/EditorContent.tsx","../src/components/Editor/Editor.tsx"],"names":["createContext","useContext","jsx","cn","jsxs","Fragment","useRef","useEffect","useMemo","extensionEditorClasses","CodeView","proseClasses","sanitizeHtml","detectFormat","markdownToEditorHtml","marked","useControllableState","useFieldMode","useState","mergeExtensions","useCallback","htmlToMarkdown","ContentRenderer"],"mappings":"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","file":"chunk-XAQQX7J2.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { RenderExtension } from \"../ContentRenderer/extensions\";\n\nexport interface EditorContextValue {\n  contentRef: RefObject<HTMLDivElement | null>;\n  exec: (command: string, arg?: string) => void;\n  insertText: (text: string) => void;\n  wrapSelection: (before: string, after: string) => void;\n  outputFormat: \"html\" | \"markdown\";\n  lineSpacing: number;\n  placeholder?: string;\n  /** Merged render extensions (global + instance). */\n  extensions: RenderExtension[];\n  /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */\n  showSource: boolean;\n  /** Toggle/set the raw-source view. */\n  setShowSource: (showSource: boolean) => void;\n  /** Initial HTML content to load into the editor on mount */\n  _initialHtml: string;\n  /** @internal Called by EditorContent on input events */\n  _onInput: () => void;\n  /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */\n  _sourceValue: string;\n  /** @internal Commit an edit made directly in the source textarea. */\n  _onSourceInput: (value: string) => void;\n}\n\nexport const EditorContext = createContext<EditorContextValue | null>(null);\n\nexport function useEditor(): EditorContextValue {\n  const ctx = useContext(EditorContext);\n  if (!ctx) {\n    throw new Error(\"useEditor must be used within an <Editor> component\");\n  }\n  return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport type { EditorSourceToggleProps } from \"./Editor.types\";\n\n/**\n * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads\n * `showSource` / `setShowSource` from context, so it works in the default\n * toolbar and in any custom toolbar composed with `useEditor()`.\n */\nexport function EditorSourceToggle({\n  className,\n  icon = \"</>\",\n  title = \"Source\",\n  activeTitle = \"Rich text\",\n}: EditorSourceToggleProps) {\n  const { showSource, setShowSource } = useEditor();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setShowSource(!showSource)}\n      title={showSource ? activeTitle : title}\n      aria-pressed={showSource}\n      data-react-fancy-editor-source-toggle=\"\"\n      className={cn(\n        \"inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors\",\n        showSource\n          ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n          : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        className,\n      )}\n    >\n      {icon}\n    </button>\n  );\n}\n\nEditorSourceToggle.displayName = \"EditorSourceToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport type { EditorToolbarProps } from \"./Editor.types\";\n\nconst DEFAULT_ACTIONS = [\n  { icon: \"B\", label: \"Bold\", command: \"bold\" },\n  { icon: \"I\", label: \"Italic\", command: \"italic\" },\n  { icon: \"U\", label: \"Underline\", command: \"underline\" },\n  { icon: \"S\", label: \"Strikethrough\", command: \"strikeThrough\" },\n];\n\nexport function EditorToolbar({\n  actions = DEFAULT_ACTIONS,\n  onAction,\n  children,\n  className,\n  showSourceToggle = true,\n}: EditorToolbarProps) {\n  const { exec, showSource } = useEditor();\n\n  return (\n    <div\n      data-react-fancy-editor-toolbar=\"\"\n      className={cn(\n        \"flex shrink-0 items-center gap-0.5 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children ?? (\n        <>\n          {actions.map((action) => (\n            <button\n              key={`${action.command}-${action.commandArg ?? \"\"}`}\n              type=\"button\"\n              // Rich-text commands don't apply to the raw-source textarea.\n              disabled={showSource}\n              onClick={() => {\n                if (onAction) {\n                  onAction(action.command);\n                } else {\n                  exec(action.command, action.commandArg);\n                }\n              }}\n              title={action.label}\n              className={cn(\n                \"inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors\",\n                action.active\n                  ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n                  : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n                showSource && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n              )}\n            >\n              {action.icon}\n            </button>\n          ))}\n          {showSourceToggle && <EditorSourceToggle className=\"ml-auto\" />}\n        </>\n      )}\n    </div>\n  );\n}\n\nEditorToolbar.displayName = \"EditorToolbar\";\n","export function EditorToolbarSeparator() {\n  return (\n    <span\n      data-react-fancy-editor-toolbar-separator=\"\"\n      className=\"mx-1 h-5 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n    />\n  );\n}\n\nEditorToolbarSeparator.displayName = \"EditorToolbarSeparator\";\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CodeView } from \"../CodeView\";\nimport { useEditor } from \"./Editor.context\";\nimport { proseClasses, extensionEditorClasses } from \"./editor.utils\";\nimport type { EditorContentProps } from \"./Editor.types\";\n\nexport function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps) {\n  const {\n    contentRef,\n    lineSpacing,\n    placeholder,\n    extensions,\n    outputFormat,\n    showSource,\n    _initialHtml,\n    _onInput,\n    _sourceValue,\n    _onSourceInput,\n  } = useEditor();\n  // Tracks which seed HTML is currently in the contentEditable. Seeding on the\n  // seed VALUE (not a one-shot boolean) re-seeds when the source view rewrites\n  // `value`, while still never re-seeding on plain keystrokes — typing leaves\n  // `_initialHtml` untouched, so `seededHtml.current === _initialHtml` holds.\n  const seededHtml = useRef<string | null>(null);\n\n  useEffect(() => {\n    // Source view replaces the contentEditable in the tree, so it unmounts.\n    // Forget what we seeded — the div that returns is a fresh, empty one and\n    // must always be re-seeded, even if `value` was left untouched.\n    if (showSource) {\n      seededHtml.current = null;\n      return;\n    }\n    const el = contentRef.current;\n    if (el && seededHtml.current !== _initialHtml) {\n      el.innerHTML = _initialHtml;\n      seededHtml.current = _initialHtml;\n    }\n  }, [contentRef, _initialHtml, showSource]);\n\n  const extClasses = useMemo(\n    () => extensionEditorClasses(extensions),\n    [extensions],\n  );\n\n  if (showSource) {\n    // Raw-source view — a syntax-highlighted code surface (HTML highlighted;\n    // markdown/plain un-highlighted), built on the shared fancy-file-commons\n    // primitives. It's a DIRECT child of the flex-column editor root (no\n    // wrapper — a nested flex box collapses the fill), so `flex-auto` makes it\n    // fill the editor body when height-constrained and grow with content\n    // (≥ minHeight) when not. `maxHeight` caps + scrolls.\n    return (\n      <CodeView\n        value={_sourceValue}\n        onChange={_onSourceInput}\n        language={outputFormat === \"html\" ? \"html\" : \"plaintext\"}\n        placeholder={placeholder}\n        maxHeight={maxHeight}\n        className={cn(\"min-h-0 flex-auto\", sourceClassName)}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={contentRef}\n      contentEditable\n      suppressContentEditableWarning\n      data-react-fancy-editor-content=\"\"\n      data-placeholder={placeholder}\n      onInput={_onInput}\n      style={{\n        lineHeight: lineSpacing,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n      }}\n      className={cn(\n        \"min-h-[120px] flex-auto overflow-y-auto px-4 py-3 text-sm outline-none\",\n        \"focus:outline-none\",\n        proseClasses,\n        extClasses,\n        \"empty:before:content-[attr(data-placeholder)] empty:before:text-zinc-400 empty:before:pointer-events-none\",\n        className,\n      )}\n    />\n  );\n}\n\nEditorContent.displayName = \"EditorContent\";\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { marked } from \"marked\";\nimport { cn } from \"../../utils/cn\";\nimport { sanitizeHtml } from \"../../utils/sanitize\";\nimport { useControllableState } from \"../../hooks\";\nimport { EditorContext } from \"./Editor.context\";\nimport { EditorToolbar } from \"./EditorToolbar\";\nimport { EditorToolbarSeparator } from \"./EditorToolbarSeparator\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport { EditorContent } from \"./EditorContent\";\nimport { htmlToMarkdown, detectFormat, markdownToEditorHtml, type MarkdownSource } from \"./editor.utils\";\nimport { mergeExtensions } from \"../ContentRenderer/extensions\";\nimport { ContentRenderer } from \"../ContentRenderer/ContentRenderer\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport type { EditorProps } from \"./Editor.types\";\n\ninterface Seed {\n  html: string;\n  /** Source map for source-preserving markdown output; null when there is none. */\n  source: MarkdownSource | null;\n}\n\nfunction toHtml(\n  value: string,\n  outputFormat: \"html\" | \"markdown\",\n  unsafe: boolean,\n  valueFormat: \"markdown\" | \"html\" | \"auto\" = \"auto\",\n): Seed {\n  if (!value) return { html: \"\", source: null };\n  const sanitize = (html: string) => (unsafe ? html : sanitizeHtml(html));\n  // An explicit valueFormat is authoritative — the sniff misclassifies\n  // markdown that merely MENTIONS HTML-ish snippets (`<code>`, `<table`),\n  // collapsing it into an innerHTML wall of text (#10).\n  const format =\n    valueFormat !== \"auto\"\n      ? valueFormat\n      : outputFormat === \"html\"\n        ? \"html\"\n        : detectFormat(value);\n  if (format === \"html\") return { html: sanitize(value), source: null };\n  // Markdown in, markdown out: tag each block with its source so untouched\n  // blocks are emitted byte-identical.\n  if (outputFormat === \"markdown\") return markdownToEditorHtml(value, sanitize);\n  return { html: sanitize((marked.parse(value, { async: false }) as string).trim()), source: null };\n}\n\nfunction EditorRoot({\n  children,\n  className,\n  value: controlledValue,\n  defaultValue = \"\",\n  onChange,\n  outputFormat = \"html\",\n  valueFormat = \"auto\",\n  lineSpacing = 1.6,\n  placeholder,\n  mode: modeProp,\n  extensions: instanceExtensions,\n  unsafe = false,\n  showSource: showSourceProp,\n  defaultShowSource = false,\n  onShowSourceChange,\n}: EditorProps) {\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);\n  const [showSource, setShowSource] = useControllableState(\n    showSourceProp,\n    defaultShowSource,\n    onShowSourceChange,\n  );\n  // View/edit mode — same resolution as the inputs: prop → <Form> context → \"edit\".\n  const mode = useFieldMode(modeProp);\n  const isView = mode === \"view\";\n\n  // The value this editor last emitted through `onChange`. An incoming `value`\n  // equal to it is our own keystroke echoing back; anything else came from\n  // OUTSIDE — an async load, a host reset, a form repopulating.\n  const lastEmitted = useRef<string | null>(null);\n\n  // Bumped only on an external `value` change, so the seed memo below recomputes\n  // for those and stays put while the user types. Without this, `value` was\n  // excluded from the deps to avoid re-seeding on keystrokes, which also meant a\n  // value arriving after mount was silently dropped and the editor stayed blank\n  // forever (#15).\n  const [externalSeed, setExternalSeed] = useState(0);\n  useEffect(() => {\n    if (value !== lastEmitted.current) setExternalSeed((n) => n + 1);\n  }, [value]);\n\n  const seed = useMemo(\n    () => toHtml(value, outputFormat, unsafe, valueFormat),\n    // Seed the contentEditable from the LIVE value when (re)entering edit mode —\n    // and when returning from the raw-source view, which may have rewritten the\n    // value out from under the rich-text surface. `value` itself stays out of\n    // the deps so typing never re-seeds (which would fight the caret);\n    // `externalSeed` covers the externally-driven case instead.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isView, outputFormat, unsafe, valueFormat, showSource, externalSeed],\n  );\n  const initialHtml = seed.html;\n  const seedSource = seed.source;\n\n  const extensions = useMemo(\n    () => mergeExtensions(instanceExtensions),\n    [instanceExtensions],\n  );\n\n  const getOutputValue = useCallback(\n    (html: string): string => {\n      return outputFormat === \"markdown\" ? htmlToMarkdown(html, seedSource) : html;\n    },\n    [outputFormat, seedSource],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = contentRef.current;\n    if (!el) return;\n    const next = getOutputValue(el.innerHTML);\n    // Record what we emitted BEFORE publishing it, so the value coming back in\n    // is recognised as our own and does not trigger a re-seed mid-keystroke.\n    lastEmitted.current = next;\n    setValue(next);\n  }, [setValue, getOutputValue]);\n\n  const exec = useCallback(\n    (command: string, arg?: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(command, false, arg);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const insertText = useCallback(\n    (text: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, text);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  // The source textarea edits `value` directly — it is already the canonical\n  // source in `outputFormat` (html or markdown), so no conversion round-trip.\n  const handleSourceInput = useCallback(\n    (next: string) => {\n      // Also an internal emission — record it so typing in the source view is\n      // not mistaken for an external change on every keystroke.\n      lastEmitted.current = next;\n      setValue(next);\n    },\n    [setValue],\n  );\n\n  const wrapSelection = useCallback(\n    (before: string, after: string) => {\n      const sel = window.getSelection();\n      if (!sel || sel.rangeCount === 0) return;\n      const range = sel.getRangeAt(0);\n      const selectedText = range.toString();\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, `${before}${selectedText}${after}`);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const contextValue = {\n    contentRef,\n    exec,\n    insertText,\n    wrapSelection,\n    outputFormat,\n    lineSpacing,\n    placeholder,\n    extensions,\n    showSource,\n    setShowSource,\n    _initialHtml: initialHtml,\n    _onInput: handleInput,\n    _sourceValue: value,\n    _onSourceInput: handleSourceInput,\n  };\n\n  // View mode — render the value read-only through ContentRenderer, matching the\n  // editor's own format (markdown/html), instead of the editable toolbar+content\n  // tree. Driven by `mode` / a `<Form mode=\"view\">`, exactly like the inputs.\n  if (isView) {\n    return (\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"view\"\n        className={cn(\n          \"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        <ContentRenderer\n          value={value}\n          format={valueFormat !== \"auto\" ? valueFormat : outputFormat}\n          lineSpacing={lineSpacing}\n          extensions={instanceExtensions}\n          unsafe={unsafe}\n          className=\"px-4 py-3\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <EditorContext.Provider value={contextValue}>\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"edit\"\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </EditorContext.Provider>\n  );\n}\n\nconst ToolbarWithSeparator = Object.assign(EditorToolbar, {\n  Separator: EditorToolbarSeparator,\n});\n\nexport const Editor = Object.assign(EditorRoot, {\n  Toolbar: ToolbarWithSeparator,\n  Content: EditorContent,\n  SourceToggle: EditorSourceToggle,\n});\n"]}