Add optional rich text body field to items
- Add body field to data model (stored as markdown in file) - Parser recognizes `> ` prefixed lines as body content - Serializer outputs body as indented blockquote lines - Add lightweight WYSIWYG editor (contenteditable, no external deps) - Toolbar: bold, italic, link, H1/H2/H3, lists, code block, table, image - Clipboard export: HTML (for Docs/Word), Markdown, plain text - Editor shows collapsed when empty, expands on click - Include body in text search filter - Dark mode support for editor styles - Update README with feature and file format example
This commit is contained in:
Ilia Sharin
+186
-1
@@ -1,6 +1,177 @@
|
||||
// Stylish dialog primitives + concrete dialogs (Edit/Add Item, Confirm).
|
||||
|
||||
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;
|
||||
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD, useCallback: useCallbackD } = React;
|
||||
|
||||
// ---- Rich Text Editor (lightweight WYSIWYG using contenteditable) ----
|
||||
function RichTextEditor({ value, onChange, placeholder = "Add details...", collapsed = false, onExpand }) {
|
||||
const editorRef = useRefD(null);
|
||||
const [isExpanded, setIsExpanded] = useStateD(!collapsed || !!value);
|
||||
const [showCopyMenu, setShowCopyMenu] = useStateD(false);
|
||||
const [copyMenuPos, setCopyMenuPos] = useStateD({ x: 0, y: 0 });
|
||||
const toolbarRef = useRefD(null);
|
||||
|
||||
// Initialize editor content
|
||||
useEffectD(() => {
|
||||
if (editorRef.current && value !== undefined) {
|
||||
const html = MarkdownUtils.toHtml(value || '');
|
||||
if (editorRef.current.innerHTML !== html) {
|
||||
editorRef.current.innerHTML = html;
|
||||
}
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handleInput = useCallbackD(() => {
|
||||
if (editorRef.current) {
|
||||
const md = MarkdownUtils.toMarkdown(editorRef.current.innerHTML);
|
||||
onChange?.(md || null);
|
||||
}
|
||||
}, [onChange]);
|
||||
|
||||
const execCmd = useCallbackD((cmd, val = null) => {
|
||||
editorRef.current?.focus();
|
||||
document.execCommand(cmd, false, val);
|
||||
handleInput();
|
||||
}, [handleInput]);
|
||||
|
||||
const handleKeyDown = useCallbackD((e) => {
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
execCmd('insertText', ' ');
|
||||
}
|
||||
// Ctrl/Cmd + B/I/K shortcuts
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
if (e.key === 'b') { e.preventDefault(); execCmd('bold'); }
|
||||
if (e.key === 'i') { e.preventDefault(); execCmd('italic'); }
|
||||
if (e.key === 'k') { e.preventDefault(); insertLink(); }
|
||||
}
|
||||
}, [execCmd]);
|
||||
|
||||
const insertLink = useCallbackD(() => {
|
||||
const url = prompt('Enter URL:');
|
||||
if (url) execCmd('createLink', url);
|
||||
}, [execCmd]);
|
||||
|
||||
const insertImage = useCallbackD(() => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.onchange = async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
execCmd('insertHTML', `<img src="${reader.result}" alt="${file.name}" class="rte-img">`);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
input.click();
|
||||
}, [execCmd]);
|
||||
|
||||
const insertTable = useCallbackD(() => {
|
||||
const html = '<table class="rte-table"><thead><tr><th>Header 1</th><th>Header 2</th></tr></thead><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table><p><br></p>';
|
||||
execCmd('insertHTML', html);
|
||||
}, [execCmd]);
|
||||
|
||||
const insertCodeBlock = useCallbackD(() => {
|
||||
execCmd('insertHTML', '<pre class="rte-code-block"><code>code here</code></pre><p><br></p>');
|
||||
}, [execCmd]);
|
||||
|
||||
const handleCopyMenu = useCallbackD((e) => {
|
||||
e.preventDefault();
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
setCopyMenuPos({ x: rect.left, y: rect.bottom + 4 });
|
||||
setShowCopyMenu(true);
|
||||
}, []);
|
||||
|
||||
const copyAs = useCallbackD(async (format) => {
|
||||
setShowCopyMenu(false);
|
||||
const html = editorRef.current?.innerHTML || '';
|
||||
const md = MarkdownUtils.toMarkdown(html);
|
||||
if (format === 'html') await ClipboardUtils.copyHtml(html, md);
|
||||
else if (format === 'markdown') await ClipboardUtils.copyMarkdown(md);
|
||||
else if (format === 'text') await ClipboardUtils.copyPlainText(html);
|
||||
}, []);
|
||||
|
||||
const expand = useCallbackD(() => {
|
||||
setIsExpanded(true);
|
||||
onExpand?.();
|
||||
setTimeout(() => editorRef.current?.focus(), 50);
|
||||
}, [onExpand]);
|
||||
|
||||
// Close copy menu on outside click
|
||||
useEffectD(() => {
|
||||
if (!showCopyMenu) return;
|
||||
const close = () => setShowCopyMenu(false);
|
||||
document.addEventListener('click', close);
|
||||
return () => document.removeEventListener('click', close);
|
||||
}, [showCopyMenu]);
|
||||
|
||||
if (!isExpanded) {
|
||||
return (
|
||||
<div className="rte-collapsed" onClick={expand}>
|
||||
<span className="rte-collapsed-placeholder">{placeholder}</span>
|
||||
<Icon name="plus" size={12} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rte-wrap">
|
||||
<div className="rte-toolbar" ref={toolbarRef}>
|
||||
<button type="button" onClick={() => execCmd('bold')} title="Bold (Ctrl+B)"><strong>B</strong></button>
|
||||
<button type="button" onClick={() => execCmd('italic')} title="Italic (Ctrl+I)"><em>I</em></button>
|
||||
<span className="rte-toolbar-sep" />
|
||||
<button type="button" onClick={insertLink} title="Link (Ctrl+K)">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><path d="M8 12l4-4M6 10l-1 1a3 3 0 0 0 4.24 4.24l1-1M14 10l1-1a3 3 0 0 0-4.24-4.24l-1 1" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
|
||||
</button>
|
||||
<span className="rte-toolbar-sep" />
|
||||
<button type="button" onClick={() => execCmd('formatBlock', 'h1')} title="Heading 1">H1</button>
|
||||
<button type="button" onClick={() => execCmd('formatBlock', 'h2')} title="Heading 2">H2</button>
|
||||
<button type="button" onClick={() => execCmd('formatBlock', 'h3')} title="Heading 3">H3</button>
|
||||
<span className="rte-toolbar-sep" />
|
||||
<button type="button" onClick={() => execCmd('insertUnorderedList')} title="Bullet list">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="8" y1="6" x2="17" y2="6"/><line x1="8" y1="10" x2="17" y2="10"/><line x1="8" y1="14" x2="17" y2="14"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="10" r="1" fill="currentColor"/><circle cx="4" cy="14" r="1" fill="currentColor"/></g></svg>
|
||||
</button>
|
||||
<button type="button" onClick={() => execCmd('insertOrderedList')} title="Numbered list">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><line x1="8" y1="6" x2="17" y2="6"/><line x1="8" y1="10" x2="17" y2="10"/><line x1="8" y1="14" x2="17" y2="14"/><text x="3" y="7" fontSize="5" fill="currentColor" stroke="none">1</text><text x="3" y="11" fontSize="5" fill="currentColor" stroke="none">2</text><text x="3" y="15" fontSize="5" fill="currentColor" stroke="none">3</text></g></svg>
|
||||
</button>
|
||||
<span className="rte-toolbar-sep" />
|
||||
<button type="button" onClick={insertCodeBlock} title="Code block">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="7,5 3,10 7,15"/><polyline points="13,5 17,10 13,15"/></g></svg>
|
||||
</button>
|
||||
<button type="button" onClick={insertTable} title="Table">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="14" height="12" rx="1.5"/><line x1="3" y1="8" x2="17" y2="8"/><line x1="10" y1="8" x2="10" y2="16"/></g></svg>
|
||||
</button>
|
||||
<button type="button" onClick={insertImage} title="Image">
|
||||
<svg width="14" height="14" viewBox="0 0 20 20"><g fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><rect x="3" y="4" width="14" height="12" rx="1.5"/><circle cx="7" cy="8" r="1.5"/><path d="M3 14l4-4 3 3 4-4 3 3"/></g></svg>
|
||||
</button>
|
||||
<span className="rte-toolbar-sep" />
|
||||
<button type="button" onClick={handleCopyMenu} title="Copy as..." className="rte-copy-btn">
|
||||
<Icon name="copy" size={12} />
|
||||
<svg width="8" height="8" viewBox="0 0 10 10"><polyline points="2,4 5,7 8,4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{showCopyMenu && (
|
||||
<div className="rte-copy-menu" style={{ left: copyMenuPos.x, top: copyMenuPos.y }}>
|
||||
<button type="button" onClick={() => copyAs('html')}>Copy for Docs/Word</button>
|
||||
<button type="button" onClick={() => copyAs('markdown')}>Copy as Markdown</button>
|
||||
<button type="button" onClick={() => copyAs('text')}>Copy as Plain Text</button>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
ref={editorRef}
|
||||
className="rte-editor"
|
||||
contentEditable
|
||||
onInput={handleInput}
|
||||
onKeyDown={handleKeyDown}
|
||||
data-placeholder={placeholder}
|
||||
onContextMenu={(e) => {
|
||||
// Allow default context menu but add copy options via showCopyMenu
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Dialog({ open, onClose, children, width = 460, labelledBy }) {
|
||||
useEffectD(() => {
|
||||
@@ -43,6 +214,7 @@ function DialogHeader({ eyebrow, title, onClose, id }) {
|
||||
// --- Item editor (used for both edit and add) ---
|
||||
function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] }) {
|
||||
const [title, setTitle] = useStateD("");
|
||||
const [body, setBody] = useStateD(null);
|
||||
const [priority, setPriority] = useStateD("P2");
|
||||
const [status, setStatus] = useStateD("open");
|
||||
const [due, setDue] = useStateD("");
|
||||
@@ -55,6 +227,7 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
|
||||
useEffectD(() => {
|
||||
if (!open) return;
|
||||
setTitle(initial?.title || "");
|
||||
setBody(initial?.body || null);
|
||||
setPriority(initial?.priority || "P2");
|
||||
setStatus(initial?.status || "open");
|
||||
setDue(initial?.due || "");
|
||||
@@ -81,6 +254,7 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
|
||||
if (status === "done") outProgress = 100;
|
||||
onSubmit({
|
||||
title: title.trim(),
|
||||
body: body || null,
|
||||
priority, status,
|
||||
due: due || null,
|
||||
tags,
|
||||
@@ -114,6 +288,16 @@ function ItemDialog({ open, mode, initial, onClose, onSubmit, recentTags = [] })
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="field-label">Details <span className="field-hint">rich text, supports markdown</span></label>
|
||||
<RichTextEditor
|
||||
value={body}
|
||||
onChange={setBody}
|
||||
placeholder="Add notes, context, or details..."
|
||||
collapsed={!body}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field-row">
|
||||
<div className="field">
|
||||
<label className="field-label">Priority</label>
|
||||
@@ -370,3 +554,4 @@ function TagMatchHL({ text, match }) {
|
||||
window.Dialog = Dialog;
|
||||
window.ItemDialog = ItemDialog;
|
||||
window.ConfirmDialog = ConfirmDialog;
|
||||
window.RichTextEditor = RichTextEditor;
|
||||
|
||||
+165
-2
@@ -100,7 +100,7 @@ function filterTree(items, f) {
|
||||
}
|
||||
if (f.text) {
|
||||
const q = f.text.toLowerCase();
|
||||
const hay = [it.title, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
|
||||
const hay = [it.title, it.body, it.reason, ...(it.tags || [])].filter(Boolean).join(" ").toLowerCase();
|
||||
if (!hay.includes(q)) return false;
|
||||
}
|
||||
return true;
|
||||
@@ -358,10 +358,173 @@ function ProgressGauge({ value, onClick, interactive = false, size = "sm" }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ---- Markdown ↔ HTML conversion (lightweight, no external deps) ----
|
||||
const MarkdownUtils = {
|
||||
// Convert markdown to HTML for rendering in editor
|
||||
toHtml(md) {
|
||||
if (!md) return '';
|
||||
let html = md;
|
||||
|
||||
// Escape HTML entities first
|
||||
html = html.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
|
||||
// Code blocks (``` ... ```) - must be before inline code
|
||||
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) =>
|
||||
`<pre class="rte-code-block" data-lang="${lang}"><code>${code.trim()}</code></pre>`);
|
||||
|
||||
// Tables
|
||||
html = html.replace(/^\|(.+)\|\s*\n\|[-:| ]+\|\s*\n((?:\|.+\|\s*\n?)+)/gm, (_, header, body) => {
|
||||
const headers = header.split('|').map(c => c.trim()).filter(Boolean);
|
||||
const rows = body.trim().split('\n').map(row =>
|
||||
row.split('|').map(c => c.trim()).filter(Boolean)
|
||||
);
|
||||
return `<table class="rte-table"><thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${rows.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
|
||||
});
|
||||
|
||||
// Images (base64 or URL)
|
||||
html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" class="rte-img">');
|
||||
|
||||
// Links
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
|
||||
|
||||
// Bold **text** or __text__
|
||||
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
|
||||
|
||||
// Italic *text* or _text_ (not inside words)
|
||||
html = html.replace(/(?<![*\w])\*([^*\n]+)\*(?![*\w])/g, '<em>$1</em>');
|
||||
html = html.replace(/(?<![_\w])_([^_\n]+)_(?![_\w])/g, '<em>$1</em>');
|
||||
|
||||
// Inline code `code`
|
||||
html = html.replace(/`([^`]+)`/g, '<code class="rte-inline-code">$1</code>');
|
||||
|
||||
// Headings
|
||||
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
|
||||
html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
|
||||
|
||||
// Lists - unordered
|
||||
html = html.replace(/^[-*] (.+)$/gm, '<li data-list="ul">$1</li>');
|
||||
// Lists - ordered
|
||||
html = html.replace(/^\d+\. (.+)$/gm, '<li data-list="ol">$1</li>');
|
||||
|
||||
// Wrap consecutive list items
|
||||
html = html.replace(/((?:<li data-list="ul">.+<\/li>\s*)+)/g, '<ul>$1</ul>');
|
||||
html = html.replace(/((?:<li data-list="ol">.+<\/li>\s*)+)/g, '<ol>$1</ol>');
|
||||
html = html.replace(/ data-list="[uo]l"/g, '');
|
||||
|
||||
// Paragraphs - wrap remaining text blocks
|
||||
html = html.split('\n\n').map(block => {
|
||||
block = block.trim();
|
||||
if (!block) return '';
|
||||
if (/^<(h[1-3]|ul|ol|pre|table|p)/.test(block)) return block;
|
||||
if (block.includes('<')) return block; // Already has HTML
|
||||
return `<p>${block.replace(/\n/g, '<br>')}</p>`;
|
||||
}).join('\n');
|
||||
|
||||
return html;
|
||||
},
|
||||
|
||||
// Convert HTML from editor back to markdown
|
||||
toMarkdown(html) {
|
||||
if (!html) return '';
|
||||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||||
return this._nodeToMd(doc.body).trim();
|
||||
},
|
||||
|
||||
_nodeToMd(node) {
|
||||
let md = '';
|
||||
for (const child of node.childNodes) {
|
||||
if (child.nodeType === Node.TEXT_NODE) {
|
||||
md += child.textContent;
|
||||
} else if (child.nodeType === Node.ELEMENT_NODE) {
|
||||
const tag = child.tagName.toLowerCase();
|
||||
const inner = this._nodeToMd(child);
|
||||
switch (tag) {
|
||||
case 'strong': case 'b': md += `**${inner}**`; break;
|
||||
case 'em': case 'i': md += `*${inner}*`; break;
|
||||
case 'code':
|
||||
if (child.parentElement?.tagName === 'PRE') md += inner;
|
||||
else md += `\`${inner}\``;
|
||||
break;
|
||||
case 'pre': md += `\`\`\`\n${inner}\n\`\`\`\n\n`; break;
|
||||
case 'a': md += `[${inner}](${child.getAttribute('href') || ''})`; break;
|
||||
case 'img': md += ` || ''})`; break;
|
||||
case 'h1': md += `# ${inner}\n\n`; break;
|
||||
case 'h2': md += `## ${inner}\n\n`; break;
|
||||
case 'h3': md += `### ${inner}\n\n`; break;
|
||||
case 'p': md += `${inner}\n\n`; break;
|
||||
case 'br': md += '\n'; break;
|
||||
case 'li': md += `- ${inner}\n`; break;
|
||||
case 'ul': case 'ol': md += inner + '\n'; break;
|
||||
case 'table': md += this._tableToMd(child) + '\n\n'; break;
|
||||
case 'thead': case 'tbody': case 'tr': case 'th': case 'td': md += inner; break;
|
||||
case 'div': md += inner + '\n'; break;
|
||||
default: md += inner;
|
||||
}
|
||||
}
|
||||
}
|
||||
return md;
|
||||
},
|
||||
|
||||
_tableToMd(table) {
|
||||
const rows = Array.from(table.querySelectorAll('tr'));
|
||||
if (!rows.length) return '';
|
||||
const lines = [];
|
||||
rows.forEach((row, i) => {
|
||||
const cells = Array.from(row.querySelectorAll('th, td')).map(c => c.textContent.trim());
|
||||
lines.push('| ' + cells.join(' | ') + ' |');
|
||||
if (i === 0) lines.push('|' + cells.map(() => '---').join('|') + '|');
|
||||
});
|
||||
return lines.join('\n');
|
||||
},
|
||||
|
||||
// Convert HTML to plain text
|
||||
toPlainText(html) {
|
||||
if (!html) return '';
|
||||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||||
return doc.body.textContent || '';
|
||||
}
|
||||
};
|
||||
|
||||
// ---- Clipboard utilities for multiple formats ----
|
||||
const ClipboardUtils = {
|
||||
// Copy to clipboard with multiple formats (HTML primary, plain text also)
|
||||
async copyHtml(html, markdown) {
|
||||
const plain = MarkdownUtils.toPlainText(html);
|
||||
try {
|
||||
// Modern API: write multiple formats
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
'text/html': new Blob([html], { type: 'text/html' }),
|
||||
'text/plain': new Blob([plain], { type: 'text/plain' })
|
||||
})
|
||||
]);
|
||||
return true;
|
||||
} catch {
|
||||
// Fallback: plain text only
|
||||
await navigator.clipboard.writeText(plain);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
async copyMarkdown(markdown) {
|
||||
await navigator.clipboard.writeText(markdown);
|
||||
return true;
|
||||
},
|
||||
|
||||
async copyPlainText(html) {
|
||||
const plain = MarkdownUtils.toPlainText(html);
|
||||
await navigator.clipboard.writeText(plain);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
Object.assign(window, {
|
||||
STATUSES, STATUS_BY_KEY, STATUS_ORDER, PRIORITIES,
|
||||
parseDate, daysBetween, isOverdue, dueRelative, fmtTimestamp, fmtBytes, fmtRelative, fmtShortDate,
|
||||
walkTree, findItem, allTags, countAll, countByStatus, filterTree,
|
||||
Icon, StatusIcon, ColorStatusIcon, STATUS_COLORS, STATUS_EMOJI, StatusStyleContext,
|
||||
PROGRESS_STEPS, snapProgress, progressFor, shouldShowProgress, cycleProgress, ProgressGauge
|
||||
PROGRESS_STEPS, snapProgress, progressFor, shouldShowProgress, cycleProgress, ProgressGauge,
|
||||
MarkdownUtils, ClipboardUtils
|
||||
});
|
||||
|
||||
+31
-3
@@ -70,9 +70,30 @@ const Parser = {
|
||||
const uid = () => 'i-' + (++idSeq).toString(36);
|
||||
|
||||
const entries = [];
|
||||
const stack = [{ children: entries, depth: -1, level: 0 }];
|
||||
const stack = [{ children: entries, depth: -1, level: 0, item: null }];
|
||||
const lines = entriesText.split('\n');
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i];
|
||||
|
||||
// Check for body line (starts with whitespace + "> ")
|
||||
const bodyMatch = line.match(/^(\s*)>\s?(.*)$/);
|
||||
if (bodyMatch) {
|
||||
// Body line - attach to current item at matching depth
|
||||
const bodyDepth = bodyMatch[1].length / 2;
|
||||
const bodyLine = bodyMatch[2];
|
||||
// Find the item at this depth
|
||||
for (let j = stack.length - 1; j >= 0; j--) {
|
||||
if (stack[j].depth === bodyDepth && stack[j].item) {
|
||||
if (!stack[j].item.body) stack[j].item.body = '';
|
||||
else stack[j].item.body += '\n';
|
||||
stack[j].item.body += bodyLine;
|
||||
break;
|
||||
}
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
for (const line of entriesText.split('\n')) {
|
||||
const m = line.match(/^(\s*)[-*]\s*\[([ x!>/\-])\]\s*(.*)$/);
|
||||
if (!m) continue;
|
||||
|
||||
@@ -108,9 +129,10 @@ const Parser = {
|
||||
progress: status === 'done' ? 100 : progress,
|
||||
collapsed: false,
|
||||
children: [],
|
||||
body: null,
|
||||
};
|
||||
stack[stack.length - 1].children.push(item);
|
||||
stack.push({ children: item.children, depth, level: item.level });
|
||||
stack.push({ children: item.children, depth, level: item.level, item });
|
||||
}
|
||||
|
||||
return { entries, history, meta, checksumOk };
|
||||
@@ -143,6 +165,12 @@ const Parser = {
|
||||
const metaStr = meta.length ? ` *(${meta.join(', ')})*` : '';
|
||||
const prefix = it.priority ? `[${it.priority}] ` : '';
|
||||
lines.push(`${indent}- [${GLYPH[it.status] || ' '}] ${prefix}${it.title}${metaStr}`);
|
||||
// Serialize body as indented blockquote lines
|
||||
if (it.body) {
|
||||
for (const bodyLine of it.body.split('\n')) {
|
||||
lines.push(`${indent}> ${bodyLine}`);
|
||||
}
|
||||
}
|
||||
if (it.children?.length) {
|
||||
lines.push(...this._serializeEntries(it.children, depth + 1).split('\n'));
|
||||
}
|
||||
|
||||
+196
@@ -89,6 +89,11 @@ html[data-theme="dark"] .restore-warn-title { color: oklch(0.92 0.05 75); }
|
||||
html[data-theme="dark"] .restore-warn-body { color: oklch(0.78 0.04 70); }
|
||||
html[data-theme="dark"] .restore-warn-body code { background: oklch(0 0 0 / 0.30); }
|
||||
html[data-theme="dark"] .drag-handle { color: oklch(0.50 0.005 60); }
|
||||
html[data-theme="dark"] .rte-toolbar { background: oklch(0.25 0.010 60); }
|
||||
html[data-theme="dark"] .rte-code-block,
|
||||
html[data-theme="dark"] .rte-inline-code { background: oklch(0.25 0.010 60); }
|
||||
html[data-theme="dark"] .rte-table th { background: oklch(0.25 0.010 60); }
|
||||
html[data-theme="dark"] .rte-table td { background: oklch(0.22 0.008 60); }
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
@@ -1049,6 +1054,197 @@ input { font: inherit; color: inherit; }
|
||||
background: var(--bg-2); color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* ---------- Rich Text Editor ---------- */
|
||||
.rte-wrap {
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
.rte-wrap:focus-within {
|
||||
border-color: var(--accent-edge);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.rte-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px 6px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
background: var(--bg-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.rte-toolbar button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
background: transparent;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
.rte-toolbar button:hover {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
.rte-toolbar-sep {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background: var(--rule);
|
||||
margin: 0 4px;
|
||||
}
|
||||
.rte-copy-btn {
|
||||
width: auto !important;
|
||||
padding: 0 6px;
|
||||
gap: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rte-copy-menu {
|
||||
position: fixed;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-pop);
|
||||
padding: 4px;
|
||||
z-index: 100;
|
||||
min-width: 160px;
|
||||
}
|
||||
.rte-copy-menu button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 7px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12.5px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.rte-copy-menu button:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.rte-editor {
|
||||
min-height: 80px;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--ink);
|
||||
outline: none;
|
||||
}
|
||||
.rte-editor:empty::before {
|
||||
content: attr(data-placeholder);
|
||||
color: var(--ink-3);
|
||||
pointer-events: none;
|
||||
}
|
||||
.rte-editor p { margin: 0 0 0.75em; }
|
||||
.rte-editor p:last-child { margin-bottom: 0; }
|
||||
.rte-editor h1, .rte-editor h2, .rte-editor h3 {
|
||||
margin: 0.8em 0 0.4em;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.rte-editor h1:first-child,
|
||||
.rte-editor h2:first-child,
|
||||
.rte-editor h3:first-child { margin-top: 0; }
|
||||
.rte-editor h1 { font-size: 1.3em; }
|
||||
.rte-editor h2 { font-size: 1.15em; }
|
||||
.rte-editor h3 { font-size: 1em; }
|
||||
.rte-editor ul, .rte-editor ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.rte-editor li { margin: 0.25em 0; }
|
||||
.rte-editor a {
|
||||
color: var(--accent-deep);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.rte-editor a:hover { color: var(--accent); }
|
||||
.rte-editor strong { font-weight: 600; }
|
||||
.rte-editor em { font-style: italic; }
|
||||
|
||||
.rte-inline-code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
padding: 1px 5px;
|
||||
background: var(--bg-2);
|
||||
border-radius: 3px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.rte-code-block {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-2);
|
||||
border-radius: var(--radius);
|
||||
margin: 0.75em 0;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.rte-code-block code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.rte-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.75em 0;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.rte-table th, .rte-table td {
|
||||
border: 1px solid var(--rule);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.rte-table th {
|
||||
background: var(--bg-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
.rte-table td { background: var(--paper); }
|
||||
|
||||
.rte-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius);
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
/* Collapsed state */
|
||||
.rte-collapsed {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
min-height: 40px;
|
||||
border: 1px dashed var(--rule);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, background 0.12s;
|
||||
}
|
||||
.rte-collapsed:hover {
|
||||
border-color: var(--accent-edge);
|
||||
background: var(--paper);
|
||||
}
|
||||
.rte-collapsed-placeholder {
|
||||
font-size: 13px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* ---------- Import / Export dialog ---------- */
|
||||
.ie-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); align-items: stretch; }
|
||||
.ie-tab {
|
||||
|
||||
Reference in New Issue
Block a user