mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes to missing link marking

pull/138/head
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(
Decoration.widget({
widget: new LinkWidget(
cleanAnchor,
`Click to visit ${cleanLink}`,
"sb-link",
(e) => {
if (e.altKey) {
// 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!,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
pos: from,
};
editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
{
text: cleanAnchor,
title: `Click to visit ${cleanLink}`,
cssClass: "sb-link",
href: cleanLink,
callback: (e) => {
if (e.altKey) {
// 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!,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
pos: from,
};
editor.dispatchAppEvent("page:click", clickEvent).catch(
console.error,
);
},
},
),
}).range(from),

22
web/cm_plugins/util.ts
View File

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

51
web/cm_plugins/wiki_link.ts
View File

@ -89,29 +89,34 @@ export function cleanWikiLinkPlugin(editor: Editor) {
widgets.push(
Decoration.widget({
widget: new LinkWidget(
linkText,
pageExists ? `Navigate to ${page}` : `Create ${page}`,
pageExists
? "sb-wiki-link-page"
: "sb-wiki-link-page-missing",
(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,
);
{
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),

2
web/styles/theme.scss
View File

@ -348,7 +348,7 @@
text-decoration: none;
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;
background-color: rgba(77, 141, 255, 0.07);
border-radius: 5px;