@canvist/vue 0.0.0 → 0.2.0

package/dist/mod.d.ts

@@ -0,0 +1,582 @@
+/**
+ * Vue bindings for the canvist canvas editor.
+ *
+ * `CanvistEditor` renders an editor; `useCanvistEditor` gives you the
+ * editor itself, and `useEditorState` keeps a ref in step with something
+ * read from the editor. Commands, queries, and plugin APIs are typed from
+ * the extensions and plugins you pass, as in `@canvist/web`. `BubbleMenu`
+ * and `FloatingMenu` keep their slot next to the selection.
+ *
+ * ```ts
+ * const { element, editor } = useCanvistEditor({
+ * 	content: { format: "markdown", input: "Hello **world**" },
+ * });
+ * const bold = useEditorState(editor, (current) => current.can.toggleBold(), false);
+ * // <button :disabled="!bold" @click="editor?.commands.toggleBold()">Bold</button>
+ * // <div ref="element" />
+ * ```
+ *
+ * @module
+ */
+import { type Editor, type EditorOptions, type Extensions, type Plugins, type StarterKit } from "@canvist/web";
+import { type MenuOptions } from "@canvist/web/menus";
+import { type Ref, type ShallowRef } from "vue";
+/** What {@link useCanvistEditor} returns. */
+export interface CanvistEditorHandle<E extends Extensions, P extends Plugins> {
+    /** Bind as the template ref of the element the editor renders into. */
+    readonly element: ShallowRef<HTMLElement | null>;
+    /** The editor, once it has loaded; `null` before that and after unmounting. */
+    readonly editor: ShallowRef<Editor<E, P> | null>;
+}
+/**
+ * Create an editor in `element` when the component mounts, and destroy it
+ * when it unmounts. `options` are read when the editor is created.
+ */
+export declare function useCanvistEditor<const E extends Extensions = StarterKit, const P extends Plugins = []>(options?: EditorOptions<E, P>): CanvistEditorHandle<E, P>;
+/**
+ * A ref holding `select(editor)`, updated after every edit or selection
+ * change. Until the editor exists, it holds `fallback`.
+ */
+export declare function useEditorState<E extends Extensions, P extends Plugins, T>(editor: Readonly<Ref<Editor<E, P> | null>>, select: (editor: Editor<E, P>) => T, fallback: T): Readonly<ShallowRef<T>>;
+/**
+ * Props for {@link CanvistEditor}: the editor's options, read once except
+ * `editable` and `placeholder`, which follow the props.
+ */
+export interface CanvistEditorProps<E extends Extensions, P extends Plugins> extends EditorOptions<E, P> {
+    /**
+     * Server-rendered HTML (`.cv-doc` markup from canvist's renderer) to
+     * show until the editor takes over. The editor reads the document from
+     * it when `content` is not given.
+     */
+    readonly html?: string;
+}
+/**
+ * A canvist editor. Give it a width; without a height it grows with its
+ * document. It emits `ready` once the editor has loaded and `update`
+ * after every change, each with the editor.
+ */
+export declare const CanvistEditor: new <const E extends Extensions = readonly [{
+    readonly commands: readonly [];
+    readonly name: "trailingNode";
+    readonly nodes: readonly [];
+    readonly queries: readonly [];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [{
+            readonly name: "level";
+            readonly type: {
+                readonly max: 6;
+                readonly min: 1;
+                readonly type: "int";
+            };
+        }];
+        readonly name: "toggleHeading";
+    }, {
+        readonly args: readonly [{
+            readonly name: "level";
+            readonly type: {
+                readonly max: 6;
+                readonly min: 1;
+                readonly type: "int";
+            };
+        }];
+        readonly name: "setHeading";
+    }];
+    readonly name: "heading";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [{
+            readonly default: 1;
+            readonly name: "level";
+            readonly type: {
+                readonly max: 6;
+                readonly min: 1;
+                readonly type: "int";
+            };
+        }];
+        readonly kind: "block";
+        readonly name: "heading";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "headingLevel";
+        readonly returns: {
+            readonly of: {
+                readonly max: 6;
+                readonly min: 1;
+                readonly type: "int";
+            };
+            readonly type: "nullable";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleBlockquote";
+    }];
+    readonly name: "blockquote";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "block";
+        readonly name: "blockquote";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isBlockquote";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [{
+            readonly default: null;
+            readonly name: "language";
+            readonly type: {
+                readonly of: {
+                    readonly type: "string";
+                };
+                readonly type: "nullable";
+            };
+        }];
+        readonly name: "toggleCodeBlock";
+    }, {
+        readonly args: readonly [{
+            readonly default: null;
+            readonly name: "language";
+            readonly type: {
+                readonly of: {
+                    readonly type: "string";
+                };
+                readonly type: "nullable";
+            };
+        }];
+        readonly name: "setCodeBlock";
+    }];
+    readonly name: "codeBlock";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [{
+            readonly default: null;
+            readonly name: "language";
+            readonly type: {
+                readonly of: {
+                    readonly type: "string";
+                };
+                readonly type: "nullable";
+            };
+        }];
+        readonly kind: "block";
+        readonly name: "codeBlock";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isCodeBlock";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }, {
+        readonly args: readonly [];
+        readonly name: "codeBlockLanguage";
+        readonly returns: {
+            readonly of: {
+                readonly type: "string";
+            };
+            readonly type: "nullable";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "setHardBreak";
+    }];
+    readonly name: "hardBreak";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "embed";
+        readonly name: "hardBreak";
+    }];
+    readonly queries: readonly [];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "setHorizontalRule";
+    }];
+    readonly name: "horizontalRule";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "block";
+        readonly name: "horizontalRule";
+    }];
+    readonly queries: readonly [];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleBulletList";
+    }];
+    readonly name: "bulletList";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "block";
+        readonly name: "bulletList";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isBulletList";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleOrderedList";
+    }, {
+        readonly args: readonly [{
+            readonly name: "start";
+            readonly type: {
+                readonly type: "int";
+            };
+        }];
+        readonly name: "setOrderedListStart";
+    }];
+    readonly name: "orderedList";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [{
+            readonly default: 1;
+            readonly name: "start";
+            readonly type: {
+                readonly type: "int";
+            };
+        }];
+        readonly kind: "block";
+        readonly name: "orderedList";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isOrderedList";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }, {
+        readonly args: readonly [];
+        readonly name: "orderedListStart";
+        readonly returns: {
+            readonly of: {
+                readonly type: "int";
+            };
+            readonly type: "nullable";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "splitListItem";
+    }, {
+        readonly args: readonly [];
+        readonly name: "sinkListItem";
+    }, {
+        readonly args: readonly [];
+        readonly name: "liftListItem";
+    }];
+    readonly name: "listItem";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "block";
+        readonly name: "listItem";
+    }];
+    readonly queries: readonly [];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleTaskList";
+    }, {
+        readonly args: readonly [];
+        readonly name: "toggleTask";
+    }, {
+        readonly args: readonly [{
+            readonly name: "checked";
+            readonly type: {
+                readonly type: "bool";
+            };
+        }];
+        readonly name: "setTaskChecked";
+    }, {
+        readonly args: readonly [];
+        readonly name: "splitTaskItem";
+    }, {
+        readonly args: readonly [];
+        readonly name: "sinkTaskItem";
+    }, {
+        readonly args: readonly [];
+        readonly name: "liftTaskItem";
+    }];
+    readonly name: "taskList";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "block";
+        readonly name: "taskList";
+    }, {
+        readonly attrs: readonly [{
+            readonly default: false;
+            readonly name: "checked";
+            readonly type: {
+                readonly type: "bool";
+            };
+        }];
+        readonly kind: "block";
+        readonly name: "taskItem";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isTaskList";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }, {
+        readonly args: readonly [];
+        readonly name: "isTaskChecked";
+        readonly returns: {
+            readonly of: {
+                readonly type: "bool";
+            };
+            readonly type: "nullable";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleBold";
+    }, {
+        readonly args: readonly [];
+        readonly name: "setBold";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetBold";
+    }];
+    readonly name: "bold";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "mark";
+        readonly name: "bold";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isBold";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleItalic";
+    }, {
+        readonly args: readonly [];
+        readonly name: "setItalic";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetItalic";
+    }];
+    readonly name: "italic";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "mark";
+        readonly name: "italic";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isItalic";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleUnderline";
+    }, {
+        readonly args: readonly [];
+        readonly name: "setUnderline";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetUnderline";
+    }];
+    readonly name: "underline";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "mark";
+        readonly name: "underline";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isUnderline";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleStrike";
+    }, {
+        readonly args: readonly [];
+        readonly name: "setStrike";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetStrike";
+    }];
+    readonly name: "strike";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "mark";
+        readonly name: "strike";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isStrike";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "toggleCode";
+    }, {
+        readonly args: readonly [];
+        readonly name: "setCode";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetCode";
+    }];
+    readonly name: "code";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [];
+        readonly kind: "mark";
+        readonly name: "code";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "isCode";
+        readonly returns: {
+            readonly type: "bool";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [{
+            readonly name: "href";
+            readonly type: {
+                readonly type: "string";
+            };
+        }];
+        readonly name: "setLink";
+    }, {
+        readonly args: readonly [];
+        readonly name: "unsetLink";
+    }];
+    readonly name: "link";
+    readonly nodes: readonly [{
+        readonly attrs: readonly [{
+            readonly default: null;
+            readonly name: "href";
+            readonly type: {
+                readonly of: {
+                    readonly type: "string";
+                };
+                readonly type: "nullable";
+            };
+        }];
+        readonly kind: "mark";
+        readonly name: "link";
+    }];
+    readonly queries: readonly [{
+        readonly args: readonly [];
+        readonly name: "linkHref";
+        readonly returns: {
+            readonly of: {
+                readonly type: "string";
+            };
+            readonly type: "nullable";
+        };
+    }];
+}, {
+    readonly commands: readonly [{
+        readonly args: readonly [];
+        readonly name: "undo";
+    }, {
+        readonly args: readonly [];
+        readonly name: "redo";
+    }];
+    readonly name: "history";
+    readonly nodes: readonly [];
+    readonly queries: readonly [];
+}], const P extends Plugins = []>(props: CanvistEditorProps<E, P> & {
+    onReady?: (...args: any[]) => any;
+    onUpdate?: (...args: any[]) => any;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<CanvistEditorProps<E, P> & {
+    onReady?: (...args: any[]) => any;
+    onUpdate?: (...args: any[]) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ready" | "update")[], import("vue").PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, CanvistEditorProps<E, P> & {
+    onReady?: (...args: any[]) => any;
+    onUpdate?: (...args: any[]) => any;
+}, {}, {}, {}, {}, {}>;
+/** Props for {@link BubbleMenu} and {@link FloatingMenu}. */
+export interface MenuProps<E extends Extensions, P extends Plugins> extends MenuOptions<E, P> {
+    /** The editor to follow; the menu stays hidden while it is `null`. */
+    readonly editor: Editor<E, P> | null;
+}
+/**
+ * A menu over selected text, as `bubbleMenu` from `@canvist/web/menus`
+ * places it. Pressing inside it keeps the editor's focus and selection.
+ */
+export declare const BubbleMenu: new <E extends Extensions, P extends Plugins>(props: (MenuProps<E, P> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<MenuProps<E, P> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, import("vue").PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (MenuProps<E, P> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}) | (MenuProps<E, P> & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, {}>;
+/**
+ * A menu beside the caret on an empty line, as `floatingMenu` from
+ * `@canvist/web/menus` places it.
+ */
+export declare const FloatingMenu: new <E extends Extensions, P extends Plugins>(props: (MenuProps<E, P> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+})) & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps) => import("vue").CreateComponentPublicInstanceWithMixins<MenuProps<E, P> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, import("vue").PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import("vue").ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, (MenuProps<E, P> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}) | (MenuProps<E, P> & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, {}>;

package/dist/mod.js

@@ -0,0 +1,153 @@
+/**
+ * Vue bindings for the canvist canvas editor.
+ *
+ * `CanvistEditor` renders an editor; `useCanvistEditor` gives you the
+ * editor itself, and `useEditorState` keeps a ref in step with something
+ * read from the editor. Commands, queries, and plugin APIs are typed from
+ * the extensions and plugins you pass, as in `@canvist/web`. `BubbleMenu`
+ * and `FloatingMenu` keep their slot next to the selection.
+ *
+ * ```ts
+ * const { element, editor } = useCanvistEditor({
+ * 	content: { format: "markdown", input: "Hello **world**" },
+ * });
+ * const bold = useEditorState(editor, (current) => current.can.toggleBold(), false);
+ * // <button :disabled="!bold" @click="editor?.commands.toggleBold()">Bold</button>
+ * // <div ref="element" />
+ * ```
+ *
+ * @module
+ */
+import { createEditor, } from "@canvist/web";
+import { bubbleMenu, floatingMenu, } from "@canvist/web/menus";
+import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch, } from "vue";
+/**
+ * Create an editor in `element` when the component mounts, and destroy it
+ * when it unmounts. `options` are read when the editor is created.
+ */
+export function useCanvistEditor(options = {}) {
+    const element = shallowRef(null);
+    const editor = shallowRef(null);
+    const mount = { live: true, editor };
+    onMounted(() => {
+        if (element.value !== null) {
+            void create(element.value, options, mount);
+        }
+    });
+    onBeforeUnmount(() => {
+        mount.live = false;
+        editor.value?.destroy();
+        editor.value = null;
+    });
+    return { element, editor };
+}
+/** Create the editor for `mount`, destroying it if the component unmounted while it loaded. */
+async function create(element, options, mount) {
+    try {
+        const editor = await createEditor(element, options);
+        if (mount.live) {
+            mount.editor.value = editor;
+        }
+        else {
+            editor.destroy();
+        }
+    }
+    catch (error) {
+        if (mount.live) {
+            reportError(error);
+        }
+    }
+}
+/**
+ * A ref holding `select(editor)`, updated after every edit or selection
+ * change. Until the editor exists, it holds `fallback`.
+ */
+export function useEditorState(editor, select, fallback) {
+    const state = shallowRef(fallback);
+    watch(editor, (current, _previous, onCleanup) => {
+        if (current === null) {
+            state.value = fallback;
+            return;
+        }
+        state.value = select(current);
+        onCleanup(current.subscribe(() => {
+            state.value = select(current);
+        }));
+    }, { immediate: true });
+    return state;
+}
+/** The option props {@link CanvistEditor} passes to the editor. */
+const OPTION_PROPS = [
+    "extensions",
+    "plugins",
+    "content",
+    "theme",
+    "breaks",
+    "client",
+    "overscan",
+    "wasm",
+    "input",
+    "label",
+    "platform",
+    "editable",
+    "placeholder",
+];
+/**
+ * A canvist editor. Give it a width; without a height it grows with its
+ * document. It emits `ready` once the editor has loaded and `update`
+ * after every change, each with the editor.
+ */
+export const CanvistEditor = defineComponent((props, { emit }) => {
+    const { html, ...options } = props;
+    const { element, editor } = useCanvistEditor(options);
+    watch([editor, () => props.editable, () => props.placeholder], ([current, editable, placeholder]) => {
+        current?.setEditable(editable ?? true);
+        current?.setPlaceholder(placeholder ?? "");
+    });
+    watch(editor, (current, _previous, onCleanup) => {
+        if (current === null) {
+            return;
+        }
+        emit("ready", current);
+        onCleanup(current.subscribe(() => emit("update", current)));
+    });
+    // `innerHTML` is set once: Vue leaves the editor's elements alone
+    // while it is unchanged.
+    return () => h("div", { ref: element, innerHTML: html });
+}, { props: ["html", ...OPTION_PROPS], emits: ["ready", "update"] });
+/** A component that keeps its default slot where `attach` places it. */
+function followingMenu(attach) {
+    return defineComponent((props, { slots }) => {
+        const element = shallowRef(null);
+        watch([
+            () => props.editor,
+            element,
+            () => props.placement,
+            () => props.offset,
+            () => props.padding,
+            () => props.shouldShow,
+        ], ([editor, current, placement, offset, padding, shouldShow], _, onCleanup) => {
+            if (editor === null || current === null) {
+                return;
+            }
+            const menu = attach(editor, current, {
+                ...(placement === undefined ? {} : { placement }),
+                ...(offset === undefined ? {} : { offset }),
+                ...(padding === undefined ? {} : { padding }),
+                ...(shouldShow === undefined ? {} : { shouldShow }),
+            });
+            onCleanup(() => menu.destroy());
+        }, { flush: "post" });
+        return () => h("div", { ref: element, hidden: true }, slots["default"]?.());
+    }, { props: ["editor", "placement", "offset", "padding", "shouldShow"] });
+}
+/**
+ * A menu over selected text, as `bubbleMenu` from `@canvist/web/menus`
+ * places it. Pressing inside it keeps the editor's focus and selection.
+ */
+export const BubbleMenu = followingMenu(bubbleMenu);
+/**
+ * A menu beside the caret on an empty line, as `floatingMenu` from
+ * `@canvist/web/menus` places it.
+ */
+export const FloatingMenu = followingMenu(floatingMenu);

package/package.json

@@ -1 +1,42 @@
-{"description":"Placeholder package for @canvist/vue","name":"@canvist/vue","repository":"https://github.com/ifiokjr/canvist","version":"0.0.0"}
+{
+	"name": "@canvist/vue",
+	"version": "0.2.0",
+	"description": "Vue bindings for the canvist canvas editor: a component, and composables typed from the extensions you register.",
+	"license": "Unlicense",
+	"homepage": "https://github.com/canvist/canvist/tree/main/packages/canvist-vue#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/canvist/canvist.git",
+		"directory": "packages/canvist-vue"
+	},
+	"bugs": {
+		"url": "https://github.com/canvist/canvist/issues",
+		"email": "support@canvist.dev"
+	},
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/mod.d.ts",
+			"default": "./dist/mod.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": false,
+	"scripts": {
+		"check:types": "tsc --noEmit",
+		"build": "tsc -p tsconfig.build.json",
+		"prepack": "npm run build"
+	},
+	"dependencies": {
+		"@canvist/web": "^0.2.0"
+	},
+	"peerDependencies": {
+		"vue": "^3.4.0"
+	},
+	"devDependencies": {
+		"typescript": "^7.0.2",
+		"vue": "^3.5.0"
+	}
+}

package/readme.md

@@ -0,0 +1,50 @@
+<p align="center">
+  <a href="https://github.com/canvist/canvist">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/canvist/canvist/main/assets/brand/vector/lockup-dark.svg">
+      <img width="220" src="https://raw.githubusercontent.com/canvist/canvist/main/assets/brand/vector/lockup.svg" alt="canvist" />
+    </picture>
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/canvist/canvist/blob/main/docs/src/quick-start/vue.md"><strong>Quick start</strong></a> ·
+  <a href="https://github.com/canvist/canvist/blob/main/docs/src/readme.md"><strong>Docs</strong></a> ·
+  <a href="https://github.com/canvist/canvist/blob/main/docs/src/reference/contributing.md"><strong>Contributing</strong></a> ·
+  <a href="https://github.com/canvist/canvist"><strong>canvist</strong></a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@canvist/vue"><img src="https://img.shields.io/npm/v/%40canvist%2Fvue?color=3B2CF5" alt="npm version" /></a>
+  <a href="https://github.com/canvist/canvist/actions/workflows/web.yml"><img src="https://github.com/canvist/canvist/actions/workflows/web.yml/badge.svg?branch=main" alt="web status" /></a>
+  <a href="https://unlicense.org"><img src="https://img.shields.io/badge/license-Unlicense-3B2CF5" alt="Unlicense" /></a>
+</p>
+
+# @canvist/vue
+
+Vue bindings for [`@canvist/web`](../canvist-web), the canvist canvas editor. Commands, queries, and plugin APIs are typed from the extensions and plugins you pass.
+
+```sh
+npm install @canvist/vue
+```
+
+```vue
+<script setup lang="ts">
+import { useCanvistEditor, useEditorState } from "@canvist/vue";
+
+const { element, editor } = useCanvistEditor({ label: "Notes" });
+const isBold = useEditorState(editor, (current) => current.query.isBold(), false);
+</script>
+
+<template>
+	<button :aria-pressed="isBold" @click="editor?.commands.toggleBold()">Bold</button>
+	<div ref="element" />
+</template>
+```
+
+- `useCanvistEditor(options)` creates the editor in `element` on mount and destroys it on unmount.
+- `useEditorState(editor, select, fallback)` returns a ref updated after every change.
+- `<CanvistEditor />` takes the editor's options as props, emits `ready` and `update`, and takes `html` for server-rendered HTML to hydrate. `editable` and `placeholder` follow their props.
+- `<BubbleMenu :editor="editor">` and `<FloatingMenu :editor="editor">` keep their slot next to the selection.
+
+See [Quick start: Vue](../../docs/src/quick-start/vue.md).

package/CHANGELOG.md

@@ -1,3 +0,0 @@
-## 0.0.0
-
-- Placeholder release.

package/LICENSE

@@ -1,24 +0,0 @@
-This is free and unencumbered software released into the public domain.
-
-Anyone is free to copy, modify, publish, use, compile, sell, or
-distribute this software, either in source code form or as a compiled
-binary, for any purpose, commercial or non-commercial, and by any
-means.
-
-In jurisdictions that recognize copyright laws, the author or authors
-of this software dedicate any and all copyright interest in the
-software to the public domain. We make this dedication for the benefit
-of the public at large and to the detriment of our heirs and
-successors. We intend this dedication to be an overt act of
-relinquishment in perpetuity of all present and future rights to this
-software under copyright law.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
-ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
-
-For more information, please refer to <http://unlicense.org/>

package/README.md

@@ -1,3 +0,0 @@
-# @canvist/vue
-
-This is a placeholder release published by monochange to bootstrap trusted publishing.