From 8f96dbc21d815cc789e5359ba8a2a2f11522834b Mon Sep 17 00:00:00 2001 From: zsviczian Date: Sat, 28 Oct 2023 20:51:55 +0200 Subject: [PATCH] 1.9.27 --- manifest.json | 2 +- package.json | 2 +- src/ExcalidrawData.ts | 12 +- src/Scripts.ts | 16 +- src/dialogs/Messages.ts | 9 + src/lang/locale/en.ts | 41 +- src/settings.ts | 805 +++++++++++++++++++++++++--------------- styles.css | 56 ++- 8 files changed, 627 insertions(+), 316 deletions(-) diff --git a/manifest.json b/manifest.json index 1b23d70..97a23cc 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "1.9.26", + "version": "1.9.27", "minAppVersion": "1.1.6", "description": "An Obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", diff --git a/package.json b/package.json index 0ee94c1..085767c 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "author": "", "license": "MIT", "dependencies": { - "@zsviczian/excalidraw": "0.16.1-obsidian-6", + "@zsviczian/excalidraw": "0.16.1-obsidian-7", "chroma-js": "^2.4.2", "clsx": "^2.0.0", "colormaster": "^1.2.1", diff --git a/src/ExcalidrawData.ts b/src/ExcalidrawData.ts index 3b66cc1..910a32f 100644 --- a/src/ExcalidrawData.ts +++ b/src/ExcalidrawData.ts @@ -293,8 +293,18 @@ export class ExcalidrawData { if (el.boundElements) { const map = new Map(); + let alreadyHasText:boolean = false; el.boundElements.forEach((item: { id: string; type: string }) => { - map.set(item.id, item.type); + if(item.type === "text") { + if(!alreadyHasText) { + map.set(item.id, item.type); + alreadyHasText = true; + } else { + elements.find((el:ExcalidrawElement)=>el.id===item.id).containerId = null; + } + } else { + map.set(item.id, item.type); + } }); const boundElements = Array.from(map, ([id, type]) => ({ id, type })); if (boundElements.length !== el.boundElements.length) { diff --git a/src/Scripts.ts b/src/Scripts.ts index 1a685c5..8f3f0f3 100644 --- a/src/Scripts.ts +++ b/src/Scripts.ts @@ -11,6 +11,7 @@ import ExcalidrawPlugin from "./main"; import { ButtonDefinition, GenericInputPrompt, GenericSuggester } from "./dialogs/Prompt"; import { getIMGFilename } from "./utils/FileUtils"; import { splitFolderAndFilename } from "./utils/FileUtils"; +import { getEA } from "src"; export type ScriptIconMap = { [key: string]: { name: string; group: string; svgString: string }; @@ -199,27 +200,26 @@ export class ScriptEngine { const commandId = `${PLUGIN_ID}:${basename}`; // @ts-ignore - if (!app.commands.commands[commandId]) { + if (!this.plugin.app.commands.commands[commandId]) { return; } // @ts-ignore - delete app.commands.commands[commandId]; + delete this.plugin.app.commands.commands[commandId]; } async executeScript(view: ExcalidrawView, script: string, title: string, file: TFile) { if (!view || !script || !title) { return; } - this.plugin.ea.reset(); - this.plugin.ea.setView(view); - this.plugin.ea.activeScript = title; + const ea = getEA(view); + ea.activeScript = title; //https://stackoverflow.com/questions/45381204/get-asyncfunction-constructor-in-typescript changed tsconfig to es2017 //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor; let result = null; //try { - result = await new AsyncFunction("ea", "utils", script)(this.plugin.ea, { + result = await new AsyncFunction("ea", "utils", script)(ea, { inputPrompt: ( header: string, placeholder?: string, @@ -233,7 +233,7 @@ export class ScriptEngine { ScriptEngine.inputPrompt( view, this.plugin, - app, + this.plugin.app, header, placeholder, value, @@ -262,7 +262,7 @@ export class ScriptEngine { new Notice(t("SCRIPT_EXECUTION_ERROR"), 4000); errorlog({ script: this.plugin.ea.activeScript, error: e }); }*/ - this.plugin.ea.activeScript = null; + ea.activeScript = null; return result; } diff --git a/src/dialogs/Messages.ts b/src/dialogs/Messages.ts index 4135fb9..6e7b4aa 100644 --- a/src/dialogs/Messages.ts +++ b/src/dialogs/Messages.ts @@ -17,6 +17,15 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
`, +"1.9.27": ` +## New +- Restructured plugin settings, added additional comments and relevant videos +- Added setting to change PDF to Image resolution/scale. This has an effect when embedding PDF pages to Excalidraw. A lower value will result in less-sharp pages, but better overall performance. Also, larger pages (higher scale value) were not accepted by Excalidraw.com when copying from Obsidian due to the 2MB image file limit. Find the "PDF to Image" setting under "Embedding Excalidraw into your Notes and Exporting" setting. [#1393](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1393) + +## Fixed +- When multiple Excalidraw Scripts were executed parallel a race condition occurred causing scripts to override each other +- I implemented a partial fix to "text detaching from figures when dragging them" [#1400](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1400) +- Regression: extra thin stroke removed with 1.9.26 [#1399](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1399)`, "1.9.26":` ## Fixes and improvements from Excalidraw.com - Freedraw shape selection issue, when fill-pattern is not solid [#7193](https://github.com/excalidraw/excalidraw/pull/7193) diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index c8c9adb..8d78437 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -111,6 +111,8 @@ export default { "Toggle ON: Show a notification when a new version of the plugin is available.
" + "Toggle OFF: Silent mode. You need to check for plugin updates in Community Plugins.", + BASIC_HEAD: "Basic", + BASIC_DESC: `In the "Basic" settings, you can configure options such as displaying release notes after updates, receiving plugin update notifications, setting the default location for new drawings, specifying the Excalidraw folder for embedding drawings into active documents, defining an Excalidraw template file, and designating an Excalidraw Automate script folder for managing automation scripts.`, FOLDER_NAME: "Excalidraw folder", FOLDER_DESC: "Default location for new drawings. If empty, drawings will be created in the Vault root.", @@ -134,6 +136,7 @@ export default { "hotkeys to your favorite scripts just like to any other Obsidian command. " + "The folder may not be the root folder of your Vault. ", SAVING_HEAD: "Saving", + SAVING_DESC: "In the 'Saving' section of Excalidraw Settings, you can configure how your drawings are saved. This includes options for compressing Excalidraw JSON in Markdown, setting autosave intervals for both desktop and mobile, defining filename formats, and choosing whether to use the .excalidraw.md or .md file extension. ", COMPRESS_NAME: "Compress Excalidraw JSON in Markdown", COMPRESS_DESC: "By enabling this feature Excalidraw will store the drawing JSON in a Base64 compressed " + @@ -181,7 +184,8 @@ FILENAME_HEAD: "Filename", FILENAME_EXCALIDRAW_EXTENSION_DESC: "This setting does not apply if you use Excalidraw in compatibility mode, " + "i.e. you are not using Excalidraw markdown files.
Toggle ON: filename ends with .excalidraw.md
Toggle OFF: filename ends with .md", - DISPLAY_HEAD: "Display", + DISPLAY_HEAD: "Excalidraw appearance and behavior", + DISPLAY_DESC: "In the 'appearance and behavior' section of Excalidraw Settings, you can fine-tune how Excalidraw appears and behaves. This includes options for dynamic styling, left-handed mode, matching Excalidraw and Obsidian themes, default modes, and more.", DYNAMICSTYLE_NAME: "Dynamic styling", DYNAMICSTYLE_DESC: "Change Excalidraw UI colors to match the canvas color", @@ -214,7 +218,8 @@ FILENAME_HEAD: "Filename", DEFAULT_PEN_MODE_NAME: "Pen mode", DEFAULT_PEN_MODE_DESC: "Should pen mode be automatically enabled when opening Excalidraw?", - + THEME_HEAD: "Theme and styling", + ZOOM_HEAD: "Zoom", DEFAULT_PINCHZOOM_NAME: "Allow pinch zoom in pen mode", DEFAULT_PINCHZOOM_DESC: "Pinch zoom in pen mode when using the freedraw tool is disabled by default to prevent unwanted accidental zooming with your palm.
" + @@ -233,7 +238,8 @@ FILENAME_HEAD: "Filename", ZOOM_TO_FIT_MAX_LEVEL_NAME: "Zoom to fit max ZOOM level", ZOOM_TO_FIT_MAX_LEVEL_DESC: "Set the maximum level to which zoom to fit will enlarge the drawing. Minimum is 0.5 (50%) and maximum is 10 (1000%).", - LINKS_HEAD: "Links and transclusion", + LINKS_HEAD: "Links, transclusion and TODOs", + LINKS_HEAD_DESC: "In the 'Links, transclusion and TODOs' section of Excalidraw Settings, you can configure how Excalidraw handles links, transclusions, and TODO items. This includes options for opening links, managing panes, displaying links with brackets, customizing link prefixes, handling TODO items, and more. ", LINKS_DESC: `${labelCTRL()}+CLICK on [[Text Elements]] to open them as links. ` + "If the selected text has more than one [[valid Obsidian links]], only the first will be opened. " + @@ -305,11 +311,12 @@ FILENAME_HEAD: "Filename", GET_URL_TITLE_NAME: "Use iframely to resolve page title", GET_URL_TITLE_DESC: "Use the http://iframely.server.crestify.com/iframely?url= to get title of page when dropping a link into Excalidraw", - MD_HEAD: "Markdown-embed settings", - MD_HEAD_DESC: - `You can transclude formatted markdown documents into drawings as images ${labelSHIFT()} drop from the file explorer or using ` + - "the command palette action.", - + PDF_TO_IMAGE: "PDF to Image", + PDF_TO_IMAGE_SCALE_NAME: "PDF to Image conversion scale", + PDF_TO_IMAGE_SCALE_DESC: "Sets the resolution of the image that is generated from the PDF page. Higher resolution will result in bigger images in memory and consequently a higher load on your system (slower performance), but sharper imagee. " + + "Additionally, if you want to copy PDF pages (as images) to Excalidraw.com, the bigger image size may result in exceeding the 2MB limit on Excalidraw.com.", + MD_HEAD: "Embed markdown into Excalidraw as image", + MD_HEAD_DESC: `In the "Embed markdown as image settings," you can configure various options for how markdown documents are embedded as images within Excalidraw. These settings allow you to control the default width and maximum height of embedded markdown files, choose the font typeface, font color, and border color for embedded markdown content. Additionally, you can specify a custom CSS file to style the embedded markdown content. Note you can also embed markdown documents as interactive frames. The color setting of frames is under the Display Settings section.`, MD_TRANSCLUDE_WIDTH_NAME: "Default width of a transcluded markdown document", MD_TRANSCLUDE_WIDTH_DESC: "The width of the markdown page. This affects the word wrapping when transcluding longer paragraphs, and the width of " + @@ -345,8 +352,11 @@ FILENAME_HEAD: "Filename", "Setting the font-family in the css is has limitations. By default only your operating system's standard fonts are available (see README for details). " + "You can add one custom font beyond that using the setting above. " + 'You can override this css setting by adding the following frontmatter-key to the embedded markdown file: "excalidraw-css: css_file_in_vault|css-snippet".', - EMBED_HEAD: "Embed & Export", + EMBED_HEAD: "Embedding Excalidraw into your Notes and Exporting", + EMBED_DESC: `In the "Embed & Export" settings, you can configure how images and Excalidraw drawings are embedded and exported within your documents. Key settings include choosing the image type for markdown preview (such as Native SVG or PNG), specifying the type of file to insert into the document (original Excalidraw, PNG, or SVG), and managing image caching for embedding in markdown. You can also control image sizing, whether to embed drawings using wiki links or markdown links, and adjust settings related to image themes, background colors, and Obsidian integration. + Additionally, there are settings for auto-export, which automatically generates SVG and/or PNG files to match the title of your Excalidraw drawings, keeping them in sync with file renames and deletions.`, EMBED_CACHING: "Image caching", + EXPORT_SUBHEAD: "Export Settings", EMBED_SIZING: "Image sizing", EMBED_THEME_BACKGROUND: "Image theme and background color", EMBED_IMAGE_CACHE_NAME: "Cache images for embedding in markdown", @@ -424,6 +434,7 @@ FILENAME_HEAD: "Filename", EXPORT_BOTH_DARK_AND_LIGHT_DESC: "When enabled, Excalidraw will export two files instead of one: filename.dark.png, filename.light.png and/or filename.dark.svg and filename.light.svg
"+ "Double files will be exported both if auto-export SVG or PNG (or both) are enabled, as well as when clicking export on a single image.", COMPATIBILITY_HEAD: "Compatibility features", + COMPATIBILITY_DESC: "You should only enable these features if you have a strong reason for wanting to work with excalidraw.com files instead of markdown files. Many of the plugin features are not supported on legacy files. Typical usecase would be if you use set your vault up on top of a Visual Studio Code project folder and you have .excalidraw drawings you want to access from Visual Studio Code as well. Another usecase might be using Excalidraw in Logseq and Obsidian in parallel.", EXPORT_EXCALIDRAW_NAME: "Auto-export Excalidraw", EXPORT_EXCALIDRAW_DESC: "Same as the auto-export SVG, but for *.Excalidraw", SYNC_EXCALIDRAW_NAME: @@ -433,6 +444,7 @@ FILENAME_HEAD: "Filename", "then update the drawing in the .md file based on the .excalidraw file", COMPATIBILITY_MODE_NAME: "New drawings as legacy files", COMPATIBILITY_MODE_DESC: + "⚠️ Enable this only if you know what you are doing. In 99.9% of the cases you DO NOT want this on. " + "By enabling this feature drawings you create with the ribbon icon, the command palette actions, " + "and the file explorer are going to be all legacy *.excalidraw files. This setting will also turn off the reminder message " + "when you open a legacy file for editing.", @@ -443,12 +455,13 @@ FILENAME_HEAD: "Filename", LATEX_DEFAULT_NAME: "Default LaTeX formual for new equations", LATEX_DEFAULT_DESC: "Leave empty if you don't want a default formula. You can add default formatting here such as \\color{white}.", NONSTANDARD_HEAD: "Non-Excalidraw.com supported features", - NONSTANDARD_DESC: "These features are not available on excalidraw.com. When exporting the drawing to Excalidraw.com these features will appear different.", + NONSTANDARD_DESC: `These settings in the "Non-Excalidraw.com Supported Features" section provide customization options beyond the default Excalidraw.com features. These features are not available on excalidraw.com. When exporting the drawing to Excalidraw.com these features will appear different. + You can configure the number of custom pens displayed next to the Obsidian Menu on the canvas, allowing you to choose from a range of options. Additionally, you can enable a fourth font option, which adds a fourth font button to the properties panel for text elements. `, + CUSTOM_PEN_HEAD: "Custom pens", CUSTOM_PEN_NAME: "Number of custom pens", CUSTOM_PEN_DESC: "You will see these pens next to the Obsidian Menu on the canvas. You can customize the pens on the canvas by long-pressing the pen button.", - EXPERIMENTAL_HEAD: "Experimental features", - EXPERIMENTAL_DESC: - "Some of these setting will not take effect immediately, only when the File Explorer is refreshed, or Obsidian restarted.", + EXPERIMENTAL_HEAD: "Miscellaneous features", + EXPERIMENTAL_DESC: `These miscellaneous features in Excalidraw include options for setting default LaTeX formulas for new equations, enabling a Field Suggester for autocompletion, displaying type indicators for Excalidraw files, enabling immersive image embedding in live preview editing mode, and experimenting with Taskbone Optical Character Recognition for text extraction from images and drawings. Users can also enter a Taskbone API key for extended usage of the OCR service.`, FIELD_SUGGESTER_NAME: "Enable Field Suggester", FIELD_SUGGESTER_DESC: "Field Suggester borrowed from Breadcrumbs and Templater plugins. The Field Suggester will show an autocomplete menu " + @@ -464,6 +477,7 @@ FILENAME_HEAD: "Filename", "Turn this on to support image embedding styles such as ![[drawing|width|style]] in live preview editing mode. " + "The setting will not affect the currently open documents. You need close the open documents and re-open them for the change " + "to take effect.", + CUSTOM_FONT_HEAD: "Fourth font", ENABLE_FOURTH_FONT_NAME: "Enable fourth font option", ENABLE_FOURTH_FONT_DESC: "By turning this on, you will see a fourth font button on the properties panel for text elements. " + @@ -475,6 +489,7 @@ FILENAME_HEAD: "Filename", "Select a .ttf, .woff or .woff2 font file from your vault to use as the fourth font. " + "If no file is selected, Excalidraw will use the Virgil font by default.", SCRIPT_SETTINGS_HEAD: "Settings for installed Scripts", + SCRIPT_SETTINGS_DESC: "Some of the Excalidraw Automate Scripts include settings. Settings are organized by script. Settings will only become visible in this list after you have executed the newly downloaded script once.", TASKBONE_HEAD: "Taskbone Optical Character Recogntion", TASKBONE_DESC: "This is an experimental integration of optical character recognition into Excalidraw. Please note, that taskbone is an independent external service not provided by Excalidraw, nor the Excalidraw-Obsidian plugin project. " + "The OCR service will grab legible text from freedraw lines and embedded pictures on your canvas and place the recognized text in the frontmatter of your drawing as well as onto clipboard. " + diff --git a/src/settings.ts b/src/settings.ts index 88bfdd2..5a18d9f 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -26,6 +26,7 @@ import { } from "./utils/Utils"; import { imageCache } from "./utils/ImageCache"; import { ConfirmationPrompt } from "./dialogs/Prompt"; +import de from "./lang/locale/de"; export interface ExcalidrawSettings { folder: string; @@ -327,6 +328,22 @@ export class ExcalidrawSettingTab extends PluginSettingTab { } async display() { + let detailsEl: HTMLElement; + + const addIframe = (link:string, startAt?: number) => { + const wrapper = detailsEl.createDiv({cls: "excalidraw-videoWrapper settings"}) + wrapper.createEl("iframe", { + attr: { + allowfullscreen: true, + allow: "encrypted-media;picture-in-picture", + frameborder: "0", + title: "YouTube video player", + src: "https://www.youtube.com/embed/" + link + (startAt ? "?start=" + startAt : ""), + sandbox: "allow-forms allow-presentation allow-same-origin allow-scripts allow-modals", + }, + }); + + } await this.plugin.loadSettings(); //in case sync loaded changed settings in the background this.requestEmbedUpdate = false; this.requestReloadDrawings = false; @@ -346,7 +363,17 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); coffeeImg.height = 45; - new Setting(containerEl) + // ------------------------------------------------ + // Saving + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("BASIC_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("BASIC_HEAD"), + cls: "excalidraw-setting-h1", + }); + new Setting(detailsEl) .setName(t("RELEASE_NOTES_NAME")) .setDesc(fragWithHTML(t("RELEASE_NOTES_DESC"))) .addToggle((toggle) => @@ -358,7 +385,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("NEWVERSION_NOTIFICATION_NAME")) .setDesc(fragWithHTML(t("NEWVERSION_NOTIFICATION_DESC"))) .addToggle((toggle) => @@ -370,7 +397,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FOLDER_NAME")) .setDesc(fragWithHTML(t("FOLDER_DESC"))) .addText((text) => @@ -383,7 +410,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FOLDER_EMBED_NAME")) .setDesc(fragWithHTML(t("FOLDER_EMBED_DESC"))) .addToggle((toggle) => @@ -395,7 +422,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("TEMPLATE_NAME")) .setDesc(fragWithHTML(t("TEMPLATE_DESC"))) .addText((text) => @@ -407,8 +434,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(); }), ); + addIframe("jgUpYznHP9A",216); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("SCRIPT_FOLDER_NAME")) .setDesc(fragWithHTML(t("SCRIPT_FOLDER_DESC"))) .addText((text) => @@ -421,9 +449,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("SAVING_HEAD") }); - new Setting(containerEl) + // ------------------------------------------------ + // Saving + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("SAVING_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + const savingDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("SAVING_HEAD"), + cls: "excalidraw-setting-h1", + }); + + new Setting(detailsEl) .setName(t("COMPRESS_NAME")) .setDesc(fragWithHTML(t("COMPRESS_DESC"))) .addToggle((toggle) => @@ -435,7 +474,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("AUTOSAVE_INTERVAL_DESKTOP_NAME")) .setDesc(fragWithHTML(t("AUTOSAVE_INTERVAL_DESKTOP_DESC"))) .addDropdown((dropdown) => @@ -454,7 +493,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("AUTOSAVE_INTERVAL_MOBILE_NAME")) .setDesc(fragWithHTML(t("AUTOSAVE_INTERVAL_MOBILE_DESC"))) .addDropdown((dropdown) => @@ -473,8 +512,13 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("FILENAME_HEAD") }); - containerEl.createDiv("", (el) => { + detailsEl = savingDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("FILENAME_HEAD"), + cls: "excalidraw-setting-h3", + }); + + detailsEl.createDiv("", (el) => { el.innerHTML = t("FILENAME_DESC"); }); @@ -491,10 +535,10 @@ export class ExcalidrawSettingTab extends PluginSettingTab { )}`; }; - const filenameEl = containerEl.createEl("p", { text: "" }); + const filenameEl = detailsEl.createEl("p", { text: "" }); filenameEl.innerHTML = getFilenameSample(); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILENAME_PREFIX_NAME")) .setDesc(fragWithHTML(t("FILENAME_PREFIX_DESC"))) .addText((text) => @@ -512,7 +556,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILENAME_PREFIX_EMBED_NAME")) .setDesc(fragWithHTML(t("FILENAME_PREFIX_EMBED_DESC"))) .addToggle((toggle) => @@ -525,7 +569,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILENAME_POSTFIX_NAME")) .setDesc(fragWithHTML(t("FILENAME_POSTFIX_DESC"))) .addText((text) => @@ -543,7 +587,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILENAME_DATE_NAME")) .setDesc(fragWithHTML(t("FILENAME_DATE_DESC"))) .addText((text) => @@ -561,7 +605,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILENAME_EXCALIDRAW_EXTENSION_NAME")) .setDesc(fragWithHTML(t("FILENAME_EXCALIDRAW_EXTENSION_DESC"))) .addToggle((toggle) => @@ -574,25 +618,36 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("DISPLAY_HEAD") }); - new Setting(containerEl) - .setName(t("DYNAMICSTYLE_NAME")) - .setDesc(fragWithHTML(t("DYNAMICSTYLE_DESC"))) - .addDropdown((dropdown) => - dropdown - .addOption("none","Dynamic Styling OFF") - .addOption("colorful","Match color") - .addOption("gray","Gray, match tone") - .setValue(this.plugin.settings.dynamicStyling) - .onChange(async (value) => { - this.requestUpdateDynamicStyling = true; - this.plugin.settings.dynamicStyling = value as DynamicStyle; - this.applySettingsUpdate(); - }), - ); - new Setting(containerEl) + // ------------------------------------------------ + // Display + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("DISPLAY_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + const displayDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("DISPLAY_HEAD"), + cls: "excalidraw-setting-h1", + }); + + new Setting(detailsEl) + .setName(t("DEFAULT_PEN_MODE_NAME")) + .setDesc(fragWithHTML(t("DEFAULT_PEN_MODE_DESC"))) + .addDropdown((dropdown) => + dropdown + .addOption("never", "Never") + .addOption("mobile", "On Obsidian Mobile") + .addOption("always", "Always") + .setValue(this.plugin.settings.defaultPenMode) + .onChange(async (value: "never" | "always" | "mobile") => { + this.plugin.settings.defaultPenMode = value; + this.applySettingsUpdate(); + }), + ); + + new Setting(detailsEl) .setName(t("LEFTHANDED_MODE_NAME")) .setDesc(fragWithHTML(t("LEFTHANDED_MODE_DESC"))) .addToggle((toggle) => @@ -607,8 +662,32 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(); }), ); + addIframe("H8Njp7ZXYag",999); - new Setting(containerEl) + detailsEl = displayDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("THEME_HEAD"), + cls: "excalidraw-setting-h3", + }); + + new Setting(detailsEl) + .setName(t("DYNAMICSTYLE_NAME")) + .setDesc(fragWithHTML(t("DYNAMICSTYLE_DESC"))) + .addDropdown((dropdown) => + dropdown + .addOption("none","Dynamic Styling OFF") + .addOption("colorful","Match color") + .addOption("gray","Gray, match tone") + .setValue(this.plugin.settings.dynamicStyling) + .onChange(async (value) => { + this.requestUpdateDynamicStyling = true; + this.plugin.settings.dynamicStyling = value as DynamicStyle; + this.applySettingsUpdate(); + }), + ); + addIframe("fypDth_-8q0"); + + new Setting(detailsEl) .setName(t("IFRAME_MATCH_THEME_NAME")) .setDesc(fragWithHTML(t("IFRAME_MATCH_THEME_DESC"))) .addToggle((toggle) => @@ -619,9 +698,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(true); }), ); + addIframe("ICpoyMv6KSs"); - - new Setting(containerEl) + new Setting(detailsEl) .setName(t("MATCH_THEME_NAME")) .setDesc(fragWithHTML(t("MATCH_THEME_DESC"))) .addToggle((toggle) => @@ -633,7 +712,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("MATCH_THEME_ALWAYS_NAME")) .setDesc(fragWithHTML(t("MATCH_THEME_ALWAYS_DESC"))) .addToggle((toggle) => @@ -645,7 +724,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("MATCH_THEME_TRIGGER_NAME")) .setDesc(fragWithHTML(t("MATCH_THEME_TRIGGER_DESC"))) .addToggle((toggle) => @@ -657,7 +736,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("DEFAULT_OPEN_MODE_NAME")) .setDesc(fragWithHTML(t("DEFAULT_OPEN_MODE_DESC"))) .addDropdown((dropdown) => @@ -673,22 +752,12 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) - .setName(t("DEFAULT_PEN_MODE_NAME")) - .setDesc(fragWithHTML(t("DEFAULT_PEN_MODE_DESC"))) - .addDropdown((dropdown) => - dropdown - .addOption("never", "Never") - .addOption("mobile", "On Obsidian Mobile") - .addOption("always", "Always") - .setValue(this.plugin.settings.defaultPenMode) - .onChange(async (value: "never" | "always" | "mobile") => { - this.plugin.settings.defaultPenMode = value; - this.applySettingsUpdate(); - }), - ); - - new Setting(containerEl) + detailsEl = displayDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("ZOOM_HEAD"), + cls: "excalidraw-setting-h3", + }); + new Setting(detailsEl) .setName(t("DEFAULT_PINCHZOOM_NAME")) .setDesc(fragWithHTML(t("DEFAULT_PINCHZOOM_DESC"))) .addToggle((toggle) => @@ -702,8 +771,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(); }), ); + addIframe("rBarRfcSxNo",107); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("DEFAULT_WHEELZOOM_NAME")) .setDesc(fragWithHTML(t("DEFAULT_WHEELZOOM_DESC"))) .addToggle((toggle) => @@ -718,7 +788,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("ZOOM_TO_FIT_ONOPEN_NAME")) .setDesc(fragWithHTML(t("ZOOM_TO_FIT_ONOPEN_DESC"))) .addToggle((toggle) => @@ -730,7 +800,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("ZOOM_TO_FIT_NAME")) .setDesc(fragWithHTML(t("ZOOM_TO_FIT_DESC"))) .addToggle((toggle) => @@ -744,7 +814,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { let zoomText: HTMLDivElement; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("ZOOM_TO_FIT_MAX_LEVEL_NAME")) .setDesc(fragWithHTML(t("ZOOM_TO_FIT_MAX_LEVEL_DESC"))) .addSlider((slider) => @@ -763,15 +833,27 @@ export class ExcalidrawSettingTab extends PluginSettingTab { el.style.textAlign = "right"; el.innerText = ` ${this.plugin.settings.zoomToFitMaxLevel.toString()}`; }); - - this.containerEl.createEl("h1", { text: t("LINKS_HEAD") }); - this.containerEl.createEl( + + + + // ------------------------------------------------ + // Links and Transclusions + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("LINKS_HEAD_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("LINKS_HEAD"), + cls: "excalidraw-setting-h1", + }); + + detailsEl.createEl( "span", undefined, (el) => (el.innerHTML = t("LINKS_DESC")), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("ADJACENT_PANE_NAME")) .setDesc(fragWithHTML(t("ADJACENT_PANE_DESC"))) .addToggle((toggle) => @@ -784,7 +866,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("MAINWORKSPACE_PANE_NAME")) .setDesc(fragWithHTML(t("MAINWORKSPACE_PANE_DESC"))) .addToggle((toggle) => @@ -796,7 +878,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(fragWithHTML(t("LINK_BRACKETS_NAME"))) .setDesc(fragWithHTML(t("LINK_BRACKETS_DESC"))) .addToggle((toggle) => @@ -808,7 +890,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("LINK_PREFIX_NAME")) .setDesc(fragWithHTML(t("LINK_PREFIX_DESC"))) .addText((text) => @@ -821,7 +903,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("URL_PREFIX_NAME")) .setDesc(fragWithHTML(t("URL_PREFIX_DESC"))) .addText((text) => @@ -836,7 +918,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { let todoPrefixSetting:TextComponent, donePrefixSetting:TextComponent; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("PARSE_TODO_NAME")) .setDesc(fragWithHTML(t("PARSE_TODO_DESC"))) .addToggle((toggle) => @@ -850,7 +932,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }) ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("TODO_NAME")) .setDesc(fragWithHTML(t("TODO_DESC"))) .addText((text) => { @@ -866,7 +948,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { ); todoPrefixSetting.setDisabled(!this.plugin.settings.parseTODO); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("DONE_NAME")) .setDesc(fragWithHTML(t("DONE_DESC"))) .setDisabled(!this.plugin.settings.parseTODO) @@ -884,7 +966,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { donePrefixSetting.setDisabled(!this.plugin.settings.parseTODO); let opacityText: HTMLDivElement; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("LINKOPACITY_NAME")) .setDesc(fragWithHTML(t("LINKOPACITY_DESC"))) .addSlider((slider) => @@ -904,7 +986,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { el.innerText = ` ${this.plugin.settings.linkOpacity.toString()}`; }); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("HOVERPREVIEW_NAME")) .setDesc(fragWithHTML(t("HOVERPREVIEW_DESC"))) .addToggle((toggle) => @@ -916,7 +998,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("LINK_CTRL_CLICK_NAME")) .setDesc(fragWithHTML(t("LINK_CTRL_CLICK_DESC"))) .addToggle((toggle) => @@ -928,7 +1010,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - const s = new Setting(containerEl) + const s = new Setting(detailsEl) .setName(t("TRANSCLUSION_WRAP_NAME")) .setDesc(fragWithHTML(t("TRANSCLUSION_WRAP_DESC"))) .addToggle((toggle) => @@ -943,7 +1025,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { "TRANSCLUSION_WRAP_DESC", )}`; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("PAGE_TRANSCLUSION_CHARCOUNT_NAME")) .setDesc(fragWithHTML(t("PAGE_TRANSCLUSION_CHARCOUNT_DESC"))) .addText((text) => @@ -972,7 +1054,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("TRANSCLUSION_DEFAULT_WRAP_NAME")) .setDesc(fragWithHTML(t("TRANSCLUSION_DEFAULT_WRAP_DESC"))) .addText((text) => @@ -999,7 +1081,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("QUOTE_TRANSCLUSION_REMOVE_NAME")) .setDesc(fragWithHTML(t("QUOTE_TRANSCLUSION_REMOVE_DESC"))) .addToggle(toggle => @@ -1012,7 +1094,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }) ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("GET_URL_TITLE_NAME")) .setDesc(fragWithHTML(t("GET_URL_TITLE_DESC"))) .addToggle((toggle) => @@ -1024,125 +1106,22 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("MD_HEAD") }); - this.containerEl.createEl("p", { text: t("MD_HEAD_DESC") }); - new Setting(containerEl) - .setName(t("MD_TRANSCLUDE_WIDTH_NAME")) - .setDesc(fragWithHTML(t("MD_TRANSCLUDE_WIDTH_DESC"))) - .addText((text) => - text - .setPlaceholder("Enter a number e.g. 500") - .setValue(this.plugin.settings.mdSVGwidth.toString()) - .onChange(async (value) => { - const intVal = parseInt(value); - if (isNaN(intVal) && value !== "") { - text.setValue(this.plugin.settings.mdSVGwidth.toString()); - return; - } - this.requestEmbedUpdate = true; - if (value === "") { - this.plugin.settings.mdSVGwidth = 500; - this.applySettingsUpdate(true); - return; - } - this.plugin.settings.mdSVGwidth = intVal; - this.requestReloadDrawings = true; - text.setValue(this.plugin.settings.mdSVGwidth.toString()); - this.applySettingsUpdate(true); - }), - ); - new Setting(containerEl) - .setName(t("MD_TRANSCLUDE_HEIGHT_NAME")) - .setDesc(fragWithHTML(t("MD_TRANSCLUDE_HEIGHT_DESC"))) - .addText((text) => - text - .setPlaceholder("Enter a number e.g. 800") - .setValue(this.plugin.settings.mdSVGmaxHeight.toString()) - .onChange(async (value) => { - const intVal = parseInt(value); - if (isNaN(intVal) && value !== "") { - text.setValue(this.plugin.settings.mdSVGmaxHeight.toString()); - return; - } - this.requestEmbedUpdate = true; - if (value === "") { - this.plugin.settings.mdSVGmaxHeight = 800; - this.applySettingsUpdate(true); - return; - } - this.plugin.settings.mdSVGmaxHeight = intVal; - this.requestReloadDrawings = true; - text.setValue(this.plugin.settings.mdSVGmaxHeight.toString()); - this.applySettingsUpdate(true); - }), - ); - new Setting(containerEl) - .setName(t("MD_DEFAULT_FONT_NAME")) - .setDesc(fragWithHTML(t("MD_DEFAULT_FONT_DESC"))) - .addDropdown(async (d: DropdownComponent) => { - d.addOption("Virgil", "Virgil"); - d.addOption("Cascadia", "Cascadia"); - this.app.vault - .getFiles() - .filter((f) => ["ttf", "woff", "woff2"].contains(f.extension)) - .forEach((f: TFile) => { - d.addOption(f.path, f.name); - }); - d.setValue(this.plugin.settings.mdFont).onChange((value) => { - this.requestReloadDrawings = true; - this.plugin.settings.mdFont = value; - this.applySettingsUpdate(true); - }); - }); - - new Setting(containerEl) - .setName(t("MD_DEFAULT_COLOR_NAME")) - .setDesc(fragWithHTML(t("MD_DEFAULT_COLOR_DESC"))) - .addText((text) => - text - .setPlaceholder("CSS Color-name|RGB-HEX") - .setValue(this.plugin.settings.mdFontColor) - .onChange((value) => { - this.requestReloadDrawings = true; - this.plugin.settings.mdFontColor = value; - this.applySettingsUpdate(true); - }), - ); - - new Setting(containerEl) - .setName(t("MD_DEFAULT_BORDER_COLOR_NAME")) - .setDesc(fragWithHTML(t("MD_DEFAULT_BORDER_COLOR_DESC"))) - .addText((text) => - text - .setPlaceholder("CSS Color-name|RGB-HEX") - .setValue(this.plugin.settings.mdBorderColor) - .onChange((value) => { - this.requestReloadDrawings = true; - this.plugin.settings.mdBorderColor = value; - this.applySettingsUpdate(true); - }), - ); - - new Setting(containerEl) - .setName(t("MD_CSS_NAME")) - .setDesc(fragWithHTML(t("MD_CSS_DESC"))) - .addText((text) => - text - .setPlaceholder("filename of css file in vault") - .setValue(this.plugin.settings.mdCSS) - .onChange((value) => { - this.requestReloadDrawings = true; - this.plugin.settings.mdCSS = value; - this.applySettingsUpdate(true); - }), - ); - - this.containerEl.createEl("h1", { text: t("EMBED_HEAD") }); - - new Setting(containerEl) + // ------------------------------------------------ + // Embed and Export + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("EMBED_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + const embedDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("EMBED_HEAD"), + cls: "excalidraw-setting-h1", + }); + + new Setting(detailsEl) .setName(t("EMBED_PREVIEW_IMAGETYPE_NAME")) .setDesc(fragWithHTML(t("EMBED_PREVIEW_IMAGETYPE_DESC"))) .addDropdown((dropdown) => dropdown @@ -1156,10 +1135,12 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(); }) ); + addIframe("yZQoJg2RCKI"); + addIframe("opLd1SqaH_I",8); let dropdown: DropdownComponent; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EMBED_TYPE_NAME")) .setDesc(fragWithHTML(t("EMBED_TYPE_DESC"))) .addDropdown(async (d: DropdownComponent) => { @@ -1186,9 +1167,25 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); }); - this.containerEl.createEl("h4", { text: t("EMBED_CACHING") }); + new Setting(detailsEl) + .setName(t("EMBED_WIKILINK_NAME")) + .setDesc(fragWithHTML(t("EMBED_WIKILINK_DESC"))) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.embedWikiLink) + .onChange(async (value) => { + this.plugin.settings.embedWikiLink = value; + this.applySettingsUpdate(); + }), + ); - new Setting(containerEl) + detailsEl = embedDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("EMBED_CACHING"), + cls: "excalidraw-setting-h3", + }); + + new Setting(detailsEl) .setName(t("EMBED_IMAGE_CACHE_NAME")) .setDesc(fragWithHTML(t("EMBED_IMAGE_CACHE_DESC"))) .addToggle((toggle) => @@ -1219,7 +1216,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }) ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EMBED_REUSE_EXPORTED_IMAGE_NAME")) .setDesc(fragWithHTML(t("EMBED_REUSE_EXPORTED_IMAGE_DESC"))) .addToggle((toggle) => @@ -1231,9 +1228,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h4", { text: t("EMBED_SIZING") }); + detailsEl = embedDetailsEl.createEl("details"); + const exportDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("EXPORT_SUBHEAD"), + cls: "excalidraw-setting-h3", + }); + addIframe("wTtaXmRJ7wg",171); + detailsEl = exportDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("EMBED_SIZING"), + cls: "excalidraw-setting-h4", + }); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EMBED_WIDTH_NAME")) .setDesc(fragWithHTML(t("EMBED_WIDTH_DESC"))) .addText((text) => @@ -1247,21 +1255,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) - .setName(t("EMBED_WIKILINK_NAME")) - .setDesc(fragWithHTML(t("EMBED_WIKILINK_DESC"))) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.embedWikiLink) - .onChange(async (value) => { - this.plugin.settings.embedWikiLink = value; - this.applySettingsUpdate(); - }), - ); - let scaleText: HTMLDivElement; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_PNG_SCALE_NAME")) .setDesc(fragWithHTML(t("EXPORT_PNG_SCALE_DESC"))) .addSlider((slider) => @@ -1282,8 +1278,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); let exportPadding: HTMLDivElement; - - new Setting(containerEl) + + new Setting(detailsEl) .setName(t("EXPORT_PADDING_NAME")) .setDesc(fragWithHTML(t("EXPORT_PADDING_DESC"))) .addSlider((slider) => @@ -1303,8 +1299,13 @@ export class ExcalidrawSettingTab extends PluginSettingTab { el.innerText = ` ${this.plugin.settings.exportPaddingSVG.toString()}`; }); - this.containerEl.createEl("h4", { text: t("EMBED_THEME_BACKGROUND") }); - new Setting(containerEl) + detailsEl = exportDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("EMBED_THEME_BACKGROUND"), + cls: "excalidraw-setting-h4", + }); + + new Setting(detailsEl) .setName(t("EXPORT_BACKGROUND_NAME")) .setDesc(fragWithHTML(t("EXPORT_BACKGROUND_DESC"))) .addToggle((toggle) => @@ -1317,7 +1318,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_THEME_NAME")) .setDesc(fragWithHTML(t("EXPORT_THEME_DESC"))) .addToggle((toggle) => @@ -1330,7 +1331,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("PREVIEW_MATCH_OBSIDIAN_NAME")) .setDesc(fragWithHTML(t("PREVIEW_MATCH_OBSIDIAN_DESC"))) .addToggle((toggle) => @@ -1342,9 +1343,13 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("EXPORT_HEAD") }); + detailsEl = exportDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("EXPORT_HEAD"), + cls: "excalidraw-setting-h4", + }); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_SYNC_NAME")) .setDesc(fragWithHTML(t("EXPORT_SYNC_DESC"))) .addToggle((toggle) => @@ -1365,7 +1370,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { } }; - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_SVG_NAME")) .setDesc(fragWithHTML(t("EXPORT_SVG_DESC"))) .addToggle((toggle) => @@ -1386,7 +1391,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_PNG_NAME")) .setDesc(fragWithHTML(t("EXPORT_PNG_DESC"))) .addToggle((toggle) => @@ -1407,7 +1412,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("EXPORT_BOTH_DARK_AND_LIGHT_NAME")) .setDesc(fragWithHTML(t("EXPORT_BOTH_DARK_AND_LIGHT_DESC"))) .addToggle((toggle) => @@ -1419,49 +1424,179 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h1", { text: t("COMPATIBILITY_HEAD") }); - - new Setting(containerEl) - .setName(t("COMPATIBILITY_MODE_NAME")) - .setDesc(fragWithHTML(t("COMPATIBILITY_MODE_DESC"))) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.compatibilityMode) - .onChange(async (value) => { - this.plugin.settings.compatibilityMode = value; - filenameEl.innerHTML = getFilenameSample(); - this.applySettingsUpdate(); - }), - ); - - new Setting(containerEl) - .setName(t("EXPORT_EXCALIDRAW_NAME")) - .setDesc(fragWithHTML(t("EXPORT_EXCALIDRAW_DESC"))) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.autoexportExcalidraw) - .onChange(async (value) => { - this.plugin.settings.autoexportExcalidraw = value; - this.applySettingsUpdate(); - }), - ); - - new Setting(containerEl) - .setName(t("SYNC_EXCALIDRAW_NAME")) - .setDesc(fragWithHTML(t("SYNC_EXCALIDRAW_DESC"))) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.syncExcalidraw) - .onChange(async (value) => { - this.plugin.settings.syncExcalidraw = value; - this.applySettingsUpdate(); - }), - ); + detailsEl = embedDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("PDF_TO_IMAGE"), + cls: "excalidraw-setting-h3", + }); - this.containerEl.createEl("h1", { text: t("NONSTANDARD_HEAD") }); - this.containerEl.createEl("p", { text: t("NONSTANDARD_DESC") }); + addIframe("nB4cOfn0xAs"); + new Setting(detailsEl) + .setName(t("PDF_TO_IMAGE_SCALE_NAME")) + .setDesc(fragWithHTML(t("PDF_TO_IMAGE_SCALE_DESC"))) + .addDropdown((dropdown) => + dropdown + .addOption("0.5", "0.5") + .addOption("1", "1") + .addOption("2", "2") + .addOption("3", "3") + .addOption("4", "4") + .addOption("5", "5") + .addOption("6", "6") + .setValue(`${this.plugin.settings.pdfScale}`) + .onChange((value) => { + this.plugin.settings.pdfScale = parseFloat(value); + this.applySettingsUpdate(); + }), + ); + - new Setting(containerEl) + // ------------------------------------------------ + // Markdown embedding settings + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("MD_HEAD_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("MD_HEAD"), + cls: "excalidraw-setting-h1", + }); + + + new Setting(detailsEl) + .setName(t("MD_TRANSCLUDE_WIDTH_NAME")) + .setDesc(fragWithHTML(t("MD_TRANSCLUDE_WIDTH_DESC"))) + .addText((text) => + text + .setPlaceholder("Enter a number e.g. 500") + .setValue(this.plugin.settings.mdSVGwidth.toString()) + .onChange(async (value) => { + const intVal = parseInt(value); + if (isNaN(intVal) && value !== "") { + text.setValue(this.plugin.settings.mdSVGwidth.toString()); + return; + } + this.requestEmbedUpdate = true; + if (value === "") { + this.plugin.settings.mdSVGwidth = 500; + this.applySettingsUpdate(true); + return; + } + this.plugin.settings.mdSVGwidth = intVal; + this.requestReloadDrawings = true; + text.setValue(this.plugin.settings.mdSVGwidth.toString()); + this.applySettingsUpdate(true); + }), + ); + + new Setting(detailsEl) + .setName(t("MD_TRANSCLUDE_HEIGHT_NAME")) + .setDesc(fragWithHTML(t("MD_TRANSCLUDE_HEIGHT_DESC"))) + .addText((text) => + text + .setPlaceholder("Enter a number e.g. 800") + .setValue(this.plugin.settings.mdSVGmaxHeight.toString()) + .onChange(async (value) => { + const intVal = parseInt(value); + if (isNaN(intVal) && value !== "") { + text.setValue(this.plugin.settings.mdSVGmaxHeight.toString()); + return; + } + this.requestEmbedUpdate = true; + if (value === "") { + this.plugin.settings.mdSVGmaxHeight = 800; + this.applySettingsUpdate(true); + return; + } + this.plugin.settings.mdSVGmaxHeight = intVal; + this.requestReloadDrawings = true; + text.setValue(this.plugin.settings.mdSVGmaxHeight.toString()); + this.applySettingsUpdate(true); + }), + ); + + new Setting(detailsEl) + .setName(t("MD_DEFAULT_FONT_NAME")) + .setDesc(fragWithHTML(t("MD_DEFAULT_FONT_DESC"))) + .addDropdown(async (d: DropdownComponent) => { + d.addOption("Virgil", "Virgil"); + d.addOption("Cascadia", "Cascadia"); + this.app.vault + .getFiles() + .filter((f) => ["ttf", "woff", "woff2"].contains(f.extension)) + .forEach((f: TFile) => { + d.addOption(f.path, f.name); + }); + d.setValue(this.plugin.settings.mdFont).onChange((value) => { + this.requestReloadDrawings = true; + this.plugin.settings.mdFont = value; + this.applySettingsUpdate(true); + }); + }); + + new Setting(detailsEl) + .setName(t("MD_DEFAULT_COLOR_NAME")) + .setDesc(fragWithHTML(t("MD_DEFAULT_COLOR_DESC"))) + .addText((text) => + text + .setPlaceholder("CSS Color-name|RGB-HEX") + .setValue(this.plugin.settings.mdFontColor) + .onChange((value) => { + this.requestReloadDrawings = true; + this.plugin.settings.mdFontColor = value; + this.applySettingsUpdate(true); + }), + ); + + new Setting(detailsEl) + .setName(t("MD_DEFAULT_BORDER_COLOR_NAME")) + .setDesc(fragWithHTML(t("MD_DEFAULT_BORDER_COLOR_DESC"))) + .addText((text) => + text + .setPlaceholder("CSS Color-name|RGB-HEX") + .setValue(this.plugin.settings.mdBorderColor) + .onChange((value) => { + this.requestReloadDrawings = true; + this.plugin.settings.mdBorderColor = value; + this.applySettingsUpdate(true); + }), + ); + + new Setting(detailsEl) + .setName(t("MD_CSS_NAME")) + .setDesc(fragWithHTML(t("MD_CSS_DESC"))) + .addText((text) => + text + .setPlaceholder("filename of css file in vault") + .setValue(this.plugin.settings.mdCSS) + .onChange((value) => { + this.requestReloadDrawings = true; + this.plugin.settings.mdCSS = value; + this.applySettingsUpdate(true); + }), + ); + + + + // ------------------------------------------------ + // Non-excalidraw.com supported features + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv({ text: t("NONSTANDARD_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + const nonstandardDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("NONSTANDARD_HEAD"), + cls: "excalidraw-setting-h1", + }); + + detailsEl = nonstandardDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("CUSTOM_PEN_HEAD"), + cls: "excalidraw-setting-h3", + }); + addIframe("OjNhjaH2KjI",69); + new Setting(detailsEl) .setName(t("CUSTOM_PEN_NAME")) .setDesc(t("CUSTOM_PEN_DESC")) .addDropdown((dropdown) => @@ -1484,8 +1619,14 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(false); }) ) - - new Setting(containerEl) + + detailsEl = nonstandardDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("CUSTOM_FONT_HEAD"), + cls: "excalidraw-setting-h3", + }); + addIframe("eKFmrSQhFA4"); + new Setting(detailsEl) .setName(t("ENABLE_FOURTH_FONT_NAME")) .setDesc(fragWithHTML(t("ENABLE_FOURTH_FONT_DESC"))) .addToggle((toggle) => @@ -1497,8 +1638,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab { this.applySettingsUpdate(); }), ); + - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FOURTH_FONT_NAME")) .setDesc(fragWithHTML(t("FOURTH_FONT_DESC"))) .addDropdown(async (d: DropdownComponent) => { @@ -1519,11 +1661,21 @@ export class ExcalidrawSettingTab extends PluginSettingTab { ); }); - this.containerEl.createEl("h1", { text: t("EXPERIMENTAL_HEAD") }); - this.containerEl.createEl("p", { text: t("EXPERIMENTAL_DESC") }); - + + // ------------------------------------------------ + // Experimental features + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv( { text: t("EXPERIMENTAL_DESC"), cls: "setting-item-description" }); + detailsEl = containerEl.createEl("details"); + const experimentalDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("EXPERIMENTAL_HEAD"), + cls: "excalidraw-setting-h1", + }); + //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/628 - /*new Setting(containerEl) + /*new Setting(detailsEl) .setName(t("MATHJAX_NAME")) .setDesc(t("MATHJAX_DESC")) .addDropdown((dropdown) => { @@ -1539,7 +1691,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }) })*/ - new Setting(containerEl) + addIframe("r08wk-58DPk"); + new Setting(detailsEl) .setName(t("LATEX_DEFAULT_NAME")) .setDesc(fragWithHTML(t("LATEX_DEFAULT_DESC"))) .addText((text) => @@ -1551,7 +1704,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FIELD_SUGGESTER_NAME")) .setDesc(fragWithHTML(t("FIELD_SUGGESTER_DESC"))) .addToggle((toggle) => @@ -1563,7 +1716,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILETYPE_NAME")) .setDesc(fragWithHTML(t("FILETYPE_DESC"))) .addToggle((toggle) => @@ -1576,7 +1729,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("FILETAG_NAME")) .setDesc(fragWithHTML(t("FILETAG_DESC"))) .addText((text) => @@ -1589,7 +1742,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("LIVEPREVIEW_NAME")) .setDesc(fragWithHTML(t("LIVEPREVIEW_DESC"))) .addToggle((toggle) => @@ -1601,11 +1754,17 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - this.containerEl.createEl("h2", { text: t("TASKBONE_HEAD") }); - this.containerEl.createEl("p", { text: t("TASKBONE_DESC") }); + detailsEl = experimentalDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("TASKBONE_HEAD"), + cls: "excalidraw-setting-h3", + }); + + detailsEl.createDiv( { text: t("TASKBONE_DESC"), cls: "setting-item-description" }); let taskboneAPIKeyText: TextComponent; - new Setting(containerEl) + addIframe("7gu4ETx7zro"); + new Setting(detailsEl) .setName(t("TASKBONE_ENABLE_NAME")) .setDesc(fragWithHTML(t("TASKBONE_ENABLE_DESC"))) .addToggle((toggle) => @@ -1624,7 +1783,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }), ); - new Setting(containerEl) + new Setting(detailsEl) .setName(t("TASKBONE_APIKEY_NAME")) .setDesc(fragWithHTML(t("TASKBONE_APIKEY_DESC"))) .addText((text) => { @@ -1639,6 +1798,58 @@ export class ExcalidrawSettingTab extends PluginSettingTab { } ); + + + // ------------------------------------------------ + // Compatibility + // ------------------------------------------------ + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv( { text: t("COMPATIBILITY_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + detailsEl.createEl("summary", { + text: t("COMPATIBILITY_HEAD"), + cls: "excalidraw-setting-h1", + }); + + new Setting(detailsEl) + .setName(t("COMPATIBILITY_MODE_NAME")) + .setDesc(fragWithHTML(t("COMPATIBILITY_MODE_DESC"))) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.compatibilityMode) + .onChange(async (value) => { + this.plugin.settings.compatibilityMode = value; + filenameEl.innerHTML = getFilenameSample(); + this.applySettingsUpdate(); + }), + ); + + new Setting(detailsEl) + .setName(t("EXPORT_EXCALIDRAW_NAME")) + .setDesc(fragWithHTML(t("EXPORT_EXCALIDRAW_DESC"))) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.autoexportExcalidraw) + .onChange(async (value) => { + this.plugin.settings.autoexportExcalidraw = value; + this.applySettingsUpdate(); + }), + ); + + new Setting(detailsEl) + .setName(t("SYNC_EXCALIDRAW_NAME")) + .setDesc(fragWithHTML(t("SYNC_EXCALIDRAW_DESC"))) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.syncExcalidraw) + .onChange(async (value) => { + this.plugin.settings.syncExcalidraw = value; + this.applySettingsUpdate(); + }), + ); + + + //------------------------------------- //Script settings //------------------------------------- @@ -1703,7 +1914,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { variableName: string, description?: string, ) => { - new Setting(containerEl) + new Setting(detailsEl) .setName(variableName) .setDesc(fragWithHTML(description ?? "")) .addToggle((toggle) => @@ -1727,7 +1938,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { Object.prototype.toString.call(valueset) === "[object Array]" && valueset.length > 0 ) { - new Setting(containerEl) + new Setting(detailsEl) .setName(variableName) .setDesc(fragWithHTML(description ?? "")) .addDropdown((dropdown) => { @@ -1743,7 +1954,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); } else { if(textAreaHeight(scriptName, variableName)) { - new Setting(containerEl) + new Setting(detailsEl) .setName(variableName) .setDesc(fragWithHTML(description ?? "")) .addTextArea((text) => { @@ -1757,7 +1968,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { }); }); } else { - new Setting(containerEl) + new Setting(detailsEl) .setName(variableName) .setDesc(fragWithHTML(description ?? "")) .addText((text) => @@ -1777,7 +1988,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab { variableName: string, description?: string, ) => { - new Setting(containerEl) + new Setting(detailsEl) .setName(variableName) .setDesc(fragWithHTML(description ?? "")) .addText((text) => @@ -1796,7 +2007,16 @@ export class ExcalidrawSettingTab extends PluginSettingTab { ); }; - this.containerEl.createEl("h1", { text: t("SCRIPT_SETTINGS_HEAD") }); + containerEl.createEl("hr", { cls: "excalidraw-setting-hr" }); + containerEl.createDiv( { text: t("SCRIPT_SETTINGS_DESC"), cls: "setting-item-description" }); + detailsEl = this.containerEl.createEl("details"); + const scriptDetailsEl = detailsEl; + detailsEl.createEl("summary", { + text: t("SCRIPT_SETTINGS_HEAD"), + cls: "excalidraw-setting-h1", + }); + + addIframe("H8Njp7ZXYag",52); Object.keys(this.plugin.settings.scriptEngineSettings) .filter((s) => scripts.contains(s)) .forEach((scriptName: string) => { @@ -1813,7 +2033,12 @@ export class ExcalidrawSettingTab extends PluginSettingTab { ) { return; } - this.containerEl.createEl("h3", { text: scriptName }); + detailsEl = scriptDetailsEl.createEl("details"); + detailsEl.createEl("summary", { + text: scriptName, + cls: "excalidraw-setting-h3", + }); + Object.keys(settings).forEach((variableName) => { const variable = settings[variableName]; const item = variable.value ?? variable; diff --git a/styles.css b/styles.css index 0685940..898fb13 100644 --- a/styles.css +++ b/styles.css @@ -183,15 +183,24 @@ li[data-testid] { } .excalidraw-videoWrapper { - max-width:600px + max-width:600px; } -.excalidraw-videoWrapper div { +.excalidraw-videoWrapper.settings { + max-width:340px; +} + +.excalidraw-videoWrapper div{ position: relative; padding-bottom: 56.25%; height: 0; margin: 0 auto; } +.excalidraw-videoWrapper.settings iframe { + position: relative; + margin-bottom: 1rem; +} + .excalidraw-videoWrapper iframe { position: absolute; top: 0; @@ -423,4 +432,47 @@ div.excalidraw-draginfo { max-height: initial; width: initial; height: initial; +} + +summary.excalidraw-setting-h1 { + font-variant: var(--h1-variant); + letter-spacing: -0.015em; + line-height: var(--h1-line-height); + font-size: var(--h1-size); + color: var(--h1-color); + font-weight: var(--h1-weight); + font-style: var(--h1-style); + font-family: var(--h1-font); + /*margin-block-start: var(--p-spacing);*/ + margin-block-end: var(--p-spacing); +} + +summary.excalidraw-setting-h3 { + font-variant: var(--h3-variant); + letter-spacing: -0.015em; + line-height: var(--h3-line-height); + font-size: var(--h3-size); + color: var(--h3-color); + font-weight: var(--h3-weight); + font-style: var(--h3-style); + font-family: var(--h3-font); + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); +} + +summary.excalidraw-setting-h4 { + font-variant: var(--h4-variant); + letter-spacing: -0.015em; + line-height: var(--h4-line-height); + font-size: var(--h4-size); + color: var(--h4-color); + font-weight: var(--h4-weight); + font-style: var(--h4-style); + font-family: var(--h4-font); + margin-block-start: var(--p-spacing); + margin-block-end: var(--p-spacing); +} + +hr.excalidraw-setting-hr { + margin: 1rem 0rem 0rem 0rem; } \ No newline at end of file