From bb04f304709a5b077e53ff19eda7d53f15686335 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Mon, 19 Dec 2022 12:35:58 +0100 Subject: [PATCH] Reduce vertical jump for other blocks --- web/cm_plugins/block.ts | 12 ++++++++ web/cm_plugins/clean.ts | 2 +- web/cm_plugins/directive.ts | 23 ++------------ web/editor.tsx | 4 +-- web/styles/editor.scss | 61 +++++++++++++++++++++---------------- web/styles/theme.scss | 28 +++++++++++++++-- 6 files changed, 79 insertions(+), 51 deletions(-) diff --git a/web/cm_plugins/block.ts b/web/cm_plugins/block.ts index daba218..c0c5c70 100644 --- a/web/cm_plugins/block.ts +++ b/web/cm_plugins/block.ts @@ -1,6 +1,7 @@ import { Decoration, EditorState, syntaxTree } from "../deps.ts"; import { decoratorStateField, + HtmlWidget, invisibleDecoration, isCursorInRange, } from "./util.ts"; @@ -38,6 +39,17 @@ function hideNodes(state: EditorState) { class: "sb-line-frontmatter-outside", }).range(node.from), ); + if (parent.from === node.from) { + // Only put this on the first line of the frontmatter + widgets.push( + Decoration.widget({ + widget: new HtmlWidget( + `frontmatter`, + "sb-frontmatter-marker", + ), + }).range(node.from), + ); + } } } diff --git a/web/cm_plugins/clean.ts b/web/cm_plugins/clean.ts index dfa853a..e16208c 100644 --- a/web/cm_plugins/clean.ts +++ b/web/cm_plugins/clean.ts @@ -16,7 +16,7 @@ import { cleanCommandLinkPlugin } from "./command_link.ts"; export function cleanModePlugins(editor: Editor) { return [ linkPlugin(editor), - directivePlugin(editor), + directivePlugin(), blockquotePlugin(), admonitionPlugin(editor), hideMarksPlugin(), diff --git a/web/cm_plugins/directive.ts b/web/cm_plugins/directive.ts index ac37f16..089b0ff 100644 --- a/web/cm_plugins/directive.ts +++ b/web/cm_plugins/directive.ts @@ -3,12 +3,11 @@ import { directiveStartRegex, } from "../../plug-api/lib/query.ts"; import { Decoration, EditorState, syntaxTree } from "../deps.ts"; -import type { Editor } from "../editor.tsx"; 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(editor: Editor) { +export function directivePlugin() { return decoratorStateField((state: EditorState) => { const widgets: any[] = []; @@ -35,20 +34,12 @@ export function directivePlugin(editor: Editor) { console.error("Something went wrong with this directive"); return; } - const [fullMatch, directiveName] = match; + const [_fullMatch, directiveName] = match; widgets.push( Decoration.widget({ widget: new HtmlWidget( `#${directiveName}`, "sb-directive-placeholder", - (e) => { - e.stopPropagation(); - editor.editorView?.dispatch({ - selection: { - anchor: from + fullMatch.indexOf(directiveName), - }, - }); - }, ), }).range(from), ); @@ -76,20 +67,12 @@ export function directivePlugin(editor: Editor) { console.error("Something went wrong with this directive"); return; } - const [fullMatch, directiveName] = match; + const [_fullMatch, directiveName] = match; widgets.push( Decoration.widget({ widget: new HtmlWidget( `/${directiveName}`, "sb-directive-placeholder", - (e) => { - e.stopPropagation(); - editor.editorView?.dispatch({ - selection: { - anchor: from + fullMatch.indexOf(directiveName), - }, - }); - }, ), }).range(from), ); diff --git a/web/editor.tsx b/web/editor.tsx index abfbd93..8ee4819 100644 --- a/web/editor.tsx +++ b/web/editor.tsx @@ -111,7 +111,7 @@ import { CollabState } from "./cm_plugins/collab.ts"; import { collabSyscalls } from "./syscalls/collab.ts"; import { vim } from "./deps.ts"; -const frontMatterRegex = /^---\s*$(.*?)---\s*$/ms; +const frontMatterRegex = /^---\n(.*?)---\n/ms; class PageState { constructor( @@ -317,7 +317,7 @@ export class Editor { const match = frontMatterRegex.exec(pageText); if (match) { // Frontmatter found, put cursor after it - initialCursorPos = match[0].length + 1; + initialCursorPos = match[0].length; } // By default scroll to the top this.editorView.scrollDOM.scrollTop = 0; diff --git a/web/styles/editor.scss b/web/styles/editor.scss index 15c07a4..7abea32 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -118,31 +118,39 @@ } .cm-list-bullet { - position: relative; - visibility: hidden; - } - .cm-task-checked { - text-decoration: line-through !important; + position: relative; + visibility: hidden; } - .sb-checkbox > input[type=checkbox] { + .cm-task-checked { + text-decoration: line-through !important; + } + + .sb-checkbox>input[type=checkbox] { width: 3ch; } - .cm-list-bullet::after { - visibility: visible; - position: absolute; + .cm-list-bullet::after { + visibility: visible; + position: absolute; color: rgb(150, 150, 150); - content: "\2022"; /* U+2022 BULLET */ - } + content: "\2022"; + /* U+2022 BULLET */ + } - .sb-directive-start .sb-comment, .sb-directive-end .sb-comment { + .sb-directive-start .sb-comment, + .sb-directive-end .sb-comment { position: relative; left: -12px; } - .sb-line-frontmatter-outside, .sb-line-code-outside { - display: none; + .sb-line-frontmatter-outside, + .sb-line-code-outside { + .sb-meta { + color: transparent; + } + + color: transparent; } .sb-blockquote-outside { @@ -163,19 +171,20 @@ width: 100%; border-spacing: 0; } - + thead tr { - background-color: #333; - color: #eee; - font-weight: bold; + background-color: #333; + color: #eee; + font-weight: bold; } - - th, td { - padding: 8px; + + th, + td { + padding: 8px; } - + tbody tr:nth-of-type(even) { - background-color: #f3f3f3; + background-color: #f3f3f3; } } @@ -183,13 +192,13 @@ border-left: 1px solid rgb(74, 74, 74); } - .sb-line-blockquote.sb-line-ul.sb-line-li > .sb-quote.sb-meta:first-child { + .sb-line-blockquote.sb-line-ul.sb-line-li>.sb-quote.sb-meta:first-child { margin-left: -1ch; } - + } .cm-scroller { // Give some breathing space at the bottom of the screen padding-bottom: 20em; -} +} \ No newline at end of file diff --git a/web/styles/theme.scss b/web/styles/theme.scss index 869c14d..131eb50 100644 --- a/web/styles/theme.scss +++ b/web/styles/theme.scss @@ -374,11 +374,22 @@ sb-admonition-warning .sb-admonition-icon { color: rgb(255, 145, 0); } +// Frontmatter + .sb-frontmatter { background-color: rgba(255, 246, 189, 0.5); color: #676767; } +.sb-frontmatter-marker { + color: #890000; + float: right; + font-size: 80%; + padding-right: 7px; + opacity: 0.25; +} + + // Directives @@ -416,7 +427,9 @@ sb-admonition-warning .sb-admonition-icon { .sb-directive-placeholder { color: var(--directive-font-color) !important; opacity: 0.25; - padding-left: 5ch; + padding-right: 7px; + float: right; + font-size: 80%; } * { @@ -430,7 +443,9 @@ sb-admonition-warning .sb-admonition-icon { .sb-directive-placeholder { color: var(--directive-font-color) !important; opacity: 0.25; - padding-left: 5ch; + padding-right: 7px; + font-size: 80%; + float: right; } * { @@ -446,6 +461,15 @@ sb-admonition-warning .sb-admonition-icon { font-weight: 900; } +.sb-line-code-outside .sb-code-info { + display: block; + float: right; + color: #000; + opacity: .25; + font-size: 90%; + padding-right: 7px; +} + .sb-link { cursor: pointer; }