@teamias/rex-design 0.0.8 → 0.0.9

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/context/request-fields-container/request-fields-container-context-provider.js

@@ -9,9 +9,9 @@ import { useRexProConfigProvider } from "../rex-pro-config-provider/use-rex-pro-
 import { RequestFieldsContainerContext } from "./request-fields-container-context";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 用于收集所有包含(requestFields)组件加载完成
- * TODO: 需要组件(requestFields),去实现这部分逻辑
+/**
+ * 用于收集所有包含(requestFields)组件加载完成
+ * TODO: 需要组件(requestFields),去实现这部分逻辑
  */
 export var RequestFieldsContainer = function RequestFieldsContainer(_ref) {
   var children = _ref.children,

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;