(function(){ const editorId = '--markdown-editor'; const resetFileMessage = 'Reset File to Latest from Git'; const gitPushMessage = 'Commit and Push changes to Git'; // TODO configure this and access token via HTML form const G = { instance: 'https://gitlab.com', repo: 'octtspacc/sitoctt', branch: 'sitoctt-next', }; const editorData = { currentFilePath: `content/${document.documentElement.lang}/${document.documentElement.dataset.sourceFilePath}`, }; let editorHandler; const gitReadFile = async (filePath) => (await (await fetch(`${G.instance}/api/v4/projects/${encodeURIComponent(G.repo)}/repository/files/${encodeURIComponent(filePath)}/raw?ref=${G.branch}`)).text()); const gitPushFile = (filePath, fileContent) => null; // TODO const readPageFile = async (filePath) => { // TODO read cached file in localStorage, but not when a newer one is on git //if (!filePath) { // return ''; //} return await gitReadFile(filePath); }; const cachePageFile = async (filePath, fileContent) => null; // TODO write to localStorage, trigger on any text input const displayCurrentFile = () => document.querySelector('#--editor-buttons').querySelector('span').innerHTML = `(${editorData.currentFilePath})`; editorData.close = () => { const editorEl = document.querySelector(`#${editorId}`); editorEl.hidden = true; editorEl.style.display = 'none'; document.body.style.overflow = null; }; editorData.setup = async (/*filePath*/) => { if (editorHandler) { return; } document.head.appendChild(Object.assign(document.createElement('style'), { innerHTML: ` #${editorId} { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 9; background-color: rgba(255, 255, 255, 0.5); } #${editorId} .toastui-editor-defaultUI { width: 95%; height: 95%; top: 2.5%; bottom: 2.5%; left: 2.5%; right: 2.5%; background-color: ghostwhite; } #${editorId} .toastui-editor-main-container, #${editorId} .ProseMirror { height: 100%; font-size: 16px; } /* quick fix for showing all buttons on mobile */ #${editorId} .toastui-editor-dropdown-toolbar { display: table; } #${editorId} .toastui-editor-toolbar-divider { display: none; } ` })); document.head.appendChild(Object.assign(document.createElement('link'), { rel: "stylesheet", href: "/lib/toastui-editor.min.css", })); document.body.appendChild(Object.assign(document.createElement('div'), { id: editorId, hidden: true, style: "display: none;", })); await SpaccDotWeb.requireScript('/lib/toastui-editor-all.min.js'); editorHandler = new toastui.Editor({ el: document.querySelector(`#${editorId}`), height: '100%', previewStyle: 'tab', hideModeSwitch: true, usageStatistics: false, initialValue: (await readPageFile(editorData.currentFilePath)), }); editorHandler.addCommand('markdown', 'closeEditor', editorData.close); editorHandler.addCommand('markdown', 'resetFile', (() => { // TODO re-pull page source from git if (confirm(`${resetFileMessage}?`)) { gitReadFile(editorData.currentFilePath); } })); editorHandler.addCommand('markdown', 'gitPush', (() => { if (confirm(`${gitPushMessage}?`)) { gitPushFile(editorData.currentFilePath); } })); editorHandler.insertToolbarItem({ groupIndex: 6 }, { tooltip: gitPushMessage, command: 'gitPush', text: '@', className: 'toastui-editor-toolbar-icons', style: { backgroundImage: 'none' }, }); /* editorHandler.insertToolbarItem({ groupIndex: 6 }, { // TODO tooltip: resetFileMessage, command: 'resetFile', text: '#', className: 'toastui-editor-toolbar-icons', style: { backgroundImage: 'none' }, }); */ editorHandler.insertToolbarItem({ groupIndex: 6 }, { tooltip: "Close the Editor", command: 'closeEditor', text: 'X', className: 'toastui-editor-toolbar-icons', style: { backgroundImage: 'none' }, }); editorData.setupButtons(); editorData.setup = Void; }; editorData.setupButtons = () => { const buttonsEl = document.querySelector('#--editor-buttons'); displayCurrentFile(); buttonsEl.querySelector('[name="this"]').onclick = editorData.open; buttonsEl.querySelector('[name="custom"]').onclick = (async () => { const filePath = prompt(`Path of custom File?`); if (filePath) { await editorData.setup(/*filePath*/); const fileContent = await readPageFile(editorData.currentFilePath = filePath); displayCurrentFile(); editorHandler.setMarkdown(fileContent); await editorData.open(); } }); buttonsEl.style.display = null; delete editorData.setupButtons; }; editorData.open = async () => { await editorData.setup(/*filePath*/); const editorEl = document.querySelector(`#${editorId}`); editorEl.style.display = 'block'; editorEl.hidden = false; document.body.style.overflow = 'hidden'; }; window.sitoctt.markdownEditor = editorData; if (false) { // TODO show edit page button and presetup editor if localStorage contains token window.addEventListener('load', editorData.setup); } })();