From 381401f175a2bf8097626887036ecfdef5761262 Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Sun, 2 Jan 2022 15:59:14 +0100 Subject: [PATCH] scriptEngineInstall WIP --- ea-scripts/index.md | 130 +++++++++++++++++++++++++++++-------- src/ExcalidrawAutomate.ts | 6 +- src/ExcalidrawView.ts | 7 +- src/ScriptInstallPrompt.ts | 39 +++++++++++ src/constants.ts | 3 + src/lang/locale/en.ts | 4 ++ src/main.ts | 23 +++++++ styles.css | 13 ++++ 8 files changed, 197 insertions(+), 28 deletions(-) create mode 100644 src/ScriptInstallPrompt.ts diff --git a/ea-scripts/index.md b/ea-scripts/index.md index 4c999cd..eb4fe92 100644 --- a/ea-scripts/index.md +++ b/ea-scripts/index.md @@ -27,79 +27,157 @@ - [[#Zoom to Fit Selected Elements]] ## Box Selected Elements -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will add an encapsulating box around the currently selected elements in Excalidraw.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Box%20Selected%20Elements.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will add an encapsulating box around the currently selected elements in Excalidraw.
## Bullet Point -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Bullet%20Point.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.
## Connect elements -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Connect%20elements.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).
## Convert text to link with folder and alias -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionConverts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.
original text - [[selected folder/original text|original text]]
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Convert%20text%20to%20link%20with%20folder%20and%20alias.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionConverts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.
original text - [[selected folder/original text|original text]]
## Create new markdown file and embed into active drawing -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Create%20new%20markdown%20file%20and%20embed%20into%20active%20drawing.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.
## Darken background color -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script darkens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect. In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Darken%20background%20color.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script darkens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect. In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
## Dimensions -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionCurrently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Dimensions.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionCurrently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.
## Elbow connectors -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script converts the selected connectors to elbows.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Elbow%20connectors.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script converts the selected connectors to elbows.
## Expand rectangles horizontally keep text centered -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the width of the selected rectangles until they are all the same width and keep the text centered.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20horizontally%20keep%20text20%centered.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the width of the selected rectangles until they are all the same width and keep the text centered.
## Expand rectangles horizontally -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the width of the selected rectangles until they are all the same width.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20horizontally.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the width of the selected rectangles until they are all the same width.
## Expand rectangles vertically keep text centered -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the height of the selected rectangles until they are all the same height and keep the text centered.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20vertically%20keep%20text%20centered.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the height of the selected rectangles until they are all the same height and keep the text centered.
## Expand rectangles vertically -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the height of the selected rectangles until they are all the same height.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20vertically.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script expands the height of the selected rectangles until they are all the same height.
## Fixed spacing -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThe script arranges the selected elements horizontally with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Fixed%20spacing.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThe script arranges the selected elements horizontally with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
## Fixed vertical distance -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThe script arranges the selected elements vertically with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Fixed%20vertical%20distance.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThe script arranges the selected elements vertically with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
## Font Family -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionSets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Font%20Family.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionSets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.
## Grid -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThe default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Grid.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThe default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.
## Lighten background color -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Lighten%20background%20color.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
## Modify background color opacity -
Install
Author@1-2-3
SourceFile on GitHub
DescriptionThis script changes the opacity of the background color of the selected boxes. The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Modify%20background%20color%20opacity.md +``` +
Author@1-2-3
SourceFile on GitHub
DescriptionThis script changes the opacity of the background color of the selected boxes. The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.
## Modify stroke width of selected elements -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Modify%20stroke%20width%20of%20selected%20elements.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThis script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.
## OCR - Optical Character Recognition -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will 1) send the selected image file to [taskbone.com](https://taskbone.com) to exctract the text from the image, and 2) will add the text to your drawing as a text element.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/OCR%20-%20Optical%20Character%20Recognition.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will 1) send the selected image file to [taskbone.com](https://taskbone.com) to exctract the text from the image, and 2) will add the text to your drawing as a text element.
## Reverse arrows -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionReverse the direction of **arrows** within the scope of selected elements.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Reverse%20arrows.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionReverse the direction of **arrows** within the scope of selected elements.
## Set Link Alias -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionIterates all of the links in the selected TextElements and prompts the user to set or modify the alias for each link found.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Set20%Link20%Alias.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionIterates all of the links in the selected TextElements and prompts the user to set or modify the alias for each link found.
## Split text by lines -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionSplit lines of text into separate text elements for easier reorganization
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Split%20text%20by%20lines.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionSplit lines of text into separate text elements for easier reorganization
## Text Align -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionSets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Text%20Align.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionSets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.
## Transfer TextElements to Excalidraw markdown metadata -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will delete the selected text elements from the canvas and will copy the text from these text elements into the Excalidraw markdown file as metadata. This means, that the text will no longer be visible in the drawing, however you will be able to search for the text in Obsidian and find the drawing containing this image.
+```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Transfer%20TextElements%20to%20Excalidraw%20markdown%20metadata.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionThe script will delete the selected text elements from the canvas and will copy the text from these text elements into the Excalidraw markdown file as metadata. This means, that the text will no longer be visible in the drawing, however you will be able to search for the text in Obsidian and find the drawing containing this image.
## Zoom to Fit Selected Elements -
Install
Author@zsviczian
SourceFile on GitHub
DescriptionSimilar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)
\ No newline at end of file +```excalidraw-script-install +https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Zoom%20to%20Fit%20Selected%20Elements.md +``` +
Author@zsviczian
SourceFile on GitHub
DescriptionSimilar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)
\ No newline at end of file diff --git a/src/ExcalidrawAutomate.ts b/src/ExcalidrawAutomate.ts index 8adcef4..8ebf11b 100644 --- a/src/ExcalidrawAutomate.ts +++ b/src/ExcalidrawAutomate.ts @@ -6,7 +6,7 @@ import { ExcalidrawElement, ExcalidrawBindableElement, } from "@zsviczian/excalidraw/types/element/types"; -import { normalizePath, TFile } from "obsidian"; +import { Component, MarkdownRenderer, normalizePath, TFile } from "obsidian"; import ExcalidrawView, { ExportSettings, TextMode } from "./ExcalidrawView"; import { ExcalidrawData } from "./ExcalidrawData"; import { @@ -39,6 +39,7 @@ declare type ConnectionPoint = "top" | "bottom" | "left" | "right" | null; const GAP = 4; export interface ExcalidrawAutomate { + renderMarkdown(markdown: string, el: HTMLElement, sourcePath: string, component: Component): Promise; plugin: ExcalidrawPlugin; elementsDict: {}; //contains the ExcalidrawElements currently edited in Automate indexed by el.id imagesDict: {}; //the images files including DataURL, indexed by fileId @@ -219,6 +220,9 @@ export async function initExcalidrawAutomate( plugin: ExcalidrawPlugin, ): Promise { window.ExcalidrawAutomate = { + renderMarkdown(markdown: string, el: HTMLElement, sourcePath: string, component: Component): Promise { + return MarkdownRenderer.renderMarkdown(markdown, el, sourcePath, component); + }, plugin, elementsDict: {}, imagesDict: {}, diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index d86b4ce..e846cd7 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -24,6 +24,7 @@ import { VIEW_TYPE_EXCALIDRAW, ICON_NAME, DISK_ICON_NAME, + SCRIPTENGINE_ICON_NAME, PNG_ICON_NAME, SVG_ICON_NAME, FRONTMATTER_KEY, @@ -68,6 +69,7 @@ import { EmbeddedFilesLoader, FileData, } from "./EmbeddedFileLoader"; +import { ScriptInstallPrompt } from "./ScriptInstallPrompt"; export enum TextMode { parsed, @@ -556,7 +558,10 @@ export default class ExcalidrawView extends TextFileView { } onload() { - //console.log("ExcalidrawView.onload()"); + this.addAction(SCRIPTENGINE_ICON_NAME, t("INSTALL_SCRIPT"), () => { + (new ScriptInstallPrompt(this.plugin)).open(); + }); + this.addAction(DISK_ICON_NAME, t("FORCE_SAVE"), async () => { await this.save(false); this.plugin.triggerEmbedUpdates(); diff --git a/src/ScriptInstallPrompt.ts b/src/ScriptInstallPrompt.ts new file mode 100644 index 0000000..6c77cd8 --- /dev/null +++ b/src/ScriptInstallPrompt.ts @@ -0,0 +1,39 @@ +import { + App, + MarkdownRenderer, + Modal, + Notice, + request, +} from "obsidian"; +import { Url } from "url"; +import { t } from "./lang/helpers"; +import ExcalidrawPlugin from "./main"; +import { errorlog } from "./Utils"; + +const URL = "https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/index.md"; + +export class ScriptInstallPrompt extends Modal { + constructor( + private plugin: ExcalidrawPlugin, + ) { + super(plugin.app); +// this.titleEl.setText(t("INSTAL_MODAL_TITLE")); + } + + async onOpen(): Promise { + this.contentEl.classList.add("excalidraw-scriptengine-install"); + try { + const source = await request({url:URL}); + MarkdownRenderer.renderMarkdown(source, this.contentEl, "", this.plugin); + } catch(e) { + errorlog({where:"ScriptInstallPrompt.onOpen", error: e}); + new Notice("Could not open ScriptEngine repository"); + this.close(); + return; + } + } + + onClose(): void { + this.contentEl.empty(); + } +} \ No newline at end of file diff --git a/src/constants.ts b/src/constants.ts index 3f3aafe..611aa85 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -13,6 +13,7 @@ export const nanoid = customAlphabet( export const KEYCODE = { ESC: 27, }; +export const SCRIPT_INSTALL_CODEBLOCK = "excalidraw-script-install"; export const fileid = customAlphabet("1234567890abcdef", 40); export const REG_LINKINDEX_INVALIDCHARS = /[<>:"\\|?*]/g; export const REG_BLOCK_REF_CLEAN = @@ -51,6 +52,8 @@ export const TEXT_DISPLAY_PARSED_ICON_NAME = "quote-glyph"; export const TEXT_DISPLAY_RAW_ICON_NAME = "presentation"; export const FULLSCREEN_ICON_NAME = "fullscreen"; export const EXIT_FULLSCREEN_ICON_NAME = "exit-fullscreen"; +export const SCRIPTENGINE_ICON_NAME = "ScriptEngine"; +export const SCRIPTENGINE_ICON = ``; export const DISK_ICON_NAME = "disk"; export const DISK_ICON = ``; export const PNG_ICON_NAME = "save-png"; diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index d639035..dcb22f0 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -7,6 +7,7 @@ import { // English export default { // main.ts + INSTALL_SCRIPT: "Install this script", OPEN_AS_EXCALIDRAW: "Open as Excalidraw Drawing", TOGGLE_MODE: "Toggle between Excalidraw and Markdown mode", CONVERT_NOTE_TO_EXCALIDRAW: "Convert empty note to Excalidraw Drawing", @@ -280,4 +281,7 @@ export default { //EmbeddedFileLoader.ts INFINITE_LOOP_WARNING: "EXCALIDRAW WARNING\nAborted loading embedded images due to infinite loop in file:\n", + + //ScriptInstallPrompt.ts + INSTAL_MODAL_TITLE: "Available ExcalidrawAutomate ScriptEngine Macros", }; diff --git a/src/main.ts b/src/main.ts index 9bc242a..fb2dbd2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -21,6 +21,8 @@ import { VIEW_TYPE_EXCALIDRAW, EXCALIDRAW_ICON, ICON_NAME, + SCRIPTENGINE_ICON, + SCRIPTENGINE_ICON_NAME, DISK_ICON, DISK_ICON_NAME, PNG_ICON, @@ -34,6 +36,7 @@ import { nanoid, DARK_BLANK_DRAWING, CTRL_OR_CMD, + SCRIPT_INSTALL_CODEBLOCK, } from "./constants"; import ExcalidrawView, { ExportSettings, TextMode } from "./ExcalidrawView"; import { getMarkdownDrawingSection } from "./ExcalidrawData"; @@ -124,6 +127,7 @@ export default class ExcalidrawPlugin extends Plugin { async onload() { addIcon(ICON_NAME, EXCALIDRAW_ICON); + addIcon(SCRIPTENGINE_ICON_NAME,SCRIPTENGINE_ICON); addIcon(DISK_ICON_NAME, DISK_ICON); addIcon(PNG_ICON_NAME, PNG_ICON); addIcon(SVG_ICON_NAME, SVG_ICON); @@ -141,6 +145,7 @@ export default class ExcalidrawPlugin extends Plugin { this.registerExtensions(["excalidraw"], VIEW_TYPE_EXCALIDRAW); this.addMarkdownPostProcessor(); + this.registerInstallCodeblockProcessor(); this.addThemeObserver(); this.experimentalFileTypeDisplayToggle(this.settings.experimentalFileType); this.registerCommands(); @@ -220,6 +225,24 @@ export default class ExcalidrawPlugin extends Plugin { }); } + private registerInstallCodeblockProcessor() { + const codeblockProcessor = async (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext, plugin: ExcalidrawPlugin) => { + el.createEl("button",null,(button)=>{ + button.setText(t("INSTALL_SCRIPT")); + button.onclick = ()=>{console.log(source)} + }); + } + + this.registerMarkdownCodeBlockProcessor(SCRIPT_INSTALL_CODEBLOCK, async (source,el,ctx) => { + el.addEventListener(RERENDER_EVENT,async (e) => { + e.stopPropagation(); + el.empty(); + codeblockProcessor(source,el,ctx,this); + }); + codeblockProcessor(source,el,ctx,this); + }); + } + /** * Displays a transcluded .excalidraw image in markdown preview mode */ diff --git a/styles.css b/styles.css index 9ea1af0..76768f4 100644 --- a/styles.css +++ b/styles.css @@ -95,3 +95,16 @@ li[data-testid] { margin-bottom: 20px; } + +.excalidraw-scriptengine-install img { + width: 100%; + max-width:800px; +} + +.excalidraw-scriptengine-install tr { + vertical-align: top; +} + +.excalidraw-scriptengine-install td { + max-width: 140px; +} \ No newline at end of file