@type32/codemirror-rich-obsidian-editor 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -0
- package/dist/module.d.mts +8 -0
- package/dist/module.json +9 -0
- package/dist/module.mjs +25 -0
- package/dist/runtime/assets/css/editor.css +1 -0
- package/dist/runtime/components/Editor/ImageEmbedComponent.vue +11 -0
- package/dist/runtime/components/Editor/ImageEmbedComponent.vue.d.ts +5 -0
- package/dist/runtime/components/Editor/TestCustomCodeBlock.vue +16 -0
- package/dist/runtime/components/Editor/TestCustomCodeBlock.vue.d.ts +5 -0
- package/dist/runtime/components/Editor.client.vue +182 -0
- package/dist/runtime/components/Editor.client.vue.d.ts +23 -0
- package/dist/runtime/editor/lezer-parsers/customOFMParsers.d.ts +1 -0
- package/dist/runtime/editor/lezer-parsers/customOFMParsers.js +23 -0
- package/dist/runtime/editor/lezer-parsers/lezerCalloutParser.d.ts +8 -0
- package/dist/runtime/editor/lezer-parsers/lezerCalloutParser.js +53 -0
- package/dist/runtime/editor/lezer-parsers/lezerHashtagParser.d.ts +6 -0
- package/dist/runtime/editor/lezer-parsers/lezerHashtagParser.js +35 -0
- package/dist/runtime/editor/lezer-parsers/lezerIndentationParser.d.ts +4 -0
- package/dist/runtime/editor/lezer-parsers/lezerIndentationParser.js +23 -0
- package/dist/runtime/editor/lezer-parsers/lezerInternalLinkParser.d.ts +10 -0
- package/dist/runtime/editor/lezer-parsers/lezerInternalLinkParser.js +110 -0
- package/dist/runtime/editor/lezer-parsers/lezerLatexParser.d.ts +7 -0
- package/dist/runtime/editor/lezer-parsers/lezerLatexParser.js +75 -0
- package/dist/runtime/editor/lezer-parsers/lezerYamlFrontmatterParser.d.ts +13 -0
- package/dist/runtime/editor/lezer-parsers/lezerYamlFrontmatterParser.js +55 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/customBracketClosingPlugin.d.ts +4 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/customBracketClosingPlugin.js +94 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorAttributesPlugin.d.ts +8 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorAttributesPlugin.js +136 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorInternalLinkAutocompletePlugin.d.ts +1 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorInternalLinkAutocompletePlugin.js +43 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorKeymapPlugin.d.ts +1 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorKeymapPlugin.js +95 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorLinkClickPlugin.d.ts +1 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/editorLinkClickPlugin.js +43 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/indentationGuidesPlugin.d.ts +10 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/indentationGuidesPlugin.js +121 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/indentationListPlugin.d.ts +5 -0
- package/dist/runtime/editor/plugins/codemirror-editor-plugins/indentationListPlugin.js +66 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCalloutPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCalloutPlugin.js +63 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCodeBlockCodemirrorViewPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseCodeBlockCodemirrorViewPlugin.js +98 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseHashtagCodemirrorViewPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseHashtagCodemirrorViewPlugin.js +27 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseHighlightCodemirrorViewPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseHighlightCodemirrorViewPlugin.js +51 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseInternalLinkCodemirrorViewPlugin.d.ts +6 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseInternalLinkCodemirrorViewPlugin.js +112 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseLatexCodemirrorViewPlugin.d.ts +2 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseLatexCodemirrorViewPlugin.js +160 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseLinkCodemirrorViewPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseLinkCodemirrorViewPlugin.js +98 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseQuoteblockCodemirrorViewPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseQuoteblockCodemirrorViewPlugin.js +76 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseTaskListPlugin.d.ts +8 -0
- package/dist/runtime/editor/plugins/codemirror-plugin-proses/proseTaskListPlugin.js +106 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseCalloutWidget.d.ts +13 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseCalloutWidget.js +87 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseCodeBlockWidgets.d.ts +15 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseCodeBlockWidgets.js +53 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseLatexWidgets.d.ts +11 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseLatexWidgets.js +50 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseVueComponentEmbedWidget.d.ts +12 -0
- package/dist/runtime/editor/plugins/codemirror-widgets/proseVueComponentEmbedWidget.js +32 -0
- package/dist/runtime/editor/plugins/customBracketClosingConfig.d.ts +2 -0
- package/dist/runtime/editor/plugins/customBracketClosingConfig.js +4 -0
- package/dist/runtime/editor/plugins/lezerStylesHighlightingPlugin.d.ts +3 -0
- package/dist/runtime/editor/plugins/lezerStylesHighlightingPlugin.js +55 -0
- package/dist/runtime/editor/plugins/linkMappingConfig.d.ts +3 -0
- package/dist/runtime/editor/plugins/linkMappingConfig.js +4 -0
- package/dist/runtime/editor/plugins/richTextPlugin.d.ts +10 -0
- package/dist/runtime/editor/plugins/richTextPlugin.js +94 -0
- package/dist/runtime/editor/plugins/specialCodeBlockMappingConfig.d.ts +3 -0
- package/dist/runtime/editor/plugins/specialCodeBlockMappingConfig.js +4 -0
- package/dist/runtime/editor/types/editor-types.d.ts +17 -0
- package/dist/runtime/editor/utility/decorations.d.ts +9 -0
- package/dist/runtime/editor/utility/decorations.js +9 -0
- package/dist/runtime/editor/utility/tools.d.ts +12 -0
- package/dist/runtime/editor/utility/tools.js +32 -0
- package/dist/runtime/editor/wysiwyg.d.ts +4 -0
- package/dist/runtime/editor/wysiwyg.js +80 -0
- package/dist/types.d.mts +3 -0
- package/package.json +80 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { WidgetType } from "@codemirror/view";
|
|
2
|
+
import { syntaxTree } from "@codemirror/language";
|
|
3
|
+
import katex from "katex";
|
|
4
|
+
export class InlineLatexWidget extends WidgetType {
|
|
5
|
+
constructor(content) {
|
|
6
|
+
super();
|
|
7
|
+
this.content = content;
|
|
8
|
+
}
|
|
9
|
+
toDOM(view) {
|
|
10
|
+
const container = document.createElement("span");
|
|
11
|
+
katex.render(this.content, container, {
|
|
12
|
+
throwOnError: false
|
|
13
|
+
});
|
|
14
|
+
container.addEventListener("click", () => {
|
|
15
|
+
const pos = view.posAtDOM(container);
|
|
16
|
+
const tree = syntaxTree(view.state);
|
|
17
|
+
const node = tree.resolve(pos);
|
|
18
|
+
if (node.name === "TexInline") {
|
|
19
|
+
view.dispatch({
|
|
20
|
+
selection: { anchor: node.from, head: node.to }
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
return container;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export class BlockLatexWidget extends WidgetType {
|
|
28
|
+
constructor(content) {
|
|
29
|
+
super();
|
|
30
|
+
this.content = content;
|
|
31
|
+
}
|
|
32
|
+
toDOM(view) {
|
|
33
|
+
const container = document.createElement("div");
|
|
34
|
+
katex.render(this.content, container, {
|
|
35
|
+
throwOnError: false,
|
|
36
|
+
displayMode: true
|
|
37
|
+
});
|
|
38
|
+
container.addEventListener("click", () => {
|
|
39
|
+
const pos = view.posAtDOM(container);
|
|
40
|
+
const tree = syntaxTree(view.state);
|
|
41
|
+
const node = tree.resolve(pos);
|
|
42
|
+
if (node.name === "TexBlock") {
|
|
43
|
+
view.dispatch({
|
|
44
|
+
selection: { anchor: node.from, head: node.to }
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
return container;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { WidgetType, EditorView } from '@codemirror/view';
|
|
2
|
+
import { type Component } from 'vue';
|
|
3
|
+
export declare class ProseVueComponentEmbedWidget extends WidgetType {
|
|
4
|
+
readonly component: Component;
|
|
5
|
+
readonly props: Record<string, any>;
|
|
6
|
+
readonly pos: number;
|
|
7
|
+
private app;
|
|
8
|
+
constructor(component: Component, props: Record<string, any>, pos: number);
|
|
9
|
+
toDOM(view: EditorView): HTMLDivElement;
|
|
10
|
+
destroy(): void;
|
|
11
|
+
ignoreEvent(event: Event): boolean;
|
|
12
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { WidgetType } from "@codemirror/view";
|
|
2
|
+
import { createApp } from "vue";
|
|
3
|
+
export class ProseVueComponentEmbedWidget extends WidgetType {
|
|
4
|
+
constructor(component, props, pos) {
|
|
5
|
+
super();
|
|
6
|
+
this.component = component;
|
|
7
|
+
this.props = props;
|
|
8
|
+
this.pos = pos;
|
|
9
|
+
}
|
|
10
|
+
app = null;
|
|
11
|
+
toDOM(view) {
|
|
12
|
+
const container = document.createElement("div");
|
|
13
|
+
container.className = "vue-embed-widget";
|
|
14
|
+
container.dataset.embedPos = String(this.pos);
|
|
15
|
+
container.addEventListener("mousedown", () => {
|
|
16
|
+
if (view.hasFocus) {
|
|
17
|
+
view.dom.blur();
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
this.app = createApp(this.component, this.props);
|
|
21
|
+
this.app.mount(container);
|
|
22
|
+
return container;
|
|
23
|
+
}
|
|
24
|
+
destroy() {
|
|
25
|
+
if (this.app) {
|
|
26
|
+
this.app.unmount();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
ignoreEvent(event) {
|
|
30
|
+
return event instanceof MouseEvent;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { HighlightStyle } from "@codemirror/language";
|
|
2
|
+
import { tags as t } from "@lezer/highlight";
|
|
3
|
+
import {
|
|
4
|
+
lezerHighlightEmbed,
|
|
5
|
+
lezerHighlightEmbedMark,
|
|
6
|
+
lezerHighlightInternalDisplay,
|
|
7
|
+
lezerHighlightInternalLink,
|
|
8
|
+
lezerHighlightInternalMark,
|
|
9
|
+
lezerHighlightInternalPath,
|
|
10
|
+
lezerHighlightInternalSubpath
|
|
11
|
+
} from "../lezer-parsers/lezerInternalLinkParser.js";
|
|
12
|
+
import {
|
|
13
|
+
lezerHighlightYamlContent,
|
|
14
|
+
lezerHighlightYamlFrontmatter,
|
|
15
|
+
lezerHighlightYamlMarker
|
|
16
|
+
} from "../lezer-parsers/lezerYamlFrontmatterParser.js";
|
|
17
|
+
import {
|
|
18
|
+
lezerHighlightLatexBlock,
|
|
19
|
+
lezerHighlightLatexInline,
|
|
20
|
+
lezerHighlightLatexMarker
|
|
21
|
+
} from "../lezer-parsers/lezerLatexParser.js";
|
|
22
|
+
import { lezerHighlightIndentation } from "../lezer-parsers/lezerIndentationParser.js";
|
|
23
|
+
export default HighlightStyle.define([
|
|
24
|
+
{ tag: t.heading1, class: "cm-heading cm-heading-1", textDecoration: "none" },
|
|
25
|
+
{ tag: t.heading2, class: "cm-heading cm-heading-2", textDecoration: "none" },
|
|
26
|
+
{ tag: t.heading3, class: "cm-heading cm-heading-3", textDecoration: "none" },
|
|
27
|
+
{ tag: t.heading4, class: "cm-heading cm-heading-4", textDecoration: "none" },
|
|
28
|
+
{ tag: t.link, class: "cm-link" },
|
|
29
|
+
{ tag: t.url, class: "cm-link" },
|
|
30
|
+
{ tag: t.emphasis, class: "cm-emphasis" },
|
|
31
|
+
{ tag: t.strong, class: "cm-strong" },
|
|
32
|
+
{ tag: t.monospace, class: "cm-mono" },
|
|
33
|
+
// { tag: t.content, class: 'cm-content' },
|
|
34
|
+
{ tag: t.meta, class: "cm-meta" },
|
|
35
|
+
{ tag: t.strikethrough, class: "cm-strikethrough" },
|
|
36
|
+
{ tag: t.contentSeparator, class: "cm-horizontal-rule" },
|
|
37
|
+
// { tag: lezerHighlightHashtagTag, class: 'cm-hashtag' },
|
|
38
|
+
{ tag: lezerHighlightEmbed, class: "cm-embed" },
|
|
39
|
+
{ tag: lezerHighlightEmbedMark, class: "cm-embed-mark cm-meta" },
|
|
40
|
+
{ tag: lezerHighlightInternalLink, class: "cm-internal-link" },
|
|
41
|
+
{ tag: lezerHighlightInternalMark, class: "cm-internal-link-mark cm-meta" },
|
|
42
|
+
{ tag: lezerHighlightInternalPath, class: "cm-internal-link-path" },
|
|
43
|
+
{ tag: lezerHighlightInternalSubpath, class: "cm-internal-link-subpath" },
|
|
44
|
+
{ tag: lezerHighlightInternalDisplay, class: "cm-internal-link-display" },
|
|
45
|
+
{ tag: lezerHighlightYamlFrontmatter, class: "cm-yaml-frontmatter cm-meta" },
|
|
46
|
+
{ tag: lezerHighlightYamlMarker, class: "cm-yaml-marker cm-meta" },
|
|
47
|
+
{ tag: lezerHighlightYamlContent, class: "cm-yaml-content cm-meta" },
|
|
48
|
+
{ tag: lezerHighlightLatexBlock, class: "cm-tex-block cm-mono" },
|
|
49
|
+
// Style block math
|
|
50
|
+
{ tag: lezerHighlightLatexInline, class: "cm-tex-inline cm-mono" },
|
|
51
|
+
// Style inline math
|
|
52
|
+
{ tag: lezerHighlightLatexMarker, class: "cm-tex-marker cm-meta" },
|
|
53
|
+
// Style "$" or "$$"
|
|
54
|
+
{ tag: lezerHighlightIndentation, class: "cm-indent" }
|
|
55
|
+
]);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { DecorationSet, EditorView, ViewUpdate } from '@codemirror/view';
|
|
2
|
+
import { Decoration, type PluginValue } from '@codemirror/view';
|
|
3
|
+
import type { Range } from '@codemirror/state';
|
|
4
|
+
export default class RichEditPlugin implements PluginValue {
|
|
5
|
+
decorations: DecorationSet;
|
|
6
|
+
constructor(view: EditorView);
|
|
7
|
+
update(update: ViewUpdate): void;
|
|
8
|
+
process(view: EditorView): DecorationSet;
|
|
9
|
+
processRange(view: EditorView, from: number, to: number): Range<Decoration>[];
|
|
10
|
+
}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { Decoration } from "@codemirror/view";
|
|
2
|
+
import { syntaxTree } from "@codemirror/language";
|
|
3
|
+
import { cursorInNode } from "../utility/tools.js";
|
|
4
|
+
import {
|
|
5
|
+
decorationBullet,
|
|
6
|
+
decorationHidden
|
|
7
|
+
} from "../utility/decorations.js";
|
|
8
|
+
const revealComponentMarkTokensOnCursor = [
|
|
9
|
+
"InlineCode",
|
|
10
|
+
"Emphasis",
|
|
11
|
+
"StrongEmphasis",
|
|
12
|
+
"FencedCode",
|
|
13
|
+
"Strikethrough",
|
|
14
|
+
"Link",
|
|
15
|
+
"Image",
|
|
16
|
+
"Embed",
|
|
17
|
+
"InternalLink",
|
|
18
|
+
"Mark",
|
|
19
|
+
"Comment",
|
|
20
|
+
"Footnote",
|
|
21
|
+
"FootnoteReference"
|
|
22
|
+
// 'URL',
|
|
23
|
+
// 'LinkMark',
|
|
24
|
+
];
|
|
25
|
+
const hideComponentMarkTokens = [
|
|
26
|
+
"HardBreak",
|
|
27
|
+
// 'LinkMark',
|
|
28
|
+
"EmphasisMark",
|
|
29
|
+
"CodeMark",
|
|
30
|
+
"CodeInfo",
|
|
31
|
+
"StrikethroughMark",
|
|
32
|
+
"EmbedMark",
|
|
33
|
+
"InternalMark",
|
|
34
|
+
"MarkMarker",
|
|
35
|
+
"FootnoteMark",
|
|
36
|
+
"CommentMarker",
|
|
37
|
+
// 'TexMarker',
|
|
38
|
+
// 'URL',
|
|
39
|
+
"LinkMark"
|
|
40
|
+
];
|
|
41
|
+
export default class RichEditPlugin {
|
|
42
|
+
decorations;
|
|
43
|
+
constructor(view) {
|
|
44
|
+
this.decorations = this.process(view);
|
|
45
|
+
}
|
|
46
|
+
update(update) {
|
|
47
|
+
if (update.docChanged) {
|
|
48
|
+
let decorations = this.decorations.map(update.changes);
|
|
49
|
+
update.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
|
|
50
|
+
const newWidgets = this.processRange(update.view, fromB, toB);
|
|
51
|
+
decorations = decorations.update({
|
|
52
|
+
filter: (f, t) => f < fromB || t > toB,
|
|
53
|
+
add: newWidgets,
|
|
54
|
+
sort: true
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
this.decorations = decorations;
|
|
58
|
+
} else if (update.viewportChanged || update.selectionSet) {
|
|
59
|
+
this.decorations = this.process(update.view);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
process(view) {
|
|
63
|
+
const widgets = [];
|
|
64
|
+
for (const { from, to } of view.visibleRanges) {
|
|
65
|
+
widgets.push(...this.processRange(view, from, to));
|
|
66
|
+
}
|
|
67
|
+
return Decoration.set(widgets, true);
|
|
68
|
+
}
|
|
69
|
+
processRange(view, from, to) {
|
|
70
|
+
const widgets = [];
|
|
71
|
+
const [cursor] = view.state.selection.ranges;
|
|
72
|
+
for (let { from: from2, to: to2 } of view.visibleRanges) {
|
|
73
|
+
syntaxTree(view.state).iterate({
|
|
74
|
+
from: from2,
|
|
75
|
+
to: to2,
|
|
76
|
+
enter(node) {
|
|
77
|
+
const nodeName = node.name;
|
|
78
|
+
const nodeFrom = node.from;
|
|
79
|
+
const nodeTo = node.to;
|
|
80
|
+
if ((nodeName.startsWith("ATXHeading") || revealComponentMarkTokensOnCursor.includes(nodeName)) && cursorInNode(cursor?.from, cursor?.to, nodeFrom, nodeTo)) {
|
|
81
|
+
return false;
|
|
82
|
+
}
|
|
83
|
+
if (nodeName === "ListMark" && node.matchContext(["BulletList", "ListItem"]) && cursor?.from != nodeFrom && cursor?.from != nodeFrom + 1)
|
|
84
|
+
widgets.push(decorationBullet.range(nodeFrom, nodeTo));
|
|
85
|
+
if (hideComponentMarkTokens.includes(node.name))
|
|
86
|
+
widgets.push(decorationHidden.range(nodeFrom, nodeTo));
|
|
87
|
+
if (nodeName === "HeaderMark")
|
|
88
|
+
widgets.push(decorationHidden.range(nodeFrom, nodeTo + 1));
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
return widgets;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Component } from 'vue'
|
|
2
|
+
|
|
3
|
+
export interface InternalLink {
|
|
4
|
+
internalLinkName: string;
|
|
5
|
+
filePath?: string;
|
|
6
|
+
redirectToPath: string;
|
|
7
|
+
embedComponent?: Component;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export interface SpecialCodeBlockMapping {
|
|
11
|
+
codeInfo: string
|
|
12
|
+
component: Component
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export type WysiwygPlugin = {
|
|
16
|
+
lezer?: any
|
|
17
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Decoration } from "@codemirror/view";
|
|
2
|
+
export declare const decorationHidden: Decoration;
|
|
3
|
+
export declare const decorationBullet: Decoration;
|
|
4
|
+
export declare const decorationCode: Decoration;
|
|
5
|
+
export declare const decorationTag: Decoration;
|
|
6
|
+
export declare const decorationProseHashtag: Decoration;
|
|
7
|
+
export declare const decorationProseInternalLink: Decoration;
|
|
8
|
+
export declare const decorationProseInternalPath: Decoration;
|
|
9
|
+
export declare const decorationProseInternalSubpath: Decoration;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Decoration } from "@codemirror/view";
|
|
2
|
+
export const decorationHidden = Decoration.replace({ class: "cm-obsidian-hidden cm-obsidian", tagName: "span" });
|
|
3
|
+
export const decorationBullet = Decoration.mark({ class: "cm-obsidian-bullet cm-obsidian" });
|
|
4
|
+
export const decorationCode = Decoration.mark({ class: "cm-obsidian-code cm-obsidian" });
|
|
5
|
+
export const decorationTag = Decoration.mark({ class: "cm-obsidian-tag cm-obsidian" });
|
|
6
|
+
export const decorationProseHashtag = Decoration.mark({ class: "cm-hashtag", tagName: "span" });
|
|
7
|
+
export const decorationProseInternalLink = Decoration.mark({ class: "cm-internal-link", tagName: "span" });
|
|
8
|
+
export const decorationProseInternalPath = Decoration.replace({ class: "cm-internal-link-path", tagName: "span" });
|
|
9
|
+
export const decorationProseInternalSubpath = Decoration.replace({ class: "cm-internal-link-subpath", tagName: "span" });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { EditorState } from '@codemirror/state';
|
|
2
|
+
import { type SyntaxNodeRef } from '@lezer/common';
|
|
3
|
+
export declare function cursorInNode(cursorFrom: number | undefined, cursorTo: number | undefined, nodeFrom: number | undefined, nodeTo: number | undefined): boolean;
|
|
4
|
+
export declare function cursorSelectionCoveredNode(cursorFrom: number | undefined, cursorTo: number | undefined, nodeFrom: number | undefined, nodeTo: number | undefined): boolean;
|
|
5
|
+
export declare function toCursorNodePositions(state: EditorState, node?: SyntaxNodeRef): {
|
|
6
|
+
cursorFrom: number;
|
|
7
|
+
cursorTo: number;
|
|
8
|
+
nodeFrom: number;
|
|
9
|
+
nodeTo: number;
|
|
10
|
+
};
|
|
11
|
+
export declare function isNodeRangeActive(state: EditorState, nodeFrom: number, nodeTo: number): boolean;
|
|
12
|
+
export declare function isCursorInRange(state: EditorState, range: [from: number, to: number]): boolean;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export function cursorInNode(cursorFrom, cursorTo, nodeFrom, nodeTo) {
|
|
2
|
+
const cf = cursorFrom || 0, ct = cursorTo || 0, nf = nodeFrom || 0, nt = nodeTo || 0;
|
|
3
|
+
return cf >= nf && cf <= nt || ct >= nf && ct <= nt || cf <= nf && ct >= nt;
|
|
4
|
+
}
|
|
5
|
+
export function cursorSelectionCoveredNode(cursorFrom, cursorTo, nodeFrom, nodeTo) {
|
|
6
|
+
const cf = cursorFrom || 0, ct = cursorTo || 0, nf = nodeFrom || 0, nt = nodeTo || 0;
|
|
7
|
+
return cf <= nf && ct >= nt;
|
|
8
|
+
}
|
|
9
|
+
export function toCursorNodePositions(state, node) {
|
|
10
|
+
const [cursor] = state.selection.ranges;
|
|
11
|
+
return {
|
|
12
|
+
cursorFrom: cursor?.from || 0,
|
|
13
|
+
cursorTo: cursor?.to || 0,
|
|
14
|
+
nodeFrom: node?.from || 0,
|
|
15
|
+
nodeTo: node?.to || 0
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
export function isNodeRangeActive(state, nodeFrom, nodeTo) {
|
|
19
|
+
const cursor = state.selection.main;
|
|
20
|
+
if (cursor.empty) {
|
|
21
|
+
return cursor.from >= nodeFrom && cursor.from <= nodeTo;
|
|
22
|
+
} else {
|
|
23
|
+
return Math.max(nodeFrom, cursor.from) < Math.min(nodeTo, cursor.to);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
export function isCursorInRange(state, range) {
|
|
27
|
+
return state.selection.ranges.some((r) => {
|
|
28
|
+
const from = Math.min(r.from, r.to);
|
|
29
|
+
const to = Math.max(r.from, r.to);
|
|
30
|
+
return from >= range[0] && to <= range[1];
|
|
31
|
+
});
|
|
32
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { ViewPlugin } from "@codemirror/view";
|
|
2
|
+
import { syntaxHighlighting } from "@codemirror/language";
|
|
3
|
+
import { markdown } from "@codemirror/lang-markdown";
|
|
4
|
+
import RichEditPlugin from "./plugins/richTextPlugin.js";
|
|
5
|
+
import proseStylesPlugin from "./plugins/lezerStylesHighlightingPlugin.js";
|
|
6
|
+
import { CustomOFM } from "./lezer-parsers/customOFMParsers.js";
|
|
7
|
+
import { proseHashtagCodemirrorViewPlugin } from "./plugins/codemirror-plugin-proses/proseHashtagCodemirrorViewPlugin.js";
|
|
8
|
+
import {
|
|
9
|
+
proseInternalLinkCodemirrorViewPlugin
|
|
10
|
+
} from "./plugins/codemirror-plugin-proses/proseInternalLinkCodemirrorViewPlugin.js";
|
|
11
|
+
import {
|
|
12
|
+
proseCodeBlockCodemirrorViewPlugin
|
|
13
|
+
} from "./plugins/codemirror-plugin-proses/proseCodeBlockCodemirrorViewPlugin.js";
|
|
14
|
+
import { editorLinkClickPlugin } from "./plugins/codemirror-editor-plugins/editorLinkClickPlugin.js";
|
|
15
|
+
import { proseLinkCodemirrorViewPlugin } from "./plugins/codemirror-plugin-proses/proseLinkCodemirrorViewPlugin.js";
|
|
16
|
+
import { GFM } from "@lezer/markdown";
|
|
17
|
+
import { proseLatexCodemirrorViewPlugin } from "./plugins/codemirror-plugin-proses/proseLatexCodemirrorViewPlugin.js";
|
|
18
|
+
import {
|
|
19
|
+
editorInternalLinkAutocompletePlugin
|
|
20
|
+
} from "./plugins/codemirror-editor-plugins/editorInternalLinkAutocompletePlugin.js";
|
|
21
|
+
import {
|
|
22
|
+
proseQuoteblockCodemirrorViewPlugin
|
|
23
|
+
} from "./plugins/codemirror-plugin-proses/proseQuoteblockCodemirrorViewPlugin.js";
|
|
24
|
+
import { editorKeymapPlugin } from "./plugins/codemirror-editor-plugins/editorKeymapPlugin.js";
|
|
25
|
+
import {
|
|
26
|
+
proseHighlightCodemirrorViewPlugin
|
|
27
|
+
} from "./plugins/codemirror-plugin-proses/proseHighlightCodemirrorViewPlugin.js";
|
|
28
|
+
import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
|
|
29
|
+
import { customBracketClosingPlugin } from "./plugins/codemirror-editor-plugins/customBracketClosingPlugin.js";
|
|
30
|
+
import { customBracketClosingConfig } from "./plugins/customBracketClosingConfig.js";
|
|
31
|
+
import { indentationGuides } from "./plugins/codemirror-editor-plugins/indentationGuidesPlugin.js";
|
|
32
|
+
import { editorLivePreviewField, proseTaskListPlugin } from "./plugins/codemirror-plugin-proses/proseTaskListPlugin.js";
|
|
33
|
+
import { proseCalloutPlugin } from "./plugins/codemirror-plugin-proses/proseCalloutPlugin.js";
|
|
34
|
+
import { indentationListPlugin } from "./plugins/codemirror-editor-plugins/indentationListPlugin.js";
|
|
35
|
+
export default function(config) {
|
|
36
|
+
const mergedConfig = {
|
|
37
|
+
...config?.lezer ?? [],
|
|
38
|
+
// Spreads user-passed lezer config (like codeLanguages)
|
|
39
|
+
extensions: [
|
|
40
|
+
GFM,
|
|
41
|
+
CustomOFM,
|
|
42
|
+
{ remove: ["SetextHeading"] },
|
|
43
|
+
...config?.lezer?.extensions ?? []
|
|
44
|
+
// Any other extensions passed in
|
|
45
|
+
],
|
|
46
|
+
nested: {
|
|
47
|
+
// For Markdoc tag parsing primarily
|
|
48
|
+
blockquote: true,
|
|
49
|
+
list: true
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return ViewPlugin.fromClass(RichEditPlugin, {
|
|
53
|
+
decorations: (v) => v.decorations,
|
|
54
|
+
provide: (value) => [
|
|
55
|
+
autocompletion(),
|
|
56
|
+
closeBrackets(),
|
|
57
|
+
proseCodeBlockCodemirrorViewPlugin,
|
|
58
|
+
proseHighlightCodemirrorViewPlugin,
|
|
59
|
+
proseInternalLinkCodemirrorViewPlugin,
|
|
60
|
+
proseLinkCodemirrorViewPlugin,
|
|
61
|
+
proseHashtagCodemirrorViewPlugin,
|
|
62
|
+
proseLatexCodemirrorViewPlugin(),
|
|
63
|
+
proseQuoteblockCodemirrorViewPlugin,
|
|
64
|
+
proseCalloutPlugin,
|
|
65
|
+
proseTaskListPlugin,
|
|
66
|
+
editorLivePreviewField.init(() => true),
|
|
67
|
+
editorLinkClickPlugin,
|
|
68
|
+
editorInternalLinkAutocompletePlugin,
|
|
69
|
+
editorKeymapPlugin,
|
|
70
|
+
customBracketClosingPlugin,
|
|
71
|
+
customBracketClosingConfig.of(true),
|
|
72
|
+
// Default to enabled
|
|
73
|
+
indentationGuides(),
|
|
74
|
+
indentationListPlugin,
|
|
75
|
+
// editorAttributesPlugin,
|
|
76
|
+
syntaxHighlighting(proseStylesPlugin),
|
|
77
|
+
markdown(mergedConfig)
|
|
78
|
+
]
|
|
79
|
+
});
|
|
80
|
+
}
|
package/dist/types.d.mts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@type32/codemirror-rich-obsidian-editor",
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "OFM Editor Component for Nuxt.",
|
|
5
|
+
"repository": "Type-32/codemirror-rich-obsidian",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"private": false,
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/types.d.mts",
|
|
12
|
+
"import": "./dist/module.mjs"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"main": "./dist/module.mjs",
|
|
16
|
+
"typesVersions": {
|
|
17
|
+
"*": {
|
|
18
|
+
".": [
|
|
19
|
+
"./dist/types.d.mts"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"scripts": {
|
|
27
|
+
"prepack": "nuxt-module-build build",
|
|
28
|
+
"dev": "bun run dev:prepare && nuxi dev playground",
|
|
29
|
+
"dev:build": "nuxi build playground",
|
|
30
|
+
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
|
|
31
|
+
"release": "bun run prepack && changelogen --release && bun publish && git push --follow-tags",
|
|
32
|
+
"lint": "eslint .",
|
|
33
|
+
"test": "vitest run",
|
|
34
|
+
"test:watch": "vitest watch",
|
|
35
|
+
"test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@nuxt/kit": "^4.1.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@nuxt/devtools": "^2.6.3",
|
|
42
|
+
"@nuxt/eslint-config": "^1.9.0",
|
|
43
|
+
"@nuxt/module-builder": "^1.0.2",
|
|
44
|
+
"@nuxt/schema": "^4.1.0",
|
|
45
|
+
"@nuxt/test-utils": "^3.19.2",
|
|
46
|
+
"@types/node": "latest",
|
|
47
|
+
"changelogen": "^0.6.2",
|
|
48
|
+
"eslint": "^9.34.0",
|
|
49
|
+
"nuxt": "^4.1.0",
|
|
50
|
+
"typescript": "~5.9.2",
|
|
51
|
+
"vitest": "^3.2.4",
|
|
52
|
+
"vue-tsc": "^3.0.6",
|
|
53
|
+
"@codemirror/autocomplete": "^6.18.7",
|
|
54
|
+
"@codemirror/lang-json": "^6.0.2",
|
|
55
|
+
"@codemirror/lang-markdown": "^6.3.4",
|
|
56
|
+
"@codemirror/lang-yaml": "^6.1.2",
|
|
57
|
+
"@codemirror/language": "^6.11.3",
|
|
58
|
+
"@codemirror/language-data": "^6.5.1",
|
|
59
|
+
"@hsorby/vue3-katex": "0.6.0-rc.7",
|
|
60
|
+
"@iconify-json/lucide": "^1.2.66",
|
|
61
|
+
"@iconify-json/simple-icons": "^1.2.50",
|
|
62
|
+
"@lezer/markdown": "^1.4.3",
|
|
63
|
+
"@nuxt/fonts": "0.11.4",
|
|
64
|
+
"@nuxt/icon": "1.15.0",
|
|
65
|
+
"@nuxt/image": "1.10.0",
|
|
66
|
+
"@nuxt/ui": "^4.0.0-alpha.1",
|
|
67
|
+
"codemirror": "^6.0.2",
|
|
68
|
+
"katex": "^0.16.22",
|
|
69
|
+
"lezer-markdown-obsidian": "^0.0.3",
|
|
70
|
+
"markdown-it": "^14.1.0",
|
|
71
|
+
"markdown-it-obsidian-callouts": "^0.3.2",
|
|
72
|
+
"vue-codemirror6": "^1.3.22"
|
|
73
|
+
},
|
|
74
|
+
"trustedDependencies": [
|
|
75
|
+
"@parcel/watcher",
|
|
76
|
+
"@tailwindcss/oxide",
|
|
77
|
+
"core-js",
|
|
78
|
+
"unrs-resolver"
|
|
79
|
+
]
|
|
80
|
+
}
|