@etsoo/materialui 1.5.29 → 1.5.30

package/lib/cjs/html/HtmlDiv.d.ts

@@ -3,7 +3,20 @@ import { HTMLAttributes } from "react";
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Display style
+     * 显示样式
+     */
+    displayStyle?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "html-div": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容

package/lib/cjs/html/HtmlDiv.js

@@ -1,13 +1,27 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlDiv = HtmlDiv;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const dompurify_1 = __importDefault(require("dompurify"));
 class HtmlDivElement extends HTMLElement {
+    static get observedAttributes() {
+        return ["displaystyle"];
+    }
+    wrapper = null;
+    observer = null;
+    _displayStyle = undefined;
+    /**
+     * Display style
+     */
+    get displayStyle() {
+        return this._displayStyle;
+    }
+    set displayStyle(style) {
+        this._displayStyle = style;
+        if (this.wrapper && style != null) {
+            this.wrapper.style.cssText = style;
+        }
+    }
     constructor() {
         super();
     }
@@ -16,17 +30,49 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
+        wrapper.style.cssText = this.displayStyle ?? "";
+        shadow.appendChild(wrapper);
+        this.wrapper = wrapper;
+        this.setContent();
+        let miliseconds = Date.now();
+        this.observer = new MutationObserver(() => {
+            const m = Date.now();
+            if (m - miliseconds < 50)
+                return; // Ignore fast changes
+            miliseconds = m;
+            this.setContent();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "displaystyle" && typeof newValue === "string") {
+            this.displayStyle = newValue;
+        }
+    }
+    setContent() {
+        const wrapper = this.wrapper;
+        if (!wrapper)
+            return;
         const html = this.innerHTML;
         if (shared_1.Utils.hasHtmlEntity(html) &&
             !shared_1.Utils.hasHtmlTag(html) &&
             this.textContent) {
-            wrapper.innerHTML = dompurify_1.default.sanitize(this.textContent);
+            wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = dompurify_1.default.sanitize(html);
+            wrapper.innerHTML = html;
         }
         this.textContent = null; // Clear the textContent to avoid duplication
-        shadow.appendChild(wrapper);
     }
 }
 // Define the custom element only once

package/lib/mjs/html/HtmlDiv.d.ts

@@ -3,7 +3,20 @@ import { HTMLAttributes } from "react";
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Display style
+     * 显示样式
+     */
+    displayStyle?: string;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "html-div": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容

package/lib/mjs/html/HtmlDiv.js

@@ -1,7 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import DOMPurify from "dompurify";
 class HtmlDivElement extends HTMLElement {
+    static get observedAttributes() {
+        return ["displaystyle"];
+    }
+    wrapper = null;
+    observer = null;
+    _displayStyle = undefined;
+    /**
+     * Display style
+     */
+    get displayStyle() {
+        return this._displayStyle;
+    }
+    set displayStyle(style) {
+        this._displayStyle = style;
+        if (this.wrapper && style != null) {
+            this.wrapper.style.cssText = style;
+        }
+    }
     constructor() {
         super();
     }
@@ -10,17 +27,49 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
+        wrapper.style.cssText = this.displayStyle ?? "";
+        shadow.appendChild(wrapper);
+        this.wrapper = wrapper;
+        this.setContent();
+        let miliseconds = Date.now();
+        this.observer = new MutationObserver(() => {
+            const m = Date.now();
+            if (m - miliseconds < 50)
+                return; // Ignore fast changes
+            miliseconds = m;
+            this.setContent();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "displaystyle" && typeof newValue === "string") {
+            this.displayStyle = newValue;
+        }
+    }
+    setContent() {
+        const wrapper = this.wrapper;
+        if (!wrapper)
+            return;
         const html = this.innerHTML;
         if (Utils.hasHtmlEntity(html) &&
             !Utils.hasHtmlTag(html) &&
             this.textContent) {
-            wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+            wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = DOMPurify.sanitize(html);
+            wrapper.innerHTML = html;
         }
         this.textContent = null; // Clear the textContent to avoid duplication
-        shadow.appendChild(wrapper);
     }
 }
 // Define the custom element only once

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.29",
+  "version": "1.5.30",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/html/HtmlDiv.tsx

@@ -1,8 +1,29 @@
 import { Utils } from "@etsoo/shared";
-import DOMPurify from "dompurify";
 import { HTMLAttributes } from "react";
 
 class HtmlDivElement extends HTMLElement {
+  static get observedAttributes() {
+    return ["displaystyle"];
+  }
+
+  private wrapper: HTMLDivElement | null = null;
+  private observer: MutationObserver | null = null;
+
+  private _displayStyle?: string = undefined;
+
+  /**
+   * Display style
+   */
+  get displayStyle() {
+    return this._displayStyle;
+  }
+  set displayStyle(style: string | undefined) {
+    this._displayStyle = style;
+    if (this.wrapper && style != null) {
+      this.wrapper.style.cssText = style;
+    }
+  }
+
   constructor() {
     super();
   }
@@ -13,20 +34,55 @@ class HtmlDivElement extends HTMLElement {
 
     // Create a wrapper element to hold the sanitized HTML content
     const wrapper = document.createElement("div");
+    wrapper.style.cssText = this.displayStyle ?? "";
+    shadow.appendChild(wrapper);
+
+    this.wrapper = wrapper;
+    this.setContent();
+
+    let miliseconds = Date.now();
+    this.observer = new MutationObserver(() => {
+      const m = Date.now();
+      if (m - miliseconds < 50) return; // Ignore fast changes
+      miliseconds = m;
+      this.setContent();
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+
+  attributeChangedCallback(name: string, _oldValue: any, newValue: any) {
+    if (name === "displaystyle" && typeof newValue === "string") {
+      this.displayStyle = newValue;
+    }
+  }
+
+  setContent() {
+    const wrapper = this.wrapper;
+    if (!wrapper) return;
+
     const html = this.innerHTML;
     if (
       Utils.hasHtmlEntity(html) &&
       !Utils.hasHtmlTag(html) &&
       this.textContent
     ) {
-      wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+      wrapper.innerHTML = this.textContent;
     } else {
-      wrapper.innerHTML = DOMPurify.sanitize(html);
+      wrapper.innerHTML = html;
     }
 
     this.textContent = null; // Clear the textContent to avoid duplication
-
-    shadow.appendChild(wrapper);
   }
 }
 
@@ -39,7 +95,21 @@ if (!customElements.get("html-div")) {
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * Display style
+   * 显示样式
+   */
+  displayStyle?: string;
+};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "html-div": React.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
 
 /**
  * Custom HTML element that sanitizes and displays HTML content

package/src/global.d.ts

@@ -1,5 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    "html-div": React.HTMLAttributes<HTMLElement>;
-  }
-}