@ctzhian/tiptap 1.12.21 → 1.12.23

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

@@ -4,22 +4,165 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Paper } from '@mui/material';
+import { Box, InputAdornment, Paper, Tab, Tabs, TextField, useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+// 每行显示的 emoji 数量
+var EMOJIS_PER_ROW = 8;
+
+// 分类定义：中文显示名 -> 英文搜索关键词数组
+var EMOJI_CATEGORIES = [{
+  label: '表情',
+  keywords: ['face', 'smile', 'grinning', 'laugh', 'cry', 'angry', 'sad', 'happy', 'wink', 'kiss', 'love', 'joy']
+}, {
+  label: '手势',
+  keywords: ['hand', 'thumbs', 'finger', 'wave', 'clap', 'fist', 'victory', 'peace', 'ok']
+}, {
+  label: '人物',
+  keywords: ['person', 'man', 'woman', 'baby', 'boy', 'girl', 'family', 'people', 'adult', 'child', 'prince', 'princess', 'superhero', 'angel', 'santa']
+}, {
+  label: '动物',
+  keywords: ['cat', 'dog', 'bird', 'fish', 'bear', 'lion', 'tiger', 'panda', 'monkey', 'pig', 'cow', 'horse', 'mouse', 'rabbit', 'fox', 'elephant', 'dolphin', 'whale', 'butterfly', 'bug', 'bee', 'spider', 'snake', 'turtle']
+}, {
+  label: '食物',
+  keywords: ['food', 'apple', 'banana', 'pizza', 'cake', 'coffee', 'tea', 'beer', 'wine', 'bread', 'meat', 'egg', 'rice', 'sushi', 'ice-cream', 'cookie', 'chocolate', 'candy']
+}, {
+  label: '活动',
+  keywords: ['sport', 'ball', 'game', 'music', 'dance', 'party', 'fireworks', 'soccer', 'basketball', 'football', 'tennis', 'video-game']
+}, {
+  label: '旅行',
+  keywords: ['car', 'bus', 'train', 'plane', 'ship', 'bike', 'airplane', 'helicopter', 'rocket', 'luggage', 'hotel', 'beach']
+}, {
+  label: '物品',
+  keywords: ['phone', 'computer', 'book', 'gift', 'money', 'key', 'lock', 'light', 'camera', 'watch', 'clock', 'scissors']
+}, {
+  label: '符号',
+  keywords: ['heart', 'arrow', 'check', 'cross', 'question', 'exclamation', 'plus', 'minus', 'star', 'circle', 'square', 'flag']
+}, {
+  label: '自然',
+  keywords: ['sun', 'moon', 'star', 'cloud', 'rain', 'snow', 'tree', 'flower', 'leaf', 'fire', 'water', 'mountain']
+}];
 export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = useTheme();
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     selectedIndex = _useState2[0],
     setSelectedIndex = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchQuery = _useState4[0],
+    setSearchQuery = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeTab = _useState6[0],
+    setActiveTab = _useState6[1];
+
+  // 使用传入的 query 或内部的 searchQuery
+  var effectiveQuery = (props.query || searchQuery).trim();
+  var hasQuery = effectiveQuery.length > 0;
+
+  // 根据搜索查询和分类过滤 emoji
+  var filteredItems = useMemo(function () {
+    var _props$editor;
+    if (!((_props$editor = props.editor) !== null && _props$editor !== void 0 && (_props$editor = _props$editor.storage) !== null && _props$editor !== void 0 && (_props$editor = _props$editor.emoji) !== null && _props$editor !== void 0 && _props$editor.emojis)) {
+      return props.items;
+    }
+    var allEmojis = props.editor.storage.emoji.emojis;
+    var currentCategory = EMOJI_CATEGORIES[activeTab];
+
+    // 确定搜索查询：优先使用传入的 query 或内部的 searchQuery，否则使用当前分类的关键词
+    var query = '';
+    if (hasQuery) {
+      // 有搜索查询，使用搜索查询
+      query = effectiveQuery;
+    } else if (currentCategory.keywords.length > 0) {
+      // 没有搜索查询，使用当前分类的关键词
+      query = currentCategory.keywords.join(' ');
+    }
+    if (query) {
+      var normalizedQuery = query.toLowerCase().trim();
+      var keywords = normalizedQuery.split(' ').filter(function (k) {
+        return k.length > 0;
+      });
+
+      // 使用和 emoji.ts 相同的搜索逻辑：优先匹配开头，其次匹配包含
+      return allEmojis.map(function (item) {
+        var _item$shortcodes = item.shortcodes,
+          shortcodes = _item$shortcodes === void 0 ? [] : _item$shortcodes,
+          _item$tags = item.tags,
+          tags = _item$tags === void 0 ? [] : _item$tags;
+        var score = 0;
+
+        // 检查 shortcodes 和 tags
+        var allMatches = [].concat(_toConsumableArray(shortcodes.map(function (s) {
+          return s.toLowerCase();
+        })), _toConsumableArray(tags.map(function (t) {
+          return t.toLowerCase();
+        })));
+
+        // 如果有关键词数组，检查是否匹配任一关键词
+        if (keywords.length > 0) {
+          keywords.forEach(function (keyword) {
+            var exactStart = allMatches.some(function (m) {
+              return m === keyword;
+            });
+            var startsWith = allMatches.some(function (m) {
+              return m.startsWith(keyword);
+            });
+            var includes = allMatches.some(function (m) {
+              return m.includes(keyword);
+            });
+            if (exactStart) score += 3;else if (startsWith) score += 2;else if (includes) score += 1;
+          });
+        } else {
+          // 单个查询的匹配逻辑
+          var exactStart = allMatches.some(function (m) {
+            return m === normalizedQuery;
+          });
+          var startsWith = allMatches.some(function (m) {
+            return m.startsWith(normalizedQuery);
+          });
+          var includes = allMatches.some(function (m) {
+            return m.includes(normalizedQuery);
+          });
+          if (exactStart) score = 3;else if (startsWith) score = 2;else if (includes) score = 1;
+        }
+        return {
+          item: item,
+          score: score
+        };
+      }).filter(function (_ref) {
+        var score = _ref.score;
+        return score > 0;
+      }).sort(function (a, b) {
+        return b.score - a.score;
+      }) // 按分数排序
+      .map(function (_ref2) {
+        var item = _ref2.item;
+        return item;
+      }).slice(0, 160); // 限制结果数量
+    }
+
+    // 没有搜索查询且没有分类关键词时，使用传入的 items
+    return props.items;
+  }, [effectiveQuery, hasQuery, props.items, props.editor, activeTab]);
+
+  // 扁平化所有 emoji 用于索引
+  var flatItems = useMemo(function () {
+    return filteredItems;
+  }, [filteredItems]);
   var selectItem = function selectItem(index) {
-    var item = props.items[index];
+    var item = flatItems[index];
     if (item) {
       props.command({
         name: item.name
@@ -27,17 +170,49 @@ export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
   var upHandler = function upHandler() {
-    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    setSelectedIndex((selectedIndex + flatItems.length - 1) % flatItems.length);
   };
   var downHandler = function downHandler() {
-    setSelectedIndex((selectedIndex + 1) % props.items.length);
+    setSelectedIndex((selectedIndex + 1) % flatItems.length);
+  };
+  var leftHandler = function leftHandler() {
+    var newIndex = Math.max(0, selectedIndex - 1);
+    setSelectedIndex(newIndex);
+  };
+  var rightHandler = function rightHandler() {
+    var newIndex = Math.min(flatItems.length - 1, selectedIndex + 1);
+    setSelectedIndex(newIndex);
   };
   var enterHandler = function enterHandler() {
     selectItem(selectedIndex);
   };
+  var handleTabChange = function handleTabChange(_event, newValue) {
+    setActiveTab(newValue);
+    // 点击分类 tab 时，清空搜索框（分类会通过 activeTab 自动搜索）
+    setSearchQuery('');
+  };
+
+  // 当 query 变化时，同步到内部的 searchQuery（用于搜索框显示）
   useEffect(function () {
-    return setSelectedIndex(0);
-  }, [props.items]);
+    if (props.query !== undefined) {
+      setSearchQuery(props.query);
+    }
+  }, [props.query]);
+  useEffect(function () {
+    setSelectedIndex(0);
+  }, [flatItems.length, searchQuery, activeTab, props.query]);
+
+  // 滚动到选中的 emoji
+  useEffect(function () {
+    if (flatItems.length === 0) return;
+    var selectedElement = document.querySelector("[data-emoji-index=\"".concat(selectedIndex, "\"]"));
+    if (selectedElement) {
+      selectedElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [selectedIndex, flatItems.length]);
   useImperativeHandle(ref, function () {
     return {
       onKeyDown: function onKeyDown(x) {
@@ -49,6 +224,14 @@ export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
           downHandler();
           return true;
         }
+        if (x.event.key === 'ArrowLeft') {
+          leftHandler();
+          return true;
+        }
+        if (x.event.key === 'ArrowRight') {
+          rightHandler();
+          return true;
+        }
         if (x.event.key === 'Enter') {
           enterHandler();
           return true;
@@ -56,49 +239,214 @@ export var EmojiList = /*#__PURE__*/forwardRef(function (props, ref) {
         return false;
       }
     };
-  }, [upHandler, downHandler, enterHandler]);
+  }, [upHandler, downHandler, leftHandler, rightHandler, enterHandler]);
   return /*#__PURE__*/React.createElement(Paper, {
+    elevation: 8,
     sx: {
       position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      borderRadius: 2,
+      width: 280,
+      maxHeight: 320,
+      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
+      overflow: 'hidden'
+    }
+  }, !hasQuery && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      p: 1,
+      borderBottom: '1px solid',
+      borderColor: 'divider'
+    }
+  }, /*#__PURE__*/React.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    placeholder: "\u641C\u7D22 emoji...",
+    value: searchQuery,
+    onChange: function onChange(e) {
+      setSearchQuery(e.target.value);
+    },
+    autoFocus: false,
+    InputProps: {
+      startAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
+        position: "start"
+      }, /*#__PURE__*/React.createElement(Box, {
+        sx: {
+          fontSize: '0.875rem'
+        }
+      }, "\uD83D\uDD0D"))
+    },
+    sx: {
+      '& .MuiOutlinedInput-root': {
+        borderRadius: 1,
+        backgroundColor: 'action.hover',
+        fontSize: '0.875rem',
+        '& fieldset': {
+          borderColor: 'divider'
+        },
+        '&:hover fieldset': {
+          borderColor: 'primary.main'
+        },
+        '&.Mui-focused fieldset': {
+          borderColor: 'primary.main'
+        }
+      }
+    }
+  })), !hasQuery && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      borderBottom: 1,
+      borderColor: 'divider',
+      backgroundColor: 'background.paper',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    value: activeTab,
+    onChange: handleTabChange,
+    variant: "scrollable",
+    scrollButtons: "auto",
+    allowScrollButtonsMobile: true,
+    sx: {
+      minHeight: 32,
+      height: 32,
+      '& .MuiTabs-scrollButtons': {
+        width: 28,
+        '&.Mui-disabled': {
+          opacity: 0.3
+        }
+      },
+      '& .MuiTab-root': {
+        minHeight: 32,
+        height: 32,
+        fontSize: '0.75rem',
+        textTransform: 'none',
+        fontWeight: 500,
+        px: 1,
+        py: 0,
+        minWidth: 'auto',
+        color: 'text.secondary',
+        transition: 'all 0.2s ease-in-out',
+        '&:hover': {
+          color: 'primary.main',
+          backgroundColor: 'action.hover'
+        },
+        '&.Mui-selected': {
+          color: 'primary.main',
+          fontWeight: 600
+        }
+      },
+      '& .MuiTabs-indicator': {
+        height: 2,
+        borderRadius: '2px 2px 0 0',
+        backgroundColor: "".concat(theme.palette.primary.main, " !important")
+      }
+    }
+  }, EMOJI_CATEGORIES.map(function (category) {
+    return /*#__PURE__*/React.createElement(Tab, {
+      key: category.label,
+      label: category.label
+    });
+  }))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: 1,
       overflowY: 'auto',
+      overflowX: 'hidden',
       p: 1,
-      borderRadius: 'var(--mui-shape-borderRadius)',
-      maxWidth: 300,
-      maxHeight: 300
+      '&::-webkit-scrollbar': {
+        width: '4px'
+      },
+      '&::-webkit-scrollbar-track': {
+        background: 'transparent'
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: '2px',
+        '&:hover': {
+          background: 'rgba(0, 0, 0, 0.3)'
+        }
+      }
+    }
+  }, flatItems.length === 0 ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      py: 4,
+      color: 'text.secondary',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '3rem',
+      mb: 1
     }
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, "\uD83D\uDE15"), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      fontSize: '0.875rem'
+    }
+  }, "\u672A\u627E\u5230\u5339\u914D\u7684 emoji")) : /*#__PURE__*/React.createElement(Grid, {
     container: true,
-    spacing: 1
-  }, props.items.map(function (item, index) {
+    spacing: 0.5
+  }, flatItems.map(function (item, index) {
+    var isSelected = index === selectedIndex;
     return /*#__PURE__*/React.createElement(Grid, {
-      size: 1,
-      key: index,
+      size: 12 / EMOJIS_PER_ROW,
+      key: "".concat(item.name, "-").concat(index),
+      "data-emoji-index": index,
       onClick: function onClick() {
         return selectItem(index);
       },
       sx: _objectSpread({
         cursor: 'pointer',
-        lineHeight: 1,
-        fontSize: '1rem',
-        width: '2rem',
-        height: '2rem',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        borderRadius: 'var(--mui-shape-borderRadius)',
-        img: {
-          width: '1.25rem',
-          height: '1.25rem'
-        },
-        transition: 'background-color 0.2s ease-in-out',
+        width: "".concat(100 / EMOJIS_PER_ROW, "%"),
+        aspectRatio: '1',
+        minWidth: 0,
+        borderRadius: 1,
+        transition: 'all 0.15s ease-in-out',
+        position: 'relative',
         '&:hover': {
-          backgroundColor: 'action.hover'
+          backgroundColor: 'action.hover',
+          transform: 'scale(1.1)',
+          zIndex: 1
+        }
+      }, isSelected && {
+        backgroundColor: 'action.selected',
+        transform: 'scale(1.15)',
+        zIndex: 2,
+        boxShadow: '0 2px 6px rgba(0, 0, 0, 0.2)',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          inset: -1,
+          borderRadius: 1,
+          border: '1.5px solid',
+          borderColor: 'primary.main',
+          pointerEvents: 'none'
         }
-      }, index === selectedIndex && {
-        backgroundColor: 'action.selected'
       })
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        fontSize: '1.25rem',
+        lineHeight: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        img: {
+          width: '1.25rem',
+          height: '1.25rem',
+          objectFit: 'contain'
+        }
+      }
     }, item.fallbackImage ? /*#__PURE__*/React.createElement("img", {
-      src: item.fallbackImage
-    }) : item.emoji);
-  })));
+      src: item.fallbackImage,
+      alt: item.name
+    }) : item.emoji));
+  }))));
 });