@0m0g1/griot 0.1.0

package/src/editor/Keyboard.js

@@ -0,0 +1,169 @@
+// ─── 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.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * @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
+ */
+export function attachKeyboardHandler(el, blockId, callbacks) {
+  el.addEventListener('keydown', (e) => {
+    const {
+      onEnter, onBackspaceAtStart, onDeleteAtEnd,
+      onTab, onArrowUp, onArrowDown, onUndo, onRedo,
+    } = callbacks;
+
+    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')) {
+      e.preventDefault();
+      onRedo?.();
+      return;
+    }
+
+    // ── Enter → split block ──────────────────────────────────────
+    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()) {
+      e.preventDefault();
+      onBackspaceAtStart?.(blockId);
+      return;
+    }
+
+    // ── Delete at end → merge next into this ─────────────────────
+    if (e.key === 'Delete' && getCursorOffset(el) === el.textContent.length && !hasSelection()) {
+      e.preventDefault();
+      onDeleteAtEnd?.(blockId);
+      return;
+    }
+
+    // ── 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;
+    }
+  });
+}
+
+// ─── Cursor helpers ───────────────────────────────────────────────────────────
+
+/** Returns the character offset of the caret within el.textContent */
+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;
+}
+
+/** Place the caret at a specific character offset within el */
+export function setCursorOffset(el, offset) {
+  const range = document.createRange();
+  const sel   = window.getSelection();
+  if (!sel) return;
+
+  let remaining = offset;
+  let found = false;
+
+  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);
+        found = true;
+      } else {
+        remaining -= node.textContent.length;
+      }
+    } else {
+      for (const child of node.childNodes) walk(child);
+    }
+  }
+
+  walk(el);
+
+  if (!found) {
+    // Clamp to end
+    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);
+}
+
+/** Focus el and place caret at start */
+export function focusAtStart(el) {
+  el.focus();
+  setCursorOffset(el, 0);
+}
+
+// ─── Line detection ───────────────────────────────────────────────────────────
+function hasSelection() {
+  const sel = window.getSelection();
+  return sel && sel.type === 'Range';
+}
+
+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 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;
+}

package/src/inline/InlineLexer.js

@@ -0,0 +1,90 @@
+// ─── 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).
+//
+// 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 }
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const TOKEN = Object.freeze({
+  TEXT:      'text',
+  BOLD:      'bold',
+  ITALIC:    'italic',
+  CODE:      'code',
+  LINK:      'link',
+  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'
+);
+
+export function tokenizeInline(text = '') {
+  if (!text) return [];
+
+  const tokens = [];
+  let last = 0;
+  let m;
+
+  INLINE_RE.lastIndex = 0;
+
+  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) });
+    }
+
+    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) });
+  }
+
+  return tokens.length ? tokens : [{ type: TOKEN.TEXT, text }];
+}

package/src/inline/InlineRenderer.js

@@ -0,0 +1,128 @@
+// ─── InlineRenderer.js ────────────────────────────────────────────────────────
+// 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 ────────────────────────────────────────────────────────────
+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;
+      }
+
+      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;
+      }
+
+      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;
+      }
+
+      default:
+        node = document.createTextNode(t.text ?? '');
+    }
+
+    frag.appendChild(node);
+  }
+
+  return frag;
+}
+
+// ─── HTML string rendering ────────────────────────────────────────────────────
+export function renderInlineToHTML(text = '') {
+  const tokens = tokenizeInline(text);
+  let html = '';
+
+  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 ?? '');
+    }
+  }
+
+  return html;
+}
+
+// ─── Escape helpers ───────────────────────────────────────────────────────────
+export function escHtml(s) {
+  return String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function escAttr(s) {
+  return String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;');
+}

package/src/viewer/Viewer.js

@@ -0,0 +1,92 @@
+// ─── Viewer.js ────────────────────────────────────────────────────────────────
+// Read-only renderer. Mounts into a container div (never an iframe).
+// Plain div keeps event callbacks working without postMessage.
+//
+// Usage:
+//   const viewer = new Viewer(containerEl, {
+//     doc,
+//     books,
+//     onEventClick(eventId) {},
+//     onCiteClick(blockId) {},
+//     highlightBlockId: null,
+//   });
+//   viewer.setHighlight(blockId);  // highlight + scroll to a block
+//   viewer.destroy();
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { anchorId, scrollToBlock }   from '../core/Block.js';
+import { renderBlock }               from '../blocks/BlockRenderer.js';
+
+export class Viewer {
+  constructor(container, options = {}) {
+    this._container = container;
+    this._options   = options;
+    this._doc       = options.doc ?? null;
+    this._books     = options.books ?? [];
+    this._highlighted = options.highlightBlockId ?? null;
+    this._hlTimer   = null;
+
+    container.classList.add('griot-viewer');
+    if (this._doc) this._render();
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  setDoc(doc) {
+    this._doc = doc;
+    this._render();
+  }
+
+  setBooks(books) {
+    this._books = books;
+    this._render();
+  }
+
+  /** Scroll to block and briefly highlight it */
+  setHighlight(blockId, { scroll = true, behavior = 'smooth' } = {}) {
+    // Remove old highlight
+    clearTimeout(this._hlTimer);
+    if (this._highlighted) {
+      document.getElementById(anchorId(this._highlighted))
+        ?.classList.remove('griot-block--highlight');
+    }
+
+    this._highlighted = blockId;
+    const el = document.getElementById(anchorId(blockId));
+    if (!el) return;
+
+    el.classList.add('griot-block--highlight');
+    if (scroll) scrollToBlock(blockId, behavior);
+
+    this._hlTimer = setTimeout(() => {
+      el.classList.remove('griot-block--highlight');
+      this._highlighted = null;
+    }, 2200);
+  }
+
+  destroy() {
+    clearTimeout(this._hlTimer);
+    this._container.innerHTML = '';
+    this._container.classList.remove('griot-viewer');
+  }
+
+  // ── Rendering ───────────────────────────────────────────────────────────────
+
+  _render() {
+    this._container.innerHTML = '';
+    if (!this._doc) return;
+
+    const opts = {
+      books:        this._books,
+      onEventClick: this._options.onEventClick,
+      onCiteClick:  this._options.onCiteClick,
+    };
+
+    for (const block of this._doc.blocks) {
+      const el = renderBlock(block, opts);
+      if (!el) continue;
+      if (block.id === this._highlighted) el.classList.add('griot-block--highlight');
+      this._container.appendChild(el);
+    }
+  }
+}