update: monaco template editor

This commit is contained in:
windingwind 2023-08-09 23:17:37 +08:00
parent 1413fa01b2
commit c9a3ed0e06
4 changed files with 48 additions and 40 deletions

View File

@ -122,10 +122,12 @@
<input id="editor-name" type="text" style="width: 100%" />
</div>
<div style="display: flex; flex-direction: column; height: 100%">
<textarea
id="editor-textbox"
style="height: 100%; resize: none"
></textarea>
<iframe
id="editor"
src="chrome://scaffold/content/monaco/monaco.html"
style="width: 100%; height: 100%; border: none"
onmousedown="this.focus()"
></iframe>
</div>
</div>
<div class="viewport preview-viewport">
@ -153,7 +155,10 @@
wantdropmarker="true"
>
<menupopup>
<menuitem id="importClipboard" data-l10n-id="importClipboard"></menuitem>
<menuitem
id="importClipboard"
data-l10n-id="importClipboard"
></menuitem>
<menuitem id="importNote" data-l10n-id="importNote"></menuitem>
<menuseparator />
<menuitem id="share" data-l10n-id="share"></menuitem>

View File

@ -50,7 +50,7 @@
"hast-util-to-text": "^3.1.2",
"hastscript": "^7.2.0",
"html-docx-js-typescript": "^0.1.5",
"katex": "^0.16.7",
"katex": "^0.16.8",
"rehype-format": "^4.0.1",
"rehype-parse": "^8.0.4",
"rehype-remark": "^9.1.2",
@ -66,32 +66,32 @@
"unist-util-visit": "^5.0.0",
"unist-util-visit-parents": "^6.0.1",
"yamljs": "^0.3.0",
"zotero-plugin-toolkit": "^2.1.7"
"zotero-plugin-toolkit": "^2.2.4"
},
"devDependencies": {
"@prettier/plugin-xml": "^3.1.1",
"@prettier/plugin-xml": "^3.2.0",
"@types/browser-or-node": "^1.3.0",
"@types/diff": "^5.0.3",
"@types/node": "^20.4.2",
"@types/node": "^20.4.9",
"@types/seedrandom": "^3.0.5",
"@types/yamljs": "^0.2.31",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^6.3.0",
"@typescript-eslint/parser": "^6.3.0",
"chokidar-cli": "^3.0.0",
"compressing": "^1.9.0",
"compressing": "^1.9.1",
"concurrently": "^8.2.0",
"cross-env": "^7.0.3",
"esbuild": "^0.18.1",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"prettier": "^3.0.0",
"prosemirror-model": "^1.19.2",
"esbuild": "^0.18.20",
"eslint": "^8.46.0",
"eslint-config-prettier": "^8.10.0",
"prettier": "^3.0.1",
"prosemirror-model": "^1.19.3",
"prosemirror-state": "^1.4.3",
"prosemirror-transform": "^1.7.3",
"prosemirror-view": "^1.31.4",
"release-it": "^16.1.3",
"prosemirror-transform": "^1.7.4",
"prosemirror-view": "^1.31.7",
"release-it": "^16.1.4",
"replace-in-file": "^7.0.1",
"typescript": "^5.1.3",
"zotero-types": "^1.0.15"
"typescript": "^5.1.6",
"zotero-types": "^1.2.1"
}
}

View File

@ -89,6 +89,7 @@ class Addon {
templateEditor: {
window?: Window;
tableHelper?: VirtualizedTableHelper;
editor?: any;
templates: { name: string }[];
};
templatePicker: {

View File

@ -3,6 +3,7 @@ import { config } from "../../../package.json";
import { showHint } from "../../utils/hint";
import { itemPicker } from "../../utils/itemPicker";
import { getString } from "../../utils/locale";
import { waitUtilAsync } from "../../utils/wait";
export async function showTemplateEditor() {
if (
@ -13,7 +14,6 @@ export async function showTemplateEditor() {
const windowArgs = {
_initPromise: Zotero.Promise.defer(),
};
// @ts-ignore
const _window = window.openDialog(
`chrome://${config.addonRef}/content/templateEditor.xhtml`,
`${config.addonRef}-templateEditor`,
@ -128,8 +128,16 @@ export async function showTemplateEditor() {
?.addEventListener("click", (ev) => {
restoreTemplates(_window);
});
addon.data.templateEditor.window?.focus();
const editorWin = (_window.document.querySelector("#editor") as any)
.contentWindow;
await waitUtilAsync(() => editorWin?.loadMonaco);
const { monaco, editor } = await editorWin.loadMonaco({
language: "javascript",
theme: "vs-light",
});
addon.data.templateEditor.editor = editor;
}
addon.data.templateEditor.window?.focus();
}
async function refresh() {
@ -154,9 +162,9 @@ function updateEditor() {
const header = addon.data.templateEditor.window?.document.getElementById(
"editor-name",
) as HTMLInputElement;
const text = addon.data.templateEditor.window?.document.getElementById(
"editor-textbox",
) as HTMLTextAreaElement;
const editor = addon.data.templateEditor.window?.document.getElementById(
"editor",
) as HTMLIFrameElement;
const saveTemplate =
addon.data.templateEditor.window?.document.getElementById(
"save",
@ -172,8 +180,7 @@ function updateEditor() {
if (!name) {
header.value = "";
header.setAttribute("disabled", "true");
text.value = "";
text.setAttribute("disabled", "true");
editor.hidden = true;
saveTemplate.setAttribute("disabled", "true");
deleteTemplate.setAttribute("disabled", "true");
deleteTemplate.hidden = false;
@ -190,8 +197,8 @@ function updateEditor() {
deleteTemplate.hidden = true;
resetTemplate.hidden = false;
}
text.value = templateText;
text.removeAttribute("disabled");
addon.data.templateEditor.editor.setValue(templateText);
editor.hidden = false;
saveTemplate.removeAttribute("disabled");
deleteTemplate.removeAttribute("disabled");
}
@ -258,9 +265,6 @@ function saveSelectedTemplate() {
const header = addon.data.templateEditor.window?.document.getElementById(
"editor-name",
) as HTMLInputElement;
const text = addon.data.templateEditor.window?.document.getElementById(
"editor-textbox",
) as HTMLTextAreaElement;
if (
addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name) &&
@ -274,7 +278,7 @@ function saveSelectedTemplate() {
const template = {
name: header.value,
text: text.value,
text: addon.data.templateEditor.editor.getValue(),
};
addon.api.template.setTemplate(template);
if (name !== template.name) {
@ -303,12 +307,10 @@ function deleteSelectedTemplate() {
function resetSelectedTemplate() {
const name = getSelectedTemplateName();
if (addon.api.template.SYSTEM_TEMPLATE_NAMES.includes(name)) {
const text = addon.data.templateEditor.window?.document.getElementById(
"editor-textbox",
) as HTMLTextAreaElement;
text.value =
addon.data.templateEditor.editor.setValue(
addon.api.template.DEFAULT_TEMPLATES.find((t) => t.name === name)?.text ||
"";
"",
);
showHint(`Template ${name} is reset. Please save before leaving.`);
}
}