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

package/README.md

@@ -73,228 +73,6 @@ 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.
@@ -314,8 +92,7 @@ const extensions = [
   - 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.~~
-  - The `CodeEditor.client.vue` component now supports customizable light/dark themes with Catppuccin as the default.
+- Light/Dark themes are not yet supported in code-block syntax highlighting.
 
 ## 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.20",
+  "version": "0.1.22",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -30,7 +30,6 @@ 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 },
@@ -47,7 +46,6 @@ 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();
@@ -128,9 +126,7 @@ onMounted(async () => {
       // Keys related to the linter system
       ...lintKeymap
     ]),
-    EditorView.editable.of(!props.disabled),
-    // Reactivity extension for composables
-    createEditorReactivityExtension(editorInstance)
+    EditorView.editable.of(!props.disabled)
   ];
 });
 watch(
@@ -156,7 +152,6 @@ watch(
 );
 function handleReady(payload) {
   view.value = payload.view;
-  editorInstance.value = payload;
 }
 function iterate() {
   ast.value = [];

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

@@ -21,7 +21,6 @@ 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({
@@ -37,7 +36,6 @@ 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();
@@ -54,18 +52,11 @@ async function loadLanguage(info) {
   if (lang) {
     return await lang.load();
   }
-  return null;
 }
 onMounted(() => {
   const wysiwygPlugin = wysiwyg({
     lezer: {
-      codeLanguages: async (info) => {
-        const result = await loadLanguage(info);
-        if (result === null) {
-          return null;
-        }
-        return result;
-      }
+      codeLanguages: loadLanguage
     }
   });
   extensions.value = [
@@ -85,8 +76,7 @@ onMounted(() => {
     editorKeywordSearchPlugin,
     searchCompartment.of(searchOptionsFacet.of(props.searchOptions || { query: "" })),
     wysiwygPlugin,
-    EditorView.editable.of(unref(!props.disabled)),
-    createEditorReactivityExtension(editorInstance)
+    EditorView.editable.of(unref(!props.disabled))
   ];
   if (editorElement.value) {
     editorElement.value.addEventListener("internal-link-click", handleInternalLinkClick);
@@ -160,7 +150,6 @@ watch(
 );
 function handleReady(payload) {
   view.value = payload.view;
-  editorInstance.value = payload;
 }
 function log(...args) {
 }

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

@@ -1,9 +1,5 @@
 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;

package/dist/runtime/composables/useEditorFrontmatter.js

@@ -1,39 +1,26 @@
-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);
-  const frontmatter = computed(() => {
+  function getFrontmatter() {
     try {
-      const doc = editorUtils.doc.value;
+      const doc = editorUtils.getDoc();
       if (!doc) {
-        return {};
+        return { error: new Error("No document object found") };
       }
       return parseFrontmatter(doc);
     } catch (e) {
-      console.error("Error parsing frontmatter:", e);
+      console.log(e);
       return { error: e };
     }
-  });
-  function getFrontmatter() {
-    return frontmatter.value;
   }
   function updateFrontmatterProperties(properties) {
     try {
       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;
+      if (!doc) return false;
       let existingData = {};
-      if (firstNode && (firstNode.name === "Frontmatter" || firstNode.name === "YAMLFrontMatter")) {
+      if (doc.startsWith("---\n") || doc.startsWith("---\r\n")) {
         const { data, error } = getFrontmatter();
         if (data && !error) {
           existingData = data;
@@ -42,17 +29,14 @@ export function useEditorFrontmatter(editor) {
       const newData = { ...existingData, ...properties };
       return setFrontmatterProperties(newData);
     } catch (e) {
-      console.error("Error updating frontmatter properties:", e);
+      console.error("Error updating frontmatter:", e);
       return false;
     }
   }
   function setFrontmatterProperties(properties) {
     try {
       const doc = editorUtils.getDoc();
-      if (doc === void 0) {
-        console.warn("Editor not initialized or document is empty");
-        return false;
-      }
+      if (doc === void 0) return false;
       const newData = { ...properties };
       Object.keys(newData).forEach((key) => {
         if (newData[key] === void 0) {
@@ -64,11 +48,13 @@ export function useEditorFrontmatter(editor) {
       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);
+        const yamlStart = doc.indexOf("\n", 3) + 1;
+        const closingFenceIndex = doc.indexOf("\n---", yamlStart);
         if (closingFenceIndex !== -1) {
-          frontmatterEnd = closingFenceIndex + 4;
-          if (doc[frontmatterEnd] === "\n" || doc[frontmatterEnd] === "\r") {
+          const afterFence = closingFenceIndex + 4;
+          const nextChar = doc[afterFence];
+          if (nextChar === void 0 || nextChar === "\n" || nextChar === "\r") {
+            frontmatterEnd = afterFence;
           }
         }
       }
@@ -108,36 +94,32 @@ ${newYamlContent}
       }
       return true;
     } catch (e) {
-      console.error("Error setting frontmatter properties:", e);
+      console.error("Error setting frontmatter:", e);
       return false;
     }
   }
   function clearFrontmatter() {
     try {
       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 (!doc) return false;
+      if (!doc.startsWith("---\n") && !doc.startsWith("---\r\n")) {
+        return true;
       }
-      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: frontmatterStart, to: removeEnd, insert: "" }
-        });
+      const yamlStart = doc.indexOf("\n", 3) + 1;
+      if (yamlStart === 0) return true;
+      const closingFenceIndex = doc.indexOf("\n---", yamlStart);
+      if (closingFenceIndex === -1) return true;
+      const afterFence = closingFenceIndex + 4;
+      const nextChar = doc[afterFence];
+      if (nextChar !== void 0 && nextChar !== "\n" && nextChar !== "\r") {
         return true;
       }
+      let removeEnd = afterFence;
+      if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
+      if (doc[removeEnd] === "\n" || doc[removeEnd] === "\r") removeEnd++;
+      editorUtils.dispatch({
+        changes: { from: 0, to: removeEnd, insert: "" }
+      });
       return true;
     } catch (e) {
       console.error("Error clearing frontmatter:", e);
@@ -151,10 +133,6 @@ ${newYamlContent}
     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,37 +1,29 @@
 import type { SyntaxNode, Tree } from '@lezer/common';
 import type { Ref } from 'vue';
-import type { TransactionSpec, Extension } from '@codemirror/state';
+import type { TransactionSpec } 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 | undefined;
+    getDocAst: () => Tree;
     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,94 +1,50 @@
 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(doc2, options) {
+  function findAllMatches(doc, options) {
     const matches = [];
     const regex = createSearchRegex(options);
     let match;
-    while ((match = regex.exec(doc2)) !== null) {
+    while ((match = regex.exec(doc)) !== null) {
       matches.push({ from: match.index, to: match.index + match[0].length });
     }
     return matches;
   }
   function getDoc() {
-    return doc.value;
+    try {
+      return unref(view)?.state.doc.toString();
+    } catch (e) {
+      console.error(e);
+    }
   }
   function setDoc(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 }
+    unref(view)?.dispatch({
+      changes: { from: 0, to: unref(view).state.doc.length, insert: content }
     });
   }
   function getSelection() {
     return unref(view)?.state.selection.main;
   }
   function replaceSelection(text) {
-    const editorView = unref(view);
-    if (!editorView) {
-      console.warn("Editor not initialized");
-      return;
-    }
-    editorView.dispatch(editorView.state.replaceSelection(text));
+    unref(view)?.dispatch(unref(view).state.replaceSelection(text));
   }
   function dispatch(...specs) {
-    const editorView = unref(view);
-    if (!editorView) {
-      console.warn("Editor not initialized");
-      return;
-    }
-    editorView.dispatch(...specs);
+    unref(view)?.dispatch(...specs);
   }
   function getDocAst() {
-    const docContent = getDoc();
-    if (!docContent) return void 0;
-    return parseMarkdownToAST(docContent);
+    return parseMarkdownToAST(getDoc() || "");
   }
   function findNodesByType(tree, nodeTypeName) {
     const nodes = [];
@@ -102,9 +58,7 @@ export function useEditorUtils(editor) {
     return nodes;
   }
   function getDocNodesByType(nodeTypeName) {
-    const ast = getDocAst();
-    if (!ast) return [];
-    return findNodesByType(ast, nodeTypeName);
+    return findNodesByType(getDocAst(), nodeTypeName);
   }
   function hasFrontmatter() {
     const ast = getDocAst();
@@ -114,13 +68,13 @@ export function useEditorUtils(editor) {
   }
   function search(options) {
     searchQuery.value = options;
-    const doc2 = getDoc();
-    if (!doc2 || !options.query) {
+    const doc = getDoc();
+    if (!doc || !options.query) {
       searchResults.value = [];
       currentMatchIndex.value = -1;
       return;
     }
-    searchResults.value = findAllMatches(doc2, options);
+    searchResults.value = findAllMatches(doc, options);
     currentMatchIndex.value = -1;
   }
   function selectAndScrollToMatch(match, verticalScrollStrategy = "start", verticalMargin) {
@@ -168,9 +122,9 @@ export function useEditorUtils(editor) {
   }
   function replaceAll(replacement) {
     if (!searchQuery.value || !searchQuery.value.query) return;
-    const doc2 = getDoc();
-    if (!doc2) return;
-    const matches = findAllMatches(doc2, searchQuery.value);
+    const doc = getDoc();
+    if (!doc) return;
+    const matches = findAllMatches(doc, searchQuery.value);
     if (matches.length === 0) return;
     const changes = matches.map((m) => ({
       from: m.from,
@@ -189,36 +143,24 @@ 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/dist/runtime/utils/frontmatter.d.ts

@@ -1,4 +1,8 @@
 import type { Frontmatter } from '../editor/types/editor-types.js';
+/**
+ * Lightning-fast frontmatter parser using string operations instead of AST parsing.
+ * Optimized for performance - parses in microseconds instead of milliseconds.
+ */
 export declare function parseFrontmatter(markdownText: string): {
     data?: Frontmatter;
     error?: Error;

package/dist/runtime/utils/frontmatter.js

@@ -1,16 +1,25 @@
 import { load } from "js-yaml";
-import { parseMarkdownToAST } from "./markdownParser.js";
 export function parseFrontmatter(markdownText) {
   if (!markdownText) {
     return { error: new Error("No markdown text provided") };
   }
-  const tree = parseMarkdownToAST(markdownText);
-  const firstNode = tree.topNode.firstChild;
-  if (!firstNode || firstNode.name !== "YAMLFrontMatter") {
+  if (!markdownText.startsWith("---\n") && !markdownText.startsWith("---\r\n")) {
     return { data: {} };
   }
-  const contentNode = firstNode.getChild("YAMLContent");
-  const yamlContent = contentNode ? markdownText.slice(contentNode.from, contentNode.to) : "";
+  const yamlStart = markdownText.indexOf("\n", 3) + 1;
+  if (yamlStart === 0) {
+    return { data: {} };
+  }
+  const closingFenceIndex = markdownText.indexOf("\n---", yamlStart);
+  if (closingFenceIndex === -1) {
+    return { data: {} };
+  }
+  const afterFence = closingFenceIndex + 4;
+  const nextChar = markdownText[afterFence];
+  if (nextChar !== void 0 && nextChar !== "\n" && nextChar !== "\r") {
+    return { data: {} };
+  }
+  const yamlContent = markdownText.slice(yamlStart, closingFenceIndex);
   try {
     const data = load(yamlContent);
     if (data === null || data === void 0) {

package/package.json

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