@etsoo/materialui 1.5.20 → 1.5.22

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

@@ -0,0 +1,14 @@
+/**
+ * Custom HTML element properties
+ * 自定义 HTML 元素属性
+ */
+export type HtmlDivProps = Omit<HTMLElement, "children"> & {
+    children: React.ReactNode;
+};
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export declare function HtmlDiv(props: HtmlDivProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/html/HtmlDiv.js

@@ -0,0 +1,40 @@
+"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 dompurify_1 = __importDefault(require("dompurify"));
+class HtmlDivElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: "open" });
+        // Create a wrapper element to hold the sanitized HTML content
+        const wrapper = document.createElement("div");
+        if (this.textContent) {
+            wrapper.innerHTML = dompurify_1.default.sanitize(this.textContent);
+            this.textContent = null; // Clear the textContent to avoid duplication
+        }
+        shadow.appendChild(wrapper);
+    }
+}
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+    customElements.define("html-div", HtmlDivElement);
+}
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+function HtmlDiv(props) {
+    // Destruct
+    const { children, ...rest } = props;
+    // Layout
+    return (0, jsx_runtime_1.jsx)("html-div", { ...rest, children: children });
+}

package/lib/cjs/index.d.ts

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/cjs/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./app/ServiceApp"), exports);
 __exportStar(require("./custom/CustomFieldUtils"), exports);
 __exportStar(require("./custom/CustomFieldViewer"), exports);
 __exportStar(require("./custom/CustomFieldWindow"), exports);
+__exportStar(require("./html/HtmlDiv"), exports);
 __exportStar(require("./messages/MessageUtils"), exports);
 __exportStar(require("./messages/OperationMessageContainer"), exports);
 __exportStar(require("./messages/OperationMessageDto"), exports);

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

@@ -0,0 +1,14 @@
+/**
+ * Custom HTML element properties
+ * 自定义 HTML 元素属性
+ */
+export type HtmlDivProps = Omit<HTMLElement, "children"> & {
+    children: React.ReactNode;
+};
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export declare function HtmlDiv(props: HtmlDivProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/html/HtmlDiv.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+class HtmlDivElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: "open" });
+        // Create a wrapper element to hold the sanitized HTML content
+        const wrapper = document.createElement("div");
+        if (this.textContent) {
+            wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+            this.textContent = null; // Clear the textContent to avoid duplication
+        }
+        shadow.appendChild(wrapper);
+    }
+}
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+    customElements.define("html-div", HtmlDivElement);
+}
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export function HtmlDiv(props) {
+    // Destruct
+    const { children, ...rest } = props;
+    // Layout
+    return _jsx("html-div", { ...rest, children: children });
+}

package/lib/mjs/index.d.ts

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/lib/mjs/index.js

@@ -9,6 +9,7 @@ export * from "./app/ServiceApp";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
+export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.20",
+  "version": "1.5.22",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -44,11 +44,12 @@
     "@etsoo/notificationbase": "^1.1.60",
     "@etsoo/react": "^1.8.38",
     "@etsoo/shared": "^1.2.66",
-    "@mui/icons-material": "^7.0.1",
-    "@mui/material": "^7.0.1",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/material": "^7.0.2",
     "@mui/x-data-grid": "^7.28.3",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "dompurify": "^3.2.5",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",

package/src/global.d.ts

@@ -0,0 +1,5 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "html-div";
+  }
+}

package/src/html/HtmlDiv.tsx

@@ -0,0 +1,48 @@
+import DOMPurify from "dompurify";
+
+class HtmlDivElement extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // Create a wrapper element to hold the sanitized HTML content
+    const wrapper = document.createElement("div");
+    if (this.textContent) {
+      wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+      this.textContent = null; // Clear the textContent to avoid duplication
+    }
+
+    shadow.appendChild(wrapper);
+  }
+}
+
+// Define the custom element only once
+if (!customElements.get("html-div")) {
+  customElements.define("html-div", HtmlDivElement);
+}
+
+/**
+ * Custom HTML element properties
+ * 自定义 HTML 元素属性
+ */
+export type HtmlDivProps = Omit<HTMLElement, "children"> & {
+  children: React.ReactNode;
+};
+
+/**
+ * Custom HTML element that sanitizes and displays HTML content
+ * 自定义 HTML 元素，用于清理和显示 HTML 内容
+ * @param props Properties
+ * @returns Component
+ */
+export function HtmlDiv(props: HtmlDivProps) {
+  // Destruct
+  const { children, ...rest } = props;
+
+  // Layout
+  return <html-div {...rest}>{children}</html-div>;
+}

package/src/index.ts

@@ -11,6 +11,8 @@ export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
 export * from "./custom/CustomFieldWindow";
 
+export * from "./html/HtmlDiv";
+
 export * from "./messages/MessageUtils";
 export * from "./messages/OperationMessageContainer";
 export * from "./messages/OperationMessageDto";