@witchcraft/editor 0.1.1 → 0.2.1

package/src/runtime/pm/features/Collaboration/createCollaborationPlugins.ts

@@ -0,0 +1,132 @@
+import type { CollaborationOptions } from "@tiptap/extension-collaboration"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import type { EditorView } from "@tiptap/pm/view"
+import {
+	ySyncPlugin,
+	yUndoPlugin,
+	yUndoPluginKey,
+	yXmlFragmentToProsemirrorJSON
+} from "@tiptap/y-tiptap"
+
+/**
+ * Copied from tiptap's collaboration extension with a few minor changes to make it work with our document api.
+ *
+ * Changes:
+ *
+ * - A local object is created for the plugin instance to simulate the extension's storage.
+ * - When it needs the editor (for the `contentError` event), every editor currently using the doc is iterated over and sent the event.
+ * - The normally editor level `enableContentCheck` option should be set here, it has no effect if passed to the extension.
+ *
+ * See {@link Collaboration} for more info and {@link useTestDocumentApi} for an example of how to use it.
+ */
+export function createCollaborationPlugins(
+	options: CollaborationOptions & { enableContentCheck: boolean },
+	schema: any,
+	getConnectedEditors?: () => any
+): Plugin[] {
+	const storage = {
+		isDisabled: false
+	}
+	const fragment = options.fragment
+		? options.fragment
+		: options.document?.getXmlFragment(options.field)
+
+	if (!fragment) {
+		throw new Error("No fragment or document provided.")
+	}
+
+	// Quick fix until there is an official implementation (thanks to @hamflx).
+	// See https://github.com/yjs/y-prosemirror/issues/114 and https://github.com/yjs/y-prosemirror/issues/102
+	const yUndoPluginInstance = yUndoPlugin(options.yUndoOptions)
+	const originalUndoPluginView = yUndoPluginInstance.spec.view
+
+	yUndoPluginInstance.spec.view = (view: EditorView) => {
+		const { undoManager } = yUndoPluginKey.getState(view.state)
+
+		if (undoManager.restore) {
+			undoManager.restore()
+			undoManager.restore = () => {
+				// noop
+			}
+		}
+
+		const viewRet = originalUndoPluginView ? originalUndoPluginView(view) : undefined
+
+		return {
+			destroy: () => {
+				const hasUndoManSelf = undoManager.trackedOrigins.has(undoManager)
+
+				const observers = undoManager._observers
+
+				undoManager.restore = () => {
+					if (hasUndoManSelf) {
+						undoManager.trackedOrigins.add(undoManager)
+					}
+
+					undoManager.doc.on("afterTransaction", undoManager.afterTransactionHandler)
+
+					undoManager._observers = observers
+				}
+
+				if (viewRet?.destroy) {
+					viewRet.destroy()
+				}
+			}
+		}
+	}
+
+	const ySyncPluginOptions: Parameters<typeof ySyncPlugin>[1] = {
+		...options.ySyncOptions,
+		onFirstRender: options.onFirstRender
+	}
+
+	const ySyncPluginInstance = ySyncPlugin(fragment, ySyncPluginOptions)
+
+	if (options.enableContentCheck) {
+		fragment.doc?.on("beforeTransaction", () => {
+			try {
+				const jsonContent = yXmlFragmentToProsemirrorJSON(fragment)
+
+				if (jsonContent.content.length === 0) {
+					return
+				}
+
+				schema.nodeFromJSON(jsonContent).check()
+			} catch (error) {
+				for (const editor of (getConnectedEditors?.() ?? [])) {
+					editor.emit("contentError", {
+						error: error as Error,
+						editor: editor,
+						disableCollaboration: () => {
+							fragment.doc?.destroy()
+							storage.isDisabled = true
+						}
+					})
+				}
+				// If the content is invalid, return false to prevent the transaction from being applied
+				return false
+			}
+		})
+	}
+
+	return [
+		ySyncPluginInstance,
+		yUndoPluginInstance,
+		options.enableContentCheck
+		&& new Plugin({
+			key: new PluginKey("filterInvalidContent"),
+			filterTransaction: () => {
+				// When collaboration is disabled, prevent any sync transactions from being applied
+				if (storage.isDisabled !== false) {
+					// Destroy the Yjs document to prevent any further sync transactions
+					fragment.doc?.destroy()
+
+					return true
+				}
+				// TODO should we be returning false when the transaction is a collaboration transaction?
+
+				return true
+			}
+		})
+	].filter(Boolean)
+}

package/src/runtime/pm/features/DocumentApi/DocumentApi.ts

@@ -1,9 +1,9 @@
 import { debounce, type DebounceQueue } from "@alanscodelog/utils/debounce"
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Content, EditorOptions } from "@tiptap/core"
+import { Editor } from "@tiptap/core"
 import type { Schema } from "@tiptap/pm/model"
 import type { EditorState, Plugin, Transaction } from "@tiptap/pm/state"
-import { Editor } from "@tiptap/vue-3"
 import { isProxy } from "vue"
 
 import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js"
@@ -30,7 +30,17 @@ import { getEmbedNodeFromDoc } from "./utils/getEmbedNodeFromDoc.js"
  *
  * If there are extensions that use onCreate to set state or have plugins that need to change the state on init with appendTransaction, they will not work since there is no view to initialize the plugins. To get around this, plugins can specify a stateInit function that will be called with a transaction from the initial loaded state which it can then modify while having access to `this` and the extension options.
  *
- * The api creates a default instance of the editor to copy plugins from, this can be replaced by passing your own editor instance.
+ * ### Internals / How does it work?
+ *
+ * It can be a bit confusing how this works. It's quite different from how tiptap works.
+ *
+ * First, the api creates a **single** instance of the editor with the editor options **initially** provided (it can be replaced by passing your own editor instance).
+ *
+ * On load **per document**, the state of the doc is initialized. The plugins are copied from the single editor instance so that we can properly initialize the state. The plugin's `stateInit` is called, see above.
+ *
+ * When an editor **component** is mounted, useEditorContent will call the document api's `preEditorInit` to get a configuration for that component. This configuration can be edited in `preEditorInit` and is **per editor component**. It is disconnected from the **per document** configuration.
+ *
+ * There is no **per document** editor instance. This makes it tricky to work with extensions like Collaboration that expect this setup. They require some weird workarounds unfortunately.
  *
  * See {@link useTestDocumentApi} for an example of how to set things up.
  */
@@ -43,7 +53,7 @@ export class DocumentApi<
 		saving: OnSaveDocumentCallback[]
 	} = { update: [], saved: [], saving: [] }
 
-	private readonly _load: (docId: string, schema: Schema, plugins: Plugin[]) => Promise<{ state: EditorState, data?: T }>
+	private readonly _load: (docId: string, schema: Schema, plugins: Plugin[], getConnectedEditors: () => Editor[]) => Promise<{ state: EditorState, data?: T }>
 
 	private readonly _save?: (docId: string) => Promise<void>
 
@@ -84,6 +94,8 @@ export class DocumentApi<
 
 	editor: Editor
 
+	connectedEditors: Record<string, Editor[]> = {}
+
 	constructor({
 		editorOptions,
 		getTitle,
@@ -104,7 +116,7 @@ export class DocumentApi<
 		getTitle?: (docId: string, blockId?: string) => string
 		getSuggestions: DocumentApiInterface["getSuggestions"]
 		/** Load should create the editor state and return it. It can also optionally return extra data which will be passed to the refCounter's load function. */
-		load: (docId: string, schema: Schema, plugins: Plugin[]) => Promise<{ state: EditorState, data?: T }>
+		load: (docId: string, schema: Schema, plugins: Plugin[], getConnectedEditors: () => Editor[]) => Promise<{ state: EditorState, data?: T }>
 		save?: DocumentApi["_save"]
 		saveDebounce?: number
 		cache: DocumentApi["_cache"]
@@ -236,7 +248,8 @@ export class DocumentApi<
 		const loaded = await this._load(
 			docId,
 			schema,
-			[...this.editor.extensionManager.plugins]
+			[...this.editor.extensionManager.plugins],
+			() => this.connectedEditors[docId] ?? []
 		)
 		let state = loaded.state
 		const tr = state.tr
@@ -282,4 +295,21 @@ export class DocumentApi<
 			return getEmbedJson(nodeWanted) ?? json
 		}
 	}
+
+	connectEditor(docId: string, editor: Editor) {
+		if (!this.connectedEditors[docId]) {
+			this.connectedEditors[docId] = []
+		}
+		this.connectedEditors[docId].push(editor)
+	}
+
+	disconnectEditor(docId: string, editor: Editor) {
+		if (!this.connectedEditors[docId]) {
+			return
+		}
+		const index = this.connectedEditors[docId].indexOf(editor)
+		if (index !== -1) {
+			this.connectedEditors[docId].splice(index, 1)
+		}
+	}
 }

package/src/runtime/pm/features/DocumentApi/composables/useEditorContent.ts

@@ -50,7 +50,11 @@ export function useEditorContent(
 
 	async function load(changed: boolean): Promise<void> {
 		if (content.value) {
-			editor.value?.commands.setContent(content.value)
+			if (!editor.value) {
+				recreate(options => ({ ...options, content: content.value }))
+			} else {
+				editor.value?.commands.setContent(content.value)
+			}
 		} else if (documentApi) {
 			if (changed && id.value) {
 				await documentApi.load({ docId: id.value })
@@ -58,6 +62,7 @@ export function useEditorContent(
 
 				recreate(options => documentApi.preEditorInit?.(id.value!, { ...options }, state))
 				await nextTick(async () => {
+					documentApi.connectEditor(id.value!, editor.value!)
 					editor.value!.on("transaction", onTransaction)
 					documentApi!.addEventListener("update", onUpdateDocument)
 					documentApi.postEditorInit(id.value!, editor.value!)
@@ -69,6 +74,7 @@ export function useEditorContent(
 	function unload(oldId: string): void {
 		if (oldId !== undefined && documentApi) {
 			documentApi.unload({ docId: oldId })
+			documentApi.disconnectEditor(id.value!, editor.value!)
 			if (attached) {
 				documentApi.removeEventListener("update", onUpdateDocument)
 				editor.value?.off("transaction", onTransaction)
@@ -91,7 +97,7 @@ export function useEditorContent(
 		if (oldId !== undefined && newId !== oldId && documentApi) {
 			unload(oldId)
 			await load(true)
-		} else if (_newContent) {
+		} else if (_newContent !== _oldContent && _newContent) {
 			await load(false)
 		}
 	}, { deep: false })

package/src/runtime/pm/features/DocumentApi/composables/useTestDocumentApi.ts

@@ -1,24 +1,34 @@
 import { delay } from "@alanscodelog/utils/delay"
 import { keys } from "@alanscodelog/utils/keys"
 import { unreachable } from "@alanscodelog/utils/unreachable"
-import type { EditorOptions } from "@tiptap/core"
+import type { Editor, EditorOptions } from "@tiptap/core"
 import { createDocument, generateJSON } from "@tiptap/core"
 import type { Schema } from "@tiptap/pm/model"
 import type { Plugin } from "@tiptap/pm/state"
 import { EditorState } from "@tiptap/pm/state"
+import { prosemirrorToYDoc } from "@tiptap/y-tiptap"
 import { type Ref, ref, toRaw } from "vue"
+import type * as Y from "yjs"
 
 import { testExtensions } from "../../../testSchema.js"
+import { Collaboration } from "../../Collaboration/Collaboration.js"
+import { createCollaborationPlugins } from "../../Collaboration/createCollaborationPlugins.js"
 import { DocumentApi } from "../DocumentApi.js"
 import type { DocumentApiInterface } from "../types.js"
 
-type Cache = Record<string, { state?: EditorState, count: number }>
+type Cache = Record<string, { state?: EditorState, count: number, yDoc?: Y.Doc }>
 
 /** Creates a simple instance of the DocumentApi for testing purposes. */
 export function useTestDocumentApi(
 	editorOptions: Partial<EditorOptions>,
 	embeds: Record<string, { content: any, title?: string }>,
-	{ loadDelay = 0 }: { loadDelay?: number } = { }
+	{
+		useCollab = false,
+		loadDelay = 0
+	}: {
+		useCollab?: boolean
+		loadDelay?: number
+	} = {}
 ): {
 	cache: Ref<Cache>
 	documentApi: DocumentApiInterface
@@ -51,11 +61,29 @@ export function useTestDocumentApi(
 				cache.value[docId].state = state
 			}
 		},
+		preEditorInit(docId, options: Partial<EditorOptions>) {
+			if (!cache.value[docId]) unreachable()
+			const yDoc = cache.value[docId].yDoc
+			if (useCollab && !yDoc) unreachable()
+			if (!cache.value[docId].state) unreachable()
+
+			const perDoc = ["history"]
+
+			options.content = cache.value[docId].state.doc.toJSON()
+			options.extensions = [
+				...(options.extensions ?? []).filter(ext => !perDoc.includes(ext.name)),
+				...(useCollab
+					? [Collaboration]
+					: [])
+			]
+			return options
+		},
 		load: async (
 			docId: string,
 			schema: Schema,
-			plugins: Plugin[]
-		): Promise<{ state: EditorState }> => {
+			plugins: Plugin[],
+			getConnectedEditors: () => Editor[]
+		): Promise<{ state: EditorState, data?: { yDoc?: Y.Doc } }> => {
 			if (loadDelay) {
 				await delay(loadDelay)
 			}
@@ -64,19 +92,39 @@ export function useTestDocumentApi(
 				throw new Error(`No embed found for docId ${docId} in: ${JSON.stringify(embeds, null, "\t")}`)
 			}
 
+			if (cache.value[docId]?.state) {
+				return { state: toRaw(cache.value[docId].state) as any, data: { yDoc: cache.value[docId].yDoc } }
+			}
+
 			const json = generateJSON(embeds[docId].content as any, testExtensions)
 			const doc = createDocument(json, schema)
+			const yDoc = useCollab ? prosemirrorToYDoc(doc, "prosemirror") : undefined
+
 			const state = EditorState.create({
 				doc,
 				schema,
-				plugins
+				plugins: [
+					...plugins,
+					...(useCollab
+						? createCollaborationPlugins(
+								{
+									document: yDoc,
+									field: "prosemirror",
+									enableContentCheck: true
+								},
+								schema,
+								getConnectedEditors
+							)
+						: [])
+				]
 			})
-			return { state /** , data: {...any additional data} */ }
+
+			return { state, data: { yDoc } } as any
 		},
 		refCounter: {
 			load(docId: string, loaded) {
 				// loaded.data can be accessed here if we need it
-				cache.value[docId] ??= { ...loaded, count: 0 }
+				cache.value[docId] ??= { ...loaded, yDoc: loaded.data!.yDoc, count: 0 }
 				cache.value[docId].count++
 			},
 			unload: (docId: string) => {

package/src/runtime/pm/features/DocumentApi/types.ts

@@ -33,16 +33,33 @@ export type DocumentApiInterface<
 	getFromCache: (docId: DocId, options?: { errorIfNotFound?: boolean }) => EditorState | undefined
 	/** Load should be called the first time, before attempting to load the state. */
 	getFullState: (docId: DocId) => EditorState
-	/** Like {@link DocumentApi.preEditorInit}, but after initializing and loading the document (and before the transaction listeners are added). */
+	/**
+	 * For replacing {@link DocumentApi.preEditorInit} which runs after initializing and loading the document but before the transaction listeners are added.
+	 *
+	 * Can be used to add the Collaboration extension for example (see useTestDocumentApi for an example).
+	 *
+	 * The default implementation just sets the content:
+	 *
+	 * ```ts
+	 * preEditorInit: (_docId, options, state) => {
+	 *		options.content = state.doc.toJSON()
+	 *		return options
+	 *	}
+	 * ```
+	 *
+	 */
 	postEditorInit: (docId: string, editor: Editor) => void
+	connectedEditors: Record<string, Editor[]>
+	connectEditor: (docId: string, editor: Editor) => void
+	disconnectEditor: (docId: string, editor: Editor) => void
 	/**
-	 * Sets options before initializing the editor. By default just does `options.content = state.doc.toJSON()`, but can be useful when managing the document state in some other way (e.g. collab.
+	 * Sets options before initializing the editor. By default just does `options.content = state.doc.toJSON()`, but can be useful for using **per editor component** plugins.
 	 *
-	 * Also useful for creating per-doc instances for certain extensions, such as Collaboration.
+	 * This is normally a bit tricky to do since the editor component initializes the editor before the document is loaded and is re-used (the wrapper Editor *component*, not the editor) when the document changes.
 	 *
-	 * This is a bit tricky to do normally since the editor component initializes the editor before the document is loaded and is re-used (the wrapper Editor *component*, not the editor) when the document changes.
+	 * So this hook can be used to add these additional per-editor instances of extensions. Be sure to clone the properties you are modifying. They are only shallow cloned before being passed to the function.
 	 *
-	 * So this hook can be used to add these additional per-doc instances of extensions. Be sure to clone the properties you are modifying. They are only shallow cloned before being passed to the function.
+	 * If you need **per doc** plugins use `load` instead. See {@link useTestDocumentApi} for an example.
 	 *
 	 * ```ts
 	 * preEditorInit(docId, options: Partial<EditorOptions>, state: EditorState) {
@@ -51,58 +68,19 @@ export type DocumentApiInterface<
 	 * 	const ydoc = cache.value[docId].ydoc
 	 * 	// it's suggested you add the collab extension only here
 	 *		// otherwise you would have to initially configure it with a dummy document
-	 * 	const collabExt = Collaboration.configure({
-	 * 		document: ydoc
-	 * 	}) as any
 	 * 	options.extensions = [
 	 * 		...(options.extensions ?? []),
-	 * 		collabExt
+	 *			// per editor extensions
 	 * 	]
 	 * 	return options
 	 * },
-	 * load: async (
-	 * 	docId: string,
-	 * 	schema: Schema,
-	 * 	plugins: Plugin[],
-	 * ) => {
-	 * 	if (cache.value[docId]?.state) {
-	 * 		return { state: toRaw(cache.value[docId].state) }
-	 * 	}
-	 * 	const doc = getFromYourDb(docId)
-	 * 	const decoded = toUint8Array(doc.contentBinary)
-	 * 	const yDoc = new Y.Doc()
-	 * 	Y.applyUpdate(yDoc, decoded)
-	 *
-	 * 	const yjs = initProseMirrorDoc(yDoc.getXmlFragment("prosemirror"), schema)
-	 * 	const state = EditorState.create({
-	 * 		doc: yjs.doc,
-	 * 		schema,
-	 * 		plugins:[
-	 * 			...plugins,
-	 * 			// the document api's yjs instance
-	 * 			ySyncPlugin(yDoc.getXmlFragment("prosemirror"), {mapping:yjs.mapping}),
-	 * 		]
-	 * 	})
-	 * 	// return the state and any additional data we want refCounter.load to be called with.
-	 * 	return { state, doc, yDoc }
-	 * },
-	 * updateFilter(tr:Transaction) {
-	 * 	const meta = tr.getMeta(ySyncPluginKey)
-	 * 	if (meta) return false
-	 * 	return true
-	 * },
 	 * ```
-	 * See {@link DocumentApi.updateFilter} for why yjs (and other syncronization mechanisms) might need to ignore transactions.
 	 */
 	preEditorInit: (docId: string, options: Partial<EditorOptions>, state: EditorState) => Partial<EditorOptions>
 	/**
-	 * Return false to ignore the transaction.
-	 *
-	 * This is useful when using a secondary syncronization mechanism, such as yjs.
-	 *
-	 * If you load all editors of a file with yjs's plugin and point to the same ydoc, yjs's plugin will sync them. But that means that when the DocumentApi tries to sync the transactions they will have already been applied and the document update will fail.
+	 * Return false to prevent applying the transaction to the state in the cache.
 	 *
-	 * So we have to ignore all of yjs's transactions, but NOT transactions from partially embedded docs => full state, as these do not pass through yjs.
+	 * This used to be needed to ignore yjs transactions, but that's no longer the case. Even with multiple editors loaded to use the same ydoc, everything should work. Leaving the option in case it's needed for some other rare use case.
 	 */
 	updateFilter?: (tr: Transaction) => boolean | undefined
 	updateDocument: (
@@ -110,10 +88,10 @@ export type DocumentApiInterface<
 		tr: Transaction,
 		selfSymbol?: symbol
 	) => void
-	addEventListener (type: "saving" | "saved", cb: OnSaveDocumentCallback): void
-	addEventListener (type: "update", cb: OnUpdateDocumentCallback): void
-	removeEventListener (type: "saving" | "saved", cb: OnSaveDocumentCallback): void
-	removeEventListener (type: "update", cb: OnUpdateDocumentCallback): void
+	addEventListener(type: "saving" | "saved", cb: OnSaveDocumentCallback): void
+	addEventListener(type: "update", cb: OnUpdateDocumentCallback): void
+	removeEventListener(type: "saving" | "saved", cb: OnSaveDocumentCallback): void
+	removeEventListener(type: "update", cb: OnUpdateDocumentCallback): void
 
 	/** For the embedded document picker, should return suggestions for the search string. */
 	getSuggestions: (searchString: string) => Promise<{ title: string, docId: string }[]>
@@ -123,7 +101,7 @@ export type DocumentApiInterface<
 	 * Tells the document api how to load an unloaded document and any additional data. Whatever this function returns will be passed to the refCounter.load option in the default DocumentApi implementation.
 	 *
 	 * ```ts
-	 *	 load: async ( docId: string, schema: Schema, plugins: Plugin[],) => {
+	 *	 load: async ( docId: string, schema: Schema, plugins: Plugin[], getConnectedEditors: () => Editor[]) => {
 	 * 	const dbDoc = getFromYourDb(docId)
 	 *
 	 * 	const state = EditorState.create({

package/src/runtime/pm/features/Link/components/BubbleMenuExternalLink.vue

@@ -4,7 +4,6 @@
 	ref="el"
 >
 	<div class="flex flex-col gap-1">
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="text-input"
 			wrapper-class="flex flex-nowrap gap-1"
@@ -24,7 +23,6 @@
 				</WLabel>
 			</template>
 		</WSimpleInput>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			class="link-input"
 			wrapper-class="flex flex-nowrap gap-1"

package/src/runtime/pm/features/Link/components/BubbleMenuInternalLink.vue

@@ -15,7 +15,6 @@
 		>
 			<i-ic-round-link class="w-[1.25em] !h-auto"/>
 		</WLabel>
-		<!-- @vue-expect-error -->
 		<WSimpleInput
 			id="menu-link-input"
 			class="link-input"

package/src/runtime/pm/utils/generator/createPsuedoSentence.ts

@@ -1,6 +1,6 @@
 import { faker } from "@faker-js/faker"
 
-export function createPsuedoSentence({ min = 0, max = 10}: { min?: number, max?: number } = {}) {
+export function createPsuedoSentence({ min = 0, max = 10 }: { min?: number, max?: number } = {}) {
 	// sentence generated with string.sample (which contains all possible chars) instead of lorem.sentence
 	const sentenceLength = faker.number.int({ min, max })
 	const sentence = Array.from(

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

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

package/dist/runtime/demo/App.vue

@@ -1,100 +0,0 @@
-<template>
-<WRoot class="items-center py-4">
-	<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>

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

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