@ctzhian/tiptap 2.11.3 → 2.11.4

package/dist/extension/component/Tooltip/index.js

@@ -8,35 +8,30 @@ import { EditLineIcon } from "../../../component/Icons";
 import { Box, Stack, Tooltip } from "@mui/material";
 import { MarkViewContent } from "@tiptap/react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import sanitizeHtml from 'sanitize-html';
 import EditPopover from "./EditPopover";
-
-// 简单的 HTML 清理函数，用于 SSR 环境（不依赖 jsdom）
-// 确保 SSR 和客户端首次渲染一致，避免 hydration mismatch
-var simpleSanitize = function simpleSanitize(html) {
-  if (!html) return '';
-  return html
-  // 移除 script 标签
-  .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-  // 移除 style 标签（防止 CSS 注入）
-  .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
-  // 移除 iframe 标签
-  .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
-  // 移除 object、embed、link 等危险标签
-  .replace(/<(object|embed|link|meta|base)\b[^<]*(?:(?!<\/\1>)<[^<]*)*<\/\1>/gi, '')
-  // 移除所有事件处理器（onclick, onerror 等）
-  .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '')
-  // 移除 javascript: 协议
-  .replace(/javascript:/gi, '')
-  // 移除 data: URL（防止 base64 注入）
-  .replace(/data:\s*[^;]*;base64[^"'\s]*/gi, '').trim();
-};
-
-// DOMPurify 配置（客户端使用）
-var DOMPURIFY_CONFIG = {
-  // 允许基本的格式化标签
-  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'b', 'i', 'u', 's', 'strike', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'a', 'span', 'div', 'blockquote', 'code', 'pre'],
-  ALLOWED_ATTR: ['href', 'title', 'target', 'style', 'class'],
-  ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+var SANITIZE_CONFIG = {
+  allowedTags: ['p', 'br', 'strong', 'em', 'b', 'i', 'u', 's', 'strike', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'a', 'span', 'div', 'blockquote', 'code', 'pre'],
+  allowedAttributes: {
+    a: ['href', 'title', 'target'],
+    span: ['style', 'class'],
+    div: ['style', 'class'],
+    p: ['style', 'class'],
+    '*': ['class']
+  },
+  allowedStyles: {
+    '*': {
+      color: [/^#[0-9A-Fa-f]{3,6}$/, /^rgb/, /^rgba/],
+      'text-align': [/^left$/, /^right$/, /^center$/, /^justify$/],
+      'font-size': [/^\d+(?:px|em|rem|%)$/],
+      'font-weight': [/^\d+$/, /^normal$/, /^bold$/]
+    }
+  },
+  disallowedTagsMode: 'discard',
+  allowedSchemes: ['http', 'https', 'mailto'],
+  allowedSchemesByTag: {
+    a: ['http', 'https', 'mailto']
+  }
 };
 var TooltipView = function TooltipView(_ref) {
   var mark = _ref.mark,
@@ -55,72 +50,10 @@ var TooltipView = function TooltipView(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isMobile = _useState6[0],
     setIsMobile = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isHydrated = _useState8[0],
-    setIsHydrated = _useState8[1];
   var anchorRef = useRef(null);
-
-  // SSR 和客户端首次渲染时使用 simpleSanitize，确保一致性
-  var initialSanitized = useMemo(function () {
-    return simpleSanitize(rawTooltip);
+  var tooltip = useMemo(function () {
+    return sanitizeHtml(rawTooltip, SANITIZE_CONFIG).trim();
   }, [rawTooltip]);
-  var _useState9 = useState(initialSanitized),
-    _useState10 = _slicedToArray(_useState9, 2),
-    tooltip = _useState10[0],
-    setTooltip = _useState10[1];
-
-  // 检测是否在客户端环境（hydration 后）
-  useEffect(function () {
-    setIsHydrated(true);
-  }, []);
-
-  // 延迟导入 DOMPurify，避免在 SSR 环境下加载 jsdom
-  // 只在客户端环境下动态导入，确保 SSR 时不会触发 jsdom 初始化
-  useEffect(function () {
-    // SSR 环境下直接返回，使用 simpleSanitize 的结果
-    if (typeof window === 'undefined' || !isHydrated) {
-      return;
-    }
-
-    // 如果内容为空，不需要 sanitize
-    if (!rawTooltip.trim()) {
-      return;
-    }
-
-    // 客户端环境下异步导入 isomorphic-dompurify
-    // 使用动态 import() 确保在 SSR 构建时不会被打包进去
-    var cancelled = false;
-    import('isomorphic-dompurify').then(function (DOMPurify) {
-      // 检查组件是否已卸载
-      if (cancelled) return;
-
-      // 使用 DOMPurify 进行完整的 HTML sanitize
-      var sanitized = DOMPurify.default.sanitize(rawTooltip, DOMPURIFY_CONFIG).trim();
-
-      // 更新 tooltip（使用函数式更新避免依赖 tooltip 状态）
-      setTooltip(function (prevTooltip) {
-        // 只在内容发生变化时更新，避免不必要的重渲染
-        return sanitized !== prevTooltip ? sanitized : prevTooltip;
-      });
-    }).catch(function (error) {
-      // 如果导入失败（例如在某些 SSR 环境下），使用简单清理
-      if (!cancelled) {
-        console.warn('Failed to load DOMPurify, using simple sanitize:', error);
-        // 使用函数式更新
-        setTooltip(function (prevTooltip) {
-          var fallbackSanitized = simpleSanitize(rawTooltip);
-          return fallbackSanitized !== prevTooltip ? fallbackSanitized : prevTooltip;
-        });
-      }
-    });
-
-    // 清理函数：组件卸载时取消异步操作
-    return function () {
-      cancelled = true;
-    };
-  }, [rawTooltip, isHydrated]); // 依赖 rawTooltip 和 isHydrated
-
   var handleEditClick = function handleEditClick(e) {
     e.stopPropagation();
     setOpen(true);
@@ -156,7 +89,7 @@ var TooltipView = function TooltipView(_ref) {
     if (isEditable && tooltip === '' && !isSelectionEmpty && anchorRef.current) {
       setOpen(true);
     }
-  }, [tooltip, isEditable, anchorRef.current]);
+  }, [tooltip, isEditable]);
   var isMobileReadonly = !isEditable && isMobile;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "2.11.3",
+  "version": "2.11.4",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -66,6 +66,7 @@
     "@types/diff-match-patch": "^1.0.36",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/sanitize-html": "^2.16.0",
     "@umijs/lint": "^4.0.0",
     "dumi": "^2.4.21",
     "eslint": "^8.23.0",
@@ -118,7 +119,6 @@
     "core-js": "^3.46.0",
     "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.11.1",
-    "isomorphic-dompurify": "^2.34.0",
     "jszip": "^3.10.1",
     "katex": "^0.16.22",
     "linkifyjs": "^4.3.2",
@@ -128,6 +128,7 @@
     "react-colorful": "^5.6.1",
     "react-image-crop": "^11.0.10",
     "react-photo-view": "^1.2.7",
+    "sanitize-html": "^2.17.0",
     "uuid": "^11.1.0"
   },
   "scripts": {