@oix1987/yjd 1.0.3 → 2.1.0

package/lib/core/registry.js

@@ -0,0 +1,158 @@
+/**
+ * Registry system - Inspired by Quill's registration system
+ * Manages registration and retrieval of modules, formats, themes, and UI components
+ */
+class Registry {
+  constructor() {
+    this.modules = new Map();
+    this.formats = new Map();
+    this.themes = new Map();
+    this.ui = new Map();
+  }
+
+  /**
+   * Register a module, format, theme, or UI component
+   * @param {string|object} path - Registration path or object with multiple registrations
+   * @param {*} def - Definition to register
+   * @param {boolean} suppressWarning - Suppress overwrite warnings
+   */
+  register(path, def, suppressWarning = false) {
+    if (typeof path === 'object') {
+      // Bulk registration
+      Object.entries(path).forEach(([key, value]) => {
+        this.register(key, value, suppressWarning);
+      });
+      return;
+    }
+
+    const [type, name] = path.split('/');
+    
+    // Only warn when genuinely replacing one definition with a DIFFERENT one.
+    // Re-registering the same class (common when several editors share the
+    // singleton registry) is a no-op, not a mistake.
+    if (!suppressWarning) {
+      const existing = this.get(path);
+      if (existing && existing !== def) {
+        console.warn(`Overwriting ${path}`);
+      }
+    }
+
+    switch (type) {
+      case 'modules':
+        this.modules.set(name, def);
+        break;
+      case 'formats':
+        this.formats.set(name, def);
+        break;
+      case 'themes':
+        this.themes.set(name, def);
+        break;
+      case 'ui':
+        this.ui.set(name, def);
+        break;
+      default:
+        console.warn(`Unknown registry type: ${type}`);
+    }
+  }
+
+  /**
+   * Get a registered item
+   * @param {string} path - Registration path
+   * @returns {*}
+   */
+  get(path) {
+    const [type, name] = path.split('/');
+    
+    switch (type) {
+      case 'modules':
+        return this.modules.get(name);
+      case 'formats':
+        return this.formats.get(name);
+      case 'themes':
+        return this.themes.get(name);
+      case 'ui':
+        return this.ui.get(name);
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * Check if an item is registered
+   * @param {string} path - Registration path
+   * @returns {boolean}
+   */
+  has(path) {
+    return this.get(path) !== null && this.get(path) !== undefined;
+  }
+
+  /**
+   * Get all registered items of a type
+   * @param {string} type - Type to get (modules, formats, themes, ui)
+   * @returns {Map}
+   */
+  getAll(type) {
+    switch (type) {
+      case 'modules':
+        return new Map(this.modules);
+      case 'formats':
+        return new Map(this.formats);
+      case 'themes':
+        return new Map(this.themes);
+      case 'ui':
+        return new Map(this.ui);
+      default:
+        return new Map();
+    }
+  }
+
+  /**
+   * Unregister an item
+   * @param {string} path - Registration path
+   */
+  unregister(path) {
+    const [type, name] = path.split('/');
+    
+    switch (type) {
+      case 'modules':
+        this.modules.delete(name);
+        break;
+      case 'formats':
+        this.formats.delete(name);
+        break;
+      case 'themes':
+        this.themes.delete(name);
+        break;
+      case 'ui':
+        this.ui.delete(name);
+        break;
+    }
+  }
+
+  /**
+   * Clear all registrations
+   */
+  clear() {
+    this.modules.clear();
+    this.formats.clear();
+    this.themes.clear();
+    this.ui.clear();
+  }
+
+  /**
+   * Get all registered items for debugging
+   */
+  getAllItems() {
+    const items = {};
+    items.modules = Array.from(this.modules.keys());
+    items.formats = Array.from(this.formats.keys());
+    items.themes = Array.from(this.themes.keys());
+    items.ui = Array.from(this.ui.keys());
+    return items;
+  }
+}
+
+// Create singleton instance
+const registry = new Registry();
+
+export default registry; 

package/lib/formats/background.js

@@ -0,0 +1,213 @@
+import { InlineFormat } from '../core/format.js';
+import ColorPicker from '../ui/color-picker.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+import Editor from '../core/editor.js';
+import { execFormat, setStyleWithCSS } from '../utils/exec-command.js';
+
+/**
+ * Background Color Format - Handles text background color formatting
+ * Now supports multiple editor instances with separate popup instances
+ */
+class Background extends InlineFormat {
+  static formatName = 'background';
+  static tagName = 'SPAN';
+  static attribute = 'background-color';
+
+  // Selection saved when the picker opens, restored before applying (see Color).
+  static savedRanges = new Map();
+
+  constructor() {
+    super();
+    
+    // Get current editor instance
+    const currentEditor = Editor.getCurrentInstance();
+    if (!currentEditor) {
+      console.warn('No editor instance found for Background format');
+      return;
+    }
+    
+    this.editorId = currentEditor.instanceId;
+    
+    // Check if this editor already has a background color picker instance
+    let colorPicker = currentEditor.getPopupInstance('background');
+    
+    if (!colorPicker) {
+      // Create new color picker instance for this editor
+      colorPicker = new ColorPicker({
+        onColorSelect: (color) => {
+          Background.applyBackgroundToCurrentSelection(color, this.editorId);
+        },
+        editor: currentEditor,
+        editorId: this.editorId
+      });
+      
+      // Store popup instance in editor
+      currentEditor.setPopupInstance('background', colorPicker);
+    }
+    
+    this.colorPicker = colorPicker;
+  }
+
+  /**
+   * Create a new Background format instance for a specific editor
+   * @param {string} editorId - Editor instance ID
+   * @returns {Background} Background format instance
+   */
+  static createForEditor(editorId) {
+    const editor = Editor.getInstanceById(editorId);
+    if (!editor) {
+      console.warn('No editor instance found for ID:', editorId);
+      return null;
+    }
+    
+    // Temporarily set as current instance
+    const originalCurrent = Editor.currentInstance;
+    Editor.currentInstance = editor;
+    
+    // Create format instance
+    const format = new Background();
+    
+    // Restore original current instance
+    Editor.currentInstance = originalCurrent;
+    
+    return format;
+  }
+
+  /**
+   * Static method to apply background color to current selection
+   * @param {string} color - Background color value
+   * @param {string} editorId - Editor instance ID
+   */
+  static applyBackgroundToCurrentSelection(color, editorId = null) {
+    // Get the correct editor instance
+    let editor = null;
+    if (editorId) {
+      editor = Editor.getInstanceById(editorId);
+    } else {
+      editor = Editor.getCurrentInstance();
+    }
+    
+    if (!editor) {
+      console.warn('No editor instance found for background color application');
+      return;
+    }
+    
+    const selection = window.getSelection();
+    // Restore the selection captured when the picker opened (a tap on the
+    // picker may have collapsed the live selection, especially on mobile).
+    const saved = editorId != null ? Background.savedRanges.get(editorId) : null;
+    if (saved) {
+      selection.removeAllRanges();
+      selection.addRange(saved);
+    }
+    if (editorId != null) Background.savedRanges.delete(editorId);
+
+    if (!selection || !selection.rangeCount || selection.isCollapsed) return;
+
+    // Save state before applying format
+    saveBeforeFormat();
+
+    setStyleWithCSS(true);
+    execFormat('backColor', color === 'transparent' ? 'inherit' : color);
+
+    // Refresh toolbar state (active highlight + swatch) and notify listeners.
+    setTimeout(() => {
+      if (editor) {
+        if (typeof editor.updateToolbarButtonStates === 'function') {
+          editor.updateToolbarButtonStates();
+        }
+        if (typeof editor.onContentChange === 'function') {
+          editor.onContentChange();
+        }
+      }
+    }, 0);
+  }
+
+  /**
+   * Toggle background color formatting - shows/hides color picker
+   */
+  toggle() {
+    if (this.colorPicker.isVisible) {
+      this.colorPicker.hide();
+    } else {
+      this.showColorPicker();
+    }
+  }
+
+  /**
+   * Show color picker positioned relative to background button on toolbar
+   */
+  showColorPicker() {
+    // Find background button in the current editor's toolbar
+    const editor = Editor.getInstanceById(this.editorId);
+    if (!editor) return;
+
+    // Capture the selection so the colour applies even if a tap clears it.
+    // Fall back to the editor's last non-collapsed range (mobile touch clears it).
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount && !sel.isCollapsed) {
+      Background.savedRanges.set(this.editorId, sel.getRangeAt(0).cloneRange());
+    } else if (editor._lastRange) {
+      Background.savedRanges.set(this.editorId, editor._lastRange.cloneRange());
+    }
+
+    const toolbar = editor.getModule('toolbar');
+    let backgroundButton = null;
+    
+    if (toolbar) {
+      backgroundButton = toolbar.getButton('background');
+    }
+    
+    // Fallback: find button by class in the current editor's toolbar
+    if (!backgroundButton) {
+      const toolbarContainer = toolbar?.getContainer();
+      if (toolbarContainer) {
+        backgroundButton = toolbarContainer.querySelector('.rich-editor-toolbar-btn.background-btn');
+      }
+    }
+    
+    // Final fallback: find any background button in the current editor's wrapper
+    if (!backgroundButton) {
+      backgroundButton = editor.wrapper.querySelector('.rich-editor-toolbar-btn.background-btn');
+    }
+    
+    if (!backgroundButton) {
+      console.warn('Background button not found for editor:', this.editorId);
+      return;
+    }
+    
+    this.colorPicker.show(backgroundButton);
+  }
+
+  /**
+   * Check if background color formatting is active in current selection
+   */
+  isActive() {
+    return !!Background.getCurrentColor();
+  }
+
+  /**
+   * Return the explicit background colour applied at the current selection, or
+   * null when none is set. Looks for an explicit inline background (the span
+   * the editor inserts) instead of comparing the computed colour to hardcoded
+   * white/transparent — which misfired against themed backgrounds.
+   */
+  static getCurrentColor() {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return null;
+
+    let node = selection.getRangeAt(0).startContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+
+    while (node && node.nodeType === Node.ELEMENT_NODE) {
+      if (node.classList && node.classList.contains('rich-editor-area')) break;
+      if (node.style && node.style.backgroundColor && node.style.backgroundColor !== 'inherit') {
+        return node.style.backgroundColor;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+}
+
+export default Background; 

package/lib/formats/bold.js

@@ -0,0 +1,49 @@
+import { InlineFormat } from '../core/format.js';
+import { saveBeforeFormat } from '../utils/history-helper.js';
+import { execFormat, queryFormatState } from '../utils/exec-command.js';
+
+/**
+ * Bold Format - Handles bold text formatting
+ */
+class Bold extends InlineFormat {
+  static formatName = 'bold';
+  static tagName = 'B';
+  static alternativeTagNames = ['STRONG'];
+
+   /**
+   * Apply bold formatting
+   */
+  apply() {
+    // Save state before applying format
+    saveBeforeFormat();
+    execFormat('bold');
+  }
+
+  /**
+   * Remove bold formatting
+   */
+  remove() {
+    execFormat('bold');
+  }
+
+  /**
+   * Toggle bold formatting
+   */
+  toggle() {
+    // Save state before applying format
+    saveBeforeFormat();
+    execFormat('bold');
+  }
+
+  /**
+   * Check if bold formatting is active
+   */
+  isActive() {
+    return queryFormatState('bold');
+  }
+
+
+}
+
+
+export default Bold;