From 5fe77083ae609a28c6dc1615fc96196e9fc040c6 Mon Sep 17 00:00:00 2001 From: onespaceman Date: Fri, 19 Jul 2024 11:00:13 -0400 Subject: [PATCH] Fix #850 (#964) --- web/cm_plugins/admonition.ts | 50 ++++----------------------------- web/styles/colors.scss | 2 +- web/styles/editor.scss | 6 ++-- web/styles/theme.scss | 8 ++++++ website/Markdown/Admonitions.md | 1 + 5 files changed, 18 insertions(+), 49 deletions(-) diff --git a/web/cm_plugins/admonition.ts b/web/cm_plugins/admonition.ts index 08df5f14..5ab3f91b 100644 --- a/web/cm_plugins/admonition.ts +++ b/web/cm_plugins/admonition.ts @@ -9,30 +9,6 @@ const ADMONITION_REGEX = /^>( *)(?:\*{2}|\[!)(.*?)(\*{2}|\])( *)(.*)(?:\n([\s\S]*))?/im; const ADMONITION_LINE_SPLIT_REGEX = /\n>/gm; -class AdmonitionIconWidget extends WidgetType { - constructor( - readonly pos: number, - readonly type: string, - readonly editorView: EditorView, - ) { - super(); - } - - toDOM(): HTMLElement { - const outerDiv = document.createElement("div"); - outerDiv.classList.add("sb-admonition-icon"); - outerDiv.addEventListener("click", () => { - this.editorView.dispatch({ - selection: { - anchor: this.pos, - }, - }); - }); - - return outerDiv; - } -} - type AdmonitionFields = { preSpaces: string; admonitionType: string; @@ -85,13 +61,6 @@ export function admonitionPlugin(editor: Client) { return decoratorStateField((state: EditorState) => { const widgets: any[] = []; - // Get admonition styles from stylesheets - const allStyles = [...document.styleSheets] - .map((styleSheet) => { - return [...styleSheet.cssRules].map((rule) => rule.cssText).join(""); - }).filter(Boolean).join("\n"); - const admonitionStyles = allStyles.match(/(?<=admonition=").*?(?=")/g); - syntaxTree(state).iterate({ enter: (node: SyntaxNodeRef) => { const { type, from, to } = node; @@ -111,10 +80,6 @@ export function admonitionPlugin(editor: Client) { const { preSpaces, admonitionType, postSyntax, postSpaces } = extractedFields; - if (!admonitionStyles?.includes(admonitionType)) { - return; - } - // A blockquote is actually rendered as many divs, one per line. // We need to keep track of the `from` offsets here, so we can attach css // classes to them further down. @@ -129,10 +94,9 @@ export function admonitionPlugin(editor: Client) { // `from` and `to` range info for switching out keyword text with correct // icon further down. const iconRange = { - from: from + 1, + from: from + 2, to: from + preSpaces.length + 2 + admonitionType.length + - postSyntax.length + - postSpaces.length + 1, + postSyntax.length + 1, }; // The first div is the title, attach title css class @@ -151,13 +115,9 @@ export function admonitionPlugin(editor: Client) { ]) ) { widgets.push( - Decoration.replace({ - widget: new AdmonitionIconWidget( - iconRange.from + 1, - admonitionType, - editor.editorView, - ), - inclusive: true, + Decoration.mark({ + tagName: "span", + class: "sb-admonition-type", }).range(iconRange.from, iconRange.to), ); } diff --git a/web/styles/colors.scss b/web/styles/colors.scss index 3a0163a2..5ca6bccf 100644 --- a/web/styles/colors.scss +++ b/web/styles/colors.scss @@ -364,7 +364,7 @@ tbody tr:nth-of-type(even) { background-color: color-mix(in srgb, var(--admonition-color), transparent 90%) } -.sb-admonition-icon { +.sb-admonition-type::before { background-color: var(--admonition-color); } diff --git a/web/styles/editor.scss b/web/styles/editor.scss index cb5b6f2c..226defc0 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -612,7 +612,8 @@ border-left-style: solid; } - .sb-admonition-icon { + .sb-admonition-type::before { + content: ""; mask: var(--admonition-icon) no-repeat; -webkit-mask: var(--admonition-icon) no-repeat; mask-size: cover; @@ -621,8 +622,7 @@ height: 1.1em; display: inline-flex; vertical-align: middle; - margin-left: 16px; - margin-right: 8px; + margin-left: 5px; } .sb-frontmatter-marker { diff --git a/web/styles/theme.scss b/web/styles/theme.scss index 5ccd8aeb..ac91d0a2 100644 --- a/web/styles/theme.scss +++ b/web/styles/theme.scss @@ -256,11 +256,19 @@ html[data-theme="dark"] { } .sb-admonition[admonition="note"] { + .sb-admonition-type * { + display: none; + } + --admonition-icon: url('data:image/svg+xml,'); --admonition-color: #00b8d4; } .sb-admonition[admonition="warning"] { + .sb-admonition-type * { + display: none; + } + --admonition-icon: url('data:image/svg+xml,'); --admonition-color: #ff9100; } \ No newline at end of file diff --git a/website/Markdown/Admonitions.md b/website/Markdown/Admonitions.md index f9572e67..8c818a79 100644 --- a/website/Markdown/Admonitions.md +++ b/website/Markdown/Admonitions.md @@ -11,6 +11,7 @@ Custom admonitions can be added in a [[Space Style]] using the following format: ```space-style // Replace the keyword with a word or phrase of your choice .sb-admonition[admonition="keyword"] { + .sb-admonition-type * { display: none; } // The icon can be a link or an embedded image like shown here --admonition-icon: url('data:image/svg+xml,'); // The accent color