Fix #850 (#964)

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 +
+              postSyntax.length + 1,
-              postSpaces.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({
+              Decoration.mark({
-                widget: new AdmonitionIconWidget(
+                tagName: "span",
-                  iconRange.from + 1,
+                class: "sb-admonition-type",
-                  admonitionType,
-                  editor.editorView,
-                ),
-                inclusive: true,
               }).range(iconRange.from, iconRange.to),
             );
           }

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);
 }
 

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-left: 5px;
-    margin-right: 8px;
   }
 
   .sb-frontmatter-marker {

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,<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>');
   --admonition-color: #00b8d4;
 }
 
 .sb-admonition[admonition="warning"] {
+  .sb-admonition-type * {
+    display: none;
+  }
+
   --admonition-icon: url('data:image/svg+xml,<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>');
   --admonition-color: #ff9100;
 }

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,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19.5 12L14.5 17M19.5 12L14.5 7M19.5 12L9.5 12C7.83333 12 4.5 11 4.5 7" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>'); 
   // The accent color