@teamias/rex-design 0.0.8 → 0.0.10

package/dist/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './base-table';
 export * from './data-cell';
 export * from './icons';
 export * from './media-viewer';
+export * from './tiptap-editor';

package/dist/components/index.js

@@ -4,4 +4,5 @@ export * from "./base-list-table";
 export * from "./base-table";
 export * from "./data-cell";
 export * from "./icons";
-export * from "./media-viewer";
+export * from "./media-viewer";
+export * from "./tiptap-editor";

package/dist/components/tiptap-editor/demo/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/tiptap-editor/demo/index.js

@@ -0,0 +1,22 @@
+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); }
+import enUS from "../../../locales/en-US.json";
+import { RexProConfigProvider, TiptapEditor } from "../../..";
+import { crush } from 'radash';
+import { createIntl } from 'react-intl';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(RexProConfigProvider, {
+    value: {
+      intl: createIntl({
+        locale: 'en-us',
+        messages: _objectSpread({}, crush(enUS))
+      })
+    },
+    children: /*#__PURE__*/_jsx(TiptapEditor, {})
+  });
+});

package/dist/components/tiptap-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { matchTiptapVariables } from './modules/plugin-variable-node';
+export * from './tiptap-editor';

package/dist/components/tiptap-editor/index.js

@@ -0,0 +1,2 @@
+export { matchTiptapVariables } from "./modules/plugin-variable-node";
+export * from "./tiptap-editor";

package/dist/components/tiptap-editor/modules/plugin-image-node/index.d.ts

@@ -0,0 +1 @@
+export declare const Image: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/tiptap-editor/modules/plugin-image-node/index.js

@@ -0,0 +1,25 @@
+import { Image as RawImage } from '@tiptap/extension-image';
+
+// 自定义图片扩展，确保图片渲染为可调整大小的 DOM 结构
+export var Image = RawImage.extend({
+  addNodeView: function addNodeView() {
+    return function (_ref) {
+      var node = _ref.node,
+        editor = _ref.editor,
+        getPos = _ref.getPos;
+      var img = document.createElement('img');
+      img.src = node.attrs.src;
+
+      // 用 div 包裹 img，以便添加 resize 句柄
+      var wrapper = document.createElement('div');
+      wrapper.className = 'resizable-image-wrapper';
+      wrapper.appendChild(img);
+
+      // 返回 NodeView 对象，包含 dom 属性
+      return {
+        dom: wrapper,
+        contentDOM: null
+      };
+    };
+  }
+});

package/dist/components/tiptap-editor/modules/plugin-link-node/index.d.ts

@@ -0,0 +1 @@
+export declare const Link: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;

package/dist/components/tiptap-editor/modules/plugin-link-node/index.js

@@ -0,0 +1,85 @@
+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 _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; }
+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); }
+import { default as RawLink } from '@tiptap/extension-link';
+import { Plugin } from 'prosemirror-state';
+
+// 自定义链接扩展
+export var Link = RawLink.extend({
+  // 添加自定义属性
+  addAttributes: function addAttributes() {
+    var _this$parent;
+    return _objectSpread(_objectSpread({}, (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.call(this)), {}, {
+      // 添加自定义属性，比如打开方式
+      target: {
+        default: null,
+        parseHTML: function parseHTML(element) {
+          return element.getAttribute('target');
+        },
+        renderHTML: function renderHTML(attributes) {
+          return attributes.target ? {
+            target: attributes.target
+          } : {};
+        }
+      }
+    });
+  },
+  // 添加自定义事件处理
+  addProseMirrorPlugins: function addProseMirrorPlugins() {
+    var _this$parent2;
+    var plugins = ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.call(this)) || [];
+    return [].concat(_toConsumableArray(plugins), [
+    // 添加自定义点击处理插件
+    new Plugin({
+      // spec: '',
+      // getState: () => {},
+      props: {
+        handleClick: function handleClick(view, pos, event) {
+          var _event$target;
+          // console.log(view, pos, event);
+
+          // 获取当前选区
+          var state = view.state;
+          var _state$selection = state.selection,
+            from = _state$selection.from,
+            to = _state$selection.to;
+
+          // 检查点击位置是否在链接节点内
+          var linkNode = ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.nodeName) === 'A' && event.target.classList.contains('tiptap-link') ? event.target : null;
+
+          // console.log(event, state.doc.nodeAt(pos));
+          if (linkNode) {
+            if (event.ctrlKey || event.metaKey) {
+              var href = linkNode.href;
+              window.open(href, '_blank');
+              return true;
+            } else {
+              event.preventDefault();
+              return false;
+            }
+          }
+          return false;
+        }
+      }
+    })]);
+  },
+  // 添加自定义样式类
+  addOptions: function addOptions() {
+    var _this$parent3;
+    return _objectSpread(_objectSpread({}, (_this$parent3 = this.parent) === null || _this$parent3 === void 0 ? void 0 : _this$parent3.call(this)), {}, {
+      HTMLAttributes: {
+        class: 'tiptap-link',
+        style: 'cursor: pointer;'
+      }
+    });
+  }
+});

package/dist/components/tiptap-editor/modules/plugin-variable-node/component.d.ts

@@ -0,0 +1,3 @@
+import { NodeViewProps } from '@tiptap/react';
+import { FC } from 'react';
+export declare const Component: FC<NodeViewProps>;

package/dist/components/tiptap-editor/modules/plugin-variable-node/component.js

@@ -0,0 +1,133 @@
+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 { VerticalAlignTopOutlined } from '@ant-design/icons';
+import { useStateData } from "../../../..";
+import { NodeViewWrapper } from '@tiptap/react';
+import { Dropdown, Input } from 'antd';
+import { useRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Component = function Component(props) {
+  var opts = props.extension.options;
+  var nodeViewWrapperRef = useRef(null);
+  var ref = useRef(null);
+  var _useStateData = useStateData(function () {
+      return {
+        open: true,
+        inputFocus: false
+        // inlineOptions: [],
+      };
+    }),
+    state = _useStateData.state,
+    update = _useStateData.update;
+  var updateSelected = function updateSelected(val) {
+    props.updateAttributes({
+      selected: val
+    });
+  };
+
+  // const getFocus = () => {
+  //   if (state.open) {
+  //     setTimeout(() => {
+  //       ref.current?.focus();
+  //     }, 0);
+  //   }
+  // };
+
+  // console.log(props);
+  // useEffect(() => {
+  //   getFocus();
+  // }, [state.open,]);
+
+  return /*#__PURE__*/_jsx(NodeViewWrapper, {
+    style: {
+      display: 'inline-block'
+    },
+    ref: nodeViewWrapperRef,
+    onClick: function onClick(e) {
+      if (state.inputFocus) {
+        e.stopPropagation();
+      }
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        open: state.open
+        // getPopupContainer={triggerNode => {
+        //   // triggerNode.parentNode as HTMLElement
+        //   console.log(triggerNode);
+        // }}
+        ,
+        trigger: ['click'],
+        menu: {
+          items: [{
+            label: /*#__PURE__*/_jsx("span", {
+              style: {
+                fontSize: 12
+              },
+              children: "\u6CE8\u5165\u53C2\u6570\u9009\u62E9"
+            }),
+            key: '__key-1',
+            disabled: true
+          }, {
+            type: 'divider'
+          }, {
+            label: /*#__PURE__*/_jsx("div", {
+              contentEditable: false,
+              children: /*#__PURE__*/_jsx(Input.Search, {
+                size: "small",
+                placeholder: "\u81EA\u5B9A\u4E49\u53D8\u91CF\u540D",
+                enterButton: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {}),
+                ref: ref,
+                onFocusCapture: function onFocusCapture() {
+                  // 在获取焦点瞬间,阻止 NodeViewWrapper 的默认事件
+                  // 100ms 后解开限制
+                  // 这里来解决焦点不对问题
+                  state.inputFocus = true;
+                  setTimeout(function () {
+                    state.inputFocus = false;
+                  }, 200);
+                },
+                onSearch: function onSearch(e) {
+                  if (e) {
+                    var _nodeViewWrapperRef$c;
+                    // console.log(nodeViewWrapperRef);
+                    (_nodeViewWrapperRef$c = nodeViewWrapperRef.current) === null || _nodeViewWrapperRef$c === void 0 || _nodeViewWrapperRef$c.click();
+                    state.open = false;
+                    updateSelected(e);
+                    update();
+                  }
+                }
+              })
+            }),
+            key: '__key-2',
+            disabled: true
+          }, {
+            type: 'divider'
+          }].concat(_toConsumableArray(opts.options)),
+          onClick: function onClick(e) {
+            if (!e.key.startsWith('__key-')) {
+              updateSelected(e.key);
+            }
+          }
+        },
+        onOpenChange: function onOpenChange(val) {
+          state.open = val;
+          update();
+        },
+        children: props.node.attrs.selected && /*#__PURE__*/_jsx(SpanBox, {
+          className: props.selected ? 'selected' : '',
+          children: props.node.attrs.selected
+        })
+      })
+    })
+  });
+};
+var SpanBox = styled.span.withConfig({
+  displayName: "SpanBox",
+  componentId: "rex-design-aaf4__sc-1qkqodh-0"
+})(["border:1px solid #ccc;font-size:12px;vertical-align:middle;padding:0 3px;border-radius:4px;cursor:pointer;color:#296dff;background:#fff;margin:0 4px;&.selected{border-color:#296dff;background:#eff4ff;}"]);

package/dist/components/tiptap-editor/modules/plugin-variable-node/index.d.ts

@@ -0,0 +1,14 @@
+import { Node } from '@tiptap/core';
+export declare const PluginVariableBNode: Node<PluginVariableBNodeOptions, any>;
+/**
+ * 提取 tiptap 编辑器内容中的所有 <react-variable-node selected="label"></react-variable-node> 占位符
+ * @param text 编辑器内容字符串
+ * @param source 匹配对象
+ */
+export declare const matchTiptapVariables: (text: string, source?: Record<string, unknown>) => string;
+export interface PluginVariableBNodeOptions {
+    options?: Array<{
+        label: string;
+        key: string;
+    }>;
+}

package/dist/components/tiptap-editor/modules/plugin-variable-node/index.js

@@ -0,0 +1,84 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { get } from 'radash';
+import { Component } from "./component";
+
+/** 标签名称 */
+var tagName = 'react-variable-node';
+export var PluginVariableBNode = Node.create({
+  name: 'variable',
+  // 唯一名称
+  inline: true,
+  // 行内节点（非块级）
+  group: 'inline',
+  // 分组为行内
+  atom: true,
+  // 原子节点（不可分割）
+  // parseDOM: [{ tag: 'span.variable', },], // 解析 DOM 规则
+  addAttributes: function addAttributes() {
+    return {
+      // count: {
+      //   default: 0,
+      // },
+      // options: {
+      //   default: this.options.options,
+      // },
+      selected: {
+        default: ''
+      }
+    };
+  },
+  parseHTML: function parseHTML() {
+    return [{
+      tag: tagName
+    }];
+  },
+  renderHTML: function renderHTML(_ref) {
+    var HTMLAttributes = _ref.HTMLAttributes;
+    return [tagName, mergeAttributes(HTMLAttributes)];
+  },
+  addNodeView: function addNodeView() {
+    return ReactNodeViewRenderer(Component);
+  },
+  addInputRules: function addInputRules() {
+    var _this = this;
+    return [{
+      find: /\{/,
+      handler: function handler(_ref2) {
+        var state = _ref2.state,
+          range = _ref2.range,
+          match = _ref2.match;
+        state.tr.replaceRangeWith(range.from, range.to, _this.type.create({
+          name: match[1]
+        }));
+      }
+    }];
+  }
+});
+
+/**
+ * 提取 tiptap 编辑器内容中的所有 <react-variable-node selected="label"></react-variable-node> 占位符
+ * @param text 编辑器内容字符串
+ * @param source 匹配对象
+ */
+export var matchTiptapVariables = function matchTiptapVariables(text) {
+  var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var reg = new RegExp("<".concat(tagName, " selected=\"(.*?)\"></").concat(tagName, ">"), 'g');
+  return text.replace(reg, function (content, match1) {
+    // console.log(arg);
+    return "".concat(get(source, match1) || '');
+  });
+};
+
+// const parseValue = (pathKey: string, source: Record<string, unknown>) => {
+//   // 'ssss[0].ewe.we.qqw'
+//   const paths = pathKey.replace(/\[|\]/g, '.').replace(/\.\./g, '.').split('.');
+//   const val = paths.slice(1).reduce((mainVal, key) => {
+//     if (typeof mainVal === 'undefined') return mainVal;
+//     if (mainVal === null) return null;
+
+//     return (mainVal as Record<string, unknown>)[key];
+//   }, source[paths[0]]);
+
+//   return val;
+// };

package/dist/components/tiptap-editor/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    "data-max-height"?: string | number | undefined;
+}>> & string;

package/dist/components/tiptap-editor/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+export var Box = styled.div.withConfig({
+  displayName: "Box",
+  componentId: "rex-design-aaf4__sc-szanbo-0"
+})(["margin:0;overflow:hidden;color:rgba(0,0,0,0.88);font-size:14px;list-style:none;position:relative;display:inline-block;width:100%;min-width:0;border-radius:6px;transition:all 0.2s;max-width:100%;height:auto;min-height:32px;line-height:1.5714285714285714;vertical-align:bottom;transition:all 0.3s;box-sizing:border-box;background:#ffffff;border-width:1px;border-style:solid;border-color:#d9d9d9;div.tiptap[contenteditable]{margin:0;outline:none;overflow:auto;padding:4px 11px;min-height:", ";", " .resizable-image-wrapper{display:inline-block;overflow:auto;resize:auto;min-width:10px;min-height:10px;img{width:100%;height:100%;}}.resizable-image-wrapper.ProseMirror-selectednode{outline:3px solid #1677ff;}}&:hover{border-color:#4096ff;background-color:#ffffff;}&:focus,&:focus-within{border-color:#1677ff;box-shadow:0 0 0 2px rgba(5,145,255,0.1);outline:0;background-color:#ffffff;}"], function (p) {
+  return parseFloat((p['data-max-height'] || 100) + '') <= 100 ? typeof p['data-max-height'] === 'number' ? "".concat(p['data-max-height'], "px") : p['data-max-height'] : '100px';
+}, function (props) {
+  return {
+    maxHeight: typeof props['data-max-height'] === 'number' ? "".concat(props['data-max-height'], "px") : props['data-max-height']
+  };
+});

package/dist/components/tiptap-editor/tiptap-editor.d.ts

@@ -0,0 +1,40 @@
+import { Extensions, useEditor } from '@tiptap/react';
+import { FC, ReactNode } from 'react';
+/**
+ * https://v2.tiptap.dev/docs/editor/extensions/nodes/task-item
+ */
+export declare const TiptapEditor: FC<TiptapEditorProps>;
+export interface TiptapEditorProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    maxHeight?: number | string;
+    /** 变量 */
+    variableObject?: Record<string, unknown>;
+    /**
+     * @desc 类型
+     * - html html文本
+     * - text 存文本
+     */
+    type?: 'html' | 'text';
+    /** 隐藏工具栏 */
+    hiddenToolBar?: boolean;
+    /** 阻止换行 */
+    preventLineBreaks?: boolean;
+    /**
+     * @desc 自定义渲染工具栏
+     * - oldNode 默认的渲染模块
+     * - editor useEditor 的操作对象
+     * - config 默认的工具列表
+     */
+    renderToolBar?: (oldNode: JSX.Element, editor: ReturnType<typeof useEditor>, config: IConfigItem[]) => ReactNode;
+    /** 插件注入 */
+    extensions?: Extensions;
+}
+interface IConfigItem {
+    title: string;
+    key: string;
+    icon?: JSX.Element;
+    onClick?: () => void;
+}
+export {};

package/dist/components/tiptap-editor/tiptap-editor.js

@@ -0,0 +1,529 @@
+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; }
+// src/Tiptap.tsx
+import { Icons } from "../..";
+import BulletList from '@tiptap/extension-bullet-list';
+import { Color } from '@tiptap/extension-color';
+import FileHandler from '@tiptap/extension-file-handler';
+import Highlight from '@tiptap/extension-highlight';
+import OrderedList from '@tiptap/extension-ordered-list';
+import SubSub from '@tiptap/extension-subscript';
+import SubSup from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import TextStyleKit from '@tiptap/extension-text-style';
+import { EditorContent, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { ColorPicker, Divider, Flex, Tooltip } from 'antd';
+import { keys } from 'radash';
+import { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Image } from "./modules/plugin-image-node";
+import { Link } from "./modules/plugin-link-node";
+import { PluginVariableBNode } from "./modules/plugin-variable-node";
+import { Box } from "./styles";
+
+/**
+ * https://v2.tiptap.dev/docs/editor/extensions/nodes/task-item
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var TiptapEditor = function TiptapEditor(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'html' : _ref$type,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 100 : _ref$maxHeight,
+    _ref$variableObject = _ref.variableObject,
+    variableObject = _ref$variableObject === void 0 ? {} : _ref$variableObject,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    hiddenToolBar = _ref.hiddenToolBar,
+    preventLineBreaks = _ref.preventLineBreaks,
+    renderToolBar = _ref.renderToolBar,
+    extensions = _ref.extensions;
+  var intl = useIntl();
+  var editor = useEditor({
+    extensions: [].concat(_toConsumableArray(extensions || []), [BulletList, OrderedList, StarterKit.configure({
+      paragraph: {
+        HTMLAttributes: {
+          style: 'margin: 0'
+        }
+      }
+    }), TextStyleKit, Color, TextAlign.configure({
+      types: ['heading', 'paragraph']
+    }), SubSup, SubSub, Highlight.configure({
+      multicolor: true
+    }),
+    // Variable,
+    PluginVariableBNode.configure({
+      options: keys(variableObject).map(function (ii) {
+        return {
+          label: ii,
+          key: ii
+        };
+      })
+    }), Image.configure({
+      allowBase64: true,
+      inline: true
+    }), FileHandler.configure({
+      allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+      onDrop: function onDrop(currentEditor, files, pos) {
+        files.forEach(function (file) {
+          var fileReader = new FileReader();
+          fileReader.readAsDataURL(file);
+          fileReader.onload = function () {
+            currentEditor.chain().insertContentAt(pos, {
+              type: 'image',
+              attrs: {
+                src: fileReader.result
+              }
+            }).focus().run();
+          };
+        });
+      },
+      onPaste: function onPaste(currentEditor, files, htmlContent) {
+        files.forEach(function (file) {
+          if (htmlContent) {
+            // if there is htmlContent, stop manual insertion & let other extensions handle insertion via inputRule
+            // you could extract the pasted file from this url string and upload it to a server for example
+            console.log(htmlContent);
+            return false;
+          }
+          var fileReader = new FileReader();
+          fileReader.readAsDataURL(file);
+          fileReader.onload = function () {
+            currentEditor.chain().insertContentAt(currentEditor.state.selection.anchor, {
+              type: 'image',
+              attrs: {
+                src: fileReader.result
+              }
+            }).focus().run();
+          };
+        });
+      }
+    }), Link.configure({
+      defaultProtocol: 'https',
+      openOnClick: false,
+      protocols: ['http', 'https']
+    })
+    // ImageUploadNode.configure({
+    //   accept: 'image/*',
+    //   maxSize: MAX_FILE_SIZE,
+    //   limit: 3,
+    //   upload: handleImageUpload,
+    //   onError: (error) => console.error('Upload failed:', error),
+    // }),
+    ]),
+    content: defaultValue || '',
+    onUpdate: function onUpdate(_ref2) {
+      var editor = _ref2.editor;
+      if (type === 'text') {
+        // `<p style="margin: 0">/qwe/<react-variable-node selected="qwe"></react-variable-node></p>`.replace(/<p.*?>(.*?)<\/p>/, '$1');
+        var text = editor.getHTML();
+        onChange === null || onChange === void 0 || onChange(text.replace(/<p.*?>(.*?)<\/p>/, '$1'));
+      } else {
+        var html = editor.getHTML();
+        onChange === null || onChange === void 0 || onChange(html);
+      }
+    },
+    editorProps: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        if (preventLineBreaks && event.key === 'Enter') {
+          event.preventDefault();
+          return true; // 阻止换行
+        }
+        return false;
+      }
+    }
+  });
+  var config = [{
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.undo',
+      defaultMessage: '撤回'
+    }),
+    key: 'undo',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.undo();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-undo",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.redo',
+      defaultMessage: '恢复'
+    }),
+    key: 'redo',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.redo();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-redo",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.font-color',
+      defaultMessage: '字体颜色'
+    }),
+    key: 'color',
+    icon: /*#__PURE__*/_jsx(ColorPicker, {
+      defaultValue: "#333",
+      format: "hex",
+      allowClear: true,
+      onChangeComplete: function onChangeComplete(color) {
+        editor === null || editor === void 0 || editor.commands.setColor(color.toHexString());
+      },
+      children: /*#__PURE__*/_jsx(Icons, {
+        type: "iconify",
+        name: "ic:round-color-lens",
+        color: "#666"
+      })
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.background-color',
+      defaultMessage: '背景颜色'
+    }),
+    key: 'backgroundColor',
+    icon: /*#__PURE__*/_jsx(ColorPicker, {
+      defaultValue: "#333",
+      format: "hex",
+      allowClear: true,
+      onChangeComplete: function onChangeComplete(color) {
+        editor === null || editor === void 0 || editor.commands.setHighlight({
+          color: color.toHexString()
+        });
+      },
+      children: /*#__PURE__*/_jsx(Icons, {
+        type: "iconify",
+        name: "ic:twotone-color-lens",
+        color: "#666"
+      })
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.bullet-list',
+      defaultMessage: '有序列表'
+    }),
+    key: 'bulletList',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleOrderedList();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-format-list-numbered",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.ordered-list',
+      defaultMessage: '无序列表'
+    }),
+    key: 'orderedList',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleBulletList();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-reorder",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.bold',
+      defaultMessage: '加粗'
+    }),
+    key: 'toggleBold',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleBold();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-format-bold",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.italic',
+      defaultMessage: '斜体'
+    }),
+    key: 'toggleItalic',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleItalic();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-format-italic",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.strike',
+      defaultMessage: '划线'
+    }),
+    key: 'toggleStrike',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleStrike();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-strikethrough-s",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.superscript',
+      defaultMessage: '上标'
+    }),
+    key: 'toggleSuperscript',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleSuperscript();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-superscript",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.subscript',
+      defaultMessage: '下标'
+    }),
+    key: 'toggleSubscript',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.toggleSubscript();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-subscript",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.align-left',
+      defaultMessage: '左对齐'
+    }),
+    key: 'left',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.setTextAlign('left');
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-align-horizontal-left",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.align-center',
+      defaultMessage: '居中'
+    }),
+    key: 'center',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.setTextAlign('center');
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-align-horizontal-center",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.align-right',
+      defaultMessage: '右对齐'
+    }),
+    key: 'right',
+    onClick: function onClick() {
+      return editor === null || editor === void 0 ? void 0 : editor.commands.setTextAlign('right');
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:round-align-horizontal-right",
+      color: "#666"
+    })
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.set-link',
+      defaultMessage: '设置链接'
+    }),
+    key: 'link',
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:baseline-link",
+      color: editor !== null && editor !== void 0 && editor.isActive('link') ? '#006cff' : '#666'
+    }),
+    onClick: function onClick() {
+      var previousUrl = editor === null || editor === void 0 ? void 0 : editor.getAttributes('link').href;
+      var url = prompt(intl.formatMessage({
+        id: 'rex.components.tiptap-editor.enter-link-url',
+        defaultMessage: '请输入链接地址:'
+      }), previousUrl);
+      if (url) {
+        editor === null || editor === void 0 || editor.chain().focus().setLink({
+          href: url
+        }).run();
+      }
+    }
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.unset-link',
+      defaultMessage: '取消链接'
+    }),
+    key: 'unsetLink',
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:baseline-link-off",
+      color: editor !== null && editor !== void 0 && editor.isActive('link') ? '#006cff' : '#666'
+    }),
+    onClick: function onClick() {
+      return editor !== null && editor !== void 0 && editor.isActive('link') ? editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetLink().run() : '';
+    }
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.divider',
+      defaultMessage: '分割'
+    }),
+    key: 'divider'
+  }, {
+    title: intl.formatMessage({
+      id: 'rex.components.tiptap-editor.upload-image',
+      defaultMessage: '上传图片'
+    }),
+    key: 'image',
+    onClick: function onClick() {
+      // 创建隐藏的文件输入框
+      var input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.onchange = function (event) {
+        var _files;
+        var file = (_files = event.target.files) === null || _files === void 0 ? void 0 : _files[0];
+        if (!file) return;
+        var fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.onload = function () {
+          editor === null || editor === void 0 || editor.chain().insertContentAt(editor.state.selection.anchor, {
+            type: 'image',
+            attrs: {
+              src: fileReader.result
+            }
+          }).focus().run();
+        };
+      };
+
+      // 触发文件选择
+      input.click();
+    },
+    icon: /*#__PURE__*/_jsx(Icons, {
+      type: "iconify",
+      name: "ic:outline-broken-image",
+      color: "#666"
+    })
+  }];
+  useEffect(function () {
+    return function () {
+      editor === null || editor === void 0 || editor.destroy();
+    };
+  }, []);
+  useEffect(function () {
+    if (type === 'text') {
+      if (value && value === (editor === null || editor === void 0 ? void 0 : editor.getText())) return;
+      editor === null || editor === void 0 || editor.commands.setContent(value || '');
+    } else {
+      if (value && value === (editor === null || editor === void 0 ? void 0 : editor.getHTML())) return;
+      editor === null || editor === void 0 || editor.commands.setContent(value || '');
+    }
+  }, [value]);
+  return /*#__PURE__*/_jsxs(Box, {
+    "data-max-height": maxHeight,
+    onClick: function onClick() {
+      setTimeout(function () {
+        editor === null || editor === void 0 || editor.chain().focus();
+      }, 0);
+    },
+    children: [function () {
+      if (hiddenToolBar) return /*#__PURE__*/_jsx(_Fragment, {});
+      var oldNode = /*#__PURE__*/_jsx(Flex, {
+        wrap: true,
+        gap: "small",
+        align: "center",
+        style: {
+          padding: '4px 10px',
+          borderBottom: '1px solid #ddd',
+          background: '#f8f8f8'
+        },
+        children: config.map(function (item, index) {
+          if (item.key === 'divider') {
+            return /*#__PURE__*/_jsx(Divider, {
+              type: "vertical"
+            }, "".concat(item.key, "-").concat(index));
+          }
+          return /*#__PURE__*/_jsx(Tooltip, {
+            title: item.title,
+            arrow: false,
+            children: /*#__PURE__*/_jsx("div", {
+              onClick: function onClick() {
+                var _item$onClick;
+                return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
+              },
+              style: {
+                cursor: 'pointer'
+              },
+              children: item.icon
+            })
+          }, "".concat(item.key, "-").concat(index));
+        })
+      });
+      if (renderToolBar) {
+        return renderToolBar(oldNode, editor, config);
+      }
+      return oldNode;
+    }(), /*#__PURE__*/_jsx(EditorContent, {
+      editor: editor
+    })]
+  });
+};

package/dist/index.d.ts

@@ -5,6 +5,27 @@ export declare const designLocales: {
     zhCN: {
         rex: {
             components: {
+                "tiptap-editor": {
+                    undo: string;
+                    redo: string;
+                    divider: string;
+                    "font-color": string;
+                    "background-color": string;
+                    bold: string;
+                    italic: string;
+                    strike: string;
+                    superscript: string;
+                    subscript: string;
+                    "align-left": string;
+                    "align-center": string;
+                    "align-right": string;
+                    "set-link": string;
+                    "unset-link": string;
+                    "upload-image": string;
+                    "enter-link-url": string;
+                    "bullet-list": string;
+                    "ordered-list": string;
+                };
                 "base-list-table": {
                     "expand-more-data-hide": string;
                     "expand-more-data": string;
@@ -44,6 +65,27 @@ export declare const designLocales: {
     enUS: {
         rex: {
             components: {
+                "tiptap-editor": {
+                    undo: string;
+                    redo: string;
+                    divider: string;
+                    "font-color": string;
+                    "background-color": string;
+                    bold: string;
+                    italic: string;
+                    strike: string;
+                    superscript: string;
+                    subscript: string;
+                    "align-left": string;
+                    "align-center": string;
+                    "align-right": string;
+                    "set-link": string;
+                    "unset-link": string;
+                    "upload-image": string;
+                    "enter-link-url": string;
+                    "bullet-list": string;
+                    "ordered-list": string;
+                };
                 "base-list-table": {
                     "expand-more-data": string;
                     "expand-more-data-hide": string;

package/dist/locales/en-US.json

@@ -1,6 +1,27 @@
 {
   "rex": {
     "components": {
+      "tiptap-editor": {
+        "undo": "Undo",
+        "redo": "Redo",
+        "divider": "Divider",
+        "font-color": "Font Color",
+        "background-color": "Background Color",
+        "bold": "Bold",
+        "italic": "Italic",
+        "strike": "Strike",
+        "superscript": "Superscript",
+        "subscript": "Subscript",
+        "align-left": "Align Left",
+        "align-center": "Align Center",
+        "align-right": "Align Right",
+        "set-link": "Set Link",
+        "unset-link": "Unset Link",
+        "upload-image": "Upload Image",
+        "enter-link-url": "Please enter link URL:",
+        "bullet-list": "Ordered list",
+        "ordered-list": "Unordered list"
+      },
       "base-list-table": {
         "expand-more-data": "There are still {count} pieces of data not displayed",
         "expand-more-data-hide": "Close"

package/dist/locales/zh-CN.json

@@ -1,6 +1,27 @@
 {
   "rex": {
     "components": {
+      "tiptap-editor": {
+        "undo": "撤回",
+        "redo": "恢复",
+        "divider": "分割",
+        "font-color": "字体颜色",
+        "background-color": "背景颜色",
+        "bold": "加粗",
+        "italic": "斜体",
+        "strike": "划线",
+        "superscript": "上标",
+        "subscript": "下标",
+        "align-left": "左对齐",
+        "align-center": "居中",
+        "align-right": "右对齐",
+        "set-link": "设置链接",
+        "unset-link": "取消链接",
+        "upload-image": "上传图片",
+        "enter-link-url": "请输入链接地址:",
+        "bullet-list": "有序列表",
+        "ordered-list": "无序列表"
+      },
       "base-list-table": {
         "expand-more-data-hide": "收起",
         "expand-more-data": "还有{count}条数据未展示"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -51,11 +51,27 @@
     "@ant-design/icons": "^6.0.0",
     "@ant-design/pro-components": "^2.8.10",
     "@iconify/react": "^6.0.0",
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/extension-bullet-list": "2.12.0",
+    "@tiptap/extension-color": "^2.12.0",
+    "@tiptap/extension-file-handler": "^3.0.7",
+    "@tiptap/extension-highlight": "^2.12.0",
+    "@tiptap/extension-image": "2.12.0",
+    "@tiptap/extension-link": "2.12.0",
+    "@tiptap/extension-ordered-list": "2.12.0",
+    "@tiptap/extension-subscript": "^2.12.0",
+    "@tiptap/extension-superscript": "^2.12.0",
+    "@tiptap/extension-text-align": "^2.12.0",
+    "@tiptap/extension-text-style": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/react": "^2.12.0",
+    "@tiptap/starter-kit": "^2.12.0",
     "ahooks": "^3.9.0",
     "antd": "^5.26.7",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
+    "prosemirror-state": "^1.4.3",
     "radash": "^12.1.1",
     "rc-virtual-list": "^3.19.1",
     "react-intl": "^7.1.11",
@@ -65,7 +81,8 @@
     "@changesets/cli": "^2.29.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@teamias/umi-loader-source-plugin": "^0.0.6",
+    "@teamias/umi-loader-source-plugin": "^0.0.11",
+    "@teamias/umi-plugin-upload-build": "^0.0.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -80,8 +97,7 @@
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "stylelint": "^14.9.1",
-    "umi-plugin-upload-build": "^1.1.0"
+    "stylelint": "^14.9.1"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=5.0.0",