@type32/codemirror-rich-obsidian-editor 0.1.18 → 0.1.20

package/README.md

@@ -73,6 +73,228 @@ Customize the editor fonts:
 }
 ```
 
+## Components
+
+### `Editor.client.vue`
+
+The main WYSIWYG Obsidian-Flavored Markdown editor component.
+
+**Props:**
+- `v-model`: Document content (string)
+- `internalLinkMap`: Array of internal link mappings for custom link rendering
+- `specialCodeBlockMap`: Array of custom code block component mappings
+- `bracketClosing`: Enable automatic bracket closing (default: true)
+- `foldGutter`: Enable code folding gutter (default: true)
+- `disabled`: Disable editing (default: false)
+- `searchOptions`: Search configuration object
+
+**Events:**
+- `@internal-link-click`: Emitted when an internal link is clicked
+- `@external-link-click`: Emitted when an external link is clicked
+
+### `CodeEditor.client.vue`
+
+A styled code-only editor with syntax highlighting for multiple languages.
+
+**Props:**
+- `v-model`: Code content (string)
+- `language`: Programming language for syntax highlighting (e.g., 'javascript', 'typescript', 'json', 'yaml')
+- `lightTheme`: Custom CodeMirror theme extension for light mode (default: Catppuccin Latte)
+- `darkTheme`: Custom CodeMirror theme extension for dark mode (default: Catppuccin Mocha)
+- `colorMode`: Color mode ('dark' or 'light', default: 'dark')
+- `bracketClosing`: Enable automatic bracket closing (default: true)
+- `foldGutter`: Enable code folding gutter (default: true)
+- `disabled`: Disable editing (default: false)
+
+**Example Usage:**
+
+```vue
+<template>
+  <CodeEditor 
+    v-model="code"
+    language="typescript"
+    :color-mode="colorMode"
+    :dark-theme="customDarkTheme"
+    :light-theme="customLightTheme"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+const code = ref('console.log("Hello World")')
+const colorMode = ref('dark')
+
+// Optional: Use custom themes
+const customDarkTheme = oneDark
+const customLightTheme = undefined // Will use default Catppuccin Latte
+</script>
+```
+
+## Composables
+
+This module provides powerful composables for interacting with the editor programmatically. All composables are **reactive** and **null-safe** during initialization.
+
+### `useEditorUtils(editor: Ref)`
+
+Provides utilities for document manipulation, AST operations, and search functionality.
+
+#### Reactive Properties
+- **`doc`**: Computed property that automatically updates when the editor content changes
+- **`view`**: Computed property for the CodeMirror EditorView instance
+- **`searchResults`**: Ref containing current search matches
+- **`currentMatchIndex`**: Ref for the currently selected search match
+
+#### Document Operations
+- **`getDoc()`**: Get current document content (snapshot)
+- **`setDoc(content: string)`**: Replace entire document
+- **`getSelection()`**: Get current selection
+- **`replaceSelection(text: string)`**: Replace selected text
+- **`dispatch(...specs: TransactionSpec[])`**: Dispatch editor transactions
+
+#### AST Operations
+- **`getDocAst()`**: Get parsed markdown AST
+- **`findNodesByType(tree: Tree, nodeTypeName: string)`**: Find nodes by type
+- **`getDocNodesByType(nodeTypeName: string)`**: Find nodes in current document
+- **`hasFrontmatter()`**: Check if document has frontmatter
+
+#### Search Operations
+- **`search(options: SearchOptions)`**: Search in document
+- **`findNext()`**, **`findPrevious()`**: Navigate search results
+- **`replaceCurrent(replacement: string)`**: Replace current match
+- **`replaceAll(replacement: string)`**: Replace all matches
+
+#### Example Usage
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const editor = ref()
+const { doc, frontmatter, getDoc, setDoc } = useEditorUtils(editor)
+
+// Reactive: automatically updates when editor content changes
+watch(doc, (newContent) => {
+  console.log('Document changed:', newContent)
+})
+
+// Non-reactive: get current snapshot
+function saveDocument() {
+  const content = getDoc()
+  // Save content...
+}
+</script>
+```
+
+### `useEditorFrontmatter<T>(editor: Ref)`
+
+Provides utilities for managing YAML frontmatter with full reactivity and type safety.
+
+#### Reactive Properties
+- **`frontmatter`**: Computed property that automatically parses and updates when frontmatter changes
+  - Returns `{ data?: T, error?: Error }`
+
+#### Methods
+- **`getFrontmatter()`**: Get current frontmatter (snapshot)
+- **`setFrontmatterProperties(properties: Partial<T>)`**: Replace all frontmatter
+  - Returns `boolean` indicating success
+  - Removes frontmatter entirely if properties is empty
+- **`updateFrontmatterProperties(properties: Partial<T>)`**: Merge with existing frontmatter
+  - Returns `boolean` indicating success
+  - Preserves existing properties
+- **`clearFrontmatter()`**: Completely remove frontmatter from document
+  - Returns `boolean` indicating success
+  - Removes YAML delimiters and trailing newlines
+- **`addFrontmatterProperty(key: string, value: any)`**: Add/update single property
+  - Returns `boolean` indicating success
+- **`removeFrontmatterProperty(key: string)`**: Remove single property
+  - Returns `boolean` indicating success
+
+#### Example Usage
+
+```vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface MyFrontmatter {
+  title?: string
+  tags?: string[]
+  date?: string
+}
+
+const editor = ref()
+const { 
+  frontmatter, 
+  setFrontmatterProperties, 
+  updateFrontmatterProperties,
+  clearFrontmatter 
+} = useEditorFrontmatter<MyFrontmatter>(editor)
+
+// Reactive: automatically updates when frontmatter changes
+watch(frontmatter, (fm) => {
+  if (fm.data) {
+    console.log('Title:', fm.data.title)
+    console.log('Tags:', fm.data.tags)
+  }
+})
+
+// Replace all frontmatter
+function setMetadata() {
+  setFrontmatterProperties({
+    title: 'My Document',
+    tags: ['vue', 'nuxt'],
+    date: new Date().toISOString()
+  })
+}
+
+// Update specific properties (preserves other properties)
+function addTag(tag: string) {
+  const currentTags = frontmatter.value.data?.tags || []
+  updateFrontmatterProperties({
+    tags: [...currentTags, tag]
+  })
+}
+
+// Remove all frontmatter
+function removeFrontmatter() {
+  clearFrontmatter()
+}
+</script>
+```
+
+### Null Safety
+
+All composables are safe to use during Vue hydration when the editor ref may be `undefined` or `null`:
+
+```typescript
+// Safe to call even if editor isn't ready yet
+const { doc, frontmatter, setDoc } = useEditorUtils(editor)
+
+// Reactive properties will be undefined until editor is initialized
+console.log(doc.value) // undefined initially
+
+// Methods return false or empty values if editor isn't ready
+const success = setDoc('New content') // Returns undefined if not ready
+```
+
+### Enabling Reactivity
+
+The reactive features are **automatically enabled** in both `Editor.client.vue` and `CodeEditor.client.vue` components. No additional setup is required.
+
+If you're creating a custom editor setup, include the reactivity extension:
+
+```typescript
+import { createEditorReactivityExtension } from '@type32/codemirror-rich-obsidian-editor/composables/useEditorUtils'
+
+const editorInstance = shallowRef()
+
+const extensions = [
+  // ... your other extensions
+  createEditorReactivityExtension(editorInstance)
+]
+```
+
 ## Known Issues
 - Same as `segphault/codemirror-rich-markdoc`, the rendered block replacement code is not yet optimized, so it recomputes all of the replaced regions on every operation instead of only updating them as needed.
   - Progress is being made on this issue: we've optimized the Rich Text Plugin to update based on only the updated ranges instead of the entire document.
@@ -92,7 +314,8 @@ Customize the editor fonts:
   - We have a mapping prop that allows developers to add their own link-to-file implementations. (Specific to Vue/Nuxt)
 - ~~Support for code-block mermaid graph rendering & bases is lacking.~~
   - We have a mapping prop that allows developers to add their own custom codeblock widgets. (Specific to Vue/Nuxt)
-- Light/Dark themes are not yet supported in code-block syntax highlighting.
+- ~~Light/Dark themes are not yet supported in code-block syntax highlighting.~~
+  - The `CodeEditor.client.vue` component now supports customizable light/dark themes with Catppuccin as the default.
 
 ## Contributions
 - To anyone who wants to fork this, **make sure you preserve the original credits and references to the libraries that are used in this project. It means a lot to them and to us.**

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@type32/codemirror-rich-obsidian-editor",
   "configKey": "cmOfmEditor",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/CodeEditor.client.vue

@@ -30,6 +30,7 @@ import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap }
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { lintKeymap } from "@codemirror/lint";
 import { catppuccinLatte, catppuccinMocha } from "@catppuccin/codemirror";
+import { createEditorReactivityExtension } from "../composables/useEditorUtils";
 const doc = defineModel({ type: String });
 const props = defineProps({
   class: { type: String, required: false },
@@ -46,6 +47,7 @@ const props = defineProps({
 const emit = defineEmits([]);
 const extensions = shallowRef([]);
 const view = shallowRef();
+const editorInstance = shallowRef();
 const ast = ref([]);
 const languageCompartment = new Compartment();
 const themeCompartment = new Compartment();
@@ -126,7 +128,9 @@ onMounted(async () => {
       // Keys related to the linter system
       ...lintKeymap
     ]),
-    EditorView.editable.of(!props.disabled)
+    EditorView.editable.of(!props.disabled),
+    // Reactivity extension for composables
+    createEditorReactivityExtension(editorInstance)
   ];
 });
 watch(
@@ -152,6 +156,7 @@ watch(
 );
 function handleReady(payload) {
   view.value = payload.view;
+  editorInstance.value = payload;
 }
 function iterate() {
   ast.value = [];

package/dist/runtime/components/Editor.client.vue

@@ -21,6 +21,7 @@ import { internalLinkMapFacet } from "../editor/plugins/linkMappingConfig";
 import { specialCodeBlockMapFacet } from "../editor/plugins/specialCodeBlockMappingConfig";
 import { customBracketClosingConfig } from "../editor/plugins/customBracketClosingConfig";
 import { editorKeywordSearchPlugin, searchOptionsFacet } from "../editor/plugins/codemirror-editor-plugins/editorKeywordSearchPlugin";
+import { createEditorReactivityExtension } from "../composables/useEditorUtils";
 import { ref, shallowRef, computed, onMounted, onBeforeUnmount, unref, watch } from "vue";
 const doc = defineModel({ type: String });
 const props = defineProps({
@@ -36,6 +37,7 @@ const props = defineProps({
 const emit = defineEmits(["internal-link-click", "external-link-click"]);
 const extensions = shallowRef([]);
 const view = shallowRef();
+const editorInstance = shallowRef();
 const ast = ref([]);
 const internalLinkCompartment = new Compartment();
 const specialCodeBlockCompartment = new Compartment();
@@ -52,11 +54,18 @@ async function loadLanguage(info) {
   if (lang) {
     return await lang.load();
   }
+  return null;
 }
 onMounted(() => {
   const wysiwygPlugin = wysiwyg({
     lezer: {
-      codeLanguages: loadLanguage
+      codeLanguages: async (info) => {
+        const result = await loadLanguage(info);
+        if (result === null) {
+          return null;
+        }
+        return result;
+      }
     }
   });
   extensions.value = [
@@ -76,7 +85,8 @@ onMounted(() => {
     editorKeywordSearchPlugin,
     searchCompartment.of(searchOptionsFacet.of(props.searchOptions || { query: "" })),
     wysiwygPlugin,
-    EditorView.editable.of(unref(!props.disabled))
+    EditorView.editable.of(unref(!props.disabled)),
+    createEditorReactivityExtension(editorInstance)
   ];
   if (editorElement.value) {
     editorElement.value.addEventListener("internal-link-click", handleInternalLinkClick);
@@ -150,6 +160,7 @@ watch(
 );
 function handleReady(payload) {
   view.value = payload.view;
+  editorInstance.value = payload;
 }
 function log(...args) {
 }

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

@@ -1,5 +1,9 @@
 import { type Ref } from 'vue';
 export declare function useEditorFrontmatter<T extends object = {}>(editor: Ref<any>): {
+    frontmatter: import("vue").ComputedRef<{
+        data?: T;
+        error?: Error;
+    }>;
     getFrontmatter: () => {
         data?: T;
         error?: Error;
@@ -7,6 +11,6 @@ export declare function useEditorFrontmatter<T extends object = {}>(editor: Ref<
     updateFrontmatterProperties: (properties: Partial<T>) => boolean;
     setFrontmatterProperties: (properties: Partial<T>) => boolean;
     clearFrontmatter: () => boolean;
-    addFrontmatterProperty: (key: string, value: any) => void;
-    removeFrontmatterProperty: (key: string) => void;
+    addFrontmatterProperty: (key: string, value: any) => boolean;
+    removeFrontmatterProperty: (key: string) => boolean;
 };

package/dist/runtime/composables/useEditorFrontmatter.js

@@ -1,24 +1,36 @@
+import { computed } from "vue";
 import { dump } from "js-yaml";
 import { useEditorUtils } from "./useEditorUtils.js";
 import { parseFrontmatter } from "../utils/frontmatter.js";
 export function useEditorFrontmatter(editor) {
   const editorUtils = useEditorUtils(editor);
-  function getFrontmatter() {
+  const frontmatter = computed(() => {
     try {
-      const doc = editorUtils.getDoc();
+      const doc = editorUtils.doc.value;
       if (!doc) {
-        return { error: new Error("No document object found") };
+        return {};
       }
       return parseFrontmatter(doc);
     } catch (e) {
-      console.log(e);
+      console.error("Error parsing frontmatter:", e);
       return { error: e };
     }
+  });
+  function getFrontmatter() {
+    return frontmatter.value;
   }
   function updateFrontmatterProperties(properties) {
     try {
-      const doc = editorUtils.getDoc() || "";
-      const ast = editorUtils.parseMarkdownToAST(doc);
+      const doc = editorUtils.getDoc();
+      if (!doc) {
+        console.warn("Editor not initialized or document is empty");
+        return false;
+      }
+      const ast = editorUtils.getDocAst();
+      if (!ast) {
+        console.warn("Failed to parse document AST");
+        return false;
+      }
       const firstNode = ast.topNode.firstChild;
       let existingData = {};
       if (firstNode && (firstNode.name === "Frontmatter" || firstNode.name === "YAMLFrontMatter")) {
@@ -30,20 +42,16 @@ export function useEditorFrontmatter(editor) {
       const newData = { ...existingData, ...properties };
       return setFrontmatterProperties(newData);
     } catch (e) {
-      console.log(e);
+      console.error("Error updating frontmatter properties:", e);
       return false;
     }
   }
   function setFrontmatterProperties(properties) {
     try {
-      const doc = editorUtils.getDoc() || "";
-      const ast = editorUtils.parseMarkdownToAST(doc);
-      const firstNode = ast.topNode.firstChild;
-      let frontmatterNodeRange = { from: -1, to: -1 };
-      if (firstNode && (firstNode.name === "Frontmatter" || firstNode.name === "YAMLFrontMatter")) {
-        frontmatterNodeRange = { from: firstNode.from, to: firstNode.to };
-        const { error } = getFrontmatter();
-        if (error) return false;
+      const doc = editorUtils.getDoc();
+      if (doc === void 0) {
+        console.warn("Editor not initialized or document is empty");
+        return false;
       }
       const newData = { ...properties };
       Object.keys(newData).forEach((key) => {
@@ -52,15 +60,28 @@ export function useEditorFrontmatter(editor) {
         }
       });
       const hasContent = Object.keys(newData).length > 0;
+      let frontmatterStart = -1;
+      let frontmatterEnd = -1;
+      if (doc.startsWith("---\n") || doc.startsWith("---\r\n")) {
+        frontmatterStart = 0;
+        const searchStart = doc.indexOf("\n", 3) + 1;
+        const closingFenceIndex = doc.indexOf("\n---", searchStart);
+        if (closingFenceIndex !== -1) {
+          frontmatterEnd = closingFenceIndex + 4;
+          if (doc[frontmatterEnd] === "\n" || doc[frontmatterEnd] === "\r") {
+          }
+        }
+      }
+      const hasFrontmatter = frontmatterStart !== -1 && frontmatterEnd !== -1;
       if (!hasContent) {
-        if (frontmatterNodeRange.from !== -1) {
-          const endPos = frontmatterNodeRange.to;
-          let removeEnd = endPos;
-          if (doc[endPos] === "\n") removeEnd++;
-          if (doc[endPos + 1] === "\n") removeEnd++;
+        if (hasFrontmatter) {
+          let removeEnd = frontmatterEnd;
+          if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
+          if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
           editorUtils.dispatch({
-            changes: { from: frontmatterNodeRange.from, to: removeEnd, insert: "" }
+            changes: { from: frontmatterStart, to: removeEnd, insert: "" }
           });
+          return true;
         }
         return false;
       }
@@ -68,11 +89,11 @@ export function useEditorFrontmatter(editor) {
       const newFrontmatterBlock = `---
 ${newYamlContent}
 ---`;
-      if (frontmatterNodeRange.from !== -1) {
+      if (hasFrontmatter) {
         editorUtils.dispatch({
           changes: {
-            from: frontmatterNodeRange.from,
-            to: frontmatterNodeRange.to,
+            from: frontmatterStart,
+            to: frontmatterEnd,
             insert: newFrontmatterBlock
           }
         });
@@ -87,37 +108,53 @@ ${newYamlContent}
       }
       return true;
     } catch (e) {
-      console.log(e);
+      console.error("Error setting frontmatter properties:", e);
       return false;
     }
   }
   function clearFrontmatter() {
     try {
-      const doc = editorUtils.getDoc() || "";
-      const ast = editorUtils.parseMarkdownToAST(doc);
-      const firstNode = ast.topNode.firstChild;
-      if (firstNode && (firstNode.name === "Frontmatter" || firstNode.name === "YAMLFrontMatter")) {
-        const endPos = firstNode.to;
-        let removeEnd = endPos;
-        if (doc[endPos] === "\n") removeEnd++;
-        if (doc[endPos + 1] === "\n") removeEnd++;
+      const doc = editorUtils.getDoc();
+      if (!doc) {
+        console.warn("Editor not initialized or document is empty");
+        return false;
+      }
+      let frontmatterStart = -1;
+      let frontmatterEnd = -1;
+      if (doc.startsWith("---\n") || doc.startsWith("---\r\n")) {
+        frontmatterStart = 0;
+        const searchStart = doc.indexOf("\n", 3) + 1;
+        const closingFenceIndex = doc.indexOf("\n---", searchStart);
+        if (closingFenceIndex !== -1) {
+          frontmatterEnd = closingFenceIndex + 4;
+        }
+      }
+      if (frontmatterStart !== -1 && frontmatterEnd !== -1) {
+        let removeEnd = frontmatterEnd;
+        if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
+        if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
         editorUtils.dispatch({
-          changes: { from: firstNode.from, to: removeEnd, insert: "" }
+          changes: { from: frontmatterStart, to: removeEnd, insert: "" }
         });
+        return true;
       }
       return true;
     } catch (e) {
-      console.log(e);
+      console.error("Error clearing frontmatter:", e);
       return false;
     }
   }
   function addFrontmatterProperty(key, value) {
-    updateFrontmatterProperties({ [key]: value });
+    return updateFrontmatterProperties({ [key]: value });
   }
   function removeFrontmatterProperty(key) {
-    updateFrontmatterProperties({ [key]: void 0 });
+    return updateFrontmatterProperties({ [key]: void 0 });
   }
   return {
+    // Reactive properties
+    frontmatter,
+    // Reactive computed frontmatter data
+    // Methods
     getFrontmatter,
     updateFrontmatterProperties,
     setFrontmatterProperties,

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

@@ -1,29 +1,37 @@
 import type { SyntaxNode, Tree } from '@lezer/common';
 import type { Ref } from 'vue';
-import type { TransactionSpec } from '@codemirror/state';
+import type { TransactionSpec, Extension } from '@codemirror/state';
 import { parseMarkdownToAST } from '../utils/markdownParser.js';
 import type { SearchMatch, SearchOptions } from '../editor/types/editor-types.js';
+/**
+ * Creates a CodeMirror extension that enables reactive composables.
+ * This should be added to the editor's extensions array.
+ */
+export declare function createEditorReactivityExtension(editorRef: Ref<any>): Extension;
 export declare function useEditorUtils(editor: Ref<any>): {
+    doc: import("vue").ComputedRef<any>;
+    view: import("vue").ComputedRef<any>;
+    searchResults: Ref<{
+        from: number;
+        to: number;
+    }[], SearchMatch[] | {
+        from: number;
+        to: number;
+    }[]>;
+    currentMatchIndex: Ref<number, number>;
+    triggerReactivity: () => void;
     getDoc: () => string | undefined;
     setDoc: (content: string) => void;
     getSelection: () => any;
     replaceSelection: (text: string) => void;
     dispatch: (...specs: TransactionSpec[]) => void;
     parseMarkdownToAST: typeof parseMarkdownToAST;
-    getDocAst: () => Tree;
+    getDocAst: () => Tree | undefined;
     findNodesByType: (tree: Tree, nodeTypeName: string) => SyntaxNode[];
     getDocNodesByType: (nodeTypeName: string) => SyntaxNode[];
     hasFrontmatter: () => boolean;
     search: (options: SearchOptions) => void;
     replaceAll: (replacement: string) => void;
-    searchResults: Ref<{
-        from: number;
-        to: number;
-    }[], SearchMatch[] | {
-        from: number;
-        to: number;
-    }[]>;
-    currentMatchIndex: Ref<number, number>;
     findNext: () => void;
     findPrevious: () => void;
     replaceCurrent: (replacement: string) => void;

package/dist/runtime/composables/useEditorUtils.js

@@ -1,50 +1,94 @@
 import { computed, ref, unref } from "vue";
 import { EditorView } from "@codemirror/view";
 import { parseMarkdownToAST } from "../utils/markdownParser.js";
+const reactivityCallbacks = /* @__PURE__ */ new WeakMap();
+export function createEditorReactivityExtension(editorRef) {
+  return EditorView.updateListener.of((update) => {
+    if (update.docChanged) {
+      const callbacks = reactivityCallbacks.get(editorRef);
+      if (callbacks) {
+        callbacks.forEach((cb) => cb());
+      }
+    }
+  });
+}
 export function useEditorUtils(editor) {
   const view = computed(() => {
     const instance = unref(editor);
     if (!instance) return;
     return instance.view ?? instance;
   });
+  const docVersion = ref(0);
+  if (!reactivityCallbacks.has(editor)) {
+    reactivityCallbacks.set(editor, /* @__PURE__ */ new Set());
+  }
+  const callbacks = reactivityCallbacks.get(editor);
+  const triggerReactivity = () => {
+    docVersion.value++;
+  };
+  callbacks.add(triggerReactivity);
+  const doc = computed(() => {
+    docVersion.value;
+    try {
+      const editorView = unref(view);
+      if (!editorView) return void 0;
+      return editorView.state.doc.toString();
+    } catch (e) {
+      console.error("Error getting document:", e);
+      return void 0;
+    }
+  });
   const searchResults = ref([]);
   const currentMatchIndex = ref(-1);
   const searchQuery = ref(null);
   function createSearchRegex(options) {
     return new RegExp(options.query, options.caseSensitive ? "g" : "gi");
   }
-  function findAllMatches(doc, options) {
+  function findAllMatches(doc2, options) {
     const matches = [];
     const regex = createSearchRegex(options);
     let match;
-    while ((match = regex.exec(doc)) !== null) {
+    while ((match = regex.exec(doc2)) !== null) {
       matches.push({ from: match.index, to: match.index + match[0].length });
     }
     return matches;
   }
   function getDoc() {
-    try {
-      return unref(view)?.state.doc.toString();
-    } catch (e) {
-      console.error(e);
-    }
+    return doc.value;
   }
   function setDoc(content) {
-    unref(view)?.dispatch({
-      changes: { from: 0, to: unref(view).state.doc.length, insert: content }
+    const editorView = unref(view);
+    if (!editorView) {
+      console.warn("Editor not initialized");
+      return;
+    }
+    editorView.dispatch({
+      changes: { from: 0, to: editorView.state.doc.length, insert: content }
     });
   }
   function getSelection() {
     return unref(view)?.state.selection.main;
   }
   function replaceSelection(text) {
-    unref(view)?.dispatch(unref(view).state.replaceSelection(text));
+    const editorView = unref(view);
+    if (!editorView) {
+      console.warn("Editor not initialized");
+      return;
+    }
+    editorView.dispatch(editorView.state.replaceSelection(text));
   }
   function dispatch(...specs) {
-    unref(view)?.dispatch(...specs);
+    const editorView = unref(view);
+    if (!editorView) {
+      console.warn("Editor not initialized");
+      return;
+    }
+    editorView.dispatch(...specs);
   }
   function getDocAst() {
-    return parseMarkdownToAST(getDoc() || "");
+    const docContent = getDoc();
+    if (!docContent) return void 0;
+    return parseMarkdownToAST(docContent);
   }
   function findNodesByType(tree, nodeTypeName) {
     const nodes = [];
@@ -58,7 +102,9 @@ export function useEditorUtils(editor) {
     return nodes;
   }
   function getDocNodesByType(nodeTypeName) {
-    return findNodesByType(getDocAst(), nodeTypeName);
+    const ast = getDocAst();
+    if (!ast) return [];
+    return findNodesByType(ast, nodeTypeName);
   }
   function hasFrontmatter() {
     const ast = getDocAst();
@@ -68,13 +114,13 @@ export function useEditorUtils(editor) {
   }
   function search(options) {
     searchQuery.value = options;
-    const doc = getDoc();
-    if (!doc || !options.query) {
+    const doc2 = getDoc();
+    if (!doc2 || !options.query) {
       searchResults.value = [];
       currentMatchIndex.value = -1;
       return;
     }
-    searchResults.value = findAllMatches(doc, options);
+    searchResults.value = findAllMatches(doc2, options);
     currentMatchIndex.value = -1;
   }
   function selectAndScrollToMatch(match, verticalScrollStrategy = "start", verticalMargin) {
@@ -122,9 +168,9 @@ export function useEditorUtils(editor) {
   }
   function replaceAll(replacement) {
     if (!searchQuery.value || !searchQuery.value.query) return;
-    const doc = getDoc();
-    if (!doc) return;
-    const matches = findAllMatches(doc, searchQuery.value);
+    const doc2 = getDoc();
+    if (!doc2) return;
+    const matches = findAllMatches(doc2, searchQuery.value);
     if (matches.length === 0) return;
     const changes = matches.map((m) => ({
       from: m.from,
@@ -143,24 +189,36 @@ export function useEditorUtils(editor) {
     });
   }
   return {
+    // Reactive properties
+    doc,
+    // Reactive computed document content
+    view,
+    // Reactive computed editor view
+    searchResults,
+    currentMatchIndex,
+    // Reactivity helpers
+    triggerReactivity,
+    // Manual trigger for reactivity
+    // Document operations
     getDoc,
     setDoc,
     getSelection,
     replaceSelection,
     dispatch,
+    // AST operations
     parseMarkdownToAST,
     // Re-exported from utils for convenience
     getDocAst,
     findNodesByType,
     getDocNodesByType,
     hasFrontmatter,
+    // Search operations
     search,
     replaceAll,
-    searchResults,
-    currentMatchIndex,
     findNext,
     findPrevious,
     replaceCurrent,
+    // Scroll operations
     scrollToNode
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@type32/codemirror-rich-obsidian-editor",
-	"version": "0.1.18",
+	"version": "0.1.20",
 	"description": "OFM Editor Component for Nuxt.",
 	"repository": "https://github.com/Type-32/codemirror-rich-obsidian",
 	"license": "MIT",