@witchcraft/editor 0.0.5 → 0.0.7

package/dist/runtime/components/Editor.vue

@@ -0,0 +1,208 @@
+<template>
+<div
+	:class="twMerge(
+  `
+		editor-wrapper
+		[counter-reset:none]
+		flex-1
+		w-full
+	`,
+  isEmbedded && `p-1`,
+  isScrolling && `
+			relative
+			after:content-['']
+			after:absolute
+			after:inset-0
+			after:border-[length:var(--pmDragScrollMargin)]
+			after:border-transparent
+			after:pointer-events-none
+		`,
+  scrollIndicator.right && `after:border-r-accent-500/60`,
+  scrollIndicator.down && `after:border-b-accent-500/60`,
+  scrollIndicator.left && `after:border-l-accent-500/60`,
+  scrollIndicator.up && `after:border-t-accent-500/60`
+)"
+	:data-code-blocks-theme-is-dark="codeBlocksThemeIsDark"
+	:style="`${cssVariablesString}`"
+	v-bind="$attrs"
+>
+	<!-- The class `is-embedded-block` is not needed internally, but is added for consistency in case it might be useful. -->
+	<!-- @vue-expect-error -->
+	<editor-content
+		:editor="editor"
+		spellcheck="false"
+		:class="twMerge(
+  `
+			w-full flex-1
+			p-2
+			pl-6
+			[&>.ProseMirror]:outline-hidden
+			overflow-auto
+		`,
+  isEmbedded && `editor-is-embedded`,
+  isEmbeddedBlock && `editor-is-embedded-block`
+)"
+		v-extract-root-el="(el) => editorContainerEl = el"
+	/>
+	<MarkMenuManager
+		v-if="editor && !finalEditorOptions?.editable"
+		:editor="editor"
+	/>
+	<ItemMenu
+		v-if="editor"
+		:editor="editor"
+	/>
+</div>
+</template>
+
+<script setup>
+import { keys } from "@alanscodelog/utils";
+import { EditorContent } from "@tiptap/vue-3";
+import { useScrollNearContainerEdges } from "@witchcraft/ui/composables/useScrollNearContainerEdges";
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl";
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { computed, inject, provide, ref, toRef, toRefs, watch } from "vue";
+import handleCollapseIndicatorImage from "../assets/handle-arrow.svg";
+import handleImage from "../assets/handle-border-circles-single.svg";
+import { useEditor } from "../composables/useEditor.js";
+import { useWindowDebugging } from "../composables/useWindowDebugging.js";
+import { editorCssVariablesInjectionKey, editorScrollInjectionKey } from "../injectionKeys.js";
+import ItemMenu from "../pm/features/Blocks/components/ItemMenu.vue";
+import { statefulStates } from "../pm/features/Blocks/states/stateful.js";
+import { statesInjectionKey } from "../pm/features/Blocks/types";
+import { lowlightInstance } from "../pm/features/CodeBlock/CodeBlock.js";
+import { useAsyncCodeBlockHighlighting } from "../pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting";
+import { codeBlockThemeIsDarkInjectionKey } from "../pm/features/CodeBlock/types";
+import { useEditorContent } from "../pm/features/DocumentApi/composables/useEditorContent";
+import { documentApiInjectionKey } from "../pm/features/DocumentApi/types.js";
+import { embededEditorOptionsInjectionKey, isEmbeddedBlockInjectionKey, isEmbeddedInjectionKey, parentEditorIdInjectionKey } from "../pm/features/EmbeddedDocument/types";
+import MarkMenuManager from "../pm/features/Menus/components/MarkMenuManager.vue";
+import { extensions } from "../pm/schema.js";
+import { menusInjectionKey } from "../types/index.js";
+const props = defineProps({
+  content: { type: null, required: false, default: void 0 },
+  docId: { type: String, required: false, default: void 0 },
+  documentApi: { type: null, required: false, default: void 0 },
+  linkOptions: { type: Object, required: false, default: void 0 },
+  dragScrollOptions: { type: Object, required: false, default: () => ({
+    scrollMargin: 15,
+    outerScrollMargin: 15,
+    fastPixelMultiplier: 8
+  }) },
+  cssVariables: { type: Object, required: false, default: () => ({}) },
+  editorOptions: { type: Object, required: false, default: () => ({
+    // todo user configurable
+    enablePasteRules: true,
+    enableInputRules: true
+  }) },
+  codeBlocksThemeIsDark: { type: Boolean, required: false, default: false },
+  menus: { type: Object, required: false, default: () => ({}) }
+});
+const editorContainerEl = ref(null);
+const scroll = useScrollNearContainerEdges({
+  containerEl: editorContainerEl,
+  ...props.dragScrollOptions
+});
+const {
+  isScrolling,
+  scrollIndicator
+} = scroll;
+provide(editorScrollInjectionKey, scroll);
+const isEmbedded = inject(isEmbeddedInjectionKey, false);
+const isEmbeddedBlock = inject(isEmbeddedBlockInjectionKey, ref(false));
+const cssVariables = computed(() => isEmbedded ? {} : {
+  pmUnfocusedSelectionColor: "rgb(129,163,234)",
+  pmNodeTypeMargin: "var(--dragHandleMargin)",
+  pmCodeBlockBgColor: "",
+  pmMaxEmbedWidth: "800px",
+  pmDragScrollMargin: `${props.dragScrollOptions.scrollMargin}px`,
+  dragHandleSize: "9px",
+  dragHandleMargin: "5px",
+  dragHandleImage: `url("${handleImage}")`,
+  dragHandleCollapseIndicatorImage: `url("${handleCollapseIndicatorImage}")`,
+  ...props.cssVariables
+});
+const cssVariablesString = computed(() => keys(cssVariables.value).map((key) => `--${key}: ${cssVariables.value[key]};`).join(""));
+const menus = toRef(props, "menus");
+const alreadyProvidedDocumentApi = inject(documentApiInjectionKey, void 0);
+if (!isEmbedded) {
+  const statefulStatesRef = ref(statefulStates);
+  const alreadyProvidedStatefulStates = inject(statesInjectionKey, void 0);
+  if (!alreadyProvidedStatefulStates) {
+    provide(statesInjectionKey, statefulStatesRef);
+  }
+  const codeBlockThemeIsDark = toRef(props, "codeBlocksThemeIsDark");
+  const alreadyProvidedCodeBlockThemeIsDark = inject(codeBlockThemeIsDarkInjectionKey, void 0);
+  if (!alreadyProvidedCodeBlockThemeIsDark) {
+    provide(codeBlockThemeIsDarkInjectionKey, codeBlockThemeIsDark);
+  }
+  const alreadyProvidedEditorCssVariables = inject(editorCssVariablesInjectionKey, void 0);
+  if (!alreadyProvidedEditorCssVariables) {
+    provide(editorCssVariablesInjectionKey, cssVariables);
+  }
+  if (props.documentApi && !alreadyProvidedDocumentApi) {
+    provide(documentApiInjectionKey, props.documentApi);
+  }
+  if (menus.value) {
+    provide(menusInjectionKey, menus);
+  }
+}
+const finalEditorOptions = {
+  enableInputRules: true,
+  enablePasteRules: true,
+  ...props.editorOptions,
+  // force extensions to be their own instance per embedded editor
+  // see https://github.com/ueberdosis/tiptap/issues/4317
+  // and https://github.com/ueberdosis/tiptap/issues/2694
+  extensions: props.editorOptions?.extensions ?? extensions,
+  autofocus: isEmbedded ? false : props.editorOptions?.autofocus ?? true,
+  injectCSS: false
+};
+provide(embededEditorOptionsInjectionKey, finalEditorOptions);
+const emit = defineEmits(["load", "unload"]);
+const { editor, recreate } = useEditor(finalEditorOptions);
+watch(editor, (newVal) => {
+  if (newVal) {
+    if (props.linkOptions) {
+      editor.value.commands.setLinkOpts(props.linkOptions);
+    }
+    emit("load");
+  }
+});
+useWindowDebugging(editor);
+useAsyncCodeBlockHighlighting({
+  lowlightInstance,
+  editor
+});
+watch(() => props.editorOptions, (newVal) => {
+  if (newVal) {
+    editor.value?.setOptions(newVal);
+  }
+}, { deep: true });
+watch(() => props.linkOptions, (newVal) => {
+  if (!isEmbedded) {
+    if (newVal) {
+      editor.value?.commands.setLinkOpts(newVal);
+    }
+  }
+}, { deep: true });
+const {
+  content,
+  docId
+} = toRefs(props);
+useEditorContent(
+  editor,
+  content,
+  docId,
+  props.documentApi ?? alreadyProvidedDocumentApi,
+  recreate
+);
+provide(parentEditorIdInjectionKey, docId);
+defineExpose({
+  editor
+});
+</script>
+
+<style>
+a{text-decoration:underline!important}.ProseMirror{position:relative;word-wrap:break-word;font-feature-settings:"liga" 0;font-variant-ligatures:none;white-space:pre-wrap;white-space:break-spaces}.ProseMirror [contenteditable=false]{white-space:normal}.ProseMirror [contenteditable=false] [contenteditable=true]{white-space:pre-wrap}.ProseMirror pre{white-space:pre-wrap}img.ProseMirror-separator{border:none!important;display:inline!important;height:0!important;margin:0!important;width:0!important}@keyframes ProseMirror-cursor-blink{to{visibility:hidden}}.ProseMirror-gapcursor{display:none;pointer-events:none;position:relative}ul>.ProseMirror-gapcursor{@apply pl-[calc(var(--dragHandleSize)+var(--dragHandleMargin)+var(--spacing-1))]}.ProseMirror-gapcursor:after{animation:ProseMirror-cursor-blink 1.1s steps(2,start) infinite;border-top:1px solid #000;content:"";display:block;position:absolute;top:-2px;width:20px}.ProseMirror-focused .ProseMirror-gapcursor{display:block}.ProseMirror-hideselection ::selection{background:transparent}.ProseMirror-hideselection ::-moz-selection{background:transparent}.ProseMirror-hideselection *{caret-color:transparent}
+</style>

package/dist/runtime/components/Editor.vue.d.ts

@@ -0,0 +1,40 @@
+import type { Content, EditorOptions } from "@tiptap/core";
+import type { ScrollNearContainerEdgesOptions } from "@witchcraft/ui/types/index";
+import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js";
+import type { EditorLinkOptions } from "../pm/features/Link/types";
+import { type CssVariables, type MenuRenderInfo } from "../types/index.js";
+type __VLS_Props = {
+    /** The content for the editor. It is better to use docId and the documentApi instead. */
+    content?: Content;
+    docId?: string;
+    /** The document api, required for the root editor if using nested embeds. This is provided as the documentApi using the documentApiInjectionKey. */
+    documentApi?: DocumentApiInterface;
+    /** The link options, required for the root editor. Not required for embedded editors. */
+    linkOptions?: EditorLinkOptions;
+    /** See my component library's (@witchcraft/ui) useScrollNearContainerEdges composable for more info. */
+    dragScrollOptions?: Pick<ScrollNearContainerEdgesOptions, "scrollMargin" | "outerScrollMargin" | "fastPixelMultiplier">;
+    cssVariables?: Partial<CssVariables>;
+    editorOptions?: Partial<EditorOptions>;
+    codeBlocksThemeIsDark?: boolean;
+    menus?: Record<string, MenuRenderInfo>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    load: () => any;
+    unload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoad?: (() => any) | undefined;
+    onUnload?: (() => any) | undefined;
+}>, {
+    menus: Record<string, MenuRenderInfo>;
+    content: Content;
+    docId: string;
+    documentApi: DocumentApiInterface;
+    linkOptions: EditorLinkOptions;
+    dragScrollOptions: Pick<ScrollNearContainerEdgesOptions, "scrollMargin" | "outerScrollMargin" | "fastPixelMultiplier">;
+    cssVariables: Partial<CssVariables>;
+    editorOptions: Partial<EditorOptions>;
+    codeBlocksThemeIsDark: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/EditorDemoApp.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/EditorDemoApp.vue

@@ -0,0 +1,104 @@
+<template>
+<WRoot class="items-center py-10 gap-2 h-dvh">
+	<component :is="'style'">
+		<!-- use unhead in a real app -->
+		{{ codeBlocksThemeCss.join("\n") }}
+	</component>
+	<div class="text-xl font-bold">
+		<a href="https://github.com/witchcraftjs/editor">@witchcraft/editor</a>
+	</div>
+	<EditorDemoControls
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+	/>
+	<Editor
+		class="
+			max-w-[700px]
+			flex-1
+			flex
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-sm
+			min-h-0
+		"
+		v-bind="{
+  codeBlocksThemeIsDark,
+  cssVariables: {
+    pmCodeBlockBgColor: codeBlocksThemeBgColor
+  },
+  docId,
+  documentApi,
+  linkOptions,
+  editorOptions,
+  menus
+}"
+	/>
+</WRoot>
+</template>
+
+<script setup>
+import WRoot from "@witchcraft/ui/components/LibRoot";
+import { reactive, ref, shallowRef } from "vue";
+import Editor from "./Editor.vue";
+import EditorDemoControls from "./EditorDemoControls.vue";
+import { useHighlightJsTheme } from "../pm/features/CodeBlock/composables/useHighlightJsTheme.js";
+import { defaultCommandBarMenuItems } from "../pm/features/CommandsMenus/commandBarMenuItems.js";
+import CommandBar from "../pm/features/CommandsMenus/components/CommandBar.vue";
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js";
+import BubbleMenuLink from "../pm/features/Link/components/BubbleMenuLink.vue";
+import { testExtensions } from "../pm/testSchema.js";
+import { testDocuments } from "../testDocuments.js";
+const {
+  theme: codeBlocksTheme,
+  knownThemes: codeBlocksThemeList,
+  themeCss: codeBlocksThemeCss,
+  isDark: codeBlocksThemeIsDark,
+  backgroundColor: codeBlocksThemeBgColor
+} = useHighlightJsTheme();
+const editorOptions = {
+  extensions: testExtensions
+};
+const linkOptions = {
+  openInternal: (href) => {
+    window.alert(`This would open an internal link to ${href}.`);
+    console.log(`Would open internal link to ${href}.`);
+  }
+};
+const fakeSuggestions = reactive(["some", "suggestions"]);
+const menus = shallowRef({
+  linkMenu: {
+    component: BubbleMenuLink,
+    props: (editor) => ({
+      editor,
+      linkSuggestions: fakeSuggestions,
+      getInternalLinkHref(href) {
+        return `internal://${href.replace(/[^\w-]/g, "")}`;
+      }
+    })
+  },
+  commandBar: {
+    component: CommandBar,
+    props: (editor) => ({
+      editor,
+      commands: defaultCommandBarMenuItems.commands
+    }),
+    popupOptions: {
+      pinToItemDistance: (state) => {
+        const { $from, $to } = state.selection;
+        const fromNode = $from.node(-1);
+        const toNode = $to.node(-1);
+        if (fromNode.type !== toNode.type) {
+          return 0;
+        }
+        return fromNode.type.name.startsWith("table") ? 120 : 0;
+      }
+    }
+  }
+});
+const { documentApi } = useTestDocumentApi(
+  editorOptions,
+  testDocuments
+);
+const docId = ref("root");
+</script>

package/dist/runtime/components/EditorDemoApp.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/EditorDemoControls.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    codeBlocksThemeList: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "codeBlocksTheme": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:codeBlocksTheme": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:codeBlocksTheme"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/EditorDemoControls.vue

@@ -0,0 +1,36 @@
+<template>
+<div
+	class="
+		w-full
+		flex
+		items-stretch
+		justify-center
+		gap-2
+		[&>*]:rounded-sm
+		[&>*]:p-2
+		[&>*]:border
+		[&>*]:border-neutral-300
+		[&>*]:dark:border-neutral-700
+	"
+>
+	<div class="flex items-center gap-2">
+		<span>
+			Global Theme:
+		</span>
+		<WDarkModeSwitcher/>
+	</div>
+	<CodeBlockThemePicker
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+	/>
+</div>
+</template>
+
+<script setup>
+import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher";
+import CodeBlockThemePicker from "./CodeBlockThemePicker.vue";
+defineProps({
+  codeBlocksThemeList: { type: Array, required: true }
+});
+const codeBlocksTheme = defineModel("codeBlocksTheme", { type: String, ...{ required: true } });
+</script>

package/dist/runtime/components/EditorDemoControls.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    codeBlocksThemeList: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "codeBlocksTheme": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:codeBlocksTheme": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:codeBlocksTheme"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TestWrapper.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    testId: string;
+    documents: Record<string, {
+        title: string;
+        content: string;
+    }>;
+    docId: string;
+    loadDelay?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/TestWrapper.vue

@@ -0,0 +1,63 @@
+<template>
+<WRoot :test-wrapper-mode="true">
+	<Editor
+		:data-testid="`test-editor-${testId}`"
+		ref="editor"
+		v-bind="{
+  docId,
+  documentApi,
+  linkOptions,
+  editorOptions
+}"
+	/>
+	<div class="py-[50px]"/>
+</WRoot>
+</template>
+
+<script setup>
+import WRoot from "@witchcraft/ui/components/LibRoot";
+import { ref, watchEffect } from "vue";
+import Editor from "./Editor.vue";
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js";
+import { testExtensions } from "../pm/testSchema.js";
+const props = defineProps({
+  testId: { type: String, required: true },
+  documents: { type: Object, required: true },
+  docId: { type: String, required: true },
+  loadDelay: { type: Number, required: false }
+});
+const editorOptions = {
+  extensions: testExtensions.map((ext) => {
+    if (ext.name === "item") {
+      return ext.configure({
+        ensureLastItemIsParagraph: false
+      });
+    }
+    return ext;
+  }),
+  enableCoreExtensions: {
+    keymap: false
+  }
+};
+const { documentApi } = useTestDocumentApi(
+  editorOptions,
+  props.documents,
+  { loadDelay: props.loadDelay }
+);
+const linkOptions = {
+  openInternal: () => {
+    console.log("openning internal");
+  }
+};
+const editor = ref(null);
+watchEffect(() => {
+  if (editor.value) {
+    ;
+    window[`editor-${props.testId}`] = editor.value;
+  }
+});
+</script>
+
+<style>
+@reference "../demo/tailwind.css"
+</style>

package/dist/runtime/components/TestWrapper.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    testId: string;
+    documents: Record<string, {
+        title: string;
+        content: string;
+    }>;
+    docId: string;
+    loadDelay?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/useEditor.d.ts

@@ -0,0 +1,9 @@
+import type { EditorOptions } from "@tiptap/core";
+import { Editor } from "@tiptap/vue-3";
+/**
+ * Unline tiptap's useEditor, this does not auto-mount the editor. Instead the returned `recreate` function must be called manually. This was built with the use of {@link useContentEditor} in mind.
+ */
+export declare const useEditor: (options?: Partial<EditorOptions>) => {
+    editor: import("@vue/reactivity").ShallowRef<Editor | undefined, Editor | undefined>;
+    recreate: (modifyOptions?: (options: Partial<EditorOptions>) => Partial<EditorOptions>) => void;
+};

package/dist/runtime/composables/useEditor.js

@@ -0,0 +1,21 @@
+import { Editor } from "@tiptap/vue-3";
+import { onBeforeUnmount, shallowRef } from "vue";
+export const useEditor = (options = {}) => {
+  const editor = shallowRef();
+  function recreate(modifyOptions) {
+    options = modifyOptions?.(options) ?? options;
+    editor.value?.destroy();
+    editor.value = new Editor(options);
+  }
+  onBeforeUnmount(() => {
+    const nodes = editor.value?.options.element;
+    if (nodes && !(nodes instanceof HTMLElement)) {
+      console.warn(`Expected editor element to be an HTMLElement, got ${nodes.constructor.name}: ${nodes}`);
+      return;
+    }
+    const newEl = nodes?.cloneNode(true);
+    nodes?.parentNode?.replaceChild(newEl, nodes);
+    editor.value?.destroy();
+  });
+  return { editor, recreate };
+};

package/dist/runtime/composables/useWindowDebugging.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from "@tiptap/core";
+import type { ShallowRef } from "vue";
+export declare const useWindowDebugging: (editor: ShallowRef<Editor | undefined>) => void;

package/dist/runtime/composables/useWindowDebugging.js

@@ -0,0 +1,16 @@
+import { watch } from "vue";
+import { debugNode } from "../pm/utils/internal/debugNode.js";
+import { nodesBetween } from "../pm/utils/nodesBetween.js";
+export const useWindowDebugging = (editor) => {
+  watch(editor, () => {
+    if (!editor.value) return;
+    if (typeof window === "undefined" || typeof process === "undefined") return;
+    if (import.meta.dev && editor.value !== void 0) {
+      const w = window;
+      w.editor = editor.value;
+      w.tr = () => editor.value.state.tr;
+      w.debugNode = debugNode;
+      w.nodesBetween = nodesBetween;
+    }
+  });
+};

package/dist/runtime/demo/App.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/demo/App.vue

@@ -0,0 +1,101 @@
+<template>
+<WRoot class="items-center py-4">
+	<!-- @vue-expect-error use unhead in a real app -->
+	<style>
+		{{ codeBlocksThemeCss.join("\n") }}
+	</style>
+	<DemoControls
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+		@blur="blur"
+	/>
+	<Editor
+		class="max-w-[700px] flex-1 max-h-[700px] flex"
+		v-bind="{
+  codeBlocksThemeIsDark,
+  cssVariables: {
+    pmCodeBlockBgColor: codeBlocksThemeBgColor
+  },
+  docId,
+  documentApi,
+  linkOptions,
+  editorOptions,
+  menus
+}"
+	/>
+	<div class="py-[50px]"/>
+</WRoot>
+</template>
+
+<script setup>
+import WRoot from "@witchcraft/ui/components/LibRoot";
+import { nextTick, reactive, ref, shallowRef } from "vue";
+import Editor from "../components/Editor.vue";
+import DemoControls from "../components/EditorDemoControls.vue";
+import { useHighlightJsTheme } from "../pm/features/CodeBlock/composables/useHighlightJsTheme.js";
+import { defaultCommandBarMenuItems } from "../pm/features/CommandsMenus/commandBarMenuItems";
+import CommandBar from "../pm/features/CommandsMenus/components/CommandBar.vue";
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js";
+import BubbleMenuLink from "../pm/features/Link/components/BubbleMenuLink.vue";
+import { testExtensions } from "../pm/testSchema.js";
+import { testDocuments } from "../testDocuments";
+const {
+  theme: codeBlocksTheme,
+  knownThemes: codeBlocksThemeList,
+  themeCss: codeBlocksThemeCss,
+  isDark: codeBlocksThemeIsDark,
+  backgroundColor: codeBlocksThemeBgColor
+} = useHighlightJsTheme();
+function blur() {
+  const was = codeBlocksTheme.value;
+  codeBlocksTheme.value = "";
+  nextTick(() => {
+    codeBlocksTheme.value = was;
+  });
+}
+const editorOptions = {
+  extensions: testExtensions
+};
+const linkOptions = {
+  openInternal: (href) => {
+    window.alert(`This would open an internal link to ${href}.`);
+    console.log(`Would open internal link to ${href}.`);
+  }
+};
+const fakeSuggestions = reactive(["some", "suggestions"]);
+const menus = shallowRef({
+  linkMenu: {
+    component: BubbleMenuLink,
+    props: (editor) => ({
+      editor,
+      linkSuggestions: fakeSuggestions,
+      getInternalLinkHref(href) {
+        return `internal://${href.replace(/[^\w-]/g, "")}`;
+      }
+    })
+  },
+  commandBar: {
+    component: CommandBar,
+    props: (editor) => ({
+      editor,
+      commands: defaultCommandBarMenuItems.commands
+    }),
+    popupOptions: {
+      pinToItemDistance: (state) => {
+        const { $from, $to } = state.selection;
+        const fromNode = $from.node(-1);
+        const toNode = $to.node(-1);
+        if (fromNode.type !== toNode.type) {
+          return 0;
+        }
+        return fromNode.type.name.startsWith("table") ? 120 : 0;
+      }
+    }
+  }
+});
+const { documentApi } = useTestDocumentApi(
+  editorOptions,
+  testDocuments
+);
+const docId = ref("root");
+</script>