This commit is contained in:
Zef Hemel
2023-01-22 18:53:14 +01:00
parent 5ad804da1c
commit 53bf098579
18 changed files with 226 additions and 140 deletions
+37 -16
View File
@@ -11,7 +11,8 @@ import { decoratorStateField, isCursorInRange } from "./util.ts";
type AdmonitionType = "note" | "warning";
const ADMONITION_REGEX = /^>( *)\*{2}(Note|Warning)\*{2}( *)(.*)(?:\n([\s\S]*))?/im;
const ADMONITION_REGEX =
/^>( *)\*{2}(Note|Warning)\*{2}( *)(.*)(?:\n([\s\S]*))?/im;
const ADMONITION_LINE_SPLIT_REGEX = /\n>/gm;
class AdmonitionIconWidget extends WidgetType {
@@ -36,10 +37,16 @@ class AdmonitionIconWidget extends WidgetType {
switch (this.type) {
case "note":
outerDiv.insertAdjacentHTML("beforeend", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
outerDiv.insertAdjacentHTML(
"beforeend",
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>',
);
break;
case "warning":
outerDiv.insertAdjacentHTML("beforeend", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
outerDiv.insertAdjacentHTML(
"beforeend",
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
);
break;
default:
//
@@ -72,13 +79,19 @@ function extractAdmonitionFields(rawText: string): AdmonitionFields | null {
const regexResults = rawText.match(ADMONITION_REGEX);
if (regexResults) {
const preSpaces = regexResults[1] || '';
const preSpaces = regexResults[1] || "";
const admonitionType = regexResults[2].toLowerCase() as AdmonitionType;
const postSpaces = regexResults[3] || '';
const admonitionTitle: string = regexResults[4] || '';
const admonitionContent: string = regexResults[5] || '';
const postSpaces = regexResults[3] || "";
const admonitionTitle: string = regexResults[4] || "";
const admonitionContent: string = regexResults[5] || "";
return { preSpaces, admonitionType, postSpaces, admonitionTitle, admonitionContent };
return {
preSpaces,
admonitionType,
postSpaces,
admonitionTitle,
admonitionContent,
};
}
return null;
@@ -112,7 +125,7 @@ export function admonitionPlugin(editor: Editor) {
const fromOffsets: number[] = [];
const lines = rawText.slice(1).split(ADMONITION_LINE_SPLIT_REGEX);
let accum = from;
lines.forEach(line => {
lines.forEach((line) => {
fromOffsets.push(accum);
accum += line.length + 2;
});
@@ -121,15 +134,16 @@ export function admonitionPlugin(editor: Editor) {
// icon further down.
const iconRange = {
from: from + 1,
to: from + preSpaces.length + 2 + admonitionType.length + 2 + postSpaces.length + 1,
to: from + preSpaces.length + 2 + admonitionType.length + 2 +
postSpaces.length + 1,
};
const classes = ["sb-admonition"];
switch (admonitionType) {
case 'note':
case "note":
classes.push("sb-admonition-note");
break;
case 'warning':
case "warning":
classes.push("sb-admonition-warning");
break;
default:
@@ -138,12 +152,19 @@ export function admonitionPlugin(editor: Editor) {
// The first div is the title, attach relevant css classes
widgets.push(
Decoration.line({ class: "sb-admonition-title " + classes.join(" ") }).range(fromOffsets[0]),
Decoration.line({
class: "sb-admonition-title " + classes.join(" "),
}).range(fromOffsets[0]),
);
// If cursor is not within the first line, replace the **note|warning** text
// with the correct icon
if (!isCursorInRange(state, [from, fromOffsets.length > 1 ? fromOffsets[1] : to])) {
if (
!isCursorInRange(state, [
from,
fromOffsets.length > 1 ? fromOffsets[1] : to,
])
) {
widgets.push(
Decoration.replace({
widget: new AdmonitionIconWidget(
@@ -152,13 +173,13 @@ export function admonitionPlugin(editor: Editor) {
editor.editorView!,
),
inclusive: true,
}).range(iconRange.from, iconRange.to)
}).range(iconRange.from, iconRange.to),
);
}
// Each line of the blockquote is spread across separate divs, attach
// relevant css classes here.
fromOffsets.slice(1).forEach(fromOffset => {
fromOffsets.slice(1).forEach((fromOffset) => {
widgets.push(
Decoration.line({ class: classes.join(" ") }).range(fromOffset),
);