@oix1987/yjd 2.0.0 → 2.1.1

package/lib/modules/mention.js

@@ -0,0 +1,228 @@
+import Module from '../core/module.js';
+
+/**
+ * @mention module — trigger-based autocomplete that inserts a token carrying an
+ * id, so the serialized HTML/Markdown can tell the server who was tagged.
+ *
+ *   new Editor(el, {
+ *     mention: {
+ *       trigger: '@',
+ *       source: async (query) => [{ id, name, avatar_url }],
+ *       renderItem: (item) => `<img src="${item.avatar_url}"> ${item.name}`,
+ *       // optional extra triggers, e.g. '#' for task refs:
+ *       triggers: [{ char: '#', source: async (q) => [...] }]
+ *     }
+ *   })
+ *
+ * Token HTML: <span class="mention" data-id="ID" data-trigger="@"
+ *               contenteditable="false">@Name</span>
+ * → getMarkdown() emits `@[Name](id)`. Fires editor.on('mention:select', item).
+ */
+export default class Mention extends Module {
+  // --rte-* theme vars copied onto the portaled menu when it opens.
+  static THEME_VARS = ['--rte-accent', '--rte-accent-ink', '--rte-accent-weak', '--rte-ink', '--rte-muted', '--rte-border', '--rte-bg', '--rte-radius-md', '--rte-shadow'];
+
+  constructor(editor, options = {}) {
+    super(editor, options);
+    this.isOpen = false;
+    this.activeIndex = 0;
+    this.items = [];
+    this.sources = this._buildSources();
+    this.buildMenu();
+    this.bindEvents();
+  }
+
+  _buildSources() {
+    const cfg = this.editor.options.mention || this.options || {};
+    const map = {};
+    const renderItem = cfg.renderItem;
+    if (typeof cfg.source === 'function') {
+      map[cfg.trigger || '@'] = { source: cfg.source, renderItem: cfg.renderItem || renderItem };
+    }
+    (cfg.triggers || []).forEach((t) => {
+      if (t && t.char && typeof t.source === 'function') {
+        map[t.char] = { source: t.source, renderItem: t.renderItem || renderItem };
+      }
+    });
+    return map;
+  }
+
+  get enabled() { return Object.keys(this.sources).length > 0; }
+
+  buildMenu() {
+    const menu = document.createElement('div');
+    menu.className = 'yjd-mention-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.style.display = 'none';
+    this.menu = menu;
+    document.body.appendChild(menu);
+  }
+
+  bindEvents() {
+    if (!this.enabled) return;
+    this._onInput = () => this.handleInput();
+    this.editor.editor.addEventListener('input', this._onInput);
+
+    this._onKeydown = (e) => {
+      if (!this.isOpen) return;
+      // Stop here (capture phase) so an outer Enter-to-submit handler doesn't
+      // also fire once choose() closes the menu.
+      const handled = ['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape'].includes(e.key);
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+      if (e.key === 'ArrowDown') this.move(1);
+      else if (e.key === 'ArrowUp') this.move(-1);
+      else if (e.key === 'Enter' || e.key === 'Tab') this.choose(this.activeIndex);
+      else if (e.key === 'Escape') this.close();
+    };
+    this.editor.editor.addEventListener('keydown', this._onKeydown, true);
+
+    this._onDocPointer = (e) => { if (this.isOpen && !this.menu.contains(e.target)) this.close(); };
+    document.addEventListener('pointerdown', this._onDocPointer, true);
+  }
+
+  handleInput() {
+    const sel = window.getSelection();
+    if (!sel || !sel.isCollapsed || !sel.rangeCount) return this.close();
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return this.close();
+
+    const triggers = Object.keys(this.sources).map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('');
+    const before = node.textContent.slice(0, range.startOffset);
+    const m = before.match(new RegExp(`(?:^|\\s)([${triggers}])([^\\s${triggers}]*)$`));
+    if (!m) return this.close();
+
+    this.char = m[1];
+    this.query = m[2];
+    this.node = node;
+    this.start = range.startOffset - this.query.length - 1; // index of trigger char
+    this._loadFor(range);
+  }
+
+  _loadFor(range) {
+    const src = this.sources[this.char];
+    if (!src) return this.close();
+    clearTimeout(this._t);
+    const q = this.query, char = this.char;
+    this._t = setTimeout(() => {
+      Promise.resolve(src.source(q)).then((items) => {
+        // Ignore stale responses (user kept typing / switched trigger).
+        if (this.char !== char || this.query !== q) return;
+        this.items = Array.isArray(items) ? items : [];
+        if (!this.items.length) return this.close();
+        this.activeIndex = 0;
+        this.render(src.renderItem);
+        this.open(range);
+      }).catch(() => this.close());
+    }, 120);
+  }
+
+  open(range) {
+    this.isOpen = true;
+    this.menu.style.display = 'block';
+    this._applyTheme();
+    const rect = range.getBoundingClientRect();
+    const x = rect.left || (range.startContainer.parentElement || this.editor.editor).getBoundingClientRect().left;
+    const y = rect.bottom || rect.top;
+    this.menu.style.left = `${Math.round(x + window.scrollX)}px`;
+    this.menu.style.top = `${Math.round(y + window.scrollY + 6)}px`;
+    const mh = this.menu.offsetHeight;
+    if (rect.bottom + mh + 8 > window.innerHeight) {
+      this.menu.style.top = `${Math.round(rect.top + window.scrollY - mh - 6)}px`;
+    }
+  }
+
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.menu.style.display = 'none';
+  }
+
+  /**
+   * The menu is portaled to <body>, so it can't inherit the editor's --rte-*
+   * theme vars. Copy them across when opening so a themed editor themes its
+   * mention menu too (no need to re-declare the vars on .yjd-mention-menu).
+   */
+  _applyTheme() {
+    const root = this.editor.wrapper || this.editor.root;
+    if (!root) return;
+    const cs = getComputedStyle(root);
+    Mention.THEME_VARS.forEach((v) => {
+      const val = cs.getPropertyValue(v);
+      if (val) this.menu.style.setProperty(v, val.trim());
+    });
+  }
+
+  move(d) {
+    this.activeIndex = (this.activeIndex + d + this.items.length) % this.items.length;
+    [...this.menu.children].forEach((el, i) => {
+      el.classList.toggle('active', i === this.activeIndex);
+      el.setAttribute('aria-selected', i === this.activeIndex ? 'true' : 'false');
+    });
+  }
+
+  render(renderItem) {
+    this.menu.innerHTML = '';
+    this.items.forEach((item, i) => {
+      const el = document.createElement('button');
+      el.type = 'button';
+      el.className = 'yjd-mention-item' + (i === this.activeIndex ? ' active' : '');
+      el.setAttribute('role', 'option');
+      el.setAttribute('aria-selected', i === this.activeIndex ? 'true' : 'false');
+      const label = item.name || item.label || item.id || '';
+      // Default row: avatar (or an item.icon for special entries like "@all"),
+      // then the name. Apps only need a custom renderItem for richer layouts.
+      const media = item.avatar_url
+        ? `<img class="yjd-mention-avatar" src="${item.avatar_url}" alt="">`
+        : (item.icon ? `<span class="yjd-mention-ico">${item.icon}</span>` : '');
+      el.innerHTML = typeof renderItem === 'function'
+        ? renderItem(item)
+        : `${media}<span class="yjd-mention-name">${this.char}${label}</span>`;
+      el.addEventListener('pointerdown', (e) => { e.preventDefault(); this.choose(i); });
+      this.menu.appendChild(el);
+    });
+  }
+
+  choose(index) {
+    const item = this.items[index];
+    if (!item) return this.close();
+    const name = item.name || item.label || item.id || '';
+    try {
+      const node = this.node;
+      const sel = window.getSelection();
+      const del = document.createRange();
+      del.setStart(node, this.start);
+      del.setEnd(node, this.start + this.query.length + 1);
+      del.deleteContents();
+
+      const span = document.createElement('span');
+      span.className = 'mention';
+      span.setAttribute('data-id', String(item.id != null ? item.id : ''));
+      span.setAttribute('data-trigger', this.char);
+      span.setAttribute('contenteditable', 'false');
+      span.textContent = this.char + name;
+      del.insertNode(span);
+
+      const space = document.createTextNode(' ');
+      span.after(space);
+      const caret = document.createRange();
+      caret.setStart(space, 1);
+      caret.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(caret);
+    } catch (e) { /* node moved */ }
+
+    this.close();
+    this.editor.focus();
+    if (typeof this.editor.onContentChange === 'function') this.editor.onContentChange();
+    this.editor.emit('mention:select', item);
+  }
+
+  destroy() {
+    if (this._onInput) this.editor.editor.removeEventListener('input', this._onInput);
+    if (this._onKeydown) this.editor.editor.removeEventListener('keydown', this._onKeydown, true);
+    if (this._onDocPointer) document.removeEventListener('pointerdown', this._onDocPointer, true);
+    if (this.menu && this.menu.parentNode) this.menu.parentNode.removeChild(this.menu);
+    super.destroy();
+  }
+}

package/lib/modules/slash-menu.js

@@ -60,10 +60,12 @@ export default class SlashMenu extends Module {
     // Keyboard interaction while open (capture so we beat other handlers).
     this._onKeydown = (e) => {
       if (!this.isOpen) return;
-      if (e.key === 'ArrowDown') { e.preventDefault(); this.move(1); }
-      else if (e.key === 'ArrowUp') { e.preventDefault(); this.move(-1); }
-      else if (e.key === 'Enter') { e.preventDefault(); this.choose(this.activeIndex); }
-      else if (e.key === 'Escape') { e.preventDefault(); this.close(); }
+      const handled = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key);
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+      if (e.key === 'ArrowDown') this.move(1);
+      else if (e.key === 'ArrowUp') this.move(-1);
+      else if (e.key === 'Enter') this.choose(this.activeIndex);
+      else if (e.key === 'Escape') this.close();
     };
     this.editor.editor.addEventListener('keydown', this._onKeydown, true);
 

package/lib/modules/toolbar.js

@@ -49,6 +49,33 @@ class Toolbar extends Module {
         ],
         toolbar2: []
       };
+    } else if (options.toolbar === 'full') {
+      // Explicit full preset == the defaults.
+      this.options = { ...Toolbar.DEFAULTS, ...options };
+    } else if (options.toolbar === 'compact') {
+      // One tidy row of the essentials — good for comment boxes.
+      this.options = {
+        container: null,
+        toolbar1: [
+          { group: 'text-format', items: ['bold', 'italic', 'underline'] },
+          { group: 'link', items: ['link'] },
+          { group: 'paragraph-ops', items: ['list'] },
+          { group: 'insert', items: ['image', 'emoji'] },
+          { group: 'more', items: ['more'] }
+        ],
+        toolbar2: []
+      };
+    } else if (options.toolbar && typeof options.toolbar === 'object' && Array.isArray(options.toolbar.exclude)) {
+      // Start from the defaults and drop the named items (and any group left empty).
+      const drop = new Set(options.toolbar.exclude);
+      const prune = (rows) => (rows || [])
+        .map(g => ({ ...g, items: g.items.filter(it => !drop.has(it)) }))
+        .filter(g => g.items.length && !(g.items.length === 1 && g.items[0] === 'more' && false));
+      this.options = {
+        container: null,
+        toolbar1: prune(Toolbar.DEFAULTS.toolbar1),
+        toolbar2: prune(Toolbar.DEFAULTS.toolbar2)
+      };
     } else if (options.toolbar1 || options.toolbar2) {
       // If specific toolbar1/toolbar2 config is provided, use it - COMPLETELY OVERRIDE DEFAULTS
       this.options = {
@@ -415,6 +442,7 @@ class Toolbar extends Module {
       'indent-decrease': 'Decrease Indent',
       'emoji': 'Insert Emoji',
       'image': 'Insert Image',
+      'file': 'Attach File',
       'video': 'Insert Video',
       'tag': 'Insert Tag',
       'horizontal-rule': 'Insert Horizontal Rule',

package/lib/serialize.js

@@ -0,0 +1,248 @@
+/**
+ * Serialization for yjd content — HTML <-> Markdown and HTML <-> JSON.
+ *
+ * Targeted at the HTML yjd emits (headings, inline marks, lists, links,
+ * images, blockquote, code, tables, hr, and mention tokens). Browser-only
+ * (uses the DOM). Zero dependencies.
+ *
+ *   import { htmlToMarkdown, markdownToHtml, domToJson, jsonToHtml } from '.../serialize.js'
+ */
+
+/* ============================ HTML -> Markdown ============================ */
+
+export function htmlToMarkdown(html) {
+  const root = document.createElement('div');
+  root.innerHTML = html || '';
+  return blocksToMd(root, 0).replace(/\n{3,}/g, '\n\n').trim() + '\n';
+}
+
+function blocksToMd(parent, depth) {
+  let out = '';
+  parent.childNodes.forEach((node) => { out += nodeBlock(node, depth); });
+  return out;
+}
+
+function nodeBlock(node, depth) {
+  if (node.nodeType === 3) {
+    const t = node.textContent.replace(/\s+/g, ' ');
+    return t.trim() ? t + '\n\n' : '';
+  }
+  if (node.nodeType !== 1) return '';
+  const tag = node.tagName;
+  switch (tag) {
+    case 'H1': case 'H2': case 'H3': case 'H4': case 'H5': case 'H6':
+      return '#'.repeat(+tag[1]) + ' ' + inline(node) + '\n\n';
+    case 'P': case 'DIV': {
+      const c = inline(node);
+      return c.trim() ? c + '\n\n' : '';
+    }
+    case 'BLOCKQUOTE':
+      return inline(node).split('\n').map((l) => '> ' + l).join('\n') + '\n\n';
+    case 'PRE':
+      return '```\n' + node.textContent.replace(/\n$/, '') + '\n```\n\n';
+    case 'UL': return listToMd(node, depth, false) + '\n';
+    case 'OL': return listToMd(node, depth, true) + '\n';
+    case 'HR': return '---\n\n';
+    case 'TABLE': return tableToMd(node) + '\n';
+    case 'FIGURE': return blocksToMd(node, depth);
+    case 'IMG': return imgToMd(node) + '\n\n';
+    case 'BR': return '\n';
+    default:
+      return inline(node) + '\n\n';
+  }
+}
+
+function listToMd(node, depth, ordered) {
+  let out = '', i = 1;
+  node.childNodes.forEach((li) => {
+    if (li.nodeType !== 1 || li.tagName !== 'LI') return;
+    const marker = ordered ? (i++) + '. ' : '- ';
+    const pad = '  '.repeat(depth);
+    let text = '', nested = '';
+    li.childNodes.forEach((ch) => {
+      if (ch.nodeType === 1 && (ch.tagName === 'UL' || ch.tagName === 'OL')) {
+        nested += listToMd(ch, depth + 1, ch.tagName === 'OL');
+      } else {
+        text += inlineNode(ch);
+      }
+    });
+    out += pad + marker + text.trim() + '\n' + nested;
+  });
+  return out;
+}
+
+function tableToMd(node) {
+  const rows = [...node.querySelectorAll('tr')];
+  if (!rows.length) return '';
+  const cells = (r) => [...r.children].map((c) => inline(c).replace(/\|/g, '\\|').trim());
+  const head = cells(rows[0]);
+  let out = '| ' + head.join(' | ') + ' |\n| ' + head.map(() => '---').join(' | ') + ' |\n';
+  rows.slice(1).forEach((r) => { out += '| ' + cells(r).join(' | ') + ' |\n'; });
+  return out;
+}
+
+function imgToMd(node) {
+  return `![${node.getAttribute('alt') || ''}](${node.getAttribute('src') || ''})`;
+}
+
+function inline(node) {
+  let out = '';
+  node.childNodes.forEach((ch) => { out += inlineNode(ch); });
+  return out;
+}
+
+function inlineNode(node) {
+  if (node.nodeType === 3) return node.textContent;
+  if (node.nodeType !== 1) return '';
+  const tag = node.tagName;
+  if (node.classList && node.classList.contains('mention')) {
+    const id = node.getAttribute('data-id') || '';
+    const name = (node.textContent || '').replace(/^[@#]/, '');
+    const trig = (node.textContent || '@')[0];
+    return `${trig}[${name}](${id})`;
+  }
+  if (node.classList && node.classList.contains('yjd-file-chip')) {
+    const url = node.getAttribute('href') || '';
+    const nameEl = node.querySelector ? node.querySelector('.yjd-file-name') : null;
+    const name = node.getAttribute('data-name') || (nameEl && nameEl.textContent) || 'file';
+    const size = node.getAttribute('data-size') || '';
+    return `[${size ? `${name} (${size})` : name}](${url})`;
+  }
+  switch (tag) {
+    case 'B': case 'STRONG': return '**' + inline(node) + '**';
+    case 'I': case 'EM': return '*' + inline(node) + '*';
+    case 'S': case 'STRIKE': case 'DEL': return '~~' + inline(node) + '~~';
+    case 'U': return '<u>' + inline(node) + '</u>';
+    case 'CODE': return '`' + node.textContent + '`';
+    case 'A': return '[' + inline(node) + '](' + (node.getAttribute('href') || '') + ')';
+    case 'IMG': return imgToMd(node);
+    case 'BR': return '  \n';
+    default: return inline(node); // spans (colour/font) → keep text only
+  }
+}
+
+/* ============================ Markdown -> HTML ============================ */
+
+export function markdownToHtml(md) {
+  const lines = (md || '').replace(/\r\n/g, '\n').split('\n');
+  let html = '', i = 0;
+  const isList = (l) => /^\s*([-*+]|\d+\.)\s+/.test(l);
+  while (i < lines.length) {
+    const line = lines[i];
+    if (/^\s*$/.test(line)) { i++; continue; }
+    if (/^---+$/.test(line.trim())) { html += '<hr>'; i++; continue; }
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) { html += `<h${h[1].length}>${inlineMd(h[2])}</h${h[1].length}>`; i++; continue; }
+    if (/^```/.test(line)) {
+      i++; let code = '';
+      while (i < lines.length && !/^```/.test(lines[i])) { code += lines[i] + '\n'; i++; }
+      i++; html += '<pre>' + escapeHtml(code.replace(/\n$/, '')) + '</pre>'; continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const q = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) { q.push(lines[i].replace(/^>\s?/, '')); i++; }
+      html += '<blockquote>' + inlineMd(q.join(' ')) + '</blockquote>'; continue;
+    }
+    if (/^\|.*\|\s*$/.test(line) && i + 1 < lines.length && /^\|[\s:|-]+\|\s*$/.test(lines[i + 1])) {
+      const r = parseTable(lines, i); html += r.html; i = r.next; continue;
+    }
+    if (isList(line)) { const r = parseList(lines, i, 0); html += r.html; i = r.next; continue; }
+    const para = [line]; i++;
+    while (i < lines.length && !/^\s*$/.test(lines[i]) && !/^(#{1,6}\s|>|```)/.test(lines[i]) &&
+           !/^---+$/.test(lines[i].trim()) && !isList(lines[i])) { para.push(lines[i]); i++; }
+    html += '<p>' + inlineMd(para.join('\n').trim()) + '</p>';
+  }
+  return html;
+}
+
+function indentOf(l) { return (l.match(/^(\s*)/)[1] || '').length; }
+
+function parseList(lines, start, baseIndent) {
+  const ordered = /^\s*\d+\./.test(lines[start]);
+  let i = start, html = '<' + (ordered ? 'ol' : 'ul') + '>';
+  while (i < lines.length) {
+    const l = lines[i];
+    if (/^\s*$/.test(l)) { i++; continue; }
+    const ind = indentOf(l);
+    const m = l.match(/^\s*([-*+]|\d+\.)\s+(.*)$/);
+    if (!m || ind < baseIndent) break;
+    if (ind > baseIndent) { // nested list belongs to previous <li>
+      const r = parseList(lines, i, ind);
+      html = html.replace(/<\/li>$/, r.html + '</li>');
+      i = r.next; continue;
+    }
+    html += '<li>' + inlineMd(m[2]) + '</li>';
+    i++;
+  }
+  return { html: html + '</' + (ordered ? 'ol' : 'ul') + '>', next: i };
+}
+
+function parseTable(lines, start) {
+  const row = (l) => l.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+  const head = row(lines[start]);
+  let i = start + 2, body = '';
+  while (i < lines.length && /^\|.*\|\s*$/.test(lines[i])) {
+    body += '<tr>' + row(lines[i]).map((c) => `<td>${inlineMd(c)}</td>`).join('') + '</tr>';
+    i++;
+  }
+  const thead = '<tr>' + head.map((c) => `<td><b>${inlineMd(c)}</b></td>`).join('') + '</tr>';
+  return { html: `<table class="rich-editor-table"><tbody>${thead}${body}</tbody></table>`, next: i };
+}
+
+function inlineMd(s) {
+  // images, mentions, links, then marks. Order matters.
+  return s
+    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, a, src) => `<img class="inserted-image" src="${attr(src)}" alt="${attr(a)}" style="max-width:100%;height:auto">`)
+    .replace(/([@#])\[([^\]]+)\]\(([^)]+)\)/g, (_, t, name, id) => `<span class="mention" data-id="${attr(id)}">${t}${escapeHtml(name)}</span>`)
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, t, href) => `<a href="${attr(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(t)}</a>`)
+    .replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>')
+    .replace(/(^|[^*])\*([^*]+)\*/g, '$1<i>$2</i>')
+    .replace(/~~([^~]+)~~/g, '<s>$1</s>')
+    .replace(/`([^`]+)`/g, (_, c) => '<code>' + escapeHtml(c) + '</code>')
+    .replace(/\n/g, '<br>');
+}
+
+function escapeHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+function attr(s) { return String(s).replace(/"/g, '&quot;').replace(/</g, '&lt;'); }
+
+/* ============================== HTML <-> JSON ============================= */
+
+export function domToJson(html) {
+  const root = document.createElement('div');
+  root.innerHTML = html || '';
+  return { type: 'doc', content: [...root.childNodes].map(nodeToJson).filter(Boolean) };
+}
+
+function nodeToJson(node) {
+  if (node.nodeType === 3) {
+    const text = node.textContent;
+    return text ? { text } : null;
+  }
+  if (node.nodeType !== 1) return null;
+  const obj = { tag: node.tagName.toLowerCase() };
+  if (node.attributes.length) {
+    obj.attrs = {};
+    for (const a of node.attributes) obj.attrs[a.name] = a.value;
+  }
+  const kids = [...node.childNodes].map(nodeToJson).filter(Boolean);
+  if (kids.length) obj.content = kids;
+  return obj;
+}
+
+export function jsonToHtml(json) {
+  const nodes = json && json.content ? json.content : (Array.isArray(json) ? json : []);
+  return nodes.map(jsonNodeToHtml).join('');
+}
+
+function jsonNodeToHtml(n) {
+  if (n == null) return '';
+  if (n.text != null) return escapeHtml(n.text);
+  if (!n.tag) return '';
+  const attrs = n.attrs
+    ? Object.entries(n.attrs).map(([k, v]) => ` ${k}="${attr(v)}"`).join('')
+    : '';
+  const inner = (n.content || []).map(jsonNodeToHtml).join('');
+  const VOID = new Set(['img', 'hr', 'br', 'input']);
+  if (VOID.has(n.tag)) return `<${n.tag}${attrs}>`;
+  return `<${n.tag}${attrs}>${inner}</${n.tag}>`;
+}

package/lib/static.js

@@ -0,0 +1,28 @@
+/**
+ * renderStatic — paint stored HTML into a read-only view that looks exactly
+ * like the editor's content area, without booting an editor.
+ *
+ * It sanitizes the HTML (same allowlist the editor uses on paste/setContent)
+ * and tags the host element with `.yjd-content`, the class the stylesheet uses
+ * to style typography, lists, tables, images, and mention tokens. Load the
+ * editor stylesheet (or StylesLoader.loadStyles()) on the page for it to match.
+ *
+ *   import { renderStatic } from '@oix1987/yjd/core';
+ *   renderStatic(post.body_html, document.querySelector('#post'));
+ *
+ * @param {string} html        Stored HTML (untrusted — it is sanitized).
+ * @param {Element} [target]   Element to render into. If omitted, a fresh
+ *                             <div.yjd-content> is created and returned.
+ * @returns {Element} the element the content was rendered into.
+ */
+import { sanitizeHtml } from './utils/sanitize.js';
+
+export function renderStatic(html, target) {
+  const safe = sanitizeHtml(html || '');
+  const el = target || document.createElement('div');
+  el.classList.add('yjd-content');
+  el.innerHTML = safe;
+  return el;
+}
+
+export default renderStatic;