@oix1987/yjd 2.0.0 → 2.1.1

package/lib/core/editor.js

@@ -2,6 +2,8 @@ import registry from './registry.js';
 import Module from './module.js';
 import { execFormat, queryFormatState } from '../utils/exec-command.js';
 import { sanitizeHtml } from '../utils/sanitize.js';
+import { htmlToMarkdown, markdownToHtml, domToJson, jsonToHtml } from '../serialize.js';
+import IconUtils from '../ui/icons.js';
 
 /**
  * Main Editor class - Inspired by Quill's architecture
@@ -253,9 +255,15 @@ export default class Editor {
       modulesToLoad = this.options.modules || ['toolbar', 'history'];
     } else {
       // No toolbar config - load full feature set
-      modulesToLoad = this.options.modules || ['toolbar', 'history', 'block-toolbar', 'table-toolbar', 'code-view', 'theme-switcher', 'resize-handles', 'find-replace', 'slash-menu'];
+      modulesToLoad = this.options.modules || ['toolbar', 'history', 'block-toolbar', 'table-toolbar', 'code-view', 'theme-switcher', 'resize-handles', 'find-replace', 'slash-menu', 'mention'];
     }
-    
+
+    // @mention is inert without a source, so load it whenever configured —
+    // even alongside a custom toolbar that otherwise loads only basics.
+    if (this.options.mention && !modulesToLoad.includes('mention')) {
+      modulesToLoad.push('mention');
+    }
+
     
     modulesToLoad.forEach(moduleName => {
       const ModuleClass = this.registry.get(`modules/${moduleName}`);
@@ -389,15 +397,24 @@ export default class Editor {
       this.handlePaste(e);
     });
 
-    // Allow dropping (needed for the drop event to fire with files)
+    // Allow dropping (needed for the drop event to fire with files) and show a
+    // drop-zone highlight while files are dragged over the editor.
     this.editor.addEventListener('dragover', (e) => {
       if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files')) {
         e.preventDefault();
+        this.editor.classList.add('yjd-drag-over');
+      }
+    });
+    this.editor.addEventListener('dragleave', (e) => {
+      // Only clear when the pointer actually leaves the editor (not child nodes).
+      if (!e.relatedTarget || !this.editor.contains(e.relatedTarget)) {
+        this.editor.classList.remove('yjd-drag-over');
       }
     });
 
     // Handle drop events (drag and drop) — insert dropped image files
     this.editor.addEventListener('drop', (e) => {
+      this.editor.classList.remove('yjd-drag-over');
       const dt = e.dataTransfer;
       const files = dt && dt.files ? Array.from(dt.files) : [];
       const imageFile = files.find(f => f.type && f.type.startsWith('image/'));
@@ -407,6 +424,14 @@ export default class Editor {
         this.insertImageFile(imageFile);
         return;
       }
+      // Non-image files become attachments when a file hook is configured.
+      const attachment = files.find(f => f && f.name);
+      if (attachment && this.options.file) {
+        e.preventDefault();
+        this.placeCaretAtPoint(e.clientX, e.clientY);
+        this.insertFileAttachment(attachment);
+        return;
+      }
       // Check content after a normal drop operation
       setTimeout(() => {
         this.ensureEditorHasContent();
@@ -435,6 +460,20 @@ export default class Editor {
       });
     }
 
+    // Enter-to-submit (e.g. a comment box). Enter submits, Shift+Enter inserts
+    // a newline — UNLESS an autocomplete popup is open, in which case Enter is
+    // left for the popup to choose its item. Configured via options.submit.
+    if (this.options.submit && typeof this.options.submit.onEnter === 'function') {
+      const submitCfg = this.options.submit;
+      this.editor.addEventListener('keydown', (e) => {
+        if (e.key !== 'Enter' || e.isComposing) return;
+        if (e.shiftKey) return; // Shift+Enter → newline (browser default)
+        if (this.isMenuOpen()) return; // let the popup handle Enter
+        e.preventDefault();
+        submitCfg.onEnter(this.getContent(), this);
+      });
+    }
+
     // Handle cut events
     this.editor.addEventListener('cut', () => {
       // Check content after cut operation
@@ -500,7 +539,22 @@ export default class Editor {
     // Persist draft if autosave is enabled
     this._scheduleAutosave(content);
 
-    // Emit text-change event
+    // Warn when the serialized content exceeds maxContentSize (bytes). Guards
+    // against, e.g., pasting huge base64 images. Fires once per crossing.
+    if (this.options.maxContentSize) {
+      const size = content.length;
+      const over = size > this.options.maxContentSize;
+      if (over && !this._overflowed) {
+        this._overflowed = true;
+        this.emit('content:overflow', { size, max: this.options.maxContentSize });
+      } else if (!over) {
+        this._overflowed = false;
+      }
+    }
+
+    // Emit change events ('change' is the documented name; 'text-change' kept
+    // for backward compatibility).
+    this.emit('change', content);
     this.emit('text-change', content);
   }
 
@@ -823,6 +877,23 @@ export default class Editor {
     this.onContentChange();
   }
 
+  /* ----- Export / import in common formats (HTML · JSON · Markdown) ----- */
+
+  /** HTML string (alias of getContent). */
+  getHTML() { return this.getContent(); }
+  /** Set content from an HTML string (sanitised). */
+  setHTML(html) { this.setContent(sanitizeHtml(html || '')); }
+
+  /** Structured JSON document `{ type:'doc', content:[…] }`. */
+  getJSON() { return domToJson(this.getContent()); }
+  /** Set content from a JSON document (produced by getJSON). */
+  setJSON(json) { this.setContent(sanitizeHtml(jsonToHtml(json))); }
+
+  /** Markdown string. */
+  getMarkdown() { return htmlToMarkdown(this.getContent()); }
+  /** Set content from a Markdown string. */
+  setMarkdown(md) { this.setContent(sanitizeHtml(markdownToHtml(md || ''))); }
+
   /**
    * Get the plain text content of the editor (no markup).
    * @returns {string}
@@ -934,23 +1005,229 @@ export default class Editor {
    */
   insertImageFile(file) {
     if (!file || !file.type || !file.type.startsWith('image/')) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => {
-      const dataUrl = ev.target.result;
+
+    const cfg = this.options.image || {};
+    // Validate against optional accept / maxSize before doing anything.
+    if (cfg.accept && cfg.accept !== 'image/*') {
+      const ok = cfg.accept.split(',').some(a => {
+        a = a.trim();
+        return a.endsWith('/*') ? file.type.startsWith(a.slice(0, -1)) : file.type === a;
+      });
+      if (!ok) { this.emit('image:error', { file, reason: 'type' }); return; }
+    }
+    if (cfg.maxSize && file.size > cfg.maxSize) {
+      this.emit('image:error', { file, reason: 'size' });
+      return;
+    }
+
+    // Build a real <img> from a src (validates via the Image format).
+    const makeImg = (src, extra = '') => {
       const ImageClass = this.registry.get('formats/image');
-      let imgHtml;
       if (ImageClass && typeof ImageClass.create === 'function') {
-        const img = ImageClass.create(dataUrl); // validates the data: URL
-        if (!img) return;
-        imgHtml = img.outerHTML;
+        const img = ImageClass.create(src);
+        if (!img) return null;
+        if (extra) img.setAttribute('data-state', extra);
+        return img;
+      }
+      return null;
+    };
+
+    // No upload hook → embed as base64 (backward-compatible default).
+    if (typeof cfg.upload !== 'function') {
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        const html = (makeImg(ev.target.result) || {}).outerHTML
+          || `<img src="${ev.target.result}" class="inserted-image" style="max-width:100%" contenteditable="false">`;
+        this.focus();
+        execFormat('insertHTML', html);
+        this.onContentChange();
+      };
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    // Upload hook: insert a visible loading placeholder (spinner + filename),
+    // await the URL, then replace the placeholder with the real <img>.
+    const placeholderId = 'rte-up-' + Math.round(performance.now()) + '-' + (this._upCounter = (this._upCounter || 0) + 1);
+    const escName = (file.name || 'image')
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const phHTML =
+      `<span class="yjd-upload" id="${placeholderId}" contenteditable="false" data-state="uploading">` +
+      `<span class="yjd-spinner" aria-hidden="true"></span>` +
+      `<span class="yjd-upload-label">${escName}</span>` +
+      `</span>`;
+    this.focus();
+    execFormat('insertHTML', phHTML);
+    this.emit('image:upload', { file });
+
+    Promise.resolve(cfg.upload(file)).then((url) => {
+      const el = this.editor.querySelector('#' + placeholderId);
+      if (!el) return;
+      if (url) {
+        const img = makeImg(url);
+        if (img) { el.replaceWith(img); } else { el.remove(); }
+        this.emit('image:uploaded', { file, url });
       } else {
-        imgHtml = `<img src="${dataUrl}" class="inserted-image" style="max-width:100%" contenteditable="false">`;
+        el.remove();
+      }
+      this.onContentChange();
+    }).catch((err) => {
+      const el = this.editor.querySelector('#' + placeholderId);
+      if (el) el.remove();
+      this.emit('image:error', { file, reason: 'upload', error: err });
+      this.onContentChange();
+    });
+  }
+
+  /**
+   * Human-readable byte size, e.g. 24576 -> "24 KB".
+   */
+  static formatBytes(bytes) {
+    if (!bytes && bytes !== 0) return '';
+    const u = ['B', 'KB', 'MB', 'GB'];
+    let i = 0, n = bytes;
+    while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
+    return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${u[i]}`;
+  }
+
+  /**
+   * Open the native picker for a non-image attachment, then insert it as a
+   * file chip via the options.file.upload hook.
+   */
+  openFileAttachmentPicker() {
+    const cfg = this.options.file || {};
+    const sel = window.getSelection();
+    const savedRange = sel && sel.rangeCount ? sel.getRangeAt(0).cloneRange() : null;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = cfg.accept || '*/*';
+    input.style.display = 'none';
+    input.addEventListener('change', () => {
+      const file = input.files && input.files[0];
+      if (file) {
+        this.focus();
+        const s = window.getSelection();
+        if (savedRange) { s.removeAllRanges(); s.addRange(savedRange); }
+        else if (!s.rangeCount || !this.editor.contains(s.anchorNode)) {
+          const r = document.createRange();
+          r.selectNodeContents(this.editor); r.collapse(false);
+          s.removeAllRanges(); s.addRange(r);
+        }
+        this.insertFileAttachment(file);
       }
+      input.remove();
+    });
+    document.body.appendChild(input);
+    input.click();
+  }
+
+  /**
+   * Insert a non-image File as a "file chip" — a contenteditable=false anchor
+   * (icon + name + size) that serializes to a Markdown link `[name (size)](url)`.
+   * Uploads via options.file.upload(file) -> string url | { url, name, size };
+   * with no hook it falls back to an inline data: URL (like images do).
+   * @param {File} file
+   */
+  insertFileAttachment(file) {
+    if (!file) return;
+    const cfg = this.options.file || {};
+
+    // Validate accept / maxSize, mirroring insertImageFile.
+    if (cfg.accept && cfg.accept !== '*/*') {
+      const name = (file.name || '').toLowerCase();
+      const ok = cfg.accept.split(',').some(a => {
+        a = a.trim().toLowerCase();
+        if (!a) return false;
+        if (a.startsWith('.')) return name.endsWith(a);
+        if (a.endsWith('/*')) return (file.type || '').startsWith(a.slice(0, -1));
+        return file.type === a;
+      });
+      if (!ok) { this.emit('file:error', { file, reason: 'type' }); return; }
+    }
+    if (cfg.maxSize && file.size > cfg.maxSize) {
+      this.emit('file:error', { file, reason: 'size' });
+      return;
+    }
+
+    const ico = IconUtils && typeof IconUtils.getIcon === 'function'
+      ? (IconUtils.getIcon('file') || '') : '';
+    const esc = (s) => String(s == null ? '' : s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+    // Build a chip anchor element. `meta` may override name/size from the hook.
+    const makeChip = (url, meta = {}, state = '') => {
+      const name = meta.name || file.name || 'file';
+      const size = meta.size != null ? meta.size : Editor.formatBytes(file.size);
+      const a = document.createElement('a');
+      a.className = 'yjd-file-chip';
+      a.setAttribute('contenteditable', 'false');
+      a.setAttribute('href', url || '#');
+      a.setAttribute('target', '_blank');
+      a.setAttribute('rel', 'noopener noreferrer');
+      a.setAttribute('data-name', name);
+      if (size) a.setAttribute('data-size', size);
+      if (state) a.setAttribute('data-state', state);
+      // While uploading, the icon slot shows a spinner instead of the file glyph.
+      const icoHTML = state === 'uploading'
+        ? '<span class="yjd-spinner" aria-hidden="true"></span>' : ico;
+      a.innerHTML =
+        `<span class="yjd-file-ico" contenteditable="false">${icoHTML}</span>` +
+        `<span class="yjd-file-name">${esc(name)}</span>` +
+        (size ? `<span class="yjd-file-size">${esc(size)}</span>` : '');
+      return a;
+    };
+
+    const insertChipHTML = (html) => {
       this.focus();
-      execFormat('insertHTML', imgHtml);
+      execFormat('insertHTML', html + '&nbsp;');
       this.onContentChange();
     };
-    reader.readAsDataURL(file);
+
+    // No upload hook → inline data URL (works offline, persists in the HTML).
+    if (typeof cfg.upload !== 'function') {
+      const reader = new FileReader();
+      reader.onload = (ev) => insertChipHTML(makeChip(ev.target.result).outerHTML);
+      reader.onerror = () => this.emit('file:error', { file, reason: 'read' });
+      reader.readAsDataURL(file);
+      return;
+    }
+
+    // Upload hook: insert a placeholder chip, await the URL, then fill it in.
+    const id = 'rte-file-' + Math.round(performance.now()) + '-' + (this._fileCounter = (this._fileCounter || 0) + 1);
+    const ph = makeChip('#', {}, 'uploading');
+    ph.id = id;
+    ph.style.opacity = '0.6';
+    insertChipHTML(ph.outerHTML);
+    this.emit('file:upload', { file });
+
+    Promise.resolve(cfg.upload(file)).then((res) => {
+      const el = this.editor.querySelector('#' + id);
+      if (!el) return;
+      const url = typeof res === 'string' ? res : (res && res.url);
+      if (!url) { el.remove(); this.onContentChange(); return; }
+      const name = (res && res.name) || el.getAttribute('data-name');
+      const size = (res && res.size) || el.getAttribute('data-size');
+      el.setAttribute('href', url);
+      el.setAttribute('data-name', name);
+      if (size) el.setAttribute('data-size', size);
+      el.style.opacity = '';
+      el.removeAttribute('data-state');
+      el.removeAttribute('id');
+      const icoEl = el.querySelector('.yjd-file-ico');
+      if (icoEl) icoEl.innerHTML = ico; // swap spinner back to the file icon
+      const nameEl = el.querySelector('.yjd-file-name');
+      const sizeEl = el.querySelector('.yjd-file-size');
+      if (nameEl) nameEl.textContent = name;
+      if (sizeEl && size) sizeEl.textContent = size;
+      this.emit('file:uploaded', { file, url, name, size });
+      this.onContentChange();
+    }).catch((err) => {
+      const el = this.editor.querySelector('#' + id);
+      if (el) el.remove();
+      this.emit('file:error', { file, reason: 'upload', error: err });
+      this.onContentChange();
+    });
   }
 
   /**
@@ -1105,6 +1382,25 @@ export default class Editor {
     try { localStorage.removeItem(cfg.key); } catch (e) { /* ignore */ }
   }
 
+  /**
+   * True when an autocomplete/popup that captures Enter is open (mention, slash
+   * command, emoji). Used by submit.onEnter so Enter chooses the item instead
+   * of submitting. App code can call it too.
+   * @returns {boolean}
+   */
+  isMenuOpen() {
+    const m = this.modules.get('mention');
+    if (m && m.isOpen) return true;
+    const s = this.modules.get('slash-menu');
+    if (s && s.isOpen) return true;
+    // Any visible portaled popup (emoji, link, image, table…).
+    const sel = '.yjd-mention-menu, .yjd-slash-menu, .emoji-picker-popup.visible, .link-popup, .image-popup, .video-popup, .tag-popup';
+    return [...document.querySelectorAll(sel)].some((el) => {
+      if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return false;
+      return getComputedStyle(el).display !== 'none';
+    });
+  }
+
   /**
    * Remove inline formatting (and links) from the current selection.
    */
@@ -1352,6 +1648,9 @@ export default class Editor {
       case 'import':
         this.toggleFormat(command);
         break;
+      case 'file':
+        this.openFileAttachmentPicker();
+        break;
       case 'clear-format':
         this.clearFormatting();
         break;

package/lib/formats/image.js

@@ -165,32 +165,26 @@ class Image extends InlineFormat {
 
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = 'image/*';
+    input.accept = (editor.options.image && editor.options.image.accept) || 'image/*';
     input.style.display = 'none';
-    input.addEventListener('change', async () => {
+    input.addEventListener('change', () => {
       const file = input.files && input.files[0];
       if (file) {
-        try {
-          const src = await Image.handleFileUpload(file);
-          editor.focus();
-          const sel = window.getSelection();
-          // Restore the caret we had before the file dialog stole focus. If we
-          // never had one (clicking the toolbar can collapse the selection),
-          // drop the caret at the end of the editor so insertion still works.
-          if (savedRange) {
-            sel.removeAllRanges();
-            sel.addRange(savedRange);
-          } else if (!sel.rangeCount || !editor.editor.contains(sel.anchorNode)) {
-            const r = document.createRange();
-            r.selectNodeContents(editor.editor);
-            r.collapse(false);
-            sel.removeAllRanges();
-            sel.addRange(r);
-          }
-          Image.insertImageAtCurrentPosition(src, file.name || '', this.editorId);
-        } catch (err) {
-          console.warn('Image upload failed:', err.message);
+        // Restore the caret captured before the file dialog stole focus.
+        editor.focus();
+        const sel = window.getSelection();
+        if (savedRange) {
+          sel.removeAllRanges();
+          sel.addRange(savedRange);
+        } else if (!sel.rangeCount || !editor.editor.contains(sel.anchorNode)) {
+          const r = document.createRange();
+          r.selectNodeContents(editor.editor);
+          r.collapse(false);
+          sel.removeAllRanges();
+          sel.addRange(r);
         }
+        // Single insertion path → honours the image.upload hook + validation.
+        editor.insertImageFile(file);
       }
       input.remove();
     });