mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Custom admonitions (#786)

pull/797/head
onespaceman 2024-03-04 12:35:02 -05:00 committed by GitHub
parent 241069e16f
commit 6230c8ab83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 67 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/cm_plugins/admonition.ts
View File

@ -9,16 +9,14 @@ import {
import { Client } from "../client.ts";
import { decoratorStateField, isCursorInRange } from "./util.ts";
type AdmonitionType = "note" | "warning";
const ADMONITION_REGEX =
/^>( *)\*{2}(Note|Warning)\*{2}( *)(.*)(?:\n([\s\S]*))?/im;
/^>( *)(?:\*{2}|\[!)(.*?)(\*{2}|\])( *)(.*)(?:\n([\s\S]*))?/im;
const ADMONITION_LINE_SPLIT_REGEX = /\n>/gm;
class AdmonitionIconWidget extends WidgetType {
constructor(
readonly pos: number,
readonly type: AdmonitionType,
readonly type: string,
readonly editorView: EditorView,
) {
super();
@ -35,30 +33,14 @@ 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>',
);
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>',
);
break;
default:
//
}
return outerDiv;
}
}
type AdmonitionFields = {
preSpaces: string;
admonitionType: AdmonitionType;
admonitionType: string;
postSyntax: string
postSpaces: string;
admonitionTitle: string;
admonitionContent: string;
@ -75,19 +57,25 @@ type AdmonitionFields = {
// > **note** I am an Admonition Title
// > admonition text
//
// or
// > [!note] I am an Admonition Title
// > admonition text
function extractAdmonitionFields(rawText: string): AdmonitionFields | null {
const regexResults = rawText.match(ADMONITION_REGEX);
if (regexResults) {
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 admonitionType = regexResults[2];
const postSyntax = regexResults[3];
const postSpaces = regexResults[4] || "";
const admonitionTitle: string = regexResults[5] || "";
const admonitionContent: string = regexResults[6] || "";
return {
preSpaces,
admonitionType,
postSyntax,
postSpaces,
admonitionTitle,
admonitionContent,
@ -117,7 +105,7 @@ export function admonitionPlugin(editor: Client) {
return;
}
const { preSpaces, admonitionType, postSpaces } = extractedFields;
const { preSpaces, admonitionType, postSyntax, postSpaces } = extractedFields;
// 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
@ -130,35 +118,25 @@ export function admonitionPlugin(editor: Client) {
accum += line.length + 2;
});
// `from` and `to` range info for switching out **info|warning** text with correct
// `from` and `to` range info for switching out keyword text with correct
// icon further down.
const iconRange = {
from: from + 1,
to: from + preSpaces.length + 2 + admonitionType.length + 2 +
to: from + preSpaces.length + 2 + admonitionType.length + postSyntax.length +
postSpaces.length + 1,
};
const classes = ["sb-admonition"];
switch (admonitionType) {
case "note":
classes.push("sb-admonition-note");
break;
case "warning":
classes.push("sb-admonition-warning");
break;
default:
//
}
// The first div is the title, attach relevant css classes
// The first div is the title, attach title css class
widgets.push(
Decoration.line({
class: "sb-admonition-title " + classes.join(" "),
class: "sb-admonition-title",
}).range(fromOffsets[0]),
);
// If cursor is not within the first line, replace the **note|warning** text
// with the correct icon
// If cursor is not within the first line, replace the keyword text
// with the icon
if (
!isCursorInRange(state, [
from,
@ -178,10 +156,13 @@ export function admonitionPlugin(editor: Client) {
}
// Each line of the blockquote is spread across separate divs, attach
// relevant css classes here.
fromOffsets.slice(1).forEach((fromOffset) => {
// relevant css classes and attribute here.
fromOffsets.forEach((fromOffset) => {
widgets.push(
Decoration.line({ class: classes.join(" ") }).range(fromOffset),
Decoration.line({
attributes: { admonition: admonitionType },
class: "sb-admonition",
}).range(fromOffset),
);
});
}

26
web/styles/colors.scss
View File

@ -302,28 +302,18 @@
color: var(--editor-meta-color);
}
.sb-admonition.sb-admonition-note {
border-left-color: var(--editor-admonition-note-border-color);
// Admonitions
.sb-admonition {
border-left-color: var(--admonition-color);
}
.sb-admonition.sb-admonition-warning {
border-left-color: var(--editor-admonition-warning-border-color);
.sb-admonition-title {
background-color: color-mix(in srgb, var(--admonition-color), transparent 90%)
}
.sb-admonition-title.sb-admonition-note {
background-color: var(--editor-admonition-note-background-color);
}
.sb-admonition-title.sb-admonition-warning {
background-color: var(--editor-admonition-warning-background-color);
}
.sb-admonition-note .sb-admonition-icon {
color: var(--editor-admonition-note-border-color);
}
.sb-admonition-warning .sb-admonition-icon {
color: var(--editor-admonition-warning-border-color);
.sb-admonition-icon {
background-color: var(--admonition-color);
}
// Frontmatter

14
web/styles/editor.scss
View File

@ -400,8 +400,8 @@
cursor: pointer;
margin: 0 3px;
}
.sb-code-copy-button > svg {
.sb-code-copy-button>svg {
height: 1rem;
width: 1rem;
}
@ -582,10 +582,16 @@
}
.sb-admonition-icon {
mask: var(--admonition-icon) no-repeat;
-webkit-mask: var(--admonition-icon) no-repeat;
mask-size: cover;
-webkit-mask-size: cover;
width: 1.1em;
height: 1.1em;
display: inline-flex;
vertical-align: middle;
padding-left: 16px;
padding-right: 8px;
margin-left: 16px;
margin-right: 8px;
}
.sb-frontmatter-marker {

18
web/styles/theme.scss
View File

@ -96,10 +96,6 @@ html {
--editor-code-operator-color: #808080;
--editor-code-info-color: var(--subtle-color);
--editor-code-atom-color: #5a0000;
--editor-admonition-note-border-color: rgb(0, 184, 212);
--editor-admonition-note-background-color: rgba(0, 184, 212, 0.1);
--editor-admonition-warning-border-color: rgb(255, 145, 0);
--editor-admonition-warning-background-color: rgba(255, 145, 0, 0.1);
--editor-frontmatter-background-color: rgba(255, 246, 189, 0.3);
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #89000080;
@ -215,10 +211,6 @@ html[data-theme="dark"] {
--editor-code-number-color: #986db9;
--editor-code-info-color: var(--subtle-color);
--editor-code-atom-color: #d6222e;
--editor-admonition-note-border-color: rgb(0, 184, 212);
--editor-admonition-note-background-color: rgba(0, 184, 212, 0.2);
--editor-admonition-warning-border-color: rgb(255, 145, 0);
--editor-admonition-warning-background-color: rgba(255, 145, 0, 0.2);
--editor-frontmatter-background-color: rgb(41, 40, 35, 0.5);
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #fff;
@ -229,4 +221,14 @@ html[data-theme="dark"] {
--editor-directive-mark-color: #ba0303;
--editor-directive-color: #898989;
--editor-directive-background-color: #4c4c4c7d;
}
.sb-admonition[admonition="note"] {
--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"] {
--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;
}

12
website/Markdown/Admonitions.md
View File

@ -5,3 +5,15 @@ Silverbullet supports [admonitions](https://github.com/community/community/discu
> **warning** This is a
> warning admonition
Custom admonitions can be added in [[STYLES]] using the following format:
```css
// Replace the keyword with a word or phrase of your choice
.sb-admonition[admonition="keyword"] {
// 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
--admonition-color: green;
}
```