From 314f3a081119998a6409872383ebea8060db31d4 Mon Sep 17 00:00:00 2001 From: windingwind <33902321+windingwind@users.noreply.github.com> Date: Sun, 13 Oct 2024 10:45:49 +0200 Subject: [PATCH] add: template editor format buttons --- .../chrome/content/icons/editor/blockMath.svg | 12 + .../content/icons/editor/blockScript.svg | 6 + addon/chrome/content/icons/editor/bold.svg | 3 + addon/chrome/content/icons/editor/bullet.svg | 6 + addon/chrome/content/icons/editor/code.svg | 6 + addon/chrome/content/icons/editor/h1.svg | 6 + addon/chrome/content/icons/editor/h2.svg | 6 + addon/chrome/content/icons/editor/h3.svg | 6 + .../content/icons/editor/inlineMath.svg | 8 + .../content/icons/editor/inlineScript.svg | 7 + addon/chrome/content/icons/editor/italic.svg | 3 + addon/chrome/content/icons/editor/link.svg | 10 + addon/chrome/content/icons/editor/math.svg | 10 + .../content/icons/editor/monospaced.svg | 3 + .../chrome/content/icons/editor/numbered.svg | 6 + addon/chrome/content/icons/editor/quote.svg | 6 + .../content/icons/editor/strikethrough.svg | 3 + .../chrome/content/icons/editor/subscript.svg | 3 + .../content/icons/editor/superscript.svg | 3 + addon/chrome/content/icons/editor/table.svg | 3 + .../chrome/content/icons/editor/textColor.svg | 3 + .../chrome/content/icons/editor/underline.svg | 3 + .../content/lib/css/github-markdown.css | 4 +- .../chrome/content/styles/templateEditor.css | 133 +++++++++ addon/chrome/content/templateEditor.xhtml | 128 +-------- addon/locale/en-US/templateEditor.ftl | 69 +++-- addon/locale/it-IT/templateEditor.ftl | 83 +++--- addon/locale/ru-RU/templateEditor.ftl | 69 +++-- addon/locale/tr-TR/templateEditor.ftl | 69 +++-- addon/locale/zh-CN/templateEditor.ftl | 69 +++-- src/modules/template/api.ts | 13 +- src/modules/template/editorWindow.ts | 256 +++++++++++++----- src/modules/template/preview.ts | 4 + 33 files changed, 679 insertions(+), 340 deletions(-) create mode 100644 addon/chrome/content/icons/editor/blockMath.svg create mode 100644 addon/chrome/content/icons/editor/blockScript.svg create mode 100644 addon/chrome/content/icons/editor/bold.svg create mode 100644 addon/chrome/content/icons/editor/bullet.svg create mode 100644 addon/chrome/content/icons/editor/code.svg create mode 100644 addon/chrome/content/icons/editor/h1.svg create mode 100644 addon/chrome/content/icons/editor/h2.svg create mode 100644 addon/chrome/content/icons/editor/h3.svg create mode 100644 addon/chrome/content/icons/editor/inlineMath.svg create mode 100644 addon/chrome/content/icons/editor/inlineScript.svg create mode 100644 addon/chrome/content/icons/editor/italic.svg create mode 100644 addon/chrome/content/icons/editor/link.svg create mode 100644 addon/chrome/content/icons/editor/math.svg create mode 100644 addon/chrome/content/icons/editor/monospaced.svg create mode 100644 addon/chrome/content/icons/editor/numbered.svg create mode 100644 addon/chrome/content/icons/editor/quote.svg create mode 100644 addon/chrome/content/icons/editor/strikethrough.svg create mode 100644 addon/chrome/content/icons/editor/subscript.svg create mode 100644 addon/chrome/content/icons/editor/superscript.svg create mode 100644 addon/chrome/content/icons/editor/table.svg create mode 100644 addon/chrome/content/icons/editor/textColor.svg create mode 100644 addon/chrome/content/icons/editor/underline.svg create mode 100644 addon/chrome/content/styles/templateEditor.css diff --git a/addon/chrome/content/icons/editor/blockMath.svg b/addon/chrome/content/icons/editor/blockMath.svg new file mode 100644 index 0000000..0161518 --- /dev/null +++ b/addon/chrome/content/icons/editor/blockMath.svg @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/blockScript.svg b/addon/chrome/content/icons/editor/blockScript.svg new file mode 100644 index 0000000..3089672 --- /dev/null +++ b/addon/chrome/content/icons/editor/blockScript.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/bold.svg b/addon/chrome/content/icons/editor/bold.svg new file mode 100644 index 0000000..ec8a5f3 --- /dev/null +++ b/addon/chrome/content/icons/editor/bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/bullet.svg b/addon/chrome/content/icons/editor/bullet.svg new file mode 100644 index 0000000..a2c869b --- /dev/null +++ b/addon/chrome/content/icons/editor/bullet.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/code.svg b/addon/chrome/content/icons/editor/code.svg new file mode 100644 index 0000000..8426767 --- /dev/null +++ b/addon/chrome/content/icons/editor/code.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/h1.svg b/addon/chrome/content/icons/editor/h1.svg new file mode 100644 index 0000000..aaff0ab --- /dev/null +++ b/addon/chrome/content/icons/editor/h1.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/h2.svg b/addon/chrome/content/icons/editor/h2.svg new file mode 100644 index 0000000..79df36e --- /dev/null +++ b/addon/chrome/content/icons/editor/h2.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/h3.svg b/addon/chrome/content/icons/editor/h3.svg new file mode 100644 index 0000000..6e88cab --- /dev/null +++ b/addon/chrome/content/icons/editor/h3.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/inlineMath.svg b/addon/chrome/content/icons/editor/inlineMath.svg new file mode 100644 index 0000000..8f098b1 --- /dev/null +++ b/addon/chrome/content/icons/editor/inlineMath.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/inlineScript.svg b/addon/chrome/content/icons/editor/inlineScript.svg new file mode 100644 index 0000000..de62b66 --- /dev/null +++ b/addon/chrome/content/icons/editor/inlineScript.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/italic.svg b/addon/chrome/content/icons/editor/italic.svg new file mode 100644 index 0000000..e34f201 --- /dev/null +++ b/addon/chrome/content/icons/editor/italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/link.svg b/addon/chrome/content/icons/editor/link.svg new file mode 100644 index 0000000..f9d783d --- /dev/null +++ b/addon/chrome/content/icons/editor/link.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addon/chrome/content/icons/editor/math.svg b/addon/chrome/content/icons/editor/math.svg new file mode 100644 index 0000000..8d342b7 --- /dev/null +++ b/addon/chrome/content/icons/editor/math.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/addon/chrome/content/icons/editor/monospaced.svg b/addon/chrome/content/icons/editor/monospaced.svg new file mode 100644 index 0000000..b95e272 --- /dev/null +++ b/addon/chrome/content/icons/editor/monospaced.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/numbered.svg b/addon/chrome/content/icons/editor/numbered.svg new file mode 100644 index 0000000..d261909 --- /dev/null +++ b/addon/chrome/content/icons/editor/numbered.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/quote.svg b/addon/chrome/content/icons/editor/quote.svg new file mode 100644 index 0000000..f02a0a5 --- /dev/null +++ b/addon/chrome/content/icons/editor/quote.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/addon/chrome/content/icons/editor/strikethrough.svg b/addon/chrome/content/icons/editor/strikethrough.svg new file mode 100644 index 0000000..2c2d452 --- /dev/null +++ b/addon/chrome/content/icons/editor/strikethrough.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/subscript.svg b/addon/chrome/content/icons/editor/subscript.svg new file mode 100644 index 0000000..732b9b9 --- /dev/null +++ b/addon/chrome/content/icons/editor/subscript.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/superscript.svg b/addon/chrome/content/icons/editor/superscript.svg new file mode 100644 index 0000000..6960bed --- /dev/null +++ b/addon/chrome/content/icons/editor/superscript.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/table.svg b/addon/chrome/content/icons/editor/table.svg new file mode 100644 index 0000000..0e52e8d --- /dev/null +++ b/addon/chrome/content/icons/editor/table.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/textColor.svg b/addon/chrome/content/icons/editor/textColor.svg new file mode 100644 index 0000000..4362818 --- /dev/null +++ b/addon/chrome/content/icons/editor/textColor.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/icons/editor/underline.svg b/addon/chrome/content/icons/editor/underline.svg new file mode 100644 index 0000000..df8e149 --- /dev/null +++ b/addon/chrome/content/icons/editor/underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/addon/chrome/content/lib/css/github-markdown.css b/addon/chrome/content/lib/css/github-markdown.css index 473b01a..b5cf237 100644 --- a/addon/chrome/content/lib/css/github-markdown.css +++ b/addon/chrome/content/lib/css/github-markdown.css @@ -560,10 +560,10 @@ margin-bottom: 0 !important; } - .markdown-body a:not([href]) { + /* .markdown-body a:not([href]) { color: inherit; text-decoration: none; - } + } */ .markdown-body .absent { color: var(--color-danger-fg); diff --git a/addon/chrome/content/styles/templateEditor.css b/addon/chrome/content/styles/templateEditor.css new file mode 100644 index 0000000..c44fd39 --- /dev/null +++ b/addon/chrome/content/styles/templateEditor.css @@ -0,0 +1,133 @@ +html, +body { + min-width: 600px; + min-height: 400px; +} +html, +body, +.viewport { + padding: 0; + margin: 0; + height: 100%; + word-wrap: break-word; +} +.viewport { + flex-grow: 1; + flex-shrink: 1; + margin: 0 5px 0 5px; + overflow-x: hidden; + overflow-y: auto; +} +.viewport-container { + padding: 0; + margin: 0; + height: calc(100% - 50px); + width: 100%; + display: flex; + flex-direction: row; + overflow: hidden; + border-bottom: var(--material-border); + background: var(--material-background); +} +.footer-container { + padding: 5px; +} +.list-viewport { + width: calc(30% - 10px); + height: 100%; + overflow: hidden; +} +#table-container { + height: 100%; + width: 100%; + overflow: auto; +} +#templates-table { + height: 100%; +} +.editor-viewport { + display: flex; + flex-direction: column; + width: calc(40% - 10px); + padding: 5px; +} +.preview-viewport { + display: flex; + flex-direction: column; + width: calc(30% - 10px); + padding: 5px; +} +.markdown-body { + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 0px; +} +.help-button { + appearance: auto; + -moz-default-appearance: -moz-mac-help-button; + min-width: 0; +} +.editor-button-container { + display: flex; + flex-wrap: wrap; + gap: 4px; + padding: 4px; +} +.editor-button-container[hidden] { + display: none; +} +.format { + width: 28px; + height: 28px; + border-radius: 5px; + flex-grow: 0; + flex-shrink: 0; + margin: 0; + background-repeat: no-repeat; + background-position: center; +} +.format:hover { + background-color: var(--fill-quinary); +} +.format:active { + background-color: var(--fill-quarternary); +} +.snippet { + border: var(--material-panedivider); + border-radius: 4px; + cursor: pointer; + font-size: 0.916666667em; + line-height: 1.272727273; + overflow: hidden; + padding: 1px 4px; + text-overflow: ellipsis; + white-space: pre; + box-sizing: border-box; + color: var(--fill-primary); +} +.snippet.syntax { + background-color: color-mix( + in srgb, + var(--accent-yellow) 50%, + transparent 50% + ); +} +.snippet.expression { + background-color: color-mix( + in srgb, + var(--accent-green) 50%, + transparent 50% + ); +} +.snippet.variable { + background-color: color-mix( + in srgb, + var(--accent-azure) 50%, + transparent 50% + ); +} +.snippet:hover { + background-color: var(--fill-quinary); +} diff --git a/addon/chrome/content/templateEditor.xhtml b/addon/chrome/content/templateEditor.xhtml index b4addfe..1f5d6dc 100644 --- a/addon/chrome/content/templateEditor.xhtml +++ b/addon/chrome/content/templateEditor.xhtml @@ -61,127 +61,18 @@ window.arguments[0]._initPromise.resolve(); }); - + +
@@ -227,6 +118,7 @@
+
-
+
` at the beginning of the line followed by your quote. Should be used in markdown mode -snippet-markdownTable = table - .title = Markdown table, type `|` to separate columns and rows. Should be used in markdown mode snippet-dryRunFlag = dry run flag .title = Check if the template is running in dry run mode, e.g. for preview. In dry run mode, the script should not have side effects. snippet-itemBeforeLoop = before loop diff --git a/addon/locale/it-IT/templateEditor.ftl b/addon/locale/it-IT/templateEditor.ftl index 55eed57..e36276c 100644 --- a/addon/locale/it-IT/templateEditor.ftl +++ b/addon/locale/it-IT/templateEditor.ftl @@ -45,36 +45,53 @@ restore = help = .label = Aiuto +format-bold = + .title = Grassetto +format-italic = + .title = Corsivo +format-strikethrough = + .title = Barrato +format-underline = + .title = Sottolineato +format-superscript = + .title = Apice +format-subscript = + .title = Pedice +format-textColor = + .title = Colore del testo +format-link = + .title = Link +format-quote = + .title = Citazione +format-monospaced = + .title = Testo monospaziato +format-code = + .title = Codice +format-table = + .title = Tabella +format-h1 = + .title = Intestazione di livello 1 +format-h2 = + .title = Intestazione di livello 2 +format-h3 = + .title = Intestazione di livello 3 +format-bullet = + .title = Elenco puntato +format-numbered = + .title = Elenco numerato +format-inlineMath = + .title = Formula matematica in linea +format-blockMath = + .title = Formula matematica multilinea +format-inlineScript = + .title = Aggiungi uno script JS in-linea, e inserisci il risultato nella nota +format-blockScript = + .title = Aggiungi uno script JS multi-linea, e inserisci il valore risultante nella nota + snippet-useMarkdown = usa markdown .title = Elabora il template come markdown snippet-useRefresh = abilita aggiornamento .title = Permetti al contenuto generato dal template di essere aggiornato -snippet-inlineScript = script in-linea - .title = Aggiungi uno script JS in-linea, e inserisci il risultato nella nota -snippet-multiLineScript = script multi-linea - .title = Aggiungi uno script JS multi-linea, e inserisci il valore risultante nella nota -snippet-markdownHeading1 = intestazione 1 - .title = Intestazione 1 Markdown, digita `#` a inizio riga seguito dall'intestazione. Da usare in modalità markdown -snippet-markdownHeading2 = intestazione 2 - .title = Intestazione 2 Markdown, digita `##` a inizio riga seguito dall'intestazione. Da usare in modalità markdown -snippet-markdownHeading3 = intestazione 3 - .title = Intestazione 3 Markdown, digita `###` a inizio riga seguito dall'intestazione. Da usare in modalità markdown -snippet-markdownBullet = elenco puntato - .title = Elenco puntato Markdown, digita `-` a inizio riga seguito dalla voce elenco. Da usare in modalità markdown -snippet-markdownNumber = elenco numerato - .title = Elenco numerato Markdown, digita `1.` a inizio riga seguito dalla voce elenco. Da usare in modalità markdown -snippet-markdownBold = grassetto - .title = Grassetto Markdown, digita `**` a inizio e alla fine del testo. Da usare in modalità markdown -snippet-markdownItalic = corsivo - .title = Corsivo Markdown, digita `_` a inizio e alla fine del testo. Da usare in modalità markdown -snippet-markdownLink = link - .title = Link Markdown, digita `[` all'inizio e `](url)` alla fine del testo. Da usare in modalità markdown -snippet-markdownMonospace = testo monospaziato - .title = Testo monospaziato Markdown, digita ` a inizio e alla fine del testo. Da usare in modalità markdown -snippet-markdownQuote = citazione - .title = Citazione Markdown, digita `>` a inizio della riga seguito dalla citazione. Da usare in modalità markdown -snippet-markdownTable = tabella - .title = Tabella Markdown, digita `|` per separare righe e colonne. Da usare in modalità markdown snippet-dryRunFlag = esecuzione simulata .title = Verifica che il template sia in modalità simulata, ad esempio come anteprima. In modalità di esecuzione simulata, lo script non apporta modifiche e quindi non dovrebbe avere effetti indesiderati. snippet-itemBeforeLoop = prima del loop @@ -84,20 +101,6 @@ snippet-itemInLoop = nel loop snippet-itemAfterLoop = dopo il loop .title = Contenuto da renderizzare dopo il loop degli elementi .title = Markdown link, type `[` at the beginning and `](url)` at the end of your text. Should be used in markdown mode -snippet-markdownMonospace = monospace text - .title = Markdown monospace text, type ` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownQuote = quote - .title = Markdown quote, type `>` at the beginning of the line followed by your quote. Should be used in markdown mode -snippet-markdownTable = table - .title = Markdown table, type `|` to separate columns and rows. Should be used in markdown mode -snippet-dryRunFlag = dry run flag - .title = Check if the template is running in dry run mode, e.g. for preview. In dry run mode, the script should not have side effects. -snippet-itemBeforeLoop = before loop - .title = Content to be rendered before the loop of items -snippet-itemInLoop = in loop - .title = Content to be rendered for each item in the loop -snippet-itemAfterLoop = after loop - .title = Content to be rendered after the loop of items -variable-type = Type -variable-item = Zotero.Item diff --git a/addon/locale/ru-RU/templateEditor.ftl b/addon/locale/ru-RU/templateEditor.ftl index cb0b0ce..0da0c21 100644 --- a/addon/locale/ru-RU/templateEditor.ftl +++ b/addon/locale/ru-RU/templateEditor.ftl @@ -45,36 +45,53 @@ restore = help = .label = Помощь +format-bold = + .title = Bold +format-italic = + .title = Italic +format-strikethrough = + .title = Strike-through +format-underline = + .title = Underline +format-superscript = + .title = Superscript +format-subscript = + .title = Subscript +format-textColor = + .title = Text color +format-link = + .title = Link +format-quote = + .title = Quote +format-monospaced = + .title = Monospace +format-code = + .title = Code block +format-table = + .title = Table +format-h1 = + .title = Level 1 heading +format-h2 = + .title = Level 2 heading +format-h3 = + .title = Level 3 heading +format-bullet = + .title = Bullet list +format-numbered = + .title = Numbered list +format-inlineMath = + .title = Inline math formula +format-blockMath = + .title = Multi-line math formula +format-inlineScript = + .title = Add an inline JS script, the result of which will be embedded in the note +format-blockScript = + .title = Add a multi-line async JS script, the return value of which will be embedded in the note + snippet-useMarkdown = use markdown .title = Parse the template as markdown snippet-useRefresh = use refresh .title = Allow the content generated by the template to be refreshed -snippet-inlineScript = inline script - .title = Add an inline JS script, the result of which will be embedded in the note -snippet-multiLineScript = multi-line script - .title = Add a multi-line async JS script, the return value of which will be embedded in the note -snippet-markdownHeading1 = heading 1 - .title = Markdown heading 1, type `#` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownHeading2 = heading 2 - .title = Markdown heading 2, type `##` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownHeading3 = heading 3 - .title = Markdown heading 3, type `###` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownBullet = bullet list - .title = Markdown bullet list, type `-` at the beginning of the line followed by your list item. Should be used in markdown mode -snippet-markdownNumber = number list - .title = Markdown number list, type `1.` at the beginning of the line followed by your list item. Should be used in markdown mode -snippet-markdownBold = bold text - .title = Markdown bold text, type `**` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownItalic = italic text - .title = Markdown italic text, type `_` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownLink = link - .title = Markdown link, type `[` at the beginning and `](url)` at the end of your text. Should be used in markdown mode -snippet-markdownMonospace = monospace text - .title = Markdown monospace text, type ` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownQuote = quote - .title = Markdown quote, type `>` at the beginning of the line followed by your quote. Should be used in markdown mode -snippet-markdownTable = table - .title = Markdown table, type `|` to separate columns and rows. Should be used in markdown mode snippet-dryRunFlag = dry run flag .title = Check if the template is running in dry run mode, e.g. for preview. In dry run mode, the script should not have side effects. snippet-itemBeforeLoop = before loop diff --git a/addon/locale/tr-TR/templateEditor.ftl b/addon/locale/tr-TR/templateEditor.ftl index f5a634a..f662eda 100644 --- a/addon/locale/tr-TR/templateEditor.ftl +++ b/addon/locale/tr-TR/templateEditor.ftl @@ -45,36 +45,53 @@ restore = help = .label = Yardım +format-bold = + .title = Bold +format-italic = + .title = Italic +format-strikethrough = + .title = Strike-through +format-underline = + .title = Underline +format-superscript = + .title = Superscript +format-subscript = + .title = Subscript +format-textColor = + .title = Text color +format-link = + .title = Link +format-quote = + .title = Quote +format-monospaced = + .title = Monospace +format-code = + .title = Code block +format-table = + .title = Table +format-h1 = + .title = Level 1 heading +format-h2 = + .title = Level 2 heading +format-h3 = + .title = Level 3 heading +format-bullet = + .title = Bullet list +format-numbered = + .title = Numbered list +format-inlineMath = + .title = Inline math formula +format-blockMath = + .title = Multi-line math formula +format-inlineScript = + .title = Add an inline JS script, the result of which will be embedded in the note +format-blockScript = + .title = Add a multi-line async JS script, the return value of which will be embedded in the note + snippet-useMarkdown = use markdown .title = Parse the template as markdown snippet-useRefresh = use refresh .title = Allow the content generated by the template to be refreshed -snippet-inlineScript = inline script - .title = Add an inline JS script, the result of which will be embedded in the note -snippet-multiLineScript = multi-line script - .title = Add a multi-line async JS script, the return value of which will be embedded in the note -snippet-markdownHeading1 = heading 1 - .title = Markdown heading 1, type `#` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownHeading2 = heading 2 - .title = Markdown heading 2, type `##` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownHeading3 = heading 3 - .title = Markdown heading 3, type `###` at the beginning of the line followed by your heading. Should be used in markdown mode -snippet-markdownBullet = bullet list - .title = Markdown bullet list, type `-` at the beginning of the line followed by your list item. Should be used in markdown mode -snippet-markdownNumber = number list - .title = Markdown number list, type `1.` at the beginning of the line followed by your list item. Should be used in markdown mode -snippet-markdownBold = bold text - .title = Markdown bold text, type `**` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownItalic = italic text - .title = Markdown italic text, type `_` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownLink = link - .title = Markdown link, type `[` at the beginning and `](url)` at the end of your text. Should be used in markdown mode -snippet-markdownMonospace = monospace text - .title = Markdown monospace text, type ` at the beginning and end of your text. Should be used in markdown mode -snippet-markdownQuote = quote - .title = Markdown quote, type `>` at the beginning of the line followed by your quote. Should be used in markdown mode -snippet-markdownTable = table - .title = Markdown table, type `|` to separate columns and rows. Should be used in markdown mode snippet-dryRunFlag = dry run flag .title = Check if the template is running in dry run mode, e.g. for preview. In dry run mode, the script should not have side effects. snippet-itemBeforeLoop = before loop diff --git a/addon/locale/zh-CN/templateEditor.ftl b/addon/locale/zh-CN/templateEditor.ftl index 9b35207..a892dce 100644 --- a/addon/locale/zh-CN/templateEditor.ftl +++ b/addon/locale/zh-CN/templateEditor.ftl @@ -44,36 +44,53 @@ restore = help = .label = 帮助 +format-bold = + .title = 加粗 +format-italic = + .title = 斜体 +format-strikethrough = + .title = 删除线 +format-underline = + .title = 下划线 +format-superscript = + .title = 上标 +format-subscript = + .title = 下标 +format-textColor = + .title = 文本颜色 +format-link = + .title = 添加链接 +format-quote = + .title = 引用文本 +format-monospaced = + .title = 单行 +format-code = + .title = 多行代码 +format-table = + .title = 添加表格 +format-h1 = + .title = 一级标题 +format-h2 = + .title = 二级标题 +format-h3 = + .title = 三级标题 +format-bullet = + .title = 无序列表 +format-numbered = + .title = 有序列表 +format-inlineMath = + .title = 行内数学公式 +format-blockMath = + .title = 多行数学公式 +format-inlineScript = + .title = 添加行内JS脚本,结果将嵌入到笔记中 +format-blockScript = + .title = 添加多行异步JS脚本,返回值将嵌入到笔记中 + snippet-useMarkdown = 使用 markdown .title = 将模板解析为 markdown snippet-useRefresh = 允许内容刷新 .title = 允许模板生成的内容刷新 -snippet-inlineScript = 内联脚本 - .title = 添加一个内联 JS 脚本,其结果将嵌入到笔记中 -snippet-multiLineScript = 多行脚本 - .title = 添加一个多行异步 JS 脚本,其返回值将嵌入到笔记中 -snippet-markdownHeading1 = 一级标题 - .title = Markdown 一级标题,在行首输入 `#` 后跟你的标题。应在 Markdown 模式下使用 -snippet-markdownHeading2 = 二级标题 - .title = Markdown 二级标题,在行首输入 `##` 后跟你的标题。应在 Markdown 模式下使用 -snippet-markdownHeading3 = 三级标题 - .title = Markdown 三级标题,在行首输入 `###` 后跟你的标题。应在 Markdown 模式下使用 -snippet-markdownBullet = 无序列表 - .title = Markdown 无序列表,在行首输入 `-` 后跟你的列表项。应在 Markdown 模式下使用 -snippet-markdownNumber = 有序列表 - .title = Markdown 有序列表,在行首输入 `1.` 后跟你的列表项。应在 Markdown 模式下使用 -snippet-markdownBold = 加粗文本 - .title = Markdown 加粗文本,在文本的开头和结尾输入 `**`。应在 Markdown 模式下使用 -snippet-markdownItalic = 斜体文本 - .title = Markdown 斜体文本,在文本的开头和结尾输入 `_`。应在 Markdown 模式下使用 -snippet-markdownLink = 链接 - .title = Markdown 链接,在文本的开头输入 `[`,在结尾输入 `](url)`。应在 Markdown 模式下使用 -snippet-markdownMonospace = 单行 - .title = Markdown 单行,在文本的开头和结尾输入 `。应在 Markdown 模式下使用 -snippet-markdownQuote = 引用 - .title = Markdown 引用,在行首输入 `>` 后跟你的引用内容。应在 Markdown 模式下使用 -snippet-markdownTable = 表格 - .title = Markdown 表格,使用 `|` 分隔列和行。应在 Markdown 模式下使用 snippet-dryRunFlag = dry run标志 .title = 检查模板是否在dry run模式下运行,例如用于预览。在dry run模式下,脚本不应有副作用。 snippet-itemBeforeLoop = 循环前 diff --git a/src/modules/template/api.ts b/src/modules/template/api.ts index 4651572..04eb5cf 100644 --- a/src/modules/template/api.ts +++ b/src/modules/template/api.ts @@ -90,11 +90,20 @@ async function runTemplate( }, ); + // Match the backticks not inside a `${}` and replace them with a placeholder + // Not inside a `${}` + templateText = templateText.replace(/`(?![^${]*\})(? { + const { editor, monaco } = addon.data.template.editor; + const selection = editor.getSelection(); + const range = new monaco.Range( + selection.startLineNumber, + selection.startColumn, + selection.endLineNumber, + selection.endColumn, + ); + const textTemplate = format.code; + const source = + editor.getModel().getValueInRange(range) || + format.defaultText || + "text"; + const text = textTemplate.replace("${text}", source); + editor.executeEdits("", [ + { + range, + text, + forceMoveMarkers: true, + }, + ]); + // Keep the selection after inserting the format + const textBeforeReplace = textTemplate.split("${text}")[0]; + const textBeforeLines = textBeforeReplace.split("\n"); + const textLines = source.split("\n"); + + // Calculate the new range + const startLineNumber = + selection.startLineNumber + textBeforeLines.length - 1; + const startColumn = + textBeforeLines.length === 1 + ? selection.startColumn + textBeforeReplace.length + : textBeforeLines.slice(-1)[0].length + 1; + const endLineNumber = startLineNumber + textLines.length - 1; + const endColumn = + textLines.length === 1 + ? startColumn + source.length + : textLines.slice(-1)[0].length + 1; + + const newRange = new monaco.Range( + startLineNumber, + startColumn, + endLineNumber, + endColumn, + ); + + editor.setSelection(newRange); + + // If editor does not contain a line start with // @use-markdown, insert it + if ( + !editor + .getModel() + .getLinesContent() + .some((line: any) => line.startsWith("// @use-markdown")) + ) { + editor.executeEdits("", [ + { + range: new monaco.Range(1, 1, 1, 1), + text: "// @use-markdown\n", + forceMoveMarkers: true, + }, + ]); + } + }); + container.appendChild(button); + } +} + async function updateSnippets(type: string) { const container = addon.data.template.editor.window?.document.querySelector( "#snippets-container", @@ -336,9 +427,9 @@ async function updateSnippets(type: string) { } container.innerHTML = ""; - const snippets = snippetsStore[type as keyof typeof snippetsStore].concat( - snippetsStore.global, - ); + const snippets = ( + snippetsStore[type as keyof typeof snippetsStore] || [] + ).concat(snippetsStore.global); if (!snippets) { return; } @@ -596,6 +687,94 @@ async function restoreTemplates(win: Window) { await refresh(); } +const formatStore = [ + { + name: "bold", + code: "**${text}**", + }, + { + name: "italic", + code: "_${text}_", + }, + { + name: "strikethrough", + code: "~~${text}~~", + }, + { + name: "underline", + code: "${text}", + }, + { + name: "superscript", + code: "${text}", + }, + { name: "subscript", code: "${text}" }, + { + name: "textColor", + code: '${text}', + }, + { + name: "link", + code: "[${text}](url)", + }, + { + name: "quote", + code: "\n> ${text}", + }, + { + name: "monospaced", + code: "`${text}`", + }, + { + name: "code", + code: "\n```\n${text}\n```\n", + }, + { + name: "table", + code: "\n| ${text} | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |\n", + }, + { + name: "h1", + code: "\n# ${text}", + }, + { + name: "h2", + code: "\n## ${text}", + }, + { + name: "h3", + code: "\n### ${text}", + }, + { + name: "bullet", + code: "\n- ${text}", + }, + { + name: "numbered", + code: "\n1. ${text}", + }, + { + name: "inlineMath", + code: "$${text}$", + defaultText: "e=mc^2", + }, + { + name: "blockMath", + code: "\n$$\n${text}\n$$\n", + defaultText: "e=mc^2", + }, + { + name: "inlineScript", + code: "${ ${text} }", + defaultText: "Zotero.version", + }, + { + name: "blockScript", + code: "\n${{\n ${text}\n}}$\n", + defaultText: "return Zotero.version;", + }, +]; + const snippetsStore = { global: [ { @@ -608,77 +787,6 @@ const snippetsStore = { code: "\n// @use-refresh\n", type: "syntax", }, - { - name: "inlineScript", - code: "${ // write your script here }", - type: "syntax", - }, - { - name: "multiLineScript", - code: "\n${{\n // write your script here\n}}$\n", - type: "syntax", - }, - { - name: "markdownHeading1", - code: "\n# type your heading here", - type: "syntax", - }, - { - name: "markdownHeading2", - code: "\n## type your heading here", - type: "syntax", - }, - { - name: "markdownHeading3", - code: "\n### type your heading here", - type: "syntax", - }, - { - name: "markdownBullet", - code: "\n\n- type your bullet list here", - type: "syntax", - }, - { - name: "markdownNumber", - code: "\n\n1. type your number list here", - type: "syntax", - }, - { - name: "markdownBold", - code: "**type your bold text here**", - type: "syntax", - }, - { - name: "markdownItalic", - code: "_type your italic text here_", - type: "syntax", - }, - { - name: "markdownLink", - code: "[type your link text here](type your link url here)", - type: "syntax", - }, - { - name: "markdownMonospace", - code: "\n\n`type your text here`", - type: "syntax", - }, - { - name: "markdownQuote", - code: "\n\n> type your quote here", - type: "syntax", - }, - { - name: "markdownTable", - code: ` - -| Header 1 | Header 2 | -|----------|----------| -| Cell 1 | Cell 2 | - -`, - type: "syntax", - }, { name: "dryRunFlag", code: "_env.dryRun", diff --git a/src/modules/template/preview.ts b/src/modules/template/preview.ts index f4ea765..bdb6d73 100644 --- a/src/modules/template/preview.ts +++ b/src/modules/template/preview.ts @@ -1,5 +1,6 @@ import YAML = require("yamljs"); import { getNoteLink } from "../../utils/link"; +import { renderNoteHTML } from "../../utils/note"; export { renderTemplatePreview }; @@ -142,6 +143,9 @@ async function renderTemplatePreview( html = generateWarning(`Error: ${err.message || "Unknown error"}`); } + // TODO: might not be stable? + html = await renderNoteHTML(html, []); + return html; }