@oix1987/yjd 1.0.3 → 2.1.0

package/index.d.ts

@@ -1,103 +1,230 @@
-declare module 'yjdtest' {
-  // Editor options interface
-  interface EditorOptions {
-    placeholder?: string;
-    theme?: string;
-    height?: number;
-    width?: number;
-    maxWidth?: number;
-    maxHeight?: number;
-    content?: string | null;
-    onChange?: (content: string) => void;
-    features?: {
-      emoji?: boolean;
-      image?: boolean;
-      table?: boolean;
-      wordCount?: boolean;
-      breadcrumb?: boolean;
-    };
-    toolbar1?: Array<{
-      group: string;
-      items: string[];
-    }>;
-    toolbar2?: Array<{
-      group: string;
-      items: string[];
-    }>;
-  }
-
-  export class Editor {
-    constructor(selector: string | Element, options?: EditorOptions);
-    on(event: string, handler: (data: any) => void): void;
-    off(event: string, handler: (data: any) => void): void;
-    emit(event: string, data: any): void;
-    getContent(): string;
-    setContent(content: string): void;
-    focus(): void;
-  }
-
-  export class Module {}
-  export class Format {}
-  export class InlineFormat extends Format {}
-  export class BlockFormat extends Format {}
-  export const registry: any;
-
-  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;
-  }
-
-  export function createEditor(selector: string | Element, options?: EditorOptions): RichEditor;
-
-  // Formats
-  export const Bold: any;
-  export const Italic: any;
-  export const Underline: any;
-  export const Strike: any;
-  export const Subscript: any;
-  export const Superscript: any;
-  export const Color: any;
-  export const Background: any;
-  export const Link: any;
-  export const Table: any;
-  export const Heading: any;
-  export const FontFamily: any;
-  export const LineHeight: any;
-  export const Capitalization: any;
-  export const TextAlign: any;
-  export const List: any;
-  export const Indent: any;
-  export const IndentIncrease: any;
-  export const IndentDecrease: any;
-  export const Emoji: any;
-  export const Image: any;
-  export const Video: any;
-  export const Tag: any;
-  export const TextSize: any;
-  export const Import: any;
-
-  // Modules
-  export const Toolbar: any;
-  export const History: any;
-  export const BlockToolbar: any;
-  export const TableToolbar: any;
-  export const CodeView: any;
-  export const ResizeHandles: any;
-
-  // UI components
-  export const ColorPicker: any;
-  export const IconUtils: any;
-  export const LinkPopup: any;
-  export const TablePopup: any;
-  export const TextAlignPicker: any;
-  export const ListPicker: any;
-  export const EmojiPicker: any;
-  export const ImagePopup: any;
-  export const VideoPopup: any;
-  export const TagPopup: any;
-
-  export const createCustomButton: any;
-
-  export default RichEditor;
-}
+// Type definitions for @oix1987/yjd
+// These declarations are the package entry types (referenced via "types" in package.json),
+// so they are declared at top level rather than wrapped in `declare module`.
+
+/** A person/task suggestion returned by a mention source. */
+export interface MentionItem {
+  id: string | number;
+  name?: string;
+  label?: string;
+  avatar_url?: string;
+  [key: string]: any;
+}
+
+/** Config for a single mention trigger character. */
+export interface MentionTrigger {
+  /** Trigger character, e.g. '#'. */
+  char: string;
+  /** Async (or sync) lookup of suggestions for the typed query. */
+  source: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+  /** Custom HTML for a suggestion row. Defaults to avatar + name. */
+  renderItem?: (item: MentionItem) => string;
+}
+
+/** @mention configuration. The token inserted carries `data-id`. */
+export interface MentionOptions {
+  /** Primary trigger character (default '@'). */
+  trigger?: string;
+  source?: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+  renderItem?: (item: MentionItem) => string;
+  /** Additional triggers, e.g. '#' for task references. */
+  triggers?: MentionTrigger[];
+}
+
+/** Image upload hook configuration. */
+export interface ImageOptions {
+  /**
+   * Upload the chosen file and resolve to its URL. While pending, a placeholder
+   * is shown; on resolve the src is swapped, on reject the image is removed.
+   * Omit to fall back to inline base64 (data URLs).
+   */
+  upload?: (file: File) => string | Promise<string>;
+  /** `accept` attribute for the file picker (default 'image/*'). */
+  accept?: string;
+  /** Maximum file size in bytes; larger files emit 'image:error'. */
+  maxSize?: number;
+}
+
+/** A JSON document node produced by getJSON()/domToJson. */
+export interface JsonNode {
+  tag?: string;
+  text?: string;
+  attrs?: Record<string, string>;
+  content?: JsonNode[];
+}
+
+/** Root JSON document. */
+export interface JsonDoc {
+  type: 'doc';
+  content: JsonNode[];
+}
+
+// Editor options interface
+export interface EditorOptions {
+  placeholder?: string;
+  theme?: string;
+  height?: number;
+  width?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  content?: string | null;
+  onChange?: (content: string) => void;
+  /** When true, paste always inserts plain text (default: false). */
+  pasteAsPlainText?: boolean;
+  /** Accessible label for the editable region (defaults to placeholder). */
+  ariaLabel?: string;
+  /** Maximum number of characters allowed. */
+  maxLength?: number;
+  /** Initial text direction. */
+  direction?: 'ltr' | 'rtl';
+  /** Enable markdown shortcuts (default: true). Set false to disable. */
+  markdown?: boolean;
+  /** Autosave drafts to localStorage. true, or { key, debounce(ms) }. */
+  autosave?: boolean | { key?: string; debounce?: number };
+  /** Image upload hook (replaces inline base64 when `upload` is provided). */
+  image?: ImageOptions | boolean;
+  /** @mention / #task autocomplete. Inert until a `source` is given. */
+  mention?: MentionOptions;
+  features?: {
+    emoji?: boolean;
+    image?: boolean;
+    table?: boolean;
+    wordCount?: boolean;
+    breadcrumb?: boolean;
+  };
+  toolbar1?: Array<{
+    group: string;
+    items: string[];
+  }>;
+  toolbar2?: Array<{
+    group: string;
+    items: string[];
+  }>;
+}
+
+export class Editor {
+  constructor(selector: string | Element, options?: EditorOptions);
+  on(event: string, handler: (data: any) => void): void;
+  off(event: string, handler: (data: any) => void): void;
+  emit(event: string, data: any): void;
+  getContent(): string;
+  setContent(content: string): void;
+  /** Alias of getContent() / setContent(). */
+  getHTML(): string;
+  setHTML(html: string): void;
+  /** Export/import the document as a JSON tree. */
+  getJSON(): JsonDoc;
+  setJSON(json: JsonDoc | JsonNode[]): void;
+  /** Export/import the document as Markdown (mention ids preserved). */
+  getMarkdown(): string;
+  setMarkdown(markdown: string): void;
+  getText(): string;
+  isEmpty(): boolean;
+  clear(): void;
+  insertText(text: string): void;
+  insertHTML(html: string): void;
+  clearFormatting(): void;
+  insertHorizontalRule(): void;
+  insertImageFile(file: File): void;
+  setReadOnly(readOnly: boolean): void;
+  isReadOnly(): boolean;
+  setDirection(dir: 'ltr' | 'rtl'): void;
+  getDirection(): 'ltr' | 'rtl';
+  toggleDirection(): void;
+  clearAutosave(): void;
+  focus(): void;
+  destroy(): void;
+}
+
+export class Module {}
+export class Format {}
+export class InlineFormat extends Format {}
+export class BlockFormat extends Format {}
+export const registry: any;
+
+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, keeping textarea.value
+   * in sync (and dispatching native input/change events) on every edit.
+   */
+  static fromTextarea(
+    textarea: HTMLTextAreaElement | string,
+    options?: EditorOptions & { format?: 'html' | 'markdown' }
+  ): RichEditor;
+  /** The original textarea, when created via fromTextarea(). */
+  textarea?: HTMLTextAreaElement;
+}
+
+/** Brand-aligned alias of {@link RichEditor}. */
+export { RichEditor as yjd };
+
+export function createEditor(selector: string | Element, options?: EditorOptions): RichEditor;
+
+/**
+ * Render stored HTML into a read-only view that matches the editor's styling.
+ * Sanitizes the HTML and tags the host element with `.yjd-content`.
+ */
+export function renderStatic(html: string, target?: Element): Element;
+
+// Serialization helpers (also available on the editor as get/set methods)
+export function htmlToMarkdown(html: string): string;
+export function markdownToHtml(markdown: string): string;
+export function domToJson(html: string): JsonDoc;
+export function jsonToHtml(json: JsonDoc | JsonNode[]): string;
+
+// Formats
+export const Bold: any;
+export const Italic: any;
+export const Underline: any;
+export const Strike: any;
+export const Subscript: any;
+export const Superscript: any;
+export const Color: any;
+export const Background: any;
+export const Link: any;
+export const Table: any;
+export const Heading: any;
+export const FontFamily: any;
+export const LineHeight: any;
+export const Capitalization: any;
+export const TextAlign: any;
+export const List: any;
+export const Indent: any;
+export const IndentIncrease: any;
+export const IndentDecrease: any;
+export const Emoji: any;
+export const Image: any;
+export const Video: any;
+export const Tag: any;
+export const TextSize: any;
+export const Import: any;
+
+// Modules
+export const Toolbar: any;
+export const History: any;
+export const BlockToolbar: any;
+export const TableToolbar: any;
+export const CodeView: any;
+export const FindReplace: any;
+export const SlashMenu: any;
+export const Mention: any;
+export const ResizeHandles: any;
+
+// UI components
+export const ColorPicker: any;
+export const IconUtils: any;
+export const LinkPopup: any;
+export const TablePopup: any;
+export const TextAlignPicker: any;
+export const ListPicker: any;
+export const EmojiPicker: any;
+export const ImagePopup: any;
+export const VideoPopup: any;
+export const TagPopup: any;
+
+export const createCustomButton: any;
+
+export default RichEditor;

package/index.js

@@ -0,0 +1,297 @@
+import Editor from './lib/core/editor.js';
+import registry from './lib/core/registry.js';
+import Module from './lib/core/module.js';
+import { Format, InlineFormat, BlockFormat } from './lib/core/format.js';
+import StylesLoader from './lib/styles-loader.js';
+import { renderStatic } from './lib/static.js';
+import { htmlToMarkdown, markdownToHtml, domToJson, jsonToHtml } from './lib/serialize.js';
+
+// Import formats
+import Bold from './lib/formats/bold.js';
+import Italic from './lib/formats/italic.js';
+import Underline from './lib/formats/underline.js';
+import Strike from './lib/formats/strike.js';
+import Subscript from './lib/formats/subscript.js';
+import Superscript from './lib/formats/superscript.js';
+import Color from './lib/formats/color.js';
+import Background from './lib/formats/background.js';
+import Link from './lib/formats/link.js';
+import Table from './lib/formats/table.js';
+import Heading from './lib/formats/heading.js';
+import FontFamily from './lib/formats/font-family.js';
+import LineHeight from './lib/formats/line-height.js';
+import Capitalization from './lib/formats/capitalization.js';
+import TextAlign from './lib/formats/text-align.js';
+import List from './lib/formats/list.js';
+import Indent, { IndentIncrease, IndentDecrease } from './lib/formats/indent.js';
+import Emoji from './lib/formats/emoji.js';
+import Image from './lib/formats/image.js';
+import Video from './lib/formats/video.js';
+import Tag from './lib/formats/tag.js';
+import TextSize from './lib/formats/text-size.js';
+
+import Import from './lib/formats/import.js';
+
+// Import modules
+import Toolbar from './lib/modules/toolbar.js';
+import History from './lib/modules/history.js';
+import BlockToolbar from './lib/modules/block-toolbar.js';
+import TableToolbar from './lib/modules/table-toolbar.js';
+import CodeView from './lib/modules/code-view.js';
+import FindReplace from './lib/modules/find-replace.js';
+import SlashMenu from './lib/modules/slash-menu.js';
+import Mention from './lib/modules/mention.js';
+
+import ResizeHandles from './lib/modules/resize-handles.js';
+
+// Import UI components
+import ColorPicker from './lib/ui/color-picker.js';
+import IconUtils from './lib/ui/icons.js';
+import LinkPopup from './lib/ui/link-popup.js';
+import TablePopup from './lib/ui/table-popup.js';
+import TextAlignPicker from './lib/ui/text-align-picker.js';
+import ListPicker from './lib/ui/list-picker.js';
+import EmojiPicker from './lib/ui/emoji-picker.js';
+import ImagePopup from './lib/ui/image-popup.js';
+import VideoPopup from './lib/ui/video-popup.js';
+import TagPopup from './lib/ui/tag-popup.js';
+
+import createCustomButton from './lib/ui/select-button.js';
+
+
+
+// Register default formats
+registry.register('formats/bold', Bold, true);
+registry.register('formats/italic', Italic, true);
+registry.register('formats/underline', Underline, true);
+registry.register('formats/strike', Strike, true);
+registry.register('formats/subscript', Subscript, true);
+registry.register('formats/superscript', Superscript, true);
+registry.register('formats/color', Color, true);
+registry.register('formats/background', Background, true);
+registry.register('formats/link', Link, true);
+registry.register('formats/table', Table, true);
+registry.register('formats/heading', Heading, true);
+registry.register('formats/font-family', FontFamily, true);
+registry.register('formats/line-height', LineHeight, true);
+registry.register('formats/capitalization', Capitalization, true);
+registry.register('formats/text-align', TextAlign, true);
+registry.register('formats/list', List, true);
+registry.register('formats/indent', Indent, true);
+registry.register('formats/indent-increase', IndentIncrease, true);
+registry.register('formats/indent-decrease', IndentDecrease, true);
+registry.register('formats/emoji', Emoji, true);
+registry.register('formats/image', Image, true);
+registry.register('formats/video', Video, true);
+registry.register('formats/tag', Tag, true);
+registry.register('formats/text-size', TextSize, true);
+
+registry.register('formats/import', Import, true);
+
+// Register default modules
+registry.register('modules/toolbar', Toolbar, true);
+registry.register('modules/history', History, true);
+registry.register('modules/block-toolbar', BlockToolbar, true);
+registry.register('modules/table-toolbar', TableToolbar, true);
+registry.register('modules/code-view', CodeView, true);
+registry.register('modules/find-replace', FindReplace, true);
+registry.register('modules/slash-menu', SlashMenu, true);
+registry.register('modules/mention', Mention, true);
+
+registry.register('modules/resize-handles', ResizeHandles, true);
+
+// Register UI components
+registry.register('ui/color-picker', ColorPicker, true);
+registry.register('ui/text-align-picker', TextAlignPicker, true);
+registry.register('ui/list-picker', ListPicker, true);
+registry.register('ui/emoji-picker', EmojiPicker, true);
+registry.register('ui/image-popup', ImagePopup, true);
+registry.register('ui/video-popup', VideoPopup, true);
+registry.register('ui/tag-popup', TagPopup, true);
+
+registry.register('ui/custom-button', createCustomButton, true);
+
+
+
+// Load CSS styles
+StylesLoader.loadStyles().catch(error => {
+  console.warn('Could not load Rich Editor styles:', error);
+});
+
+// Main Editor class with registration system
+class RichEditor extends Editor {
+  /**
+   * Register a module, format, or theme
+   * @param {string|object} path - Registration path
+   * @param {*} definition - Class definition
+   * @param {boolean} suppressWarning - Suppress overwrite warnings
+   */
+  static register(path, definition, suppressWarning = false) {
+    registry.register(path, definition, suppressWarning);
+  }
+
+  /**
+   * Get registered item
+   * @param {string} path - Registration path
+   */
+  static get(path) {
+    return registry.get(path);
+  }
+
+  /**
+   * Create new editor instance
+   * @param {string|Element} selector - DOM selector or element
+   * @param {object} options - Editor options
+   */
+  static create(selector, options = {}) {
+    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`). On every change the textarea is updated and a native 'input'
+   * event is dispatched, so framework bindings / validation keep firing.
+   *
+   * @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 readEditor = (ed) => (format === 'markdown' ? ed.getMarkdown() : ed.getContent());
+
+    // 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');
+
+    const initial = ta.value || '';
+    const editor = new RichEditor(mount, {
+      width: '100%',
+      ...options,
+      // Seed content from the textarea (skip if caller passed explicit content).
+      content: options.content != null ? options.content
+        : (format === 'markdown' ? markdownToHtml(initial) : initial),
+    });
+
+    const sync = () => {
+      const next = readEditor(editor);
+      if (ta.value === next) return;
+      ta.value = next;
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+      ta.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+    editor.on('change', sync);
+    sync(); // normalise the textarea to the editor's serialization up front.
+
+    editor.textarea = ta;
+    return editor;
+  }
+}
+
+// Export classes for extension. `yjd` is the brand-aligned name; `RichEditor`
+// is kept as an alias for backward compatibility.
+export {
+  RichEditor as default,
+  RichEditor,
+  RichEditor as yjd,
+  Editor,
+  Module,
+  Format,
+  InlineFormat,
+  BlockFormat,
+  registry
+};
+
+// Export formats
+export {
+  Bold,
+  Italic,
+  Underline,
+  Strike,
+  Subscript,
+  Superscript,
+  Color,
+  Background,
+  Link,
+  Table,
+  Heading,
+  FontFamily,
+  LineHeight,
+  Capitalization,
+  TextAlign,
+  List,
+  Indent,
+  IndentIncrease,
+  IndentDecrease,
+  Emoji,
+  Image,
+  Video,
+  Tag,
+  TextSize,
+
+  Import
+};
+
+// Export modules
+export {
+  Toolbar,
+  History,
+  BlockToolbar,
+  TableToolbar,
+  CodeView,
+  FindReplace,
+  SlashMenu,
+  Mention,
+
+  ResizeHandles
+};
+
+// Export UI components
+export {
+  ColorPicker,
+  IconUtils,
+  LinkPopup,
+  TablePopup,
+  TextAlignPicker,
+  ListPicker,
+  EmojiPicker,
+  ImagePopup,
+  VideoPopup,
+  TagPopup,
+
+  createCustomButton
+};
+
+// Static rendering + serialization helpers
+export {
+  renderStatic,
+  htmlToMarkdown,
+  markdownToHtml,
+  domToJson,
+  jsonToHtml
+};
+
+
+
+
+/**
+ * Utility function to create editor instance
+ * @param {string|Element} selector - DOM selector or element
+ * @param {object} options - Editor options
+ */
+export function createEditor(selector, options = {}) {
+  return new RichEditor(selector, options);
+}