import {getAllModels} from "../layout/getAll"; import {setInlineStyle} from "../util/assets"; import {fetchPost} from "../util/fetch"; import {confirmDialog} from "../dialog/confirmDialog"; import {setPadding} from "../protyle/ui/initUI"; import {reloadProtyle} from "../protyle/util/reload"; import {disabledProtyle, enableProtyle} from "../protyle/util/onGet"; import {updateHotkeyTip} from "../protyle/util/compatibility"; export const editor = { element: undefined as Element, setMode: (readOnly?: boolean) => { const target = document.querySelector("#barReadonly"); if (typeof readOnly === "undefined") { readOnly = target.getAttribute("aria-label") === `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly}`; } window.siyuan.config.editor.readOnly = readOnly; if (readOnly) { target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editMode}`); target.querySelector("use").setAttribute("xlink:href", "#iconPreview"); } else { target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly}`); target.querySelector("use").setAttribute("xlink:href", "#iconEdit"); } fetchPost("/api/setting/setEditor", window.siyuan.config.editor, () => { const allModels = getAllModels(); allModels.editor.forEach(editor => { if (readOnly) { disabledProtyle(editor.editor.protyle); } else { enableProtyle(editor.editor.protyle); } }); allModels.backlink.forEach(backlink => { backlink.editors.forEach(editor => { if (readOnly) { disabledProtyle(editor.protyle); } else { enableProtyle(editor.protyle); } }); }); allModels.search.forEach(search => { if (readOnly) { disabledProtyle(search.protyle.protyle); } else { enableProtyle(search.protyle.protyle); } }); window.siyuan.blockPanels.forEach(item => { item.editors.forEach(editor => { if (readOnly) { disabledProtyle(editor.protyle); } else { enableProtyle(editor.protyle); } }); }); }); }, genHTML: () => { let fontFamilyHTML = ""; fontFamilyHTML = ''; return ` `; }, bindEvent: () => { const fontFamilyElement = editor.element.querySelector("#fontFamily") as HTMLSelectElement; if (fontFamilyElement.tagName === "SELECT") { let fontFamilyHTML = ``; fetchPost("/api/system/getSysFonts", {}, (response) => { response.data.forEach((item: string) => { fontFamilyHTML += ``; }); fontFamilyElement.innerHTML = fontFamilyHTML; }); } editor.element.querySelector("#clearHistory").addEventListener("click", () => { confirmDialog(window.siyuan.languages.clearHistory, window.siyuan.languages.confirmClearHistory, () => { fetchPost("/api/history/clearWorkspaceHistory", {}); }); }); const setEditor = () => { let dynamicLoadBlocks = parseInt((editor.element.querySelector("#dynamicLoadBlocks") as HTMLInputElement).value); if (48 > dynamicLoadBlocks) { dynamicLoadBlocks = 48; (editor.element.querySelector("#dynamicLoadBlocks") as HTMLInputElement).value = "48"; } if (1024 < dynamicLoadBlocks) { dynamicLoadBlocks = 1024; (editor.element.querySelector("#dynamicLoadBlocks") as HTMLInputElement).value = "1024"; } fetchPost("/api/setting/setEditor", { fullWidth: (editor.element.querySelector("#fullWidth") as HTMLInputElement).checked, justify: (editor.element.querySelector("#justify") as HTMLInputElement).checked, rtl: (editor.element.querySelector("#rtl") as HTMLInputElement).checked, readOnly: (editor.element.querySelector("#readOnly") as HTMLInputElement).checked, displayBookmarkIcon: (editor.element.querySelector("#displayBookmarkIcon") as HTMLInputElement).checked, displayNetImgMark: (editor.element.querySelector("#displayNetImgMark") as HTMLInputElement).checked, codeSyntaxHighlightLineNum: (editor.element.querySelector("#codeSyntaxHighlightLineNum") as HTMLInputElement).checked, embedBlockBreadcrumb: (editor.element.querySelector("#embedBlockBreadcrumb") as HTMLInputElement).checked, listLogicalOutdent: (editor.element.querySelector("#listLogicalOutdent") as HTMLInputElement).checked, floatWindowMode: (editor.element.querySelector("#floatWindowMode") as HTMLInputElement).checked ? 0 : 1, plantUMLServePath: (editor.element.querySelector("#plantUMLServePath") as HTMLInputElement).value, katexMacros: (editor.element.querySelector("#katexMacros") as HTMLTextAreaElement).value, codeLineWrap: (editor.element.querySelector("#codeLineWrap") as HTMLInputElement).checked, virtualBlockRef: (editor.element.querySelector("#virtualBlockRef") as HTMLInputElement).checked, virtualBlockRefInclude: (editor.element.querySelector("#virtualBlockRefInclude") as HTMLInputElement).value, virtualBlockRefExclude: (editor.element.querySelector("#virtualBlockRefExclude") as HTMLInputElement).value, blockRefDynamicAnchorTextMaxLen: parseInt((editor.element.querySelector("#blockRefDynamicAnchorTextMaxLen") as HTMLInputElement).value), dynamicLoadBlocks: dynamicLoadBlocks, codeLigatures: (editor.element.querySelector("#codeLigatures") as HTMLInputElement).checked, codeTabSpaces: parseInt((editor.element.querySelector("#codeTabSpaces") as HTMLInputElement).value), fontSize: parseInt((editor.element.querySelector("#fontSize") as HTMLInputElement).value), generateHistoryInterval: parseInt((editor.element.querySelector("#generateHistoryInterval") as HTMLInputElement).value), historyRetentionDays: parseInt((editor.element.querySelector("#historyRetentionDays") as HTMLInputElement).value), fontFamily: fontFamilyElement.value, emoji: window.siyuan.config.editor.emoji }, response => { editor.onSetEditor(response.data); }); }; editor.element.querySelectorAll("input.b3-switch, select.b3-select, input.b3-slider").forEach((item) => { item.addEventListener("change", () => { setEditor(); }); }); editor.element.querySelectorAll("textarea.b3-text-field, input.b3-text-field, input.b3-slider").forEach((item) => { item.addEventListener("blur", () => { setEditor(); }); }); editor.element.querySelectorAll("input.b3-slider").forEach((item) => { item.addEventListener("input", (event) => { const target = event.target as HTMLInputElement; target.parentElement.setAttribute("aria-label", target.value); }); }); }, onSetEditor: (editorData: IEditor) => { if (editorData.readOnly !== window.siyuan.config.editor.readOnly) { editor.setMode(editorData.readOnly); } window.siyuan.config.editor = editorData; getAllModels().editor.forEach((item) => { reloadProtyle(item.editor.protyle); setPadding(item.editor.protyle); if (window.siyuan.config.editor.fullWidth) { item.editor.protyle.contentElement.setAttribute("data-fullwidth", "true"); } else { item.editor.protyle.contentElement.removeAttribute("data-fullwidth"); } }); setInlineStyle(); } };