2022-08-29 13:47:16 +00:00
|
|
|
import {
|
|
|
|
Decoration,
|
2022-12-09 15:09:53 +00:00
|
|
|
EditorState,
|
2022-11-18 15:04:37 +00:00
|
|
|
Range,
|
|
|
|
syntaxTree,
|
2022-08-29 13:47:16 +00:00
|
|
|
WidgetType,
|
2022-11-18 15:04:37 +00:00
|
|
|
} from "../deps.ts";
|
2022-12-09 15:09:53 +00:00
|
|
|
import { decoratorStateField } from "./util.ts";
|
2022-08-23 06:12:24 +00:00
|
|
|
|
2023-05-23 18:53:53 +00:00
|
|
|
import type { Space } from "../space.ts";
|
2023-01-08 11:24:12 +00:00
|
|
|
|
2022-08-23 06:12:24 +00:00
|
|
|
class InlineImageWidget extends WidgetType {
|
2023-01-08 11:24:12 +00:00
|
|
|
constructor(
|
|
|
|
readonly url: string,
|
|
|
|
readonly title: string,
|
|
|
|
readonly space: Space,
|
|
|
|
) {
|
2022-08-23 06:12:24 +00:00
|
|
|
super();
|
|
|
|
}
|
|
|
|
|
|
|
|
eq(other: InlineImageWidget) {
|
2022-08-23 16:53:05 +00:00
|
|
|
return other.url === this.url && other.title === this.title;
|
2022-08-23 06:12:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
toDOM() {
|
2022-08-29 13:47:16 +00:00
|
|
|
const img = document.createElement("img");
|
2022-09-06 12:36:06 +00:00
|
|
|
if (this.url.startsWith("http")) {
|
|
|
|
img.src = this.url;
|
|
|
|
} else {
|
2023-05-23 18:53:53 +00:00
|
|
|
// This is an attachment image, rewrite the URL a little
|
|
|
|
img.src = `/.fs/${decodeURIComponent(this.url)}`;
|
2022-09-06 12:36:06 +00:00
|
|
|
}
|
2023-01-08 11:24:12 +00:00
|
|
|
|
2022-08-23 16:53:05 +00:00
|
|
|
img.alt = this.title;
|
|
|
|
img.title = this.title;
|
2022-08-29 13:47:16 +00:00
|
|
|
img.style.display = "block";
|
|
|
|
img.className = "sb-inline-img";
|
2022-08-23 06:12:24 +00:00
|
|
|
|
|
|
|
return img;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-08 11:24:12 +00:00
|
|
|
export function inlineImagesPlugin(space: Space) {
|
2022-12-09 15:09:53 +00:00
|
|
|
return decoratorStateField((state: EditorState) => {
|
|
|
|
const widgets: Range<Decoration>[] = [];
|
|
|
|
const imageRegex = /!\[(?<title>[^\]]*)\]\((?<url>.+)\)/;
|
2022-08-23 06:12:24 +00:00
|
|
|
|
2022-12-09 15:09:53 +00:00
|
|
|
syntaxTree(state).iterate({
|
2022-08-23 06:12:24 +00:00
|
|
|
enter: (node) => {
|
2022-08-29 13:47:16 +00:00
|
|
|
if (node.name !== "Image") {
|
|
|
|
return;
|
2022-08-23 06:12:24 +00:00
|
|
|
}
|
2022-08-29 13:47:16 +00:00
|
|
|
|
|
|
|
const imageRexexResult = imageRegex.exec(
|
2022-12-09 15:09:53 +00:00
|
|
|
state.sliceDoc(node.from, node.to),
|
2022-08-29 13:47:16 +00:00
|
|
|
);
|
2022-08-23 06:12:24 +00:00
|
|
|
if (imageRexexResult === null || !imageRexexResult.groups) {
|
|
|
|
return;
|
|
|
|
}
|
2022-08-29 13:47:16 +00:00
|
|
|
|
2022-08-23 06:12:24 +00:00
|
|
|
const url = imageRexexResult.groups.url;
|
2022-08-23 16:53:05 +00:00
|
|
|
const title = imageRexexResult.groups.title;
|
2022-11-18 15:04:37 +00:00
|
|
|
widgets.push(
|
|
|
|
Decoration.widget({
|
2023-01-08 11:24:12 +00:00
|
|
|
widget: new InlineImageWidget(url, title, space),
|
2023-02-28 09:07:20 +00:00
|
|
|
block: true,
|
2022-11-18 15:04:37 +00:00
|
|
|
}).range(node.to),
|
|
|
|
);
|
2022-08-29 13:47:16 +00:00
|
|
|
},
|
2022-08-23 06:12:24 +00:00
|
|
|
});
|
|
|
|
|
2022-12-09 15:09:53 +00:00
|
|
|
return Decoration.set(widgets, true);
|
|
|
|
});
|
|
|
|
}
|