@0m0g1/griot 0.1.2 → 0.1.4

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/editor/SlashMenu.js

@@ -0,0 +1,197 @@
+// ─── SlashMenu.js ─────────────────────────────────────────────────────────────
+// Slash-command palette. Triggered when '/' is typed at the very start of
+// an empty block editable. Shows a searchable list of block types grouped
+// by category.  Selecting an item calls onSelect(type).
+//
+// Usage (inside Editor):
+//   const menu = new SlashMenu(editorContainerEl, onSelect);
+//   menu.show(anchorEl);   // position near anchorEl
+//   menu.hide();
+//   menu.destroy();
+// ─────────────────────────────────────────────────────────────────────────────
+
+import { getAllTypes, getBlockDef, getTypesByCategory } from '../blocks/BlockSchema.js';
+
+const CATEGORIES = [
+  { key: 'text',      label: 'Text'      },
+  { key: 'media',     label: 'Media'     },
+  { key: 'embed',     label: 'Embed'     },
+  { key: 'structure', label: 'Structure' },
+];
+
+export class SlashMenu {
+  constructor(container, onSelect) {
+    this._container = container;
+    this._onSelect  = onSelect;
+    this._el        = null;
+    this._query     = '';
+    this._idx       = 0;
+    this._items     = [];   // filtered list of type strings
+    this._visible   = false;
+
+    this._build();
+  }
+
+  // ── Public ────────────────────────────────────────────────────────────────
+
+  /** Show menu anchored below anchorEl. */
+  show(anchorEl) {
+    this._query = '';
+    this._refresh();
+    this._visible = true;
+    this._el.style.display = 'block';
+    this._reposition(anchorEl);
+    this._el.querySelector('.griot-slash__search')?.focus();
+  }
+
+  /** Filter list to items matching query string (the text after '/'). */
+  filter(query) {
+    this._query = query;
+    this._refresh();
+    if (!this._items.length) { this.hide(); return; }
+    this._reposition(this._anchorEl);
+  }
+
+  hide() {
+    this._visible = false;
+    if (this._el) this._el.style.display = 'none';
+  }
+
+  get visible() { return this._visible; }
+
+  /** Handle keydown while slash menu is open. Returns true if consumed. */
+  handleKey(e) {
+    if (!this._visible) return false;
+    if (e.key === 'ArrowDown')  { e.preventDefault(); this._move(1);  return true; }
+    if (e.key === 'ArrowUp')    { e.preventDefault(); this._move(-1); return true; }
+    if (e.key === 'Enter')      { e.preventDefault(); this._select(); return true; }
+    if (e.key === 'Escape')     { e.preventDefault(); this.hide();    return true; }
+    return false;
+  }
+
+  destroy() {
+    this._el?.remove();
+    this._el = null;
+  }
+
+  // ── Build ─────────────────────────────────────────────────────────────────
+
+  _build() {
+    const el = document.createElement('div');
+    el.className = 'griot-slash';
+    el.setAttribute('role', 'listbox');
+    el.setAttribute('aria-label', 'Block type');
+
+    const search = document.createElement('input');
+    search.type = 'text';
+    search.className = 'griot-slash__search';
+    search.placeholder = 'Search blocks…';
+    search.addEventListener('input', () => { this._query = search.value; this._refresh(); });
+    search.addEventListener('keydown', e => { this.handleKey(e); });
+
+    const list = document.createElement('div');
+    list.className = 'griot-slash__list';
+
+    el.append(search, list);
+    document.body.appendChild(el);
+    this._el    = el;
+    this._list  = list;
+    this._search = search;
+
+    // Hide on outside click
+    this._onDocClick = (e) => { if (this._visible && !el.contains(e.target)) this.hide(); };
+    document.addEventListener('mousedown', this._onDocClick);
+  }
+
+  _refresh() {
+    const q      = this._query.toLowerCase().trim();
+    this._list.innerHTML = '';
+    this._items  = [];
+    this._idx    = 0;
+
+    const all    = getAllTypes();
+    const filtered = q
+      ? all.filter(t => {
+          const d = getBlockDef(t);
+          return d.slashLabel?.toLowerCase().includes(q) || t.includes(q) || d.label.toLowerCase().includes(q);
+        })
+      : all;
+
+    // Group by category when not searching
+    const groups = q
+      ? [{ key: 'results', label: 'Results', types: filtered }]
+      : CATEGORIES.map(c => ({ ...c, types: filtered.filter(t => getBlockDef(t).category === c.key) })).filter(g => g.types.length);
+
+    for (const group of groups) {
+      const hdr = document.createElement('div');
+      hdr.className = 'griot-slash__group';
+      hdr.textContent = group.label;
+      this._list.appendChild(hdr);
+
+      for (const type of group.types) {
+        const def = getBlockDef(type);
+        const idx = this._items.length;
+        this._items.push(type);
+
+        const item = document.createElement('div');
+        item.className = 'griot-slash__item';
+        item.setAttribute('role', 'option');
+        item.dataset.idx = idx;
+        item.innerHTML = `<span class="griot-slash__item-icon">${def.icon}</span><span class="griot-slash__item-label">${def.slashLabel ?? def.label}</span>`;
+
+        item.addEventListener('mousedown', (e) => {
+          e.preventDefault();
+          this._idx = idx;
+          this._select();
+        });
+        item.addEventListener('mouseover', () => { this._idx = idx; this._highlight(); });
+
+        this._list.appendChild(item);
+      }
+    }
+
+    this._highlight();
+  }
+
+  _highlight() {
+    for (const el of this._list.querySelectorAll('.griot-slash__item')) {
+      el.classList.toggle('is-active', Number(el.dataset.idx) === this._idx);
+    }
+    // Scroll into view
+    const active = this._list.querySelector('.griot-slash__item.is-active');
+    active?.scrollIntoView({ block: 'nearest' });
+  }
+
+  _move(dir) {
+    this._idx = Math.max(0, Math.min(this._items.length - 1, this._idx + dir));
+    this._highlight();
+  }
+
+  _select() {
+    const type = this._items[this._idx];
+    if (type) { this.hide(); this._onSelect(type); }
+  }
+
+  _reposition(anchorEl) {
+    this._anchorEl = anchorEl;
+    if (!anchorEl || !this._el) return;
+
+    requestAnimationFrame(() => {
+      const rect  = anchorEl.getBoundingClientRect();
+      const menuH = this._el.offsetHeight || 280;
+      let top  = rect.bottom + window.scrollY + 4;
+      let left = rect.left   + window.scrollX;
+
+      // Flip above if too close to bottom
+      if (rect.bottom + menuH + 8 > window.innerHeight) {
+        top = rect.top + window.scrollY - menuH - 4;
+      }
+      // Clamp left
+      left = Math.min(left, window.scrollX + window.innerWidth - 280 - 8);
+      left = Math.max(left, window.scrollX + 8);
+
+      this._el.style.top  = `${top}px`;
+      this._el.style.left = `${left}px`;
+    });
+  }
+}