@oix1987/yjd 1.0.3 → 2.1.0

package/lib/serialize.js

@@ -0,0 +1,241 @@
+/**
+ * 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})`;
+  }
+  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;

package/lib/styles-loader.js

@@ -0,0 +1,142 @@
+import cssText from './styles.css.js';
+
+/**
+ * CSS Loader - Load và inject CSS styles vào DOM
+ * Thay thế cho việc sử dụng inline styles
+ *
+ * CSS được import trực tiếp dưới dạng chuỗi (sinh từ styles.css), nên hoạt động
+ * cả với native ESM trong trình duyệt lẫn khi đóng gói bằng Rollup/CDN — không
+ * còn phụ thuộc vào fetch runtime (vốn làm hỏng việc dùng qua npm/CDN).
+ */
+class StylesLoader {
+  static loaded = false;
+  static styleElement = null;
+
+  /**
+   * Load CSS (inject inlined stylesheet vào <head>)
+   * Trả về Promise để giữ tương thích với code gọi cũ (.catch/.then).
+   */
+  static loadStyles() {
+    if (this.loaded) return Promise.resolve();
+
+    try {
+      this.styleElement = document.createElement('style');
+      this.styleElement.id = 'rich-editor-styles';
+      this.styleElement.textContent = cssText;
+      document.head.appendChild(this.styleElement);
+      this.loaded = true;
+    } catch (error) {
+      // Fallback: load minimal styles
+      this.loadFallbackStyles();
+    }
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Load minimal fallback styles nếu không thể load từ file
+   */
+  static loadFallbackStyles() {
+    const fallbackCSS = `
+      .yjd-rich-editor { 
+        position: relative; 
+        background: #fff; 
+        border: 1px solid #ddd; 
+        border-radius: 4px; 
+        display: flex; 
+        flex-direction: column; 
+        font-family: system-ui, sans-serif; 
+      }
+      .yjd-rich-editor .rich-editor-area { 
+        flex: 1; 
+        padding: 20px; 
+        outline: none; 
+        min-height: 100px; 
+      }
+      .yjd-rich-editor .rich-editor-toolbar { 
+        display: flex; 
+        gap: 4px; 
+        padding: 8px; 
+        border-bottom: 1px solid #ddd; 
+        background: #f9f9f9; 
+      }
+      .yjd-rich-editor .rich-editor-toolbar-btn { 
+        padding: 4px 8px; 
+        border: 1px solid #ccc; 
+        border-radius: 3px; 
+        background: #fff; 
+        cursor: pointer; 
+      }
+      .yjd-rich-editor .table-grid-selector { 
+        position: absolute; 
+        background: white; 
+        border: 1px solid #ccc; 
+        border-radius: 4px; 
+        padding: 10px; 
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
+        z-index: 1000; 
+        display: none; 
+      }
+      .yjd-rich-editor .table-grid-cell { 
+        width: 20px; 
+        height: 20px; 
+        border: 1px solid #ddd; 
+        cursor: pointer; 
+        background: white; 
+      }
+    `;
+
+    this.styleElement = document.createElement('style');
+    this.styleElement.id = 'rich-editor-styles-fallback';
+    this.styleElement.textContent = fallbackCSS;
+    document.head.appendChild(this.styleElement);
+    
+    this.loaded = true;
+  }
+
+  /**
+   * Unload styles
+   */
+  static unloadStyles() {
+    if (this.styleElement && this.styleElement.parentNode) {
+      this.styleElement.parentNode.removeChild(this.styleElement);
+      this.styleElement = null;
+      this.loaded = false;
+    }
+  }
+
+  /**
+   * Check if styles are loaded
+   */
+  static isLoaded() {
+    return this.loaded;
+  }
+
+  /**
+   * Reload styles
+   */
+  static async reloadStyles() {
+    this.unloadStyles();
+    await this.loadStyles();
+  }
+
+  /**
+   * Add custom CSS
+   */
+  static addCustomCSS(css, id = 'rich-editor-custom') {
+    // Remove existing custom styles
+    const existing = document.getElementById(id);
+    if (existing) {
+      existing.remove();
+    }
+
+    // Add new custom styles
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+    
+  }
+}
+
+export default StylesLoader;