From 8230330ed0d20861339f9737e309b4b4efc4e24f Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Mon, 8 Jan 2024 09:21:19 +0100 Subject: [PATCH] Undo frontmatter templates --- web/cm_plugins/clean.ts | 2 +- web/cm_plugins/frontmatter.ts | 97 ++++++++++++----------------------- web/styles/colors.scss | 7 +-- web/styles/editor.scss | 30 +++-------- 4 files changed, 41 insertions(+), 95 deletions(-) diff --git a/web/cm_plugins/clean.ts b/web/cm_plugins/clean.ts index bcb4fc06..7ebae8f2 100644 --- a/web/cm_plugins/clean.ts +++ b/web/cm_plugins/clean.ts @@ -22,7 +22,7 @@ export function cleanModePlugins(client: Client) { hideMarksPlugin(), hideHeaderMarkPlugin(), cleanBlockPlugin(), - frontmatterPlugin(client), + frontmatterPlugin(), fencedCodePlugin(client), taskListPlugin({ // TODO: Move this logic elsewhere? diff --git a/web/cm_plugins/frontmatter.ts b/web/cm_plugins/frontmatter.ts index 8bd9c64e..97ff448a 100644 --- a/web/cm_plugins/frontmatter.ts +++ b/web/cm_plugins/frontmatter.ts @@ -1,79 +1,48 @@ -import { Client } from "../client.ts"; -import { Decoration, EditorState, syntaxTree } from "../deps.ts"; -import { MarkdownWidget } from "./markdown_widget.ts"; +import { Decoration, EditorState, foldedRanges, syntaxTree } from "../deps.ts"; import { decoratorStateField, HtmlWidget, isCursorInRange } from "./util.ts"; -export function frontmatterPlugin(client: Client) { - const panelWidgetHook = client.system.panelWidgetHook; - const frontmatterCallback = panelWidgetHook.callbacks.get("frontmatter"); +export function frontmatterPlugin() { return decoratorStateField( (state: EditorState) => { const widgets: any[] = []; + const foldRanges = foldedRanges(state); syntaxTree(state).iterate({ enter(node) { if ( - node.name === "FrontMatter" + node.name === "FrontMatterMarker" ) { - if (!isCursorInRange(state, [node.from, node.to])) { - if (frontmatterCallback) { - // Render as a widget - const text = state.sliceDoc(node.from, node.to); - const lineStrings = text.split("\n"); + const parent = node.node.parent!; - const lines: { from: number; to: number }[] = []; - let fromIt = node.from; - for (const line of lineStrings) { - lines.push({ - from: fromIt, - to: fromIt + line.length, - }); - fromIt += line.length + 1; - } - - lines.slice(0, lines.length - 1).forEach((line) => { - widgets.push( - // Reusing line-table-outside here for laziness reasons - Decoration.line({ class: "sb-line-table-outside" }).range( - line.from, - ), - ); - }); - - widgets.push( - Decoration.widget({ - widget: new MarkdownWidget( - undefined, - client, - `frontmatter:${client.currentPage}`, - "", - frontmatterCallback, - "sb-markdown-frontmatter-widget", - ), - block: true, - }).range(lines[lines.length - 1].from), - ); - } else if (!frontmatterCallback) { - // Not rendering as a widget - widgets.push( - Decoration.widget({ - widget: new HtmlWidget( - `frontmatter`, - "sb-frontmatter-marker", - ), - }).range(node.from), - ); - widgets.push( - Decoration.line({ - class: "sb-line-frontmatter-outside", - }).range(node.from), - ); - widgets.push( - Decoration.line({ - class: "sb-line-frontmatter-outside", - }).range(state.doc.lineAt(node.to).from), - ); + const folded = foldRanges.iter(); + let shouldShowFrontmatterBanner = false; + while (folded.value) { + // Check if cursor is in the folded range + if (isCursorInRange(state, [folded.from, folded.to])) { + // console.log("Cursor is in folded area, "); + shouldShowFrontmatterBanner = true; + break; } + folded.next(); + } + if (!isCursorInRange(state, [parent.from, parent.to])) { + widgets.push( + Decoration.line({ + class: "sb-line-frontmatter-outside", + }).range(node.from), + ); + shouldShowFrontmatterBanner = true; + } + if (shouldShowFrontmatterBanner && 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/styles/colors.scss b/web/styles/colors.scss index 0060ff82..0d7fa84d 100644 --- a/web/styles/colors.scss +++ b/web/styles/colors.scss @@ -172,8 +172,7 @@ color: var(--editor-heading-meta-color); } - .sb-hashtag, - .sb-markdown-frontmatter-widget span.hashtag { + .sb-hashtag { color: var(--editor-hashtag-color); background-color: var(--editor-hashtag-background-color); border: 1px solid var(--editor-hashtag-border-color); @@ -314,10 +313,6 @@ color: var(--editor-frontmatter-color); } - .sb-markdown-frontmatter-widget { - background-color: var(--editor-frontmatter-background-color); - } - .sb-frontmatter-marker { color: var(--editor-frontmatter-marker-color); } diff --git a/web/styles/editor.scss b/web/styles/editor.scss index 894c433e..91fa2eaa 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -429,33 +429,9 @@ margin-top: 10px; } - .sb-markdown-frontmatter-widget { - margin-bottom: -1.3ch; - padding: 8px; - .sb-banner { - position: absolute; - right: 5px; - bottom: 5px; - font-size: 80%; - color: var(--editor-frontmatter-marker-color); - } - - span.hashtag { - border-radius: 6px; - padding: 0 3px; - margin: 0 1px 0 0; - font-size: 0.9em; - } - } - - .sb-markdown-frontmatter-widget+.sb-frontmatter { - background-color: transparent; - color: transparent; - } .sb-markdown-widget, - .sb-markdown-frontmatter-widget, .sb-markdown-top-widget:has(*), .sb-markdown-bottom-widget:has(*) { overflow-y: auto; @@ -579,6 +555,12 @@ padding-right: 8px; } + .sb-frontmatter-marker { + float: right; + font-size: 80%; + padding-right: 7px; + } + .cm-scroller { // Give some breathing space at the bottom of the screen padding-bottom: 20em;