@type32/codemirror-rich-obsidian-editor 0.1.5 → 0.1.7

package/README.md

@@ -9,6 +9,7 @@
 - https://github.com/mgmeyers/obsidian-indentation-guides, for indentation guides
 - Markdown-It
 - https://github.com/thecodrr/alfaaz, for insanely fast word/line-counting functions
+- https://github.com/yuri2peter/codemirror-ai-enhancer, for providing the simple AI completion editing experience
 
 ### Related References & Resources
 - https://github.com/heavycircle/remark-obsidian, for mostly wiki link alias & highlights & callouts parsing
@@ -18,7 +19,7 @@
 - https://github.com/nothingislost/obsidian-cm6-attributes
 
 ## Disclaimer
-I have used Gemini 2.5 Pro in the process of developing this editor numerous times, so do expect errors or inconsistencies in some parts of the code.
+I have used Gemini 2.5 Pro + Gemini 3 Pro Preview + Claude Sonnet 4.5 in the process of developing this editor numerous times, so do expect errors or inconsistencies in some parts of the code.
 
 ## Introduction
 Do I even need an intro?

package/dist/module.json

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

package/dist/runtime/assets/css/editor.css

@@ -1 +1 @@
-@import url("https://fonts.cdnfonts.com/css/segoe-ui-variable-static-display");@import url("https://fonts.cdnfonts.com/css/sf-pro-display");@import "katex/dist/katex.min.css";@import "tailwindcss";@import "@nuxt/ui";@theme{--font-sans:"Public Sans","Inter","SF Pro Display","Segoe UI Variable Static Display",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-editor:"Inter","SF Pro Display","Segoe UI Variable Static Display",var(--font-sans,sans-serif);--font-editor-code:"Google Sans Code","JetBrains Mono","Consolas",var(--font-mono,ui-monospace);--list-indent:1.5rem;--indent-level:0}.cm-content{@apply font-editor}.cm-content .cm-escape,.cm-content .cm-meta{@apply text-dimmed! no-underline!}.cm-content .cm-heading{text-decoration:none!important}.cm-content .cm-mono{@apply font-editor-code bg-muted px-1 rounded-lg border border-default text-toned!}.cm-content .cm-hashtag{@apply bg-gradient-to-t from-primary/20! to-primary/10! ring ring-primary/50! px-1.5 text-sm rounded-4xl text-primary! inline-flex}.cm-content .cm-hashtag .cm-heading{@apply text-primary!}.cm-content .cm-highlighted{@apply bg-primary/20 text-primary px-0.5 rounded-sm}.cm-content .cm-internal-link-display,.cm-content .cm-internal-link-path,.cm-content .cm-internal-link-subpath,.cm-content .cm-link{@apply text-primary! underline}.cm-content .cm-internal-link-display[data-type=internal-link],.cm-content .cm-internal-link-path[data-type=internal-link],.cm-content .cm-internal-link-subpath[data-type=internal-link],.cm-content .cm-link[data-type=internal-link]{@apply cursor-pointer}.cm-content .cm-clickable-link{@apply cursor-pointer}.cm-content .cm-unresolved-link .cm-internal-link-display,.cm-content .cm-unresolved-link .cm-internal-link-path,.cm-content .cm-unresolved-link .cm-internal-link-subpath,.cm-content .cm-unresolved-link .cm-link{@apply text-error/75! cursor-not-allowed}.cm-content .cm-codeblock,.cm-content .cm-line-codeblock-begin,.cm-content .cm-line-codeblock-end{@apply font-editor-code py-0 my-0 text-sm! font-semibold border-x border-x-default mx-2 px-3 bg-muted relative}.cm-content .cm-codeblock .cm-codeblock-flair-container,.cm-content .cm-line-codeblock-begin .cm-codeblock-flair-container,.cm-content .cm-line-codeblock-end .cm-codeblock-flair-container{@apply absolute top-2 right-2 overflow-visible z-10}.cm-content .cm-codeblock .cm-codeblock-flair-container .cm-codeblock-copy-button,.cm-content .cm-line-codeblock-begin .cm-codeblock-flair-container .cm-codeblock-copy-button,.cm-content .cm-line-codeblock-end .cm-codeblock-flair-container .cm-codeblock-copy-button{@apply rounded hover:bg-accented transition duration-200 cursor-pointer py-1.5 px-2 font-sans text-dimmed z-10}.cm-content .cm-codeblock .cm-mono,.cm-content .cm-line-codeblock-begin .cm-mono,.cm-content .cm-line-codeblock-end .cm-mono{@apply border-none bg-none text-default}.cm-content .cm-line-codeblock-content{@apply border-x border-x-accented}.cm-content .cm-line-codeblock-begin{@apply rounded-t-lg border-t border-x border-t-accented border-x-accented pt-1 px-1}.cm-content .cm-line-codeblock-end{@apply rounded-b-lg border-b border-x border-b-accented border-x-accented pb-1 px-1}.cm-content .cm-task-checkbox-wrapper{@apply size-4 mb-0.5 rounded-xl border border-default bg-default inline-flex items-center justify-center align-middle cursor-pointer}.cm-content .cm-task-checkbox-wrapper[data-checked=true]{@apply bg-primary border border-primary}.cm-content .cm-task-checkbox-wrapper[data-checked=true]:before{content:"✔";@apply text-xs text-inverted}.cm-content .cm-task-checkbox-wrapper[data-special]{@apply font-editor-code text-xs text-highlighted}.cm-content .cm-task-checked{@apply line-through text-dimmed}.cm-content .cm-tooltip{@apply rounded-lg bg-default/70 shadow-lg backdrop-blur-sm border border-default font-sans p-2}.cm-content .cm-tooltip ul{@apply grid grid-cols-1 font-sans}.cm-content .cm-tooltip ul li{@apply grid grid-cols-1 rounded font-sans gap-1}.cm-content .cm-tooltip ul li .cm-completionLabel{@apply mx-1 mt-1 text-toned}.cm-content .cm-tooltip ul li .cm-completionDetail{@apply text-xs font-editor-code bg-elevated w-fit rounded text-muted px-1 mb-1}.cm-content .cm-tooltip ul li[aria-selected=true]{@apply bg-accented/70 backdrop-blur-sm border border-accented}.cm-content .cm-fold-widget{@apply absolute -left-0.5 pt-1}.cm-content .cm-gutter,.cm-content .cm-gutters{@apply bg-transparent! border-none}.cm-content .cm-foldPlaceholder{@apply bg-accented! text-dimmed! border border-none ml-0.5 h-fit inline-flex items-center justify-center align-middle}.cm-content .cm-gutterElement{@apply inline-flex justify-center items-center}.cm-content .cm-heading-1{@apply text-4xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-content .cm-heading-2{@apply text-2xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-content .cm-heading-3{@apply text-xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-content .cm-heading-4{@apply text-lg! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-content .cm-quoteblock,.cm-content blockquote{@apply bg-muted border-accented ps-2 mx-2 before:ml-0.5 before:rounded-lg before:px-0.5 before:bg-accented before:py-1}.cm-content .cm-quoteblock.cm-quoteblock-single,.cm-content blockquote.cm-quoteblock-single{@apply rounded-lg py-2 before:py-0.5}.cm-content .cm-quoteblock.cm-quoteblock-start,.cm-content blockquote.cm-quoteblock-start{@apply rounded-t-lg pt-2 before:pt-0}.cm-content .cm-quoteblock.cm-quoteblock-end,.cm-content blockquote.cm-quoteblock-end{@apply rounded-b-lg pb-2 before:pb-0}.cm-content .cm-quoteblock .cm-formatting-quote.cm-meta,.cm-content blockquote .cm-formatting-quote.cm-meta{@apply invisible}.cm-content .cm-quoteblock .cm-formatting-quote-active.cm-meta,.cm-content blockquote .cm-formatting-quote-active.cm-meta{@apply visible!}.cm-content .cm-obsidian-bullet{@apply text-transparent}.cm-content .cm-obsidian-bullet .cm-meta{@apply invisible}.cm-content .cm-obsidian-bullet:before{content:"•";@apply text-dimmed absolute}.cm-content .callout,.cm-content .cm-callout-widget{@apply p-3 relative flex flex-col h-fit mx-2 my-2 rounded-xl border border-primary/20 from-primary/10 to-primary/20 bg-gradient-to-b}.cm-content .callout summary,.cm-content .cm-callout-widget summary{@apply inline-flex}.cm-content .callout .callout-title,.cm-content .cm-callout-widget .callout-title{@apply flex gap-1.5 items-center}.cm-content .callout .callout-title .callout-title-icon,.cm-content .cm-callout-widget .callout-title .callout-title-icon{@apply flex size-4 items-center justify-center fill-primary text-primary}.cm-content .callout .callout-title .callout-title-inner,.cm-content .cm-callout-widget .callout-title .callout-title-inner{@apply text-primary text-lg font-bold flex-grow}.cm-content .callout .callout-title .edit-block-button,.cm-content .cm-callout-widget .callout-title .edit-block-button{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer p-1 font-sans right-0 top-0 text-dimmed}.cm-content .callout .callout-content,.cm-content .cm-callout-widget .callout-content{@apply flex flex-col gap-1}.cm-content .callout[data-callout=info],.cm-content .cm-callout-widget[data-callout=info]{@apply from-info/10 to-info/20 bg-gradient-to-b border-info/20}.cm-content .callout[data-callout=info] .callout-fold,.cm-content .cm-callout-widget[data-callout=info] .callout-fold{@apply text-info-400}.cm-content .callout[data-callout=info] .callout-title .callout-title-icon,.cm-content .callout[data-callout=info] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=info] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=info] .callout-title .callout-title-inner{@apply text-info}.cm-content .callout[data-callout=check],.cm-content .callout[data-callout=done],.cm-content .callout[data-callout=success],.cm-content .cm-callout-widget[data-callout=check],.cm-content .cm-callout-widget[data-callout=done],.cm-content .cm-callout-widget[data-callout=success]{@apply from-success/10 to-success/20 bg-gradient-to-b border-success/20}.cm-content .callout[data-callout=check] .callout-fold,.cm-content .callout[data-callout=done] .callout-fold,.cm-content .callout[data-callout=success] .callout-fold,.cm-content .cm-callout-widget[data-callout=check] .callout-fold,.cm-content .cm-callout-widget[data-callout=done] .callout-fold,.cm-content .cm-callout-widget[data-callout=success] .callout-fold{@apply text-success-400}.cm-content .callout[data-callout=check] .callout-title .callout-title-icon,.cm-content .callout[data-callout=check] .callout-title .callout-title-inner,.cm-content .callout[data-callout=done] .callout-title .callout-title-icon,.cm-content .callout[data-callout=done] .callout-title .callout-title-inner,.cm-content .callout[data-callout=success] .callout-title .callout-title-icon,.cm-content .callout[data-callout=success] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=check] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=check] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=done] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=done] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=success] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=success] .callout-title .callout-title-inner{@apply text-success}.cm-content .callout[data-callout=faq],.cm-content .callout[data-callout=help],.cm-content .callout[data-callout=question],.cm-content .callout[data-callout=warning],.cm-content .cm-callout-widget[data-callout=faq],.cm-content .cm-callout-widget[data-callout=help],.cm-content .cm-callout-widget[data-callout=question],.cm-content .cm-callout-widget[data-callout=warning]{@apply from-warning/10 to-warning/20 bg-gradient-to-b border-warning/20}.cm-content .callout[data-callout=faq] .callout-fold,.cm-content .callout[data-callout=help] .callout-fold,.cm-content .callout[data-callout=question] .callout-fold,.cm-content .callout[data-callout=warning] .callout-fold,.cm-content .cm-callout-widget[data-callout=faq] .callout-fold,.cm-content .cm-callout-widget[data-callout=help] .callout-fold,.cm-content .cm-callout-widget[data-callout=question] .callout-fold,.cm-content .cm-callout-widget[data-callout=warning] .callout-fold{@apply text-warning-400}.cm-content .callout[data-callout=faq] .callout-title .callout-title-icon,.cm-content .callout[data-callout=faq] .callout-title .callout-title-inner,.cm-content .callout[data-callout=help] .callout-title .callout-title-icon,.cm-content .callout[data-callout=help] .callout-title .callout-title-inner,.cm-content .callout[data-callout=question] .callout-title .callout-title-icon,.cm-content .callout[data-callout=question] .callout-title .callout-title-inner,.cm-content .callout[data-callout=warning] .callout-title .callout-title-icon,.cm-content .callout[data-callout=warning] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=faq] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=faq] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=help] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=help] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=question] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=question] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=warning] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=warning] .callout-title .callout-title-inner{@apply text-warning}.cm-content .callout[data-callout=bug],.cm-content .callout[data-callout=error],.cm-content .callout[data-callout=failure],.cm-content .cm-callout-widget[data-callout=bug],.cm-content .cm-callout-widget[data-callout=error],.cm-content .cm-callout-widget[data-callout=failure]{@apply from-error/10 to-error/20 bg-gradient-to-b border-error/20}.cm-content .callout[data-callout=bug] .callout-fold,.cm-content .callout[data-callout=error] .callout-fold,.cm-content .callout[data-callout=failure] .callout-fold,.cm-content .cm-callout-widget[data-callout=bug] .callout-fold,.cm-content .cm-callout-widget[data-callout=error] .callout-fold,.cm-content .cm-callout-widget[data-callout=failure] .callout-fold{@apply text-error-400}.cm-content .callout[data-callout=bug] .callout-title .callout-title-icon,.cm-content .callout[data-callout=bug] .callout-title .callout-title-inner,.cm-content .callout[data-callout=error] .callout-title .callout-title-icon,.cm-content .callout[data-callout=error] .callout-title .callout-title-inner,.cm-content .callout[data-callout=failure] .callout-title .callout-title-icon,.cm-content .callout[data-callout=failure] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=bug] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=bug] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=error] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=error] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=failure] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=failure] .callout-title .callout-title-inner{@apply text-error}.cm-content .callout[data-callout=example],.cm-content .callout[data-callout=highlight],.cm-content .callout[data-callout=tip],.cm-content .cm-callout-widget[data-callout=example],.cm-content .cm-callout-widget[data-callout=highlight],.cm-content .cm-callout-widget[data-callout=tip]{@apply from-secondary/10 to-secondary/20 bg-gradient-to-b border-secondary/20}.cm-content .callout[data-callout=example] .callout-fold,.cm-content .callout[data-callout=highlight] .callout-fold,.cm-content .callout[data-callout=tip] .callout-fold,.cm-content .cm-callout-widget[data-callout=example] .callout-fold,.cm-content .cm-callout-widget[data-callout=highlight] .callout-fold,.cm-content .cm-callout-widget[data-callout=tip] .callout-fold{@apply text-secondary}.cm-content .callout[data-callout=example] .callout-title .callout-title-icon,.cm-content .callout[data-callout=example] .callout-title .callout-title-inner,.cm-content .callout[data-callout=highlight] .callout-title .callout-title-icon,.cm-content .callout[data-callout=highlight] .callout-title .callout-title-inner,.cm-content .callout[data-callout=tip] .callout-title .callout-title-icon,.cm-content .callout[data-callout=tip] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=example] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=example] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=highlight] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=highlight] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=tip] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=tip] .callout-title .callout-title-inner{@apply text-secondary}.cm-content .callout[data-callout=neutral],.cm-content .callout[data-callout=quote],.cm-content .cm-callout-widget[data-callout=neutral],.cm-content .cm-callout-widget[data-callout=quote]{@apply from-accented/20 to-accented/30 bg-gradient-to-b border-accented/30}.cm-content .callout[data-callout=neutral] .callout-fold,.cm-content .callout[data-callout=quote] .callout-fold,.cm-content .cm-callout-widget[data-callout=neutral] .callout-fold,.cm-content .cm-callout-widget[data-callout=quote] .callout-fold{@apply text-highlighted}.cm-content .callout[data-callout=neutral] .callout-title .callout-title-icon,.cm-content .callout[data-callout=neutral] .callout-title .callout-title-inner,.cm-content .callout[data-callout=quote] .callout-title .callout-title-icon,.cm-content .callout[data-callout=quote] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=neutral] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=neutral] .callout-title .callout-title-inner,.cm-content .cm-callout-widget[data-callout=quote] .callout-title .callout-title-icon,.cm-content .cm-callout-widget[data-callout=quote] .callout-title .callout-title-inner{@apply text-highlighted}.cm-content .callout .callout-fold,.cm-content .cm-callout-widget .callout-fold{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer text-primary font-sans text-center align-middle p-1 size-6}.cm-content .callout .callout-fold svg,.cm-content .cm-callout-widget .callout-fold svg{@apply transition-transform duration-300 ease-in-out w-full h-full}.cm-content .callout[open] .callout-fold svg,.cm-content .cm-callout-widget[open] .callout-fold svg{@apply transition-transform duration-300 ease-in-out rotate-90 w-full h-full}.cm-content .callout[data-fold-state=closed] .callout-content,.cm-content .cm-callout-widget[data-fold-state=closed] .callout-content{@apply max-h-0 opacity-0 p-0}.cm-content .callout[data-fold-state=open] .callout-content,.cm-content .cm-callout-widget[data-fold-state=open] .callout-content{@apply max-h-none opacity-100 py-1 mt-1}.cm-content .callout .edit-block-button,.cm-content .cm-callout-widget .edit-block-button{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer p-1 font-sans text-dimmed}.cm-content .callout .editing-utils-container,.cm-content .cm-callout-widget .editing-utils-container{@apply top-2 right-2 font-sans text-dimmed absolute flex items-center justify-center gap-1 p-1}.cm-content details .callout-content{@apply -mt-11}.cm-content .cm-indent{min-width:var(--list-indent,1.5rem);@apply relative inline-block}.cm-content .cm-indent:before{@apply content-["\200B"] absolute top-0 bottom-0 w-1;@apply border-r border-r-muted;@apply left-[var(--indentation-guide-source-indent)]}.cm-content .cm-indent-group .cm-active-indent:before{@apply border-primary}.cm-content .cm-list-line .cm-indent:before{@apply top-0}.cm-content .cm-list-internal[style*="--indent-level"]{@apply border-primary;padding-inline-start:calc(var(--indent-level)*var(--list-indent));text-indent:calc(var(--indent-level)*var(--list-indent))}.cm-content .cm-indent-list-bullet:before{content:"•";@apply text-dimmed border-none absolute;left:1rem}.cm-content .cm-indent-list-bullet+.cm-obsidian-bullet{@apply hidden}.cm-content .cm-obsidian-hidden{@apply hidden}.cm-content .cm-hidden-latex{@apply hidden}.cm-content .cm-yaml-content,.cm-content .cm-yaml-marker{@apply font-editor-code text-muted px-1}.cm-content .cm-line.hr{@apply h-8 flex items-center}.cm-content .cm-line.hr:after{content:"";@apply block w-full h-px bg-accented}
+@import url("https://fonts.cdnfonts.com/css/segoe-ui-variable-static-display");@import url("https://fonts.cdnfonts.com/css/sf-pro-display");@import "katex/dist/katex.min.css";@import "tailwindcss";@import "@nuxt/ui";@theme{--font-sans:"Public Sans","Inter","SF Pro Display","Segoe UI Variable Static Display",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-editor:"Inter","SF Pro Display","Segoe UI Variable Static Display",var(--font-sans,sans-serif);--font-editor-code:"Google Sans Code","JetBrains Mono","Consolas",var(--font-mono,ui-monospace);--list-indent:1.5rem;--indent-level:0}.cm-code-editor{@apply font-editor-code}.cm-code-editor .cm-content,.cm-code-editor .cm-placeholder{@apply font-editor-code text-sm}.cm-code-editor .cm-editor{@apply bg-default}.cm-code-editor .cm-placeholder{@apply text-dimmed}.cm-code-editor .cm-gutters,.cm-code-editor .cm-gutters-before{@apply bg-default text-muted text-sm border-r border-r-accented font-editor-code}.cm-code-editor .cm-activeLineGutter{@apply bg-elevated}.cm-code-editor .cm-activeLine{@apply bg-muted}.cm-code-editor .cm-foldPlaceholder{@apply bg-elevated border border-default font-editor-code text-muted}.cm-rich-editor{@apply font-editor}.cm-rich-editor .cm-activeLine{@apply after:absolute after:left-0 after:border-primary after:border after:rounded-lg after:h-full after:top-0 -z-10 bg-inherit}.cm-rich-editor .cm-content{@apply font-editor}.cm-rich-editor .katex-display{@apply m-0 pointer-events-none}.cm-rich-editor .katex-display .katex,.cm-rich-editor .katex-display .katex-html{@apply pointer-events-none}.cm-rich-editor .cm-escape,.cm-rich-editor .cm-meta{@apply text-dimmed! no-underline!}.cm-rich-editor .cm-heading{text-decoration:none!important}.cm-rich-editor .cm-mono{@apply font-editor-code bg-muted px-1 rounded-lg border border-default text-toned!}.cm-rich-editor .cm-hashtag{@apply bg-gradient-to-t from-primary/20! to-primary/10! ring ring-primary/50! px-1.5 text-sm rounded-4xl text-primary! inline-flex}.cm-rich-editor .cm-hashtag .cm-heading{@apply text-primary!}.cm-rich-editor .cm-highlighted{@apply bg-primary/20 text-primary px-0.5 rounded-sm}.cm-rich-editor .cm-internal-link-display,.cm-rich-editor .cm-internal-link-path,.cm-rich-editor .cm-internal-link-subpath,.cm-rich-editor .cm-link{@apply text-primary! underline}.cm-rich-editor .cm-internal-link-display[data-type=internal-link],.cm-rich-editor .cm-internal-link-path[data-type=internal-link],.cm-rich-editor .cm-internal-link-subpath[data-type=internal-link],.cm-rich-editor .cm-link[data-type=internal-link]{@apply cursor-pointer}.cm-rich-editor .cm-clickable-link{@apply cursor-pointer}.cm-rich-editor .cm-unresolved-link .cm-internal-link-display,.cm-rich-editor .cm-unresolved-link .cm-internal-link-path,.cm-rich-editor .cm-unresolved-link .cm-internal-link-subpath,.cm-rich-editor .cm-unresolved-link .cm-link{@apply text-error/75! cursor-not-allowed}.cm-rich-editor .cm-codeblock,.cm-rich-editor .cm-line-codeblock-begin,.cm-rich-editor .cm-line-codeblock-end{@apply font-editor-code py-0 my-0 text-sm! font-semibold border-x border-x-default mx-2 px-3 bg-muted relative}.cm-rich-editor .cm-codeblock .cm-codeblock-flair-container,.cm-rich-editor .cm-line-codeblock-begin .cm-codeblock-flair-container,.cm-rich-editor .cm-line-codeblock-end .cm-codeblock-flair-container{@apply absolute top-2 right-2 overflow-visible z-10}.cm-rich-editor .cm-codeblock .cm-codeblock-flair-container .cm-codeblock-copy-button,.cm-rich-editor .cm-line-codeblock-begin .cm-codeblock-flair-container .cm-codeblock-copy-button,.cm-rich-editor .cm-line-codeblock-end .cm-codeblock-flair-container .cm-codeblock-copy-button{@apply rounded hover:bg-accented transition duration-200 cursor-pointer py-1.5 px-2 font-sans text-dimmed z-10}.cm-rich-editor .cm-codeblock .cm-mono,.cm-rich-editor .cm-line-codeblock-begin .cm-mono,.cm-rich-editor .cm-line-codeblock-end .cm-mono{@apply border-none bg-none text-default}.cm-rich-editor .cm-line-codeblock-content{@apply border-x border-x-accented}.cm-rich-editor .cm-line-codeblock-begin{@apply rounded-t-lg border-t border-x border-t-accented border-x-accented pt-1 px-1}.cm-rich-editor .cm-line-codeblock-end{@apply rounded-b-lg border-b border-x border-b-accented border-x-accented pb-1 px-1}.cm-rich-editor .cm-task-checkbox-wrapper{@apply size-4 mb-0.5 rounded-xl border border-default bg-default inline-flex items-center justify-center align-middle cursor-pointer}.cm-rich-editor .cm-task-checkbox-wrapper[data-checked=true]{@apply bg-primary border border-primary}.cm-rich-editor .cm-task-checkbox-wrapper[data-checked=true]:before{content:"✔";@apply text-xs text-inverted}.cm-rich-editor .cm-task-checkbox-wrapper[data-special]{@apply font-editor-code text-xs text-highlighted}.cm-rich-editor .cm-task-checked{@apply line-through text-dimmed}.cm-rich-editor .cm-tooltip{@apply rounded-lg bg-default/70 shadow-lg backdrop-blur-sm border border-default font-sans p-2}.cm-rich-editor .cm-tooltip ul{@apply grid grid-cols-1 font-sans}.cm-rich-editor .cm-tooltip ul li{@apply grid grid-cols-1 rounded font-sans gap-1}.cm-rich-editor .cm-tooltip ul li .cm-completionLabel{@apply mx-1 mt-1 text-toned}.cm-rich-editor .cm-tooltip ul li .cm-completionDetail{@apply text-xs font-editor-code bg-elevated w-fit rounded text-muted px-1 mb-1}.cm-rich-editor .cm-tooltip ul li[aria-selected=true]{@apply bg-accented/70 backdrop-blur-sm border border-accented}.cm-rich-editor .cm-fold-widget{@apply absolute -left-0.5 pt-1}.cm-rich-editor .cm-gutter,.cm-rich-editor .cm-gutters{@apply bg-transparent! border-none}.cm-rich-editor .cm-foldPlaceholder{@apply bg-accented! text-dimmed! border border-none ml-0.5 h-fit inline-flex items-center justify-center align-middle}.cm-rich-editor .cm-gutterElement{@apply inline-flex justify-center items-center}.cm-rich-editor .cm-heading-1{@apply text-4xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-rich-editor .cm-heading-2{@apply text-2xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-rich-editor .cm-heading-3{@apply text-xl! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-rich-editor .cm-heading-4{@apply text-lg! text-highlighted scroll-mt-[calc(45px+var(--ui-header-height))]}.cm-rich-editor .cm-quoteblock,.cm-rich-editor blockquote{@apply bg-muted border-accented ps-2 mx-2 before:ml-0.5 before:rounded-lg before:px-0.5 before:bg-accented before:py-1}.cm-rich-editor .cm-quoteblock.cm-quoteblock-single,.cm-rich-editor blockquote.cm-quoteblock-single{@apply rounded-lg py-2 before:py-0.5}.cm-rich-editor .cm-quoteblock.cm-quoteblock-start,.cm-rich-editor blockquote.cm-quoteblock-start{@apply rounded-t-lg pt-2 before:pt-0}.cm-rich-editor .cm-quoteblock.cm-quoteblock-end,.cm-rich-editor blockquote.cm-quoteblock-end{@apply rounded-b-lg pb-2 before:pb-0}.cm-rich-editor .cm-quoteblock .cm-formatting-quote.cm-meta,.cm-rich-editor blockquote .cm-formatting-quote.cm-meta{@apply invisible}.cm-rich-editor .cm-quoteblock .cm-formatting-quote-active.cm-meta,.cm-rich-editor blockquote .cm-formatting-quote-active.cm-meta{@apply visible!}.cm-rich-editor .cm-obsidian-bullet{@apply text-transparent}.cm-rich-editor .cm-obsidian-bullet .cm-meta{@apply invisible}.cm-rich-editor .cm-obsidian-bullet:before{content:"•";@apply text-dimmed absolute}.cm-rich-editor .callout,.cm-rich-editor .cm-callout-widget{@apply p-3 relative flex flex-col h-fit rounded-xl border border-primary/20 from-primary/10 to-primary/20 bg-gradient-to-b}.cm-rich-editor .callout summary,.cm-rich-editor .cm-callout-widget summary{@apply inline-flex}.cm-rich-editor .callout .callout-title,.cm-rich-editor .cm-callout-widget .callout-title{@apply flex gap-1.5 items-center}.cm-rich-editor .callout .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget .callout-title .callout-title-icon{@apply flex size-4 items-center justify-center fill-primary text-primary}.cm-rich-editor .callout .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget .callout-title .callout-title-inner{@apply text-primary text-lg font-bold flex-grow}.cm-rich-editor .callout .callout-title .edit-block-button,.cm-rich-editor .cm-callout-widget .callout-title .edit-block-button{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer p-1 font-sans right-0 top-0 text-dimmed}.cm-rich-editor .callout .callout-content,.cm-rich-editor .cm-callout-widget .callout-content{@apply flex flex-col gap-1}.cm-rich-editor .callout[data-callout=info],.cm-rich-editor .cm-callout-widget[data-callout=info]{@apply from-info/10 to-info/20 bg-gradient-to-b border-info/20}.cm-rich-editor .callout[data-callout=info] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=info] .callout-fold{@apply text-info-400}.cm-rich-editor .callout[data-callout=info] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=info] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=info] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=info] .callout-title .callout-title-inner{@apply text-info}.cm-rich-editor .callout[data-callout=check],.cm-rich-editor .callout[data-callout=done],.cm-rich-editor .callout[data-callout=success],.cm-rich-editor .cm-callout-widget[data-callout=check],.cm-rich-editor .cm-callout-widget[data-callout=done],.cm-rich-editor .cm-callout-widget[data-callout=success]{@apply from-success/10 to-success/20 bg-gradient-to-b border-success/20}.cm-rich-editor .callout[data-callout=check] .callout-fold,.cm-rich-editor .callout[data-callout=done] .callout-fold,.cm-rich-editor .callout[data-callout=success] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=check] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=done] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=success] .callout-fold{@apply text-success-400}.cm-rich-editor .callout[data-callout=check] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=check] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=done] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=done] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=success] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=success] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=check] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=check] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=done] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=done] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=success] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=success] .callout-title .callout-title-inner{@apply text-success}.cm-rich-editor .callout[data-callout=faq],.cm-rich-editor .callout[data-callout=help],.cm-rich-editor .callout[data-callout=question],.cm-rich-editor .callout[data-callout=warning],.cm-rich-editor .cm-callout-widget[data-callout=faq],.cm-rich-editor .cm-callout-widget[data-callout=help],.cm-rich-editor .cm-callout-widget[data-callout=question],.cm-rich-editor .cm-callout-widget[data-callout=warning]{@apply from-warning/10 to-warning/20 bg-gradient-to-b border-warning/20}.cm-rich-editor .callout[data-callout=faq] .callout-fold,.cm-rich-editor .callout[data-callout=help] .callout-fold,.cm-rich-editor .callout[data-callout=question] .callout-fold,.cm-rich-editor .callout[data-callout=warning] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=faq] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=help] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=question] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=warning] .callout-fold{@apply text-warning-400}.cm-rich-editor .callout[data-callout=faq] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=faq] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=help] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=help] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=question] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=question] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=warning] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=warning] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=faq] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=faq] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=help] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=help] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=question] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=question] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=warning] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=warning] .callout-title .callout-title-inner{@apply text-warning}.cm-rich-editor .callout[data-callout=bug],.cm-rich-editor .callout[data-callout=error],.cm-rich-editor .callout[data-callout=failure],.cm-rich-editor .cm-callout-widget[data-callout=bug],.cm-rich-editor .cm-callout-widget[data-callout=error],.cm-rich-editor .cm-callout-widget[data-callout=failure]{@apply from-error/10 to-error/20 bg-gradient-to-b border-error/20}.cm-rich-editor .callout[data-callout=bug] .callout-fold,.cm-rich-editor .callout[data-callout=error] .callout-fold,.cm-rich-editor .callout[data-callout=failure] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=bug] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=error] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=failure] .callout-fold{@apply text-error-400}.cm-rich-editor .callout[data-callout=bug] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=bug] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=error] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=error] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=failure] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=failure] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=bug] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=bug] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=error] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=error] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=failure] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=failure] .callout-title .callout-title-inner{@apply text-error}.cm-rich-editor .callout[data-callout=example],.cm-rich-editor .callout[data-callout=highlight],.cm-rich-editor .callout[data-callout=tip],.cm-rich-editor .cm-callout-widget[data-callout=example],.cm-rich-editor .cm-callout-widget[data-callout=highlight],.cm-rich-editor .cm-callout-widget[data-callout=tip]{@apply from-secondary/10 to-secondary/20 bg-gradient-to-b border-secondary/20}.cm-rich-editor .callout[data-callout=example] .callout-fold,.cm-rich-editor .callout[data-callout=highlight] .callout-fold,.cm-rich-editor .callout[data-callout=tip] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=example] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=highlight] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=tip] .callout-fold{@apply text-secondary}.cm-rich-editor .callout[data-callout=example] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=example] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=highlight] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=highlight] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=tip] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=tip] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=example] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=example] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=highlight] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=highlight] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=tip] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=tip] .callout-title .callout-title-inner{@apply text-secondary}.cm-rich-editor .callout[data-callout=neutral],.cm-rich-editor .callout[data-callout=quote],.cm-rich-editor .cm-callout-widget[data-callout=neutral],.cm-rich-editor .cm-callout-widget[data-callout=quote]{@apply from-accented/20 to-accented/30 bg-gradient-to-b border-accented/30}.cm-rich-editor .callout[data-callout=neutral] .callout-fold,.cm-rich-editor .callout[data-callout=quote] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=neutral] .callout-fold,.cm-rich-editor .cm-callout-widget[data-callout=quote] .callout-fold{@apply text-highlighted}.cm-rich-editor .callout[data-callout=neutral] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=neutral] .callout-title .callout-title-inner,.cm-rich-editor .callout[data-callout=quote] .callout-title .callout-title-icon,.cm-rich-editor .callout[data-callout=quote] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=neutral] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=neutral] .callout-title .callout-title-inner,.cm-rich-editor .cm-callout-widget[data-callout=quote] .callout-title .callout-title-icon,.cm-rich-editor .cm-callout-widget[data-callout=quote] .callout-title .callout-title-inner{@apply text-highlighted}.cm-rich-editor .callout .callout-fold,.cm-rich-editor .cm-callout-widget .callout-fold{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer text-primary font-sans text-center align-middle p-1 size-6}.cm-rich-editor .callout .callout-fold svg,.cm-rich-editor .cm-callout-widget .callout-fold svg{@apply transition-transform duration-300 ease-in-out w-full h-full}.cm-rich-editor .callout[open] .callout-fold svg,.cm-rich-editor .cm-callout-widget[open] .callout-fold svg{@apply transition-transform duration-300 ease-in-out rotate-90 w-full h-full}.cm-rich-editor .callout[data-fold-state=closed] .callout-content,.cm-rich-editor .cm-callout-widget[data-fold-state=closed] .callout-content{@apply max-h-0 opacity-0 p-0}.cm-rich-editor .callout[data-fold-state=open] .callout-content,.cm-rich-editor .cm-callout-widget[data-fold-state=open] .callout-content{@apply max-h-none opacity-100 py-1 mt-1}.cm-rich-editor .callout .edit-block-button,.cm-rich-editor .cm-callout-widget .edit-block-button{@apply rounded hover:bg-elevated transition duration-200 cursor-pointer p-1 font-sans text-dimmed}.cm-rich-editor .callout .editing-utils-container,.cm-rich-editor .cm-callout-widget .editing-utils-container{@apply top-2 right-2 font-sans text-dimmed absolute flex items-center justify-center gap-1 p-1}.cm-rich-editor details .callout-content{@apply -mt-11}.cm-rich-editor .cm-indent{min-width:var(--list-indent,1.5rem);@apply relative inline-block}.cm-rich-editor .cm-indent:before{@apply content-["\200B"] absolute top-0 bottom-0 w-1;@apply border-r border-r-muted;@apply left-[var(--indentation-guide-source-indent)]}.cm-rich-editor .cm-indent-group .cm-active-indent:before{@apply border-primary}.cm-rich-editor .cm-list-line .cm-indent:before{@apply top-0}.cm-rich-editor .cm-list-internal[style*="--indent-level"]{@apply border-primary;padding-inline-start:calc(var(--indent-level)*var(--list-indent));text-indent:calc(var(--indent-level)*var(--list-indent))}.cm-rich-editor .cm-indent-list-bullet:before{content:"•";@apply text-dimmed border-none absolute;left:1rem}.cm-rich-editor .cm-indent-list-bullet+.cm-obsidian-bullet{@apply hidden}.cm-rich-editor .cm-obsidian-hidden{@apply hidden}.cm-rich-editor .cm-hidden-latex{@apply hidden}.cm-rich-editor .cm-yaml-content,.cm-rich-editor .cm-yaml-marker{@apply font-editor-code text-muted px-1}.cm-rich-editor .cm-line.hr{@apply h-8 flex items-center}.cm-rich-editor .cm-line.hr:after{content:"";@apply block w-full h-px bg-accented}

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

@@ -0,0 +1,38 @@
+import { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import type { SearchOptions } from '#codemirror-rich-obsidian-editor/editor-types';
+type __VLS_Props = {
+    class?: string;
+    language?: string;
+    bracketClosing?: boolean;
+    foldGutter?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    searchOptions?: SearchOptions;
+    /**
+     * Custom theme for light mode. Defaults to Catppuccin Latte.
+     * Pass a CodeMirror Extension (e.g., from @codemirror/theme-one-dark)
+     */
+    lightTheme?: Extension;
+    /**
+     * Custom theme for dark mode. Defaults to Catppuccin Mocha.
+     * Pass a CodeMirror Extension (e.g., from @codemirror/theme-one-dark)
+     */
+    darkTheme?: Extension;
+    colorMode?: 'dark' | 'light';
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    view: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    colorMode: "dark" | "light";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,207 @@
+<script setup>
+import CodeMirror from "vue-codemirror6";
+import {
+  EditorView,
+  drawSelection,
+  rectangularSelection,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  lineNumbers,
+  highlightSpecialChars,
+  dropCursor,
+  crosshairCursor,
+  keymap
+} from "@codemirror/view";
+import { history, historyKeymap, defaultKeymap } from "@codemirror/commands";
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  foldGutter,
+  syntaxTree,
+  bracketMatching,
+  foldKeymap
+} from "@codemirror/language";
+import { Compartment, EditorState } from "@codemirror/state";
+import {} from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { ref, shallowRef, onMounted, watch, computed } from "vue";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { lintKeymap } from "@codemirror/lint";
+import { catppuccinLatte, catppuccinMocha } from "@catppuccin/codemirror";
+const doc = defineModel({ type: String });
+const props = defineProps({
+  class: { type: String, required: false },
+  language: { type: String, required: false },
+  bracketClosing: { type: Boolean, required: false },
+  foldGutter: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  debug: { type: Boolean, required: false },
+  searchOptions: { type: Object, required: false },
+  lightTheme: { type: [Object, Array], required: false },
+  darkTheme: { type: [Object, Array], required: false },
+  colorMode: { type: String, required: false, default: "dark" }
+});
+const emit = defineEmits([]);
+const extensions = shallowRef([]);
+const view = shallowRef();
+const ast = ref([]);
+const languageCompartment = new Compartment();
+const themeCompartment = new Compartment();
+const isDark = computed(() => props.colorMode === "dark");
+const currentTheme = computed(() => {
+  if (isDark.value) {
+    return props.darkTheme || catppuccinMocha;
+  }
+  return props.lightTheme || catppuccinLatte;
+});
+async function loadLanguage(languageName) {
+  if (!languageName) return null;
+  const lang = languages.find(
+    (l) => l.name.toLowerCase() === languageName.toLowerCase() || l.alias.map((a) => a.toLowerCase()).includes(languageName.toLowerCase())
+  );
+  if (lang) {
+    try {
+      return await lang.load();
+    } catch (e) {
+      console.warn(`Failed to load language: ${languageName}`, e);
+      return null;
+    }
+  }
+  console.warn(`Language not found: ${languageName}`);
+  return null;
+}
+onMounted(async () => {
+  const initialLanguage = await loadLanguage(props.language);
+  extensions.value = [
+    lineNumbers(),
+    // A gutter with code folding markers
+    foldGutter(),
+    // Replace non-printable characters with placeholders
+    highlightSpecialChars(),
+    // The undo history
+    history(),
+    // Replace native cursor/selection with our own
+    drawSelection(),
+    // Show a drop cursor when dragging over the editor
+    dropCursor(),
+    // Allow multiple cursors/selections
+    EditorState.allowMultipleSelections.of(true),
+    // Re-indent lines when typing specific input
+    indentOnInput(),
+    // Theme compartment - switches between light and dark
+    themeCompartment.of(currentTheme.value),
+    // Highlight matching brackets near cursor
+    bracketMatching(),
+    // Automatically close brackets
+    closeBrackets(),
+    // Load the autocompletion system
+    autocompletion(),
+    // Allow alt-drag to select rectangular regions
+    rectangularSelection(),
+    // Change the cursor to a crosshair when holding alt
+    crosshairCursor(),
+    // Style the current line specially
+    highlightActiveLine(),
+    // Style the gutter for current line specially
+    highlightActiveLineGutter(),
+    // Highlight text that matches the selected text
+    highlightSelectionMatches(),
+    // Language support compartment (can be reconfigured)
+    languageCompartment.of(initialLanguage || []),
+    keymap.of([
+      // Closed-brackets aware backspace
+      ...closeBracketsKeymap,
+      // A large set of basic bindings
+      ...defaultKeymap,
+      // Search-related keys
+      ...searchKeymap,
+      // Redo/undo keys
+      ...historyKeymap,
+      // Code folding bindings
+      ...foldKeymap,
+      // Autocompletion keys
+      ...completionKeymap,
+      // Keys related to the linter system
+      ...lintKeymap
+    ]),
+    EditorView.editable.of(!props.disabled)
+  ];
+});
+watch(
+  () => props.language,
+  async (newLanguage) => {
+    if (view.value) {
+      const languageSupport = await loadLanguage(newLanguage);
+      view.value.dispatch({
+        effects: languageCompartment.reconfigure(languageSupport || [])
+      });
+    }
+  }
+);
+watch(
+  currentTheme,
+  (newTheme) => {
+    if (view.value) {
+      view.value.dispatch({
+        effects: themeCompartment.reconfigure(newTheme)
+      });
+    }
+  }
+);
+function handleReady(payload) {
+  view.value = payload.view;
+}
+function iterate() {
+  ast.value = [];
+  try {
+    view.value?.state?.tree.iterate({
+      from: 0,
+      to: view.value.state.doc.length,
+      //@ts-ignore
+      enter(node) {
+        ast.value.push(`Node: ${node.name}, From: ${node.from}, To: ${node.to}, Text: "${view.value?.state.doc.sliceString(node.from, node.to)}"`);
+      }
+    });
+  } catch (e) {
+    console.log(e);
+  }
+}
+defineExpose({
+  view
+});
+</script>
+
+<template>
+	<div :class="props.class ? props.class : 'w-full h-full overflow-visible'">
+		<ClientOnly class="overflow-visible">
+			<div class="w-full cm-code-editor overflow-visible">
+				<CodeMirror
+					v-model="doc"
+					placeholder="Your code here..."
+					:autofocus="true"
+					:indent-with-tab="true"
+					:tab-size="4"
+					:tab="true"
+					:indent-unit="'	'"
+					:extensions="extensions"
+					@ready="handleReady"
+					class="w-full h-full cm-code-editor overflow-visible"
+					:disabled="props.disabled"
+					:readonly="props.disabled"
+				/>
+			</div>
+			<template v-if="props.debug">
+				<UButton label="Iterate AST" @click="iterate" />
+				<div class="grid grid-cols-1 gap-2 py-2 w-full">
+					<div v-for="(content, index) in ast" :key="index">{{ content }}</div>
+				</div>
+			</template>
+		</ClientOnly>
+	</div>
+</template>
+
+<style>
+@reference "../assets/css/editor.css";.cm-cursor{@apply border-l-primary! border-l-[1.8px]! rounded-lg!}.cm-selectionBackground{@apply bg-primary/30! z-[150]}.cm-selectionLayer{@apply z-[150]!;pointer-events:none}div[contenteditable=true]:focus{@apply outline-none border-none h-full shadow-none}.cm-focused{@apply outline-none!}.cm-placeholder{@apply font-editor text-muted}.cm-activeLine{@apply bg-none! border-l-primary border-l-4 relative -left-1 content-[""] mask-no-clip overflow-visible}
+</style>

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

@@ -0,0 +1,38 @@
+import { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import type { SearchOptions } from '#codemirror-rich-obsidian-editor/editor-types';
+type __VLS_Props = {
+    class?: string;
+    language?: string;
+    bracketClosing?: boolean;
+    foldGutter?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+    searchOptions?: SearchOptions;
+    /**
+     * Custom theme for light mode. Defaults to Catppuccin Latte.
+     * Pass a CodeMirror Extension (e.g., from @codemirror/theme-one-dark)
+     */
+    lightTheme?: Extension;
+    /**
+     * Custom theme for dark mode. Defaults to Catppuccin Mocha.
+     * Pass a CodeMirror Extension (e.g., from @codemirror/theme-one-dark)
+     */
+    darkTheme?: Extension;
+    colorMode?: 'dark' | 'light';
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    view: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    colorMode: "dark" | "light";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -3,6 +3,7 @@ defineProps({
   filePath: { type: String, required: true },
   display: { type: String, required: false }
 });
+console.log("upda");
 </script>
 
 <template>

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

@@ -3,6 +3,7 @@ const props = defineProps({
   codeContent: { type: String, required: false }
 });
 const clicks = useState(() => 0);
+console.log("update");
 </script>
 
 <template>

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

@@ -17,13 +17,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     view: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
     "internal-link-click": (detail: InternalLinkClickDetail) => any;
     "external-link-click": (detail: ExternalLinkClickDetail) => any;
-    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     "onInternal-link-click"?: ((detail: InternalLinkClickDetail) => any) | undefined;
     "onExternal-link-click"?: ((detail: ExternalLinkClickDetail) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -52,7 +52,6 @@ async function loadLanguage(info) {
   if (lang) {
     return await lang.load();
   }
-  throw new Error(`Language ${info} not found`);
 }
 onMounted(() => {
   const wysiwygPlugin = wysiwyg({
@@ -177,7 +176,7 @@ defineExpose({
 <template>
     <div :class="props.class ? props.class : 'w-full h-full overflow-visible'" ref="editorElement">
         <ClientOnly class="overflow-visible">
-            <div class="w-full cm-content overflow-visible">
+            <div class="w-full cm-rich-editor overflow-visible">
                 <CodeMirror
                     v-model="doc"
                     placeholder="Start typing your markdown content here..."
@@ -191,7 +190,7 @@ defineExpose({
                     @change="log('change', $event)"
                     @focus="log('focus', $event)"
                     @blur="log('blur', $event)"
-                    class="w-full h-full cm-content overflow-visible"
+                    class="w-full h-full cm-rich-editor overflow-visible"
                     :disabled="props.disabled"
                     :readonly="props.disabled"
                 />

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

@@ -17,13 +17,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     view: import("vue").ShallowRef<EditorView | undefined, EditorView | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
     "internal-link-click": (detail: InternalLinkClickDetail) => any;
     "external-link-click": (detail: ExternalLinkClickDetail) => any;
-    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
     "onInternal-link-click"?: ((detail: InternalLinkClickDetail) => any) | undefined;
     "onExternal-link-click"?: ((detail: ExternalLinkClickDetail) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCalloutPlugin.js

@@ -9,6 +9,26 @@ function isNodeRangeActive(state, nodeFrom, nodeTo) {
   }
   return Math.max(nodeFrom, cursor.from) < Math.min(nodeTo, cursor.to);
 }
+function getCalloutBlockquoteRanges(state) {
+  const ranges = [];
+  syntaxTree(state).iterate({
+    enter(node) {
+      if (node.name === "Blockquote") {
+        const calloutNode = getCalloutNode(node.node);
+        if (calloutNode && node.node.parent?.name !== "Blockquote") {
+          ranges.push({ from: node.from, to: node.to });
+          return false;
+        }
+      }
+    }
+  });
+  return ranges;
+}
+function isCursorInAnyRange(cursor, ranges) {
+  return ranges.some(
+    (range) => cursor.from >= range.from && cursor.from <= range.to || cursor.to >= range.from && cursor.to <= range.to || cursor.from <= range.from && cursor.to >= range.to
+  );
+}
 function getCalloutNode(blockquoteNode) {
   let calloutNode = null;
   let found = false;
@@ -53,11 +73,22 @@ export const proseCalloutPlugin = StateField.define({
   create(state) {
     return RangeSet.of(buildCalloutWidgetDecorations(state), true);
   },
-  update(value, tr) {
-    if (tr.docChanged || tr.selection) {
+  update(oldDecorations, tr) {
+    if (tr.docChanged) {
       return RangeSet.of(buildCalloutWidgetDecorations(tr.state), true);
     }
-    return value.map(tr.changes);
+    if (tr.selection) {
+      const oldCursor = tr.startState.selection.main;
+      const newCursor = tr.state.selection.main;
+      const calloutRanges = getCalloutBlockquoteRanges(tr.state);
+      const wasInCallout = isCursorInAnyRange(oldCursor, calloutRanges);
+      const isInCallout = isCursorInAnyRange(newCursor, calloutRanges);
+      if (wasInCallout !== isInCallout) {
+        return RangeSet.of(buildCalloutWidgetDecorations(tr.state), true);
+      }
+      return oldDecorations;
+    }
+    return oldDecorations.map(tr.changes);
   },
   provide: (f) => EditorView.decorations.from(f)
 });

package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCodeBlockCodemirrorViewPlugin.js

@@ -5,6 +5,23 @@ import { EndFenceWidget, LanguageFlairWidget } from "../codemirror-widgets/prose
 import { specialCodeBlockMapFacet } from "../specialCodeBlockMappingConfig.js";
 import { ProseVueComponentEmbedWidget } from "../codemirror-widgets/proseVueComponentEmbedWidget.js";
 import { cursorSelectionCoveredNode, isNodeRangeActive, toCursorNodePositions } from "../../utility/tools.js";
+function getFencedCodeRanges(state) {
+  const ranges = [];
+  syntaxTree(state).iterate({
+    enter(node) {
+      if (node.name === "FencedCode") {
+        ranges.push({ from: node.from, to: node.to });
+        return false;
+      }
+    }
+  });
+  return ranges;
+}
+function isCursorInAnyRange(cursor, ranges) {
+  return ranges.some(
+    (range) => cursor.from >= range.from && cursor.from <= range.to || cursor.to >= range.from && cursor.to <= range.to || cursor.from <= range.from && cursor.to >= range.to
+  );
+}
 function buildCodeBlockDecorations(state) {
   const decorations = [];
   const specialCodeBlocks = state.facet(specialCodeBlockMapFacet);
@@ -39,7 +56,9 @@ function buildCodeBlockDecorations(state) {
                 widget: new ProseVueComponentEmbedWidget(
                   specialMapping.component,
                   { codeContent: codeText },
-                  node.from
+                  node.from,
+                  node.from,
+                  node.to
                 ),
                 block: true
               }).range(node.from, node.to)
@@ -88,11 +107,22 @@ export const proseCodeBlockCodemirrorViewPlugin = StateField.define({
   create(state) {
     return RangeSet.of(buildCodeBlockDecorations(state), true);
   },
-  update(value, tr) {
-    if (tr.docChanged || tr.selection) {
+  update(oldDecorations, tr) {
+    if (tr.docChanged) {
       return RangeSet.of(buildCodeBlockDecorations(tr.state), true);
     }
-    return value.map(tr.changes);
+    if (tr.selection) {
+      const oldCursor = tr.startState.selection.main;
+      const newCursor = tr.state.selection.main;
+      const codeBlockRanges = getFencedCodeRanges(tr.state);
+      const wasInCodeBlock = isCursorInAnyRange(oldCursor, codeBlockRanges);
+      const isInCodeBlock = isCursorInAnyRange(newCursor, codeBlockRanges);
+      if (wasInCodeBlock !== isInCodeBlock) {
+        return RangeSet.of(buildCodeBlockDecorations(tr.state), true);
+      }
+      return oldDecorations;
+    }
+    return oldDecorations.map(tr.changes);
   },
   provide: (f) => EditorView.decorations.from(f)
 });

package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseInternalLinkCodemirrorViewPlugin.js

@@ -4,6 +4,23 @@ import { syntaxTree } from "@codemirror/language";
 import { internalLinkMapFacet } from "../linkMappingConfig.js";
 import { ProseVueComponentEmbedWidget } from "../codemirror-widgets/proseVueComponentEmbedWidget.js";
 import { cursorSelectionCoveredNode, toCursorNodePositions, isNodeRangeActive } from "../../utility/tools.js";
+function getEmbedAndInternalLinkRanges(state) {
+  const ranges = [];
+  syntaxTree(state).iterate({
+    enter(node) {
+      if (node.name === "Embed" || node.name === "InternalLink") {
+        ranges.push({ from: node.from, to: node.to });
+        return false;
+      }
+    }
+  });
+  return ranges;
+}
+function isCursorInAnyRange(cursor, ranges) {
+  return ranges.some(
+    (range) => cursor.from >= range.from && cursor.from <= range.to || cursor.to >= range.from && cursor.to <= range.to || cursor.from <= range.from && cursor.to >= range.to
+  );
+}
 function buildInternalLinkDecorations(state) {
   const decorations = [];
   const linkMap = state.facet(internalLinkMapFacet);
@@ -25,7 +42,13 @@ function buildInternalLinkDecorations(state) {
                 props.display = state.doc.sliceString(displayNode.from, displayNode.to);
             }
             widgets.push(Decoration.widget({
-              widget: new ProseVueComponentEmbedWidget(linkInfo.embedComponent, linkInfo?.componentProps ? { ...linkInfo?.componentProps, ...props } : props, node.from),
+              widget: new ProseVueComponentEmbedWidget(
+                linkInfo.embedComponent,
+                linkInfo?.componentProps ? { ...linkInfo?.componentProps, ...props } : props,
+                node.from,
+                node.from,
+                node.to
+              ),
               block: true,
               side: 1
             }).range(line.to));
@@ -98,11 +121,22 @@ export const proseInternalLinkCodemirrorViewPlugin = StateField.define({
   create(state) {
     return RangeSet.of(buildInternalLinkDecorations(state), true);
   },
-  update(value, tr) {
-    if (tr.docChanged || tr.selection) {
+  update(oldDecorations, tr) {
+    if (tr.docChanged) {
       return RangeSet.of(buildInternalLinkDecorations(tr.state), true);
     }
-    return value.map(tr.changes);
+    if (tr.selection) {
+      const oldCursor = tr.startState.selection.main;
+      const newCursor = tr.state.selection.main;
+      const linkRanges = getEmbedAndInternalLinkRanges(tr.state);
+      const wasInLink = isCursorInAnyRange(oldCursor, linkRanges);
+      const isInLink = isCursorInAnyRange(newCursor, linkRanges);
+      if (wasInLink !== isInLink) {
+        return RangeSet.of(buildInternalLinkDecorations(tr.state), true);
+      }
+      return oldDecorations;
+    }
+    return oldDecorations.map(tr.changes);
   },
   provide: (f) => EditorView.decorations.from(f)
 });

package/dist/runtime/editor/plugins/codemirror-widgets/proseCalloutWidget.d.ts

@@ -3,10 +3,8 @@ import type { EditorView } from '@codemirror/view';
 export declare class CalloutWidget extends WidgetType {
     private sourceNodeFrom;
     private sourceNodeTo;
-    private rawContent;
     constructor(sourceNodeFrom: number, sourceNodeTo: number);
     private findParentBlockquote;
-    private extractDetails;
     toDOM(view: EditorView): HTMLElement;
     eq(other: CalloutWidget): boolean;
     ignoreEvent(event: Event): boolean;

package/dist/runtime/editor/plugins/codemirror-widgets/proseCalloutWidget.js

@@ -9,7 +9,6 @@ export class CalloutWidget extends WidgetType {
     this.sourceNodeFrom = sourceNodeFrom;
     this.sourceNodeTo = sourceNodeTo;
   }
-  rawContent = "";
   findParentBlockquote(node) {
     let current = node;
     while (current) {
@@ -20,17 +19,15 @@ export class CalloutWidget extends WidgetType {
     }
     return null;
   }
-  extractDetails(view) {
+  toDOM(view) {
     const state = view.state;
     const calloutNode = syntaxTree(state).resolve(this.sourceNodeFrom, 1);
     const parentBlockquote = this.findParentBlockquote(calloutNode);
+    let rawContent = "";
     if (parentBlockquote) {
-      this.rawContent = view.state.doc.sliceString(parentBlockquote.from, parentBlockquote.to);
+      rawContent = view.state.doc.sliceString(parentBlockquote.from, parentBlockquote.to);
     }
-  }
-  toDOM(view) {
-    this.extractDetails(view);
-    const renderedHtml = md.render(this.rawContent);
+    const renderedHtml = md.render(rawContent);
     const tempDiv = document.createElement("div");
     tempDiv.innerHTML = renderedHtml;
     const calloutEl = tempDiv.querySelector(".callout");
@@ -52,9 +49,9 @@ export class CalloutWidget extends WidgetType {
     };
     editButton.onclick = (e) => {
       e.stopPropagation();
-      const parentBlockquote = this.findParentBlockquote(syntaxTree(view.state).resolve(this.sourceNodeFrom, 1));
-      if (parentBlockquote) {
-        view.dispatch({ selection: { anchor: parentBlockquote.from } });
+      const parentBlockquote2 = this.findParentBlockquote(syntaxTree(view.state).resolve(this.sourceNodeFrom, 1));
+      if (parentBlockquote2) {
+        view.dispatch({ selection: { anchor: parentBlockquote2.from } });
         view.focus();
       }
     };
@@ -73,7 +70,7 @@ export class CalloutWidget extends WidgetType {
     return calloutEl;
   }
   eq(other) {
-    return other.sourceNodeFrom === this.sourceNodeFrom && other.sourceNodeTo === this.sourceNodeTo && other.rawContent === this.rawContent;
+    return other.sourceNodeFrom === this.sourceNodeFrom && other.sourceNodeTo === this.sourceNodeTo;
   }
   ignoreEvent(event) {
     if (event.type === "click" || event.type === "mousedown") {

package/dist/runtime/editor/plugins/codemirror-widgets/proseVueComponentEmbedWidget.d.ts

@@ -4,9 +4,12 @@ export declare class ProseVueComponentEmbedWidget extends WidgetType {
     readonly component: Component;
     readonly props: Record<string, any>;
     readonly pos: number;
+    readonly nodeFrom: number;
+    readonly nodeTo: number;
     private app;
-    constructor(component: Component, props: Record<string, any>, pos: number);
+    constructor(component: Component, props: Record<string, any>, pos: number, nodeFrom: number, nodeTo: number);
     toDOM(view: EditorView): HTMLDivElement;
     destroy(): void;
+    eq(other: ProseVueComponentEmbedWidget): boolean;
     ignoreEvent(event: Event): boolean;
 }

package/dist/runtime/editor/plugins/codemirror-widgets/proseVueComponentEmbedWidget.js

@@ -1,11 +1,13 @@
 import { WidgetType } from "@codemirror/view";
 import { createApp } from "vue";
 export class ProseVueComponentEmbedWidget extends WidgetType {
-  constructor(component, props, pos) {
+  constructor(component, props, pos, nodeFrom, nodeTo) {
     super();
     this.component = component;
     this.props = props;
     this.pos = pos;
+    this.nodeFrom = nodeFrom;
+    this.nodeTo = nodeTo;
   }
   app = null;
   toDOM(view) {
@@ -26,6 +28,30 @@ export class ProseVueComponentEmbedWidget extends WidgetType {
       this.app.unmount();
     }
   }
+  eq(other) {
+    if (this.component !== other.component) return false;
+    if (this.nodeFrom !== other.nodeFrom || this.nodeTo !== other.nodeTo) return false;
+    const thisKeys = Object.keys(this.props);
+    const otherKeys = Object.keys(other.props);
+    if (thisKeys.length !== otherKeys.length) return false;
+    for (const key of thisKeys) {
+      if (this.props[key] !== other.props[key]) {
+        if (typeof this.props[key] === "object" && typeof other.props[key] === "object") {
+          if (key === "linkData") {
+            const thisLink = this.props[key];
+            const otherLink = other.props[key];
+            if (thisLink?.referenceId !== otherLink?.referenceId) return false;
+            if (thisLink?.name !== otherLink?.name) return false;
+            if (thisLink?.filePath !== otherLink?.filePath) return false;
+            continue;
+          }
+          return false;
+        }
+        return false;
+      }
+    }
+    return true;
+  }
   ignoreEvent(event) {
     return event instanceof MouseEvent;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@type32/codemirror-rich-obsidian-editor",
-	"version": "0.1.5",
+	"version": "0.1.7",
 	"description": "OFM Editor Component for Nuxt.",
 	"repository": "Type-32/codemirror-rich-obsidian",
 	"license": "MIT",
@@ -35,12 +35,14 @@
 		"test:types": "bunx vue-tsc --noEmit && cd playground && bunx vue-tsc --noEmit"
 	},
 	"dependencies": {
+		"@catppuccin/codemirror": "^1.0.1",
 		"@codemirror/autocomplete": "^6.20.0",
 		"@codemirror/lang-json": "^6.0.2",
 		"@codemirror/lang-markdown": "^6.5.0",
 		"@codemirror/lang-yaml": "^6.1.2",
 		"@codemirror/language": "^6.12.1",
 		"@codemirror/language-data": "^6.5.2",
+		"@codemirror/theme-one-dark": "^6.1.3",
 		"@hsorby/vue3-katex": "0.6.0-rc.7",
 		"@lezer/markdown": "^1.6.3",
 		"@nuxt/image": "2.0.0",