x-star-editor 0.0.9 → 0.1.0
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/dist/components/Fade.d.ts +9 -0
- package/dist/components/Fade.js +38 -0
- package/dist/components/FileInput.js +11 -8
- package/dist/components/Toolbar.d.ts +9 -5
- package/dist/components/Toolbar.js +154 -97
- package/dist/index.d.ts +7 -7
- package/dist/index.js +4 -4
- package/dist/locales/en_US.d.ts +27 -0
- package/dist/locales/en_US.js +26 -0
- package/dist/locales/index.d.ts +115 -0
- package/dist/locales/index.js +41 -0
- package/dist/locales/zh_CN.d.ts +27 -0
- package/dist/locales/zh_CN.js +26 -0
- package/dist/styles/icons/blockquote.svg +18 -0
- package/dist/styles/icons/code.svg +18 -1
- package/dist/styles/icons/delete.svg +18 -0
- package/dist/styles/icons/emphasis.svg +18 -0
- package/dist/styles/icons/heading.svg +16 -0
- package/dist/styles/icons/image.svg +18 -1
- package/dist/styles/icons/inline-code.svg +19 -0
- package/dist/styles/icons/inline-math.svg +20 -0
- package/dist/styles/icons/link.svg +18 -1
- package/dist/styles/icons/math.svg +17 -0
- package/dist/styles/icons/redo.svg +18 -0
- package/dist/styles/icons/strong.svg +18 -0
- package/dist/styles/icons/thematic-break.svg +18 -0
- package/dist/styles/icons/undo.svg +18 -0
- package/dist/styles/index.css +353 -389
- package/dist/utils/container.js +23 -1
- package/dist/utils/global.d.ts +1 -1
- package/dist/utils/global.js +1 -1
- package/dist/utils/history.d.ts +18 -5
- package/dist/utils/history.js +80 -68
- package/dist/utils/markdown.d.ts +7 -0
- package/dist/utils/markdown.js +25 -25
- package/dist/{XStarEditor → x-star-editor}/index.d.ts +22 -3
- package/dist/{XStarEditor → x-star-editor}/index.js +30 -20
- package/dist/{XStarMdEditor → x-star-md-editor}/index.d.ts +31 -3
- package/dist/{XStarMdEditor → x-star-md-editor}/index.js +23 -14
- package/dist/{XStarMdViewer → x-star-md-viewer}/index.d.ts +12 -0
- package/dist/{XStarMdViewer → x-star-md-viewer}/index.js +3 -1
- package/package.json +6 -4
- package/dist/styles/icons/bold.svg +0 -1
- package/dist/styles/icons/code-library.svg +0 -1
- package/dist/styles/icons/italic.svg +0 -1
- package/dist/styles/icons/strikethrough.svg +0 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface FadeProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
nodeRef: React.RefObject<HTMLDivElement>;
|
|
5
|
+
appear: boolean;
|
|
6
|
+
timeout: number;
|
|
7
|
+
}
|
|
8
|
+
declare const Fade: ({ children, nodeRef, appear, timeout }: FadeProps) => React.JSX.Element;
|
|
9
|
+
export default Fade;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
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 _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; }
|
|
5
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React, { useEffect, useState } from 'react';
|
|
8
|
+
var Fade = function Fade(_ref) {
|
|
9
|
+
var children = _ref.children,
|
|
10
|
+
nodeRef = _ref.nodeRef,
|
|
11
|
+
appear = _ref.appear,
|
|
12
|
+
timeout = _ref.timeout;
|
|
13
|
+
var _useState = useState(appear),
|
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
15
|
+
mount = _useState2[0],
|
|
16
|
+
setMount = _useState2[1];
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
if (appear) {
|
|
19
|
+
if (nodeRef.current) {
|
|
20
|
+
nodeRef.current.getBoundingClientRect();
|
|
21
|
+
nodeRef.current.style.opacity = '1';
|
|
22
|
+
}
|
|
23
|
+
setMount(true);
|
|
24
|
+
} else {
|
|
25
|
+
if (nodeRef.current) {
|
|
26
|
+
nodeRef.current.style.opacity = '0';
|
|
27
|
+
}
|
|
28
|
+
var timer = window.setTimeout(function () {
|
|
29
|
+
return setMount(false);
|
|
30
|
+
}, timeout);
|
|
31
|
+
return function () {
|
|
32
|
+
return window.clearTimeout(timer);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
}, [appear, timeout]);
|
|
36
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, (appear || mount) && children);
|
|
37
|
+
};
|
|
38
|
+
export default Fade;
|
|
@@ -10,6 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
11
|
import classNames from 'classnames';
|
|
12
12
|
import React, { useState } from 'react';
|
|
13
|
+
import { useLocale } from "../locales";
|
|
13
14
|
import { prefix } from "../utils/global";
|
|
14
15
|
var FileInput = function FileInput(_ref) {
|
|
15
16
|
var _file$name;
|
|
@@ -31,6 +32,8 @@ var FileInput = function FileInput(_ref) {
|
|
|
31
32
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
32
33
|
description = _useState8[0],
|
|
33
34
|
setDescription = _useState8[1];
|
|
35
|
+
var _useLocale = useLocale('fileInput'),
|
|
36
|
+
t = _useLocale.format;
|
|
34
37
|
return /*#__PURE__*/React.createElement("div", {
|
|
35
38
|
className: classNames("".concat(prefix, "file-input"))
|
|
36
39
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -40,14 +43,14 @@ var FileInput = function FileInput(_ref) {
|
|
|
40
43
|
onClick: function onClick() {
|
|
41
44
|
return setType('file');
|
|
42
45
|
}
|
|
43
|
-
},
|
|
46
|
+
}, t('file')), /*#__PURE__*/React.createElement("div", {
|
|
44
47
|
className: classNames("".concat(prefix, "tab"), _defineProperty({}, "".concat(prefix, "active"), type === 'url')),
|
|
45
48
|
onClick: function onClick() {
|
|
46
49
|
return setType('url');
|
|
47
50
|
}
|
|
48
|
-
},
|
|
51
|
+
}, t('url'))), type === 'file' ? /*#__PURE__*/React.createElement("label", {
|
|
49
52
|
className: classNames("".concat(prefix, "field"))
|
|
50
|
-
},
|
|
53
|
+
}, t('file'), /*#__PURE__*/React.createElement("div", {
|
|
51
54
|
className: classNames("".concat(prefix, "file-container"))
|
|
52
55
|
}, /*#__PURE__*/React.createElement("input", {
|
|
53
56
|
className: classNames("".concat(prefix, "hidden")),
|
|
@@ -63,16 +66,16 @@ var FileInput = function FileInput(_ref) {
|
|
|
63
66
|
}), /*#__PURE__*/React.createElement("button", {
|
|
64
67
|
className: classNames("".concat(prefix, "button")),
|
|
65
68
|
type: "button"
|
|
66
|
-
},
|
|
69
|
+
}, t('chooseFile')))) : /*#__PURE__*/React.createElement("label", {
|
|
67
70
|
className: classNames("".concat(prefix, "field"))
|
|
68
|
-
},
|
|
71
|
+
}, t('url'), /*#__PURE__*/React.createElement("input", {
|
|
69
72
|
className: classNames("".concat(prefix, "input")),
|
|
70
73
|
onChange: function onChange(e) {
|
|
71
74
|
return setUrl(e.target.value);
|
|
72
75
|
}
|
|
73
76
|
})), /*#__PURE__*/React.createElement("label", {
|
|
74
77
|
className: classNames("".concat(prefix, "field"))
|
|
75
|
-
},
|
|
78
|
+
}, t('description'), /*#__PURE__*/React.createElement("input", {
|
|
76
79
|
className: classNames("".concat(prefix, "input")),
|
|
77
80
|
onChange: function onChange(e) {
|
|
78
81
|
return setDescription(e.target.value);
|
|
@@ -97,10 +100,10 @@ var FileInput = function FileInput(_ref) {
|
|
|
97
100
|
});
|
|
98
101
|
}
|
|
99
102
|
}
|
|
100
|
-
},
|
|
103
|
+
}, t('confirm')), /*#__PURE__*/React.createElement("button", {
|
|
101
104
|
className: classNames("".concat(prefix, "button")),
|
|
102
105
|
type: "button",
|
|
103
106
|
onClick: onCancel
|
|
104
|
-
},
|
|
107
|
+
}, t('cancel'))));
|
|
105
108
|
};
|
|
106
109
|
export default FileInput;
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { Executor } from '../utils/handler';
|
|
3
|
-
|
|
2
|
+
import type { Executor, Handler } from '../utils/handler';
|
|
3
|
+
interface ToolbarItemProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
+
disabled?: boolean;
|
|
5
6
|
tooltip?: React.ReactNode;
|
|
6
7
|
popoverRender?: (exec: Executor, close: () => void) => React.ReactNode;
|
|
7
8
|
onClick?: (exec: Executor) => void;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
type ToolbarItem = ToolbarItemProps | Handler<ToolbarItemProps>;
|
|
11
|
+
export type ToolbarItemMap = Partial<Record<string, ToolbarItem>>;
|
|
12
|
+
export declare const getDefaultToolbarItemMap: (locale?: string, onInsertFile?: ((file: File, options: {
|
|
10
13
|
description: string;
|
|
11
14
|
image: boolean;
|
|
12
|
-
}) => void) | undefined) =>
|
|
13
|
-
export
|
|
15
|
+
}) => void) | undefined) => ToolbarItemMap;
|
|
16
|
+
export type ToolbarItems = (string | ToolbarItem)[][];
|
|
17
|
+
export declare const getDefaultToolbarItems: () => ToolbarItems;
|
|
14
18
|
interface ToolbarProps {
|
|
15
19
|
className?: string;
|
|
16
20
|
style?: React.CSSProperties;
|
|
@@ -10,12 +10,16 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
11
|
import classNames from 'classnames';
|
|
12
12
|
import React, { useEffect, useRef, useState } from 'react';
|
|
13
|
+
import { getFormat } from "../locales";
|
|
13
14
|
import { prefix } from "../utils/global";
|
|
14
|
-
import { toggleHandler } from "../utils/handler";
|
|
15
|
+
import { redoHandler, toggleHandler, undoHandler } from "../utils/handler";
|
|
16
|
+
import Fade from "./Fade";
|
|
15
17
|
import FileInput from "./FileInput";
|
|
16
18
|
var Button = function Button(_ref) {
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
+
var _classNames;
|
|
20
|
+
var children = _ref.children,
|
|
21
|
+
toolbarRef = _ref.toolbarRef,
|
|
22
|
+
disabled = _ref.disabled,
|
|
19
23
|
tooltip = _ref.tooltip,
|
|
20
24
|
popoverRender = _ref.popoverRender,
|
|
21
25
|
_onClick = _ref.onClick;
|
|
@@ -32,13 +36,13 @@ var Button = function Button(_ref) {
|
|
|
32
36
|
});
|
|
33
37
|
var popoverMount = !!popover && popoverOpen;
|
|
34
38
|
var tooltipMount = !popoverMount && !!tooltip && tooltipOpen;
|
|
39
|
+
var tooltipRef = useRef(null);
|
|
35
40
|
var popoverRef = useRef(null);
|
|
36
41
|
useEffect(function () {
|
|
37
42
|
if (popoverMount) {
|
|
38
43
|
if (toolbarRef.current && popoverRef.current) {
|
|
39
44
|
var left = toolbarRef.current.getBoundingClientRect().right - popoverRef.current.getBoundingClientRect().right;
|
|
40
45
|
popoverRef.current.style.left = "".concat(left < 0 ? left : 0, "px");
|
|
41
|
-
popoverRef.current.style.opacity = '1';
|
|
42
46
|
}
|
|
43
47
|
var listener = function listener(e) {
|
|
44
48
|
var _popoverRef$current;
|
|
@@ -60,13 +64,12 @@ var Button = function Button(_ref) {
|
|
|
60
64
|
return /*#__PURE__*/React.createElement("div", {
|
|
61
65
|
className: classNames("".concat(prefix, "button-container"))
|
|
62
66
|
}, /*#__PURE__*/React.createElement("div", {
|
|
63
|
-
className: classNames("".concat(prefix, "button"),
|
|
67
|
+
className: classNames("".concat(prefix, "button"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "active"), tooltipOpen || popoverMount), _classNames)),
|
|
64
68
|
onClick: function onClick() {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return e.preventDefault();
|
|
69
|
+
if (!disabled) {
|
|
70
|
+
setPopoverOpen(true);
|
|
71
|
+
_onClick === null || _onClick === void 0 ? void 0 : _onClick();
|
|
72
|
+
}
|
|
70
73
|
},
|
|
71
74
|
onMouseEnter: function onMouseEnter() {
|
|
72
75
|
return setTooltipOpen(true);
|
|
@@ -74,49 +77,32 @@ var Button = function Button(_ref) {
|
|
|
74
77
|
onMouseLeave: function onMouseLeave() {
|
|
75
78
|
return setTooltipOpen(false);
|
|
76
79
|
}
|
|
77
|
-
}, children,
|
|
80
|
+
}, children), /*#__PURE__*/React.createElement(Fade, {
|
|
81
|
+
nodeRef: tooltipRef,
|
|
82
|
+
appear: tooltipMount,
|
|
83
|
+
timeout: 300
|
|
84
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
ref: tooltipRef,
|
|
78
86
|
className: classNames("".concat(prefix, "tooltip"))
|
|
79
|
-
}, tooltip)),
|
|
87
|
+
}, tooltip)), /*#__PURE__*/React.createElement(Fade, {
|
|
88
|
+
nodeRef: popoverRef,
|
|
89
|
+
appear: popoverMount,
|
|
90
|
+
timeout: 300
|
|
91
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
80
92
|
ref: popoverRef,
|
|
81
93
|
className: classNames("".concat(prefix, "popover"))
|
|
82
|
-
}, popover));
|
|
94
|
+
}, popover)));
|
|
83
95
|
};
|
|
84
|
-
export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(
|
|
96
|
+
export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap() {
|
|
97
|
+
var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
98
|
+
var onInsertFile = arguments.length > 1 ? arguments[1] : undefined;
|
|
99
|
+
var t = getFormat(locale, 'toolbarItem');
|
|
85
100
|
return {
|
|
86
|
-
heading: {
|
|
87
|
-
children: 'H',
|
|
88
|
-
tooltip: '标题',
|
|
89
|
-
popoverRender: function popoverRender(exec, close) {
|
|
90
|
-
var optionRender = function optionRender(depth, fontSize) {
|
|
91
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
92
|
-
className: classNames("".concat(prefix, "option")),
|
|
93
|
-
style: {
|
|
94
|
-
fontSize: fontSize
|
|
95
|
-
},
|
|
96
|
-
onClick: function onClick() {
|
|
97
|
-
exec(toggleHandler({
|
|
98
|
-
type: 'heading',
|
|
99
|
-
depth: depth
|
|
100
|
-
}));
|
|
101
|
-
close();
|
|
102
|
-
}
|
|
103
|
-
}, "\u6807\u9898 ", depth);
|
|
104
|
-
};
|
|
105
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender(1, '1.6em'), optionRender(2, '1.3em'), optionRender(3, '1.2em'), optionRender(4, '1.1em'), optionRender(5, '1.0em'), optionRender(6, '0.9em'));
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
thematicBreak: {
|
|
109
|
-
children: '—',
|
|
110
|
-
tooltip: '分隔线',
|
|
111
|
-
onClick: function onClick(exec) {
|
|
112
|
-
return exec(toggleHandler({
|
|
113
|
-
type: 'thematicBreak'
|
|
114
|
-
}));
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
101
|
blockquote: {
|
|
118
|
-
children:
|
|
119
|
-
|
|
102
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
103
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "blockquote"))
|
|
104
|
+
}),
|
|
105
|
+
tooltip: t('blockquote'),
|
|
120
106
|
onClick: function onClick(exec) {
|
|
121
107
|
return exec(toggleHandler({
|
|
122
108
|
type: 'blockquote'
|
|
@@ -125,9 +111,9 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
125
111
|
},
|
|
126
112
|
code: {
|
|
127
113
|
children: /*#__PURE__*/React.createElement("div", {
|
|
128
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "code
|
|
114
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "code"))
|
|
129
115
|
}),
|
|
130
|
-
tooltip: '
|
|
116
|
+
tooltip: t('code'),
|
|
131
117
|
popoverRender: function popoverRender(exec, close) {
|
|
132
118
|
var optionRender = function optionRender(label, language) {
|
|
133
119
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -144,44 +130,57 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
144
130
|
return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender('C++', 'cpp'), optionRender('Java', 'java'), optionRender('Python', 'py'), optionRender('Text', 'txt'));
|
|
145
131
|
}
|
|
146
132
|
},
|
|
147
|
-
|
|
133
|
+
delete: {
|
|
148
134
|
children: /*#__PURE__*/React.createElement("div", {
|
|
149
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
135
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "delete"))
|
|
150
136
|
}),
|
|
151
|
-
tooltip: '
|
|
137
|
+
tooltip: t('delete'),
|
|
152
138
|
onClick: function onClick(exec) {
|
|
153
139
|
return exec(toggleHandler({
|
|
154
|
-
type: '
|
|
140
|
+
type: 'delete'
|
|
155
141
|
}));
|
|
156
142
|
}
|
|
157
143
|
},
|
|
158
|
-
|
|
144
|
+
emphasis: {
|
|
159
145
|
children: /*#__PURE__*/React.createElement("div", {
|
|
160
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
146
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "emphasis"))
|
|
161
147
|
}),
|
|
162
|
-
tooltip: '
|
|
148
|
+
tooltip: t('emphasis'),
|
|
163
149
|
onClick: function onClick(exec) {
|
|
164
150
|
return exec(toggleHandler({
|
|
165
|
-
type: '
|
|
151
|
+
type: 'emphasis'
|
|
166
152
|
}));
|
|
167
153
|
}
|
|
168
154
|
},
|
|
169
|
-
|
|
155
|
+
heading: {
|
|
170
156
|
children: /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
157
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "heading"))
|
|
172
158
|
}),
|
|
173
|
-
tooltip: '
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
159
|
+
tooltip: t('heading'),
|
|
160
|
+
popoverRender: function popoverRender(exec, close) {
|
|
161
|
+
var optionRender = function optionRender(depth, fontSize) {
|
|
162
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
163
|
+
className: classNames("".concat(prefix, "option")),
|
|
164
|
+
style: {
|
|
165
|
+
fontSize: fontSize
|
|
166
|
+
},
|
|
167
|
+
onClick: function onClick() {
|
|
168
|
+
exec(toggleHandler({
|
|
169
|
+
type: 'heading',
|
|
170
|
+
depth: depth
|
|
171
|
+
}));
|
|
172
|
+
close();
|
|
173
|
+
}
|
|
174
|
+
}, "H", depth, " ", t('heading'), " ", depth);
|
|
175
|
+
};
|
|
176
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, optionRender(1, '1.6em'), optionRender(2, '1.3em'), optionRender(3, '1.2em'), optionRender(4, '1.1em'), optionRender(5, '1em'), optionRender(6, '0.9em'));
|
|
178
177
|
}
|
|
179
178
|
},
|
|
180
|
-
|
|
179
|
+
image: {
|
|
181
180
|
children: /*#__PURE__*/React.createElement("div", {
|
|
182
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
181
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "image"))
|
|
183
182
|
}),
|
|
184
|
-
tooltip: '
|
|
183
|
+
tooltip: t('image'),
|
|
185
184
|
popoverRender: function popoverRender(exec, close) {
|
|
186
185
|
return /*#__PURE__*/React.createElement(FileInput, {
|
|
187
186
|
onCancel: close,
|
|
@@ -189,11 +188,11 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
189
188
|
if (data.type === 'file') {
|
|
190
189
|
onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(data.file, {
|
|
191
190
|
description: data.description,
|
|
192
|
-
image:
|
|
191
|
+
image: true
|
|
193
192
|
});
|
|
194
193
|
} else {
|
|
195
194
|
exec(toggleHandler({
|
|
196
|
-
type: '
|
|
195
|
+
type: 'image',
|
|
197
196
|
url: data.url,
|
|
198
197
|
description: data.description
|
|
199
198
|
}));
|
|
@@ -203,11 +202,33 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
203
202
|
});
|
|
204
203
|
}
|
|
205
204
|
},
|
|
206
|
-
|
|
205
|
+
inlineCode: {
|
|
207
206
|
children: /*#__PURE__*/React.createElement("div", {
|
|
208
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
207
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "inline-code"))
|
|
208
|
+
}),
|
|
209
|
+
tooltip: t('inlineCode'),
|
|
210
|
+
onClick: function onClick(exec) {
|
|
211
|
+
return exec(toggleHandler({
|
|
212
|
+
type: 'inlineCode'
|
|
213
|
+
}));
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
inlineMath: {
|
|
217
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
218
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "inline-math"))
|
|
209
219
|
}),
|
|
210
|
-
tooltip: '
|
|
220
|
+
tooltip: t('inlineMath'),
|
|
221
|
+
onClick: function onClick(exec) {
|
|
222
|
+
return exec(toggleHandler({
|
|
223
|
+
type: 'inlineMath'
|
|
224
|
+
}));
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
link: {
|
|
228
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
229
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "link"))
|
|
230
|
+
}),
|
|
231
|
+
tooltip: t('link'),
|
|
211
232
|
popoverRender: function popoverRender(exec, close) {
|
|
212
233
|
return /*#__PURE__*/React.createElement(FileInput, {
|
|
213
234
|
onCancel: close,
|
|
@@ -215,11 +236,11 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
215
236
|
if (data.type === 'file') {
|
|
216
237
|
onInsertFile === null || onInsertFile === void 0 ? void 0 : onInsertFile(data.file, {
|
|
217
238
|
description: data.description,
|
|
218
|
-
image:
|
|
239
|
+
image: false
|
|
219
240
|
});
|
|
220
241
|
} else {
|
|
221
242
|
exec(toggleHandler({
|
|
222
|
-
type: '
|
|
243
|
+
type: 'link',
|
|
223
244
|
url: data.url,
|
|
224
245
|
description: data.description
|
|
225
246
|
}));
|
|
@@ -229,47 +250,80 @@ export var getDefaultToolbarItemMap = function getDefaultToolbarItemMap(onInsert
|
|
|
229
250
|
});
|
|
230
251
|
}
|
|
231
252
|
},
|
|
232
|
-
|
|
253
|
+
math: {
|
|
233
254
|
children: /*#__PURE__*/React.createElement("div", {
|
|
234
|
-
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "
|
|
255
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "math"))
|
|
235
256
|
}),
|
|
236
|
-
tooltip: '
|
|
257
|
+
tooltip: t('math'),
|
|
237
258
|
onClick: function onClick(exec) {
|
|
238
259
|
return exec(toggleHandler({
|
|
239
|
-
type: '
|
|
260
|
+
type: 'math'
|
|
240
261
|
}));
|
|
241
262
|
}
|
|
242
263
|
},
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
264
|
+
redo: function redo(_ref2) {
|
|
265
|
+
var history = _ref2.history;
|
|
266
|
+
return {
|
|
267
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
268
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "redo"))
|
|
269
|
+
}),
|
|
270
|
+
disabled: history.index === history.states.length - 1,
|
|
271
|
+
tooltip: t('redo'),
|
|
272
|
+
onClick: function onClick(exec) {
|
|
273
|
+
return exec(redoHandler());
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
},
|
|
277
|
+
strong: {
|
|
278
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
279
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "strong"))
|
|
280
|
+
}),
|
|
281
|
+
tooltip: t('strong'),
|
|
246
282
|
onClick: function onClick(exec) {
|
|
247
283
|
return exec(toggleHandler({
|
|
248
|
-
type: '
|
|
284
|
+
type: 'strong'
|
|
249
285
|
}));
|
|
250
286
|
}
|
|
251
287
|
},
|
|
252
|
-
|
|
253
|
-
children:
|
|
254
|
-
|
|
288
|
+
thematicBreak: {
|
|
289
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
290
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "thematic-break"))
|
|
291
|
+
}),
|
|
292
|
+
tooltip: t('thematicBreak'),
|
|
255
293
|
onClick: function onClick(exec) {
|
|
256
294
|
return exec(toggleHandler({
|
|
257
|
-
type: '
|
|
295
|
+
type: 'thematicBreak'
|
|
258
296
|
}));
|
|
259
297
|
}
|
|
298
|
+
},
|
|
299
|
+
undo: function undo(_ref3) {
|
|
300
|
+
var history = _ref3.history;
|
|
301
|
+
return {
|
|
302
|
+
children: /*#__PURE__*/React.createElement("div", {
|
|
303
|
+
className: classNames("".concat(prefix, "icon"), "".concat(prefix, "undo"))
|
|
304
|
+
}),
|
|
305
|
+
disabled: !history.index,
|
|
306
|
+
tooltip: t('undo'),
|
|
307
|
+
onClick: function onClick(exec) {
|
|
308
|
+
return exec(undoHandler());
|
|
309
|
+
}
|
|
310
|
+
};
|
|
260
311
|
}
|
|
261
312
|
};
|
|
262
313
|
};
|
|
263
314
|
export var getDefaultToolbarItems = function getDefaultToolbarItems() {
|
|
264
|
-
return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote'], ['link', 'image'], ['inlineCode', 'code', 'inlineMath', 'math']];
|
|
315
|
+
return [['heading', 'strong', 'emphasis', 'delete'], ['thematicBreak', 'blockquote'], ['link', 'image'], ['inlineCode', 'code', 'inlineMath', 'math'], ['undo', 'redo']];
|
|
265
316
|
};
|
|
266
|
-
var Toolbar = function Toolbar(
|
|
267
|
-
var className =
|
|
268
|
-
style =
|
|
269
|
-
itemMap =
|
|
270
|
-
items =
|
|
271
|
-
exec =
|
|
317
|
+
var Toolbar = function Toolbar(_ref4) {
|
|
318
|
+
var className = _ref4.className,
|
|
319
|
+
style = _ref4.style,
|
|
320
|
+
itemMap = _ref4.itemMap,
|
|
321
|
+
items = _ref4.items,
|
|
322
|
+
exec = _ref4.exec;
|
|
272
323
|
var toolbarRef = useRef(null);
|
|
324
|
+
var ctx = exec(function (ctx) {
|
|
325
|
+
return ctx;
|
|
326
|
+
});
|
|
273
327
|
return /*#__PURE__*/React.createElement("div", {
|
|
274
328
|
ref: toolbarRef,
|
|
275
329
|
className: classNames("".concat(prefix, "toolbar"), className),
|
|
@@ -284,13 +338,16 @@ var Toolbar = function Toolbar(_ref2) {
|
|
|
284
338
|
if (!toolbarItem) {
|
|
285
339
|
return undefined;
|
|
286
340
|
}
|
|
287
|
-
var
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
341
|
+
var _ref5 = typeof toolbarItem === 'function' ? toolbarItem(ctx) : toolbarItem,
|
|
342
|
+
children = _ref5.children,
|
|
343
|
+
disabled = _ref5.disabled,
|
|
344
|
+
tooltip = _ref5.tooltip,
|
|
345
|
+
_popoverRender = _ref5.popoverRender,
|
|
346
|
+
_onClick2 = _ref5.onClick;
|
|
291
347
|
return /*#__PURE__*/React.createElement(Button, {
|
|
292
348
|
key: index,
|
|
293
349
|
toolbarRef: toolbarRef,
|
|
350
|
+
disabled: disabled,
|
|
294
351
|
tooltip: tooltip,
|
|
295
352
|
popoverRender: function popoverRender(close) {
|
|
296
353
|
return _popoverRender === null || _popoverRender === void 0 ? void 0 : _popoverRender(exec, close);
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export { default as XStarEditor, useEditorRef } from './XStarEditor';
|
|
2
|
-
export type { XStarEditorHandle, XStarEditorProps } from './XStarEditor';
|
|
3
|
-
export { default as XStarMdEditor, useMdEditorRef } from './XStarMdEditor';
|
|
4
|
-
export type { XStarMdEditorHandle, XStarMdEditorPlugin, XStarMdEditorProps, } from './XStarMdEditor';
|
|
5
|
-
export { default as XStarMdViewer, useMdViewerRef } from './XStarMdViewer';
|
|
6
|
-
export type { XStarMdViewerHandle, XStarMdViewerPlugin, XStarMdViewerProps, } from './XStarMdViewer';
|
|
7
1
|
export { createSelection, getRange } from './utils/container';
|
|
8
2
|
export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler, } from './utils/handler';
|
|
9
3
|
export type { Handler } from './utils/handler';
|
|
10
|
-
export { toHTML, toMarkdown } from './utils/markdown';
|
|
4
|
+
export { toHTML, toMarkdown, toText } from './utils/markdown';
|
|
5
|
+
export { default as XStarEditor, useEditorRef } from './x-star-editor';
|
|
6
|
+
export type { XStarEditorHandle, XStarEditorProps } from './x-star-editor';
|
|
7
|
+
export { default as XStarMdEditor, useMdEditorRef } from './x-star-md-editor';
|
|
8
|
+
export type { XStarMdEditorHandle, XStarMdEditorPlugin, XStarMdEditorProps, } from './x-star-md-editor';
|
|
9
|
+
export { default as XStarMdViewer, useMdViewerRef } from './x-star-md-viewer';
|
|
10
|
+
export type { XStarMdViewerHandle, XStarMdViewerPlugin, XStarMdViewerProps, } from './x-star-md-viewer';
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as XStarEditor, useEditorRef } from "./XStarEditor";
|
|
2
|
-
export { default as XStarMdEditor, useMdEditorRef } from "./XStarMdEditor";
|
|
3
|
-
export { default as XStarMdViewer, useMdViewerRef } from "./XStarMdViewer";
|
|
4
1
|
export { createSelection, getRange } from "./utils/container";
|
|
5
2
|
export { deleteHandler, insertHandler, redoHandler, selectHandler, setHandler, toggleHandler, undoHandler } from "./utils/handler";
|
|
6
|
-
export { toHTML, toMarkdown } from "./utils/markdown";
|
|
3
|
+
export { toHTML, toMarkdown, toText } from "./utils/markdown";
|
|
4
|
+
export { default as XStarEditor, useEditorRef } from "./x-star-editor";
|
|
5
|
+
export { default as XStarMdEditor, useMdEditorRef } from "./x-star-md-editor";
|
|
6
|
+
export { default as XStarMdViewer, useMdViewerRef } from "./x-star-md-viewer";
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
readonly fileInput: {
|
|
3
|
+
readonly cancel: "Cancel";
|
|
4
|
+
readonly chooseFile: "Choose File";
|
|
5
|
+
readonly confirm: "Confirm";
|
|
6
|
+
readonly description: "Description";
|
|
7
|
+
readonly file: "File";
|
|
8
|
+
readonly url: "URL";
|
|
9
|
+
};
|
|
10
|
+
readonly toolbarItem: {
|
|
11
|
+
readonly blockquote: "Blockquote";
|
|
12
|
+
readonly code: "Code Block";
|
|
13
|
+
readonly delete: "Strikethrough";
|
|
14
|
+
readonly emphasis: "Italic";
|
|
15
|
+
readonly heading: "Heading";
|
|
16
|
+
readonly image: "Image";
|
|
17
|
+
readonly inlineCode: "Inline Code";
|
|
18
|
+
readonly inlineMath: "Inline Formula";
|
|
19
|
+
readonly link: "Link";
|
|
20
|
+
readonly math: "Formula Block";
|
|
21
|
+
readonly redo: "Redo";
|
|
22
|
+
readonly strong: "Bold";
|
|
23
|
+
readonly thematicBreak: "Thematic Break";
|
|
24
|
+
readonly undo: "Undo";
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export default _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
fileInput: {
|
|
3
|
+
cancel: 'Cancel',
|
|
4
|
+
chooseFile: 'Choose File',
|
|
5
|
+
confirm: 'Confirm',
|
|
6
|
+
description: 'Description',
|
|
7
|
+
file: 'File',
|
|
8
|
+
url: 'URL'
|
|
9
|
+
},
|
|
10
|
+
toolbarItem: {
|
|
11
|
+
blockquote: 'Blockquote',
|
|
12
|
+
code: 'Code Block',
|
|
13
|
+
delete: 'Strikethrough',
|
|
14
|
+
emphasis: 'Italic',
|
|
15
|
+
heading: 'Heading',
|
|
16
|
+
image: 'Image',
|
|
17
|
+
inlineCode: 'Inline Code',
|
|
18
|
+
inlineMath: 'Inline Formula',
|
|
19
|
+
link: 'Link',
|
|
20
|
+
math: 'Formula Block',
|
|
21
|
+
redo: 'Redo',
|
|
22
|
+
strong: 'Bold',
|
|
23
|
+
thematicBreak: 'Thematic Break',
|
|
24
|
+
undo: 'Undo'
|
|
25
|
+
}
|
|
26
|
+
};
|