add local TailwindCSS, fix side bar folder view, add more function to Markdown editor and allow .markdown files
This commit is contained in:
nahakubuilde
@@ -43,28 +43,63 @@
|
||||
|
||||
<!-- Editor Toolbar -->
|
||||
<div class="flex items-center justify-between border-t border-gray-700 pt-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex items-center flex-wrap gap-2">
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('**', '**')" title="Bold">
|
||||
<i class="fas fa-bold"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('*', '*')" title="Italic">
|
||||
<i class="fas fa-italic"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('`', '`')" title="Code">
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('~~', '~~')" title="Strikethrough">
|
||||
<i class="fas fa-strikethrough"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('`', '`')" title="Inline code">
|
||||
<i class="fas fa-code"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertCodeBlock()" title="Code block">
|
||||
<i class="fas fa-file-code"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMermaid()" title="Mermaid diagram">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('[', '](url)')" title="Link">
|
||||
<i class="fas fa-link"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertMarkdown('')" title="Image">
|
||||
<i class="fas fa-image"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertHeading()" title="Heading">
|
||||
<i class="fas fa-heading"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertList()" title="List">
|
||||
<!-- Headings dropdown -->
|
||||
<div class="relative">
|
||||
<button type="button" class="btn-secondary text-sm" onclick="toggleHeadingMenu(event)" title="Headings">
|
||||
<i class="fas fa-heading"></i>
|
||||
</button>
|
||||
<div id="heading-menu" class="absolute z-10 hidden bg-slate-800 border border-gray-700 rounded shadow-lg right-0 bottom-full mb-2">
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(1)">H1</button>
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(2)">H2</button>
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(3)">H3</button>
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(4)">H4</button>
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(5)">H5</button>
|
||||
<button type="button" class="block w-full text-left px-3 py-2 hover:bg-slate-700" onclick="insertHeadingLevel(6)">H6</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertList()" title="Bulleted list">
|
||||
<i class="fas fa-list"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertNumberedList()" title="Numbered list">
|
||||
<i class="fas fa-list-ol"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertChecklist()" title="Task list">
|
||||
<i class="fas fa-square-check"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertBlockquote()" title="Blockquote">
|
||||
<i class="fas fa-quote-left"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertHr()" title="Horizontal rule">
|
||||
<i class="fas fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn-secondary text-sm" onclick="insertTable()" title="Table">
|
||||
<i class="fas fa-table"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500">
|
||||
@@ -139,14 +174,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
function transformMermaidFences(md) {
|
||||
return (md || '').replace(/```mermaid\n([\s\S]*?)```/g, function(_, inner){
|
||||
return `<div class=\"mermaid\">${inner}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
function transformMediaEmbeds(md) {
|
||||
const lines = (md || '').split(/\n/);
|
||||
return lines.map(l => {
|
||||
const t = l.trim();
|
||||
if (/^https?:\/\/\S+\.(?:mp3|wav|ogg)$/.test(t)) return `<audio controls preload=\"metadata\" src=\"${t}\"></audio>`;
|
||||
if (/^https?:\/\/\S+\.(?:mp4|webm|ogg)$/.test(t)) return `<video controls preload=\"metadata\" style=\"max-width:100%\" src=\"${t}\"></video>`;
|
||||
if (/^https?:\/\/\S+\.(?:pdf)$/.test(t)) return `<iframe src=\"${t}\" style=\"width:100%;height:70vh;border:1px solid #374151;border-radius:8px\"></iframe>`;
|
||||
return l;
|
||||
}).join('\n');
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
if (!previewEnabled) return;
|
||||
if (!livePreview || !window.marked) return;
|
||||
const transformed = transformObsidianEmbeds(contentTextarea.value || '');
|
||||
let transformed = transformObsidianEmbeds(contentTextarea.value || '');
|
||||
transformed = transformMermaidFences(transformed);
|
||||
transformed = transformMediaEmbeds(transformed);
|
||||
livePreview.innerHTML = marked.parse(transformed);
|
||||
livePreview.querySelectorAll('pre code').forEach(block => {
|
||||
try { hljs.highlightElement(block); } catch (e) {}
|
||||
});
|
||||
if (window.mermaid) {
|
||||
try { window.mermaid.run({ querySelector: '#live-preview .mermaid' }); } catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
editForm.addEventListener('submit', function(e) {
|
||||
@@ -247,22 +304,52 @@
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertHeading() {
|
||||
function toggleHeadingMenu(e) {
|
||||
const menu = document.getElementById('heading-menu');
|
||||
if (!menu) return;
|
||||
// Show to measure, then decide direction
|
||||
const wasHidden = menu.classList.contains('hidden');
|
||||
menu.classList.remove('hidden');
|
||||
// Reset placement classes
|
||||
menu.classList.remove('top-full','mt-2','bottom-full','mb-2');
|
||||
// Determine available space
|
||||
const btn = e.currentTarget;
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const spaceBelow = window.innerHeight - rect.bottom;
|
||||
const spaceAbove = rect.top;
|
||||
const needed = Math.max(menu.offsetHeight || 192, 192) + 12; // fallback height
|
||||
if (spaceBelow < needed && spaceAbove >= needed) {
|
||||
// Open upwards
|
||||
menu.classList.add('bottom-full','mb-2','right-0');
|
||||
} else {
|
||||
// Open downwards
|
||||
menu.classList.add('top-full','mt-2','right-0');
|
||||
}
|
||||
|
||||
if (wasHidden) {
|
||||
const close = (ev) => {
|
||||
if (!menu.contains(ev.target) && ev.target !== btn) {
|
||||
menu.classList.add('hidden');
|
||||
document.removeEventListener('click', close);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('click', close), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function insertHeadingLevel(level) {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
const lineText = text.substring(lineStart, start);
|
||||
|
||||
if (lineText.startsWith('# ')) {
|
||||
return; // Already a heading
|
||||
}
|
||||
|
||||
const newText = text.substring(0, lineStart) + '# ' + text.substring(lineStart);
|
||||
const hashes = '#'.repeat(Math.min(Math.max(level,1),6)) + ' ';
|
||||
const newText = text.substring(0, lineStart) + hashes + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
const newPos = start + hashes.length;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 2, start + 2);
|
||||
|
||||
contentTextarea.setSelectionRange(newPos, newPos);
|
||||
autoResize();
|
||||
const menu = document.getElementById('heading-menu');
|
||||
if (menu) menu.classList.add('hidden');
|
||||
}
|
||||
|
||||
function insertList() {
|
||||
@@ -278,6 +365,88 @@
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertNumberedList() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
const newText = text.substring(0, lineStart) + '1. ' + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 3, start + 3);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertChecklist() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
const newText = text.substring(0, lineStart) + '- [ ] ' + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 6, start + 6);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertBlockquote() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const lineStart = text.lastIndexOf('\n', start - 1) + 1;
|
||||
const newText = text.substring(0, lineStart) + '> ' + text.substring(lineStart);
|
||||
contentTextarea.value = newText;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(start + 2, start + 2);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertHr() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const insert = '\n\n---\n\n';
|
||||
const newText = text.substring(0, start) + insert + text.substring(start);
|
||||
contentTextarea.value = newText;
|
||||
const pos = start + insert.length;
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(pos, pos);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertCodeBlock() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const insert = '\n```language\n// code\n```\n';
|
||||
const newText = text.substring(0, start) + insert + text.substring(start);
|
||||
contentTextarea.value = newText;
|
||||
const pos = start + 4; // place cursor after first backticks
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(pos, pos);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
function insertMermaid() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const tpl = '\n```mermaid\nflowchart TD\n A[Start] --> B{Decision}\n B -- Yes --> C[Do thing]\n B -- No --> D[Something else]\n```\n';
|
||||
const newText = text.substring(0, start) + tpl + text.substring(start);
|
||||
contentTextarea.value = newText;
|
||||
const pos = start + 4; // cursor after opening backticks
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(pos, pos);
|
||||
autoResize();
|
||||
renderPreview();
|
||||
}
|
||||
|
||||
function insertTable() {
|
||||
const start = contentTextarea.selectionStart;
|
||||
const text = contentTextarea.value;
|
||||
const tpl = '\n| Col 1 | Col 2 | Col 3 |\n|-------|-------|-------|\n| A1 | B1 | C1 |\n| A2 | B2 | C2 |\n';
|
||||
const newText = text.substring(0, start) + tpl + text.substring(start);
|
||||
contentTextarea.value = newText;
|
||||
const pos = start + 3; // inside first cell
|
||||
contentTextarea.focus();
|
||||
contentTextarea.setSelectionRange(pos, pos);
|
||||
autoResize();
|
||||
}
|
||||
|
||||
// Paste-to-upload image
|
||||
contentTextarea.addEventListener('paste', async function(e) {
|
||||
const items = (e.clipboardData || window.clipboardData).items || [];
|
||||
|
||||
Reference in New Issue
Block a user