@0m0g1/griot 0.1.2 → 0.1.3

package/src/editor/FormatToolbar.js

@@ -0,0 +1,138 @@
+// ─── FormatToolbar.js ─────────────────────────────────────────────────────────
+// Floating toolbar that appears above a text selection inside the editor.
+// Provides one-click inline formatting (bold, italic, underline, etc.) and
+// link / color-mark insertion.
+//
+// Usage:
+//   const tb = new FormatToolbar(editorContainerEl, {
+//     onWrap(syntax)  {},  // wrap selection with syntax chars e.g. '**'
+//     onLink()        {},  // open link insertion prompt
+//     onColor()       {},  // open color-mark prompt
+//   });
+//   tb.destroy();
+// ─────────────────────────────────────────────────────────────────────────────
+
+const FORMATS = [
+  { key: 'bold',      label: 'B',  title: 'Bold (Ctrl+B)',      syntax: '**'  },
+  { key: 'italic',    label: 'I',  title: 'Italic (Ctrl+I)',    syntax: '*'   },
+  { key: 'underline', label: 'U',  title: 'Underline (Ctrl+U)', syntax: '__'  },
+  { key: 'strike',    label: 'S̶',  title: 'Strikethrough',      syntax: '~~'  },
+  { key: 'code',      label: '`',  title: 'Inline Code',        syntax: '`'   },
+  { key: 'highlight', label: '▐',  title: 'Highlight',          syntax: '=='  },
+  { key: 'link',      label: '🔗', title: 'Link',               action: 'link'  },
+  { key: 'color',     label: '🎨', title: 'Color',              action: 'color' },
+];
+
+export class FormatToolbar {
+  constructor(container, callbacks = {}) {
+    this._container = container;
+    this._cb        = callbacks;
+    this._el        = null;
+    this._visible   = false;
+
+    this._build();
+    this._attach();
+  }
+
+  // ── Build DOM ────────────────────────────────────────────────────────────────
+
+  _build() {
+    const el = document.createElement('div');
+    el.className  = 'griot-format-toolbar';
+    el.setAttribute('role', 'toolbar');
+    el.setAttribute('aria-label', 'Inline formatting');
+
+    for (const fmt of FORMATS) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = `griot-format-toolbar__btn griot-ftb--${fmt.key}`;
+      btn.title     = fmt.title;
+      btn.textContent = fmt.label;
+
+      btn.addEventListener('mousedown', (e) => {
+        e.preventDefault(); // preserve selection before acting
+        if (fmt.syntax)         this._cb.onWrap?.(fmt.syntax);
+        else if (fmt.action === 'link')  this._cb.onLink?.();
+        else if (fmt.action === 'color') this._cb.onColor?.();
+        this._hide();
+      });
+
+      el.appendChild(btn);
+    }
+
+    document.body.appendChild(el);
+    this._el = el;
+  }
+
+  // ── Event listeners ──────────────────────────────────────────────────────────
+
+  _attach() {
+    // Show after mouse release inside editor
+    this._onMouseUp = () => setTimeout(() => this._checkAndShow(), 20);
+    this._container.addEventListener('mouseup', this._onMouseUp);
+
+    // Show after Shift+arrow / Ctrl+A keyboard selection
+    this._onKeyUp = (e) => {
+      if (e.shiftKey || ((e.ctrlKey || e.metaKey) && e.key === 'a')) {
+        setTimeout(() => this._checkAndShow(), 20);
+      }
+    };
+    this._container.addEventListener('keyup', this._onKeyUp);
+
+    // Hide when clicking anywhere outside the toolbar
+    this._onDocDown = (e) => {
+      if (this._visible && !this._el.contains(e.target)) this._hide();
+    };
+    document.addEventListener('mousedown', this._onDocDown);
+  }
+
+  // ── Visibility ───────────────────────────────────────────────────────────────
+
+  _checkAndShow() {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || !sel.rangeCount) { this._hide(); return; }
+
+    const range = sel.getRangeAt(0);
+    if (!this._container.contains(range.commonAncestorContainer)) { this._hide(); return; }
+    if (!range.toString().trim()) { this._hide(); return; }
+
+    this._show(range.getBoundingClientRect());
+  }
+
+  _show(rect) {
+    const el = this._el;
+    el.style.display = 'flex';
+
+    requestAnimationFrame(() => {
+      const tbW = el.offsetWidth  || 280;
+      const tbH = el.offsetHeight || 36;
+
+      let left = rect.left + rect.width / 2 - tbW / 2 + window.scrollX;
+      let top  = rect.top  - tbH - 10 + window.scrollY;
+
+      // Clamp horizontally
+      left = Math.max(8 + window.scrollX, Math.min(left, window.scrollX + window.innerWidth - tbW - 8));
+      // Flip below if too close to top
+      if (top < window.scrollY + 8) top = rect.bottom + 8 + window.scrollY;
+
+      el.style.left = `${left}px`;
+      el.style.top  = `${top}px`;
+      this._visible = true;
+    });
+  }
+
+  _hide() {
+    if (this._el) this._el.style.display = 'none';
+    this._visible = false;
+  }
+
+  // ── Lifecycle ────────────────────────────────────────────────────────────────
+
+  destroy() {
+    this._container.removeEventListener('mouseup', this._onMouseUp);
+    this._container.removeEventListener('keyup',   this._onKeyUp);
+    document.removeEventListener('mousedown', this._onDocDown);
+    this._el?.remove();
+    this._el = null;
+  }
+}

package/src/editor/Keyboard.js

@@ -1,169 +1,155 @@
-// ─── Keyboard.js ──────────────────────────────────────────────────────────────
-// All keyboard behaviour for the block editor.
-// Pure logic — receives the current doc + focused block ID, returns events
-// the Editor class acts on.
-//
-// Exported: attachKeyboardHandler(el, callbacks)
-//   Attaches a keydown listener to a contenteditable element for one block.
-//   Calls back into Editor which owns the document state.
+// ─── Keyboard.js ─────────────────────────────────────────────────────────────
+// Keyboard event handling for contenteditable editor blocks.
+// Also exports cursor position helpers shared by Editor and FormatToolbar.
 // ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * @param {HTMLElement}  el         The contenteditable element
- * @param {object}       callbacks
- *   onEnter(blockId, offset)       — Enter pressed: split at cursor offset
- *   onBackspaceAtStart(blockId)    — Backspace at offset 0: merge with prev
- *   onDeleteAtEnd(blockId)         — Delete at end: merge next into this
- *   onTab(blockId, shift)          — Tab / Shift+Tab
- *   onArrowUp(blockId)             — Arrow up at first line → move focus to prev block
- *   onArrowDown(blockId)           — Arrow down at last line → move focus to next block
- *   onUndo()                       — Ctrl/Cmd+Z
- *   onRedo()                       — Ctrl/Cmd+Shift+Z or Ctrl+Y
+ * Attach all editor keyboard shortcuts to a contenteditable element.
+ *
+ * Callbacks:
+ *   onEnter(id, offset)       — Enter (no shift)
+ *   onBackspaceAtStart(id)    — Backspace at offset 0 with no selection
+ *   onDeleteAtEnd(id)         — Delete at end with no selection
+ *   onTab(id, isShift)        — Tab / Shift+Tab
+ *   onArrowUp(id)             — ↑ on first visual line
+ *   onArrowDown(id)           — ↓ on last visual line
+ *   onUndo()                  — Ctrl/Cmd+Z
+ *   onRedo()                  — Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z
+ *   onFormatKey(key)          — Ctrl/Cmd+B/I/U
  */
-export function attachKeyboardHandler(el, blockId, callbacks) {
-  el.addEventListener('keydown', (e) => {
-    const {
-      onEnter, onBackspaceAtStart, onDeleteAtEnd,
-      onTab, onArrowUp, onArrowDown, onUndo, onRedo,
-    } = callbacks;
+export function attachKeyboardHandler(el, blockId, callbacks = {}) {
+  const {
+    onEnter, onBackspaceAtStart, onDeleteAtEnd,
+    onTab, onArrowUp, onArrowDown,
+    onUndo, onRedo, onFormatKey,
+  } = callbacks;
 
+  el.addEventListener('keydown', (e) => {
     const ctrl = e.ctrlKey || e.metaKey;
 
-    // ── Undo / Redo ──────────────────────────────────────────────
-    if (ctrl && e.key === 'z' && !e.shiftKey) {
-      e.preventDefault();
-      onUndo?.();
-      return;
-    }
-    if ((ctrl && e.key === 'z' && e.shiftKey) || (ctrl && e.key === 'y')) {
+    // ── Undo / Redo ───────────────────────────────────────────────────────────
+    if (ctrl && e.key === 'z' && !e.shiftKey) { e.preventDefault(); onUndo?.();  return; }
+    if (ctrl && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault(); onRedo?.(); return; }
+
+    // ── Inline format shortcuts ───────────────────────────────────────────────
+    if (ctrl && ['b', 'i', 'u'].includes(e.key.toLowerCase())) {
       e.preventDefault();
-      onRedo?.();
+      onFormatKey?.(e.key.toLowerCase());
       return;
     }
 
-    // ── Enter → split block ──────────────────────────────────────
+    // ── Enter ─────────────────────────────────────────────────────────────────
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       onEnter?.(blockId, getCursorOffset(el));
       return;
     }
 
-    // ── Backspace at start → merge with previous ─────────────────
-    if (e.key === 'Backspace' && getCursorOffset(el) === 0 && !hasSelection()) {
+    // ── Backspace at start ────────────────────────────────────────────────────
+    if (e.key === 'Backspace' && getCursorOffset(el) === 0 && selLen(el) === 0) {
       e.preventDefault();
       onBackspaceAtStart?.(blockId);
       return;
     }
 
-    // ── Delete at end → merge next into this ─────────────────────
-    if (e.key === 'Delete' && getCursorOffset(el) === el.textContent.length && !hasSelection()) {
+    // ── Delete at end ─────────────────────────────────────────────────────────
+    if (e.key === 'Delete' && isAtEnd(el) && selLen(el) === 0) {
       e.preventDefault();
       onDeleteAtEnd?.(blockId);
       return;
     }
 
-    // ── Tab ───────────────────────────────────────────────────────
+    // ── Tab ───────────────────────────────────────────────────────────────────
     if (e.key === 'Tab') {
       e.preventDefault();
       onTab?.(blockId, e.shiftKey);
       return;
     }
 
-    // ── Arrow navigation across blocks ───────────────────────────
-    if (e.key === 'ArrowUp' && isAtFirstLine(el)) {
-      e.preventDefault();
-      onArrowUp?.(blockId);
-      return;
-    }
-    if (e.key === 'ArrowDown' && isAtLastLine(el)) {
-      e.preventDefault();
-      onArrowDown?.(blockId);
-      return;
-    }
+    // ── Arrow navigation between blocks ──────────────────────────────────────
+    if (e.key === 'ArrowUp'   && isOnFirstLine(el)) { e.preventDefault(); onArrowUp?.(blockId); }
+    if (e.key === 'ArrowDown' && isOnLastLine(el))  { e.preventDefault(); onArrowDown?.(blockId); }
   });
 }
 
-// ─── Cursor helpers ───────────────────────────────────────────────────────────
+// ── Cursor offset helpers ─────────────────────────────────────────────────────
 
-/** Returns the character offset of the caret within el.textContent */
+/** Character offset of the caret within `el`. */
 export function getCursorOffset(el) {
   const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return 0;
-  const range = sel.getRangeAt(0).cloneRange();
-  range.selectNodeContents(el);
-  range.setEnd(sel.getRangeAt(0).endContainer, sel.getRangeAt(0).endOffset);
-  return range.toString().length;
+  if (!sel?.rangeCount) return 0;
+  const r   = sel.getRangeAt(0);
+  const pre = r.cloneRange();
+  pre.selectNodeContents(el);
+  pre.setEnd(r.startContainer, r.startOffset);
+  return pre.toString().length;
+}
+
+/** { start, end } character offsets of the current selection within `el`. */
+export function getSelectionOffsets(el) {
+  const sel = window.getSelection();
+  if (!sel?.rangeCount) return { start: 0, end: 0 };
+  const r   = sel.getRangeAt(0);
+  const pre = r.cloneRange();
+  pre.selectNodeContents(el);
+  pre.setEnd(r.startContainer, r.startOffset);
+  const start = pre.toString().length;
+  const end   = start + r.toString().length;
+  return { start, end };
 }
 
-/** Place the caret at a specific character offset within el */
+/** Move the caret to `offset` characters from the start of `el`. */
 export function setCursorOffset(el, offset) {
-  const range = document.createRange();
   const sel   = window.getSelection();
-  if (!sel) return;
-
-  let remaining = offset;
-  let found = false;
+  const range = document.createRange();
+  let rem = offset, found = false;
 
-  function walk(node) {
+  (function walk(node) {
     if (found) return;
     if (node.nodeType === Node.TEXT_NODE) {
-      if (remaining <= node.textContent.length) {
-        range.setStart(node, remaining);
-        range.setEnd(node, remaining);
+      if (rem <= node.length) {
+        range.setStart(node, rem);
+        range.setEnd(node, rem);
         found = true;
       } else {
-        remaining -= node.textContent.length;
+        rem -= node.length;
       }
     } else {
-      for (const child of node.childNodes) walk(child);
+      node.childNodes.forEach(walk);
     }
-  }
-
-  walk(el);
-
-  if (!found) {
-    // Clamp to end
-    range.selectNodeContents(el);
-    range.collapse(false);
-  }
+  })(el);
 
+  if (!found) { range.selectNodeContents(el); range.collapse(false); }
   sel.removeAllRanges();
   sel.addRange(range);
 }
 
-/** Focus el and place caret at end */
-export function focusAtEnd(el) {
-  el.focus();
-  setCursorOffset(el, el.textContent.length);
-}
+export function focusAtEnd(el)   { el.focus(); setCursorOffset(el, el.textContent?.length ?? 0); }
+export function focusAtStart(el) { el.focus(); setCursorOffset(el, 0); }
 
-/** Focus el and place caret at start */
-export function focusAtStart(el) {
-  el.focus();
-  setCursorOffset(el, 0);
-}
+// ── Internal helpers ──────────────────────────────────────────────────────────
 
-// ─── Line detection ───────────────────────────────────────────────────────────
-function hasSelection() {
-  const sel = window.getSelection();
-  return sel && sel.type === 'Range';
+function selLen(el) {
+  try { return window.getSelection()?.getRangeAt(0)?.toString().length ?? 0; }
+  catch { return 0; }
 }
 
-function isAtFirstLine(el) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return false;
-  const range = sel.getRangeAt(0);
-  const rect  = range.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  // Within 1.5x line-height from top
-  return Math.abs(rect.top - elRect.top) < 30;
+function isAtEnd(el) {
+  return getCursorOffset(el) >= (el.textContent?.length ?? 0);
 }
 
-function isAtLastLine(el) {
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return false;
-  const range = sel.getRangeAt(0);
-  const rect  = range.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  return Math.abs(rect.bottom - elRect.bottom) < 30;
+function isOnFirstLine(el) {
+  try {
+    const sel = window.getSelection();
+    if (!sel?.rangeCount) return true;
+    return sel.getRangeAt(0).getBoundingClientRect().top < el.getBoundingClientRect().top + 10;
+  } catch { return true; }
 }
+
+function isOnLastLine(el) {
+  try {
+    const sel = window.getSelection();
+    if (!sel?.rangeCount) return true;
+    return sel.getRangeAt(0).getBoundingClientRect().bottom > el.getBoundingClientRect().bottom - 10;
+  } catch { return true; }
+}

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 }];
-}
+}