' + escapeHtml(code) + '$1');
-
- // Bold
- html = html.replace(/\*\*(.+?)\*\*/g, '$1');
-
- // Italic
- html = html.replace(/\*(.+?)\*/g, '$1');
-
- // Strikethrough
- html = html.replace(/~~(.+?)~~/g, '
- // Split by double newlines (paragraph breaks)
- const parts = html.split(/\n\n+/);
- html = parts.map(part => {
- part = part.trim();
- if (!part) return '';
- // Don't wrap if it starts with a block-level tag
- if (/^<(h[1-4]|ul|ol|li|pre|div|hr|table)/.test(part)) return part;
- // Don't wrap single ' + part.replace(/\n/g, ' ' + para.map(inlineHtml).join(' ##### T a b c a b c a*b*c a use **bold some `code ~~strike
- if (/^
') + '
'); i++; continue; }
+
+ if (ulItem(line)) {
+ const items = [];
+ while (i < lines.length) {
+ const m = ulItem(lines[i]);
+ if (!m) break;
+ items.push('' + items.join('') + '
');
+ continue;
+ }
+
+ if (olItem(line)) {
+ const items = [];
+ while (i < lines.length) {
+ const m = olItem(lines[i]);
+ if (!m) break;
+ items.push('' + items.join('') + '
');
+ continue;
+ }
+
+ // Paragraph — consecutive lines up to a blank line or the next block.
+ const para = [];
+ while (i < lines.length && lines[i].trim() !== '' && !isBlockStart(lines[i])) {
+ para.push(lines[i]);
+ i++;
+ }
+ out.push('
') + '
' +
+ '' + escapeHtml(code) + '' + escapeHtml(text.slice(i + 1, end)) + '';
+ i = end + 1;
+ continue;
+ }
+ lit += ch; i++; continue;
+ }
+
+ // Bold.
+ if (ch === '*' && text[i + 1] === '*') {
+ const end = text.indexOf('**', i + 2);
+ if (end > i + 2) {
+ flush();
+ out += '' + inlineHtml(text.slice(i + 2, end)) + '';
+ i = end + 2;
+ continue;
+ }
+ lit += '**'; i += 2; continue;
+ }
+
+ // Strikethrough.
+ if (ch === '~' && text[i + 1] === '~') {
+ const end = text.indexOf('~~', i + 2);
+ if (end > i + 2) {
+ flush();
+ out += '' + inlineHtml(text.slice(i + 2, end)) + '';
+ i = end + 2;
+ continue;
+ }
+ lit += '~~'; i += 2; continue;
+ }
+
+ // Italic — not inside words (a*b*c stays literal): the opener must not
+ // follow a word char, the closer must not precede one.
+ if (ch === '*') {
+ const prev = i > 0 ? text[i - 1] : '';
+ if (!WORD_CHAR.test(prev)) {
+ let end = -1;
+ for (let j = i + 1; j < text.length; j++) {
+ if (text[j] !== '*' || text[j + 1] === '*') continue;
+ if (j === i + 1) continue; // empty span
+ const after = j + 1 < text.length ? text[j + 1] : '';
+ if (WORD_CHAR.test(after)) continue;
+ end = j;
+ break;
+ }
+ if (end > 0) {
+ flush();
+ out += '' + inlineHtml(text.slice(i + 1, end)) + '';
+ i = end + 1;
+ continue;
+ }
+ }
+ lit += ch; i++; continue;
+ }
+
+ // Links — [text](url) with a scheme allowlist.
+ if (ch === '[') {
+ const close = text.indexOf('](', i + 1);
+ if (close > i + 1) {
+ const end = text.indexOf(')', close + 2);
+ if (end > close + 2) {
+ const label = text.slice(i + 1, close);
+ const url = text.slice(close + 2, end).trim();
+ flush();
+ if (SAFE_URL.test(url)) {
+ out += '' + inlineHtml(label) + '';
+ } else {
+ out += escapeHtml(label);
+ }
+ i = end + 1;
+ continue;
+ }
+ }
+ lit += ch; i++; continue;
+ }
+
+ lit += ch; i++;
+ }
+
+ flush();
+ return out;
}
diff --git a/cmd/odek/ui/js/markdown.test.js b/cmd/odek/ui/js/markdown.test.js
new file mode 100644
index 0000000..2e78c8f
--- /dev/null
+++ b/cmd/odek/ui/js/markdown.test.js
@@ -0,0 +1,200 @@
+// Golden tests for the streaming-safe markdown tokenizer.
+// Run: node --test cmd/odek/ui/js/
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { markdownToHtml } from './markdown.js';
+
+// ── Blocks ──
+
+test('headers h1–h4', () => {
+ assert.equal(markdownToHtml('# T'), 'T
');
+ assert.equal(markdownToHtml('## T'), 'T
');
+ assert.equal(markdownToHtml('### T'), 'T
');
+ assert.equal(markdownToHtml('#### T'), 'T
');
+ // Five hashes is not a header
+ assert.equal(markdownToHtml('##### T'), '
');
+ assert.equal(markdownToHtml('***'), '
');
+ assert.equal(markdownToHtml('___'), '
');
+});
+
+test('fenced code block with language', () => {
+ assert.equal(
+ markdownToHtml('```go\nfmt.Println("hi")\n```'),
+ 'fmt.Println("hi")\n
'));
+});
+
+test('unterminated fence renders collected lines as a code block', () => {
+ const html = markdownToHtml('```js\nconsole.log(1)\nconsole.log(2)');
+ assert.equal(
+ html,
+ 'x = 1\nconsole.log(1)\nconsole.log(2)\n
'));
+ assert.ok(!html.includes(''));
+});
+
+test('unordered list', () => {
+ assert.equal(
+ markdownToHtml('- one\n- two'),
+ '**not bold** <b>x</b>\n
'
+ );
+ assert.equal(
+ markdownToHtml('* one\n* two'),
+ '
'
+ );
+});
+
+test('ordered list', () => {
+ assert.equal(
+ markdownToHtml('1. one\n2. two'),
+ '
'
+ );
+});
+
+test('list items support inline markup', () => {
+ assert.equal(
+ markdownToHtml('- a **b** c'),
+ '
'
+ );
+});
+
+// ── Inline spans ──
+
+test('bold', () => {
+ assert.equal(markdownToHtml('a **b** c'), 'b cnpm test now**x**
<script>alert(1)</script>
' + ); +}); + +test('paragraphs split on blank lines, single newline becomesone
two
three
' + ); +}); + +test('empty input', () => { + assert.equal(markdownToHtml(''), ''); +}); + +// ── Golden multi-feature document ── + +test('golden document', () => { + const doc = [ + '# Title', + '', + 'Some **bold** and *italic* text with `code`.', + '', + '- one', + '- two', + '', + '```js', + 'console.log("hi");', + '```', + '', + 'Check [link](https://example.com) out.', + ].join('\n'); + + const expected = [ + 'Some bold and italic text with code.
console.log("hi");\nCheck link out.
', + ].join('\n'); + + assert.equal(markdownToHtml(doc), expected); +}); diff --git a/cmd/odek/ui/js/utils.js b/cmd/odek/ui/js/utils.js index ac99f2f..b31f5fd 100644 --- a/cmd/odek/ui/js/utils.js +++ b/cmd/odek/ui/js/utils.js @@ -3,19 +3,9 @@ import { S } from './state.js'; import { messagesEl, scrollBottomBtn, cancelBtn } from './dom.js'; -// ── Escape helpers ── -export function escapeHtml(s) { - if (!s) return ''; - return s.replace(/&/g,'&').replace(//g,'>'); -} - -export function escapeAttr(s) { - if (!s) return ''; - // & must be replaced first — doing it last double-escapes the entities - // introduced by the quote replacements (" → "). - return s.replace(/&/g,'&').replace(/"/g,'"').replace(/'/g,''') - .replace(//g,'>'); -} +// ── Escape helpers (implemented in escape.js so markdown.js can use them +// without importing the browser-dependent modules) ── +export { escapeHtml, escapeAttr } from './escape.js'; // ── Number formatting ── export function formatNum(n) { diff --git a/cmd/odek/ui/style.css b/cmd/odek/ui/style.css index 8243035..91ab7c9 100644 --- a/cmd/odek/ui/style.css +++ b/cmd/odek/ui/style.css @@ -863,7 +863,7 @@ body.light { text-transform: uppercase; letter-spacing: .1em; } -.cb-copy { cursor: pointer; opacity: .5; transition: opacity .12s; padding: 2px 6px; border-radius: 2px; } +.cb-copy { cursor: pointer; opacity: .5; transition: opacity .12s; padding: 2px 6px; border-radius: 2px; background: none; border: 0; font: inherit; color: inherit; } .cb-copy:hover { opacity: 1; background: rgba(255,255,255,.05); } .cb-copy.copied { opacity: 1; color: var(--green); } .code-block pre { diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md index d8fad07..ddb424a 100644 --- a/docs/DEVELOPMENT.md +++ b/docs/DEVELOPMENT.md @@ -119,8 +119,10 @@ cmd/odek/ ui/ index.html Single-page web UI (vanilla JS + CSS) app.js ES-module entry point (imports ./js/main.js) - js/ Native ES modules (state, dom, utils, markdown, render, - approvals, sessions, input, ws, main, net) — no build step + js/ Native ES modules (state, dom, utils, escape, markdown, + render, approvals, sessions, input, ws, main, net) — no build step. + UI unit tests (node:test golden tests for markdown.js, etc.): + node --test "cmd/odek/ui/js/**/*.test.js" style.css Stylesheet docs/ Documentation CLI.md CLI reference