" URL (405).
function isZipMemberNode(node) {
if (node.handle && node.handle.isZipEntry) return true;
if (node.url && window.app.state.source === 'server' && /\.zip\//i.test(node.url)) return true;
return false;
}
function canSave(node) {
if (isZipMemberNode(node)) return false;
if (node.handle && typeof node.handle.createWritable === 'function') return true;
if (node.url && window.app.state.source === 'server') return true;
return false;
}
// ── Mount ───────────────────────────────────────────────────────────────
async function render(node, container, ctx) {
if (typeof window.toastui === 'undefined') {
container.innerHTML =
''
+ 'Toast UI Editor isn\'t bundled in this build.
';
return;
}
dispose();
// Read content.
var text;
try {
var buf = await ctx.getArrayBuffer(node);
text = new TextDecoder('utf-8', { fatal: false }).decode(buf);
} catch (e) {
container.innerHTML =
''
+ 'Could not read ' + escapeHtml(node.name) + ': '
+ escapeHtml(e.message || String(e)) + '
';
return;
}
// Wipe the container and install a single shell child. The
// shell mirrors mdedit's layout: sidebar on the LEFT (front
// matter top, TOC bottom), content on the RIGHT (informational
// header above the Toast UI editor). CSS Grid keeps every
// cell sized definitely so Toast UI's scroll regions resolve
// correctly.
container.innerHTML = '';
var shell = document.createElement('div');
shell.className = 'md-shell';
shell.style.gridTemplateColumns = lastSidebarWidth + 'px 1fr';
container.appendChild(shell);
// ── Sidebar (col 1): front matter (top) + TOC (bottom) ──────────────
var sidebar = document.createElement('div');
sidebar.className = 'md-shell__sidebar';
sidebar.style.gridTemplateRows = lastFmHeight + 'px 1fr';
shell.appendChild(sidebar);
var fmSection = document.createElement('section');
fmSection.className = 'md-side md-side--fm';
var fmHeader = document.createElement('div');
fmHeader.className = 'md-side__header';
fmHeader.textContent = 'YAML front matter';
var fmBody = document.createElement('div');
fmBody.className = 'md-side__body md-fm__body';
fmSection.appendChild(fmHeader);
fmSection.appendChild(fmBody);
sidebar.appendChild(fmSection);
// Horizontal resizer between front-matter and TOC.
var fmResizer = document.createElement('div');
fmResizer.className = 'md-shell__fmresizer';
fmResizer.setAttribute('role', 'separator');
fmResizer.setAttribute('aria-orientation', 'horizontal');
fmResizer.setAttribute('aria-label', 'Resize front-matter pane');
fmResizer.tabIndex = 0;
sidebar.appendChild(fmResizer);
var tocSection = document.createElement('section');
tocSection.className = 'md-side md-side--toc';
var tocHeader = document.createElement('div');
tocHeader.className = 'md-side__header';
tocHeader.textContent = 'Outline';
var tocBody = document.createElement('div');
tocBody.className = 'md-side__body md-toc__body';
tocSection.appendChild(tocHeader);
tocSection.appendChild(tocBody);
sidebar.appendChild(tocSection);
// Vertical resizer between sidebar and content.
var resizer = document.createElement('div');
resizer.className = 'md-shell__resizer';
resizer.setAttribute('role', 'separator');
resizer.setAttribute('aria-orientation', 'vertical');
resizer.setAttribute('aria-label', 'Resize sidebar');
resizer.tabIndex = 0;
shell.appendChild(resizer);
// ── Content (col 2): informational header + editor ──────────────────
var content = document.createElement('div');
content.className = 'md-shell__content';
shell.appendChild(content);
// Informational header above the editor: file name + save +
// dirty indicator + status + source hint. Renamed from
// "toolbar" to read as a header, since it titles the content.
var infohdr = document.createElement('div');
infohdr.className = 'md-shell__infohdr';
var titleEl = document.createElement('span');
titleEl.className = 'md-shell__title';
titleEl.textContent = node.name;
titleEl.title = node.name;
var saveBtn = document.createElement('button');
saveBtn.className = 'btn btn-sm btn-primary md-shell__save';
saveBtn.type = 'button';
saveBtn.textContent = 'Save';
saveBtn.disabled = true;
var dirtyEl = document.createElement('span');
dirtyEl.className = 'md-shell__dirty';
var statusEl = document.createElement('span');
statusEl.className = 'md-shell__status';
var sourceEl = document.createElement('span');
sourceEl.className = 'md-shell__source';
if (isZipMemberNode(node)) {
sourceEl.textContent = 'read-only (zip)';
} else if (node.handle) {
sourceEl.textContent = 'local';
} else if (node.url) {
sourceEl.textContent = 'server';
}
infohdr.appendChild(titleEl);
infohdr.appendChild(dirtyEl);
infohdr.appendChild(statusEl);
infohdr.appendChild(sourceEl);
infohdr.appendChild(saveBtn);
content.appendChild(infohdr);
// Editor host.
var editorHost = document.createElement('div');
editorHost.className = 'md-shell__editor';
content.appendChild(editorHost);
// Construct the editor. height: 100% works because editorHost
// is a grid cell with a definite size.
var initialHash = await hashContent(text);
var editor = new window.toastui.Editor({
el: editorHost,
height: '100%',
initialEditType: 'markdown',
previewStyle: 'vertical',
initialValue: text,
usageStatistics: false,
toolbarItems: [
['heading', 'bold', 'italic', 'strike'],
['hr', 'quote'],
['ul', 'ol', 'task', 'indent', 'outdent'],
['table', 'image', 'link'],
['code', 'codeblock']
]
});
currentInstance = {
editor: editor,
container: container,
dirty: false,
node: node,
hash: initialHash,
tocEl: tocBody,
fmEl: fmBody
};
var writable = canSave(node);
if (!writable) {
saveBtn.disabled = true;
saveBtn.title = 'Save not available — read-only source.';
}
renderToc(tocBody, text, editor);
renderFrontMatter(fmBody, text);
// ── Sidebar/content resizer ─────────────────────────────────────────
// Sidebar is on the LEFT now. Dragging right grows the
// sidebar; left shrinks it.
(function () {
var dragging = false;
var startX = 0;
var startW = 0;
function onMove(e) {
if (!dragging) return;
var dx = e.clientX - startX;
var w = startW + dx;
w = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, w));
lastSidebarWidth = w;
shell.style.gridTemplateColumns = w + 'px 1fr';
e.preventDefault();
}
function onUp() {
dragging = false;
resizer.classList.remove('is-dragging');
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
}
resizer.addEventListener('mousedown', function (e) {
dragging = true;
resizer.classList.add('is-dragging');
startX = e.clientX;
startW = sidebar.getBoundingClientRect().width;
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
e.preventDefault();
});
resizer.addEventListener('keydown', function (e) {
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
e.preventDefault();
var step = e.key === 'ArrowLeft' ? -24 : 24;
var w = Math.max(SIDEBAR_MIN_WIDTH,
Math.min(SIDEBAR_MAX_WIDTH, lastSidebarWidth + step));
lastSidebarWidth = w;
shell.style.gridTemplateColumns = w + 'px 1fr';
});
})();
// ── Front-matter / TOC vertical resizer ─────────────────────────────
(function () {
var FM_MIN = 60;
var dragging = false;
var startY = 0;
var startH = 0;
function maxFmHeight() {
var sidebarRect = sidebar.getBoundingClientRect();
// Leave at least 120 px for the TOC body + headers.
return Math.max(FM_MIN, sidebarRect.height - 160);
}
function onMove(e) {
if (!dragging) return;
var dy = e.clientY - startY;
var h = Math.max(FM_MIN, Math.min(maxFmHeight(), startH + dy));
lastFmHeight = h;
sidebar.style.gridTemplateRows = h + 'px 1fr';
e.preventDefault();
}
function onUp() {
dragging = false;
fmResizer.classList.remove('is-dragging');
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
}
fmResizer.addEventListener('mousedown', function (e) {
dragging = true;
fmResizer.classList.add('is-dragging');
startY = e.clientY;
startH = fmSection.getBoundingClientRect().height;
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
e.preventDefault();
});
fmResizer.addEventListener('keydown', function (e) {
if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
e.preventDefault();
var step = e.key === 'ArrowUp' ? -24 : 24;
var h = Math.max(FM_MIN, Math.min(maxFmHeight(), lastFmHeight + step));
lastFmHeight = h;
sidebar.style.gridTemplateRows = h + 'px 1fr';
});
})();
// ── Change tracking + auto-rerender ────────────────────────────────
function markDirty(isDirty) {
currentInstance.dirty = isDirty;
saveBtn.disabled = !isDirty || !writable;
dirtyEl.textContent = isDirty ? '● modified' : '';
}
var onChange = debounce(async function () {
var current = editor.getMarkdown();
var h = await hashContent(current);
markDirty(h !== currentInstance.hash);
renderToc(tocBody, current, editor);
renderFrontMatter(fmBody, current);
}, 250);
editor.on('change', onChange);
// ── Save ───────────────────────────────────────────────────────────
async function save() {
if (!currentInstance.dirty || !writable) return;
var content = editor.getMarkdown();
try {
statusEl.textContent = 'Saving…';
await saveContent(node, content);
currentInstance.hash = await hashContent(content);
markDirty(false);
statusEl.textContent = 'Saved ' + new Date().toLocaleTimeString();
if (window.zddc && window.zddc.toast) {
window.zddc.toast('Saved ' + node.name, 'success');
}
} catch (e) {
statusEl.textContent = 'Save failed: ' + (e.message || e);
if (window.zddc && window.zddc.toast) {
window.zddc.toast('Save failed: ' + (e.message || e), 'error');
}
}
}
saveBtn.addEventListener('click', save);
container.addEventListener('keydown', function (e) {
if ((e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')) {
e.preventDefault();
save();
}
});
}
window.app.modules.markdown = {
render: render,
dispose: dispose
};
})();