@witchcraft/editor 0.1.0 → 0.2.0

package/dist/runtime/pm/features/DocumentApi/DocumentApi.d.ts

@@ -1,7 +1,7 @@
 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 type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUpdateDocumentCallback } from "./types.js";
 /**
  * Configures the document api which tells the editor how to load/unload/save/cache documents, including embedded ones.
@@ -20,7 +20,17 @@ import type { DocId, DocumentApiInterface, EmbedId, OnSaveDocumentCallback, OnUp
  *
  * 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.
  */
@@ -45,6 +55,7 @@ export declare class DocumentApi<T extends Record<string, any> = Record<string,
     preEditorInit: DocumentApiInterface["preEditorInit"];
     updateFilter?: DocumentApiInterface["updateFilter"];
     editor: Editor;
+    connectedEditors: Record<string, Editor[]>;
     constructor({ editorOptions, getTitle, getSuggestions, load, save, saveDebounce, cache, refCounter, postEditorInit, preEditorInit, updateFilter }: {
         /**
          * The editor options for the internal instance to use to keep track of the document state. It should include the same extensions as the root editor.
@@ -53,7 +64,7 @@ export declare class DocumentApi<T extends Record<string, any> = Record<string,
         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<{
+        load: (docId: string, schema: Schema, plugins: Plugin[], getConnectedEditors: () => Editor[]) => Promise<{
             state: EditorState;
             data?: T;
         }>;
@@ -86,4 +97,6 @@ export declare class DocumentApi<T extends Record<string, any> = Record<string,
         errorIfNotFound?: boolean;
     }): EditorState | undefined;
     getEmbeddedContent(embedId: EmbedId): Content | undefined;
+    connectEditor(docId: string, editor: Editor): void;
+    disconnectEditor(docId: string, editor: Editor): void;
 }

package/dist/runtime/pm/features/DocumentApi/DocumentApi.js

@@ -1,6 +1,6 @@
 import { debounce } from "@alanscodelog/utils/debounce";
 import { unreachable } from "@alanscodelog/utils/unreachable";
-import { Editor } from "@tiptap/vue-3";
+import { Editor } from "@tiptap/core";
 import { isProxy } from "vue";
 import { convertTransactionForFullState } from "./utils/convertTransactionForFullState.js";
 import { getEmbedJson } from "./utils/getEmbedJson.js";
@@ -30,6 +30,7 @@ export class DocumentApi {
   };
   updateFilter = () => true;
   editor;
+  connectedEditors = {};
   constructor({
     editorOptions,
     getTitle,
@@ -132,7 +133,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;
@@ -169,4 +171,19 @@ export class DocumentApi {
       return getEmbedJson(nodeWanted) ?? json;
     }
   }
+  connectEditor(docId, editor) {
+    if (!this.connectedEditors[docId]) {
+      this.connectedEditors[docId] = [];
+    }
+    this.connectedEditors[docId].push(editor);
+  }
+  disconnectEditor(docId, editor) {
+    if (!this.connectedEditors[docId]) {
+      return;
+    }
+    const index = this.connectedEditors[docId].indexOf(editor);
+    if (index !== -1) {
+      this.connectedEditors[docId].splice(index, 1);
+    }
+  }
 }

package/dist/runtime/pm/features/DocumentApi/composables/useEditorContent.js

@@ -32,6 +32,7 @@ export function useEditorContent(editor, content, id, documentApi, recreate) {
         const state = documentApi.getFullState({ docId: id.value });
         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);
@@ -43,6 +44,7 @@ export function useEditorContent(editor, content, id, documentApi, recreate) {
   function unload(oldId) {
     if (oldId !== void 0 && documentApi) {
       documentApi.unload({ docId: oldId });
+      documentApi.disconnectEditor(id.value, editor.value);
       if (attached) {
         documentApi.removeEventListener("update", onUpdateDocument);
         editor.value?.off("transaction", onTransaction);

package/dist/runtime/pm/features/DocumentApi/composables/useTestDocumentApi.d.ts

@@ -1,16 +1,19 @@
 import type { EditorOptions } from "@tiptap/core";
 import { EditorState } from "@tiptap/pm/state";
 import { type Ref } from "vue";
+import type * as Y from "yjs";
 import type { DocumentApiInterface } from "../types.js";
 type Cache = Record<string, {
     state?: EditorState;
     count: number;
+    yDoc?: Y.Doc;
 }>;
 /** Creates a simple instance of the DocumentApi for testing purposes. */
 export declare function useTestDocumentApi(editorOptions: Partial<EditorOptions>, embeds: Record<string, {
     content: any;
     title?: string;
-}>, { loadDelay }?: {
+}>, { useCollab, loadDelay }?: {
+    useCollab?: boolean;
     loadDelay?: number;
 }): {
     cache: Ref<Cache>;

package/dist/runtime/pm/features/DocumentApi/composables/useTestDocumentApi.js

@@ -3,10 +3,16 @@ import { keys } from "@alanscodelog/utils/keys";
 import { unreachable } from "@alanscodelog/utils/unreachable";
 import { createDocument, generateJSON } from "@tiptap/core";
 import { EditorState } from "@tiptap/pm/state";
+import { prosemirrorToYDoc } from "@tiptap/y-tiptap";
 import { ref, toRaw } from "vue";
 import { testExtensions } from "../../../testSchema.js";
+import { Collaboration } from "../../Collaboration/Collaboration.js";
+import { createCollaborationPlugins } from "../../Collaboration/createCollaborationPlugins.js";
 import { DocumentApi } from "../DocumentApi.js";
-export function useTestDocumentApi(editorOptions, embeds, { loadDelay = 0 } = {}) {
+export function useTestDocumentApi(editorOptions, embeds, {
+  useCollab = false,
+  loadDelay = 0
+} = {}) {
   const cache = ref({});
   const documentApi = new DocumentApi({
     editorOptions,
@@ -32,28 +38,53 @@ export function useTestDocumentApi(editorOptions, embeds, { loadDelay = 0 } = {}
         cache.value[docId].state = state;
       }
     },
-    load: async (docId, schema, plugins) => {
+    preEditorInit(docId, options) {
+      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, schema, plugins, getConnectedEditors) => {
       if (loadDelay) {
         await delay(loadDelay);
       }
       if (!embeds[docId]) {
         throw new Error(`No embed found for docId ${docId} in: ${JSON.stringify(embeds, null, "	")}`);
       }
+      if (cache.value[docId]?.state) {
+        return { state: toRaw(cache.value[docId].state), data: { yDoc: cache.value[docId].yDoc } };
+      }
       const json = generateJSON(embeds[docId].content, testExtensions);
       const doc = createDocument(json, schema);
+      const yDoc = useCollab ? prosemirrorToYDoc(doc, "prosemirror") : void 0;
       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 } };
     },
     refCounter: {
       load(docId, loaded) {
-        cache.value[docId] ??= { ...loaded, count: 0 };
+        cache.value[docId] ??= { ...loaded, yDoc: loaded.data.yDoc, count: 0 };
         cache.value[docId].count++;
       },
       unload: (docId) => {

package/dist/runtime/pm/features/DocumentApi/types.d.ts

@@ -22,16 +22,33 @@ export type DocumentApiInterface<T extends Record<string, any> = Record<string,
     }) => 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) {
@@ -40,58 +57,19 @@ export type DocumentApiInterface<T extends Record<string, any> = Record<string,
      * 	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: (embedId: DocId, tr: Transaction, selfSymbol?: symbol) => void;
@@ -110,7 +88,7 @@ export type DocumentApiInterface<T extends Record<string, any> = Record<string,
      * 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/dist/runtime/pm/schema.d.ts

@@ -1,4 +1,4 @@
 import { type EditorOptions } from "@tiptap/core";
 import type { Schema } from "@tiptap/pm/model";
 export declare const extensions: EditorOptions["extensions"];
-export declare const schema: Schema<"codeBlock" | "paragraph" | "item" | "heading" | "iframe" | "image" | "table" | "text" | "embeddedDoc" | "blockquote" | "cite" | "list" | "tableCell" | "doc" | "tableRow" | "tableHeader", "bold" | "code" | "italic" | "strike" | "subscript" | "superscript" | "underline" | "hardBreak" | "highlight">;
+export declare const schema: Schema<"blockquote" | "cite" | "iframe" | "table" | "image" | "text" | "codeBlock" | "paragraph" | "item" | "heading" | "embeddedDoc" | "list" | "tableCell" | "doc" | "tableRow" | "tableHeader", "code" | "highlight" | "bold" | "italic" | "strike" | "subscript" | "superscript" | "underline" | "hardBreak">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@witchcraft/editor",
   "description": "Block base prosemirror editor with partial/full editable document embeds, infinite embeds, and document uploads.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "./dist/runtime/main.lib.js",
   "type": "module",
   "sideEffects": false,
@@ -64,35 +64,37 @@
     "failOnWarn": false
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.11.1",
-    "@tiptap/extension-blockquote": "^3.11.1",
-    "@tiptap/extension-bold": "^3.11.1",
-    "@tiptap/extension-code": "^3.11.1",
-    "@tiptap/extension-code-block": "^3.11.1",
-    "@tiptap/extension-code-block-lowlight": "^3.11.1",
-    "@tiptap/extension-dropcursor": "^3.11.1",
-    "@tiptap/extension-gapcursor": "^3.11.1",
-    "@tiptap/extension-hard-break": "^3.11.1",
-    "@tiptap/extension-heading": "^3.11.1",
-    "@tiptap/extension-highlight": "^3.11.1",
-    "@tiptap/extension-history": "^3.11.1",
-    "@tiptap/extension-image": "^3.11.1",
-    "@tiptap/extension-italic": "^3.11.1",
-    "@tiptap/extension-link": "^3.11.1",
-    "@tiptap/extension-paragraph": "^3.11.1",
-    "@tiptap/extension-strike": "^3.11.1",
-    "@tiptap/extension-subscript": "^3.11.1",
-    "@tiptap/extension-superscript": "^3.11.1",
-    "@tiptap/extension-table": "^3.11.1",
-    "@tiptap/extension-table-cell": "^3.11.1",
-    "@tiptap/extension-table-header": "^3.11.1",
-    "@tiptap/extension-table-row": "^3.11.1",
-    "@tiptap/extension-text": "^3.11.1",
-    "@tiptap/extension-underline": "^3.11.1",
-    "@tiptap/html": "^3.11.1",
-    "@tiptap/pm": "^3.11.1",
-    "@tiptap/vue-3": "^3.11.1",
-    "@witchcraft/ui": "^0.3.9",
+    "@tiptap/core": "^3.12.0",
+    "@tiptap/extension-blockquote": "^3.12.0",
+    "@tiptap/extension-bold": "^3.12.0",
+    "@tiptap/extension-code": "^3.12.0",
+    "@tiptap/extension-collaboration": "^3.12.0",
+    "@tiptap/extension-code-block": "^3.12.0",
+    "@tiptap/extension-code-block-lowlight": "^3.12.0",
+    "@tiptap/extension-dropcursor": "^3.12.0",
+    "@tiptap/extension-gapcursor": "^3.12.0",
+    "@tiptap/extension-hard-break": "^3.12.0",
+    "@tiptap/extension-heading": "^3.12.0",
+    "@tiptap/extension-highlight": "^3.12.0",
+    "@tiptap/extension-history": "^3.12.0",
+    "@tiptap/extension-image": "^3.12.0",
+    "@tiptap/extension-italic": "^3.12.0",
+    "@tiptap/extension-link": "^3.12.0",
+    "@tiptap/extension-paragraph": "^3.12.0",
+    "@tiptap/extension-strike": "^3.12.0",
+    "@tiptap/extension-subscript": "^3.12.0",
+    "@tiptap/extension-superscript": "^3.12.0",
+    "@tiptap/extension-table": "^3.12.0",
+    "@tiptap/extension-table-cell": "^3.12.0",
+    "@tiptap/extension-table-header": "^3.12.0",
+    "@tiptap/extension-table-row": "^3.12.0",
+    "@tiptap/extension-text": "^3.12.0",
+    "@tiptap/extension-underline": "^3.12.0",
+    "@tiptap/html": "^3.12.0",
+    "@tiptap/pm": "^3.12.0",
+    "@tiptap/vue-3": "^3.12.0",
+    "@tiptap/y-tiptap": "^3.0.1",
+    "@witchcraft/ui": "^0.3.19",
     "tailwindcss": "^4.1.17",
     "vue": "^3.5.25"
   },
@@ -117,9 +119,9 @@
     "@fortawesome/free-regular-svg-icons": "^7.0.1",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@nuxt/eslint-config": "^1.11.0",
-    "@tiptap/html": "^3.11.1",
+    "@tiptap/html": "^3.12.0",
     "@witchcraft/nuxt-utils": "^0.3.6",
-    "@witchcraft/ui": "^0.3.9",
+    "@witchcraft/ui": "^0.3.19",
     "colord": "^2.9.3",
     "defu": "^6.1.4",
     "highlight.js": "^11.11.1",
@@ -131,7 +133,6 @@
     "tailwind-merge": "^3.4.0",
     "unplugin-vue-components": "^30.0.0",
     "uuid": "^13.0.0",
-    "y-prosemirror": "^1.3.7",
     "yjs": "^13.6.27"
   },
   "devDependencies": {
@@ -153,7 +154,7 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-v8": "^4.0.14",
-    "@witchcraft/ui": "^0.3.9",
+    "@witchcraft/ui": "^0.3.19",
     "concurrently": "^9.2.1",
     "cross-env": "^10.0.0",
     "eslint": "^9.39.1",

package/src/runtime/components/EditorDemoApp.vue

@@ -10,7 +10,9 @@
 	<EditorDemoControls
 		:code-blocks-theme-list="codeBlocksThemeList"
 		v-model:code-blocks-theme="codeBlocksTheme"
+		v-model:use-two-editors="useTwoEditors"
 	/>
+
 	<Editor
 		class="
 			max-w-[700px]
@@ -34,6 +36,30 @@
 			menus
 		}"
 	/>
+	<Editor
+		v-if="useTwoEditors"
+		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>
 
@@ -41,6 +67,7 @@
 // all imports must be explicit so this also works without nuxt
 import type { EditorOptions } from "@tiptap/core"
 import WRoot from "@witchcraft/ui/components/LibRoot"
+import { useRoute } from "nuxt/app"
 import { reactive, ref, shallowRef } from "vue"
 
 import Editor from "./Editor.vue"
@@ -98,21 +125,25 @@ const menus = shallowRef<Record<string, MenuRenderInfo>>({
 		popupOptions: {
 			pinToItemDistance: state => {
 				const { $from, $to } = state.selection
-				const fromNode = $from.node(-1)
-				const toNode = $to.node(-1)
+				const fromNode = -1 < $from.depth ? $from.node(-1) : undefined
+				const toNode = -1 < $to.depth ? $to.node(-1) : undefined
 				// tables don't support selections outside of each cell, so no need to check we're in the same table or anything
-				if (fromNode.type !== toNode.type) {
+				if (fromNode?.type !== toNode?.type) {
 					return 0
 				}
-				return (fromNode.type.name.startsWith("table")) ? 120 : 0
+				return (fromNode?.type.name.startsWith("table")) ? 120 : 0
 			}
 		}
 	}
 })
 
+const useYjs = useRoute().query.useYjs as string
+const useTwoEditors = ref(false)
+
 const { documentApi } = useTestDocumentApi(
 	editorOptions as any,
-	testDocuments
+	testDocuments,
+	{ useCollab: useYjs === "true" }
 )
 const docId = ref("root")
 </script>

package/src/runtime/components/EditorDemoControls.vue

@@ -1,33 +1,74 @@
 <template>
 <div
 	class="
+		max-w-[700px]
 		w-full
 		flex
-		items-stretch
+		flex-col
+		items-center
 		justify-center
 		gap-2
-		[&>*]:rounded-sm
+	"
+>
+	<div
+		class="
+			flex
+			gap-4
+			items-center
+			justify-center
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-md
+			p-2
+		"
+	>
+		<!-- external is to force a reload, otherwise the editors won't work because of how they're setup for the demo (document api is created here and would need to be recreated with the route changes) -->
+		<NuxtLink
+			v-if="useYjs !== undefined"
+			:to="{ path: '/', query: { } }"
+			:external="true"
+		>Go to Non-Yjs Example</NuxtLink>
+		<NuxtLink
+			v-else
+			:to="{ path: '/', query: { useYjs: 'true' } }"
+			:external="true"
+		>Go to Yjs Example </NuxtLink>
+		<WCheckbox v-model="useTwoEditors">
+			Use Two Editors (same document)
+		</WCheckbox>
+	</div>
+	<div
+		class="
+		flex
+		justify-center
+		items-center
+		gap-2
+		[&>*]:rounded-md
 		[&>*]:p-2
 		[&>*]:border
 		[&>*]:border-neutral-300
 		[&>*]:dark:border-neutral-700
+
 	"
->
-	<div class="flex items-center gap-2">
-		<span>
-			Global Theme:
-		</span>
-		<WDarkModeSwitcher/>
+	>
+		<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>
-	<CodeBlockThemePicker
-		:code-blocks-theme-list="codeBlocksThemeList"
-		v-model:code-blocks-theme="codeBlocksTheme"
-	/>
 </div>
 </template>
 
 <script setup lang="ts">
 import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+import { useRoute } from "nuxt/app"
 
 import CodeBlockThemePicker from "./CodeBlockThemePicker.vue"
 
@@ -35,4 +76,8 @@ defineProps<{
 	codeBlocksThemeList: string[]
 }>()
 const codeBlocksTheme = defineModel<string>("codeBlocksTheme", { required: true })
+
+const useTwoEditors = defineModel<boolean>("useTwoEditors", { required: true })
+
+const useYjs = useRoute().query.useYjs as string
 </script>