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

Add alt and title attributes to the images

pull/66/head
Pantelis Vratsalis 2022-08-23 19:53:05 +03:00
parent 3fa2bb4b5d
commit a80d08ce0f
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/inline_image.ts
View File

@ -3,17 +3,19 @@ import { Range } from "@codemirror/state";
import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from "@codemirror/view"; import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from "@codemirror/view";
class InlineImageWidget extends WidgetType { class InlineImageWidget extends WidgetType {
constructor(readonly url: string) { constructor(readonly url: string, readonly title: string) {
super(); super();
} }
eq(other: InlineImageWidget) { eq(other: InlineImageWidget) {
return other.url === this.url; return other.url === this.url && other.title === this.title;
} }
toDOM() { toDOM() {
const img = document.createElement('img') const img = document.createElement('img')
img.src = this.url; img.src = this.url;
img.alt = this.title;
img.title = this.title;
img.style.display = 'block'; img.style.display = 'block';
return img; return img;
@ -22,7 +24,7 @@ class InlineImageWidget extends WidgetType {
const inlineImages = (view: EditorView) => { const inlineImages = (view: EditorView) => {
let widgets: Range<Decoration>[] = []; let widgets: Range<Decoration>[] = [];
const imageRegex = /!\[[^\]]*\]\((?<url>.+)\)/; const imageRegex = /!\[(?<title>[^\]]*)\]\((?<url>.+)\)/;
for (let {from, to} of view.visibleRanges) { for (let {from, to} of view.visibleRanges) {
syntaxTree(view.state).iterate({ syntaxTree(view.state).iterate({
@ -38,8 +40,9 @@ const inlineImages = (view: EditorView) => {
} }
const url = imageRexexResult.groups.url; const url = imageRexexResult.groups.url;
const title = imageRexexResult.groups.title;
let deco = Decoration.widget({ let deco = Decoration.widget({
widget: new InlineImageWidget(url), widget: new InlineImageWidget(url, title),
}); });
widgets.push(deco.range(node.to)); widgets.push(deco.range(node.to));
} }