@0m0g1/griot 0.1.2 → 0.1.4

package/src/inline/InlineLexer.js

@@ -1,90 +1,87 @@
 // ─── InlineLexer.js ───────────────────────────────────────────────────────────
-// Tokenises inline markdown-like syntax into a flat token array.
-// Runs on a single text string (the content of one block's text field).
+// Tokenises a plain-text string that uses lightweight inline markup.
 //
-// Supported syntax:
-//   **bold**                     → { type:'bold',      text }
-//   *italic*                     → { type:'italic',    text }
-//   `code`                       → { type:'code',      text }
-//   [label](url)                 → { type:'link',      text, href }
-//   [[event:id|label]]           → { type:'event_ref', eventId, label }
-//   [[cite:blockId|label]]       → { type:'cite_ref',  blockId, label }
-//   plain text                   → { type:'text',      text }
+// Supported syntax
+// ─────────────────────────────────────────────────────────────────────────────
+//   **bold**                           → TOKEN.BOLD        { text }
+//   *italic*                           → TOKEN.ITALIC      { text }
+//   __underline__                      → TOKEN.UNDERLINE   { text }
+//   ~~strikethrough~~                  → TOKEN.STRIKE      { text }
+//   `inline code`                      → TOKEN.CODE        { code }
+//   ==highlight==                      → TOKEN.HIGHLIGHT   { text }
+//   {#f00:red text}  {blue:text}       → TOKEN.COLOR_MARK  { color, text }
+//   [label](url)                       → TOKEN.LINK        { label, href }
+//   ![alt](url)                        → TOKEN.IMAGE       { alt, src }
+//   [[event:id|label]]                 → TOKEN.EVENT_REF   { eventId, label }
+//   [[cite:blockId|label]]             → TOKEN.CITE_REF    { blockId, label }
+//   plain text                         → TOKEN.TEXT        { text }
+//
+// Stateless and re-entrant. Rules are anchored regexes in priority order.
 // ─────────────────────────────────────────────────────────────────────────────
 
 export const TOKEN = Object.freeze({
-  TEXT:      'text',
-  BOLD:      'bold',
-  ITALIC:    'italic',
-  CODE:      'code',
-  LINK:      'link',
-  EVENT_REF: 'event_ref',
-  CITE_REF:  'cite_ref',
+  TEXT:       'text',
+  BOLD:       'bold',
+  ITALIC:     'italic',
+  UNDERLINE:  'underline',
+  STRIKE:     'strike',
+  CODE:       'code',
+  LINK:       'link',
+  IMAGE:      'image',
+  HIGHLIGHT:  'highlight',
+  COLOR_MARK: 'color_mark',
+  EVENT_REF:  'event_ref',
+  CITE_REF:   'cite_ref',
 });
 
-// Combined regex — order matters (longest/most-specific first)
-const INLINE_RE = new RegExp(
-  [
-    /(\*\*(.+?)\*\*)/,                          // bold
-    /(\*(.+?)\*)/,                              // italic
-    /(`([^`]+)`)/,                              // inline code
-    /(\[(.+?)\]\((.+?)\))/,                     // link
-    /(\[\[event:([^\]|]+)(?:\|([^\]]*))?\]\])/, // event_ref
-    /(\[\[cite:([^\]|]+)(?:\|([^\]]*))?\]\])/,  // cite_ref
-  ].map(r => r.source).join('|'),
-  'g'
-);
+const RULES = [
+  // Inline image ![alt](url) — must precede link rule
+  { type: TOKEN.IMAGE,      re: /^!\[([^\]]*)\]\(([^)\s]+)\)/,                      build: m => ({ alt: m[1], src: m[2] }) },
+  // Link [label](url)
+  { type: TOKEN.LINK,       re: /^\[([^\]]+)\]\(([^)\s]+)\)/,                       build: m => ({ label: m[1], href: m[2] }) },
+  // Bold **text** — before italic
+  { type: TOKEN.BOLD,       re: /^\*\*((?:[^*]|\*(?!\*))+)\*\*/,                    build: m => ({ text: m[1] }) },
+  // Italic *text*
+  { type: TOKEN.ITALIC,     re: /^\*((?:[^*])+)\*/,                                 build: m => ({ text: m[1] }) },
+  // Underline __text__
+  { type: TOKEN.UNDERLINE,  re: /^__((?:[^_])+)__/,                                 build: m => ({ text: m[1] }) },
+  // Strikethrough ~~text~~
+  { type: TOKEN.STRIKE,     re: /^~~((?:[^~])+)~~/,                                 build: m => ({ text: m[1] }) },
+  // Highlight ==text==
+  { type: TOKEN.HIGHLIGHT,  re: /^==((?:[^=])+)==/,                                 build: m => ({ text: m[1] }) },
+  // Colour mark {#hex:text} or {colorname:text}
+  { type: TOKEN.COLOR_MARK, re: /^\{(#[0-9a-fA-F]{3,8}|[a-zA-Z][a-zA-Z0-9_-]*):([^}]+)\}/, build: m => ({ color: m[1], text: m[2] }) },
+  // Inline code `code`
+  { type: TOKEN.CODE,       re: /^`([^`]+)`/,                                       build: m => ({ code: m[1] }) },
+  // Event ref [[event:id|label]]
+  { type: TOKEN.EVENT_REF,  re: /^\[\[event:([^\]|]+)(?:\|([^\]]*))?\]\]/,          build: m => ({ eventId: m[1], label: m[2] || m[1] }) },
+  // Cite ref [[cite:id|label]]
+  { type: TOKEN.CITE_REF,   re: /^\[\[cite:([^\]|]+)(?:\|([^\]]*))?\]\]/,           build: m => ({ blockId: m[1], label: m[2] || m[1] }) },
+];
 
 export function tokenizeInline(text = '') {
   if (!text) return [];
-
   const tokens = [];
-  let last = 0;
-  let m;
+  let pos = 0, textStart = 0;
 
-  INLINE_RE.lastIndex = 0;
+  while (pos < text.length) {
+    const remaining = text.slice(pos);
+    let matched = false;
 
-  while ((m = INLINE_RE.exec(text)) !== null) {
-    // Flush plain text before this match
-    if (m.index > last) {
-      tokens.push({ type: TOKEN.TEXT, text: text.slice(last, m.index) });
+    for (const rule of RULES) {
+      const m = remaining.match(rule.re);
+      if (!m) continue;
+      if (pos > textStart) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart, pos) });
+      tokens.push({ type: rule.type, ...rule.build(m) });
+      pos += m[0].length;
+      textStart = pos;
+      matched = true;
+      break;
     }
 
-    if (m[1]) {
-      // bold
-      tokens.push({ type: TOKEN.BOLD, text: m[2] });
-    } else if (m[3]) {
-      // italic
-      tokens.push({ type: TOKEN.ITALIC, text: m[4] });
-    } else if (m[5]) {
-      // inline code
-      tokens.push({ type: TOKEN.CODE, text: m[6] });
-    } else if (m[7]) {
-      // link
-      tokens.push({ type: TOKEN.LINK, text: m[8], href: m[9] });
-    } else if (m[10]) {
-      // event_ref
-      tokens.push({
-        type:    TOKEN.EVENT_REF,
-        eventId: m[11],
-        label:   m[12] || m[11],
-      });
-    } else if (m[13]) {
-      // cite_ref
-      tokens.push({
-        type:    TOKEN.CITE_REF,
-        blockId: m[14],
-        label:   m[15] || m[14],
-      });
-    }
-
-    last = INLINE_RE.lastIndex;
-  }
-
-  // Remaining plain text
-  if (last < text.length) {
-    tokens.push({ type: TOKEN.TEXT, text: text.slice(last) });
+    if (!matched) pos++;
   }
 
+  if (textStart < text.length) tokens.push({ type: TOKEN.TEXT, text: text.slice(textStart) });
   return tokens.length ? tokens : [{ type: TOKEN.TEXT, text }];
-}
+}

package/src/inline/InlineRenderer.js

@@ -2,116 +2,133 @@
 // Renders inline token arrays to either:
 //   a) A DocumentFragment (DOM nodes) — used by Viewer and Editor live preview
 //   b) An HTML string                 — used for SSR / export
-//
-// Callbacks:
-//   onEventClick(eventId)  — called when an [[event:]] chip is clicked
-//   onCiteClick(blockId)   — called when a [[cite:]] chip is clicked
 // ─────────────────────────────────────────────────────────────────────────────
 
 import { tokenizeInline, TOKEN } from './InlineLexer.js';
 
-// ─── DOM rendering ────────────────────────────────────────────────────────────
+// ── DOM rendering ─────────────────────────────────────────────────────────────
+
 export function renderInlineToDOM(text = '', { onEventClick, onCiteClick } = {}) {
   const frag = document.createDocumentFragment();
-  const tokens = tokenizeInline(text);
-
-  for (const t of tokens) {
-    let node;
-
-    switch (t.type) {
-      case TOKEN.TEXT:
-        node = document.createTextNode(t.text);
-        break;
-
-      case TOKEN.BOLD:
-        node = document.createElement('strong');
-        node.textContent = t.text;
-        break;
-
-      case TOKEN.ITALIC:
-        node = document.createElement('em');
-        node.textContent = t.text;
-        break;
-
-      case TOKEN.CODE: {
-        node = document.createElement('code');
-        node.className = 'griot-inline-code';
-        node.textContent = t.text;
-        break;
-      }
-
-      case TOKEN.LINK: {
-        node = document.createElement('a');
-        node.href   = t.href;
-        node.target = '_blank';
-        node.rel    = 'noopener noreferrer';
-        node.className = 'griot-link';
-        node.textContent = t.text;
-        break;
-      }
+  for (const t of tokenizeInline(text)) {
+    frag.appendChild(_toNode(t, { onEventClick, onCiteClick }));
+  }
+  return frag;
+}
 
-      case TOKEN.EVENT_REF: {
-        node = document.createElement('button');
-        node.type      = 'button';
-        node.className = 'griot-chip griot-chip--event';
-        node.dataset.eventId = t.eventId;
-        node.innerHTML = `<span class="griot-chip__icon">⏱</span><span class="griot-chip__label">${escHtml(t.label)}</span>`;
-        if (onEventClick) {
-          node.addEventListener('click', (e) => {
-            e.stopPropagation();
-            onEventClick(t.eventId);
-          });
-        }
-        break;
-      }
+function _toNode(t, opts) {
+  switch (t.type) {
 
-      case TOKEN.CITE_REF: {
-        node = document.createElement('button');
-        node.type      = 'button';
-        node.className = 'griot-chip griot-chip--cite';
-        node.dataset.blockId = t.blockId;
-        node.innerHTML = `<span class="griot-chip__icon">📖</span><span class="griot-chip__label">${escHtml(t.label)}</span>`;
-        if (onCiteClick) {
-          node.addEventListener('click', (e) => {
-            e.stopPropagation();
-            onCiteClick(t.blockId);
-          });
-        }
-        break;
-      }
+    case TOKEN.TEXT:
+      return document.createTextNode(t.text);
 
-      default:
-        node = document.createTextNode(t.text ?? '');
+    case TOKEN.BOLD: {
+      const el = document.createElement('strong');
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.ITALIC: {
+      const el = document.createElement('em');
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.UNDERLINE: {
+      const el = document.createElement('u');
+      el.className = 'griot-underline';
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.STRIKE: {
+      const el = document.createElement('s');
+      el.className = 'griot-strike';
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.HIGHLIGHT: {
+      const el = document.createElement('mark');
+      el.className = 'griot-highlight';
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.COLOR_MARK: {
+      const el = document.createElement('span');
+      el.className  = 'griot-color-mark';
+      el.style.color = t.color;
+      el.textContent = t.text;
+      return el;
+    }
+    case TOKEN.CODE: {
+      const el = document.createElement('code');
+      el.className = 'griot-inline-code';
+      el.textContent = t.code;
+      return el;
+    }
+    case TOKEN.IMAGE: {
+      const el = document.createElement('img');
+      el.src = t.src;
+      el.alt = t.alt ?? '';
+      el.className = 'griot-inline-img';
+      return el;
+    }
+    case TOKEN.LINK: {
+      const el = document.createElement('a');
+      el.href      = t.href;
+      el.target    = '_blank';
+      el.rel       = 'noopener noreferrer';
+      el.className = 'griot-link';
+      el.textContent = t.label;
+      return el;
+    }
+    case TOKEN.EVENT_REF: {
+      const el = document.createElement('button');
+      el.type = 'button';
+      el.className = 'griot-chip griot-chip--event';
+      el.dataset.eventId = t.eventId;
+      el.innerHTML = `<span class="griot-chip__icon">⏱</span><span class="griot-chip__label">${escHtml(t.label)}</span>`;
+      if (opts.onEventClick) el.addEventListener('click', (e) => { e.stopPropagation(); opts.onEventClick(t.eventId); });
+      return el;
+    }
+    case TOKEN.CITE_REF: {
+      const el = document.createElement('button');
+      el.type = 'button';
+      el.className = 'griot-chip griot-chip--cite';
+      el.dataset.blockId = t.blockId;
+      el.innerHTML = `<span class="griot-chip__icon">📖</span><span class="griot-chip__label">${escHtml(t.label)}</span>`;
+      if (opts.onCiteClick) el.addEventListener('click', (e) => { e.stopPropagation(); opts.onCiteClick(t.blockId); });
+      return el;
     }
 
-    frag.appendChild(node);
+    default:
+      return document.createTextNode(t.text ?? '');
   }
-
-  return frag;
 }
 
-// ─── HTML string rendering ────────────────────────────────────────────────────
+// ── HTML string rendering ─────────────────────────────────────────────────────
+
 export function renderInlineToHTML(text = '') {
-  const tokens = tokenizeInline(text);
-  let html = '';
+  return tokenizeInline(text).map(_toHTML).join('');
+}
 
-  for (const t of tokens) {
-    switch (t.type) {
-      case TOKEN.TEXT:      html += escHtml(t.text);                                                   break;
-      case TOKEN.BOLD:      html += `<strong>${escHtml(t.text)}</strong>`;                             break;
-      case TOKEN.ITALIC:    html += `<em>${escHtml(t.text)}</em>`;                                     break;
-      case TOKEN.CODE:      html += `<code class="griot-inline-code">${escHtml(t.text)}</code>`;       break;
-      case TOKEN.LINK:      html += `<a class="griot-link" href="${escAttr(t.href)}" target="_blank" rel="noopener noreferrer">${escHtml(t.text)}</a>`; break;
-      case TOKEN.EVENT_REF: html += `<button type="button" class="griot-chip griot-chip--event" data-event-id="${escAttr(t.eventId)}"><span class="griot-chip__icon">⏱</span><span class="griot-chip__label">${escHtml(t.label)}</span></button>`; break;
-      case TOKEN.CITE_REF:  html += `<button type="button" class="griot-chip griot-chip--cite"  data-block-id="${escAttr(t.blockId)}"><span class="griot-chip__icon">📖</span><span class="griot-chip__label">${escHtml(t.label)}</span></button>`;  break;
-      default:              html += escHtml(t.text ?? '');
-    }
+function _toHTML(t) {
+  switch (t.type) {
+    case TOKEN.TEXT:       return escHtml(t.text);
+    case TOKEN.BOLD:       return `<strong>${escHtml(t.text)}</strong>`;
+    case TOKEN.ITALIC:     return `<em>${escHtml(t.text)}</em>`;
+    case TOKEN.UNDERLINE:  return `<u class="griot-underline">${escHtml(t.text)}</u>`;
+    case TOKEN.STRIKE:     return `<s class="griot-strike">${escHtml(t.text)}</s>`;
+    case TOKEN.HIGHLIGHT:  return `<mark class="griot-highlight">${escHtml(t.text)}</mark>`;
+    case TOKEN.COLOR_MARK: return `<span class="griot-color-mark" style="color:${escAttr(t.color)}">${escHtml(t.text)}</span>`;
+    case TOKEN.CODE:       return `<code class="griot-inline-code">${escHtml(t.code)}</code>`;
+    case TOKEN.IMAGE:      return `<img class="griot-inline-img" src="${escAttr(t.src)}" alt="${escAttr(t.alt ?? '')}">`;
+    case TOKEN.LINK:       return `<a class="griot-link" href="${escAttr(t.href)}" target="_blank" rel="noopener noreferrer">${escHtml(t.label)}</a>`;
+    case TOKEN.EVENT_REF:  return `<button type="button" class="griot-chip griot-chip--event" data-event-id="${escAttr(t.eventId)}"><span class="griot-chip__icon">⏱</span><span class="griot-chip__label">${escHtml(t.label)}</span></button>`;
+    case TOKEN.CITE_REF:   return `<button type="button" class="griot-chip griot-chip--cite" data-block-id="${escAttr(t.blockId)}"><span class="griot-chip__icon">📖</span><span class="griot-chip__label">${escHtml(t.label)}</span></button>`;
+    default:               return escHtml(t.text ?? '');
   }
-
-  return html;
 }
 
-// ─── Escape helpers ───────────────────────────────────────────────────────────
+// ── Escape helpers ────────────────────────────────────────────────────────────
+
 export function escHtml(s) {
   return String(s ?? '')
     .replace(/&/g, '&amp;')
@@ -122,7 +139,5 @@ export function escHtml(s) {
 }
 
 export function escAttr(s) {
-  return String(s ?? '')
-    .replace(/&/g, '&amp;')
-    .replace(/"/g, '&quot;');
-}
+  return String(s ?? '').replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}