@ctzhian/tiptap 1.12.20 → 1.12.23

package/dist/extension/suggestion/emoji.js

@@ -1,4 +1,16 @@
-import { updatePosition } from "../../util";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _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 _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 _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; }
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { ReactRenderer } from '@tiptap/react';
 import { EmojiList } from "../component/EmojiList";
 export var emojiSuggestion = {
@@ -6,40 +18,157 @@ export var emojiSuggestion = {
   items: function items(_ref) {
     var editor = _ref.editor,
       query = _ref.query;
-    return editor.storage.emoji.emojis.filter(function (_ref2) {
-      var shortcodes = _ref2.shortcodes,
-        tags = _ref2.tags;
-      return shortcodes.find(function (shortcode) {
-        return shortcode.startsWith(query.toLowerCase());
-      }) || tags.find(function (tag) {
-        return tag.startsWith(query.toLowerCase());
+    var normalizedQuery = query.toLowerCase().trim();
+    if (!normalizedQuery) {
+      // 如果没有查询，返回所有 emoji（限制数量以避免性能问题）
+      return editor.storage.emoji.emojis.slice(0, 200);
+    }
+
+    // 优化搜索：优先匹配开头，其次匹配包含
+    return editor.storage.emoji.emojis.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();
+      })));
+
+      // 计算匹配分数
+      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;else score = 0;
+      return {
+        item: item,
+        score: score
+      };
+    }).filter(function (_ref2) {
+      var score = _ref2.score;
+      return score > 0;
+    }).sort(function (a, b) {
+      return b.score - a.score;
+    }) // 按分数排序
+    .map(function (_ref3) {
+      var item = _ref3.item;
+      return item;
+    }).slice(0, 100); // 限制结果数量
   },
   render: function render() {
     var component = null;
+    var cleanupAutoUpdate = null;
+    var isMouseOver = false;
+    var shouldClose = false;
+    var currentProps = null;
+    var updatePosition = function updatePosition(editor, element, clientRect) {
+      if (!clientRect) return;
+      var virtualElement = {
+        getBoundingClientRect: function getBoundingClientRect() {
+          return clientRect;
+        }
+      };
+      computePosition(virtualElement, element, {
+        placement: 'bottom-start',
+        strategy: 'absolute',
+        middleware: [offset(4), flip(), shift({
+          padding: 8
+        })]
+      }).then(function (_ref4) {
+        var x = _ref4.x,
+          y = _ref4.y;
+        element.style.position = 'absolute';
+        element.style.left = "".concat(x, "px");
+        element.style.top = "".concat(y, "px");
+      });
+    };
     return {
       onStart: function onStart(props) {
+        var _props$clientRect;
+        currentProps = props;
+        shouldClose = false;
         component = new ReactRenderer(EmojiList, {
-          props: props,
+          props: _objectSpread(_objectSpread({}, props), {}, {
+            query: props.query || '',
+            editor: props.editor,
+            command: function command(commandProps) {
+              // 标记应该关闭，然后调用原始 command
+              shouldClose = true;
+              props.command(commandProps);
+            }
+          }),
           editor: props.editor
         });
-        if (!props.clientRect) return;
+        var clientRect = (_props$clientRect = props.clientRect) === null || _props$clientRect === void 0 ? void 0 : _props$clientRect.call(props);
+        if (!clientRect) return;
         var element = component.element;
-        element.style.position = 'absolute';
         document.body.appendChild(element);
-        updatePosition(props.editor, element);
+
+        // 添加鼠标事件监听
+        var handleMouseEnter = function handleMouseEnter() {
+          isMouseOver = true;
+        };
+        var handleMouseLeave = function handleMouseLeave() {
+          isMouseOver = false;
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+
+        // 初始定位
+        updatePosition(props.editor, element, clientRect);
+
+        // 设置自动更新位置
+        var virtualElement = {
+          getBoundingClientRect: function getBoundingClientRect() {
+            var _currentProps, _currentProps$clientR;
+            var rect = (_currentProps = currentProps) === null || _currentProps === void 0 || (_currentProps$clientR = _currentProps.clientRect) === null || _currentProps$clientR === void 0 ? void 0 : _currentProps$clientR.call(_currentProps);
+            return rect || new DOMRect();
+          }
+        };
+        cleanupAutoUpdate = autoUpdate(virtualElement, element, function () {
+          var _currentProps2, _currentProps2$client;
+          var rect = (_currentProps2 = currentProps) === null || _currentProps2 === void 0 || (_currentProps2$client = _currentProps2.clientRect) === null || _currentProps2$client === void 0 ? void 0 : _currentProps2$client.call(_currentProps2);
+          if (rect) {
+            updatePosition(props.editor, element, rect);
+          }
+        });
       },
       onUpdate: function onUpdate(props) {
+        var _props$clientRect2;
+        currentProps = props;
         if (!component) return;
-        component.updateProps(props);
-        if (!props.clientRect) return;
-        updatePosition(props.editor, component.element);
+        shouldClose = false;
+        component.updateProps(_objectSpread(_objectSpread({}, props), {}, {
+          query: props.query || '',
+          editor: props.editor,
+          command: function command(commandProps) {
+            // 标记应该关闭，然后调用原始 command
+            shouldClose = true;
+            props.command(commandProps);
+          }
+        }));
+        var clientRect = (_props$clientRect2 = props.clientRect) === null || _props$clientRect2 === void 0 ? void 0 : _props$clientRect2.call(props);
+        if (!clientRect) return;
+        updatePosition(props.editor, component.element, clientRect);
       },
       onKeyDown: function onKeyDown(props) {
         var _component$ref;
         if (!component) return false;
         if (props.event.key === 'Escape') {
+          if (cleanupAutoUpdate) {
+            cleanupAutoUpdate();
+            cleanupAutoUpdate = null;
+          }
           component.element.remove();
           component.destroy();
           return true;
@@ -48,6 +177,26 @@ export var emojiSuggestion = {
       },
       onExit: function onExit() {
         if (!component) return;
+
+        // 如果用户已经选择了 emoji，应该关闭
+        if (shouldClose) {
+          if (cleanupAutoUpdate) {
+            cleanupAutoUpdate();
+            cleanupAutoUpdate = null;
+          }
+          component.destroy();
+          component.element.remove();
+          return;
+        }
+
+        // 如果鼠标在弹框内，不关闭
+        if (isMouseOver) {
+          return;
+        }
+        if (cleanupAutoUpdate) {
+          cleanupAutoUpdate();
+          cleanupAutoUpdate = null;
+        }
         component.destroy();
         component.element.remove();
       }

package/dist/index.css

@@ -99,6 +99,7 @@
   margin: 8px 0;
   flex-direction: column;
   position: relative;
+  min-height: var(--common-row-line-height);
 }
 
 .tiptap.ProseMirror ol li {

package/dist/type/index.d.ts

@@ -21,7 +21,8 @@ export interface MenuItem {
 }
 export interface MenuProps {
     id?: string;
-    width?: number;
+    width?: React.CSSProperties['width'];
+    maxHeight?: React.CSSProperties['maxHeight'];
     arrowIcon?: React.ReactNode;
     list: MenuItem[];
     header?: React.ReactNode;

package/dist/util/index.d.ts

@@ -5,10 +5,12 @@ export * from './linewiseConvert';
 export * from './migrateMathStrings';
 export * from './resourceExtractor';
 export * from './shortcutKey';
+import { Node } from '@tiptap/pm/model';
 import { EditorState } from '@tiptap/pm/state';
 import { Editor } from '@tiptap/react';
 export declare const formatFileSize: (bytes: number) => string;
 export declare const insertNodeAfterPosition: (editor: Editor, pos: number, nodeContent: any) => void;
+export declare const hasMarksInBlock: (node: Node | null | undefined) => boolean;
 export declare const hasMarksInSelection: (state: EditorState) => boolean;
 export declare function addOpacityToColor(color: string, opacity: number): string;
 export declare const getLinkTitle: (href: string) => string;

package/dist/util/index.js

@@ -15,6 +15,16 @@ export var formatFileSize = function formatFileSize(bytes) {
 export var insertNodeAfterPosition = function insertNodeAfterPosition(editor, pos, nodeContent) {
   editor.chain().focus().insertContentAt(pos, nodeContent).run();
 };
+export var hasMarksInBlock = function hasMarksInBlock(node) {
+  var _content;
+  if (!node) return false;
+  if (node.marks && node.marks.length > 0) return true;
+  var children = (_content = node.content) === null || _content === void 0 ? void 0 : _content.content;
+  if (!children || children.length === 0) return false;
+  return children.some(function (child) {
+    return hasMarksInBlock(child);
+  });
+};
 export var hasMarksInSelection = function hasMarksInSelection(state) {
   if (state.selection.empty) {
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctzhian/tiptap",
-  "version": "1.12.20",
+  "version": "1.12.23",
   "description": "基于 Tiptap 二次开发的编辑器组件",
   "main": "dist/index.js",
   "module": "dist/index.js",