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