@charcuterie/ui 3.13.0 → 3.14.0

package/dist/markdownEditorCodeMirror/MarkdownView.d.ts

@@ -0,0 +1,140 @@
+import type { ReactNode } from "react";
+import type { SlotProps } from "../slotProps.ts";
+export type MarkdownViewProps = SlotProps & {
+    className?: string;
+    /**
+     * The accessible name of the region, as `aria-label`.
+     *
+     * Worth passing on anything that is not the only thing on the
+     * page. A read view is announced as an article, and "article" with
+     * no name tells a reader stepping through the page nothing about
+     * which article it is.
+     */
+    label?: string;
+    /**
+     * Called when the reader ticks a `- [ ]` box, with the **whole**
+     * next markdown document — the same shape the editors' `onChange`
+     * hands back, so the same autosave wires to both.
+     *
+     * **Passing it is what makes the checkboxes operable at all.**
+     * Leave it out and they render disabled: the state is still on
+     * screen, and nothing pretends the reader can change it. That is
+     * deliberate rather than defensive. Two of the three surfaces this
+     * component was built for — a rendered comment, and a repo file
+     * fetched at a commit hash — have nowhere to put a tick, and a
+     * checkbox that visibly toggles and then loses the change on
+     * reload is worse than one that says up front it cannot.
+     *
+     * The view still applies the tick to its own document
+     * immediately, so the box responds under the pointer. If the
+     * consumer rejects the change, the next `value` it passes puts it
+     * back.
+     */
+    onToggleTask?: (nextValue: string) => void;
+    /**
+     * The markdown to render, and **controlled** — unlike either
+     * editor.
+     *
+     * The editors take `defaultValue` because reassigning their
+     * document from outside would throw away the undo history that
+     * belonged to it, which is a real cost and is why they ask for a
+     * `key` instead. A view has no undo history and no caret to
+     * protect, so it has nothing to lose by simply rendering what it
+     * is given: fetch a file at a different commit hash, pass the new
+     * string, and the page changes. No remount, no `key`, no stale
+     * document above a new title.
+     */
+    value: string;
+};
+/**
+ * Rendered markdown, with no toolbar and nothing to type into.
+ *
+ * ## Why this is a component and not `isReadOnly` on the editors
+ *
+ * Both editors already have `isReadOnly`, and it means *an editor
+ * you cannot type in*: the nine formatting buttons are still in the
+ * DOM, still queryable, still in the accessibility tree, drawn in
+ * their disabled colours above a document nobody is editing. That is
+ * the right shape for a form field that is temporarily locked. It is
+ * the wrong shape for reading a file, and a `hasToolbar={false}`
+ * prop would not fix it — the type would still carry
+ * `onUploadImage`, `icons`, `placeholder` and `rawModeLabel`, none
+ * of which mean anything to a reader, and "no toolbar" would be a
+ * branch that could be got wrong rather than a thing that does not
+ * exist.
+ *
+ * So this is its own component, the way `Listbox`, `Combobox` and
+ * `Picker` are their own components rather than three modes of one.
+ * The props are the four a reader needs, and there is no code path
+ * in this file that could render a toolbar.
+ *
+ * ## Why it is in the CodeMirror subpath
+ *
+ * Because the requirement is that it renders **the same** as the
+ * editor a consumer edits the same document in — and the only way
+ * to guarantee that is to be the same code, not to be a second
+ * implementation that agrees today.
+ *
+ * A `react-markdown` reader in the main barrel was the obvious
+ * alternative and is the one that goes wrong slowly: two parsers,
+ * two table implementations, two answers to what a bare URL does,
+ * and a bug report six months later that says "the table changed
+ * when I saved it". This shares `livePreviewRanges.ts` — the 1,200
+ * lines that decide what a document *looks* like — with
+ * `MarkdownEditorCodeMirror`, and the theme with it too. There is no
+ * second renderer to keep in step.
+ *
+ * The cost is that it lives behind the same optional peers, so a
+ * consumer who wants only the reader still installs CodeMirror. That
+ * is the honest trade and it is the right way round: an app that
+ * renders markdown in three places and edits it in one should pay
+ * once.
+ *
+ * ## What differs from the editor, and why each one differs
+ *
+ * | | editor | this |
+ * | --- | --- | --- |
+ * | Toolbar | nine buttons | **none in the DOM** |
+ * | Value | `defaultValue`, uncontrolled | `value`, **controlled** |
+ * | Content role | `textbox` | **`article`** |
+ * | Headings | scaled text | scaled **and `role="heading"`** |
+ * | Links | painted span, opened by a handler | **real `<a href>`** |
+ * | Markers | revealed by the caret | never revealed |
+ * | Task boxes | always operable | **inert unless `onToggleTask`** |
+ *
+ * Every one of those follows from there being no caret. The editor
+ * paints a span instead of an anchor because an `<a href>` inside a
+ * `contenteditable` competes with the caret for the line; a document
+ * has no caret, so the link is simply a link — tabbable, activated
+ * by Enter, and copyable from the context menu. The editor reveals
+ * markup when the selection touches it because you cannot edit a URL
+ * you cannot see; there is nothing here to edit.
+ *
+ * ## Hostile markdown
+ *
+ * This renders files fetched from a git host, so the document is
+ * untrusted by default, and the answer is mostly structural rather
+ * than a sanitiser:
+ *
+ *  - **Raw HTML in the source is never parsed as HTML.** There is no
+ *    `innerHTML` in this subpath, no `dangerouslySetInnerHTML`, and
+ *    no sanitiser to have a bug in. CodeMirror's state holds the
+ *    source as *text*, and every rendered node is `createElement`
+ *    plus `textContent`. A `<script>` in a fetched README is drawn
+ *    as the characters `<script>`. `MarkdownView.test.tsx` asserts
+ *    it against the tag most likely to be tried.
+ *  - **A URL is checked before it is used as one**, because that was
+ *    the one place the document reached the platform:
+ *    `[click](javascript:…)` used to paint as a link and run. Both
+ *    components now go through `safeUrls.ts`, which allowlists
+ *    schemes the way a browser reads them.
+ *  - **The reader is not a beacon.** Remote images carry
+ *    `referrerpolicy="no-referrer"`, so a fetched image cannot learn
+ *    which page loaded it.
+ *
+ * What is *not* claimed: this does not stop a document from linking
+ * somewhere unpleasant, and it does not fetch anything on the
+ * reader's behalf beyond the images the markdown names.
+ */
+export declare const MarkdownView: ({ className, label, onToggleTask, value, ...receivedSlotProps }: MarkdownViewProps) => ReactNode;
+//# sourceMappingURL=MarkdownView.d.ts.map

package/dist/markdownEditorCodeMirror/MarkdownView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownView.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/MarkdownView.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAOhD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;;;;;;;;;OAkBG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,YAAY,GAAI,iEAM1B,iBAAiB,KAAG,SAsMtB,CAAA"}

package/dist/markdownEditorCodeMirror/MarkdownView.js

@@ -0,0 +1,268 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { markdown, markdownLanguage, } from "@codemirror/lang-markdown";
+import { Annotation, Compartment, EditorState, } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { livePreview, livePreviewOptions, } from "./livePreview.js";
+/**
+ * Tells the update listener that a document change came from a new
+ * `value`, not from a reader.
+ *
+ * Without it, syncing the prop into the document fires
+ * `onToggleTask` with the string the consumer just passed in — a
+ * loop that looks like an autosave storm and is really an echo.
+ */
+const isValueSync = Annotation.define();
+/**
+ * Rendered markdown, with no toolbar and nothing to type into.
+ *
+ * ## Why this is a component and not `isReadOnly` on the editors
+ *
+ * Both editors already have `isReadOnly`, and it means *an editor
+ * you cannot type in*: the nine formatting buttons are still in the
+ * DOM, still queryable, still in the accessibility tree, drawn in
+ * their disabled colours above a document nobody is editing. That is
+ * the right shape for a form field that is temporarily locked. It is
+ * the wrong shape for reading a file, and a `hasToolbar={false}`
+ * prop would not fix it — the type would still carry
+ * `onUploadImage`, `icons`, `placeholder` and `rawModeLabel`, none
+ * of which mean anything to a reader, and "no toolbar" would be a
+ * branch that could be got wrong rather than a thing that does not
+ * exist.
+ *
+ * So this is its own component, the way `Listbox`, `Combobox` and
+ * `Picker` are their own components rather than three modes of one.
+ * The props are the four a reader needs, and there is no code path
+ * in this file that could render a toolbar.
+ *
+ * ## Why it is in the CodeMirror subpath
+ *
+ * Because the requirement is that it renders **the same** as the
+ * editor a consumer edits the same document in — and the only way
+ * to guarantee that is to be the same code, not to be a second
+ * implementation that agrees today.
+ *
+ * A `react-markdown` reader in the main barrel was the obvious
+ * alternative and is the one that goes wrong slowly: two parsers,
+ * two table implementations, two answers to what a bare URL does,
+ * and a bug report six months later that says "the table changed
+ * when I saved it". This shares `livePreviewRanges.ts` — the 1,200
+ * lines that decide what a document *looks* like — with
+ * `MarkdownEditorCodeMirror`, and the theme with it too. There is no
+ * second renderer to keep in step.
+ *
+ * The cost is that it lives behind the same optional peers, so a
+ * consumer who wants only the reader still installs CodeMirror. That
+ * is the honest trade and it is the right way round: an app that
+ * renders markdown in three places and edits it in one should pay
+ * once.
+ *
+ * ## What differs from the editor, and why each one differs
+ *
+ * | | editor | this |
+ * | --- | --- | --- |
+ * | Toolbar | nine buttons | **none in the DOM** |
+ * | Value | `defaultValue`, uncontrolled | `value`, **controlled** |
+ * | Content role | `textbox` | **`article`** |
+ * | Headings | scaled text | scaled **and `role="heading"`** |
+ * | Links | painted span, opened by a handler | **real `<a href>`** |
+ * | Markers | revealed by the caret | never revealed |
+ * | Task boxes | always operable | **inert unless `onToggleTask`** |
+ *
+ * Every one of those follows from there being no caret. The editor
+ * paints a span instead of an anchor because an `<a href>` inside a
+ * `contenteditable` competes with the caret for the line; a document
+ * has no caret, so the link is simply a link — tabbable, activated
+ * by Enter, and copyable from the context menu. The editor reveals
+ * markup when the selection touches it because you cannot edit a URL
+ * you cannot see; there is nothing here to edit.
+ *
+ * ## Hostile markdown
+ *
+ * This renders files fetched from a git host, so the document is
+ * untrusted by default, and the answer is mostly structural rather
+ * than a sanitiser:
+ *
+ *  - **Raw HTML in the source is never parsed as HTML.** There is no
+ *    `innerHTML` in this subpath, no `dangerouslySetInnerHTML`, and
+ *    no sanitiser to have a bug in. CodeMirror's state holds the
+ *    source as *text*, and every rendered node is `createElement`
+ *    plus `textContent`. A `<script>` in a fetched README is drawn
+ *    as the characters `<script>`. `MarkdownView.test.tsx` asserts
+ *    it against the tag most likely to be tried.
+ *  - **A URL is checked before it is used as one**, because that was
+ *    the one place the document reached the platform:
+ *    `[click](javascript:…)` used to paint as a link and run. Both
+ *    components now go through `safeUrls.ts`, which allowlists
+ *    schemes the way a browser reads them.
+ *  - **The reader is not a beacon.** Remote images carry
+ *    `referrerpolicy="no-referrer"`, so a fetched image cannot learn
+ *    which page loaded it.
+ *
+ * What is *not* claimed: this does not stop a document from linking
+ * somewhere unpleasant, and it does not fetch anything on the
+ * reader's behalf beyond the images the markdown names.
+ */
+export const MarkdownView = ({ className, label, onToggleTask, value, ...receivedSlotProps }) => {
+    const baseId = useUniqueId();
+    const hostRef = useRef(null);
+    const viewRef = useRef(null);
+    const optionsRef = useRef(new Compartment());
+    /**
+     * The handler reaches the view through a ref, never a closure.
+     *
+     * The `EditorView` is built once — rebuilding it on a new callback
+     * identity would drop the scroll position mid-read — so its
+     * extensions capture *this* object and the render loop keeps the
+     * object current.
+     */
+    const handlerRef = useRef(onToggleTask);
+    handlerRef.current = onToggleTask;
+    /**
+     * Frozen at mount, and named so rather than read from the render
+     * closure, because the build-once effect below is honestly
+     * dependency-free rather than lint-suppressed.
+     */
+    const mountRef = useRef({
+        ariaDescribedBy: receivedSlotProps["aria-describedby"],
+        id: receivedSlotProps.id ?? baseId,
+        label,
+        value,
+    });
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host) {
+            return;
+        }
+        const view = new EditorView({
+            parent: host,
+            state: EditorState.create({
+                doc: mountRef.current.value,
+                extensions: [
+                    // GFM, not strict CommonMark — the same argument as the
+                    // editor's: it is what autolinks a bare URL, renders a
+                    // task list, and parses a table. A reader that disagreed
+                    // with the editor about any of those would be the bug this
+                    // component exists to avoid.
+                    markdown({ base: markdownLanguage }),
+                    EditorView.lineWrapping,
+                    livePreview({ hasDocumentSemantics: true }),
+                    /**
+                     * The one answer that can change after mount, and only
+                     * that answer.
+                     *
+                     * A `Compartment` holding the whole `livePreview()` would
+                     * reconfigure the `StateField`s inside it — raw mode,
+                     * focus, the table pass — which means destroying and
+                     * recreating them to change a boolean about checkboxes.
+                     * Compartmenting the facet alone reconfigures one value.
+                     */
+                    optionsRef.current.of(livePreviewOptions.of({
+                        isTaskListInteractive: Boolean(handlerRef.current),
+                    })),
+                    /**
+                     * `editable`, and deliberately **not**
+                     * `EditorState.readOnly`.
+                     *
+                     * `editable` is the DOM half: it writes
+                     * `contenteditable="false"`, which is what stops typing,
+                     * pasting, dropping and IME, and what keeps the content
+                     * out of the tab order. It is the whole of what this
+                     * surface needs, because no keymap and no input handler is
+                     * installed for `readOnly` to guard against.
+                     *
+                     * `readOnly` also makes CodeMirror write
+                     * `aria-readonly="true"` onto the content element, and
+                     * there is no way to unset an attribute it decides to
+                     * write. On `role="article"` that attribute is one ARIA
+                     * does not define, which axe reports and which is a fair
+                     * report: "read-only" is a statement about a *field*, and
+                     * this is not one. Nothing is lost by leaving it off, so it
+                     * is left off rather than papered over.
+                     */
+                    EditorView.editable.of(false),
+                    EditorView.contentAttributes.of({
+                        /**
+                         * `article`, not the `textbox` CodeMirror writes.
+                         *
+                         * This is the difference between reading a document and
+                         * being trapped in a text field. A screen reader entering
+                         * `role="textbox"` switches to forms mode and reads the
+                         * contents as one flat string — no heading navigation, no
+                         * table navigation, no list structure — which for an
+                         * editor is exactly right and for a reader deletes every
+                         * affordance the markup was rendered for.
+                         */
+                        role: "article",
+                        /**
+                         * CodeMirror writes `aria-multiline="true"` into the
+                         * content element's attributes, and there is no way to
+                         * unset one: its `updateAttrs` calls `setAttribute` with
+                         * whatever it is handed, so `undefined` would arrive as
+                         * the string "undefined".
+                         *
+                         * `false` is both the true answer — this is not a
+                         * multiline textbox, because it is not a textbox — and
+                         * the value axe explicitly ignores on an element carrying
+                         * `contenteditable`. An attribute ARIA does not define
+                         * for `article` is inert either way; this way the gate
+                         * agrees.
+                         */
+                        "aria-multiline": "false",
+                        ...(mountRef.current.label
+                            ? { "aria-label": mountRef.current.label }
+                            : {}),
+                        ...(mountRef.current.ariaDescribedBy
+                            ? {
+                                "aria-describedby": mountRef.current.ariaDescribedBy,
+                            }
+                            : {}),
+                        id: mountRef.current.id,
+                    }),
+                    EditorView.updateListener.of((update) => {
+                        if (!update.docChanged ||
+                            update.transactions.some((transaction) => transaction.annotation(isValueSync))) {
+                            return;
+                        }
+                        // The only change a reader can make is a checkbox, so
+                        // this is that checkbox and nothing else.
+                        handlerRef.current?.(update.state.doc.toString());
+                    }),
+                ],
+            }),
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view || view.state.doc.toString() === value) {
+            return;
+        }
+        view.dispatch({
+            annotations: isValueSync.of(true),
+            changes: {
+                from: 0,
+                insert: value,
+                to: view.state.doc.length,
+            },
+        });
+    }, [value]);
+    // Through a compartment rather than a rebuild, so a consumer that
+    // turns ticking on and off — a task that becomes editable — keeps
+    // its scroll position.
+    useEffect(() => {
+        viewRef.current?.dispatch({
+            effects: optionsRef.current.reconfigure(livePreviewOptions.of({
+                isTaskListInteractive: Boolean(onToggleTask),
+            })),
+        });
+    }, [onToggleTask]);
+    return (_jsx("div", { className: toClassName("text-content-primary text-md", className), ref: hostRef }));
+};
+//# sourceMappingURL=MarkdownView.js.map

package/dist/markdownEditorCodeMirror/MarkdownView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownView.js","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/MarkdownView.tsx"],"names":[],"mappings":"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"}

package/dist/markdownEditorCodeMirror/index.d.ts

@@ -1,6 +1,13 @@
 /**
- * `@charcuterie/ui/markdown-editor-codemirror` — the opt-in live
- * preview surface.
+ * `@charcuterie/ui/markdown-editor-codemirror` — the opt-in
+ * CodeMirror markdown surface: the live-preview **editor**, and the
+ * read-only **view** that renders the same document the same way.
+ *
+ * Both are here rather than in two subpaths because there is one
+ * dependency, not two. A consumer who wants only `MarkdownView`
+ * still installs CodeMirror; splitting the entry point would suggest
+ * otherwise and would give the shared `livePreview` module two ways
+ * into the bundle.
  *
  * Its own entry point, and every CodeMirror package it needs is an
  * **optional** peer, so a consumer that never imports this subpath
@@ -8,9 +15,13 @@
  * `@charcuterie/ui/react-router`, and the same reason: the capacity
  * is worth having and is not worth charging everybody for.
  */
-export { livePreview, livePreviewRawModeField, setLivePreviewRawMode, } from "./livePreview.ts";
+export type { LivePreviewOptions } from "./livePreview.ts";
+export { livePreview, livePreviewOptions, livePreviewRawModeField, setLivePreviewRawMode, } from "./livePreview.ts";
 export type { LivePreviewLineKind, LivePreviewMarkKind, LivePreviewRange, LivePreviewSelection, ToLivePreviewRangesOptions, } from "./livePreviewRanges.ts";
 export { toLivePreviewRanges } from "./livePreviewRanges.ts";
 export type { MarkdownEditorCodeMirrorProps } from "./MarkdownEditorCodeMirror.tsx";
 export { MarkdownEditorCodeMirror } from "./MarkdownEditorCodeMirror.tsx";
+export type { MarkdownViewProps } from "./MarkdownView.tsx";
+export { MarkdownView } from "./MarkdownView.tsx";
+export { toSafeImageUrl, toSafeLinkUrl, } from "./safeUrls.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/markdownEditorCodeMirror/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,YAAY,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EACV,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,0BAA0B,GAC3B,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,YAAY,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACzE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EACL,cAAc,EACd,aAAa,GACd,MAAM,eAAe,CAAA"}

package/dist/markdownEditorCodeMirror/index.js

@@ -1,6 +1,13 @@
 /**
- * `@charcuterie/ui/markdown-editor-codemirror` — the opt-in live
- * preview surface.
+ * `@charcuterie/ui/markdown-editor-codemirror` — the opt-in
+ * CodeMirror markdown surface: the live-preview **editor**, and the
+ * read-only **view** that renders the same document the same way.
+ *
+ * Both are here rather than in two subpaths because there is one
+ * dependency, not two. A consumer who wants only `MarkdownView`
+ * still installs CodeMirror; splitting the entry point would suggest
+ * otherwise and would give the shared `livePreview` module two ways
+ * into the bundle.
  *
  * Its own entry point, and every CodeMirror package it needs is an
  * **optional** peer, so a consumer that never imports this subpath
@@ -8,7 +15,9 @@
  * `@charcuterie/ui/react-router`, and the same reason: the capacity
  * is worth having and is not worth charging everybody for.
  */
-export { livePreview, livePreviewRawModeField, setLivePreviewRawMode, } from "./livePreview.js";
+export { livePreview, livePreviewOptions, livePreviewRawModeField, setLivePreviewRawMode, } from "./livePreview.js";
 export { toLivePreviewRanges } from "./livePreviewRanges.js";
 export { MarkdownEditorCodeMirror } from "./MarkdownEditorCodeMirror.js";
+export { MarkdownView } from "./MarkdownView.js";
+export { toSafeImageUrl, toSafeLinkUrl, } from "./safeUrls.js";
 //# sourceMappingURL=index.js.map

package/dist/markdownEditorCodeMirror/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAA;AAQzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAAgC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,kBAAkB,CAAA;AAQzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAAgC,CAAA;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAA;AACjD,OAAO,EACL,cAAc,EACd,aAAa,GACd,MAAM,eAAe,CAAA"}

package/dist/markdownEditorCodeMirror/livePreview.d.ts

@@ -25,7 +25,47 @@
  * that resolves to nothing paints nothing, silently.
  */
 import type { Extension } from "@codemirror/state";
-import { StateField } from "@codemirror/state";
+import { Facet, StateField } from "@codemirror/state";
+/**
+ * What kind of surface this is, and what its checkboxes may do.
+ *
+ * A facet rather than closure state, for the same reason raw mode is
+ * a `StateField`: the decoration builders below are module-level
+ * singletons — one `ViewPlugin`, one `StateField` — and rebuilding
+ * them per instance would mean a second copy of the whole live
+ * preview for every surface on the page. They read the answer out of
+ * the state they were already handed.
+ *
+ * It is also what lets `MarkdownView` put the task flag in a
+ * `Compartment` and flip it without discarding the view, exactly as
+ * the editors already flip editability.
+ */
+export type LivePreviewOptions = {
+    /**
+     * Draw a **document** rather than an editing surface: real
+     * anchors, heading roles, and a table that is a table instead of a
+     * way back into the markdown behind it.
+     *
+     * Off by default, because the editors are the surface this module
+     * was written for and every one of these would be wrong inside a
+     * `contenteditable`.
+     */
+    hasDocumentSemantics?: boolean;
+    /** Whether a `- [ ]` checkbox can be ticked. Defaults to `true`. */
+    isTaskListInteractive?: boolean;
+};
+/**
+ * The facet itself is exported so a consumer can put **only this**
+ * in a `Compartment` and flip one answer without reconfiguring the
+ * whole extension — which would tear down and recreate the
+ * `StateField`s beside it.
+ *
+ * A later input wins per key, and a key nobody stated keeps the
+ * default. That is a merge rather than "the last one wins outright",
+ * so an override that only cares about checkboxes cannot silently
+ * turn document semantics back off.
+ */
+export declare const livePreviewOptions: Facet<LivePreviewOptions, Required<LivePreviewOptions>>;
 /** Toggle the "edit Markdown" mode. */
 export declare const setLivePreviewRawMode: import("@codemirror/state").StateEffectType<boolean>;
 /**
@@ -36,5 +76,5 @@ export declare const setLivePreviewRawMode: import("@codemirror/state").StateEff
  * without a round trip through React.
  */
 export declare const livePreviewRawModeField: StateField<boolean>;
-export declare const livePreview: () => Extension;
+export declare const livePreview: (options?: LivePreviewOptions) => Extension;
 //# sourceMappingURL=livePreview.d.ts.map

package/dist/markdownEditorCodeMirror/livePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"livePreview.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/livePreview.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,KAAK,EAEV,SAAS,EAEV,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAGL,UAAU,EACX,MAAM,mBAAmB,CAAA;AAyC1B,uCAAuC;AACvC,eAAO,MAAM,qBAAqB,sDACH,CAAA;AAE/B;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,qBAchC,CAAA;AAg3BJ,eAAO,MAAM,WAAW,QAAO,SAa9B,CAAA"}
+{"version":3,"file":"livePreview.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/livePreview.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,KAAK,EAEV,SAAS,EAEV,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,KAAK,EAGL,UAAU,EACX,MAAM,mBAAmB,CAAA;AAyC1B;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,yDAmB7B,CAAA;AAOF,uCAAuC;AACvC,eAAO,MAAM,qBAAqB,sDACH,CAAA;AAE/B;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,qBAchC,CAAA;AAmkCJ,eAAO,MAAM,WAAW,GACtB,UAAS,kBAAuB,KAC/B,SA6BF,CAAA"}