neil/silverbullet
1
0
Fork 0
Code Activity

Fixes #529 by removing directives (#613)

Browse Source 
* Fixes #529 by removing directives
* Load builtin tags on space reindex
This commit is contained in:
Zef Hemel
2024-01-02 14:47:02 +01:00
committed by GitHub
parent 5f4e584e46
commit 8a2e081672
46 changed files with 159 additions and 1445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/cm_plugins/clean.ts
-2
View File
@@ -3,7 +3,6 @@ import type { Extension } from "../deps.ts";
import type { Client } from "../client.ts";
import { blockquotePlugin } from "./block_quote.ts";
import { admonitionPlugin } from "./admonition.ts";
import { directivePlugin } from "./directive.ts";
import { hideHeaderMarkPlugin, hideMarksPlugin } from "./hide_mark.ts";
import { cleanBlockPlugin } from "./block.ts";
import { linkPlugin } from "./link.ts";
@@ -17,7 +16,6 @@ import { fencedCodePlugin } from "./fenced_code.ts";
export function cleanModePlugins(editor: Client) {
return [
linkPlugin(editor),
directivePlugin(),
blockquotePlugin(),
admonitionPlugin(editor),
hideMarksPlugin(),
web/cm_plugins/directive.ts
-113
View File
@@ -1,113 +0,0 @@
import {
directiveEndRegex,
directiveStartRegex,
} from "../../plug-api/lib/query.ts";
import { Decoration, EditorState, syntaxTree } from "../deps.ts";
import { decoratorStateField, HtmlWidget, isCursorInRange } from "./util.ts";
// Does a few things: hides the directives when the cursor is not placed inside
// Adds a class to the start and end of the directive when the cursor is placed inside
export function directivePlugin() {
return decoratorStateField((state: EditorState) => {
const widgets: any[] = [];
syntaxTree(state).iterate({
enter: ({ type, from, to, node }) => {
const parent = node.parent;
if (!parent) {
return;
}
const cursorInRange = isCursorInRange(state, [parent.from, parent.to]);
if (type.name === "DirectiveStart") {
if (cursorInRange) {
// Cursor inside this directive
widgets.push(
Decoration.line({ class: "sb-directive-start" }).range(from),
);
} else {
const text = state.sliceDoc(from, to);
const match = directiveStartRegex.exec(text);
if (!match) {
console.error("Something went wrong with this directive");
return;
}
const [_fullMatch, directiveName] = match;
widgets.push(
Decoration.widget({
widget: new HtmlWidget(
`#${directiveName}`,
"sb-directive-placeholder",
),
}).range(from),
);
widgets.push(
Decoration.line({
class: "sb-directive-start sb-directive-start-outside",
attributes: {
spellcheck: "false",
},
}).range(
from,
),
);
}
return true;
}
if (type.name === "DirectiveEnd") {
// Cursor outside this directive
if (cursorInRange) {
widgets.push(
Decoration.line({ class: "sb-directive-end" }).range(from),
);
} else {
const text = state.sliceDoc(from, to);
const match = directiveEndRegex.exec(text);
if (!match) {
console.error("Something went wrong with this directive");
return;
}
const [_fullMatch, directiveName] = match;
widgets.push(
Decoration.widget({
widget: new HtmlWidget(
`/${directiveName}`,
"sb-directive-placeholder",
),
}).range(from),
);
widgets.push(
Decoration.line({
class: "sb-directive-end sb-directive-end-outside",
}).range(
from,
),
);
}
return true;
}
if (type.name === "DirectiveBody") {
const lines = state.sliceDoc(from, to).split("\n");
let pos = from;
for (const line of lines) {
if (pos !== to) {
widgets.push(
Decoration.line({
class: "sb-directive-body",
}).range(pos),
);
}
pos += line.length + 1;
}
return true;
}
},
});
return Decoration.set(widgets, true);
});
}
web/cm_plugins/smart_quotes.ts
+1 -2
View File
@@ -6,9 +6,8 @@ const straightQuoteContexts = [
"FencedCode",
"InlineCode",
"FrontMatterCode",
"DirectiveStart",
"Attribute",
"CommandLink"
"CommandLink",
];
// TODO: Add support for selection (put quotes around or create blockquote block?)
web/style.ts
-1
View File
@@ -48,7 +48,6 @@ export default function highlightStyles(mdExtension: MDExt[]) {
{ tag: t.invalid, class: "sb-invalid" },
{ tag: t.processingInstruction, class: "sb-meta" },
{ tag: t.punctuation, class: "sb-punctuation" },
{ tag: ct.DirectiveTag, class: "sb-directive" },
{ tag: ct.HorizontalRuleTag, class: "sb-hr" },
...mdExtension.map((mdExt) => {
return { tag: mdExt.tag, ...mdExt.styles, class: mdExt.className };
web/styles/colors.scss
-21
View File
@@ -317,27 +317,6 @@
color: var(--editor-frontmatter-marker-color);
}
// Directives
.sb-directive-body {
border-left: 1px solid var(--editor-directive-border-color);
border-right: 1px solid var(--editor-directive-border-color);
}
.cm-line.sb-directive-start,
.cm-line.sb-directive-end {
color: var(--editor-directive-color);
border-color: var(--editor-directive-border-color);
background-color: var(--editor-directive-background-color);
}
.sb-directive-start-outside,
.sb-directive-end-outside {
&>span.sb-directive-placeholder {
color: var(--editor-directive-info-color);
}
}
.sb-emphasis {
font-style: italic;
}
web/styles/editor.scss
+5 -57
View File
@@ -316,47 +316,6 @@
font-size: 91%;
}
.sb-directive-start {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-style: solid;
border-width: 1px 1px 0 1px;
padding: 3px;
}
.sb-directive-end {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 3px;
}
.sb-directive-start .sb-comment,
.sb-directive-end .sb-comment {
position: relative;
left: -12px;
}
.sb-directive-start-outside,
.sb-directive-end-outside {
color: transparent;
pointer-events: none;
height: 1.3em;
.sb-directive-placeholder {
padding-right: 7px;
float: right;
font-size: 80%;
}
&>span,
&.sb-directive-start,
&.sb-directive-end {
color: transparent;
}
}
.sb-line-frontmatter-outside,
.sb-line-code-outside {
.sb-meta {
@@ -458,7 +417,7 @@
border-top-left-radius: 5px;
margin: 0 0 5px 0;
padding: 10px !important;
background-color: var(--editor-directive-background-color);
background-color: var(--editor-widget-background-color);
font-size: 1.2em;
}
@@ -474,7 +433,7 @@
.sb-markdown-top-widget:has(*),
.sb-markdown-bottom-widget:has(*) {
overflow-y: auto;
border: 1px solid var(--editor-directive-background-color);
border: 1px solid var(--editor-widget-background-color);
border-radius: 5px;
white-space: normal;
position: relative;
@@ -542,7 +501,7 @@
right: 0;
top: 0;
display: none;
background: var(--editor-directive-background-color);
background: var(--editor-widget-background-color);
padding-inline: 3px;
padding: 4px 0;
// border-radius: 0 5px;
@@ -573,7 +532,7 @@
max-width: 100%;
padding: 0;
margin: 0 0 -2ch 0;
border: 1px solid var(--editor-directive-background-color);
border: 1px solid var(--editor-widget-background-color);
border-radius: 5px;
}
}
@@ -608,15 +567,4 @@
div:not(.cm-focused).cm-fat-cursor {
outline: none !important;
}
// @media only screen and (max-width: 600px) {
// #sb-editor {
// .sb-directive-start-outside,
// .sb-directive-end-outside {
// height: 22px;
// }
// }
// }
}
web/styles/main.scss
+2 -2
View File
@@ -150,14 +150,14 @@ body {
.sb-bottom-iframe {
width: 100%;
margin-top: 10px;
border: 1px solid var(--editor-directive-background-color);
border: 1px solid var(--editor-widget-background-color);
border-radius: 5px;
}
.sb-top-iframe {
width: 100%;
margin-top: 10px;
border: 1px solid var(--editor-directive-background-color);
border: 1px solid var(--editor-widget-background-color);
border-radius: 5px;
}
web/styles/theme.scss
+2 -8
View File
@@ -101,10 +101,7 @@ html {
--editor-frontmatter-background-color: rgba(255, 246, 189, 0.5);
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #89000080;
--editor-directive-background-color: rgb(238, 238, 238);
--editor-directive-border-color: #0000000f;
--editor-directive-color: #5b5b5b;
--editor-directive-info-color: var(--subtle-color);
--editor-widget-background-color: rgb(238, 238, 238);
--editor-task-marker-color: var(--subtle-color);
--editor-task-state-color: var(--subtle-color);
@@ -219,9 +216,6 @@ html[data-theme="dark"] {
--editor-frontmatter-background-color: rgb(41, 40, 35, 0.5);
--editor-frontmatter-color: var(--subtle-color);
--editor-frontmatter-marker-color: #fff;
--editor-directive-background-color: rgba(72, 72, 72, 0.5);
--editor-directive-border-color: #0000000f;
--editor-directive-color: #5b5b5b;
--editor-directive-info-color: var(--subtle-color);
--editor-widget-background-color: rgba(72, 72, 72, 0.5);
--editor-task-marker-color: var(--subtle-color);
}