Fixes #164: Rewrote all CM view plugins to statefields

This commit is contained in:
Zef Hemel
2022-12-09 16:12:55 +01:00
parent 453c613ef4
commit c8c4271aeb
16 changed files with 433 additions and 739 deletions
+89 -115
View File
@@ -1,17 +1,11 @@
import { pageLinkRegex } from "../../common/parser.ts";
import { ClickEvent } from "../../plug-api/app_event.ts";
import {
Decoration,
DecorationSet,
EditorView,
ViewPlugin,
ViewUpdate,
} from "../deps.ts";
import { Decoration, syntaxTree } from "../deps.ts";
import { Editor } from "../editor.tsx";
import {
decoratorStateField,
invisibleDecoration,
isCursorInRange,
iterateTreeInVisibleRanges,
LinkWidget,
} from "./util.ts";
@@ -19,119 +13,99 @@ import {
* Plugin to hide path prefix when the cursor is not inside.
*/
export function cleanWikiLinkPlugin(editor: Editor) {
return ViewPlugin.fromClass(
class {
decorations: DecorationSet;
constructor(view: EditorView) {
this.decorations = this.compute(view);
}
update(update: ViewUpdate) {
if (
update.docChanged || update.viewportChanged || update.selectionSet
) {
this.decorations = this.compute(update.view);
return decoratorStateField((state) => {
const widgets: any[] = [];
// let parentRange: [number, number];
syntaxTree(state).iterate({
enter: ({ type, from, to }) => {
if (type.name !== "WikiLink") {
return;
}
}
compute(view: EditorView): DecorationSet {
const widgets: any[] = [];
// let parentRange: [number, number];
iterateTreeInVisibleRanges(view, {
enter: ({ type, from, to }) => {
if (type.name !== "WikiLink") {
return;
}
const text = view.state.sliceDoc(from, to);
const match = pageLinkRegex.exec(text);
if (!match) return;
const [_fullMatch, page, pipePart, alias] = match;
const text = state.sliceDoc(from, to);
const match = pageLinkRegex.exec(text);
if (!match) return;
const [_fullMatch, page, pipePart, alias] = match;
const allPages = editor.space.listPages();
let pageExists = false;
let cleanPage = page;
if (page.includes("@")) {
cleanPage = page.split("@")[0];
}
for (const pageMeta of allPages) {
if (pageMeta.name === cleanPage) {
pageExists = true;
break;
}
}
if (cleanPage === "") {
// Empty page name, or local @anchor use
pageExists = true;
}
const allPages = editor.space.listPages();
let pageExists = false;
let cleanPage = page;
if (page.includes("@")) {
cleanPage = page.split("@")[0];
}
for (const pageMeta of allPages) {
if (pageMeta.name === cleanPage) {
pageExists = true;
break;
}
}
if (cleanPage === "") {
// Empty page name, or local @anchor use
pageExists = true;
}
if (isCursorInRange(view.state, [from, to])) {
// Only attach a CSS class, then get out
if (!pageExists) {
widgets.push(
Decoration.mark({
class: "sb-wiki-link-page-missing",
}).range(from + 2, from + page.length + 2),
);
}
return;
}
// Hide the whole thing
if (isCursorInRange(state, [from, to])) {
// Only attach a CSS class, then get out
if (!pageExists) {
widgets.push(
invisibleDecoration.range(
from,
to,
),
Decoration.mark({
class: "sb-wiki-link-page-missing",
}).range(from + 2, from + page.length + 2),
);
}
return;
}
let linkText = alias || page;
if (!pipePart && text.indexOf("/") !== -1) {
// Let's use the last part of the path as the link text
linkText = page.split("/").pop()!;
}
// Hide the whole thing
widgets.push(
invisibleDecoration.range(
from,
to,
),
);
// And replace it with a widget
widgets.push(
Decoration.widget({
widget: new LinkWidget(
{
text: linkText,
title: pageExists
? `Navigate to ${page}`
: `Create ${page}`,
href: `/${page.replaceAll(" ", "_")}`,
cssClass: pageExists
? "sb-wiki-link-page"
: "sb-wiki-link-page-missing",
callback: (e) => {
if (e.altKey) {
// Move cursor into the link
return view.dispatch({
selection: { anchor: from + 2 },
});
}
// Dispatch click event to navigate there without moving the cursor
const clickEvent: ClickEvent = {
page: editor.currentPage!,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
pos: from,
};
editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
},
},
),
}).range(from),
);
},
});
return Decoration.set(widgets, true);
}
},
{
decorations: (v) => v.decorations,
},
);
let linkText = alias || page;
if (!pipePart && text.indexOf("/") !== -1) {
// Let's use the last part of the path as the link text
linkText = page.split("/").pop()!;
}
// And replace it with a widget
widgets.push(
Decoration.widget({
widget: new LinkWidget(
{
text: linkText,
title: pageExists ? `Navigate to ${page}` : `Create ${page}`,
href: `/${page.replaceAll(" ", "_")}`,
cssClass: pageExists
? "sb-wiki-link-page"
: "sb-wiki-link-page-missing",
callback: (e) => {
if (e.altKey) {
// Move cursor into the link
return editor.editorView!.dispatch({
selection: { anchor: from + 2 },
});
}
// Dispatch click event to navigate there without moving the cursor
const clickEvent: ClickEvent = {
page: editor.currentPage!,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
pos: from,
};
editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
},
},
),
}).range(from),
);
},
});
return Decoration.set(widgets, true);
});
}