@type32/codemirror-rich-obsidian-editor 0.0.3

package/README.md

@@ -0,0 +1,99 @@
+# CodeMirror 6 WYSIWYG OFM Editor
+
+## Credits and References, first of all
+### Primary Credits
+- https://github.com/segphault/codemirror-rich-markdoc, **_for the foundation of this entire project._**
+- https://github.com/erykwalder/lezer-markdown-obsidian, for OFM Lezer Parsers.
+- https://github.com/surmon-china/vue-codemirror, for the CodeMirror 6 component in Vue.
+- https://github.com/ebullient/markdown-it-obsidian-callouts, for his awesome markdown-to-html callouts markdown-it plugin
+- https://github.com/mgmeyers/obsidian-indentation-guides, for indentation guides
+- Markdown-It
+
+### Related References & Resources
+- https://github.com/heavycircle/remark-obsidian, for mostly wiki link alias & highlights & callouts parsing
+- https://github.com/flowershow/remark-wiki-link, for wiki link parsing
+- https://github.com/CTRL-Neo-Studios/simple-markdown-editor, my initial trial that quickly degraded into a shitslop because of overuse of AI
+- https://github.com/nothingislost/obsidian-codemirror-options
+- 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.
+
+## Introduction
+Do I even need an intro?
+
+This is a CodeMirror 6 WYSIWYG Obsidian-Flavored Markdown Editor project that aims to recreate Obsidian's implementation of a WYSIWYG Markdown editor in CodeMirror 6.
+
+That being said, please do note that:
+- This is more of a synthesized project from multiple different projects, as you can see from the credits section
+- The CodeMirror implementation is not a one-on-one replica. Since we don't have access to Obsidian's AST, we don't know how they parse markdown into node-marks and decorating them with CodeMirror. We could only try to imitate how they parse and decorate their markdowns judging from the class styling in their raw HTML.
+- When using this editor, you may feel that some small user experiences does not mach the UX of Obsidian's markdown editor. Yes, this is a known issue, and we're trying to "fix" them.
+
+## Installation
+
+Run with your preferred package manager:
+```shell
+bun add @type32/codemirror-rich-obsidian-editor
+```
+
+Add modules in Nuxt Config:
+
+```ts
+export default defineNuxtConfig({
+	// Your config...
+	modules: [
+		// Your other modules...
+		'@type32/codemirror-rich-obsidian-editor',
+	],
+})
+```
+
+Customize the editor fonts:
+
+```css
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@theme static {
+	/* Your Config Here... */
+	
+	--font-sans: /* Your Config Here... */;
+
+	--font-editor: '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;
+
+	/* Your Config Here... */
+}
+```
+
+## 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.
+- In Obsidian, the hidden marks of nodes are revealed at `mouseup`, whereas in this implementation, they're revealed at `mousedown`.
+- The editor errs when trying to parse nested callouts, to the extent where you might loose your data.
+  - Regular Callouts works fine.
+- Ordered List sequencing is different than that of Obsidian. We think that they probably use a sort of counter to keep track of lists of the same level beneath the hood, but we don't know for sure.
+  - It might be how CodeMirror keeps track of tabs in lists. The issue is not being worked on right now.
+- ~~Indents are currently tabs. In Obsidian, they seem to be parsed as nodes judging from their raw HTML. We suspect that this node may be accounted for some of the weird fuckery with leveled list, but we don't know for sure.~~
+  - We've implemented `mgmeyers/obsidian-indentation-guides` for indentation styling. Indents doesn't seem to be nodes.
+- ~~Task lists doesn't work for now.~~
+  - Task lists are working, but customization is sparse.
+- List indents are a pain.
+- ~~(Not much of an issue but still kept track of) YAML Frontmatter is parsed as raw text instead of TOML. We're currently determining whether to leave this as it is or try to add our own implementation to imitate how Obsidian parses and modifies their markdown files' Frontmatter.~~
+  - **We've decided to leave it alone for people who want to implement their own YAML Frontmatter parsing logic.**
+- ~~Support for embedded videos, notes, bases, and canvases are currently lacking~~
+  - 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.
+
+## 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.**
+- To anyone who wants to fork this project into another framework - such as React, Angular, Svelte, or PHP - **best of luck. We don't have react/solidjs/Angular/Svelte/PHP developers on the team so we can't help with that. This project is developed is mostly just Vue/Nuxt in mind.**
+
+PS: You may notice some inconsistencies in the use of pronouns in the README.md: it's not written using AI. It's just my weird writing style.

package/dist/module.d.mts

@@ -0,0 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@type32/codemirror-rich-obsidian-editor",
+  "configKey": "cmOfmEditor",
+  "version": "0.0.3",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,25 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@type32/codemirror-rich-obsidian-editor",
+    configKey: "cmOfmEditor"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    _nuxt.options.alias["#codemirror-rich-obsidian-editor"] = resolver.resolve(
+      "./runtime/editor/types"
+    );
+    _nuxt.options.alias["#codemirror-rich-obsidian-editor#css"] = resolver.resolve(
+      "./runtime/assets/css"
+    );
+    _nuxt.options.css.unshift(resolver.resolve("./runtime/assets/css/editor.css"));
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components")
+    });
+  }
+});
+
+export { module as default };

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

@@ -0,0 +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-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-primary/20! ring ring-primary/70! 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 border-l-6 bg-muted border-accented ps-2 mx-2}.cm-content .cm-quoteblock.cm-quoteblock-single,.cm-content blockquote.cm-quoteblock-single{@apply rounded py-2}.cm-content .cm-quoteblock.cm-quoteblock-start,.cm-content blockquote.cm-quoteblock-start{@apply rounded-t pt-2}.cm-content .cm-quoteblock.cm-quoteblock-end,.cm-content blockquote.cm-quoteblock-end{@apply rounded-b pb-2}.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-lg border border-primary/20 bg-primary/20}.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 bg-info/20 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 bg-success/20 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 bg-warning/20 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 bg-error/20 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 bg-secondary/20 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 bg-accented/30 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}

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

@@ -0,0 +1,11 @@
+<script setup>
+defineProps({
+  filePath: { type: String, required: true }
+});
+</script>
+
+<template>
+    <div class="p-3">
+        <NuxtImg :src="filePath" class="w-full h-auto object-cover rounded-lg" format="jpeg" :quality="80" alt=""/>
+    </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    filePath: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,16 @@
+<script setup>
+const props = defineProps({
+  codeContent: { type: String, required: false }
+});
+const clicks = useState(() => 0);
+</script>
+
+<template>
+    <div class="m-3 p-3 border border-default rounded">
+        <div>This is a test codeblock.</div>
+        <div>{{props?.codeContent}}</div>
+        <UButton :label="`You could also add buttons in here: ${clicks}`" @click="() => {
+  clicks += 1;
+}"/>
+    </div>
+</template>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    codeContent?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,182 @@
+<script setup>
+import CodeMirror from "vue-codemirror6";
+import {
+  keymap,
+  EditorView,
+  drawSelection,
+  rectangularSelection,
+  highlightActiveLine,
+  highlightActiveLineGutter
+} from "@codemirror/view";
+import { standardKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, foldGutter } from "@codemirror/language";
+import { Compartment } from "@codemirror/state";
+import { languages } from "@codemirror/language-data";
+import wysiwyg from "../editor/wysiwyg";
+import { internalLinkMapFacet } from "../editor/plugins/linkMappingConfig";
+import { specialCodeBlockMapFacet } from "../editor/plugins/specialCodeBlockMappingConfig";
+import { customBracketClosingConfig } from "../editor/plugins/customBracketClosingConfig";
+import { ref, shallowRef, computed, onMounted, onBeforeUnmount, unref, watch } from "vue";
+const doc = defineModel({ type: String });
+const props = defineProps({
+  class: { type: String, required: false },
+  internalLinkMap: { type: Array, required: false },
+  specialCodeBlockMap: { type: Array, required: false },
+  bracketClosing: { type: Boolean, required: false },
+  foldGutter: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  debug: { type: Boolean, required: false }
+});
+const emit = defineEmits(["internal-link-click", "external-link-click"]);
+const extensions = shallowRef([]);
+const view = shallowRef();
+const ast = ref([]);
+const internalLinkCompartment = new Compartment();
+const specialCodeBlockCompartment = new Compartment();
+const bracketClosingCompartment = new Compartment();
+const foldGutterCompartment = new Compartment();
+const editorElement = ref();
+const keymaps = computed(() => {
+  return props.disabled ? keymap.of([]) : keymap.of([...standardKeymap, ...historyKeymap, indentWithTab]);
+});
+onMounted(() => {
+  const wysiwygPlugin = wysiwyg({
+    lezer: {
+      codeLanguages: languages
+    }
+  });
+  extensions.value = [
+    EditorView.lineWrapping,
+    history(),
+    drawSelection(),
+    rectangularSelection(),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle),
+    // highlightActiveLine(),
+    // highlightActiveLineGutter(),
+    unref(keymaps),
+    internalLinkCompartment.of(internalLinkMapFacet.of(props.internalLinkMap || [])),
+    specialCodeBlockCompartment.of(specialCodeBlockMapFacet.of(props.specialCodeBlockMap || [])),
+    bracketClosingCompartment.of(customBracketClosingConfig.of(props.bracketClosing ?? true)),
+    foldGutterCompartment.of(props.foldGutter ?? true ? foldGutter() : []),
+    wysiwygPlugin,
+    EditorView.editable.of(unref(!props.disabled))
+  ];
+  if (editorElement.value) {
+    editorElement.value.addEventListener("internal-link-click", handleInternalLinkClick);
+    editorElement.value.addEventListener("external-link-click", handleExternalLinkClick);
+  }
+});
+onBeforeUnmount(() => {
+  if (editorElement.value) {
+    editorElement.value.removeEventListener("internal-link-click", handleInternalLinkClick);
+    editorElement.value.removeEventListener("external-link-click", handleExternalLinkClick);
+  }
+});
+function handleInternalLinkClick(event) {
+  emit("internal-link-click", event.detail);
+}
+function handleExternalLinkClick(event) {
+  emit("external-link-click", event.detail);
+}
+watch(
+  () => props.internalLinkMap,
+  (newMap) => {
+    if (view.value) {
+      view.value.dispatch({
+        effects: internalLinkCompartment.reconfigure(internalLinkMapFacet.of(newMap || []))
+      });
+    }
+  },
+  { deep: true }
+);
+watch(
+  () => props.specialCodeBlockMap,
+  (newMap) => {
+    if (view.value) {
+      view.value.dispatch({
+        effects: specialCodeBlockCompartment.reconfigure(specialCodeBlockMapFacet.of(newMap || []))
+      });
+    }
+  },
+  { deep: true }
+);
+watch(
+  () => props.bracketClosing,
+  (newValue) => {
+    if (view.value) {
+      view.value.dispatch({
+        effects: bracketClosingCompartment.reconfigure(customBracketClosingConfig.of(newValue ?? true))
+      });
+    }
+  },
+  { deep: true }
+);
+watch(
+  () => props.foldGutter,
+  (newValue) => {
+    if (view.value) {
+      view.value.dispatch({
+        effects: foldGutterCompartment.reconfigure(newValue ?? true ? foldGutter() : [])
+      });
+    }
+  },
+  { deep: true }
+);
+function handleReady(payload) {
+  view.value = payload.view;
+}
+function log(...args) {
+}
+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);
+  }
+}
+</script>
+
+<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">
+                <CodeMirror
+                    v-model="doc"
+                    placeholder="Start typing your markdown content here..."
+                    :autofocus="true"
+                    :indent-with-tab="true"
+                    :tab-size="4"
+                    :tab="true"
+                    :indent-unit="'	'"
+                    :extensions="extensions"
+                    @ready="handleReady"
+                    @change="log('change', $event)"
+                    @focus="log('focus', $event)"
+                    @blur="log('blur', $event)"
+                    class="w-full h-full cm-content 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.6px]!}.cm-selectionBackground{@apply bg-primary/50! z-120!}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/Editor.client.vue.d.ts

@@ -0,0 +1,23 @@
+import type { InternalLink, SpecialCodeBlockMapping } from '#codemirror-rich-obsidian-editor/editor-types';
+type __VLS_Props = {
+    class?: string;
+    internalLinkMap?: InternalLink[];
+    specialCodeBlockMap?: SpecialCodeBlockMapping[];
+    bracketClosing?: boolean;
+    foldGutter?: boolean;
+    disabled?: boolean;
+    debug?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "internal-link-click": (...args: any[]) => void;
+    "external-link-click": (...args: any[]) => void;
+    "update:modelValue": (value: string | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onInternal-link-click"?: ((...args: any[]) => any) | undefined;
+    "onExternal-link-click"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/editor/lezer-parsers/customOFMParsers.d.ts

@@ -0,0 +1 @@
+export declare const CustomOFM: (import("@lezer/markdown").MarkdownConfig | import("@lezer/markdown").MarkdownConfig)[];

package/dist/runtime/editor/lezer-parsers/customOFMParsers.js

@@ -0,0 +1,23 @@
+import { Strikethrough, Table } from "@lezer/markdown";
+import { lezerHashtagParser } from "./lezerHashtagParser.js";
+import { Mark, Comment, Footnote, TaskList } from "lezer-markdown-obsidian";
+import { lezerYamlFrontmatterParser } from "./lezerYamlFrontmatterParser.js";
+import { lezerInternalLinkParser } from "./lezerInternalLinkParser.js";
+import { lezerLatexParser } from "./lezerLatexParser.js";
+import { lezerCalloutParser } from "./lezerCalloutParser.js";
+import { lezerIndentationParser } from "./lezerIndentationParser.js";
+export const CustomOFM = [
+  // the array here must remain implicit because the version of @lezer/markdown that lezer-markdown-obsidian uses is different than the one this project is using.
+  Comment,
+  Footnote,
+  lezerHashtagParser,
+  lezerInternalLinkParser,
+  Mark,
+  Strikethrough,
+  Table,
+  TaskList,
+  lezerLatexParser,
+  lezerYamlFrontmatterParser,
+  lezerCalloutParser,
+  lezerIndentationParser
+];

package/dist/runtime/editor/lezer-parsers/lezerCalloutParser.d.ts

@@ -0,0 +1,8 @@
+import { type MarkdownConfig } from '@lezer/markdown';
+import { Tag } from "@lezer/highlight";
+export declare const lezerHighlightCallout: Tag;
+export declare const lezerHighlightCalloutMark: Tag;
+export declare const lezerHighlightCalloutType: Tag;
+export declare const lezerHighlightCalloutFoldMark: Tag;
+export declare const lezerHighlightCalloutTitle: Tag;
+export declare const lezerCalloutParser: MarkdownConfig;

package/dist/runtime/editor/lezer-parsers/lezerCalloutParser.js

@@ -0,0 +1,53 @@
+import { Tag } from "@lezer/highlight";
+export const lezerHighlightCallout = Tag.define();
+export const lezerHighlightCalloutMark = Tag.define(lezerHighlightCallout);
+export const lezerHighlightCalloutType = Tag.define(lezerHighlightCallout);
+export const lezerHighlightCalloutFoldMark = Tag.define(lezerHighlightCallout);
+export const lezerHighlightCalloutTitle = Tag.define(lezerHighlightCallout);
+const calloutRegex = /^\[!(?<type>[^\]]+)\](?<fold>[+-])?(?<title>.*)/;
+export const lezerCalloutParser = {
+  defineNodes: [
+    { name: "Callout", style: lezerHighlightCallout },
+    { name: "CalloutMark", style: lezerHighlightCalloutMark },
+    { name: "CalloutType", style: lezerHighlightCalloutType },
+    { name: "CalloutFoldMark", style: lezerHighlightCalloutFoldMark },
+    { name: "CalloutTitle", style: lezerHighlightCalloutTitle }
+  ],
+  parseInline: [{
+    name: "Callout",
+    parse(cx, next, pos) {
+      const text = cx.slice(pos, cx.end);
+      const match = calloutRegex.exec(text);
+      if (!match || !match.groups) {
+        return -1;
+      }
+      const { type, fold, title } = match.groups;
+      if (!type) {
+        return -1;
+      }
+      const fullMatchLength = match[0].length;
+      const children = [];
+      let currentPosInMatch = 0;
+      children.push(cx.elt("CalloutMark", pos + currentPosInMatch, pos + currentPosInMatch + 2));
+      currentPosInMatch += 2;
+      children.push(cx.elt("CalloutType", pos + currentPosInMatch, pos + currentPosInMatch + type.length));
+      currentPosInMatch += type.length;
+      children.push(cx.elt("CalloutMark", pos + currentPosInMatch, pos + currentPosInMatch + 1));
+      currentPosInMatch += 1;
+      if (fold) {
+        children.push(cx.elt("CalloutFoldMark", pos + currentPosInMatch, pos + currentPosInMatch + 1));
+        currentPosInMatch += 1;
+      }
+      if (title) {
+        const trimmedTitle = title.trim();
+        if (trimmedTitle.length > 0) {
+          const titleStartOffset = title.indexOf(trimmedTitle);
+          const titleStart = pos + currentPosInMatch + titleStartOffset;
+          children.push(cx.elt("CalloutTitle", titleStart, titleStart + trimmedTitle.length));
+        }
+      }
+      return cx.addElement(cx.elt("Callout", pos, pos + fullMatchLength, children));
+    },
+    before: "Link"
+  }]
+};

package/dist/runtime/editor/lezer-parsers/lezerHashtagParser.d.ts

@@ -0,0 +1,6 @@
+import { type MarkdownConfig } from "@lezer/markdown";
+import { Tag } from '@lezer/highlight';
+export declare const lezerHighlightHashtagTag: Tag;
+export declare const lezerHighlightHashtagTagMark: Tag;
+export declare const lezerHighlightHashtagTagLabel: Tag;
+export declare const lezerHashtagParser: MarkdownConfig;

package/dist/runtime/editor/lezer-parsers/lezerHashtagParser.js

@@ -0,0 +1,35 @@
+import { Tag } from "@lezer/highlight";
+const hashtagRE = /^[^\u2000-\u206F\u2E00-\u2E7F'!"#$%&()*+,.:;<=>?@^`{|}~\[\]\\\s]+/;
+export const lezerHighlightHashtagTag = Tag.define("HashtagTag");
+export const lezerHighlightHashtagTagMark = Tag.define("HashtagTagMark", lezerHighlightHashtagTag);
+export const lezerHighlightHashtagTagLabel = Tag.define("HashtagTagLabel", lezerHighlightHashtagTag);
+export const lezerHashtagParser = {
+  defineNodes: [
+    { name: "HashtagTag", style: lezerHighlightHashtagTag },
+    { name: "HashtagTagMark", style: lezerHighlightHashtagTagMark },
+    { name: "HashtagTagLabel", style: lezerHighlightHashtagTagLabel }
+  ],
+  parseInline: [
+    {
+      name: "HashtagTag",
+      parse(cx, next, pos) {
+        if (next != 35) {
+          return -1;
+        }
+        const start = pos;
+        pos += 1;
+        const match = hashtagRE.exec(cx.text.slice(pos - cx.offset));
+        if (match && /\D/.test(match[0])) {
+          pos += match[0].length;
+          return cx.addElement(
+            cx.elt("HashtagTag", start, pos, [
+              cx.elt("HashtagTagMark", start, start + 1),
+              cx.elt("HashtagTagLabel", start + 1, pos)
+            ])
+          );
+        }
+        return -1;
+      }
+    }
+  ]
+};

package/dist/runtime/editor/lezer-parsers/lezerIndentationParser.d.ts

@@ -0,0 +1,4 @@
+import { type MarkdownConfig } from '@lezer/markdown';
+import { Tag } from "@lezer/highlight";
+export declare const lezerHighlightIndentation: Tag;
+export declare const lezerIndentationParser: MarkdownConfig;

package/dist/runtime/editor/lezer-parsers/lezerIndentationParser.js

@@ -0,0 +1,23 @@
+import { Tag } from "@lezer/highlight";
+export const lezerHighlightIndentation = Tag.define();
+const indentationRegex = /^((?:\t| {4})+)/;
+export const lezerIndentationParser = {
+  defineNodes: [
+    { name: "Indentation", style: lezerHighlightIndentation }
+  ],
+  parseInline: [{
+    name: "Indentation",
+    parse(cx, next, pos) {
+      if (pos > 0 && cx.slice(pos - 1, pos) !== "\n") {
+        return -1;
+      }
+      const match = indentationRegex.exec(cx.slice(pos, cx.end));
+      if (!match) {
+        return -1;
+      }
+      const matchLength = match[0].length;
+      return cx.addElement(cx.elt("Indentation", pos, pos + matchLength));
+    },
+    before: "Emphasis"
+  }]
+};

package/dist/runtime/editor/lezer-parsers/lezerInternalLinkParser.d.ts

@@ -0,0 +1,10 @@
+import type { MarkdownConfig } from '@lezer/markdown';
+import { Tag } from "@lezer/highlight";
+export declare const lezerHighlightEmbed: Tag;
+export declare const lezerHighlightEmbedMark: Tag;
+export declare const lezerHighlightInternalLink: Tag;
+export declare const lezerHighlightInternalMark: Tag;
+export declare const lezerHighlightInternalPath: Tag;
+export declare const lezerHighlightInternalSubpath: Tag;
+export declare const lezerHighlightInternalDisplay: Tag;
+export declare const lezerInternalLinkParser: MarkdownConfig;