@oix1987/yjd 2.1.1 → 2.1.2

package/index.d.ts

@@ -149,6 +149,14 @@ export interface EditorOptions {
 
 export class Editor {
   constructor(selector: string | Element, options?: EditorOptions);
+  /**
+   * Progressive-enhance a <textarea> into an editor with two-way sync + a
+   * controller (getValue/setValue/destroy). Available from `/core` too.
+   */
+  static fromTextarea(
+    textarea: HTMLTextAreaElement | string,
+    options?: EditorOptions & { format?: 'html' | 'markdown' }
+  ): TextareaEditor;
   /** The contentEditable element (public — apps may attach listeners to it). */
   editor: HTMLElement;
   on(event: string, handler: (data: any) => void): void;
@@ -200,12 +208,7 @@ export class RichEditor extends Editor {
   static register(path: string, definition: any, suppressWarning?: boolean): void;
   static get(path: string): any;
   static create(selector: string | Element, options?: EditorOptions): RichEditor;
-  /**
-   * Progressive-enhance a <textarea> into an editor with TWO-WAY sync (editor
-   * edits update textarea.value + fire native events; writing textarea.value
-   * updates the editor). The returned editor also exposes a controller:
-   * getValue()/setValue()/destroy() (destroy restores the textarea).
-   */
+  /** Inherited from Editor (returns a fully-featured RichEditor). */
   static fromTextarea(
     textarea: HTMLTextAreaElement | string,
     options?: EditorOptions & { format?: 'html' | 'markdown' }

package/index.js

@@ -147,100 +147,9 @@ class RichEditor extends Editor {
     return new RichEditor(selector, options);
   }
 
-  /**
-   * Progressive-enhance a <textarea>: hide it, mount an editor in its place,
-   * and keep the textarea's value in sync so existing form submits keep working.
-   *
-   *   const ed = RichEditor.fromTextarea(document.querySelector('#body'), {
-   *     // any editor option; `format` chooses how the textarea is read/written:
-   *     format: 'html' | 'markdown',  // default 'html'
-   *   });
-   *
-   * The textarea's current value seeds the editor (parsed as HTML or Markdown
-   * per `format`). Binding is TWO-WAY: editor edits update textarea.value (and
-   * fire native input/change events), and writing `textarea.value = …` from app
-   * code (e.g. resetting a form) updates the editor. The returned editor also
-   * carries a small controller:
-   *
-   *   const ed = RichEditor.fromTextarea('#body', { format: 'markdown' });
-   *   ed.setValue(md);   // load new content into the editor
-   *   ed.getValue();     // current content (html or markdown per `format`)
-   *   ed.destroy();      // remove the editor, restore the textarea + last value
-   *
-   * @param {HTMLTextAreaElement|string} textarea  Element or selector.
-   * @param {object} [options]  Editor options + optional `format`.
-   * @returns {RichEditor}
-   */
-  static fromTextarea(textarea, options = {}) {
-    const ta = typeof textarea === 'string' ? document.querySelector(textarea) : textarea;
-    if (!ta) throw new Error('RichEditor.fromTextarea: textarea not found');
-
-    const format = options.format === 'markdown' ? 'markdown' : 'html';
-    const read = (ed) => (format === 'markdown' ? ed.getMarkdown() : ed.getContent());
-    const write = (ed, v) => (format === 'markdown' ? ed.setMarkdown(v || '') : ed.setHTML(v || ''));
-
-    // Mount point right after the textarea; hide the original.
-    const mount = document.createElement('div');
-    ta.after(mount);
-    ta.style.display = 'none';
-    ta.setAttribute('aria-hidden', 'true');
-
-    // Take over textarea.value so app writes flow into the editor and reads
-    // reflect it. Keep the native descriptor to restore on destroy + to set the
-    // real value (for form submission) without re-triggering our setter.
-    const nativeDesc = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
-    let raw = ta.value || '';
-    let syncing = false; // guards editor→textarea writes from re-entering setValue
-
-    const initial = raw;
-    const editor = new RichEditor(mount, {
-      width: '100%',
-      ...options,
-      content: options.content != null ? options.content
-        : (format === 'markdown' ? markdownToHtml(initial) : initial),
-    });
-
-    Object.defineProperty(ta, 'value', {
-      configurable: true,
-      get() { return raw; },
-      set(v) {
-        raw = v == null ? '' : String(v);
-        nativeDesc.set.call(ta, raw);   // keep the real textarea value for submits
-        if (!syncing) write(editor, raw); // app write → update editor
-      },
-    });
-
-    // editor edit → push to textarea + fire native events for app bindings.
-    const onChange = () => {
-      const next = read(editor);
-      if (raw === next) return;
-      raw = next;
-      syncing = true;
-      nativeDesc.set.call(ta, next);
-      ta.dispatchEvent(new Event('input', { bubbles: true }));
-      ta.dispatchEvent(new Event('change', { bubbles: true }));
-      syncing = false;
-    };
-    editor.on('change', onChange);
-    onChange(); // normalise textarea to the editor's serialization up front.
-
-    // Controller surface on the editor instance.
-    editor.textarea = ta;
-    editor.getValue = () => read(editor);
-    editor.setValue = (v) => { write(editor, v); };
-    const baseDestroy = editor.destroy.bind(editor);
-    editor.destroy = () => {
-      const last = read(editor);
-      editor.off('change', onChange);
-      baseDestroy();
-      mount.remove();
-      delete ta.value; // restore the prototype's value accessor
-      nativeDesc.set.call(ta, last);
-      ta.style.display = '';
-      ta.removeAttribute('aria-hidden');
-    };
-    return editor;
-  }
+  // fromTextarea() is inherited from the base Editor (defined in core so it is
+  // also available from the tree-shakeable /core entry). RichEditor.fromTextarea
+  // therefore returns a fully-featured RichEditor (via `new this(...)`).
 }
 
 // Export classes for extension. `yjd` is the brand-aligned name; `RichEditor`

package/lib/core/editor.js

@@ -1090,6 +1090,84 @@ export default class Editor {
     return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${u[i]}`;
   }
 
+  /**
+   * Progressive-enhance a <textarea> into an editor with TWO-WAY sync, returning
+   * the editor with a controller (getValue/setValue/destroy). Defined on the
+   * base Editor so it is available from the tree-shakeable `/core` entry too
+   * (no need to pull the all-in-one build just for fromTextarea).
+   *
+   *   const ed = Editor.fromTextarea('#body', { format: 'markdown' });
+   *
+   * @param {HTMLTextAreaElement|string} textarea
+   * @param {object} [options]  Editor options + optional `format: 'html'|'markdown'`.
+   * @returns {Editor}
+   */
+  static fromTextarea(textarea, options = {}) {
+    const ta = typeof textarea === 'string' ? document.querySelector(textarea) : textarea;
+    if (!ta) throw new Error('Editor.fromTextarea: textarea not found');
+
+    const format = options.format === 'markdown' ? 'markdown' : 'html';
+    const read = (ed) => (format === 'markdown' ? ed.getMarkdown() : ed.getContent());
+    const writeVal = (ed, v) => (format === 'markdown' ? ed.setMarkdown(v || '') : ed.setHTML(v || ''));
+
+    const mount = document.createElement('div');
+    ta.after(mount);
+    ta.style.display = 'none';
+    ta.setAttribute('aria-hidden', 'true');
+
+    const nativeDesc = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+    let raw = ta.value || '';
+    let syncing = false;
+
+    const initial = raw;
+    // `this` is the class fromTextarea was called on (Editor or a subclass).
+    const editor = new this(mount, {
+      width: '100%',
+      ...options,
+      content: options.content != null ? options.content
+        : (format === 'markdown' ? markdownToHtml(initial) : initial),
+    });
+
+    Object.defineProperty(ta, 'value', {
+      configurable: true,
+      get() { return raw; },
+      set(v) {
+        raw = v == null ? '' : String(v);
+        nativeDesc.set.call(ta, raw);
+        if (!syncing) writeVal(editor, raw);
+      },
+    });
+
+    const onChange = () => {
+      const next = read(editor);
+      if (raw === next) return;
+      raw = next;
+      syncing = true;
+      nativeDesc.set.call(ta, next);
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+      ta.dispatchEvent(new Event('change', { bubbles: true }));
+      syncing = false;
+    };
+    editor.on('change', onChange);
+    onChange();
+
+    editor.textarea = ta;
+    editor.getValue = () => read(editor);
+    editor.setValue = (v) => { writeVal(editor, v); };
+    const baseDestroy = editor.destroy.bind(editor);
+    editor.destroy = () => {
+      const last = read(editor);
+      editor.off('change', onChange);
+      baseDestroy();
+      mount.remove();
+      delete ta.value;
+      nativeDesc.set.call(ta, last);
+      ta.style.display = '';
+      ta.removeAttribute('aria-hidden');
+    };
+    return editor;
+  }
+
   /**
    * Open the native picker for a non-image attachment, then insert it as a
    * file chip via the options.file.upload hook.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oix1987/yjd",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A powerful rich text editor with real-time content change tracking for web applications using base javascript",
   "license": "ISC",
   "author": "Oix1987",