From 288e67e380f956cb84a40c9146b6a4cc1cd31689 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Tue, 28 Feb 2023 10:07:20 +0100 Subject: [PATCH] Added support for overriding CSS styles with STYLES page --- web/cm_plugins/inline_image.ts | 1 + web/cm_plugins/link.ts | 2 -- web/components/top_bar.tsx | 8 ++++++-- web/editor.tsx | 23 ++++++++++++++++------- web/index.html | 3 +++ web/styles/editor.scss | 3 +-- web/styles/main.scss | 3 ++- web/styles/theme.scss | 1 + web/types.ts | 3 --- website/CHANGELOG.md | 3 ++- website/STYLES.md | 12 ++++++++++++ website/SilverBullet.md | 2 +- website/Special Pages.md | 10 ++++++++++ website/VIMRC.md | 7 +++++++ website/Vim.md | 9 +-------- 15 files changed, 63 insertions(+), 27 deletions(-) create mode 100644 website/STYLES.md create mode 100644 website/Special Pages.md create mode 100644 website/VIMRC.md diff --git a/web/cm_plugins/inline_image.ts b/web/cm_plugins/inline_image.ts index 32a310a..17f7985 100644 --- a/web/cm_plugins/inline_image.ts +++ b/web/cm_plugins/inline_image.ts @@ -67,6 +67,7 @@ export function inlineImagesPlugin(space: Space) { widgets.push( Decoration.widget({ widget: new InlineImageWidget(url, title, space), + block: true, }).range(node.to), ); }, diff --git a/web/cm_plugins/link.ts b/web/cm_plugins/link.ts index e559664..e23c033 100644 --- a/web/cm_plugins/link.ts +++ b/web/cm_plugins/link.ts @@ -1,4 +1,3 @@ -import { ClickEvent } from "../../plug-api/app_event.ts"; import { Decoration, syntaxTree } from "../deps.ts"; import { Editor } from "../editor.tsx"; import { @@ -6,7 +5,6 @@ import { invisibleDecoration, isCursorInRange, } from "./util.ts"; -import { LinkWidget } from "./util.ts"; export function linkPlugin(editor: Editor) { return decoratorStateField((state) => { diff --git a/web/components/top_bar.tsx b/web/components/top_bar.tsx index 9631600..f8881e8 100644 --- a/web/components/top_bar.tsx +++ b/web/components/top_bar.tsx @@ -40,7 +40,6 @@ export function TopBar({ lhs?: ComponentChildren; rhs?: ComponentChildren; }) { - // const [theme, setTheme] = useState(localStorage.theme ?? "light"); const inputRef = useRef(null); // Another one of my less proud moments: @@ -48,6 +47,11 @@ export function TopBar({ // it this way. If you have a better way to do this, please let me know! useEffect(() => { function resizeHandler() { + const editorWidth = parseInt( + getComputedStyle(document.getElementById("sb-root")!).getPropertyValue( + "--editor-width", + ), + ); const currentPageElement = document.getElementById("sb-current-page"); if (currentPageElement) { // Temporarily make it very narrow to give the parent space @@ -56,7 +60,7 @@ export function TopBar({ // Then calculate a new width currentPageElement.style.width = `${ - Math.min(650, innerDiv.clientWidth - 150) + Math.min(editorWidth - 150, innerDiv.clientWidth - 150) }px`; } } diff --git a/web/editor.tsx b/web/editor.tsx index 2cdffed..e214c93 100644 --- a/web/editor.tsx +++ b/web/editor.tsx @@ -331,13 +331,7 @@ export class Editor { } }); - // Need to find a nicer way of doing this stuff - if (this.builtinSettings.fontFamily) { - document.getElementById("sb-root")!.setAttribute( - "style", - `--editor-font: ${this.builtinSettings.fontFamily};`, - ); - } + this.loadCustomStyles().catch(console.error); await this.dispatchAppEvent("editor:init"); } @@ -995,6 +989,21 @@ export class Editor { contentDOM.setAttribute("autocapitalize", "on"); } + async loadCustomStyles() { + try { + const { text: stylesText } = await this.space.readPage("STYLES"); + const cssBlockRegex = /```css([^`]+)```/; + const match = cssBlockRegex.exec(stylesText); + if (!match) { + return; + } + const css = match[1]; + document.getElementById("custom-styles")!.innerHTML = css; + } catch { + // Nuthin' + } + } + private restoreState(pageName: string): boolean { const pageState = this.openPages.get(pageName); const editorView = this.editorView!; diff --git a/web/index.html b/web/index.html index de8f64d..e140a92 100644 --- a/web/index.html +++ b/web/index.html @@ -33,6 +33,9 @@ width: 100%; overflow: hidden; } + + diff --git a/web/styles/editor.scss b/web/styles/editor.scss index c18b6ac..56e83a9 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -4,13 +4,12 @@ #sb-main .cm-editor { font-size: 18px; - --max-width: 800px; height: 100%; .cm-content { margin-left: auto; margin-right: auto; - max-width: var(--max-width); + max-width: var(--#{"editor-width"}); padding: 5px 20px; } diff --git a/web/styles/main.scss b/web/styles/main.scss index 1f87fbb..eb31b13 100644 --- a/web/styles/main.scss +++ b/web/styles/main.scss @@ -49,7 +49,8 @@ max-width: 100%; .inner { - max-width: 800px; + // Hack to not have SCSS precompile this value but use proper CSS variables + max-width: var(--#{"editor-width"}); margin: auto; font-size: 28px; padding: 10px 0; diff --git a/web/styles/theme.scss b/web/styles/theme.scss index a5b7ad8..f886313 100644 --- a/web/styles/theme.scss +++ b/web/styles/theme.scss @@ -5,6 +5,7 @@ --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --editor-font: "iA-Mono", "Menlo"; + --editor-width: 800px; font-family: var(--ui-font); } diff --git a/web/types.ts b/web/types.ts index 1001e94..f38a05e 100644 --- a/web/types.ts +++ b/web/types.ts @@ -8,13 +8,10 @@ export type Notification = { date: Date; }; -type EditorMode = "ro" | "rw"; - export type PanelMode = number; export type BuiltinSettings = { indexPage: string; - fontFamily?: string; }; export type PanelConfig = { diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md index 173f4aa..28d8c06 100644 --- a/website/CHANGELOG.md +++ b/website/CHANGELOG.md @@ -6,6 +6,7 @@ release. ## Next * Support template variables in a page template's `$name` +* Added support to override CSS styles on a per-space basis. This replaces the previous `fontFamily` setting. See [[STYLES]] for hints on how to use this new experimental feature. * Reverted behavior of using up/down arrow keys to move between the page title and page content (and rename based on it). This resulted in undesirable behavior too often. You can now rename a page by clicking/tapping on the title, changing the name and hitting Enter or clicking anywhere outside the page title to apply the rename. * Dependency upgrades * Various bug fixes @@ -36,7 +37,7 @@ release. * Fixed copy & paste, drag & drop of attachments in the [[Desktop]] app * Continuous [[Sync]] * Support for embedding [[Markdown/Code Widgets]]. -* Ability to set the editor font via the `fontFamily` setting in [[SETTINGS]] (restart the app/reload the page to make it go into effect). +* ~~Ability to set the editor font via the `fontFamily` setting~~ in [[SETTINGS]] (restart the app/reload the page to make it go into effect). **Update**: now done via [[STYLES]] --- ## 0.2.8 diff --git a/website/STYLES.md b/website/STYLES.md new file mode 100644 index 0000000..d8eb9dc --- /dev/null +++ b/website/STYLES.md @@ -0,0 +1,12 @@ +If you create a [[STYLES]] page in your project, SilverBullet will look for a CSS code block inside that page and load it upon boot (an example can be found below). + +This can be used to achieve various things, such as overriding the default editor font, or setting wider page widths. What CSS styles you can override is not very well documented, you’ll have to reverse engineer things a bit for now, unfortunately. + +```css +#sb-root { + /* Uncomment the next line to set the editor font to Courier */ + /* --editor-font: "Courier" !important; */ + /* Uncomment the next line to set the editor width to 1400px */ + /* --editor-width: 1400px !important; */ +} +``` \ No newline at end of file diff --git a/website/SilverBullet.md b/website/SilverBullet.md index aa2025c..1b8fafd 100644 --- a/website/SilverBullet.md +++ b/website/SilverBullet.md @@ -96,7 +96,7 @@ Click on the links below to explore various aspects of SilverBullet more in-dept * [[CHANGELOG]]: What’s new? * [[🔌 Plugs]]: extensions available for, and as part of SilverBullet -* [[💡 Inspiration]]: some of the projects that inspired SilverBullet +* [[Special Pages]]: a few page names in Silver Bullet have special meaning * [[🔨 Development]]: how to start hacking on SilverBullet itself ## Support diff --git a/website/Special Pages.md b/website/Special Pages.md new file mode 100644 index 0000000..c9dafab --- /dev/null +++ b/website/Special Pages.md @@ -0,0 +1,10 @@ +SilverBullet has a few “special pages.” The convention is to always use ALL CAPS for these page names. Generally the format of these pages is that they can contain arbitrary text, but embedded in them is some sort of fenced code block (triple backtick blocks) that encode something special. What _exactly_ depends on the page. + +All special pages except [[SETTINGS]] are optional: if they don’t exist, well, they don’t do anything. + +Here are the current list of “special pages” known to humankind: + +* [[SETTINGS]] for setting various settings +* [[PLUGS]] as a source for the plug manager to decide what plugs to load and where from +* [[VIMRC]] for tweaking [[Vim]] mode +* [[STYLES]] to override SilverBullet CSS styles (experimental) \ No newline at end of file diff --git a/website/VIMRC.md b/website/VIMRC.md new file mode 100644 index 0000000..28a3493 --- /dev/null +++ b/website/VIMRC.md @@ -0,0 +1,7 @@ +As part of SilverBullet’s [[Vim]] support, the [[VIMRC]] page allows you to run a set of _ex_ commands on boot. To use this functionality, create a page in your space named [[VIMRC]] and put a fenced code block (as demonstrated below) with one ex command per line, for example: + +``` +imap jj +``` + +To manually reload your [[VIMRC]] you can use the {[Editor: Vim: Load VIMRC]} command. \ No newline at end of file diff --git a/website/Vim.md b/website/Vim.md index 7c2303a..bb1aa9a 100644 --- a/website/Vim.md +++ b/website/Vim.md @@ -2,11 +2,4 @@ SilverBullet has a basic Vim mode. You can toggle it using the {[Editor: Toggle In addition, it supports various ex commands that you can run as you would expect, for instance: `:imap jj `. -## VIMRC -SilverBullet also has the ability to load a set of these ex command on boot. To use this functionality, create a page in your space named [[VIMRC]] and put a fenced code block in it (similar to how this is done in [[SETTINGS]]) with one ex command per line, for example: - - ``` - imap jj - ``` - -To manually reload your [[VIMRC]] you can use the {[Editor: Vim: Load VIMRC]} command. \ No newline at end of file +Also, you can use [[VIMRC]] \ No newline at end of file