@oix1987/yjd 1.0.3 → 2.1.0

package/lib/utils/popup-helper.js

@@ -0,0 +1,219 @@
+/**
+ * Popup Helper Utility
+ * Helps popups append to the yjd-rich-editor instead of document.body
+ * Now supports multiple editor instances with separate popup containers
+ */
+import Editor from '../core/editor.js';
+
+/**
+ * Get the appropriate container for popups
+ * @param {string} editorId - Optional editor instance ID
+ * @returns {HTMLElement} Container element for popups
+ */
+export function getPopupContainer(editorId = null) {
+  let editor;
+  
+  if (editorId) {
+    // Get specific editor instance
+    editor = Editor.getInstanceById(editorId);
+  } else {
+    // Try to get current editor instance
+    editor = Editor.getCurrentInstance();
+  }
+  
+  if (editor) {
+    return editor.getPopupContainer();
+  }
+  
+  // Fallback to document.body if no editor instance
+  return document.body;
+}
+
+/**
+ * Append popup to the appropriate container
+ * @param {HTMLElement} popup - Popup element to append
+ * @param {string} editorId - Optional editor instance ID
+ */
+export function appendPopup(popup, editorId = null) {
+  const container = getPopupContainer(editorId);
+  
+  // Remove from current parent if exists
+  if (popup.parentNode) {
+    popup.parentNode.removeChild(popup);
+  }
+  
+  container.appendChild(popup);
+  
+  // Note: pointer-events are now controlled by CSS rules
+  // Popup containers have pointer-events: none by default
+  // Interactive elements inside popups have pointer-events: auto
+}
+
+/**
+ * Get popup dimensions by temporarily showing it if needed
+ * @param {HTMLElement} popup - Popup element
+ * @returns {Object} Object with width and height
+ */
+function getPopupDimensions(popup) {
+  if (!popup) return { width: 300, height: 200 };
+  
+  // Try getBoundingClientRect first
+  const rect = popup.getBoundingClientRect();
+  if (rect.width > 0 && rect.height > 0) {
+    return { width: rect.width, height: rect.height };
+  }
+  
+  // Try offsetWidth/offsetHeight
+  if (popup.offsetWidth > 0 && popup.offsetHeight > 0) {
+    return { width: popup.offsetWidth, height: popup.offsetHeight };
+  }
+  
+  // Check if popup is hidden
+  const computedStyle = window.getComputedStyle(popup);
+  const isHidden = computedStyle.display === 'none' || computedStyle.visibility === 'hidden';
+  
+  if (isHidden) {
+    // Temporarily show popup to get dimensions
+    const originalDisplay = popup.style.display;
+    const originalVisibility = popup.style.visibility;
+    const originalPosition = popup.style.position;
+    const originalTop = popup.style.top;
+    const originalLeft = popup.style.left;
+    const originalZIndex = popup.style.zIndex;
+    
+    // Make popup visible but off-screen
+    popup.style.display = 'block';
+    popup.style.visibility = 'visible';
+    popup.style.position = 'absolute';
+    popup.style.top = '-9999px';
+    popup.style.left = '-9999px';
+    popup.style.zIndex = '-1';
+    
+    // Force reflow
+    popup.offsetHeight;
+    
+    // Get dimensions
+    const tempRect = popup.getBoundingClientRect();
+    const width = tempRect.width > 0 ? tempRect.width : 300;
+    const height = tempRect.height > 0 ? tempRect.height : 200;
+    
+    // Restore original styles
+    popup.style.display = originalDisplay;
+    popup.style.visibility = originalVisibility;
+    popup.style.position = originalPosition;
+    popup.style.top = originalTop;
+    popup.style.left = originalLeft;
+    popup.style.zIndex = originalZIndex;
+    
+    return { width, height };
+  }
+  
+  // Last resort: try computed styles
+  const computedWidth = parseInt(computedStyle.width);
+  const computedHeight = parseInt(computedStyle.height);
+  
+  return {
+    width: computedWidth > 0 ? computedWidth : 300,
+    height: computedHeight > 0 ? computedHeight : 200
+  };
+}
+
+/**
+ * Calculate position for popup relative to anchor element
+ * @param {HTMLElement} anchor - Anchor element
+ * @param {HTMLElement} popup - Popup element
+ * @param {Object} options - Positioning options
+ * @returns {Object} Position object with top and left values
+ */
+export function calculatePopupPosition(anchor, popup, options = {}) {
+  const {
+    offsetX = 0,
+    offsetY = 5,
+    preferTop = false,
+    preferLeft = false
+  } = options;
+
+  const anchorRect = anchor.getBoundingClientRect();
+  const container = getPopupContainer();
+  const isInWrapper = container.classList.contains('rich-editor-popup-container');
+  
+  let top, left;
+  
+  if (isInWrapper) {
+    // Position relative to wrapper
+    const wrapperRect = container.getBoundingClientRect();
+    
+    // Calculate position relative to wrapper
+    top = anchorRect.top - wrapperRect.top + anchorRect.height + offsetY;
+    left = anchorRect.left - wrapperRect.left + offsetX;
+    
+    // Get popup dimensions using the helper function
+    const { width: popupWidth, height: popupHeight } = getPopupDimensions(popup);
+
+    
+    // Check if popup would overflow bottom of wrapper
+    if (top + popupHeight > wrapperRect.height && !preferTop) {
+      // Try to position above the anchor
+      const topPosition = anchorRect.top - wrapperRect.top - popupHeight - offsetY;
+      if (topPosition >= 0) {
+        top = topPosition;
+      } else {
+        // If still doesn't fit, try to center it vertically within the wrapper
+        top = Math.max(offsetY, (wrapperRect.height - popupHeight) / 2);
+      }
+    }
+    
+    // Check if popup would overflow right of wrapper
+    if (left + popupWidth + 5 > wrapperRect.width && !preferLeft) {
+      left = wrapperRect.width - popupWidth - offsetX -15;
+    }
+    
+    // Ensure popup doesn't go off-screen
+    if (left < 0) left = offsetX;
+    if (top < 0) top = offsetY;
+    
+  } else {
+    // Fallback to document.body positioning
+    top = anchorRect.bottom + window.scrollY + offsetY;
+    left = anchorRect.left + window.scrollX + offsetX;
+
+    
+    // Get popup dimensions using the helper function
+    const { width: popupWidth, height: popupHeight } = getPopupDimensions(popup);
+    
+    // Check if popup would overflow right edge
+    if (left + popupWidth > window.innerWidth && !preferLeft) {
+      left = window.innerWidth - popupWidth - offsetX;
+    }
+    
+    // Check if popup would overflow bottom edge
+    if (top + popupHeight > window.innerHeight + window.scrollY && !preferTop) {
+      // Try to position above the anchor
+      const topPosition = anchorRect.top + window.scrollY - popupHeight - offsetY;
+      if (topPosition >= window.scrollY) {
+        top = topPosition;
+      } else {
+        // If still doesn't fit, try to center it vertically within the viewport
+        top = Math.max(window.scrollY + offsetY, window.scrollY + (window.innerHeight - popupHeight) / 2);
+      }
+    }
+    
+    // Ensure popup doesn't go off-screen
+    if (left < 0) left = offsetX;
+    if (top < 0) top = offsetY;
+  }
+  
+  return { top, left };
+}
+
+/**
+ * Set popup position
+ * @param {HTMLElement} popup - Popup element
+ * @param {Object} position - Position object with top and left values
+ */
+export function setPopupPosition(popup, position) {
+  popup.style.position = 'absolute';
+  popup.style.top = `${position.top}px`;
+  popup.style.left = `${position.left}px`;
+  popup.style.zIndex = '1000';
+}

package/lib/utils/popup-positioning.js

@@ -0,0 +1,234 @@
+/**
+ * Responsive Popup Positioning Utility
+ * Handles positioning of popups to ensure they stay within viewport on mobile devices
+ */
+export class PopupPositioning {
+  /**
+   * Calculate optimal position for popup to stay within viewport
+   * @param {HTMLElement} anchor - The anchor element
+   * @param {HTMLElement} popup - The popup element
+   * @param {Object} options - Positioning options
+   * @returns {Object} - Calculated position {top, left, transform}
+   */
+  static calculatePosition(anchor, popup, options = {}) {
+    const {
+      offsetX = 0,
+      offsetY = 5,
+      preferredPosition = 'bottom-right', // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
+      maxWidth = null,
+      maxHeight = null
+    } = options;
+
+    // Get viewport dimensions
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+
+    // Get anchor dimensions
+    const anchorRect = anchor.getBoundingClientRect();
+    
+    // Get popup dimensions (measure if not already rendered)
+    let popupWidth = popup.offsetWidth;
+    let popupHeight = popup.offsetHeight;
+    
+    // If popup is not yet visible, measure it off-screen WITHOUT adding the
+    // `.visible` class — adding that class would trigger the entrance animation
+    // during measurement, making the real show flicker / feel laggy.
+    let wasVisible = popup.classList.contains('visible');
+    let prevDisplay = '';
+    let prevVisibility = '';
+    if (!wasVisible) {
+      prevDisplay = popup.style.display;
+      prevVisibility = popup.style.visibility;
+      popup.style.visibility = 'hidden';
+      popup.style.display = 'block';
+    }
+
+    // Measure popup dimensions
+    popupWidth = popup.offsetWidth;
+    popupHeight = popup.offsetHeight;
+
+    // Apply max constraints
+    if (maxWidth && popupWidth > maxWidth) {
+      popupWidth = maxWidth;
+    }
+    if (maxHeight && popupHeight > maxHeight) {
+      popupHeight = maxHeight;
+    }
+
+    // Restore hidden state
+    if (!wasVisible) {
+      popup.style.display = prevDisplay;
+      popup.style.visibility = prevVisibility;
+    }
+
+    // Calculate base positions for different orientations
+    const positions = {
+      'bottom-right': {
+        top: anchorRect.bottom + scrollY + offsetY,
+        left: anchorRect.left + scrollX + offsetX
+      },
+      'bottom-left': {
+        top: anchorRect.bottom + scrollY + offsetY,
+        left: anchorRect.right + scrollX - popupWidth - offsetX
+      },
+      'top-right': {
+        top: anchorRect.top + scrollY - popupHeight - offsetY,
+        left: anchorRect.left + scrollX + offsetX
+      },
+      'top-left': {
+        top: anchorRect.top + scrollY - popupHeight - offsetY,
+        left: anchorRect.right + scrollX - popupWidth - offsetX
+      }
+    };
+
+    // Start with preferred position
+    let position = positions[preferredPosition];
+    let transform = '';
+
+    // Check if popup fits in preferred position
+    const fitsInPreferred = this.checkFitsInViewport(position, popupWidth, popupHeight, viewportWidth, viewportHeight, scrollX, scrollY);
+
+    if (!fitsInPreferred) {
+      // Try alternative positions
+      const alternativePositions = this.getAlternativePositions(preferredPosition);
+      
+      for (const altPosition of alternativePositions) {
+        const testPosition = positions[altPosition];
+        if (this.checkFitsInViewport(testPosition, popupWidth, popupHeight, viewportWidth, viewportHeight, scrollX, scrollY)) {
+          position = testPosition;
+          break;
+        }
+      }
+
+      // If no position fits, use the best available with adjustments
+      if (!this.checkFitsInViewport(position, popupWidth, popupHeight, viewportWidth, viewportHeight, scrollX, scrollY)) {
+        position = this.adjustToFitViewport(position, popupWidth, popupHeight, viewportWidth, viewportHeight, scrollX, scrollY);
+      }
+    }
+
+    // For mobile devices, add additional constraints
+    if (viewportWidth <= 768) {
+      position = this.applyMobileConstraints(position, popupWidth, popupHeight, viewportWidth, viewportHeight, scrollX, scrollY);
+    }
+
+    return {
+      top: position.top,
+      left: position.left,
+      transform: transform
+    };
+  }
+
+  /**
+   * Check if position fits within viewport
+   */
+  static checkFitsInViewport(position, width, height, viewportWidth, viewportHeight, scrollX, scrollY) {
+    const right = position.left + width;
+    const bottom = position.top + height;
+    
+    return position.left >= scrollX &&
+           position.top >= scrollY &&
+           right <= scrollX + viewportWidth &&
+           bottom <= scrollY + viewportHeight;
+  }
+
+  /**
+   * Get alternative positions to try
+   */
+  static getAlternativePositions(preferredPosition) {
+    const alternatives = {
+      'bottom-right': ['bottom-left', 'top-right', 'top-left'],
+      'bottom-left': ['bottom-right', 'top-left', 'top-right'],
+      'top-right': ['top-left', 'bottom-right', 'bottom-left'],
+      'top-left': ['top-right', 'bottom-left', 'bottom-right']
+    };
+    
+    return alternatives[preferredPosition] || ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+  }
+
+  /**
+   * Adjust position to fit within viewport
+   */
+  static adjustToFitViewport(position, width, height, viewportWidth, viewportHeight, scrollX, scrollY) {
+    let { top, left } = position;
+
+    // Adjust horizontal position
+    if (left < scrollX) {
+      left = scrollX + 10;
+    } else if (left + width > scrollX + viewportWidth) {
+      left = scrollX + viewportWidth - width - 10;
+    }
+
+    // Adjust vertical position
+    if (top < scrollY) {
+      top = scrollY + 10;
+    } else if (top + height > scrollY + viewportHeight) {
+      top = scrollY + viewportHeight - height - 10;
+    }
+
+    return { top, left };
+  }
+
+  /**
+   * Apply mobile-specific constraints
+   */
+  static applyMobileConstraints(position, width, height, viewportWidth, viewportHeight, scrollX, scrollY) {
+    let { top, left } = position;
+
+    // On mobile, prefer center positioning if popup is too large
+    if (width > viewportWidth * 0.9) {
+      left = scrollX + (viewportWidth - width) / 2;
+    }
+
+    if (height > viewportHeight * 0.8) {
+      top = scrollY + (viewportHeight - height) / 2;
+    }
+
+    // Ensure minimum margins
+    const minMargin = 10;
+    if (left < scrollX + minMargin) left = scrollX + minMargin;
+    if (top < scrollY + minMargin) top = scrollY + minMargin;
+    if (left + width > scrollX + viewportWidth - minMargin) {
+      left = scrollX + viewportWidth - width - minMargin;
+    }
+    if (top + height > scrollY + viewportHeight - minMargin) {
+      top = scrollY + viewportHeight - height - minMargin;
+    }
+
+    return { top, left };
+  }
+
+  /**
+   * Apply calculated position to popup element
+   */
+  static applyPosition(popup, position) {
+    popup.style.position = 'absolute';
+    popup.style.top = `${position.top}px`;
+    popup.style.left = `${position.left}px`;
+    
+    if (position.transform) {
+      popup.style.transform = position.transform;
+    }
+  }
+
+  /**
+   * Check if device is mobile
+   */
+  static isMobile() {
+    return window.innerWidth <= 768;
+  }
+
+  /**
+   * Get recommended max dimensions for mobile
+   */
+  static getMobileMaxDimensions() {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    
+    return {
+      maxWidth: Math.min(viewportWidth * 0.95, 350),
+      maxHeight: Math.min(viewportHeight * 0.8, 400)
+    };
+  }
+} 

package/lib/utils/sanitize.js

@@ -0,0 +1,164 @@
+/**
+ * Sanitize utilities - dependency-free XSS protection helpers.
+ *
+ * These functions provide a defense-in-depth layer for the few places where
+ * the editor turns user-supplied strings into live DOM (links, images, video,
+ * HTML import, code view). They are intentionally conservative: anything that
+ * is not provably safe is rejected.
+ */
+
+// URL schemes that are safe to use as navigable links / resource sources.
+const SAFE_URL_SCHEMES = ['http:', 'https:', 'mailto:', 'tel:', 'ftp:'];
+
+// Trusted iframe embed prefixes (used by the video feature).
+const TRUSTED_IFRAME_PREFIXES = [
+  'https://www.youtube.com/embed/',
+  'https://www.youtube-nocookie.com/embed/',
+  'https://player.vimeo.com/video/'
+];
+
+/**
+ * Determine whether a URL is safe to assign to href/src.
+ *
+ * Relative URLs, anchors and path-only references (no scheme) are considered
+ * safe. URLs with an explicit scheme are only allowed if the scheme is in the
+ * whitelist. `javascript:`, `vbscript:`, `data:text/html`, etc. are rejected.
+ *
+ * @param {string} url - URL to validate
+ * @param {object} [options]
+ * @param {boolean} [options.allowDataImage] - allow `data:image/*` (except SVG)
+ * @returns {boolean}
+ */
+export function isSafeUrl(url, { allowDataImage = false } = {}) {
+  if (typeof url !== 'string') return false;
+
+  const trimmed = url.trim();
+  if (trimmed === '') return false;
+
+  // Strip control/whitespace characters that are commonly used to smuggle
+  // schemes past naive validators (e.g. "java\tscript:alert(1)").
+  const stripped = trimmed.replace(/[\u0000-\u0020\u007F-\u009F]/g, '');
+
+  // Detect a leading scheme. If there is none it is a relative URL → safe.
+  const schemeMatch = stripped.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!schemeMatch) {
+    return true;
+  }
+
+  const scheme = schemeMatch[1].toLowerCase() + ':';
+
+  if (scheme === 'data:') {
+    if (!allowDataImage) return false;
+    // Allow raster image data URIs only. SVG can carry script, so it is denied.
+    return /^data:image\//i.test(stripped) && !/^data:image\/svg/i.test(stripped);
+  }
+
+  return SAFE_URL_SCHEMES.includes(scheme);
+}
+
+/**
+ * Return the URL if it is safe, otherwise an empty string.
+ * @param {string} url
+ * @param {object} [options] - same options as isSafeUrl
+ * @returns {string}
+ */
+export function sanitizeUrl(url, options) {
+  return isSafeUrl(url, options) ? url.trim() : '';
+}
+
+// Tags that are never allowed in sanitized HTML.
+const FORBIDDEN_TAGS = new Set([
+  'SCRIPT', 'STYLE', 'OBJECT', 'EMBED', 'LINK', 'META', 'BASE',
+  'FORM', 'INPUT', 'BUTTON', 'TEXTAREA', 'SELECT', 'OPTION', 'NOSCRIPT'
+]);
+
+/**
+ * Clean a single element node in place: drop event-handler attributes,
+ * unsafe href/src URLs and dangerous inline styles.
+ * @param {Element} el
+ */
+function cleanElement(el) {
+  const attrs = Array.from(el.attributes);
+  for (const attr of attrs) {
+    const name = attr.name.toLowerCase();
+    const value = attr.value;
+
+    // Strip all inline event handlers (onclick, onerror, onload, ...).
+    if (name.startsWith('on')) {
+      el.removeAttribute(attr.name);
+      continue;
+    }
+
+    // Validate URL-bearing attributes.
+    if (name === 'href' || name === 'src' || name === 'xlink:href') {
+      const allowDataImage = el.tagName === 'IMG';
+      if (!isSafeUrl(value, { allowDataImage })) {
+        el.removeAttribute(attr.name);
+      }
+      continue;
+    }
+
+    // Reject styles that can execute script (legacy IE expression / url(javascript:)).
+    if (name === 'style' && /expression\s*\(|javascript:/i.test(value)) {
+      el.removeAttribute(attr.name);
+    }
+  }
+}
+
+/**
+ * Sanitize an HTML string and return safe HTML.
+ *
+ * Parsing is done with DOMParser so that no scripts execute and no network
+ * resources load during sanitization (the parsed document is inert).
+ *
+ * @param {string} html - untrusted HTML
+ * @returns {string} sanitized HTML
+ */
+export function sanitizeHtml(html) {
+  if (typeof html !== 'string' || html === '') return '';
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const elements = Array.from(doc.body.querySelectorAll('*'));
+
+  for (const el of elements) {
+    const tag = el.tagName;
+
+    if (FORBIDDEN_TAGS.has(tag)) {
+      el.remove();
+      continue;
+    }
+
+    // Iframes are only allowed when pointing at a trusted embed host.
+    if (tag === 'IFRAME') {
+      const src = el.getAttribute('src') || '';
+      const trusted = TRUSTED_IFRAME_PREFIXES.some(prefix => src.startsWith(prefix));
+      if (!trusted) {
+        el.remove();
+        continue;
+      }
+    }
+
+    cleanElement(el);
+  }
+
+  return doc.body.innerHTML;
+}
+
+/**
+ * Sanitize an already-parsed DOM subtree in place (event handlers + unsafe URLs).
+ * Use when content is built via the DOM rather than from an HTML string.
+ * @param {Element} root
+ */
+export function sanitizeNode(root) {
+  if (!root) return;
+  const elements = Array.from(root.querySelectorAll('*'));
+  for (const el of elements) {
+    if (FORBIDDEN_TAGS.has(el.tagName)) {
+      el.remove();
+      continue;
+    }
+    cleanElement(el);
+  }
+}
+
+export default { isSafeUrl, sanitizeUrl, sanitizeHtml, sanitizeNode };

package/package.json

@@ -1,32 +1,51 @@
-{
-  "name": "@oix1987/yjd",
-  "version": "1.0.3",
-  "description": "A powerful rich text editor with real-time content change tracking for web applications using base javascript",
-  "license": "ISC",
-  "author": "Oix1987",
-  "type": "module",
-  "main": "dist/rich-editor.min.js",
-  "module": "dist/rich-editor.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/rich-editor.esm.js",
-      "require": "./dist/rich-editor.min.js"
-    },
-    "./styles.css": "./dist/styles.css"
-  },
-  "types": "index.d.ts",
-  "files": [
-    "dist",
-    "index.d.ts",
-    "README.md"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
-    "rollup": "^4.46.3"
-  }
-}
+{
+  "name": "@oix1987/yjd",
+  "version": "2.1.0",
+  "description": "A powerful rich text editor with real-time content change tracking for web applications using base javascript",
+  "license": "ISC",
+  "author": "Oix1987",
+  "type": "module",
+  "main": "dist/rich-editor.min.js",
+  "module": "dist/rich-editor.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/rich-editor.esm.js",
+      "require": "./dist/rich-editor.min.js"
+    },
+    "./core": "./core.js",
+    "./styles.css": "./lib/styles.min.css",
+    "./lib/*": "./lib/*",
+    "./package.json": "./package.json"
+  },
+  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "core.js",
+    "index.js",
+    "umd-entry.js",
+    "index.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "node --test test/*.test.js",
+    "generate:css": "node scripts/generate-css.js",
+    "prebuild": "npm run generate:css",
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build",
+    "build:demos": "rollup -c demos/rollup.demos.config.js",
+    "build:site": "node scripts/build-site.js",
+    "build:pages": "npm run build && node scripts/build-site.js"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "csso": "^5.0.5",
+    "jsdom": "^29.1.1",
+    "rollup": "^4.46.3"
+  },
+  "sideEffects": [
+    "./index.js",
+    "./umd-entry.js"
+  ]
+}