neil/silverbullet
1
0
Fork 0
Code

Fixes to missing link marking

Browse Source
This commit is contained in:
Zef Hemel 2022-11-30 15:28:43 +01:00
parent 477f021644
commit a41695bc67
4 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/cm_plugins/link.ts
View File

@ -56,27 +56,30 @@ export function linkPlugin(editor: Editor) {
widgets.push( widgets.push(
Decoration.widget({ Decoration.widget({
widget: new LinkWidget( widget: new LinkWidget(
cleanAnchor, {
`Click to visit ${cleanLink}`, text: cleanAnchor,
"sb-link", title: `Click to visit ${cleanLink}`,
(e) => { cssClass: "sb-link",
if (e.altKey) { href: cleanLink,
// Move cursor into the link, approximate location callback: (e) => {
return view.dispatch({ if (e.altKey) {
selection: { anchor: from + 1 }, // Move cursor into the link, approximate location
}); return view.dispatch({
} selection: { anchor: from + 1 },
// Dispatch click event to navigate there without moving the cursor });
const clickEvent: ClickEvent = { }
page: editor.currentPage!, // Dispatch click event to navigate there without moving the cursor
ctrlKey: e.ctrlKey, const clickEvent: ClickEvent = {
metaKey: e.metaKey, page: editor.currentPage!,
altKey: e.altKey, ctrlKey: e.ctrlKey,
pos: from, metaKey: e.metaKey,
}; altKey: e.altKey,
editor.dispatchAppEvent("page:click", clickEvent).catch( pos: from,
console.error, };
); editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
},
}, },
), ),
}).range(from), }).range(from),

22
web/cm_plugins/util.ts
View File

@ -11,26 +11,30 @@ import {
WidgetType, WidgetType,
} from "../deps.ts"; } from "../deps.ts";
type LinkOptions = {
text: string;
href?: string;
title: string;
cssClass: string;
callback: (e: MouseEvent) => void;
};
export class LinkWidget extends WidgetType { export class LinkWidget extends WidgetType {
constructor( constructor(
readonly text: string, readonly options: LinkOptions,
readonly title: string,
readonly cssClass: string,
readonly callback: (e: MouseEvent) => void,
) { ) {
super(); super();
} }
toDOM(): HTMLElement { toDOM(): HTMLElement {
const anchor = document.createElement("a"); const anchor = document.createElement("a");
anchor.className = this.cssClass; anchor.className = this.options.cssClass;
anchor.textContent = this.text; anchor.textContent = this.options.text;
anchor.addEventListener("click", (e) => { anchor.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.callback(e); this.options.callback(e);
}); });
anchor.setAttribute("title", this.title); anchor.setAttribute("title", this.options.title);
anchor.href = "#"; anchor.href = this.options.href || "#";
return anchor; return anchor;
} }
} }

51
web/cm_plugins/wiki_link.ts
View File

@ -89,29 +89,34 @@ export function cleanWikiLinkPlugin(editor: Editor) {
widgets.push( widgets.push(
Decoration.widget({ Decoration.widget({
widget: new LinkWidget( widget: new LinkWidget(
linkText, {
pageExists ? `Navigate to ${page}` : `Create ${page}`, text: linkText,
pageExists title: pageExists
? "sb-wiki-link-page" ? `Navigate to ${page}`
: "sb-wiki-link-page-missing", : `Create ${page}`,
(e) => { href: `/${page.replaceAll(" ", "_")}`,
if (e.altKey) { cssClass: pageExists
// Move cursor into the link ? "sb-wiki-link-page"
return view.dispatch({ : "sb-wiki-link-page-missing",
selection: { anchor: from + 2 }, callback: (e) => {
}); if (e.altKey) {
} // Move cursor into the link
// Dispatch click event to navigate there without moving the cursor return view.dispatch({
const clickEvent: ClickEvent = { selection: { anchor: from + 2 },
page: editor.currentPage!, });
ctrlKey: e.ctrlKey, }
metaKey: e.metaKey, // Dispatch click event to navigate there without moving the cursor
altKey: e.altKey, const clickEvent: ClickEvent = {
pos: from, page: editor.currentPage!,
}; ctrlKey: e.ctrlKey,
editor.dispatchAppEvent("page:click", clickEvent).catch( metaKey: e.metaKey,
console.error, altKey: e.altKey,
); pos: from,
};
editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
},
}, },
), ),
}).range(from), }).range(from),

2
web/styles/theme.scss
View File

@ -348,7 +348,7 @@
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page { a.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {
color: #9e4705; color: #9e4705;
background-color: rgba(77, 141, 255, 0.07); background-color: rgba(77, 141, 255, 0.07);
border-radius: 5px; border-radius: 5px;