@teamias/rex-design 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -65
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +2 -1
- package/dist/components/tiptap-editor/demo/index.d.ts +2 -0
- package/dist/components/tiptap-editor/demo/index.js +22 -0
- package/dist/components/tiptap-editor/index.d.ts +2 -0
- package/dist/components/tiptap-editor/index.js +2 -0
- package/dist/components/tiptap-editor/modules/plugin-image-node/index.d.ts +1 -0
- package/dist/components/tiptap-editor/modules/plugin-image-node/index.js +25 -0
- package/dist/components/tiptap-editor/modules/plugin-link-node/index.d.ts +1 -0
- package/dist/components/tiptap-editor/modules/plugin-link-node/index.js +85 -0
- package/dist/components/tiptap-editor/modules/plugin-variable-node/component.d.ts +3 -0
- package/dist/components/tiptap-editor/modules/plugin-variable-node/component.js +133 -0
- package/dist/components/tiptap-editor/modules/plugin-variable-node/index.d.ts +14 -0
- package/dist/components/tiptap-editor/modules/plugin-variable-node/index.js +84 -0
- package/dist/components/tiptap-editor/styles.d.ts +4 -0
- package/dist/components/tiptap-editor/styles.js +11 -0
- package/dist/components/tiptap-editor/tiptap-editor.d.ts +40 -0
- package/dist/components/tiptap-editor/tiptap-editor.js +529 -0
- package/dist/context/request-fields-container/request-fields-container-context-provider.js +3 -3
- package/dist/index.d.ts +42 -0
- package/dist/locales/en-US.json +60 -39
- package/dist/locales/zh-CN.json +60 -39
- package/package.json +17 -1
package/README.md
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
# @teamias/rex-design
|
|
2
|
-
|
|
3
|
-
[](https://npmjs.org/package/@teamias/rex-design)
|
|
4
|
-
[](https://npmjs.org/package/@teamias/rex-design)
|
|
5
|
-
|
|
6
|
-
用 dumi 开发的 react 库
|
|
7
|
-
|
|
8
|
-
## Usage
|
|
9
|
-
|
|
10
|
-
### 安装组件库
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
# 安装组件库
|
|
14
|
-
$ pnpm add @teamias/rex-design
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
### 代码引用
|
|
19
|
-
|
|
20
|
-
```ts
|
|
21
|
-
import { ActionButtons } from '@teamias/rex-design';
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Options
|
|
25
|
-
|
|
26
|
-
TODO
|
|
27
|
-
|
|
28
|
-
## Development
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
# 安装依赖项
|
|
32
|
-
$ pnpm install
|
|
33
|
-
|
|
34
|
-
# 通过文档演示开发库
|
|
35
|
-
$ pnpm start
|
|
36
|
-
|
|
37
|
-
# 构建库源代码
|
|
38
|
-
$ pnpm run build
|
|
39
|
-
|
|
40
|
-
# 在监视模式下构建库源代码
|
|
41
|
-
$ pnpm run build:watch
|
|
42
|
-
|
|
43
|
-
# 生成文档
|
|
44
|
-
$ pnpm run docs:build
|
|
45
|
-
|
|
46
|
-
# 本地预览生产构建。
|
|
47
|
-
$ pnpm run docs:preview
|
|
48
|
-
|
|
49
|
-
# 检查项目的潜在问题
|
|
50
|
-
$ pnpm run doctor
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Publish
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
# 首次发包前,进行用户添加
|
|
57
|
-
$ pnpm adduser
|
|
58
|
-
|
|
59
|
-
# 发布新版本
|
|
60
|
-
$ pnpm run deploy
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## LICENSE
|
|
64
|
-
|
|
65
|
-
MIT
|
|
1
|
+
# @teamias/rex-design
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/@teamias/rex-design)
|
|
4
|
+
[](https://npmjs.org/package/@teamias/rex-design)
|
|
5
|
+
|
|
6
|
+
用 dumi 开发的 react 库
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
### 安装组件库
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
# 安装组件库
|
|
14
|
+
$ pnpm add @teamias/rex-design
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### 代码引用
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { ActionButtons } from '@teamias/rex-design';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Options
|
|
25
|
+
|
|
26
|
+
TODO
|
|
27
|
+
|
|
28
|
+
## Development
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
# 安装依赖项
|
|
32
|
+
$ pnpm install
|
|
33
|
+
|
|
34
|
+
# 通过文档演示开发库
|
|
35
|
+
$ pnpm start
|
|
36
|
+
|
|
37
|
+
# 构建库源代码
|
|
38
|
+
$ pnpm run build
|
|
39
|
+
|
|
40
|
+
# 在监视模式下构建库源代码
|
|
41
|
+
$ pnpm run build:watch
|
|
42
|
+
|
|
43
|
+
# 生成文档
|
|
44
|
+
$ pnpm run docs:build
|
|
45
|
+
|
|
46
|
+
# 本地预览生产构建。
|
|
47
|
+
$ pnpm run docs:preview
|
|
48
|
+
|
|
49
|
+
# 检查项目的潜在问题
|
|
50
|
+
$ pnpm run doctor
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Publish
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
# 首次发包前,进行用户添加
|
|
57
|
+
$ pnpm adduser
|
|
58
|
+
|
|
59
|
+
# 发布新版本
|
|
60
|
+
$ pnpm run deploy
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## LICENSE
|
|
64
|
+
|
|
65
|
+
MIT
|
package/dist/components/index.js
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
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); }
|
|
7
|
+
import enUS from "../../../locales/en-US.json";
|
|
8
|
+
import { RexProConfigProvider, TiptapEditor } from "../../..";
|
|
9
|
+
import { crush } from 'radash';
|
|
10
|
+
import { createIntl } from 'react-intl';
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
export default (function () {
|
|
13
|
+
return /*#__PURE__*/_jsx(RexProConfigProvider, {
|
|
14
|
+
value: {
|
|
15
|
+
intl: createIntl({
|
|
16
|
+
locale: 'en-us',
|
|
17
|
+
messages: _objectSpread({}, crush(enUS))
|
|
18
|
+
})
|
|
19
|
+
},
|
|
20
|
+
children: /*#__PURE__*/_jsx(TiptapEditor, {})
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Image: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Image as RawImage } from '@tiptap/extension-image';
|
|
2
|
+
|
|
3
|
+
// 自定义图片扩展,确保图片渲染为可调整大小的 DOM 结构
|
|
4
|
+
export var Image = RawImage.extend({
|
|
5
|
+
addNodeView: function addNodeView() {
|
|
6
|
+
return function (_ref) {
|
|
7
|
+
var node = _ref.node,
|
|
8
|
+
editor = _ref.editor,
|
|
9
|
+
getPos = _ref.getPos;
|
|
10
|
+
var img = document.createElement('img');
|
|
11
|
+
img.src = node.attrs.src;
|
|
12
|
+
|
|
13
|
+
// 用 div 包裹 img,以便添加 resize 句柄
|
|
14
|
+
var wrapper = document.createElement('div');
|
|
15
|
+
wrapper.className = 'resizable-image-wrapper';
|
|
16
|
+
wrapper.appendChild(img);
|
|
17
|
+
|
|
18
|
+
// 返回 NodeView 对象,包含 dom 属性
|
|
19
|
+
return {
|
|
20
|
+
dom: wrapper,
|
|
21
|
+
contentDOM: null
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Link: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
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."); }
|
|
4
|
+
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); }
|
|
5
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
6
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
7
|
+
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; }
|
|
8
|
+
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; }
|
|
9
|
+
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; }
|
|
10
|
+
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; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
12
|
+
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); }
|
|
13
|
+
import { default as RawLink } from '@tiptap/extension-link';
|
|
14
|
+
import { Plugin } from 'prosemirror-state';
|
|
15
|
+
|
|
16
|
+
// 自定义链接扩展
|
|
17
|
+
export var Link = RawLink.extend({
|
|
18
|
+
// 添加自定义属性
|
|
19
|
+
addAttributes: function addAttributes() {
|
|
20
|
+
var _this$parent;
|
|
21
|
+
return _objectSpread(_objectSpread({}, (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.call(this)), {}, {
|
|
22
|
+
// 添加自定义属性,比如打开方式
|
|
23
|
+
target: {
|
|
24
|
+
default: null,
|
|
25
|
+
parseHTML: function parseHTML(element) {
|
|
26
|
+
return element.getAttribute('target');
|
|
27
|
+
},
|
|
28
|
+
renderHTML: function renderHTML(attributes) {
|
|
29
|
+
return attributes.target ? {
|
|
30
|
+
target: attributes.target
|
|
31
|
+
} : {};
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
},
|
|
36
|
+
// 添加自定义事件处理
|
|
37
|
+
addProseMirrorPlugins: function addProseMirrorPlugins() {
|
|
38
|
+
var _this$parent2;
|
|
39
|
+
var plugins = ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.call(this)) || [];
|
|
40
|
+
return [].concat(_toConsumableArray(plugins), [
|
|
41
|
+
// 添加自定义点击处理插件
|
|
42
|
+
new Plugin({
|
|
43
|
+
// spec: '',
|
|
44
|
+
// getState: () => {},
|
|
45
|
+
props: {
|
|
46
|
+
handleClick: function handleClick(view, pos, event) {
|
|
47
|
+
var _event$target;
|
|
48
|
+
// console.log(view, pos, event);
|
|
49
|
+
|
|
50
|
+
// 获取当前选区
|
|
51
|
+
var state = view.state;
|
|
52
|
+
var _state$selection = state.selection,
|
|
53
|
+
from = _state$selection.from,
|
|
54
|
+
to = _state$selection.to;
|
|
55
|
+
|
|
56
|
+
// 检查点击位置是否在链接节点内
|
|
57
|
+
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;
|
|
58
|
+
|
|
59
|
+
// console.log(event, state.doc.nodeAt(pos));
|
|
60
|
+
if (linkNode) {
|
|
61
|
+
if (event.ctrlKey || event.metaKey) {
|
|
62
|
+
var href = linkNode.href;
|
|
63
|
+
window.open(href, '_blank');
|
|
64
|
+
return true;
|
|
65
|
+
} else {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return false;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
})]);
|
|
74
|
+
},
|
|
75
|
+
// 添加自定义样式类
|
|
76
|
+
addOptions: function addOptions() {
|
|
77
|
+
var _this$parent3;
|
|
78
|
+
return _objectSpread(_objectSpread({}, (_this$parent3 = this.parent) === null || _this$parent3 === void 0 ? void 0 : _this$parent3.call(this)), {}, {
|
|
79
|
+
HTMLAttributes: {
|
|
80
|
+
class: 'tiptap-link',
|
|
81
|
+
style: 'cursor: pointer;'
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
});
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
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; }
|
|
7
|
+
import { VerticalAlignTopOutlined } from '@ant-design/icons';
|
|
8
|
+
import { useStateData } from "../../../..";
|
|
9
|
+
import { NodeViewWrapper } from '@tiptap/react';
|
|
10
|
+
import { Dropdown, Input } from 'antd';
|
|
11
|
+
import { useRef } from 'react';
|
|
12
|
+
import styled from 'styled-components';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
export var Component = function Component(props) {
|
|
15
|
+
var opts = props.extension.options;
|
|
16
|
+
var nodeViewWrapperRef = useRef(null);
|
|
17
|
+
var ref = useRef(null);
|
|
18
|
+
var _useStateData = useStateData(function () {
|
|
19
|
+
return {
|
|
20
|
+
open: true,
|
|
21
|
+
inputFocus: false
|
|
22
|
+
// inlineOptions: [],
|
|
23
|
+
};
|
|
24
|
+
}),
|
|
25
|
+
state = _useStateData.state,
|
|
26
|
+
update = _useStateData.update;
|
|
27
|
+
var updateSelected = function updateSelected(val) {
|
|
28
|
+
props.updateAttributes({
|
|
29
|
+
selected: val
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// const getFocus = () => {
|
|
34
|
+
// if (state.open) {
|
|
35
|
+
// setTimeout(() => {
|
|
36
|
+
// ref.current?.focus();
|
|
37
|
+
// }, 0);
|
|
38
|
+
// }
|
|
39
|
+
// };
|
|
40
|
+
|
|
41
|
+
// console.log(props);
|
|
42
|
+
// useEffect(() => {
|
|
43
|
+
// getFocus();
|
|
44
|
+
// }, [state.open,]);
|
|
45
|
+
|
|
46
|
+
return /*#__PURE__*/_jsx(NodeViewWrapper, {
|
|
47
|
+
style: {
|
|
48
|
+
display: 'inline-block'
|
|
49
|
+
},
|
|
50
|
+
ref: nodeViewWrapperRef,
|
|
51
|
+
onClick: function onClick(e) {
|
|
52
|
+
if (state.inputFocus) {
|
|
53
|
+
e.stopPropagation();
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
57
|
+
contentEditable: false,
|
|
58
|
+
children: /*#__PURE__*/_jsx(Dropdown, {
|
|
59
|
+
open: state.open
|
|
60
|
+
// getPopupContainer={triggerNode => {
|
|
61
|
+
// // triggerNode.parentNode as HTMLElement
|
|
62
|
+
// console.log(triggerNode);
|
|
63
|
+
// }}
|
|
64
|
+
,
|
|
65
|
+
trigger: ['click'],
|
|
66
|
+
menu: {
|
|
67
|
+
items: [{
|
|
68
|
+
label: /*#__PURE__*/_jsx("span", {
|
|
69
|
+
style: {
|
|
70
|
+
fontSize: 12
|
|
71
|
+
},
|
|
72
|
+
children: "\u6CE8\u5165\u53C2\u6570\u9009\u62E9"
|
|
73
|
+
}),
|
|
74
|
+
key: '__key-1',
|
|
75
|
+
disabled: true
|
|
76
|
+
}, {
|
|
77
|
+
type: 'divider'
|
|
78
|
+
}, {
|
|
79
|
+
label: /*#__PURE__*/_jsx("div", {
|
|
80
|
+
contentEditable: false,
|
|
81
|
+
children: /*#__PURE__*/_jsx(Input.Search, {
|
|
82
|
+
size: "small",
|
|
83
|
+
placeholder: "\u81EA\u5B9A\u4E49\u53D8\u91CF\u540D",
|
|
84
|
+
enterButton: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {}),
|
|
85
|
+
ref: ref,
|
|
86
|
+
onFocusCapture: function onFocusCapture() {
|
|
87
|
+
// 在获取焦点瞬间,阻止 NodeViewWrapper 的默认事件
|
|
88
|
+
// 100ms 后解开限制
|
|
89
|
+
// 这里来解决焦点不对问题
|
|
90
|
+
state.inputFocus = true;
|
|
91
|
+
setTimeout(function () {
|
|
92
|
+
state.inputFocus = false;
|
|
93
|
+
}, 200);
|
|
94
|
+
},
|
|
95
|
+
onSearch: function onSearch(e) {
|
|
96
|
+
if (e) {
|
|
97
|
+
var _nodeViewWrapperRef$c;
|
|
98
|
+
// console.log(nodeViewWrapperRef);
|
|
99
|
+
(_nodeViewWrapperRef$c = nodeViewWrapperRef.current) === null || _nodeViewWrapperRef$c === void 0 || _nodeViewWrapperRef$c.click();
|
|
100
|
+
state.open = false;
|
|
101
|
+
updateSelected(e);
|
|
102
|
+
update();
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
}),
|
|
107
|
+
key: '__key-2',
|
|
108
|
+
disabled: true
|
|
109
|
+
}, {
|
|
110
|
+
type: 'divider'
|
|
111
|
+
}].concat(_toConsumableArray(opts.options)),
|
|
112
|
+
onClick: function onClick(e) {
|
|
113
|
+
if (!e.key.startsWith('__key-')) {
|
|
114
|
+
updateSelected(e.key);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
onOpenChange: function onOpenChange(val) {
|
|
119
|
+
state.open = val;
|
|
120
|
+
update();
|
|
121
|
+
},
|
|
122
|
+
children: props.node.attrs.selected && /*#__PURE__*/_jsx(SpanBox, {
|
|
123
|
+
className: props.selected ? 'selected' : '',
|
|
124
|
+
children: props.node.attrs.selected
|
|
125
|
+
})
|
|
126
|
+
})
|
|
127
|
+
})
|
|
128
|
+
});
|
|
129
|
+
};
|
|
130
|
+
var SpanBox = styled.span.withConfig({
|
|
131
|
+
displayName: "SpanBox",
|
|
132
|
+
componentId: "rex-design-aaf4__sc-1qkqodh-0"
|
|
133
|
+
})(["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;}"]);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Node } from '@tiptap/core';
|
|
2
|
+
export declare const PluginVariableBNode: Node<PluginVariableBNodeOptions, any>;
|
|
3
|
+
/**
|
|
4
|
+
* 提取 tiptap 编辑器内容中的所有 <react-variable-node selected="label"></react-variable-node> 占位符
|
|
5
|
+
* @param text 编辑器内容字符串
|
|
6
|
+
* @param source 匹配对象
|
|
7
|
+
*/
|
|
8
|
+
export declare const matchTiptapVariables: (text: string, source?: Record<string, unknown>) => string;
|
|
9
|
+
export interface PluginVariableBNodeOptions {
|
|
10
|
+
options?: Array<{
|
|
11
|
+
label: string;
|
|
12
|
+
key: string;
|
|
13
|
+
}>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { Node, mergeAttributes } from '@tiptap/core';
|
|
2
|
+
import { ReactNodeViewRenderer } from '@tiptap/react';
|
|
3
|
+
import { get } from 'radash';
|
|
4
|
+
import { Component } from "./component";
|
|
5
|
+
|
|
6
|
+
/** 标签名称 */
|
|
7
|
+
var tagName = 'react-variable-node';
|
|
8
|
+
export var PluginVariableBNode = Node.create({
|
|
9
|
+
name: 'variable',
|
|
10
|
+
// 唯一名称
|
|
11
|
+
inline: true,
|
|
12
|
+
// 行内节点(非块级)
|
|
13
|
+
group: 'inline',
|
|
14
|
+
// 分组为行内
|
|
15
|
+
atom: true,
|
|
16
|
+
// 原子节点(不可分割)
|
|
17
|
+
// parseDOM: [{ tag: 'span.variable', },], // 解析 DOM 规则
|
|
18
|
+
addAttributes: function addAttributes() {
|
|
19
|
+
return {
|
|
20
|
+
// count: {
|
|
21
|
+
// default: 0,
|
|
22
|
+
// },
|
|
23
|
+
// options: {
|
|
24
|
+
// default: this.options.options,
|
|
25
|
+
// },
|
|
26
|
+
selected: {
|
|
27
|
+
default: ''
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
},
|
|
31
|
+
parseHTML: function parseHTML() {
|
|
32
|
+
return [{
|
|
33
|
+
tag: tagName
|
|
34
|
+
}];
|
|
35
|
+
},
|
|
36
|
+
renderHTML: function renderHTML(_ref) {
|
|
37
|
+
var HTMLAttributes = _ref.HTMLAttributes;
|
|
38
|
+
return [tagName, mergeAttributes(HTMLAttributes)];
|
|
39
|
+
},
|
|
40
|
+
addNodeView: function addNodeView() {
|
|
41
|
+
return ReactNodeViewRenderer(Component);
|
|
42
|
+
},
|
|
43
|
+
addInputRules: function addInputRules() {
|
|
44
|
+
var _this = this;
|
|
45
|
+
return [{
|
|
46
|
+
find: /\{/,
|
|
47
|
+
handler: function handler(_ref2) {
|
|
48
|
+
var state = _ref2.state,
|
|
49
|
+
range = _ref2.range,
|
|
50
|
+
match = _ref2.match;
|
|
51
|
+
state.tr.replaceRangeWith(range.from, range.to, _this.type.create({
|
|
52
|
+
name: match[1]
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
}];
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* 提取 tiptap 编辑器内容中的所有 <react-variable-node selected="label"></react-variable-node> 占位符
|
|
61
|
+
* @param text 编辑器内容字符串
|
|
62
|
+
* @param source 匹配对象
|
|
63
|
+
*/
|
|
64
|
+
export var matchTiptapVariables = function matchTiptapVariables(text) {
|
|
65
|
+
var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
66
|
+
var reg = new RegExp("<".concat(tagName, " selected=\"(.*?)\"></").concat(tagName, ">"), 'g');
|
|
67
|
+
return text.replace(reg, function (content, match1) {
|
|
68
|
+
// console.log(arg);
|
|
69
|
+
return "".concat(get(source, match1) || '');
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// const parseValue = (pathKey: string, source: Record<string, unknown>) => {
|
|
74
|
+
// // 'ssss[0].ewe.we.qqw'
|
|
75
|
+
// const paths = pathKey.replace(/\[|\]/g, '.').replace(/\.\./g, '.').split('.');
|
|
76
|
+
// const val = paths.slice(1).reduce((mainVal, key) => {
|
|
77
|
+
// if (typeof mainVal === 'undefined') return mainVal;
|
|
78
|
+
// if (mainVal === null) return null;
|
|
79
|
+
|
|
80
|
+
// return (mainVal as Record<string, unknown>)[key];
|
|
81
|
+
// }, source[paths[0]]);
|
|
82
|
+
|
|
83
|
+
// return val;
|
|
84
|
+
// };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
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>, {
|
|
3
|
+
"data-max-height"?: string | number | undefined;
|
|
4
|
+
}>> & string;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export var Box = styled.div.withConfig({
|
|
3
|
+
displayName: "Box",
|
|
4
|
+
componentId: "rex-design-aaf4__sc-szanbo-0"
|
|
5
|
+
})(["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) {
|
|
6
|
+
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';
|
|
7
|
+
}, function (props) {
|
|
8
|
+
return {
|
|
9
|
+
maxHeight: typeof props['data-max-height'] === 'number' ? "".concat(props['data-max-height'], "px") : props['data-max-height']
|
|
10
|
+
};
|
|
11
|
+
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Extensions, useEditor } from '@tiptap/react';
|
|
2
|
+
import { FC, ReactNode } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* https://v2.tiptap.dev/docs/editor/extensions/nodes/task-item
|
|
5
|
+
*/
|
|
6
|
+
export declare const TiptapEditor: FC<TiptapEditorProps>;
|
|
7
|
+
export interface TiptapEditorProps {
|
|
8
|
+
value?: string;
|
|
9
|
+
defaultValue?: string;
|
|
10
|
+
onChange?: (value: string) => void;
|
|
11
|
+
maxHeight?: number | string;
|
|
12
|
+
/** 变量 */
|
|
13
|
+
variableObject?: Record<string, unknown>;
|
|
14
|
+
/**
|
|
15
|
+
* @desc 类型
|
|
16
|
+
* - html html文本
|
|
17
|
+
* - text 存文本
|
|
18
|
+
*/
|
|
19
|
+
type?: 'html' | 'text';
|
|
20
|
+
/** 隐藏工具栏 */
|
|
21
|
+
hiddenToolBar?: boolean;
|
|
22
|
+
/** 阻止换行 */
|
|
23
|
+
preventLineBreaks?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* @desc 自定义渲染工具栏
|
|
26
|
+
* - oldNode 默认的渲染模块
|
|
27
|
+
* - editor useEditor 的操作对象
|
|
28
|
+
* - config 默认的工具列表
|
|
29
|
+
*/
|
|
30
|
+
renderToolBar?: (oldNode: JSX.Element, editor: ReturnType<typeof useEditor>, config: IConfigItem[]) => ReactNode;
|
|
31
|
+
/** 插件注入 */
|
|
32
|
+
extensions?: Extensions;
|
|
33
|
+
}
|
|
34
|
+
interface IConfigItem {
|
|
35
|
+
title: string;
|
|
36
|
+
key: string;
|
|
37
|
+
icon?: JSX.Element;
|
|
38
|
+
onClick?: () => void;
|
|
39
|
+
}
|
|
40
|
+
export {};
|