@oix1987/yjd 1.0.0

package/README.md

@@ -0,0 +1,91 @@
+# Rich Text Editor
+
+A powerful rich text editor with real-time content change tracking.
+
+## Features
+
+- Rich text formatting (Bold, Italic, Underline, Strikethrough, etc.)
+- Real-time content change tracking with `onChange` callback
+- Modern UI with customizable toolbar
+- Support for images, tables, links, and more
+- TypeScript support
+
+## Usage
+
+### Basic Usage
+
+```javascript
+import RichEditor from "./index.js";
+
+const editor = new RichEditor("#editor-container", {
+  content: "<p>Initial content</p>",
+  height: 400,
+  width: 800,
+  theme: "light",
+  placeholder: "Start typing...",
+  onChange: (content) => {
+    // Handle content changes here
+    console.log("Content changed:", content);
+    // Update your output container
+    document.getElementById("output").innerHTML = content;
+  },
+});
+```
+
+### Options
+
+| Option        | Type     | Default        | Description                                   |
+| ------------- | -------- | -------------- | --------------------------------------------- |
+| `content`     | string   | null           | Initial content for the editor                |
+| `height`      | number   | 400            | Editor height in pixels                       |
+| `width`       | number   | 800            | Editor width in pixels                        |
+| `theme`       | string   | 'light'        | Editor theme                                  |
+| `placeholder` | string   | 'Type here...' | Placeholder text                              |
+| `onChange`    | function | undefined      | Callback function called when content changes |
+
+### onChange Callback
+
+The `onChange` callback receives the current HTML content as a parameter:
+
+```javascript
+onChange: (content) => {
+  // content is the HTML string of the editor content
+  console.log("New content:", content);
+
+  // Example: Update an output container
+  document.getElementById("output").innerHTML = content;
+
+  // Example: Send to server
+  fetch("/api/save-content", {
+    method: "POST",
+    body: JSON.stringify({ content }),
+    headers: { "Content-Type": "application/json" },
+  });
+};
+```
+
+## Events
+
+The editor also supports event listeners:
+
+```javascript
+// Listen for text changes
+editor.on("text-change", (content) => {
+  console.log("Text changed:", content);
+});
+
+// Remove event listener
+editor.off("text-change", handler);
+```
+
+## Methods
+
+- `getContent()` - Get current HTML content
+- `setContent(content)` - Set editor content
+- `focus()` - Focus the editor
+- `on(event, handler)` - Add event listener
+- `off(event, handler)` - Remove event listener
+
+## Example
+
+See `index.html` and `main.js` for a complete working example that demonstrates the `onChange` functionality with real-time output display.

package/index.d.ts

@@ -0,0 +1,103 @@
+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;
+}

package/index.js

@@ -0,0 +1,221 @@
+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 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 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/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);
+  }
+}
+
+// Export classes for extension
+export {
+  RichEditor as default,
+  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,
+
+  ResizeHandles
+};
+
+// Export UI components
+export {
+  ColorPicker,
+  IconUtils,
+  LinkPopup,
+  TablePopup,
+  TextAlignPicker,
+  ListPicker,
+  EmojiPicker,
+  ImagePopup,
+  VideoPopup,
+  TagPopup,
+
+  createCustomButton
+};
+
+
+
+
+/**
+ * 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);
+}