@zero-library/common 1.0.0 → 2.0.1
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/index.cjs.js +3852 -56
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.css +1844 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +30 -18
- package/dist/index.d.ts +30 -18
- package/dist/index.esm.js +3778 -6
- package/dist/index.esm.js.map +1 -1
- package/package.json +25 -5
package/dist/index.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var icons = require('@ant-design/icons');
|
|
5
|
-
var
|
|
5
|
+
var React16 = require('react');
|
|
6
6
|
var antd = require('antd');
|
|
7
7
|
var parse = require('html-react-parser');
|
|
8
8
|
var jsonrepair = require('jsonrepair');
|
|
9
9
|
var markdownit = require('markdown-it');
|
|
10
10
|
var container = require('markdown-it-container');
|
|
11
|
-
var core = require('@react-pdf-viewer/core');
|
|
11
|
+
var core$1 = require('@react-pdf-viewer/core');
|
|
12
12
|
var pageNavigation = require('@react-pdf-viewer/page-navigation');
|
|
13
13
|
var thumbnail = require('@react-pdf-viewer/thumbnail');
|
|
14
14
|
var zoom = require('@react-pdf-viewer/zoom');
|
|
@@ -24,10 +24,50 @@ var axios = require('axios');
|
|
|
24
24
|
var lib = require('antd/lib');
|
|
25
25
|
require('@react-pdf-viewer/thumbnail/lib/styles/index.css');
|
|
26
26
|
require('@react-pdf-viewer/zoom/lib/styles/index.css');
|
|
27
|
-
var
|
|
27
|
+
var classNames2 = require('classnames');
|
|
28
|
+
var react = require('@tiptap/react');
|
|
29
|
+
var tiptapMarkdown = require('tiptap-markdown');
|
|
30
|
+
var extensionHighlight = require('@tiptap/extension-highlight');
|
|
31
|
+
var extensionImage = require('@tiptap/extension-image');
|
|
32
|
+
var extensionSubscript = require('@tiptap/extension-subscript');
|
|
33
|
+
var extensionSuperscript = require('@tiptap/extension-superscript');
|
|
34
|
+
var extensionTaskItem = require('@tiptap/extension-task-item');
|
|
35
|
+
var extensionTaskList = require('@tiptap/extension-task-list');
|
|
36
|
+
var extensionTextAlign = require('@tiptap/extension-text-align');
|
|
37
|
+
var extensionTypography = require('@tiptap/extension-typography');
|
|
38
|
+
var extensionUnderline = require('@tiptap/extension-underline');
|
|
39
|
+
var starterKit = require('@tiptap/starter-kit');
|
|
40
|
+
var Table = require('@tiptap/extension-table');
|
|
41
|
+
var TableCell = require('@tiptap/extension-table-cell');
|
|
42
|
+
var TableHeader = require('@tiptap/extension-table-header');
|
|
43
|
+
var TableRow = require('@tiptap/extension-table-row');
|
|
44
|
+
var TiptapLink = require('@tiptap/extension-link');
|
|
45
|
+
var state = require('@tiptap/pm/state');
|
|
46
|
+
var view = require('@tiptap/pm/view');
|
|
47
|
+
var react$1 = require('@floating-ui/react');
|
|
48
|
+
var core = require('@tiptap/core');
|
|
28
49
|
|
|
29
50
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
30
51
|
|
|
52
|
+
function _interopNamespace(e) {
|
|
53
|
+
if (e && e.__esModule) return e;
|
|
54
|
+
var n = Object.create(null);
|
|
55
|
+
if (e) {
|
|
56
|
+
Object.keys(e).forEach(function (k) {
|
|
57
|
+
if (k !== 'default') {
|
|
58
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
59
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
60
|
+
enumerable: true,
|
|
61
|
+
get: function () { return e[k]; }
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
n.default = e;
|
|
67
|
+
return Object.freeze(n);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
var React16__namespace = /*#__PURE__*/_interopNamespace(React16);
|
|
31
71
|
var parse__default = /*#__PURE__*/_interopDefault(parse);
|
|
32
72
|
var markdownit__default = /*#__PURE__*/_interopDefault(markdownit);
|
|
33
73
|
var container__default = /*#__PURE__*/_interopDefault(container);
|
|
@@ -38,7 +78,12 @@ var AES__default = /*#__PURE__*/_interopDefault(AES);
|
|
|
38
78
|
var encUtf8__default = /*#__PURE__*/_interopDefault(encUtf8);
|
|
39
79
|
var Decimal__default = /*#__PURE__*/_interopDefault(Decimal);
|
|
40
80
|
var axios__default = /*#__PURE__*/_interopDefault(axios);
|
|
41
|
-
var
|
|
81
|
+
var classNames2__default = /*#__PURE__*/_interopDefault(classNames2);
|
|
82
|
+
var Table__default = /*#__PURE__*/_interopDefault(Table);
|
|
83
|
+
var TableCell__default = /*#__PURE__*/_interopDefault(TableCell);
|
|
84
|
+
var TableHeader__default = /*#__PURE__*/_interopDefault(TableHeader);
|
|
85
|
+
var TableRow__default = /*#__PURE__*/_interopDefault(TableRow);
|
|
86
|
+
var TiptapLink__default = /*#__PURE__*/_interopDefault(TiptapLink);
|
|
42
87
|
|
|
43
88
|
// src/components/File/styles.module.less
|
|
44
89
|
var styles_module_default = {
|
|
@@ -72,7 +117,7 @@ var themeConfig = {
|
|
|
72
117
|
};
|
|
73
118
|
var FileIcon_default = ({ suffix, fontSize = 22 }) => {
|
|
74
119
|
const styles = { fontSize, color: LgPrimaryColor };
|
|
75
|
-
const Icon =
|
|
120
|
+
const Icon = React16.useMemo(() => {
|
|
76
121
|
switch (suffix?.toUpperCase()) {
|
|
77
122
|
case "TXT":
|
|
78
123
|
return /* @__PURE__ */ jsxRuntime.jsx(icons.FileTextOutlined, {});
|
|
@@ -100,6 +145,9 @@ var FileIcon_default = ({ suffix, fontSize = 22 }) => {
|
|
|
100
145
|
return /* @__PURE__ */ jsxRuntime.jsx(icons.FileImageOutlined, {});
|
|
101
146
|
case "GIF":
|
|
102
147
|
return /* @__PURE__ */ jsxRuntime.jsx(icons.FileGifOutlined, {});
|
|
148
|
+
case "MD":
|
|
149
|
+
case "MARKDOWN":
|
|
150
|
+
return /* @__PURE__ */ jsxRuntime.jsx(icons.FileMarkdownOutlined, {});
|
|
103
151
|
case "ZIP":
|
|
104
152
|
case "RAR":
|
|
105
153
|
case "7Z":
|
|
@@ -123,18 +171,18 @@ var baseComponentMap = {
|
|
|
123
171
|
// renderMarkdown: () => import('@/components/RenderMarkdown')
|
|
124
172
|
};
|
|
125
173
|
var LazyComponent_default = ({ type, customComponents, ...rest }) => {
|
|
126
|
-
const componentMap =
|
|
174
|
+
const componentMap = React16.useMemo(() => {
|
|
127
175
|
return { ...baseComponentMap, ...customComponents };
|
|
128
176
|
}, [customComponents]);
|
|
129
|
-
const LazyComponent =
|
|
177
|
+
const LazyComponent = React16.useMemo(() => {
|
|
130
178
|
const loader = componentMap[type];
|
|
131
|
-
return loader ?
|
|
179
|
+
return loader ? React16.lazy(loader) : null;
|
|
132
180
|
}, [type, componentMap]);
|
|
133
181
|
if (!LazyComponent) return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
134
182
|
"\u672A\u77E5\u7C7B\u578B\uFF1A",
|
|
135
183
|
type
|
|
136
184
|
] });
|
|
137
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
185
|
+
return /* @__PURE__ */ jsxRuntime.jsx(React16.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "\u52A0\u8F7D\u4E2D..." }), children: /* @__PURE__ */ jsxRuntime.jsx(LazyComponent, { ...rest }) });
|
|
138
186
|
};
|
|
139
187
|
var md = markdownit__default.default({ html: true, breaks: true });
|
|
140
188
|
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
|
|
@@ -201,7 +249,7 @@ function highlightKeywords(html, keywords) {
|
|
|
201
249
|
return html.replace(regex, '<span class="cube-hl">$1</span>');
|
|
202
250
|
}
|
|
203
251
|
var RenderMarkdown_default = ({ content = "", searchValue, customComponents, onChange, onPartialChange }) => {
|
|
204
|
-
const reactContent =
|
|
252
|
+
const reactContent = React16.useMemo(() => {
|
|
205
253
|
if (!content) return null;
|
|
206
254
|
let fixedContent = content;
|
|
207
255
|
const openCount = (fixedContent.match(/:::alert\b/g) || []).length;
|
|
@@ -244,8 +292,8 @@ var RenderMarkdown_default = ({ content = "", searchValue, customComponents, onC
|
|
|
244
292
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ns-markdown", children: reactContent });
|
|
245
293
|
};
|
|
246
294
|
var MarkdownPreview_default = ({ fileUrl, searchValue }) => {
|
|
247
|
-
const [content, setContent] =
|
|
248
|
-
const [error, setError] =
|
|
295
|
+
const [content, setContent] = React16.useState("");
|
|
296
|
+
const [error, setError] = React16.useState("");
|
|
249
297
|
const fetchMarkdown = async () => {
|
|
250
298
|
const res = await fetch(fileUrl);
|
|
251
299
|
if (res.status !== 200) {
|
|
@@ -268,16 +316,16 @@ var MarkdownPreview_default = ({ fileUrl, searchValue }) => {
|
|
|
268
316
|
}
|
|
269
317
|
}
|
|
270
318
|
};
|
|
271
|
-
|
|
319
|
+
React16.useEffect(() => {
|
|
272
320
|
init();
|
|
273
321
|
}, [fileUrl]);
|
|
274
322
|
return error ? /* @__PURE__ */ jsxRuntime.jsx(antd.Result, { status: "error", title: error }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "height-full", children: /* @__PURE__ */ jsxRuntime.jsx(RenderMarkdown_default, { content, searchValue }) });
|
|
275
323
|
};
|
|
276
324
|
function createValtioContext() {
|
|
277
|
-
const Context =
|
|
325
|
+
const Context = React16.createContext(null);
|
|
278
326
|
const ValtioProvider = ({ store, children }) => /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value: store, children });
|
|
279
327
|
const useValtioStore = () => {
|
|
280
|
-
const store =
|
|
328
|
+
const store = React16.useContext(Context);
|
|
281
329
|
if (!store) throw new Error("useStore must be used within Provider");
|
|
282
330
|
return store;
|
|
283
331
|
};
|
|
@@ -395,8 +443,8 @@ var isBlob = (val) => {
|
|
|
395
443
|
|
|
396
444
|
// src/hooks/iframe/useIframeRelayBridge.ts
|
|
397
445
|
function useIframeRelayBridge(allowedOrigins = ["*"]) {
|
|
398
|
-
const handlers =
|
|
399
|
-
|
|
446
|
+
const handlers = React16.useRef({});
|
|
447
|
+
React16.useEffect(() => {
|
|
400
448
|
const onMessage = (evt) => {
|
|
401
449
|
const { data, source, origin } = evt;
|
|
402
450
|
if (!data || !isObject(data) || !data.type) return;
|
|
@@ -423,8 +471,8 @@ function useIframeRelayBridge(allowedOrigins = ["*"]) {
|
|
|
423
471
|
return { on, off };
|
|
424
472
|
}
|
|
425
473
|
function useDebounce(func, wait = 400) {
|
|
426
|
-
const { current } =
|
|
427
|
-
|
|
474
|
+
const { current } = React16.useRef({ func, timeOut: null });
|
|
475
|
+
React16.useEffect(() => {
|
|
428
476
|
current.func = func;
|
|
429
477
|
}, [func]);
|
|
430
478
|
let args;
|
|
@@ -456,7 +504,7 @@ function useDebounce(func, wait = 400) {
|
|
|
456
504
|
}
|
|
457
505
|
debounce.flush = flush;
|
|
458
506
|
debounce.cancel = cancel;
|
|
459
|
-
return
|
|
507
|
+
return React16.useCallback(debounce, []);
|
|
460
508
|
}
|
|
461
509
|
|
|
462
510
|
// src/utils/common.ts
|
|
@@ -658,9 +706,9 @@ var getWebSocketUrl = (path, customHost) => {
|
|
|
658
706
|
|
|
659
707
|
// src/hooks/useDeepEffect.ts
|
|
660
708
|
function useDeepEffect(effect, deps) {
|
|
661
|
-
const prevDepsRef =
|
|
709
|
+
const prevDepsRef = React16.useRef();
|
|
662
710
|
const depsChanged = !prevDepsRef.current || deps.length !== prevDepsRef.current.length || deps.some((dep, i) => !deepEqual(dep, prevDepsRef.current[i]));
|
|
663
|
-
|
|
711
|
+
React16.useEffect(() => {
|
|
664
712
|
if (depsChanged) {
|
|
665
713
|
prevDepsRef.current = deps;
|
|
666
714
|
return effect();
|
|
@@ -668,8 +716,8 @@ function useDeepEffect(effect, deps) {
|
|
|
668
716
|
}, [depsChanged]);
|
|
669
717
|
}
|
|
670
718
|
function useRefState(init) {
|
|
671
|
-
const [state, setState] =
|
|
672
|
-
const stateRef =
|
|
719
|
+
const [state, setState] = React16.useState(init);
|
|
720
|
+
const stateRef = React16.useRef(init);
|
|
673
721
|
const setProxy = (newVal) => {
|
|
674
722
|
stateRef.current = newVal;
|
|
675
723
|
setState(newVal);
|
|
@@ -678,8 +726,8 @@ function useRefState(init) {
|
|
|
678
726
|
return [state, setProxy, getState];
|
|
679
727
|
}
|
|
680
728
|
var useSyncInput = (storeValue, setStoreValue) => {
|
|
681
|
-
const [inputValue, setInputValue] =
|
|
682
|
-
|
|
729
|
+
const [inputValue, setInputValue] = React16.useState(storeValue);
|
|
730
|
+
React16.useEffect(() => {
|
|
683
731
|
if (storeValue !== inputValue) {
|
|
684
732
|
setInputValue(storeValue);
|
|
685
733
|
}
|
|
@@ -694,8 +742,8 @@ var useSyncInput = (storeValue, setStoreValue) => {
|
|
|
694
742
|
};
|
|
695
743
|
};
|
|
696
744
|
function useThrottle(func, wait) {
|
|
697
|
-
const { current } =
|
|
698
|
-
|
|
745
|
+
const { current } = React16.useRef({ func, timeOut: null });
|
|
746
|
+
React16.useEffect(() => {
|
|
699
747
|
current.func = func;
|
|
700
748
|
}, [func]);
|
|
701
749
|
let args;
|
|
@@ -726,7 +774,7 @@ function useThrottle(func, wait) {
|
|
|
726
774
|
}
|
|
727
775
|
throttle.flush = flush;
|
|
728
776
|
throttle.cancel = cancel;
|
|
729
|
-
return
|
|
777
|
+
return React16.useCallback(throttle, []);
|
|
730
778
|
}
|
|
731
779
|
dayjs__default.default.extend(relativeTime__default.default);
|
|
732
780
|
var DateFormatType = "YYYY-MM-DD HH:mm:ss";
|
|
@@ -1025,14 +1073,14 @@ var useWebSocket = ({
|
|
|
1025
1073
|
isReconnect = true
|
|
1026
1074
|
// 默认开启重连机制
|
|
1027
1075
|
}) => {
|
|
1028
|
-
const socketRef =
|
|
1029
|
-
const heartbeatIntervalRef =
|
|
1030
|
-
const [socketReadyState, setSocketReadyState] =
|
|
1031
|
-
const reconnectIntervalRef =
|
|
1032
|
-
const reconnectAttempts =
|
|
1033
|
-
const documentHide =
|
|
1034
|
-
const isDestroy =
|
|
1035
|
-
const onMessageEctype =
|
|
1076
|
+
const socketRef = React16.useRef(null);
|
|
1077
|
+
const heartbeatIntervalRef = React16.useRef(null);
|
|
1078
|
+
const [socketReadyState, setSocketReadyState] = React16.useState(null);
|
|
1079
|
+
const reconnectIntervalRef = React16.useRef(null);
|
|
1080
|
+
const reconnectAttempts = React16.useRef(0);
|
|
1081
|
+
const documentHide = React16.useRef(document.visibilityState === "hidden");
|
|
1082
|
+
const isDestroy = React16.useRef(false);
|
|
1083
|
+
const onMessageEctype = React16.useCallback(onMessage, [onMessage]);
|
|
1036
1084
|
const startHeartbeat = (currentSocket) => {
|
|
1037
1085
|
if (!clientHeartbeat) {
|
|
1038
1086
|
return;
|
|
@@ -1118,7 +1166,7 @@ var useWebSocket = ({
|
|
|
1118
1166
|
tryReconnect();
|
|
1119
1167
|
}
|
|
1120
1168
|
};
|
|
1121
|
-
|
|
1169
|
+
React16.useEffect(() => {
|
|
1122
1170
|
isDestroy.current = false;
|
|
1123
1171
|
createAndListenWebSocket();
|
|
1124
1172
|
window.addEventListener("visibilitychange", handleVisibilityChange);
|
|
@@ -1161,7 +1209,7 @@ var ProtectedView = ({
|
|
|
1161
1209
|
});
|
|
1162
1210
|
};
|
|
1163
1211
|
return /* @__PURE__ */ jsxRuntime.jsx(antd.Flex, { justify: "center", align: "center", className: "height-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: 300 }, children: [
|
|
1164
|
-
passwordStatus === core.PasswordStatus.WrongPassword && /* @__PURE__ */ jsxRuntime.jsx(antd.Alert, { message: "\u5BC6\u7801\u65E0\u6548\u3002\u8BF7\u518D\u8BD5\u4E00\u6B21\uFF01", type: "error" }),
|
|
1212
|
+
passwordStatus === core$1.PasswordStatus.WrongPassword && /* @__PURE__ */ jsxRuntime.jsx(antd.Alert, { message: "\u5BC6\u7801\u65E0\u6548\u3002\u8BF7\u518D\u8BD5\u4E00\u6B21\uFF01", type: "error" }),
|
|
1165
1213
|
/* @__PURE__ */ jsxRuntime.jsxs(antd.Form, { form, size: "large", className: "m-t-24", children: [
|
|
1166
1214
|
/* @__PURE__ */ jsxRuntime.jsx(antd.Form.Item, { name: "password", rules: [{ required: true, message: "\u8BF7\u8F93\u5165\u5BC6\u7801" }], children: /* @__PURE__ */ jsxRuntime.jsx(antd.Input.Password, { autoComplete: "new-password", placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801" }) }),
|
|
1167
1215
|
/* @__PURE__ */ jsxRuntime.jsx(antd.Flex, { justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { type: "primary", onClick: onSubmit, children: "\u63D0 \u4EA4" }) })
|
|
@@ -1169,12 +1217,12 @@ var ProtectedView = ({
|
|
|
1169
1217
|
] }) });
|
|
1170
1218
|
};
|
|
1171
1219
|
var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumbnails = true, onSetPassword, onSetPageNo }) => {
|
|
1172
|
-
const embedRef =
|
|
1173
|
-
const [sizes, setSizes] =
|
|
1220
|
+
const embedRef = React16.useRef(null);
|
|
1221
|
+
const [sizes, setSizes] = React16.useState([0]);
|
|
1174
1222
|
const [, setDocLoaded, getDocLoaded] = useRefState(false);
|
|
1175
1223
|
const [currentPage, setCurrentPage, getCurrentPage] = useRefState(void 0);
|
|
1176
|
-
const [temporaryPassword, setTemporaryPassword] =
|
|
1177
|
-
const jumpToPageNo =
|
|
1224
|
+
const [temporaryPassword, setTemporaryPassword] = React16.useState("");
|
|
1225
|
+
const jumpToPageNo = React16.useRef();
|
|
1178
1226
|
const onVerifyPasswordEnd = (password2) => {
|
|
1179
1227
|
setTemporaryPassword(password2);
|
|
1180
1228
|
};
|
|
@@ -1186,7 +1234,7 @@ var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumb
|
|
|
1186
1234
|
const zoomPluginInstance = zoom.zoomPlugin();
|
|
1187
1235
|
const { Thumbnails } = thumbnailPluginInstance;
|
|
1188
1236
|
const { ZoomIn, ZoomOut } = zoomPluginInstance;
|
|
1189
|
-
const
|
|
1237
|
+
const Toolbar2 = () => /* @__PURE__ */ jsxRuntime.jsxs(antd.Flex, { gap: 6, align: "center", className: styles_module_default.pdfToolbar, children: [
|
|
1190
1238
|
/* @__PURE__ */ jsxRuntime.jsx(ZoomIn, {}),
|
|
1191
1239
|
/* @__PURE__ */ jsxRuntime.jsx(ZoomOut, {})
|
|
1192
1240
|
] });
|
|
@@ -1207,12 +1255,12 @@ var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumb
|
|
|
1207
1255
|
setTemporaryPassword("");
|
|
1208
1256
|
}
|
|
1209
1257
|
};
|
|
1210
|
-
|
|
1258
|
+
React16.useEffect(() => {
|
|
1211
1259
|
setCurrentPage(void 0);
|
|
1212
1260
|
setDocLoaded(false);
|
|
1213
1261
|
setSizes([0]);
|
|
1214
1262
|
}, [fileUrl]);
|
|
1215
|
-
|
|
1263
|
+
React16.useEffect(() => {
|
|
1216
1264
|
setTimeout(() => {
|
|
1217
1265
|
onJumpToPage(pageNo);
|
|
1218
1266
|
}, 0);
|
|
@@ -1248,7 +1296,7 @@ var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumb
|
|
|
1248
1296
|
}
|
|
1249
1297
|
setCurrentPage(newCurrentPage);
|
|
1250
1298
|
};
|
|
1251
|
-
|
|
1299
|
+
React16.useEffect(() => {
|
|
1252
1300
|
if (!(embedRef.current && isNumber(currentPage))) return;
|
|
1253
1301
|
setTimeout(() => {
|
|
1254
1302
|
const pages = embedRef.current?.querySelectorAll(".rpv-core__viewer .rpv-core__page-layer");
|
|
@@ -1262,11 +1310,11 @@ var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumb
|
|
|
1262
1310
|
}, 500);
|
|
1263
1311
|
onSetPageNo?.(currentPage + 1);
|
|
1264
1312
|
}, [currentPage]);
|
|
1265
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: embedRef, className: styles_module_default.nsPreviewPdf, children: /* @__PURE__ */ jsxRuntime.jsx(core.Worker, { workerUrl: `/uc/pdf/pdf.worker.min.js`, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Splitter, { onResize: setSizes, children: [
|
|
1313
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: embedRef, className: styles_module_default.nsPreviewPdf, children: /* @__PURE__ */ jsxRuntime.jsx(core$1.Worker, { workerUrl: `/uc/pdf/pdf.worker.min.js`, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Splitter, { onResize: setSizes, children: [
|
|
1266
1314
|
isHasThumbnails && /* @__PURE__ */ jsxRuntime.jsx(antd.Splitter.Panel, { resizable: false, size: sizes[0], min: 250, max: 500, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsx(Thumbnails, {}) }),
|
|
1267
1315
|
/* @__PURE__ */ jsxRuntime.jsx(antd.Splitter.Panel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "height-full", children: [
|
|
1268
1316
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1269
|
-
core.Viewer,
|
|
1317
|
+
core$1.Viewer,
|
|
1270
1318
|
{
|
|
1271
1319
|
localization: zh_CN__default.default,
|
|
1272
1320
|
withCredentials: true,
|
|
@@ -1310,12 +1358,12 @@ var PdfPreview_default = ({ password, fileUrl, pageNo = 1, scale = 1, isHasThumb
|
|
|
1310
1358
|
renderProtectedView: (renderProps) => /* @__PURE__ */ jsxRuntime.jsx(ProtectedView, { onVerifyPasswordEnd, ...renderProps })
|
|
1311
1359
|
}
|
|
1312
1360
|
),
|
|
1313
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1361
|
+
/* @__PURE__ */ jsxRuntime.jsx(Toolbar2, {})
|
|
1314
1362
|
] }) })
|
|
1315
1363
|
] }) }) });
|
|
1316
1364
|
};
|
|
1317
1365
|
var FilePreview_default = ({ suffix, fileUrl, pdfParams, password, searchValue }) => {
|
|
1318
|
-
const Preview =
|
|
1366
|
+
const Preview = React16.useMemo(() => {
|
|
1319
1367
|
if (!fileUrl) {
|
|
1320
1368
|
return /* @__PURE__ */ jsxRuntime.jsx(antd.Empty, {});
|
|
1321
1369
|
}
|
|
@@ -1359,20 +1407,3767 @@ var FilePreviewDrawer_default = ({ open, fileUrl, suffix, title = "\u6587\u4EF6\
|
|
|
1359
1407
|
var styles_module_default2 = {
|
|
1360
1408
|
iframe: "styles_module_iframe"
|
|
1361
1409
|
};
|
|
1362
|
-
var Iframe_default =
|
|
1363
|
-
const [loading, setLoading] =
|
|
1364
|
-
const finalSrc =
|
|
1410
|
+
var Iframe_default = React16.forwardRef(({ id, src, className, onLoad }, ref) => {
|
|
1411
|
+
const [loading, setLoading] = React16.useState(false);
|
|
1412
|
+
const finalSrc = React16.useMemo(() => {
|
|
1365
1413
|
return buildUrlParams({ v: Date.now() }, addUrlLastSlash(getUrlMainSource(src, location.href)));
|
|
1366
1414
|
}, [src]);
|
|
1367
1415
|
const onHandleLoad = () => {
|
|
1368
1416
|
setLoading(false);
|
|
1369
1417
|
onLoad?.();
|
|
1370
1418
|
};
|
|
1371
|
-
|
|
1419
|
+
React16.useEffect(() => {
|
|
1372
1420
|
setLoading(true);
|
|
1373
1421
|
}, [src]);
|
|
1374
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { spinning: loading, wrapperClassName: "full-spin", tip: "\u52A0\u8F7D\u4E2D...", children: /* @__PURE__ */ jsxRuntime.jsx("iframe", { id, ref, src: finalSrc, className:
|
|
1422
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { spinning: loading, wrapperClassName: "full-spin", tip: "\u52A0\u8F7D\u4E2D...", children: /* @__PURE__ */ jsxRuntime.jsx("iframe", { id, ref, src: finalSrc, className: classNames2__default.default(styles_module_default2.iframe, className), onLoad: onHandleLoad }) }) });
|
|
1423
|
+
});
|
|
1424
|
+
var Link = TiptapLink__default.default.extend({
|
|
1425
|
+
inclusive: false,
|
|
1426
|
+
parseHTML() {
|
|
1427
|
+
return [
|
|
1428
|
+
{
|
|
1429
|
+
tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'
|
|
1430
|
+
}
|
|
1431
|
+
];
|
|
1432
|
+
},
|
|
1433
|
+
addProseMirrorPlugins() {
|
|
1434
|
+
const { editor } = this;
|
|
1435
|
+
return [
|
|
1436
|
+
...this.parent?.() || [],
|
|
1437
|
+
new state.Plugin({
|
|
1438
|
+
props: {
|
|
1439
|
+
handleKeyDown: (_, event) => {
|
|
1440
|
+
const { selection } = editor.state;
|
|
1441
|
+
if (event.key === "Escape" && selection.empty !== true) {
|
|
1442
|
+
editor.commands.focus(selection.to, { scrollIntoView: false });
|
|
1443
|
+
}
|
|
1444
|
+
return false;
|
|
1445
|
+
},
|
|
1446
|
+
handleClick(view, pos) {
|
|
1447
|
+
const { schema, doc, tr } = view.state;
|
|
1448
|
+
let range;
|
|
1449
|
+
if (schema.marks.link) {
|
|
1450
|
+
range = react.getMarkRange(doc.resolve(pos), schema.marks.link);
|
|
1451
|
+
}
|
|
1452
|
+
if (!range) {
|
|
1453
|
+
return;
|
|
1454
|
+
}
|
|
1455
|
+
const { from, to } = range;
|
|
1456
|
+
const start = Math.min(from, to);
|
|
1457
|
+
const end = Math.max(from, to);
|
|
1458
|
+
if (pos < start || pos > end) {
|
|
1459
|
+
return;
|
|
1460
|
+
}
|
|
1461
|
+
const $start = doc.resolve(start);
|
|
1462
|
+
const $end = doc.resolve(end);
|
|
1463
|
+
const transaction = tr.setSelection(new state.TextSelection($start, $end));
|
|
1464
|
+
view.dispatch(transaction);
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
})
|
|
1468
|
+
];
|
|
1469
|
+
}
|
|
1470
|
+
});
|
|
1471
|
+
var Selection = react.Extension.create({
|
|
1472
|
+
name: "selection",
|
|
1473
|
+
addProseMirrorPlugins() {
|
|
1474
|
+
const { editor } = this;
|
|
1475
|
+
return [
|
|
1476
|
+
new state.Plugin({
|
|
1477
|
+
key: new state.PluginKey("selection"),
|
|
1478
|
+
props: {
|
|
1479
|
+
decorations(state) {
|
|
1480
|
+
if (state.selection.empty) {
|
|
1481
|
+
return null;
|
|
1482
|
+
}
|
|
1483
|
+
if (editor.isFocused === true || !editor.isEditable) {
|
|
1484
|
+
return null;
|
|
1485
|
+
}
|
|
1486
|
+
if (react.isNodeSelection(state.selection)) {
|
|
1487
|
+
return null;
|
|
1488
|
+
}
|
|
1489
|
+
return view.DecorationSet.create(state.doc, [
|
|
1490
|
+
view.Decoration.inline(state.selection.from, state.selection.to, {
|
|
1491
|
+
class: "selection"
|
|
1492
|
+
})
|
|
1493
|
+
]);
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
})
|
|
1497
|
+
];
|
|
1498
|
+
}
|
|
1499
|
+
});
|
|
1500
|
+
function nodeEqualsType({ types, node }) {
|
|
1501
|
+
if (!node) return false;
|
|
1502
|
+
if (Array.isArray(types)) {
|
|
1503
|
+
return types.includes(node.type);
|
|
1504
|
+
}
|
|
1505
|
+
return node.type === types;
|
|
1506
|
+
}
|
|
1507
|
+
var TrailingNode = react.Extension.create({
|
|
1508
|
+
name: "trailingNode",
|
|
1509
|
+
addOptions() {
|
|
1510
|
+
return {
|
|
1511
|
+
node: "paragraph",
|
|
1512
|
+
notAfter: ["paragraph"]
|
|
1513
|
+
};
|
|
1514
|
+
},
|
|
1515
|
+
addProseMirrorPlugins() {
|
|
1516
|
+
const plugin = new state.PluginKey(this.name);
|
|
1517
|
+
const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => this.options.notAfter.includes(node.name));
|
|
1518
|
+
return [
|
|
1519
|
+
new state.Plugin({
|
|
1520
|
+
key: plugin,
|
|
1521
|
+
appendTransaction: (_, __, state) => {
|
|
1522
|
+
const { doc, tr, schema } = state;
|
|
1523
|
+
const shouldInsertNodeAtEnd = plugin.getState(state);
|
|
1524
|
+
const endPosition = doc.content.size;
|
|
1525
|
+
const type = schema.nodes[this.options.node];
|
|
1526
|
+
if (!shouldInsertNodeAtEnd) {
|
|
1527
|
+
return null;
|
|
1528
|
+
}
|
|
1529
|
+
if (type) {
|
|
1530
|
+
return tr.insert(endPosition, type.create());
|
|
1531
|
+
}
|
|
1532
|
+
return null;
|
|
1533
|
+
},
|
|
1534
|
+
state: {
|
|
1535
|
+
init: (_, state) => {
|
|
1536
|
+
const lastNode = state.tr.doc.lastChild;
|
|
1537
|
+
return !nodeEqualsType({ node: lastNode, types: disabledNodes });
|
|
1538
|
+
},
|
|
1539
|
+
apply: (tr, value) => {
|
|
1540
|
+
if (!tr.docChanged) {
|
|
1541
|
+
return value;
|
|
1542
|
+
}
|
|
1543
|
+
const lastNode = tr.doc.lastChild;
|
|
1544
|
+
return !nodeEqualsType({ node: lastNode, types: disabledNodes });
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
})
|
|
1548
|
+
];
|
|
1549
|
+
}
|
|
1550
|
+
});
|
|
1551
|
+
function useTooltip({
|
|
1552
|
+
initialOpen = false,
|
|
1553
|
+
placement = "top",
|
|
1554
|
+
open: controlledOpen,
|
|
1555
|
+
onOpenChange: setControlledOpen,
|
|
1556
|
+
delay = 600,
|
|
1557
|
+
closeDelay = 0
|
|
1558
|
+
} = {}) {
|
|
1559
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React16__namespace.useState(initialOpen);
|
|
1560
|
+
const open = controlledOpen ?? uncontrolledOpen;
|
|
1561
|
+
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
1562
|
+
const data = react$1.useFloating({
|
|
1563
|
+
placement,
|
|
1564
|
+
open,
|
|
1565
|
+
onOpenChange: setOpen,
|
|
1566
|
+
whileElementsMounted: react$1.autoUpdate,
|
|
1567
|
+
middleware: [
|
|
1568
|
+
react$1.offset(4),
|
|
1569
|
+
react$1.flip({
|
|
1570
|
+
crossAxis: placement.includes("-"),
|
|
1571
|
+
fallbackAxisSideDirection: "start",
|
|
1572
|
+
padding: 4
|
|
1573
|
+
}),
|
|
1574
|
+
react$1.shift({ padding: 4 })
|
|
1575
|
+
]
|
|
1576
|
+
});
|
|
1577
|
+
const context = data.context;
|
|
1578
|
+
const hover = react$1.useHover(context, {
|
|
1579
|
+
mouseOnly: true,
|
|
1580
|
+
move: false,
|
|
1581
|
+
restMs: delay,
|
|
1582
|
+
enabled: controlledOpen == null,
|
|
1583
|
+
delay: {
|
|
1584
|
+
close: closeDelay
|
|
1585
|
+
}
|
|
1586
|
+
});
|
|
1587
|
+
const focus = react$1.useFocus(context, {
|
|
1588
|
+
enabled: controlledOpen == null
|
|
1589
|
+
});
|
|
1590
|
+
const dismiss = react$1.useDismiss(context);
|
|
1591
|
+
const role = react$1.useRole(context, { role: "tooltip" });
|
|
1592
|
+
const interactions = react$1.useInteractions([hover, focus, dismiss, role]);
|
|
1593
|
+
return React16__namespace.useMemo(
|
|
1594
|
+
() => ({
|
|
1595
|
+
open,
|
|
1596
|
+
setOpen,
|
|
1597
|
+
...interactions,
|
|
1598
|
+
...data
|
|
1599
|
+
}),
|
|
1600
|
+
[open, setOpen, interactions, data]
|
|
1601
|
+
);
|
|
1602
|
+
}
|
|
1603
|
+
var TooltipContext = React16__namespace.createContext(null);
|
|
1604
|
+
function useTooltipContext() {
|
|
1605
|
+
const context = React16__namespace.useContext(TooltipContext);
|
|
1606
|
+
if (context == null) {
|
|
1607
|
+
throw new Error("Tooltip components must be wrapped in <TooltipProvider />");
|
|
1608
|
+
}
|
|
1609
|
+
return context;
|
|
1610
|
+
}
|
|
1611
|
+
function Tooltip({ children, ...props }) {
|
|
1612
|
+
const tooltip = useTooltip(props);
|
|
1613
|
+
if (!props.useDelayGroup) {
|
|
1614
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value: tooltip, children });
|
|
1615
|
+
}
|
|
1616
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingDelayGroup, { delay: { open: props.delay ?? 0, close: props.closeDelay ?? 0 }, timeoutMs: props.timeout, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value: tooltip, children }) });
|
|
1617
|
+
}
|
|
1618
|
+
var TooltipTrigger = React16__namespace.forwardRef(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
|
|
1619
|
+
const context = useTooltipContext();
|
|
1620
|
+
const childrenRef = React16__namespace.isValidElement(children) ? parseInt(React16__namespace.version, 10) >= 19 ? (
|
|
1621
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1622
|
+
children.props.ref
|
|
1623
|
+
) : (
|
|
1624
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1625
|
+
children.ref
|
|
1626
|
+
) : void 0;
|
|
1627
|
+
const ref = react$1.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
|
|
1628
|
+
if (asChild && React16__namespace.isValidElement(children)) {
|
|
1629
|
+
const dataAttributes = {
|
|
1630
|
+
"data-tooltip-state": context.open ? "open" : "closed"
|
|
1631
|
+
};
|
|
1632
|
+
return React16__namespace.cloneElement(
|
|
1633
|
+
children,
|
|
1634
|
+
context.getReferenceProps({
|
|
1635
|
+
ref,
|
|
1636
|
+
...props,
|
|
1637
|
+
...typeof children.props === "object" ? children.props : {},
|
|
1638
|
+
...dataAttributes
|
|
1639
|
+
})
|
|
1640
|
+
);
|
|
1641
|
+
}
|
|
1642
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, "data-tooltip-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
|
|
1643
|
+
});
|
|
1644
|
+
var TooltipContent = React16__namespace.forwardRef(function TooltipContent2({ style, children, portal = true, portalProps = {}, ...props }, propRef) {
|
|
1645
|
+
const context = useTooltipContext();
|
|
1646
|
+
const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
|
|
1647
|
+
if (!context.open) return null;
|
|
1648
|
+
const content = /* @__PURE__ */ jsxRuntime.jsx(
|
|
1649
|
+
"div",
|
|
1650
|
+
{
|
|
1651
|
+
ref,
|
|
1652
|
+
style: {
|
|
1653
|
+
...context.floatingStyles,
|
|
1654
|
+
...style
|
|
1655
|
+
},
|
|
1656
|
+
...context.getFloatingProps(props),
|
|
1657
|
+
className: "tiptap-tooltip",
|
|
1658
|
+
children
|
|
1659
|
+
}
|
|
1660
|
+
);
|
|
1661
|
+
if (portal) {
|
|
1662
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { ...portalProps, children: content });
|
|
1663
|
+
}
|
|
1664
|
+
return content;
|
|
1665
|
+
});
|
|
1666
|
+
Tooltip.displayName = "Tooltip";
|
|
1667
|
+
TooltipTrigger.displayName = "TooltipTrigger";
|
|
1668
|
+
TooltipContent.displayName = "TooltipContent";
|
|
1669
|
+
var MAC_SYMBOLS = {
|
|
1670
|
+
ctrl: "\u2318",
|
|
1671
|
+
alt: "\u2325",
|
|
1672
|
+
shift: "\u21E7"
|
|
1673
|
+
};
|
|
1674
|
+
var formatShortcutKey = (key, isMac) => {
|
|
1675
|
+
if (isMac) {
|
|
1676
|
+
const lowerKey = key.toLowerCase();
|
|
1677
|
+
return MAC_SYMBOLS[lowerKey] || key.toUpperCase();
|
|
1678
|
+
}
|
|
1679
|
+
return key.charAt(0).toUpperCase() + key.slice(1);
|
|
1680
|
+
};
|
|
1681
|
+
var parseShortcutKeys = (shortcutKeys, isMac) => {
|
|
1682
|
+
if (!shortcutKeys) return [];
|
|
1683
|
+
return shortcutKeys.split("-").map((key) => key.trim()).map((key) => formatShortcutKey(key, isMac));
|
|
1684
|
+
};
|
|
1685
|
+
var ShortcutDisplay = ({ shortcuts }) => {
|
|
1686
|
+
if (shortcuts.length === 0) return null;
|
|
1687
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: shortcuts.map((key, index) => /* @__PURE__ */ jsxRuntime.jsxs(React16__namespace.Fragment, { children: [
|
|
1688
|
+
index > 0 && /* @__PURE__ */ jsxRuntime.jsx("kbd", { children: "+" }),
|
|
1689
|
+
/* @__PURE__ */ jsxRuntime.jsx("kbd", { children: key })
|
|
1690
|
+
] }, index)) });
|
|
1691
|
+
};
|
|
1692
|
+
var Button2 = React16__namespace.forwardRef(
|
|
1693
|
+
({ className = "", children, tooltip, showTooltip = true, shortcutKeys, "aria-label": ariaLabel, ...props }, ref) => {
|
|
1694
|
+
const isMac = React16__namespace.useMemo(() => typeof navigator !== "undefined" && navigator.platform.toLowerCase().includes("mac"), []);
|
|
1695
|
+
const shortcuts = React16__namespace.useMemo(() => parseShortcutKeys(shortcutKeys, isMac), [shortcutKeys, isMac]);
|
|
1696
|
+
if (!tooltip || !showTooltip) {
|
|
1697
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", { className: `tiptap-button ${className}`.trim(), ref, "aria-label": ariaLabel, ...props, children });
|
|
1698
|
+
}
|
|
1699
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { delay: 200, children: [
|
|
1700
|
+
/* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { className: `tiptap-button ${className}`.trim(), ref, "aria-label": ariaLabel, ...props, children }),
|
|
1701
|
+
/* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
|
|
1702
|
+
tooltip,
|
|
1703
|
+
/* @__PURE__ */ jsxRuntime.jsx(ShortcutDisplay, { shortcuts })
|
|
1704
|
+
] })
|
|
1705
|
+
] });
|
|
1706
|
+
}
|
|
1707
|
+
);
|
|
1708
|
+
Button2.displayName = "Button";
|
|
1709
|
+
var Spacer = React16__namespace.forwardRef(
|
|
1710
|
+
({ orientation = "horizontal", size, className = "", style = {}, ...props }, ref) => {
|
|
1711
|
+
const computedStyle = {
|
|
1712
|
+
...style,
|
|
1713
|
+
...orientation === "horizontal" && !size && { flex: 1 },
|
|
1714
|
+
...size && {
|
|
1715
|
+
width: orientation === "vertical" ? "1px" : size,
|
|
1716
|
+
height: orientation === "horizontal" ? "1px" : size
|
|
1717
|
+
}
|
|
1718
|
+
};
|
|
1719
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, className, style: computedStyle });
|
|
1720
|
+
}
|
|
1721
|
+
);
|
|
1722
|
+
Spacer.displayName = "Spacer";
|
|
1723
|
+
var Separator = React16__namespace.forwardRef(
|
|
1724
|
+
({ decorative, orientation = "vertical", className = "", ...divProps }, ref) => {
|
|
1725
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
1726
|
+
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
1727
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tiptap-separator ${className}`.trim(), "data-orientation": orientation, ...semanticProps, ...divProps, ref });
|
|
1728
|
+
}
|
|
1729
|
+
);
|
|
1730
|
+
Separator.displayName = "Separator";
|
|
1731
|
+
var mergeRefs = (refs) => {
|
|
1732
|
+
return (value) => {
|
|
1733
|
+
refs.forEach((ref) => {
|
|
1734
|
+
if (typeof ref === "function") {
|
|
1735
|
+
ref(value);
|
|
1736
|
+
} else if (ref != null) {
|
|
1737
|
+
ref.current = value;
|
|
1738
|
+
}
|
|
1739
|
+
});
|
|
1740
|
+
};
|
|
1741
|
+
};
|
|
1742
|
+
var useObserveVisibility = (ref, callback) => {
|
|
1743
|
+
React16__namespace.useEffect(() => {
|
|
1744
|
+
const element = ref.current;
|
|
1745
|
+
if (!element) return;
|
|
1746
|
+
let isMounted = true;
|
|
1747
|
+
if (isMounted) {
|
|
1748
|
+
requestAnimationFrame(callback);
|
|
1749
|
+
}
|
|
1750
|
+
const observer = new MutationObserver(() => {
|
|
1751
|
+
if (isMounted) {
|
|
1752
|
+
requestAnimationFrame(callback);
|
|
1753
|
+
}
|
|
1754
|
+
});
|
|
1755
|
+
observer.observe(element, {
|
|
1756
|
+
childList: true,
|
|
1757
|
+
subtree: true,
|
|
1758
|
+
attributes: true
|
|
1759
|
+
});
|
|
1760
|
+
return () => {
|
|
1761
|
+
isMounted = false;
|
|
1762
|
+
observer.disconnect();
|
|
1763
|
+
};
|
|
1764
|
+
}, [ref, callback]);
|
|
1765
|
+
};
|
|
1766
|
+
var useToolbarKeyboardNav = (toolbarRef) => {
|
|
1767
|
+
React16__namespace.useEffect(() => {
|
|
1768
|
+
const toolbar = toolbarRef.current;
|
|
1769
|
+
if (!toolbar) return;
|
|
1770
|
+
const getFocusableElements = () => Array.from(toolbar.querySelectorAll('button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'));
|
|
1771
|
+
const navigateToIndex = (e, targetIndex, elements) => {
|
|
1772
|
+
e.preventDefault();
|
|
1773
|
+
let nextIndex = targetIndex;
|
|
1774
|
+
if (nextIndex >= elements.length) {
|
|
1775
|
+
nextIndex = 0;
|
|
1776
|
+
} else if (nextIndex < 0) {
|
|
1777
|
+
nextIndex = elements.length - 1;
|
|
1778
|
+
}
|
|
1779
|
+
elements[nextIndex]?.focus();
|
|
1780
|
+
};
|
|
1781
|
+
const handleKeyDown = (e) => {
|
|
1782
|
+
const focusableElements = getFocusableElements();
|
|
1783
|
+
if (!focusableElements.length) return;
|
|
1784
|
+
const currentElement = document.activeElement;
|
|
1785
|
+
const currentIndex = focusableElements.indexOf(currentElement);
|
|
1786
|
+
if (!toolbar.contains(currentElement)) return;
|
|
1787
|
+
const keyActions = {
|
|
1788
|
+
ArrowRight: () => navigateToIndex(e, currentIndex + 1, focusableElements),
|
|
1789
|
+
ArrowDown: () => navigateToIndex(e, currentIndex + 1, focusableElements),
|
|
1790
|
+
ArrowLeft: () => navigateToIndex(e, currentIndex - 1, focusableElements),
|
|
1791
|
+
ArrowUp: () => navigateToIndex(e, currentIndex - 1, focusableElements),
|
|
1792
|
+
Home: () => navigateToIndex(e, 0, focusableElements),
|
|
1793
|
+
End: () => navigateToIndex(e, focusableElements.length - 1, focusableElements)
|
|
1794
|
+
};
|
|
1795
|
+
const action = keyActions[e.key];
|
|
1796
|
+
if (action) {
|
|
1797
|
+
action();
|
|
1798
|
+
}
|
|
1799
|
+
};
|
|
1800
|
+
toolbar.addEventListener("keydown", handleKeyDown);
|
|
1801
|
+
return () => toolbar.removeEventListener("keydown", handleKeyDown);
|
|
1802
|
+
}, [toolbarRef]);
|
|
1803
|
+
};
|
|
1804
|
+
var useToolbarVisibility = (ref) => {
|
|
1805
|
+
const [isVisible, setIsVisible] = React16__namespace.useState(true);
|
|
1806
|
+
const isMountedRef = React16__namespace.useRef(false);
|
|
1807
|
+
React16__namespace.useEffect(() => {
|
|
1808
|
+
isMountedRef.current = true;
|
|
1809
|
+
return () => {
|
|
1810
|
+
isMountedRef.current = false;
|
|
1811
|
+
};
|
|
1812
|
+
}, []);
|
|
1813
|
+
const checkVisibility = React16__namespace.useCallback(() => {
|
|
1814
|
+
if (!isMountedRef.current) return;
|
|
1815
|
+
const toolbar = ref.current;
|
|
1816
|
+
if (!toolbar) return;
|
|
1817
|
+
const hasVisibleChildren = Array.from(toolbar.children).some((child) => {
|
|
1818
|
+
if (!(child instanceof HTMLElement)) return false;
|
|
1819
|
+
if (child.getAttribute("role") === "group") {
|
|
1820
|
+
return child.children.length > 0;
|
|
1821
|
+
}
|
|
1822
|
+
return false;
|
|
1823
|
+
});
|
|
1824
|
+
setIsVisible(hasVisibleChildren);
|
|
1825
|
+
}, [ref]);
|
|
1826
|
+
useObserveVisibility(ref, checkVisibility);
|
|
1827
|
+
return isVisible;
|
|
1828
|
+
};
|
|
1829
|
+
var useGroupVisibility = (ref) => {
|
|
1830
|
+
const [isVisible, setIsVisible] = React16__namespace.useState(true);
|
|
1831
|
+
const isMountedRef = React16__namespace.useRef(false);
|
|
1832
|
+
React16__namespace.useEffect(() => {
|
|
1833
|
+
isMountedRef.current = true;
|
|
1834
|
+
return () => {
|
|
1835
|
+
isMountedRef.current = false;
|
|
1836
|
+
};
|
|
1837
|
+
}, []);
|
|
1838
|
+
const checkVisibility = React16__namespace.useCallback(() => {
|
|
1839
|
+
if (!isMountedRef.current) return;
|
|
1840
|
+
const group = ref.current;
|
|
1841
|
+
if (!group) return;
|
|
1842
|
+
const hasVisibleChildren = Array.from(group.children).some((child) => {
|
|
1843
|
+
if (!(child instanceof HTMLElement)) return false;
|
|
1844
|
+
return true;
|
|
1845
|
+
});
|
|
1846
|
+
setIsVisible(hasVisibleChildren);
|
|
1847
|
+
}, [ref]);
|
|
1848
|
+
useObserveVisibility(ref, checkVisibility);
|
|
1849
|
+
return isVisible;
|
|
1850
|
+
};
|
|
1851
|
+
var useSeparatorVisibility = (ref) => {
|
|
1852
|
+
const [isVisible, setIsVisible] = React16__namespace.useState(true);
|
|
1853
|
+
const isMountedRef = React16__namespace.useRef(false);
|
|
1854
|
+
React16__namespace.useEffect(() => {
|
|
1855
|
+
isMountedRef.current = true;
|
|
1856
|
+
return () => {
|
|
1857
|
+
isMountedRef.current = false;
|
|
1858
|
+
};
|
|
1859
|
+
}, []);
|
|
1860
|
+
const checkVisibility = React16__namespace.useCallback(() => {
|
|
1861
|
+
if (!isMountedRef.current) return;
|
|
1862
|
+
const separator = ref.current;
|
|
1863
|
+
if (!separator) return;
|
|
1864
|
+
const prevSibling = separator.previousElementSibling;
|
|
1865
|
+
const nextSibling = separator.nextElementSibling;
|
|
1866
|
+
if (!prevSibling || !nextSibling) {
|
|
1867
|
+
setIsVisible(false);
|
|
1868
|
+
return;
|
|
1869
|
+
}
|
|
1870
|
+
const areBothGroups = prevSibling.getAttribute("role") === "group" && nextSibling.getAttribute("role") === "group";
|
|
1871
|
+
const haveBothChildren = prevSibling.children.length > 0 && nextSibling.children.length > 0;
|
|
1872
|
+
setIsVisible(areBothGroups && haveBothChildren);
|
|
1873
|
+
}, [ref]);
|
|
1874
|
+
useObserveVisibility(ref, checkVisibility);
|
|
1875
|
+
return isVisible;
|
|
1876
|
+
};
|
|
1877
|
+
var Toolbar = React16__namespace.forwardRef(({ children, className, variant = "fixed", ...props }, ref) => {
|
|
1878
|
+
const toolbarRef = React16__namespace.useRef(null);
|
|
1879
|
+
const isVisible = useToolbarVisibility(toolbarRef);
|
|
1880
|
+
useToolbarKeyboardNav(toolbarRef);
|
|
1881
|
+
if (!isVisible) return null;
|
|
1882
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1883
|
+
"div",
|
|
1884
|
+
{
|
|
1885
|
+
ref: mergeRefs([toolbarRef, ref]),
|
|
1886
|
+
role: "toolbar",
|
|
1887
|
+
"aria-label": "toolbar",
|
|
1888
|
+
"data-variant": variant,
|
|
1889
|
+
className: `tiptap-toolbar ${className || ""}`,
|
|
1890
|
+
...props,
|
|
1891
|
+
children
|
|
1892
|
+
}
|
|
1893
|
+
);
|
|
1894
|
+
});
|
|
1895
|
+
Toolbar.displayName = "Toolbar";
|
|
1896
|
+
var ToolbarGroup = React16__namespace.forwardRef(({ children, className, ...props }, ref) => {
|
|
1897
|
+
const groupRef = React16__namespace.useRef(null);
|
|
1898
|
+
const isVisible = useGroupVisibility(groupRef);
|
|
1899
|
+
if (!isVisible) return null;
|
|
1900
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergeRefs([groupRef, ref]), role: "group", className: `tiptap-toolbar-group ${className || ""}`, ...props, children });
|
|
1901
|
+
});
|
|
1902
|
+
ToolbarGroup.displayName = "ToolbarGroup";
|
|
1903
|
+
var ToolbarSeparator = React16__namespace.forwardRef(({ ...props }, ref) => {
|
|
1904
|
+
const separatorRef = React16__namespace.useRef(null);
|
|
1905
|
+
const isVisible = useSeparatorVisibility(separatorRef);
|
|
1906
|
+
if (!isVisible) return null;
|
|
1907
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Separator, { ref: mergeRefs([separatorRef, ref]), orientation: "vertical", decorative: true, ...props });
|
|
1908
|
+
});
|
|
1909
|
+
ToolbarSeparator.displayName = "ToolbarSeparator";
|
|
1910
|
+
function useTiptapEditor(providedEditor) {
|
|
1911
|
+
const { editor: coreEditor } = react.useCurrentEditor();
|
|
1912
|
+
return React16__namespace.useMemo(() => providedEditor || coreEditor, [providedEditor, coreEditor]);
|
|
1913
|
+
}
|
|
1914
|
+
var ChevronDownIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
1915
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1916
|
+
"path",
|
|
1917
|
+
{
|
|
1918
|
+
fillRule: "evenodd",
|
|
1919
|
+
clipRule: "evenodd",
|
|
1920
|
+
d: "M5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289Z",
|
|
1921
|
+
fill: "currentColor"
|
|
1922
|
+
}
|
|
1923
|
+
) });
|
|
1924
|
+
});
|
|
1925
|
+
ChevronDownIcon.displayName = "ChevronDownIcon";
|
|
1926
|
+
var HeadingIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
1927
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1928
|
+
"path",
|
|
1929
|
+
{
|
|
1930
|
+
d: "M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z",
|
|
1931
|
+
fill: "currentColor"
|
|
1932
|
+
}
|
|
1933
|
+
) });
|
|
1934
|
+
});
|
|
1935
|
+
HeadingIcon.displayName = "HeadingIcon";
|
|
1936
|
+
var isMarkInSchema = (markName, editor) => {
|
|
1937
|
+
if (!editor?.schema) return false;
|
|
1938
|
+
return editor.schema.spec.marks.get(markName) !== void 0;
|
|
1939
|
+
};
|
|
1940
|
+
var isNodeInSchema = (nodeName, editor) => {
|
|
1941
|
+
if (!editor?.schema) return false;
|
|
1942
|
+
return editor.schema.spec.nodes.get(nodeName) !== void 0;
|
|
1943
|
+
};
|
|
1944
|
+
function isEmptyNode(node) {
|
|
1945
|
+
return !!node && node.content.size === 0;
|
|
1946
|
+
}
|
|
1947
|
+
function findNodePosition(props) {
|
|
1948
|
+
const { editor, node, nodePos } = props;
|
|
1949
|
+
if (!editor || !editor.state?.doc) return null;
|
|
1950
|
+
const hasValidNode = node !== void 0 && node !== null;
|
|
1951
|
+
const hasValidPos = nodePos !== void 0 && nodePos !== null;
|
|
1952
|
+
if (!hasValidNode && !hasValidPos) {
|
|
1953
|
+
return null;
|
|
1954
|
+
}
|
|
1955
|
+
if (hasValidPos) {
|
|
1956
|
+
try {
|
|
1957
|
+
const nodeAtPos = editor.state.doc.nodeAt(nodePos);
|
|
1958
|
+
if (nodeAtPos) {
|
|
1959
|
+
return { pos: nodePos, node: nodeAtPos };
|
|
1960
|
+
}
|
|
1961
|
+
} catch (error) {
|
|
1962
|
+
console.error("Error checking node at position:", error);
|
|
1963
|
+
return null;
|
|
1964
|
+
}
|
|
1965
|
+
}
|
|
1966
|
+
let foundPos = -1;
|
|
1967
|
+
let foundNode = null;
|
|
1968
|
+
editor.state.doc.descendants((currentNode, pos) => {
|
|
1969
|
+
if (currentNode === node) {
|
|
1970
|
+
foundPos = pos;
|
|
1971
|
+
foundNode = currentNode;
|
|
1972
|
+
return false;
|
|
1973
|
+
}
|
|
1974
|
+
return true;
|
|
1975
|
+
});
|
|
1976
|
+
return foundPos !== -1 && foundNode !== null ? { pos: foundPos, node: foundNode } : null;
|
|
1977
|
+
}
|
|
1978
|
+
var HeadingFiveIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
1979
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
1980
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1981
|
+
"path",
|
|
1982
|
+
{
|
|
1983
|
+
d: "M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z",
|
|
1984
|
+
fill: "currentColor"
|
|
1985
|
+
}
|
|
1986
|
+
),
|
|
1987
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1988
|
+
"path",
|
|
1989
|
+
{
|
|
1990
|
+
d: "M16 10C16 9.44772 16.4477 9 17 9H21C21.5523 9 22 9.44772 22 10C22 10.5523 21.5523 11 21 11H18V12H18.3C20.2754 12 22 13.4739 22 15.5C22 17.5261 20.2754 19 18.3 19C17.6457 19 17.0925 18.8643 16.5528 18.5944C16.0588 18.3474 15.8586 17.7468 16.1055 17.2528C16.3525 16.7588 16.9532 16.5586 17.4472 16.8056C17.7074 16.9357 17.9542 17 18.3 17C19.3246 17 20 16.2739 20 15.5C20 14.7261 19.3246 14 18.3 14H17C16.4477 14 16 13.5523 16 13L16 12.9928V10Z",
|
|
1991
|
+
fill: "currentColor"
|
|
1992
|
+
}
|
|
1993
|
+
)
|
|
1994
|
+
] });
|
|
1995
|
+
});
|
|
1996
|
+
HeadingFiveIcon.displayName = "HeadingFiveIcon";
|
|
1997
|
+
var HeadingFourIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
1998
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
1999
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2000
|
+
"path",
|
|
2001
|
+
{
|
|
2002
|
+
d: "M4 5C4.55228 5 5 5.44772 5 6V11H11V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H5V18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5Z",
|
|
2003
|
+
fill: "currentColor"
|
|
2004
|
+
}
|
|
2005
|
+
),
|
|
2006
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2007
|
+
"path",
|
|
2008
|
+
{
|
|
2009
|
+
d: "M17 9C17.5523 9 18 9.44772 18 10V13H20V10C20 9.44772 20.4477 9 21 9C21.5523 9 22 9.44772 22 10V18C22 18.5523 21.5523 19 21 19C20.4477 19 20 18.5523 20 18V15H17C16.4477 15 16 14.5523 16 14V10C16 9.44772 16.4477 9 17 9Z",
|
|
2010
|
+
fill: "currentColor"
|
|
2011
|
+
}
|
|
2012
|
+
)
|
|
2013
|
+
] });
|
|
2014
|
+
});
|
|
2015
|
+
HeadingFourIcon.displayName = "HeadingFourIcon";
|
|
2016
|
+
var HeadingOneIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2017
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2018
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2019
|
+
"path",
|
|
2020
|
+
{
|
|
2021
|
+
d: "M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z",
|
|
2022
|
+
fill: "currentColor"
|
|
2023
|
+
}
|
|
2024
|
+
),
|
|
2025
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2026
|
+
"path",
|
|
2027
|
+
{
|
|
2028
|
+
d: "M21.0001 10C21.0001 9.63121 20.7971 9.29235 20.472 9.11833C20.1468 8.94431 19.7523 8.96338 19.4454 9.16795L16.4454 11.168C15.9859 11.4743 15.8617 12.0952 16.1681 12.5547C16.4744 13.0142 17.0953 13.1384 17.5548 12.8321L19.0001 11.8685V18C19.0001 18.5523 19.4478 19 20.0001 19C20.5524 19 21.0001 18.5523 21.0001 18V10Z",
|
|
2029
|
+
fill: "currentColor"
|
|
2030
|
+
}
|
|
2031
|
+
)
|
|
2032
|
+
] });
|
|
2033
|
+
});
|
|
2034
|
+
HeadingOneIcon.displayName = "HeadingOneIcon";
|
|
2035
|
+
var HeadingSixIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2036
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2037
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2038
|
+
"path",
|
|
2039
|
+
{
|
|
2040
|
+
d: "M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z",
|
|
2041
|
+
fill: "currentColor"
|
|
2042
|
+
}
|
|
2043
|
+
),
|
|
2044
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2045
|
+
"path",
|
|
2046
|
+
{
|
|
2047
|
+
fillRule: "evenodd",
|
|
2048
|
+
clipRule: "evenodd",
|
|
2049
|
+
d: "M20.7071 9.29289C21.0976 9.68342 21.0976 10.3166 20.7071 10.7071C19.8392 11.575 19.2179 12.2949 18.7889 13.0073C18.8587 13.0025 18.929 13 19 13C20.6569 13 22 14.3431 22 16C22 17.6569 20.6569 19 19 19C17.3431 19 16 17.6569 16 16C16 14.6007 16.2837 13.4368 16.8676 12.3419C17.4384 11.2717 18.2728 10.3129 19.2929 9.29289C19.6834 8.90237 20.3166 8.90237 20.7071 9.29289ZM19 17C18.4477 17 18 16.5523 18 16C18 15.4477 18.4477 15 19 15C19.5523 15 20 15.4477 20 16C20 16.5523 19.5523 17 19 17Z",
|
|
2050
|
+
fill: "currentColor"
|
|
2051
|
+
}
|
|
2052
|
+
)
|
|
2053
|
+
] });
|
|
2054
|
+
});
|
|
2055
|
+
HeadingSixIcon.displayName = "HeadingSixIcon";
|
|
2056
|
+
var HeadingThreeIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2057
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2058
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2059
|
+
"path",
|
|
2060
|
+
{
|
|
2061
|
+
d: "M4 5C4.55228 5 5 5.44772 5 6V11H11V6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H5V18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5Z",
|
|
2062
|
+
fill: "currentColor"
|
|
2063
|
+
}
|
|
2064
|
+
),
|
|
2065
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2066
|
+
"path",
|
|
2067
|
+
{
|
|
2068
|
+
fillRule: "evenodd",
|
|
2069
|
+
clipRule: "evenodd",
|
|
2070
|
+
d: "M19.4608 11.2169C19.1135 11.0531 18.5876 11.0204 18.0069 11.3619C17.5309 11.642 16.918 11.4831 16.638 11.007C16.358 10.531 16.5169 9.91809 16.9929 9.63807C18.1123 8.97962 19.3364 8.94691 20.314 9.40808C21.2839 9.86558 21.9999 10.818 21.9999 12C21.9999 12.7957 21.6838 13.5587 21.1212 14.1213C20.5586 14.6839 19.7956 15 18.9999 15C18.4476 15 17.9999 14.5523 17.9999 14C17.9999 13.4477 18.4476 13 18.9999 13C19.2651 13 19.5195 12.8947 19.707 12.7071C19.8946 12.5196 19.9999 12.2652 19.9999 12C19.9999 11.6821 19.8159 11.3844 19.4608 11.2169Z",
|
|
2071
|
+
fill: "currentColor"
|
|
2072
|
+
}
|
|
2073
|
+
),
|
|
2074
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2075
|
+
"path",
|
|
2076
|
+
{
|
|
2077
|
+
fillRule: "evenodd",
|
|
2078
|
+
clipRule: "evenodd",
|
|
2079
|
+
d: "M18.0001 14C18.0001 13.4477 18.4478 13 19.0001 13C19.7957 13 20.5588 13.3161 21.1214 13.8787C21.684 14.4413 22.0001 15.2043 22.0001 16C22.0001 17.2853 21.2767 18.3971 20.1604 18.8994C19.0257 19.41 17.642 19.2315 16.4001 18.3C15.9582 17.9686 15.8687 17.3418 16.2001 16.9C16.5314 16.4582 17.1582 16.3686 17.6001 16.7C18.3581 17.2685 18.9744 17.24 19.3397 17.0756C19.7234 16.9029 20.0001 16.5147 20.0001 16C20.0001 15.7348 19.8947 15.4804 19.7072 15.2929C19.5196 15.1054 19.2653 15 19.0001 15C18.4478 15 18.0001 14.5523 18.0001 14Z",
|
|
2080
|
+
fill: "currentColor"
|
|
2081
|
+
}
|
|
2082
|
+
)
|
|
2083
|
+
] });
|
|
2084
|
+
});
|
|
2085
|
+
HeadingThreeIcon.displayName = "HeadingThreeIcon";
|
|
2086
|
+
var HeadingTwoIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2087
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
2088
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2089
|
+
"path",
|
|
2090
|
+
{
|
|
2091
|
+
d: "M5 6C5 5.44772 4.55228 5 4 5C3.44772 5 3 5.44772 3 6V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V11H5V6Z",
|
|
2092
|
+
fill: "currentColor"
|
|
2093
|
+
}
|
|
2094
|
+
),
|
|
2095
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2096
|
+
"path",
|
|
2097
|
+
{
|
|
2098
|
+
d: "M22.0001 12C22.0001 10.7611 21.1663 9.79297 20.0663 9.42632C18.9547 9.05578 17.6171 9.28724 16.4001 10.2C15.9582 10.5314 15.8687 11.1582 16.2001 11.6C16.5314 12.0418 17.1582 12.1314 17.6001 11.8C18.383 11.2128 19.0455 11.1942 19.4338 11.3237C19.8339 11.457 20.0001 11.7389 20.0001 12C20.0001 12.4839 19.8554 12.7379 19.6537 12.9481C19.4275 13.1837 19.1378 13.363 18.7055 13.6307C18.6313 13.6767 18.553 13.7252 18.4701 13.777C17.9572 14.0975 17.3128 14.5261 16.8163 15.2087C16.3007 15.9177 16.0001 16.8183 16.0001 18C16.0001 18.5523 16.4478 19 17.0001 19H21.0001C21.5523 19 22.0001 18.5523 22.0001 18C22.0001 17.4477 21.5523 17 21.0001 17H18.131C18.21 16.742 18.3176 16.5448 18.4338 16.385C18.6873 16.0364 19.0429 15.7775 19.5301 15.473C19.5898 15.4357 19.6536 15.3966 19.7205 15.3556C20.139 15.0992 20.6783 14.7687 21.0964 14.3332C21.6447 13.7621 22.0001 13.0161 22.0001 12Z",
|
|
2099
|
+
fill: "currentColor"
|
|
2100
|
+
}
|
|
2101
|
+
)
|
|
2102
|
+
] });
|
|
2103
|
+
});
|
|
2104
|
+
HeadingTwoIcon.displayName = "HeadingTwoIcon";
|
|
2105
|
+
var headingIcons = {
|
|
2106
|
+
1: HeadingOneIcon,
|
|
2107
|
+
2: HeadingTwoIcon,
|
|
2108
|
+
3: HeadingThreeIcon,
|
|
2109
|
+
4: HeadingFourIcon,
|
|
2110
|
+
5: HeadingFiveIcon,
|
|
2111
|
+
6: HeadingSixIcon
|
|
2112
|
+
};
|
|
2113
|
+
var headingShortcutKeys = {
|
|
2114
|
+
1: "Ctrl-Alt-1",
|
|
2115
|
+
2: "Ctrl-Alt-2",
|
|
2116
|
+
3: "Ctrl-Alt-3",
|
|
2117
|
+
4: "Ctrl-Alt-4",
|
|
2118
|
+
5: "Ctrl-Alt-5",
|
|
2119
|
+
6: "Ctrl-Alt-6"
|
|
2120
|
+
};
|
|
2121
|
+
function canToggleHeading(editor, level) {
|
|
2122
|
+
if (!editor) return false;
|
|
2123
|
+
try {
|
|
2124
|
+
return editor.can().toggleNode("heading", "paragraph", { level });
|
|
2125
|
+
} catch {
|
|
2126
|
+
return false;
|
|
2127
|
+
}
|
|
2128
|
+
}
|
|
2129
|
+
function isHeadingActive(editor, level) {
|
|
2130
|
+
if (!editor) return false;
|
|
2131
|
+
return editor.isActive("heading", { level });
|
|
2132
|
+
}
|
|
2133
|
+
function toggleHeading(editor, level) {
|
|
2134
|
+
if (!editor) return;
|
|
2135
|
+
if (editor.isActive("heading", { level })) {
|
|
2136
|
+
editor.chain().focus().setNode("paragraph").run();
|
|
2137
|
+
} else {
|
|
2138
|
+
editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
|
|
2139
|
+
}
|
|
2140
|
+
}
|
|
2141
|
+
function isHeadingButtonDisabled(editor, level, userDisabled = false) {
|
|
2142
|
+
if (!editor) return true;
|
|
2143
|
+
if (userDisabled) return true;
|
|
2144
|
+
if (!canToggleHeading(editor, level)) return true;
|
|
2145
|
+
return false;
|
|
2146
|
+
}
|
|
2147
|
+
function shouldShowHeadingButton(params) {
|
|
2148
|
+
const { editor, hideWhenUnavailable, headingInSchema } = params;
|
|
2149
|
+
if (!headingInSchema || !editor) {
|
|
2150
|
+
return false;
|
|
2151
|
+
}
|
|
2152
|
+
if (hideWhenUnavailable) {
|
|
2153
|
+
if (react.isNodeSelection(editor.state.selection)) {
|
|
2154
|
+
return false;
|
|
2155
|
+
}
|
|
2156
|
+
}
|
|
2157
|
+
return true;
|
|
2158
|
+
}
|
|
2159
|
+
function getFormattedHeadingName(level) {
|
|
2160
|
+
return `\u6807\u9898 ${level}`;
|
|
2161
|
+
}
|
|
2162
|
+
function useHeadingState(editor, level, disabled = false) {
|
|
2163
|
+
const headingInSchema = isNodeInSchema("heading", editor);
|
|
2164
|
+
const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
|
|
2165
|
+
const isActive = isHeadingActive(editor, level);
|
|
2166
|
+
const Icon = headingIcons[level];
|
|
2167
|
+
const shortcutKey = headingShortcutKeys[level];
|
|
2168
|
+
const formattedName = getFormattedHeadingName(level);
|
|
2169
|
+
return {
|
|
2170
|
+
headingInSchema,
|
|
2171
|
+
isDisabled,
|
|
2172
|
+
isActive,
|
|
2173
|
+
Icon,
|
|
2174
|
+
shortcutKey,
|
|
2175
|
+
formattedName
|
|
2176
|
+
};
|
|
2177
|
+
}
|
|
2178
|
+
var HeadingButton = React16__namespace.forwardRef(
|
|
2179
|
+
({ editor: providedEditor, level, text, hideWhenUnavailable = false, className = "", disabled, onClick, children, ...buttonProps }, ref) => {
|
|
2180
|
+
const editor = useTiptapEditor(providedEditor);
|
|
2181
|
+
const { headingInSchema, isDisabled, isActive, Icon, shortcutKey, formattedName } = useHeadingState(editor, level, disabled);
|
|
2182
|
+
const handleClick = React16__namespace.useCallback(
|
|
2183
|
+
(e) => {
|
|
2184
|
+
onClick?.(e);
|
|
2185
|
+
if (!e.defaultPrevented && !isDisabled && editor) {
|
|
2186
|
+
toggleHeading(editor, level);
|
|
2187
|
+
}
|
|
2188
|
+
},
|
|
2189
|
+
[onClick, isDisabled, editor, level]
|
|
2190
|
+
);
|
|
2191
|
+
const show = React16__namespace.useMemo(() => {
|
|
2192
|
+
return shouldShowHeadingButton({
|
|
2193
|
+
editor,
|
|
2194
|
+
hideWhenUnavailable,
|
|
2195
|
+
headingInSchema
|
|
2196
|
+
});
|
|
2197
|
+
}, [editor, level, hideWhenUnavailable, headingInSchema]);
|
|
2198
|
+
if (!show || !editor || !editor.isEditable) {
|
|
2199
|
+
return null;
|
|
2200
|
+
}
|
|
2201
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2202
|
+
Button2,
|
|
2203
|
+
{
|
|
2204
|
+
type: "button",
|
|
2205
|
+
className: className.trim(),
|
|
2206
|
+
disabled: isDisabled,
|
|
2207
|
+
"data-style": "ghost",
|
|
2208
|
+
"data-active-state": isActive ? "on" : "off",
|
|
2209
|
+
"data-disabled": isDisabled,
|
|
2210
|
+
role: "button",
|
|
2211
|
+
tabIndex: -1,
|
|
2212
|
+
"aria-label": formattedName,
|
|
2213
|
+
"aria-pressed": isActive,
|
|
2214
|
+
tooltip: formattedName,
|
|
2215
|
+
shortcutKeys: shortcutKey,
|
|
2216
|
+
onClick: handleClick,
|
|
2217
|
+
...buttonProps,
|
|
2218
|
+
ref,
|
|
2219
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2220
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
2221
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
2222
|
+
] })
|
|
2223
|
+
}
|
|
2224
|
+
);
|
|
2225
|
+
}
|
|
2226
|
+
);
|
|
2227
|
+
HeadingButton.displayName = "HeadingButton";
|
|
2228
|
+
var DropdownMenuContext = React16__namespace.createContext(null);
|
|
2229
|
+
function useDropdownMenuContext() {
|
|
2230
|
+
const context = React16__namespace.useContext(DropdownMenuContext);
|
|
2231
|
+
if (!context) {
|
|
2232
|
+
throw new Error("DropdownMenu components must be wrapped in <DropdownMenu />");
|
|
2233
|
+
}
|
|
2234
|
+
return context;
|
|
2235
|
+
}
|
|
2236
|
+
function useDropdownMenu({
|
|
2237
|
+
initialOpen = false,
|
|
2238
|
+
open: controlledOpen,
|
|
2239
|
+
onOpenChange: setControlledOpen,
|
|
2240
|
+
side = "bottom",
|
|
2241
|
+
align = "start"
|
|
2242
|
+
}) {
|
|
2243
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React16__namespace.useState(initialOpen);
|
|
2244
|
+
const [currentPlacement, setCurrentPlacement] = React16__namespace.useState(`${side}-${align}`);
|
|
2245
|
+
const [activeIndex, setActiveIndex] = React16__namespace.useState(null);
|
|
2246
|
+
const open = controlledOpen ?? uncontrolledOpen;
|
|
2247
|
+
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
2248
|
+
const elementsRef = React16__namespace.useRef([]);
|
|
2249
|
+
const labelsRef = React16__namespace.useRef([]);
|
|
2250
|
+
const floating = react$1.useFloating({
|
|
2251
|
+
open,
|
|
2252
|
+
onOpenChange: setOpen,
|
|
2253
|
+
placement: currentPlacement,
|
|
2254
|
+
middleware: [react$1.offset({ mainAxis: 4 }), react$1.flip(), react$1.shift({ padding: 4 })],
|
|
2255
|
+
whileElementsMounted: react$1.autoUpdate
|
|
2256
|
+
});
|
|
2257
|
+
const { context } = floating;
|
|
2258
|
+
const interactions = react$1.useInteractions([
|
|
2259
|
+
react$1.useClick(context, {
|
|
2260
|
+
event: "mousedown",
|
|
2261
|
+
toggle: true,
|
|
2262
|
+
ignoreMouse: false
|
|
2263
|
+
}),
|
|
2264
|
+
react$1.useRole(context, { role: "menu" }),
|
|
2265
|
+
react$1.useDismiss(context, {
|
|
2266
|
+
outsidePress: true,
|
|
2267
|
+
outsidePressEvent: "mousedown"
|
|
2268
|
+
}),
|
|
2269
|
+
react$1.useListNavigation(context, {
|
|
2270
|
+
listRef: elementsRef,
|
|
2271
|
+
activeIndex,
|
|
2272
|
+
onNavigate: setActiveIndex,
|
|
2273
|
+
loop: true
|
|
2274
|
+
}),
|
|
2275
|
+
react$1.useTypeahead(context, {
|
|
2276
|
+
listRef: labelsRef,
|
|
2277
|
+
onMatch: open ? setActiveIndex : void 0,
|
|
2278
|
+
activeIndex
|
|
2279
|
+
})
|
|
2280
|
+
]);
|
|
2281
|
+
const updatePosition = React16__namespace.useCallback((newSide, newAlign) => {
|
|
2282
|
+
setCurrentPlacement(`${newSide}-${newAlign}`);
|
|
2283
|
+
}, []);
|
|
2284
|
+
return React16__namespace.useMemo(
|
|
2285
|
+
() => ({
|
|
2286
|
+
open,
|
|
2287
|
+
setOpen,
|
|
2288
|
+
activeIndex,
|
|
2289
|
+
setActiveIndex,
|
|
2290
|
+
elementsRef,
|
|
2291
|
+
labelsRef,
|
|
2292
|
+
updatePosition,
|
|
2293
|
+
...interactions,
|
|
2294
|
+
...floating
|
|
2295
|
+
}),
|
|
2296
|
+
[open, setOpen, activeIndex, interactions, floating, updatePosition]
|
|
2297
|
+
);
|
|
2298
|
+
}
|
|
2299
|
+
function DropdownMenu({ children, ...options }) {
|
|
2300
|
+
const dropdown = useDropdownMenu(options);
|
|
2301
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext.Provider, { value: dropdown, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingList, { elementsRef: dropdown.elementsRef, labelsRef: dropdown.labelsRef, children }) });
|
|
2302
|
+
}
|
|
2303
|
+
var DropdownMenuTrigger = React16__namespace.forwardRef(
|
|
2304
|
+
({ children, asChild = false, ...props }, propRef) => {
|
|
2305
|
+
const context = useDropdownMenuContext();
|
|
2306
|
+
const childrenRef = React16__namespace.isValidElement(children) ? parseInt(React16__namespace.version, 10) >= 19 ? (
|
|
2307
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2308
|
+
children.props.ref
|
|
2309
|
+
) : (
|
|
2310
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2311
|
+
children.ref
|
|
2312
|
+
) : void 0;
|
|
2313
|
+
const ref = react$1.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
|
|
2314
|
+
if (asChild && React16__namespace.isValidElement(children)) {
|
|
2315
|
+
const dataAttributes = {
|
|
2316
|
+
"data-state": context.open ? "open" : "closed"
|
|
2317
|
+
};
|
|
2318
|
+
return React16__namespace.cloneElement(
|
|
2319
|
+
children,
|
|
2320
|
+
context.getReferenceProps({
|
|
2321
|
+
ref,
|
|
2322
|
+
...props,
|
|
2323
|
+
...typeof children.props === "object" ? children.props : {},
|
|
2324
|
+
"aria-expanded": context.open,
|
|
2325
|
+
"aria-haspopup": "menu",
|
|
2326
|
+
...dataAttributes
|
|
2327
|
+
})
|
|
2328
|
+
);
|
|
2329
|
+
}
|
|
2330
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2331
|
+
"button",
|
|
2332
|
+
{
|
|
2333
|
+
ref,
|
|
2334
|
+
"aria-expanded": context.open,
|
|
2335
|
+
"aria-haspopup": "menu",
|
|
2336
|
+
"data-state": context.open ? "open" : "closed",
|
|
2337
|
+
...context.getReferenceProps(props),
|
|
2338
|
+
children
|
|
2339
|
+
}
|
|
2340
|
+
);
|
|
2341
|
+
}
|
|
2342
|
+
);
|
|
2343
|
+
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
|
|
2344
|
+
var DropdownMenuContent = React16__namespace.forwardRef(
|
|
2345
|
+
({ style, className, orientation = "vertical", side = "bottom", align = "start", portal = true, portalProps = {}, ...props }, propRef) => {
|
|
2346
|
+
const context = useDropdownMenuContext();
|
|
2347
|
+
const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
|
|
2348
|
+
React16__namespace.useEffect(() => {
|
|
2349
|
+
context.updatePosition(side, align);
|
|
2350
|
+
}, [context, side, align]);
|
|
2351
|
+
if (!context.open) return null;
|
|
2352
|
+
const content = /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context.context, modal: false, initialFocus: 0, returnFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2353
|
+
"div",
|
|
2354
|
+
{
|
|
2355
|
+
ref,
|
|
2356
|
+
className: `tiptap-dropdown-menu ${className || ""}`,
|
|
2357
|
+
style: {
|
|
2358
|
+
position: context.strategy,
|
|
2359
|
+
top: context.y ?? 0,
|
|
2360
|
+
left: context.x ?? 0,
|
|
2361
|
+
outline: "none",
|
|
2362
|
+
...style
|
|
2363
|
+
},
|
|
2364
|
+
"aria-orientation": orientation,
|
|
2365
|
+
"data-orientation": orientation,
|
|
2366
|
+
"data-state": context.open ? "open" : "closed",
|
|
2367
|
+
"data-side": side,
|
|
2368
|
+
"data-align": align,
|
|
2369
|
+
...context.getFloatingProps(props),
|
|
2370
|
+
children: props.children
|
|
2371
|
+
}
|
|
2372
|
+
) });
|
|
2373
|
+
if (portal) {
|
|
2374
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { ...portalProps, children: content });
|
|
2375
|
+
}
|
|
2376
|
+
return content;
|
|
2377
|
+
}
|
|
2378
|
+
);
|
|
2379
|
+
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
2380
|
+
var DropdownMenuItem = React16__namespace.forwardRef(
|
|
2381
|
+
({ children, disabled, asChild = false, onSelect, className, ...props }, ref) => {
|
|
2382
|
+
const context = useDropdownMenuContext();
|
|
2383
|
+
const item = react$1.useListItem({ label: disabled ? null : children?.toString() });
|
|
2384
|
+
const isActive = context.activeIndex === item.index;
|
|
2385
|
+
const handleSelect = React16__namespace.useCallback(
|
|
2386
|
+
(event) => {
|
|
2387
|
+
if (disabled) return;
|
|
2388
|
+
onSelect?.();
|
|
2389
|
+
props.onClick?.(event);
|
|
2390
|
+
context.setOpen(false);
|
|
2391
|
+
},
|
|
2392
|
+
[context, disabled, onSelect, props]
|
|
2393
|
+
);
|
|
2394
|
+
const itemProps = {
|
|
2395
|
+
ref: react$1.useMergeRefs([item.ref, ref]),
|
|
2396
|
+
role: "menuitem",
|
|
2397
|
+
className,
|
|
2398
|
+
tabIndex: isActive ? 0 : -1,
|
|
2399
|
+
"data-highlighted": isActive,
|
|
2400
|
+
"aria-disabled": disabled,
|
|
2401
|
+
...context.getItemProps({
|
|
2402
|
+
...props,
|
|
2403
|
+
onClick: handleSelect
|
|
2404
|
+
})
|
|
2405
|
+
};
|
|
2406
|
+
if (asChild && React16__namespace.isValidElement(children)) {
|
|
2407
|
+
const childProps = children.props;
|
|
2408
|
+
const mergedProps = {
|
|
2409
|
+
...itemProps,
|
|
2410
|
+
...typeof children.props === "object" ? children.props : {}
|
|
2411
|
+
};
|
|
2412
|
+
const eventHandlers = {
|
|
2413
|
+
onClick: (event) => {
|
|
2414
|
+
handleSelect(event);
|
|
2415
|
+
childProps.onClick?.(event);
|
|
2416
|
+
}
|
|
2417
|
+
};
|
|
2418
|
+
return React16__namespace.cloneElement(children, {
|
|
2419
|
+
...mergedProps,
|
|
2420
|
+
...eventHandlers
|
|
2421
|
+
});
|
|
2422
|
+
}
|
|
2423
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...itemProps, children });
|
|
2424
|
+
}
|
|
2425
|
+
);
|
|
2426
|
+
DropdownMenuItem.displayName = "DropdownMenuItem";
|
|
2427
|
+
var DropdownMenuGroup = React16__namespace.forwardRef(({ children, label, className, ...props }, ref) => {
|
|
2428
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref, role: "group", "aria-label": label, className: `tiptap-button-group ${className || ""}`, children });
|
|
2429
|
+
});
|
|
2430
|
+
DropdownMenuGroup.displayName = "DropdownMenuGroup";
|
|
2431
|
+
var DropdownMenuSeparator = React16__namespace.forwardRef(
|
|
2432
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Separator, { ref, className: `tiptap-dropdown-menu-separator ${className || ""}`, ...props })
|
|
2433
|
+
);
|
|
2434
|
+
DropdownMenuSeparator.displayName = Separator.displayName;
|
|
2435
|
+
function HeadingDropdownMenu({
|
|
2436
|
+
editor: providedEditor,
|
|
2437
|
+
levels = [1, 2, 3, 4, 5, 6],
|
|
2438
|
+
hideWhenUnavailable = false,
|
|
2439
|
+
onOpenChange,
|
|
2440
|
+
...props
|
|
2441
|
+
}) {
|
|
2442
|
+
const [isOpen, setIsOpen] = React16__namespace.useState(false);
|
|
2443
|
+
const editor = useTiptapEditor(providedEditor);
|
|
2444
|
+
const headingInSchema = isNodeInSchema("heading", editor);
|
|
2445
|
+
const handleOnOpenChange = React16__namespace.useCallback(
|
|
2446
|
+
(open) => {
|
|
2447
|
+
setIsOpen(open);
|
|
2448
|
+
onOpenChange?.(open);
|
|
2449
|
+
},
|
|
2450
|
+
[onOpenChange]
|
|
2451
|
+
);
|
|
2452
|
+
const getActiveIcon = React16__namespace.useCallback(() => {
|
|
2453
|
+
if (!editor) return /* @__PURE__ */ jsxRuntime.jsx(HeadingIcon, { className: "tiptap-button-icon" });
|
|
2454
|
+
const activeLevel = levels.find((level) => editor.isActive("heading", { level }));
|
|
2455
|
+
if (!activeLevel) return /* @__PURE__ */ jsxRuntime.jsx(HeadingIcon, { className: "tiptap-button-icon" });
|
|
2456
|
+
const ActiveIcon = headingIcons[activeLevel];
|
|
2457
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, { className: "tiptap-button-icon" });
|
|
2458
|
+
}, [editor, levels]);
|
|
2459
|
+
const canToggleAnyHeading = React16__namespace.useCallback(() => {
|
|
2460
|
+
if (!editor) return false;
|
|
2461
|
+
return levels.some((level) => editor.can().toggleNode("heading", "paragraph", { level }));
|
|
2462
|
+
}, [editor, levels]);
|
|
2463
|
+
const isDisabled = !canToggleAnyHeading();
|
|
2464
|
+
const isAnyHeadingActive = editor?.isActive("heading") ?? false;
|
|
2465
|
+
const show = React16__namespace.useMemo(() => {
|
|
2466
|
+
if (!headingInSchema || !editor) {
|
|
2467
|
+
return false;
|
|
2468
|
+
}
|
|
2469
|
+
if (hideWhenUnavailable) {
|
|
2470
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggleAnyHeading()) {
|
|
2471
|
+
return false;
|
|
2472
|
+
}
|
|
2473
|
+
}
|
|
2474
|
+
return true;
|
|
2475
|
+
}, [headingInSchema, editor, hideWhenUnavailable, canToggleAnyHeading]);
|
|
2476
|
+
if (!show || !editor || !editor.isEditable) {
|
|
2477
|
+
return null;
|
|
2478
|
+
}
|
|
2479
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
|
|
2480
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2481
|
+
Button2,
|
|
2482
|
+
{
|
|
2483
|
+
type: "button",
|
|
2484
|
+
disabled: isDisabled,
|
|
2485
|
+
"data-style": "ghost",
|
|
2486
|
+
"data-active-state": isAnyHeadingActive ? "on" : "off",
|
|
2487
|
+
"data-disabled": isDisabled,
|
|
2488
|
+
role: "button",
|
|
2489
|
+
tabIndex: -1,
|
|
2490
|
+
"aria-label": "Format text as heading",
|
|
2491
|
+
"aria-pressed": isAnyHeadingActive,
|
|
2492
|
+
tooltip: "\u6807\u9898",
|
|
2493
|
+
...props,
|
|
2494
|
+
children: [
|
|
2495
|
+
getActiveIcon(),
|
|
2496
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "tiptap-button-dropdown-small" })
|
|
2497
|
+
]
|
|
2498
|
+
}
|
|
2499
|
+
) }),
|
|
2500
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuGroup, { children: levels.map((level) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(HeadingButton, { editor, level, text: getFormattedHeadingName(level), tooltip: "" }) }, `heading-${level}`)) }) })
|
|
2501
|
+
] });
|
|
2502
|
+
}
|
|
2503
|
+
function useMenuNavigation({
|
|
2504
|
+
editor,
|
|
2505
|
+
containerRef,
|
|
2506
|
+
query,
|
|
2507
|
+
items,
|
|
2508
|
+
onSelect,
|
|
2509
|
+
onClose,
|
|
2510
|
+
orientation = "vertical",
|
|
2511
|
+
autoSelectFirstItem = true
|
|
2512
|
+
}) {
|
|
2513
|
+
const [selectedIndex, setSelectedIndex] = React16__namespace.useState(autoSelectFirstItem ? 0 : -1);
|
|
2514
|
+
React16__namespace.useEffect(() => {
|
|
2515
|
+
const handleKeyboardNavigation = (event) => {
|
|
2516
|
+
if (!items.length) return false;
|
|
2517
|
+
const moveNext = () => setSelectedIndex((currentIndex) => {
|
|
2518
|
+
if (currentIndex === -1) return 0;
|
|
2519
|
+
return (currentIndex + 1) % items.length;
|
|
2520
|
+
});
|
|
2521
|
+
const movePrev = () => setSelectedIndex((currentIndex) => {
|
|
2522
|
+
if (currentIndex === -1) return items.length - 1;
|
|
2523
|
+
return (currentIndex - 1 + items.length) % items.length;
|
|
2524
|
+
});
|
|
2525
|
+
switch (event.key) {
|
|
2526
|
+
case "ArrowUp": {
|
|
2527
|
+
if (orientation === "horizontal") return false;
|
|
2528
|
+
event.preventDefault();
|
|
2529
|
+
movePrev();
|
|
2530
|
+
return true;
|
|
2531
|
+
}
|
|
2532
|
+
case "ArrowDown": {
|
|
2533
|
+
if (orientation === "horizontal") return false;
|
|
2534
|
+
event.preventDefault();
|
|
2535
|
+
moveNext();
|
|
2536
|
+
return true;
|
|
2537
|
+
}
|
|
2538
|
+
case "ArrowLeft": {
|
|
2539
|
+
if (orientation === "vertical") return false;
|
|
2540
|
+
event.preventDefault();
|
|
2541
|
+
movePrev();
|
|
2542
|
+
return true;
|
|
2543
|
+
}
|
|
2544
|
+
case "ArrowRight": {
|
|
2545
|
+
if (orientation === "vertical") return false;
|
|
2546
|
+
event.preventDefault();
|
|
2547
|
+
moveNext();
|
|
2548
|
+
return true;
|
|
2549
|
+
}
|
|
2550
|
+
case "Tab": {
|
|
2551
|
+
event.preventDefault();
|
|
2552
|
+
if (event.shiftKey) {
|
|
2553
|
+
movePrev();
|
|
2554
|
+
} else {
|
|
2555
|
+
moveNext();
|
|
2556
|
+
}
|
|
2557
|
+
return true;
|
|
2558
|
+
}
|
|
2559
|
+
case "Home": {
|
|
2560
|
+
event.preventDefault();
|
|
2561
|
+
setSelectedIndex(0);
|
|
2562
|
+
return true;
|
|
2563
|
+
}
|
|
2564
|
+
case "End": {
|
|
2565
|
+
event.preventDefault();
|
|
2566
|
+
setSelectedIndex(items.length - 1);
|
|
2567
|
+
return true;
|
|
2568
|
+
}
|
|
2569
|
+
case "Enter": {
|
|
2570
|
+
if (event.isComposing) return false;
|
|
2571
|
+
event.preventDefault();
|
|
2572
|
+
if (selectedIndex !== -1 && items[selectedIndex]) {
|
|
2573
|
+
onSelect?.(items[selectedIndex]);
|
|
2574
|
+
}
|
|
2575
|
+
return true;
|
|
2576
|
+
}
|
|
2577
|
+
case "Escape": {
|
|
2578
|
+
event.preventDefault();
|
|
2579
|
+
onClose?.();
|
|
2580
|
+
return true;
|
|
2581
|
+
}
|
|
2582
|
+
default:
|
|
2583
|
+
return false;
|
|
2584
|
+
}
|
|
2585
|
+
};
|
|
2586
|
+
let targetElement = null;
|
|
2587
|
+
if (editor) {
|
|
2588
|
+
targetElement = editor.view.dom;
|
|
2589
|
+
} else if (containerRef?.current) {
|
|
2590
|
+
targetElement = containerRef.current;
|
|
2591
|
+
}
|
|
2592
|
+
if (targetElement) {
|
|
2593
|
+
targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
|
|
2594
|
+
return () => {
|
|
2595
|
+
targetElement?.removeEventListener("keydown", handleKeyboardNavigation, true);
|
|
2596
|
+
};
|
|
2597
|
+
}
|
|
2598
|
+
return void 0;
|
|
2599
|
+
}, [editor, containerRef, items, selectedIndex, onSelect, onClose, orientation]);
|
|
2600
|
+
React16__namespace.useEffect(() => {
|
|
2601
|
+
if (query) {
|
|
2602
|
+
setSelectedIndex(autoSelectFirstItem ? 0 : -1);
|
|
2603
|
+
}
|
|
2604
|
+
}, [query, autoSelectFirstItem]);
|
|
2605
|
+
return {
|
|
2606
|
+
selectedIndex: items.length ? selectedIndex : void 0,
|
|
2607
|
+
setSelectedIndex
|
|
2608
|
+
};
|
|
2609
|
+
}
|
|
2610
|
+
var BanIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2611
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2612
|
+
"path",
|
|
2613
|
+
{
|
|
2614
|
+
fillRule: "evenodd",
|
|
2615
|
+
clipRule: "evenodd",
|
|
2616
|
+
d: "M4.43471 4.01458C4.34773 4.06032 4.26607 4.11977 4.19292 4.19292C4.11977 4.26607 4.06032 4.34773 4.01458 4.43471C2.14611 6.40628 1 9.0693 1 12C1 18.0751 5.92487 23 12 23C14.9306 23 17.5936 21.854 19.5651 19.9856C19.6522 19.9398 19.7339 19.8803 19.8071 19.8071C19.8803 19.7339 19.9398 19.6522 19.9856 19.5651C21.854 17.5936 23 14.9306 23 12C23 5.92487 18.0751 1 12 1C9.0693 1 6.40628 2.14611 4.43471 4.01458ZM6.38231 4.9681C7.92199 3.73647 9.87499 3 12 3C16.9706 3 21 7.02944 21 12C21 14.125 20.2635 16.078 19.0319 17.6177L6.38231 4.9681ZM17.6177 19.0319C16.078 20.2635 14.125 21 12 21C7.02944 21 3 16.9706 3 12C3 9.87499 3.73647 7.92199 4.9681 6.38231L17.6177 19.0319Z",
|
|
2617
|
+
fill: "currentColor"
|
|
2618
|
+
}
|
|
2619
|
+
) });
|
|
2620
|
+
});
|
|
2621
|
+
BanIcon.displayName = "BanIcon";
|
|
2622
|
+
var HighlighterIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
2623
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2624
|
+
"path",
|
|
2625
|
+
{
|
|
2626
|
+
fillRule: "evenodd",
|
|
2627
|
+
clipRule: "evenodd",
|
|
2628
|
+
d: "M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z",
|
|
2629
|
+
fill: "currentColor"
|
|
2630
|
+
}
|
|
2631
|
+
) });
|
|
2632
|
+
});
|
|
2633
|
+
HighlighterIcon.displayName = "HighlighterIcon";
|
|
2634
|
+
var PopoverContext = React16__namespace.createContext(null);
|
|
2635
|
+
function usePopoverContext() {
|
|
2636
|
+
const context = React16__namespace.useContext(PopoverContext);
|
|
2637
|
+
if (!context) {
|
|
2638
|
+
throw new Error("Popover components must be wrapped in <Popover />");
|
|
2639
|
+
}
|
|
2640
|
+
return context;
|
|
2641
|
+
}
|
|
2642
|
+
function usePopover({
|
|
2643
|
+
initialOpen = false,
|
|
2644
|
+
modal,
|
|
2645
|
+
open: controlledOpen,
|
|
2646
|
+
onOpenChange: setControlledOpen,
|
|
2647
|
+
side = "bottom",
|
|
2648
|
+
align = "center"
|
|
2649
|
+
} = {}) {
|
|
2650
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React16__namespace.useState(initialOpen);
|
|
2651
|
+
const [labelId, setLabelId] = React16__namespace.useState();
|
|
2652
|
+
const [descriptionId, setDescriptionId] = React16__namespace.useState();
|
|
2653
|
+
const [currentPlacement, setCurrentPlacement] = React16__namespace.useState(`${side}-${align}`);
|
|
2654
|
+
const open = controlledOpen ?? uncontrolledOpen;
|
|
2655
|
+
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
2656
|
+
const middleware = React16__namespace.useMemo(
|
|
2657
|
+
() => [
|
|
2658
|
+
react$1.offset(4),
|
|
2659
|
+
react$1.flip({
|
|
2660
|
+
fallbackAxisSideDirection: "end",
|
|
2661
|
+
crossAxis: false
|
|
2662
|
+
}),
|
|
2663
|
+
react$1.shift({
|
|
2664
|
+
limiter: react$1.limitShift({ offset: 4 })
|
|
2665
|
+
})
|
|
2666
|
+
],
|
|
2667
|
+
[]
|
|
2668
|
+
);
|
|
2669
|
+
const floating = react$1.useFloating({
|
|
2670
|
+
placement: currentPlacement,
|
|
2671
|
+
open,
|
|
2672
|
+
onOpenChange: setOpen,
|
|
2673
|
+
whileElementsMounted: react$1.autoUpdate,
|
|
2674
|
+
middleware
|
|
2675
|
+
});
|
|
2676
|
+
const interactions = react$1.useInteractions([react$1.useClick(floating.context), react$1.useDismiss(floating.context), react$1.useRole(floating.context)]);
|
|
2677
|
+
const updatePosition = React16__namespace.useCallback((newSide, newAlign) => {
|
|
2678
|
+
setCurrentPlacement(`${newSide}-${newAlign}`);
|
|
2679
|
+
}, []);
|
|
2680
|
+
return React16__namespace.useMemo(
|
|
2681
|
+
() => ({
|
|
2682
|
+
open,
|
|
2683
|
+
setOpen,
|
|
2684
|
+
...interactions,
|
|
2685
|
+
...floating,
|
|
2686
|
+
modal,
|
|
2687
|
+
labelId,
|
|
2688
|
+
descriptionId,
|
|
2689
|
+
setLabelId,
|
|
2690
|
+
setDescriptionId,
|
|
2691
|
+
updatePosition
|
|
2692
|
+
}),
|
|
2693
|
+
[open, setOpen, interactions, floating, modal, labelId, descriptionId, updatePosition]
|
|
2694
|
+
);
|
|
2695
|
+
}
|
|
2696
|
+
function Popover({ children, modal = false, ...options }) {
|
|
2697
|
+
const popover = usePopover({ modal, ...options });
|
|
2698
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: popover, children });
|
|
2699
|
+
}
|
|
2700
|
+
var PopoverTrigger = React16__namespace.forwardRef(function PopoverTrigger2({ children, asChild = false, ...props }, propRef) {
|
|
2701
|
+
const context = usePopoverContext();
|
|
2702
|
+
const childrenRef = React16__namespace.isValidElement(children) ? parseInt(React16__namespace.version, 10) >= 19 ? children.props.ref : children.ref : void 0;
|
|
2703
|
+
const ref = react$1.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
|
|
2704
|
+
if (asChild && React16__namespace.isValidElement(children)) {
|
|
2705
|
+
return React16__namespace.cloneElement(
|
|
2706
|
+
children,
|
|
2707
|
+
context.getReferenceProps({
|
|
2708
|
+
ref,
|
|
2709
|
+
...props,
|
|
2710
|
+
...children.props,
|
|
2711
|
+
"data-state": context.open ? "open" : "closed"
|
|
2712
|
+
})
|
|
2713
|
+
);
|
|
2714
|
+
}
|
|
2715
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
|
|
2716
|
+
});
|
|
2717
|
+
var PopoverContent = React16__namespace.forwardRef(function PopoverContent2({ className, side = "bottom", align = "center", style, portal = true, portalProps = {}, ...props }, propRef) {
|
|
2718
|
+
const context = usePopoverContext();
|
|
2719
|
+
const ref = react$1.useMergeRefs([context.refs.setFloating, propRef]);
|
|
2720
|
+
React16__namespace.useEffect(() => {
|
|
2721
|
+
context.updatePosition(side, align);
|
|
2722
|
+
}, [context, side, align]);
|
|
2723
|
+
if (!context.context.open) return null;
|
|
2724
|
+
const content = /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context.context, modal: context.modal, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2725
|
+
"div",
|
|
2726
|
+
{
|
|
2727
|
+
ref,
|
|
2728
|
+
style: {
|
|
2729
|
+
position: context.strategy,
|
|
2730
|
+
top: context.y ?? 0,
|
|
2731
|
+
left: context.x ?? 0,
|
|
2732
|
+
...style
|
|
2733
|
+
},
|
|
2734
|
+
"aria-labelledby": context.labelId,
|
|
2735
|
+
"aria-describedby": context.descriptionId,
|
|
2736
|
+
className: `tiptap-popover ${className || ""}`,
|
|
2737
|
+
"data-side": side,
|
|
2738
|
+
"data-align": align,
|
|
2739
|
+
"data-state": context.context.open ? "open" : "closed",
|
|
2740
|
+
...context.getFloatingProps(props),
|
|
2741
|
+
children: props.children
|
|
2742
|
+
}
|
|
2743
|
+
) });
|
|
2744
|
+
if (portal) {
|
|
2745
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { ...portalProps, children: content });
|
|
2746
|
+
}
|
|
2747
|
+
return content;
|
|
1375
2748
|
});
|
|
2749
|
+
PopoverTrigger.displayName = "PopoverTrigger";
|
|
2750
|
+
PopoverContent.displayName = "PopoverContent";
|
|
2751
|
+
function canToggleHighlight(editor) {
|
|
2752
|
+
if (!editor) return false;
|
|
2753
|
+
try {
|
|
2754
|
+
return editor.can().setMark("highlight");
|
|
2755
|
+
} catch {
|
|
2756
|
+
return false;
|
|
2757
|
+
}
|
|
2758
|
+
}
|
|
2759
|
+
function isHighlightActive(editor, color) {
|
|
2760
|
+
if (!editor) return false;
|
|
2761
|
+
return editor.isActive("highlight", { color });
|
|
2762
|
+
}
|
|
2763
|
+
function toggleHighlight(editor, color, node, nodePos) {
|
|
2764
|
+
if (!editor) return;
|
|
2765
|
+
try {
|
|
2766
|
+
const chain = editor.chain().focus();
|
|
2767
|
+
if (isEmptyNode(node)) {
|
|
2768
|
+
chain.toggleMark("highlight", { color }).run();
|
|
2769
|
+
} else if (nodePos !== void 0 && nodePos !== null && nodePos !== -1) {
|
|
2770
|
+
chain.setNodeSelection(nodePos).toggleMark("highlight", { color }).run();
|
|
2771
|
+
} else if (node) {
|
|
2772
|
+
const foundPos = findNodePosition({ editor, node });
|
|
2773
|
+
if (foundPos) {
|
|
2774
|
+
chain.setNodeSelection(foundPos.pos).toggleMark("highlight", { color }).run();
|
|
2775
|
+
} else {
|
|
2776
|
+
chain.toggleMark("highlight", { color }).run();
|
|
2777
|
+
}
|
|
2778
|
+
} else {
|
|
2779
|
+
chain.toggleMark("highlight", { color }).run();
|
|
2780
|
+
}
|
|
2781
|
+
editor.chain().setMeta("hideDragHandle", true).run();
|
|
2782
|
+
} catch (error) {
|
|
2783
|
+
console.error("Failed to apply highlight:", error);
|
|
2784
|
+
}
|
|
2785
|
+
}
|
|
2786
|
+
function isHighlightButtonDisabled(editor, userDisabled = false) {
|
|
2787
|
+
if (!editor || userDisabled) return true;
|
|
2788
|
+
const isIncompatibleContext = editor.isActive("code") || editor.isActive("codeBlock") || editor.isActive("imageUpload");
|
|
2789
|
+
return isIncompatibleContext || !canToggleHighlight(editor);
|
|
2790
|
+
}
|
|
2791
|
+
function shouldShowHighlightButton(editor, hideWhenUnavailable, highlightInSchema) {
|
|
2792
|
+
if (!highlightInSchema || !editor) return false;
|
|
2793
|
+
if (hideWhenUnavailable) {
|
|
2794
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggleHighlight(editor)) {
|
|
2795
|
+
return false;
|
|
2796
|
+
}
|
|
2797
|
+
}
|
|
2798
|
+
return true;
|
|
2799
|
+
}
|
|
2800
|
+
function useHighlightState(editor, color, disabled = false, hideWhenUnavailable = false) {
|
|
2801
|
+
const highlightInSchema = isMarkInSchema("highlight", editor);
|
|
2802
|
+
const isDisabled = isHighlightButtonDisabled(editor, disabled);
|
|
2803
|
+
const isActive = isHighlightActive(editor, color);
|
|
2804
|
+
const shouldShow = React16__namespace.useMemo(
|
|
2805
|
+
() => shouldShowHighlightButton(editor, hideWhenUnavailable, highlightInSchema),
|
|
2806
|
+
[editor, hideWhenUnavailable, highlightInSchema]
|
|
2807
|
+
);
|
|
2808
|
+
return {
|
|
2809
|
+
highlightInSchema,
|
|
2810
|
+
isDisabled,
|
|
2811
|
+
isActive,
|
|
2812
|
+
shouldShow
|
|
2813
|
+
};
|
|
2814
|
+
}
|
|
2815
|
+
var HighlightButton = React16__namespace.forwardRef(
|
|
2816
|
+
({
|
|
2817
|
+
editor: providedEditor,
|
|
2818
|
+
node,
|
|
2819
|
+
nodePos,
|
|
2820
|
+
color,
|
|
2821
|
+
text,
|
|
2822
|
+
hideWhenUnavailable = false,
|
|
2823
|
+
className = "",
|
|
2824
|
+
disabled,
|
|
2825
|
+
onClick,
|
|
2826
|
+
onApplied,
|
|
2827
|
+
children,
|
|
2828
|
+
style,
|
|
2829
|
+
...buttonProps
|
|
2830
|
+
}, ref) => {
|
|
2831
|
+
const editor = useTiptapEditor(providedEditor);
|
|
2832
|
+
const { isDisabled, isActive, shouldShow } = useHighlightState(editor, color, disabled, hideWhenUnavailable);
|
|
2833
|
+
const handleClick = React16__namespace.useCallback(
|
|
2834
|
+
(e) => {
|
|
2835
|
+
onClick?.(e);
|
|
2836
|
+
if (!e.defaultPrevented && !isDisabled && editor) {
|
|
2837
|
+
toggleHighlight(editor, color, node, nodePos);
|
|
2838
|
+
onApplied?.(color);
|
|
2839
|
+
}
|
|
2840
|
+
},
|
|
2841
|
+
[color, editor, isDisabled, node, nodePos, onClick, onApplied]
|
|
2842
|
+
);
|
|
2843
|
+
const buttonStyle = React16__namespace.useMemo(
|
|
2844
|
+
() => ({
|
|
2845
|
+
...style,
|
|
2846
|
+
"--highlight-color": color
|
|
2847
|
+
}),
|
|
2848
|
+
[color, style]
|
|
2849
|
+
);
|
|
2850
|
+
if (!shouldShow || !editor || !editor.isEditable) {
|
|
2851
|
+
return null;
|
|
2852
|
+
}
|
|
2853
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2854
|
+
Button2,
|
|
2855
|
+
{
|
|
2856
|
+
type: "button",
|
|
2857
|
+
className: className.trim(),
|
|
2858
|
+
disabled: isDisabled,
|
|
2859
|
+
"data-style": "ghost",
|
|
2860
|
+
"data-active-state": isActive ? "on" : "off",
|
|
2861
|
+
"data-disabled": isDisabled,
|
|
2862
|
+
role: "button",
|
|
2863
|
+
tabIndex: -1,
|
|
2864
|
+
"aria-label": `${color} highlight color`,
|
|
2865
|
+
"aria-pressed": isActive,
|
|
2866
|
+
onClick: handleClick,
|
|
2867
|
+
style: buttonStyle,
|
|
2868
|
+
...buttonProps,
|
|
2869
|
+
ref,
|
|
2870
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2871
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-highlight", style: { "--highlight-color": color } }),
|
|
2872
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
2873
|
+
] })
|
|
2874
|
+
}
|
|
2875
|
+
);
|
|
2876
|
+
}
|
|
2877
|
+
);
|
|
2878
|
+
HighlightButton.displayName = "HighlightButton";
|
|
2879
|
+
var DEFAULT_HIGHLIGHT_COLORS = [
|
|
2880
|
+
{
|
|
2881
|
+
label: "Green",
|
|
2882
|
+
value: "var(--tt-highlight-green)",
|
|
2883
|
+
border: "var(--tt-highlight-green-contrast)"
|
|
2884
|
+
},
|
|
2885
|
+
{
|
|
2886
|
+
label: "Blue",
|
|
2887
|
+
value: "var(--tt-highlight-blue)",
|
|
2888
|
+
border: "var(--tt-highlight-blue-contrast)"
|
|
2889
|
+
},
|
|
2890
|
+
{
|
|
2891
|
+
label: "Red",
|
|
2892
|
+
value: "var(--tt-highlight-red)",
|
|
2893
|
+
border: "var(--tt-highlight-red-contrast)"
|
|
2894
|
+
},
|
|
2895
|
+
{
|
|
2896
|
+
label: "Purple",
|
|
2897
|
+
value: "var(--tt-highlight-purple)",
|
|
2898
|
+
border: "var(--tt-highlight-purple-contrast)"
|
|
2899
|
+
},
|
|
2900
|
+
{
|
|
2901
|
+
label: "Yellow",
|
|
2902
|
+
value: "var(--tt-highlight-yellow)",
|
|
2903
|
+
border: "var(--tt-highlight-yellow-contrast)"
|
|
2904
|
+
}
|
|
2905
|
+
];
|
|
2906
|
+
var HighlighterButton = React16__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2907
|
+
Button2,
|
|
2908
|
+
{
|
|
2909
|
+
type: "button",
|
|
2910
|
+
className,
|
|
2911
|
+
"data-style": "ghost",
|
|
2912
|
+
"data-appearance": "default",
|
|
2913
|
+
role: "button",
|
|
2914
|
+
tabIndex: -1,
|
|
2915
|
+
"aria-label": "Highlight text",
|
|
2916
|
+
tooltip: "\u80CC\u666F\u989C\u8272",
|
|
2917
|
+
ref,
|
|
2918
|
+
...props,
|
|
2919
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsx(HighlighterIcon, { className: "tiptap-button-icon" })
|
|
2920
|
+
}
|
|
2921
|
+
));
|
|
2922
|
+
HighlighterButton.displayName = "HighlighterButton";
|
|
2923
|
+
function HighlightContent({ editor: providedEditor, colors = DEFAULT_HIGHLIGHT_COLORS, onClose }) {
|
|
2924
|
+
const editor = useTiptapEditor(providedEditor);
|
|
2925
|
+
const containerRef = React16__namespace.useRef(null);
|
|
2926
|
+
const removeHighlight = React16__namespace.useCallback(() => {
|
|
2927
|
+
if (!editor) return;
|
|
2928
|
+
editor.chain().focus().unsetMark("highlight").run();
|
|
2929
|
+
onClose?.();
|
|
2930
|
+
}, [editor, onClose]);
|
|
2931
|
+
const menuItems = React16__namespace.useMemo(() => [...colors, { label: "Remove highlight", value: "none" }], [colors]);
|
|
2932
|
+
const { selectedIndex } = useMenuNavigation({
|
|
2933
|
+
containerRef,
|
|
2934
|
+
items: menuItems,
|
|
2935
|
+
orientation: "both",
|
|
2936
|
+
onSelect: (item) => {
|
|
2937
|
+
if (item.value === "none") {
|
|
2938
|
+
removeHighlight();
|
|
2939
|
+
}
|
|
2940
|
+
onClose?.();
|
|
2941
|
+
},
|
|
2942
|
+
onClose,
|
|
2943
|
+
autoSelectFirstItem: false
|
|
2944
|
+
});
|
|
2945
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "tiptap-highlight-content", tabIndex: 0, children: [
|
|
2946
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "tiptap-button-group", "data-orientation": "horizontal", children: colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2947
|
+
HighlightButton,
|
|
2948
|
+
{
|
|
2949
|
+
editor,
|
|
2950
|
+
color: color.value,
|
|
2951
|
+
"aria-label": `${color.label} highlight color`,
|
|
2952
|
+
tabIndex: index === selectedIndex ? 0 : -1,
|
|
2953
|
+
"data-highlighted": selectedIndex === index,
|
|
2954
|
+
onClick: onClose
|
|
2955
|
+
},
|
|
2956
|
+
color.value
|
|
2957
|
+
)) }),
|
|
2958
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
2959
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2960
|
+
Button2,
|
|
2961
|
+
{
|
|
2962
|
+
onClick: removeHighlight,
|
|
2963
|
+
"aria-label": "Remove highlight",
|
|
2964
|
+
tabIndex: selectedIndex === colors.length ? 0 : -1,
|
|
2965
|
+
type: "button",
|
|
2966
|
+
role: "menuitem",
|
|
2967
|
+
"data-style": "ghost",
|
|
2968
|
+
"data-highlighted": selectedIndex === colors.length,
|
|
2969
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(BanIcon, { className: "tiptap-button-icon" })
|
|
2970
|
+
}
|
|
2971
|
+
) })
|
|
2972
|
+
] });
|
|
2973
|
+
}
|
|
2974
|
+
function HighlightPopover({
|
|
2975
|
+
editor: providedEditor,
|
|
2976
|
+
colors = DEFAULT_HIGHLIGHT_COLORS,
|
|
2977
|
+
hideWhenUnavailable = false,
|
|
2978
|
+
...props
|
|
2979
|
+
}) {
|
|
2980
|
+
const editor = useTiptapEditor(providedEditor);
|
|
2981
|
+
const [isOpen, setIsOpen] = React16__namespace.useState(false);
|
|
2982
|
+
const [isDisabled, setIsDisabled] = React16__namespace.useState(false);
|
|
2983
|
+
const markAvailable = isMarkInSchema("highlight", editor);
|
|
2984
|
+
React16__namespace.useEffect(() => {
|
|
2985
|
+
if (!editor) return;
|
|
2986
|
+
const updateIsDisabled = () => {
|
|
2987
|
+
let isDisabled2 = false;
|
|
2988
|
+
if (!markAvailable || !editor) {
|
|
2989
|
+
isDisabled2 = true;
|
|
2990
|
+
}
|
|
2991
|
+
const isInCompatibleContext = editor.isActive("code") || editor.isActive("codeBlock") || editor.isActive("imageUpload");
|
|
2992
|
+
if (isInCompatibleContext) {
|
|
2993
|
+
isDisabled2 = true;
|
|
2994
|
+
}
|
|
2995
|
+
setIsDisabled(isDisabled2);
|
|
2996
|
+
};
|
|
2997
|
+
editor.on("selectionUpdate", updateIsDisabled);
|
|
2998
|
+
editor.on("update", updateIsDisabled);
|
|
2999
|
+
return () => {
|
|
3000
|
+
editor.off("selectionUpdate", updateIsDisabled);
|
|
3001
|
+
editor.off("update", updateIsDisabled);
|
|
3002
|
+
};
|
|
3003
|
+
}, [editor, markAvailable]);
|
|
3004
|
+
const isActive = editor?.isActive("highlight") ?? false;
|
|
3005
|
+
const shouldShow = React16__namespace.useMemo(() => {
|
|
3006
|
+
if (!hideWhenUnavailable || !editor) return true;
|
|
3007
|
+
return !(react.isNodeSelection(editor.state.selection) || !canToggleHighlight(editor));
|
|
3008
|
+
}, [hideWhenUnavailable, editor]);
|
|
3009
|
+
if (!shouldShow || !editor || !editor.isEditable) {
|
|
3010
|
+
return null;
|
|
3011
|
+
}
|
|
3012
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
|
|
3013
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3014
|
+
HighlighterButton,
|
|
3015
|
+
{
|
|
3016
|
+
disabled: isDisabled,
|
|
3017
|
+
"data-active-state": isActive ? "on" : "off",
|
|
3018
|
+
"data-disabled": isDisabled,
|
|
3019
|
+
"aria-pressed": isActive,
|
|
3020
|
+
...props
|
|
3021
|
+
}
|
|
3022
|
+
) }),
|
|
3023
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightContent, { editor, colors, onClose: () => setIsOpen(false) }) })
|
|
3024
|
+
] });
|
|
3025
|
+
}
|
|
3026
|
+
var CornerDownLeftIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3027
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3028
|
+
"path",
|
|
3029
|
+
{
|
|
3030
|
+
fillRule: "evenodd",
|
|
3031
|
+
clipRule: "evenodd",
|
|
3032
|
+
d: "M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 11.7956 18.6839 12.5587 18.1213 13.1213C17.5587 13.6839 16.7956 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C17.3261 16 18.5979 15.4732 19.5355 14.5355C20.4732 13.5979 21 12.3261 21 11V4Z",
|
|
3033
|
+
fill: "currentColor"
|
|
3034
|
+
}
|
|
3035
|
+
) });
|
|
3036
|
+
});
|
|
3037
|
+
CornerDownLeftIcon.displayName = "CornerDownLeftIcon";
|
|
3038
|
+
var ExternalLinkIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3039
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3040
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3041
|
+
"path",
|
|
3042
|
+
{
|
|
3043
|
+
d: "M14 3C14 2.44772 14.4477 2 15 2H21C21.5523 2 22 2.44772 22 3V9C22 9.55228 21.5523 10 21 10C20.4477 10 20 9.55228 20 9V5.41421L10.7071 14.7071C10.3166 15.0976 9.68342 15.0976 9.29289 14.7071C8.90237 14.3166 8.90237 13.6834 9.29289 13.2929L18.5858 4H15C14.4477 4 14 3.55228 14 3Z",
|
|
3044
|
+
fill: "currentColor"
|
|
3045
|
+
}
|
|
3046
|
+
),
|
|
3047
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3048
|
+
"path",
|
|
3049
|
+
{
|
|
3050
|
+
d: "M4.29289 7.29289C4.48043 7.10536 4.73478 7 5 7H11C11.5523 7 12 6.55228 12 6C12 5.44772 11.5523 5 11 5H5C4.20435 5 3.44129 5.31607 2.87868 5.87868C2.31607 6.44129 2 7.20435 2 8V19C2 19.7957 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H16C16.7957 22 17.5587 21.6839 18.1213 21.1213C18.6839 20.5587 19 19.7957 19 19V13C19 12.4477 18.5523 12 18 12C17.4477 12 17 12.4477 17 13V19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8946 16.2652 20 16 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V8C4 7.73478 4.10536 7.48043 4.29289 7.29289Z",
|
|
3051
|
+
fill: "currentColor"
|
|
3052
|
+
}
|
|
3053
|
+
)
|
|
3054
|
+
] });
|
|
3055
|
+
});
|
|
3056
|
+
ExternalLinkIcon.displayName = "ExternalLinkIcon";
|
|
3057
|
+
var LinkIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3058
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3059
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3060
|
+
"path",
|
|
3061
|
+
{
|
|
3062
|
+
d: "M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z",
|
|
3063
|
+
fill: "currentColor"
|
|
3064
|
+
}
|
|
3065
|
+
),
|
|
3066
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3067
|
+
"path",
|
|
3068
|
+
{
|
|
3069
|
+
d: "M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z",
|
|
3070
|
+
fill: "currentColor"
|
|
3071
|
+
}
|
|
3072
|
+
)
|
|
3073
|
+
] });
|
|
3074
|
+
});
|
|
3075
|
+
LinkIcon.displayName = "LinkIcon";
|
|
3076
|
+
var TrashIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3077
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3078
|
+
"path",
|
|
3079
|
+
{
|
|
3080
|
+
fillRule: "evenodd",
|
|
3081
|
+
clipRule: "evenodd",
|
|
3082
|
+
d: "M7 5V4C7 3.17477 7.40255 2.43324 7.91789 1.91789C8.43324 1.40255 9.17477 1 10 1H14C14.8252 1 15.5668 1.40255 16.0821 1.91789C16.5975 2.43324 17 3.17477 17 4V5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H20V20C20 20.8252 19.5975 21.5668 19.0821 22.0821C18.5668 22.5975 17.8252 23 17 23H7C6.17477 23 5.43324 22.5975 4.91789 22.0821C4.40255 21.5668 4 20.8252 4 20V7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H7ZM9 4C9 3.82523 9.09745 3.56676 9.33211 3.33211C9.56676 3.09745 9.82523 3 10 3H14C14.1748 3 14.4332 3.09745 14.6679 3.33211C14.9025 3.56676 15 3.82523 15 4V5H9V4ZM6 7V20C6 20.1748 6.09745 20.4332 6.33211 20.6679C6.56676 20.9025 6.82523 21 7 21H17C17.1748 21 17.4332 20.9025 17.6679 20.6679C17.9025 20.4332 18 20.1748 18 20V7H6Z",
|
|
3083
|
+
fill: "currentColor"
|
|
3084
|
+
}
|
|
3085
|
+
) });
|
|
3086
|
+
});
|
|
3087
|
+
TrashIcon.displayName = "TrashIcon";
|
|
3088
|
+
var useLinkHandler = (props) => {
|
|
3089
|
+
const { editor, onSetLink, onLinkActive } = props;
|
|
3090
|
+
const [url, setUrl] = React16__namespace.useState("");
|
|
3091
|
+
React16__namespace.useEffect(() => {
|
|
3092
|
+
if (!editor) return;
|
|
3093
|
+
const { href } = editor.getAttributes("link");
|
|
3094
|
+
if (editor.isActive("link") && !url) {
|
|
3095
|
+
setUrl(href || "");
|
|
3096
|
+
onLinkActive?.();
|
|
3097
|
+
}
|
|
3098
|
+
}, [editor, onLinkActive, url]);
|
|
3099
|
+
React16__namespace.useEffect(() => {
|
|
3100
|
+
if (!editor) return;
|
|
3101
|
+
const updateLinkState = () => {
|
|
3102
|
+
const { href } = editor.getAttributes("link");
|
|
3103
|
+
setUrl(href || "");
|
|
3104
|
+
if (editor.isActive("link") && !url) {
|
|
3105
|
+
onLinkActive?.();
|
|
3106
|
+
}
|
|
3107
|
+
};
|
|
3108
|
+
editor.on("selectionUpdate", updateLinkState);
|
|
3109
|
+
return () => {
|
|
3110
|
+
editor.off("selectionUpdate", updateLinkState);
|
|
3111
|
+
};
|
|
3112
|
+
}, [editor, onLinkActive, url]);
|
|
3113
|
+
const setLink = React16__namespace.useCallback(() => {
|
|
3114
|
+
if (!url || !editor) return;
|
|
3115
|
+
const { from, to } = editor.state.selection;
|
|
3116
|
+
const text = editor.state.doc.textBetween(from, to);
|
|
3117
|
+
editor.chain().focus().extendMarkRange("link").insertContent({
|
|
3118
|
+
type: "text",
|
|
3119
|
+
text: text || url,
|
|
3120
|
+
marks: [{ type: "link", attrs: { href: url } }]
|
|
3121
|
+
}).run();
|
|
3122
|
+
onSetLink?.();
|
|
3123
|
+
}, [editor, onSetLink, url]);
|
|
3124
|
+
const removeLink = React16__namespace.useCallback(() => {
|
|
3125
|
+
if (!editor) return;
|
|
3126
|
+
editor.chain().focus().unsetMark("link", { extendEmptyMarkRange: true }).setMeta("preventAutolink", true).run();
|
|
3127
|
+
setUrl("");
|
|
3128
|
+
}, [editor]);
|
|
3129
|
+
return {
|
|
3130
|
+
url,
|
|
3131
|
+
setUrl,
|
|
3132
|
+
setLink,
|
|
3133
|
+
removeLink,
|
|
3134
|
+
isActive: editor?.isActive("link") || false
|
|
3135
|
+
};
|
|
3136
|
+
};
|
|
3137
|
+
var LinkButton = React16__namespace.forwardRef(({ className, children, ...props }, ref) => {
|
|
3138
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", className, "data-style": "ghost", role: "button", tabIndex: -1, "aria-label": "Link", tooltip: "\u94FE\u63A5", ref, ...props, children: children || /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { className: "tiptap-button-icon" }) });
|
|
3139
|
+
});
|
|
3140
|
+
var LinkContent = ({ editor: providedEditor }) => {
|
|
3141
|
+
const editor = useTiptapEditor(providedEditor);
|
|
3142
|
+
const linkHandler = useLinkHandler({
|
|
3143
|
+
editor
|
|
3144
|
+
});
|
|
3145
|
+
return /* @__PURE__ */ jsxRuntime.jsx(LinkMain, { ...linkHandler });
|
|
3146
|
+
};
|
|
3147
|
+
var LinkMain = ({ url, setUrl, setLink, removeLink, isActive }) => {
|
|
3148
|
+
const handleKeyDown = (event) => {
|
|
3149
|
+
if (event.key === "Enter") {
|
|
3150
|
+
event.preventDefault();
|
|
3151
|
+
setLink();
|
|
3152
|
+
}
|
|
3153
|
+
};
|
|
3154
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3155
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3156
|
+
"input",
|
|
3157
|
+
{
|
|
3158
|
+
type: "url",
|
|
3159
|
+
placeholder: "\u8F93\u5165\u94FE\u63A5",
|
|
3160
|
+
value: url,
|
|
3161
|
+
onChange: (e) => setUrl(e.target.value),
|
|
3162
|
+
onKeyDown: handleKeyDown,
|
|
3163
|
+
autoComplete: "off",
|
|
3164
|
+
autoCorrect: "off",
|
|
3165
|
+
autoCapitalize: "off",
|
|
3166
|
+
className: "tiptap-input tiptap-input-clamp"
|
|
3167
|
+
}
|
|
3168
|
+
),
|
|
3169
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "tiptap-button-group", "data-orientation": "horizontal", children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", onClick: setLink, title: "\u786E\u8BA4", disabled: !url && !isActive, "data-style": "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(CornerDownLeftIcon, { className: "tiptap-button-icon" }) }) }),
|
|
3170
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
3171
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiptap-button-group", "data-orientation": "horizontal", children: [
|
|
3172
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", onClick: () => window.open(url, "_blank"), title: "\u65B0\u7A97\u53E3\u6253\u5F00", disabled: !url && !isActive, "data-style": "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, { className: "tiptap-button-icon" }) }),
|
|
3173
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button2, { type: "button", onClick: removeLink, title: "\u5220\u9664\u94FE\u63A5", disabled: !url && !isActive, "data-style": "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { className: "tiptap-button-icon" }) })
|
|
3174
|
+
] })
|
|
3175
|
+
] });
|
|
3176
|
+
};
|
|
3177
|
+
function LinkPopover({
|
|
3178
|
+
editor: providedEditor,
|
|
3179
|
+
hideWhenUnavailable = false,
|
|
3180
|
+
onOpenChange,
|
|
3181
|
+
autoOpenOnLinkActive = true,
|
|
3182
|
+
...props
|
|
3183
|
+
}) {
|
|
3184
|
+
const editor = useTiptapEditor(providedEditor);
|
|
3185
|
+
const linkInSchema = isMarkInSchema("link", editor);
|
|
3186
|
+
const [isOpen, setIsOpen] = React16__namespace.useState(false);
|
|
3187
|
+
const onSetLink = () => {
|
|
3188
|
+
setIsOpen(false);
|
|
3189
|
+
};
|
|
3190
|
+
const onLinkActive = () => setIsOpen(autoOpenOnLinkActive);
|
|
3191
|
+
const linkHandler = useLinkHandler({
|
|
3192
|
+
editor,
|
|
3193
|
+
onSetLink,
|
|
3194
|
+
onLinkActive
|
|
3195
|
+
});
|
|
3196
|
+
const isDisabled = React16__namespace.useMemo(() => {
|
|
3197
|
+
if (!editor) return true;
|
|
3198
|
+
if (editor.isActive("codeBlock")) return true;
|
|
3199
|
+
return !editor.can().setLink?.({ href: "" });
|
|
3200
|
+
}, [editor]);
|
|
3201
|
+
const canSetLink = React16__namespace.useMemo(() => {
|
|
3202
|
+
if (!editor) return false;
|
|
3203
|
+
try {
|
|
3204
|
+
return editor.can().setMark("link");
|
|
3205
|
+
} catch {
|
|
3206
|
+
return false;
|
|
3207
|
+
}
|
|
3208
|
+
}, [editor]);
|
|
3209
|
+
const isActive = editor?.isActive("link") ?? false;
|
|
3210
|
+
const handleOnOpenChange = React16__namespace.useCallback(
|
|
3211
|
+
(nextIsOpen) => {
|
|
3212
|
+
setIsOpen(nextIsOpen);
|
|
3213
|
+
onOpenChange?.(nextIsOpen);
|
|
3214
|
+
},
|
|
3215
|
+
[onOpenChange]
|
|
3216
|
+
);
|
|
3217
|
+
const show = React16__namespace.useMemo(() => {
|
|
3218
|
+
if (!linkInSchema || !editor) {
|
|
3219
|
+
return false;
|
|
3220
|
+
}
|
|
3221
|
+
if (hideWhenUnavailable) {
|
|
3222
|
+
if (react.isNodeSelection(editor.state.selection) || !canSetLink) {
|
|
3223
|
+
return false;
|
|
3224
|
+
}
|
|
3225
|
+
}
|
|
3226
|
+
return true;
|
|
3227
|
+
}, [linkInSchema, hideWhenUnavailable, editor, canSetLink]);
|
|
3228
|
+
if (!show || !editor || !editor.isEditable) {
|
|
3229
|
+
return null;
|
|
3230
|
+
}
|
|
3231
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
|
|
3232
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { disabled: isDisabled, "data-active-state": isActive ? "on" : "off", "data-disabled": isDisabled, ...props }) }),
|
|
3233
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsx(LinkMain, { ...linkHandler }) })
|
|
3234
|
+
] });
|
|
3235
|
+
}
|
|
3236
|
+
LinkButton.displayName = "LinkButton";
|
|
3237
|
+
var ListIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3238
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3239
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3240
|
+
"path",
|
|
3241
|
+
{
|
|
3242
|
+
fillRule: "evenodd",
|
|
3243
|
+
clipRule: "evenodd",
|
|
3244
|
+
d: "M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z",
|
|
3245
|
+
fill: "currentColor"
|
|
3246
|
+
}
|
|
3247
|
+
),
|
|
3248
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3249
|
+
"path",
|
|
3250
|
+
{
|
|
3251
|
+
fillRule: "evenodd",
|
|
3252
|
+
clipRule: "evenodd",
|
|
3253
|
+
d: "M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z",
|
|
3254
|
+
fill: "currentColor"
|
|
3255
|
+
}
|
|
3256
|
+
),
|
|
3257
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3258
|
+
"path",
|
|
3259
|
+
{
|
|
3260
|
+
fillRule: "evenodd",
|
|
3261
|
+
clipRule: "evenodd",
|
|
3262
|
+
d: "M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z",
|
|
3263
|
+
fill: "currentColor"
|
|
3264
|
+
}
|
|
3265
|
+
),
|
|
3266
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3267
|
+
"path",
|
|
3268
|
+
{
|
|
3269
|
+
fillRule: "evenodd",
|
|
3270
|
+
clipRule: "evenodd",
|
|
3271
|
+
d: "M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z",
|
|
3272
|
+
fill: "currentColor"
|
|
3273
|
+
}
|
|
3274
|
+
),
|
|
3275
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3276
|
+
"path",
|
|
3277
|
+
{
|
|
3278
|
+
fillRule: "evenodd",
|
|
3279
|
+
clipRule: "evenodd",
|
|
3280
|
+
d: "M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z",
|
|
3281
|
+
fill: "currentColor"
|
|
3282
|
+
}
|
|
3283
|
+
),
|
|
3284
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3285
|
+
"path",
|
|
3286
|
+
{
|
|
3287
|
+
fillRule: "evenodd",
|
|
3288
|
+
clipRule: "evenodd",
|
|
3289
|
+
d: "M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z",
|
|
3290
|
+
fill: "currentColor"
|
|
3291
|
+
}
|
|
3292
|
+
)
|
|
3293
|
+
] });
|
|
3294
|
+
});
|
|
3295
|
+
ListIcon.displayName = "ListIcon";
|
|
3296
|
+
var ListOrderedIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3297
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3298
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3299
|
+
"path",
|
|
3300
|
+
{
|
|
3301
|
+
fillRule: "evenodd",
|
|
3302
|
+
clipRule: "evenodd",
|
|
3303
|
+
d: "M9 6C9 5.44772 9.44772 5 10 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H10C9.44772 7 9 6.55228 9 6Z",
|
|
3304
|
+
fill: "currentColor"
|
|
3305
|
+
}
|
|
3306
|
+
),
|
|
3307
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3308
|
+
"path",
|
|
3309
|
+
{
|
|
3310
|
+
fillRule: "evenodd",
|
|
3311
|
+
clipRule: "evenodd",
|
|
3312
|
+
d: "M9 12C9 11.4477 9.44772 11 10 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H10C9.44772 13 9 12.5523 9 12Z",
|
|
3313
|
+
fill: "currentColor"
|
|
3314
|
+
}
|
|
3315
|
+
),
|
|
3316
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3317
|
+
"path",
|
|
3318
|
+
{
|
|
3319
|
+
fillRule: "evenodd",
|
|
3320
|
+
clipRule: "evenodd",
|
|
3321
|
+
d: "M9 18C9 17.4477 9.44772 17 10 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H10C9.44772 19 9 18.5523 9 18Z",
|
|
3322
|
+
fill: "currentColor"
|
|
3323
|
+
}
|
|
3324
|
+
),
|
|
3325
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3326
|
+
"path",
|
|
3327
|
+
{
|
|
3328
|
+
fillRule: "evenodd",
|
|
3329
|
+
clipRule: "evenodd",
|
|
3330
|
+
d: "M3 6C3 5.44772 3.44772 5 4 5H5C5.55228 5 6 5.44772 6 6V10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10V7C3.44772 7 3 6.55228 3 6Z",
|
|
3331
|
+
fill: "currentColor"
|
|
3332
|
+
}
|
|
3333
|
+
),
|
|
3334
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3335
|
+
"path",
|
|
3336
|
+
{
|
|
3337
|
+
fillRule: "evenodd",
|
|
3338
|
+
clipRule: "evenodd",
|
|
3339
|
+
d: "M3 10C3 9.44772 3.44772 9 4 9H6C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11H4C3.44772 11 3 10.5523 3 10Z",
|
|
3340
|
+
fill: "currentColor"
|
|
3341
|
+
}
|
|
3342
|
+
),
|
|
3343
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3344
|
+
"path",
|
|
3345
|
+
{
|
|
3346
|
+
fillRule: "evenodd",
|
|
3347
|
+
clipRule: "evenodd",
|
|
3348
|
+
d: "M5.82219 13.0431C6.54543 13.4047 6.99997 14.1319 6.99997 15C6.99997 15.5763 6.71806 16.0426 6.48747 16.35C6.31395 16.5814 6.1052 16.8044 5.91309 17H5.99997C6.55226 17 6.99997 17.4477 6.99997 18C6.99997 18.5523 6.55226 19 5.99997 19H3.99997C3.44769 19 2.99997 18.5523 2.99997 18C2.99997 17.4237 3.28189 16.9575 3.51247 16.65C3.74323 16.3424 4.03626 16.0494 4.26965 15.8161C4.27745 15.8083 4.2852 15.8006 4.29287 15.7929C4.55594 15.5298 4.75095 15.3321 4.88748 15.15C4.96287 15.0495 4.99021 14.9922 4.99911 14.9714C4.99535 14.9112 4.9803 14.882 4.9739 14.8715C4.96613 14.8588 4.95382 14.845 4.92776 14.8319C4.87723 14.8067 4.71156 14.7623 4.44719 14.8944C3.95321 15.1414 3.35254 14.9412 3.10555 14.4472C2.85856 13.9533 3.05878 13.3526 3.55276 13.1056C4.28839 12.7378 5.12272 12.6934 5.82219 13.0431Z",
|
|
3349
|
+
fill: "currentColor"
|
|
3350
|
+
}
|
|
3351
|
+
)
|
|
3352
|
+
] });
|
|
3353
|
+
});
|
|
3354
|
+
ListOrderedIcon.displayName = "ListOrderedIcon";
|
|
3355
|
+
var ListTodoIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3356
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3357
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3358
|
+
"path",
|
|
3359
|
+
{
|
|
3360
|
+
fillRule: "evenodd",
|
|
3361
|
+
clipRule: "evenodd",
|
|
3362
|
+
d: "M2 6C2 4.89543 2.89543 4 4 4H8C9.10457 4 10 4.89543 10 6V10C10 11.1046 9.10457 12 8 12H4C2.89543 12 2 11.1046 2 10V6ZM8 6H4V10H8V6Z",
|
|
3363
|
+
fill: "currentColor"
|
|
3364
|
+
}
|
|
3365
|
+
),
|
|
3366
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3367
|
+
"path",
|
|
3368
|
+
{
|
|
3369
|
+
fillRule: "evenodd",
|
|
3370
|
+
clipRule: "evenodd",
|
|
3371
|
+
d: "M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071L2.29289 17.7071C1.90237 17.3166 1.90237 16.6834 2.29289 16.2929C2.68342 15.9024 3.31658 15.9024 3.70711 16.2929L5 17.5858L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z",
|
|
3372
|
+
fill: "currentColor"
|
|
3373
|
+
}
|
|
3374
|
+
),
|
|
3375
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3376
|
+
"path",
|
|
3377
|
+
{
|
|
3378
|
+
fillRule: "evenodd",
|
|
3379
|
+
clipRule: "evenodd",
|
|
3380
|
+
d: "M12 6C12 5.44772 12.4477 5 13 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H13C12.4477 7 12 6.55228 12 6Z",
|
|
3381
|
+
fill: "currentColor"
|
|
3382
|
+
}
|
|
3383
|
+
),
|
|
3384
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3385
|
+
"path",
|
|
3386
|
+
{
|
|
3387
|
+
fillRule: "evenodd",
|
|
3388
|
+
clipRule: "evenodd",
|
|
3389
|
+
d: "M12 12C12 11.4477 12.4477 11 13 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H13C12.4477 13 12 12.5523 12 12Z",
|
|
3390
|
+
fill: "currentColor"
|
|
3391
|
+
}
|
|
3392
|
+
),
|
|
3393
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3394
|
+
"path",
|
|
3395
|
+
{
|
|
3396
|
+
fillRule: "evenodd",
|
|
3397
|
+
clipRule: "evenodd",
|
|
3398
|
+
d: "M12 18C12 17.4477 12.4477 17 13 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H13C12.4477 19 12 18.5523 12 18Z",
|
|
3399
|
+
fill: "currentColor"
|
|
3400
|
+
}
|
|
3401
|
+
)
|
|
3402
|
+
] });
|
|
3403
|
+
});
|
|
3404
|
+
ListTodoIcon.displayName = "ListTodoIcon";
|
|
3405
|
+
var listOptions = [
|
|
3406
|
+
{
|
|
3407
|
+
label: "\u65E0\u5E8F\u5217\u8868",
|
|
3408
|
+
type: "bulletList",
|
|
3409
|
+
icon: ListIcon
|
|
3410
|
+
},
|
|
3411
|
+
{
|
|
3412
|
+
label: "\u6709\u5E8F\u5217\u8868",
|
|
3413
|
+
type: "orderedList",
|
|
3414
|
+
icon: ListOrderedIcon
|
|
3415
|
+
},
|
|
3416
|
+
{
|
|
3417
|
+
label: "\u4EFB\u52A1\u5217\u8868",
|
|
3418
|
+
type: "taskList",
|
|
3419
|
+
icon: ListTodoIcon
|
|
3420
|
+
}
|
|
3421
|
+
];
|
|
3422
|
+
var listShortcutKeys = {
|
|
3423
|
+
bulletList: "Ctrl-Shift-8",
|
|
3424
|
+
orderedList: "Ctrl-Shift-7",
|
|
3425
|
+
taskList: "Ctrl-Shift-9"
|
|
3426
|
+
};
|
|
3427
|
+
function canToggleList(editor, type) {
|
|
3428
|
+
if (!editor) {
|
|
3429
|
+
return false;
|
|
3430
|
+
}
|
|
3431
|
+
switch (type) {
|
|
3432
|
+
case "bulletList":
|
|
3433
|
+
return editor.can().toggleBulletList();
|
|
3434
|
+
case "orderedList":
|
|
3435
|
+
return editor.can().toggleOrderedList();
|
|
3436
|
+
case "taskList":
|
|
3437
|
+
return editor.can().toggleList("taskList", "taskItem");
|
|
3438
|
+
default:
|
|
3439
|
+
return false;
|
|
3440
|
+
}
|
|
3441
|
+
}
|
|
3442
|
+
function isListActive(editor, type) {
|
|
3443
|
+
if (!editor) return false;
|
|
3444
|
+
switch (type) {
|
|
3445
|
+
case "bulletList":
|
|
3446
|
+
return editor.isActive("bulletList");
|
|
3447
|
+
case "orderedList":
|
|
3448
|
+
return editor.isActive("orderedList");
|
|
3449
|
+
case "taskList":
|
|
3450
|
+
return editor.isActive("taskList");
|
|
3451
|
+
default:
|
|
3452
|
+
return false;
|
|
3453
|
+
}
|
|
3454
|
+
}
|
|
3455
|
+
function toggleList(editor, type) {
|
|
3456
|
+
if (!editor) return;
|
|
3457
|
+
switch (type) {
|
|
3458
|
+
case "bulletList":
|
|
3459
|
+
editor.chain().focus().toggleBulletList().run();
|
|
3460
|
+
break;
|
|
3461
|
+
case "orderedList":
|
|
3462
|
+
editor.chain().focus().toggleOrderedList().run();
|
|
3463
|
+
break;
|
|
3464
|
+
case "taskList":
|
|
3465
|
+
editor.chain().focus().toggleList("taskList", "taskItem").run();
|
|
3466
|
+
break;
|
|
3467
|
+
}
|
|
3468
|
+
}
|
|
3469
|
+
function getListOption(type) {
|
|
3470
|
+
return listOptions.find((option) => option.type === type);
|
|
3471
|
+
}
|
|
3472
|
+
function shouldShowListButton(params) {
|
|
3473
|
+
const { editor, type, hideWhenUnavailable, listInSchema } = params;
|
|
3474
|
+
if (!listInSchema || !editor) {
|
|
3475
|
+
return false;
|
|
3476
|
+
}
|
|
3477
|
+
if (hideWhenUnavailable) {
|
|
3478
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggleList(editor, type)) {
|
|
3479
|
+
return false;
|
|
3480
|
+
}
|
|
3481
|
+
}
|
|
3482
|
+
return true;
|
|
3483
|
+
}
|
|
3484
|
+
function useListState(editor, type) {
|
|
3485
|
+
const listInSchema = isNodeInSchema(type, editor);
|
|
3486
|
+
const listOption = getListOption(type);
|
|
3487
|
+
const isActive = isListActive(editor, type);
|
|
3488
|
+
const shortcutKey = listShortcutKeys[type];
|
|
3489
|
+
return {
|
|
3490
|
+
listInSchema,
|
|
3491
|
+
listOption,
|
|
3492
|
+
isActive,
|
|
3493
|
+
shortcutKey
|
|
3494
|
+
};
|
|
3495
|
+
}
|
|
3496
|
+
var ListButton = React16__namespace.forwardRef(
|
|
3497
|
+
({ editor: providedEditor, type, hideWhenUnavailable = false, className = "", onClick, text, children, ...buttonProps }, ref) => {
|
|
3498
|
+
const editor = useTiptapEditor(providedEditor);
|
|
3499
|
+
const { listInSchema, listOption, isActive, shortcutKey } = useListState(editor, type);
|
|
3500
|
+
const Icon = listOption?.icon || ListIcon;
|
|
3501
|
+
const handleClick = React16__namespace.useCallback(
|
|
3502
|
+
(e) => {
|
|
3503
|
+
onClick?.(e);
|
|
3504
|
+
if (!e.defaultPrevented && editor) {
|
|
3505
|
+
toggleList(editor, type);
|
|
3506
|
+
}
|
|
3507
|
+
},
|
|
3508
|
+
[onClick, editor, type]
|
|
3509
|
+
);
|
|
3510
|
+
const show = React16__namespace.useMemo(() => {
|
|
3511
|
+
return shouldShowListButton({
|
|
3512
|
+
editor,
|
|
3513
|
+
type,
|
|
3514
|
+
hideWhenUnavailable,
|
|
3515
|
+
listInSchema
|
|
3516
|
+
});
|
|
3517
|
+
}, [editor, type, hideWhenUnavailable, listInSchema]);
|
|
3518
|
+
if (!show || !editor || !editor.isEditable) {
|
|
3519
|
+
return null;
|
|
3520
|
+
}
|
|
3521
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3522
|
+
Button2,
|
|
3523
|
+
{
|
|
3524
|
+
type: "button",
|
|
3525
|
+
className: className.trim(),
|
|
3526
|
+
"data-style": "ghost",
|
|
3527
|
+
"data-active-state": isActive ? "on" : "off",
|
|
3528
|
+
role: "button",
|
|
3529
|
+
tabIndex: -1,
|
|
3530
|
+
"aria-label": listOption?.label || type,
|
|
3531
|
+
"aria-pressed": isActive,
|
|
3532
|
+
tooltip: listOption?.label || type,
|
|
3533
|
+
shortcutKeys: shortcutKey,
|
|
3534
|
+
onClick: handleClick,
|
|
3535
|
+
...buttonProps,
|
|
3536
|
+
ref,
|
|
3537
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3538
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
3539
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
3540
|
+
] })
|
|
3541
|
+
}
|
|
3542
|
+
);
|
|
3543
|
+
}
|
|
3544
|
+
);
|
|
3545
|
+
ListButton.displayName = "ListButton";
|
|
3546
|
+
function canToggleAnyList(editor, listTypes) {
|
|
3547
|
+
if (!editor) return false;
|
|
3548
|
+
return listTypes.some((type) => canToggleList(editor, type));
|
|
3549
|
+
}
|
|
3550
|
+
function isAnyListActive(editor, listTypes) {
|
|
3551
|
+
if (!editor) return false;
|
|
3552
|
+
return listTypes.some((type) => isListActive(editor, type));
|
|
3553
|
+
}
|
|
3554
|
+
function getFilteredListOptions(availableTypes) {
|
|
3555
|
+
return listOptions.filter((option) => !option.type || availableTypes.includes(option.type));
|
|
3556
|
+
}
|
|
3557
|
+
function shouldShowListDropdown(params) {
|
|
3558
|
+
const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
|
|
3559
|
+
if (!listInSchema || !editor) {
|
|
3560
|
+
return false;
|
|
3561
|
+
}
|
|
3562
|
+
if (hideWhenUnavailable) {
|
|
3563
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggleAny) {
|
|
3564
|
+
return false;
|
|
3565
|
+
}
|
|
3566
|
+
}
|
|
3567
|
+
return true;
|
|
3568
|
+
}
|
|
3569
|
+
function useListDropdownState(editor, availableTypes) {
|
|
3570
|
+
const [isOpen, setIsOpen] = React16__namespace.useState(false);
|
|
3571
|
+
const listInSchema = availableTypes.some((type) => isNodeInSchema(type, editor));
|
|
3572
|
+
const filteredLists = React16__namespace.useMemo(() => getFilteredListOptions(availableTypes), [availableTypes]);
|
|
3573
|
+
const canToggleAny = canToggleAnyList(editor, availableTypes);
|
|
3574
|
+
const isAnyActive = isAnyListActive(editor, availableTypes);
|
|
3575
|
+
const handleOpenChange = React16__namespace.useCallback((open, callback) => {
|
|
3576
|
+
setIsOpen(open);
|
|
3577
|
+
callback?.(open);
|
|
3578
|
+
}, []);
|
|
3579
|
+
return {
|
|
3580
|
+
isOpen,
|
|
3581
|
+
setIsOpen,
|
|
3582
|
+
listInSchema,
|
|
3583
|
+
filteredLists,
|
|
3584
|
+
canToggleAny,
|
|
3585
|
+
isAnyActive,
|
|
3586
|
+
handleOpenChange
|
|
3587
|
+
};
|
|
3588
|
+
}
|
|
3589
|
+
function useActiveListIcon(editor, filteredLists) {
|
|
3590
|
+
return React16__namespace.useCallback(() => {
|
|
3591
|
+
const activeOption = filteredLists.find((option) => isListActive(editor, option.type));
|
|
3592
|
+
return activeOption ? /* @__PURE__ */ jsxRuntime.jsx(activeOption.icon, { className: "tiptap-button-icon" }) : /* @__PURE__ */ jsxRuntime.jsx(ListIcon, { className: "tiptap-button-icon" });
|
|
3593
|
+
}, [editor, filteredLists]);
|
|
3594
|
+
}
|
|
3595
|
+
function ListDropdownMenu({
|
|
3596
|
+
editor: providedEditor,
|
|
3597
|
+
types = ["bulletList", "orderedList", "taskList"],
|
|
3598
|
+
hideWhenUnavailable = false,
|
|
3599
|
+
onOpenChange,
|
|
3600
|
+
...props
|
|
3601
|
+
}) {
|
|
3602
|
+
const editor = useTiptapEditor(providedEditor);
|
|
3603
|
+
const { isOpen, listInSchema, filteredLists, canToggleAny, isAnyActive, handleOpenChange } = useListDropdownState(editor, types);
|
|
3604
|
+
const getActiveIcon = useActiveListIcon(editor, filteredLists);
|
|
3605
|
+
const show = React16__namespace.useMemo(() => {
|
|
3606
|
+
return shouldShowListDropdown({
|
|
3607
|
+
editor,
|
|
3608
|
+
hideWhenUnavailable,
|
|
3609
|
+
listInSchema,
|
|
3610
|
+
canToggleAny
|
|
3611
|
+
});
|
|
3612
|
+
}, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
|
|
3613
|
+
const handleOnOpenChange = React16__namespace.useCallback((open) => handleOpenChange(open, onOpenChange), [handleOpenChange, onOpenChange]);
|
|
3614
|
+
if (!show || !editor || !editor.isEditable) {
|
|
3615
|
+
return null;
|
|
3616
|
+
}
|
|
3617
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
|
|
3618
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3619
|
+
Button2,
|
|
3620
|
+
{
|
|
3621
|
+
type: "button",
|
|
3622
|
+
"data-style": "ghost",
|
|
3623
|
+
"data-active-state": isAnyActive ? "on" : "off",
|
|
3624
|
+
role: "button",
|
|
3625
|
+
tabIndex: -1,
|
|
3626
|
+
"aria-label": "List options",
|
|
3627
|
+
tooltip: "\u5217\u8868",
|
|
3628
|
+
...props,
|
|
3629
|
+
children: [
|
|
3630
|
+
getActiveIcon(),
|
|
3631
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "tiptap-button-dropdown-small" })
|
|
3632
|
+
]
|
|
3633
|
+
}
|
|
3634
|
+
) }),
|
|
3635
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuGroup, { children: filteredLists.map((option) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ListButton, { editor, type: option.type, text: option.label, hideWhenUnavailable, tooltip: "" }) }, option.type)) }) })
|
|
3636
|
+
] });
|
|
3637
|
+
}
|
|
3638
|
+
var BoldIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3639
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3640
|
+
"path",
|
|
3641
|
+
{
|
|
3642
|
+
fillRule: "evenodd",
|
|
3643
|
+
clipRule: "evenodd",
|
|
3644
|
+
d: "M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z",
|
|
3645
|
+
fill: "currentColor"
|
|
3646
|
+
}
|
|
3647
|
+
) });
|
|
3648
|
+
});
|
|
3649
|
+
BoldIcon.displayName = "BoldIcon";
|
|
3650
|
+
var Code2Icon = React16__namespace.memo(({ className, ...props }) => {
|
|
3651
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3652
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3653
|
+
"path",
|
|
3654
|
+
{
|
|
3655
|
+
d: "M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z",
|
|
3656
|
+
fill: "currentColor"
|
|
3657
|
+
}
|
|
3658
|
+
),
|
|
3659
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3660
|
+
"path",
|
|
3661
|
+
{
|
|
3662
|
+
d: "M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z",
|
|
3663
|
+
fill: "currentColor"
|
|
3664
|
+
}
|
|
3665
|
+
),
|
|
3666
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3667
|
+
"path",
|
|
3668
|
+
{
|
|
3669
|
+
d: "M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z",
|
|
3670
|
+
fill: "currentColor"
|
|
3671
|
+
}
|
|
3672
|
+
)
|
|
3673
|
+
] });
|
|
3674
|
+
});
|
|
3675
|
+
Code2Icon.displayName = "Code2Icon";
|
|
3676
|
+
var ItalicIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3677
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3678
|
+
"path",
|
|
3679
|
+
{
|
|
3680
|
+
d: "M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z",
|
|
3681
|
+
fill: "currentColor"
|
|
3682
|
+
}
|
|
3683
|
+
) });
|
|
3684
|
+
});
|
|
3685
|
+
ItalicIcon.displayName = "ItalicIcon";
|
|
3686
|
+
var StrikeIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3687
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3688
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3689
|
+
"path",
|
|
3690
|
+
{
|
|
3691
|
+
d: "M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z",
|
|
3692
|
+
fill: "currentColor"
|
|
3693
|
+
}
|
|
3694
|
+
),
|
|
3695
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3696
|
+
"path",
|
|
3697
|
+
{
|
|
3698
|
+
d: "M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z",
|
|
3699
|
+
fill: "currentColor"
|
|
3700
|
+
}
|
|
3701
|
+
)
|
|
3702
|
+
] });
|
|
3703
|
+
});
|
|
3704
|
+
StrikeIcon.displayName = "StrikeIcon";
|
|
3705
|
+
var SubscriptIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3706
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3707
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3708
|
+
"path",
|
|
3709
|
+
{
|
|
3710
|
+
fillRule: "evenodd",
|
|
3711
|
+
clipRule: "evenodd",
|
|
3712
|
+
d: "M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z",
|
|
3713
|
+
fill: "currentColor"
|
|
3714
|
+
}
|
|
3715
|
+
),
|
|
3716
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3717
|
+
"path",
|
|
3718
|
+
{
|
|
3719
|
+
fillRule: "evenodd",
|
|
3720
|
+
clipRule: "evenodd",
|
|
3721
|
+
d: "M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z",
|
|
3722
|
+
fill: "currentColor"
|
|
3723
|
+
}
|
|
3724
|
+
),
|
|
3725
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3726
|
+
"path",
|
|
3727
|
+
{
|
|
3728
|
+
fillRule: "evenodd",
|
|
3729
|
+
clipRule: "evenodd",
|
|
3730
|
+
d: "M17.4079 14.3995C18.0284 14.0487 18.7506 13.9217 19.4536 14.0397C20.1566 14.1578 20.7977 14.5138 21.2696 15.0481L21.2779 15.0574L21.2778 15.0575C21.7439 15.5988 22 16.2903 22 17C22 18.0823 21.3962 18.8401 20.7744 19.3404C20.194 19.8073 19.4858 20.141 18.9828 20.378C18.9638 20.387 18.9451 20.3958 18.9266 20.4045C18.4473 20.6306 18.2804 20.7817 18.1922 20.918C18.1773 20.9412 18.1619 20.9681 18.1467 21H21C21.5523 21 22 21.4477 22 22C22 22.5523 21.5523 23 21 23H17C16.4477 23 16 22.5523 16 22C16 21.1708 16.1176 20.4431 16.5128 19.832C16.9096 19.2184 17.4928 18.8695 18.0734 18.5956C18.6279 18.334 19.138 18.0901 19.5207 17.7821C19.8838 17.49 20 17.2477 20 17C20 16.7718 19.9176 16.5452 19.7663 16.3672C19.5983 16.1792 19.3712 16.0539 19.1224 16.0121C18.8722 15.9701 18.6152 16.015 18.3942 16.1394C18.1794 16.2628 18.0205 16.4549 17.9422 16.675C17.7572 17.1954 17.1854 17.4673 16.665 17.2822C16.1446 17.0972 15.8728 16.5254 16.0578 16.005C16.2993 15.3259 16.7797 14.7584 17.4039 14.4018L17.4079 14.3995L17.4079 14.3995Z",
|
|
3731
|
+
fill: "currentColor"
|
|
3732
|
+
}
|
|
3733
|
+
)
|
|
3734
|
+
] });
|
|
3735
|
+
});
|
|
3736
|
+
SubscriptIcon.displayName = "SubscriptIcon";
|
|
3737
|
+
var SuperscriptIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3738
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3739
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3740
|
+
"path",
|
|
3741
|
+
{
|
|
3742
|
+
fillRule: "evenodd",
|
|
3743
|
+
clipRule: "evenodd",
|
|
3744
|
+
d: "M12.7071 7.29289C13.0976 7.68342 13.0976 8.31658 12.7071 8.70711L4.70711 16.7071C4.31658 17.0976 3.68342 17.0976 3.29289 16.7071C2.90237 16.3166 2.90237 15.6834 3.29289 15.2929L11.2929 7.29289C11.6834 6.90237 12.3166 6.90237 12.7071 7.29289Z",
|
|
3745
|
+
fill: "currentColor"
|
|
3746
|
+
}
|
|
3747
|
+
),
|
|
3748
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3749
|
+
"path",
|
|
3750
|
+
{
|
|
3751
|
+
fillRule: "evenodd",
|
|
3752
|
+
clipRule: "evenodd",
|
|
3753
|
+
d: "M3.29289 7.29289C3.68342 6.90237 4.31658 6.90237 4.70711 7.29289L12.7071 15.2929C13.0976 15.6834 13.0976 16.3166 12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L3.29289 8.70711C2.90237 8.31658 2.90237 7.68342 3.29289 7.29289Z",
|
|
3754
|
+
fill: "currentColor"
|
|
3755
|
+
}
|
|
3756
|
+
),
|
|
3757
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3758
|
+
"path",
|
|
3759
|
+
{
|
|
3760
|
+
fillRule: "evenodd",
|
|
3761
|
+
clipRule: "evenodd",
|
|
3762
|
+
d: "M17.405 1.40657C18.0246 1.05456 18.7463 0.92634 19.4492 1.04344C20.1521 1.16054 20.7933 1.51583 21.2652 2.0497L21.2697 2.05469L21.2696 2.05471C21.7431 2.5975 22 3.28922 22 4.00203C22 5.08579 21.3952 5.84326 20.7727 6.34289C20.1966 6.80531 19.4941 7.13675 18.9941 7.37261C18.9714 7.38332 18.9491 7.39383 18.9273 7.40415C18.4487 7.63034 18.2814 7.78152 18.1927 7.91844C18.1778 7.94155 18.1625 7.96834 18.1473 8.00003H21C21.5523 8.00003 22 8.44774 22 9.00003C22 9.55231 21.5523 10 21 10H17C16.4477 10 16 9.55231 16 9.00003C16 8.17007 16.1183 7.44255 16.5138 6.83161C16.9107 6.21854 17.4934 5.86971 18.0728 5.59591C18.6281 5.33347 19.1376 5.09075 19.5208 4.78316C19.8838 4.49179 20 4.25026 20 4.00203C20 3.77192 19.9178 3.54865 19.7646 3.37182C19.5968 3.18324 19.3696 3.05774 19.1205 3.01625C18.8705 2.97459 18.6137 3.02017 18.3933 3.14533C18.1762 3.26898 18.0191 3.45826 17.9406 3.67557C17.7531 4.19504 17.18 4.46414 16.6605 4.27662C16.141 4.0891 15.8719 3.51596 16.0594 2.99649C16.303 2.3219 16.7817 1.76125 17.4045 1.40689L17.405 1.40657Z",
|
|
3763
|
+
fill: "currentColor"
|
|
3764
|
+
}
|
|
3765
|
+
)
|
|
3766
|
+
] });
|
|
3767
|
+
});
|
|
3768
|
+
SuperscriptIcon.displayName = "SuperscriptIcon";
|
|
3769
|
+
var UnderlineIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3770
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3771
|
+
"path",
|
|
3772
|
+
{
|
|
3773
|
+
fillRule: "evenodd",
|
|
3774
|
+
clipRule: "evenodd",
|
|
3775
|
+
d: "M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z",
|
|
3776
|
+
fill: "currentColor"
|
|
3777
|
+
}
|
|
3778
|
+
) });
|
|
3779
|
+
});
|
|
3780
|
+
UnderlineIcon.displayName = "UnderlineIcon";
|
|
3781
|
+
var markIcons = {
|
|
3782
|
+
bold: BoldIcon,
|
|
3783
|
+
italic: ItalicIcon,
|
|
3784
|
+
underline: UnderlineIcon,
|
|
3785
|
+
strike: StrikeIcon,
|
|
3786
|
+
code: Code2Icon,
|
|
3787
|
+
superscript: SuperscriptIcon,
|
|
3788
|
+
subscript: SubscriptIcon
|
|
3789
|
+
};
|
|
3790
|
+
var markShortcutKeys = {
|
|
3791
|
+
bold: "Ctrl-b",
|
|
3792
|
+
italic: "Ctrl-i",
|
|
3793
|
+
underline: "Ctrl-u",
|
|
3794
|
+
strike: "Ctrl-Shift-s",
|
|
3795
|
+
code: "Ctrl-e",
|
|
3796
|
+
superscript: "Ctrl-.",
|
|
3797
|
+
subscript: "Ctrl-,"
|
|
3798
|
+
};
|
|
3799
|
+
var markActionLabels = {
|
|
3800
|
+
bold: "\u7C97\u4F53",
|
|
3801
|
+
italic: "\u659C\u4F53",
|
|
3802
|
+
underline: "\u4E0B\u5212\u7EBF",
|
|
3803
|
+
strike: "\u5220\u9664\u7EBF",
|
|
3804
|
+
code: "\u4EE3\u7801",
|
|
3805
|
+
superscript: "\u4E0A\u89D2\u6807",
|
|
3806
|
+
subscript: "\u4E0B\u89D2\u6807"
|
|
3807
|
+
};
|
|
3808
|
+
function canToggleMark(editor, type) {
|
|
3809
|
+
if (!editor) return false;
|
|
3810
|
+
try {
|
|
3811
|
+
return editor.can().toggleMark(type);
|
|
3812
|
+
} catch {
|
|
3813
|
+
return false;
|
|
3814
|
+
}
|
|
3815
|
+
}
|
|
3816
|
+
function isMarkActive(editor, type) {
|
|
3817
|
+
if (!editor) return false;
|
|
3818
|
+
return editor.isActive(type);
|
|
3819
|
+
}
|
|
3820
|
+
function toggleMark(editor, type) {
|
|
3821
|
+
if (!editor) return;
|
|
3822
|
+
editor.chain().focus().toggleMark(type).run();
|
|
3823
|
+
}
|
|
3824
|
+
function isMarkButtonDisabled(editor, type, userDisabled = false) {
|
|
3825
|
+
if (!editor) return true;
|
|
3826
|
+
if (userDisabled) return true;
|
|
3827
|
+
if (editor.isActive("codeBlock")) return true;
|
|
3828
|
+
if (!canToggleMark(editor, type)) return true;
|
|
3829
|
+
return false;
|
|
3830
|
+
}
|
|
3831
|
+
function shouldShowMarkButton(params) {
|
|
3832
|
+
const { editor, type, hideWhenUnavailable, markInSchema } = params;
|
|
3833
|
+
if (!markInSchema || !editor) {
|
|
3834
|
+
return false;
|
|
3835
|
+
}
|
|
3836
|
+
if (hideWhenUnavailable) {
|
|
3837
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggleMark(editor, type)) {
|
|
3838
|
+
return false;
|
|
3839
|
+
}
|
|
3840
|
+
}
|
|
3841
|
+
return true;
|
|
3842
|
+
}
|
|
3843
|
+
function getFormattedMarkName(type) {
|
|
3844
|
+
return markActionLabels[type] || type.charAt(0).toUpperCase() + type.slice(1);
|
|
3845
|
+
}
|
|
3846
|
+
function useMarkState(editor, type, disabled = false) {
|
|
3847
|
+
const markInSchema = isMarkInSchema(type, editor);
|
|
3848
|
+
const isDisabled = isMarkButtonDisabled(editor, type, disabled);
|
|
3849
|
+
const isActive = isMarkActive(editor, type);
|
|
3850
|
+
const Icon = markIcons[type];
|
|
3851
|
+
const shortcutKey = markShortcutKeys[type];
|
|
3852
|
+
const formattedName = getFormattedMarkName(type);
|
|
3853
|
+
return {
|
|
3854
|
+
markInSchema,
|
|
3855
|
+
isDisabled,
|
|
3856
|
+
isActive,
|
|
3857
|
+
Icon,
|
|
3858
|
+
shortcutKey,
|
|
3859
|
+
formattedName
|
|
3860
|
+
};
|
|
3861
|
+
}
|
|
3862
|
+
var MarkButton = React16__namespace.forwardRef(
|
|
3863
|
+
({ editor: providedEditor, type, text, hideWhenUnavailable = false, className = "", disabled, onClick, children, ...buttonProps }, ref) => {
|
|
3864
|
+
const editor = useTiptapEditor(providedEditor);
|
|
3865
|
+
const { markInSchema, isDisabled, isActive, Icon, shortcutKey, formattedName } = useMarkState(editor, type, disabled);
|
|
3866
|
+
const handleClick = React16__namespace.useCallback(
|
|
3867
|
+
(e) => {
|
|
3868
|
+
onClick?.(e);
|
|
3869
|
+
if (!e.defaultPrevented && !isDisabled && editor) {
|
|
3870
|
+
toggleMark(editor, type);
|
|
3871
|
+
}
|
|
3872
|
+
},
|
|
3873
|
+
[onClick, isDisabled, editor, type]
|
|
3874
|
+
);
|
|
3875
|
+
const show = React16__namespace.useMemo(() => {
|
|
3876
|
+
return shouldShowMarkButton({
|
|
3877
|
+
editor,
|
|
3878
|
+
type,
|
|
3879
|
+
hideWhenUnavailable,
|
|
3880
|
+
markInSchema
|
|
3881
|
+
});
|
|
3882
|
+
}, [editor, type, hideWhenUnavailable, markInSchema]);
|
|
3883
|
+
if (!show || !editor || !editor.isEditable) {
|
|
3884
|
+
return null;
|
|
3885
|
+
}
|
|
3886
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3887
|
+
Button2,
|
|
3888
|
+
{
|
|
3889
|
+
type: "button",
|
|
3890
|
+
className: className.trim(),
|
|
3891
|
+
disabled: isDisabled,
|
|
3892
|
+
"data-style": "ghost",
|
|
3893
|
+
"data-active-state": isActive ? "on" : "off",
|
|
3894
|
+
"data-disabled": isDisabled,
|
|
3895
|
+
role: "button",
|
|
3896
|
+
tabIndex: -1,
|
|
3897
|
+
"aria-label": type,
|
|
3898
|
+
"aria-pressed": isActive,
|
|
3899
|
+
tooltip: formattedName,
|
|
3900
|
+
shortcutKeys: shortcutKey,
|
|
3901
|
+
onClick: handleClick,
|
|
3902
|
+
...buttonProps,
|
|
3903
|
+
ref,
|
|
3904
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3905
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
3906
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
3907
|
+
] })
|
|
3908
|
+
}
|
|
3909
|
+
);
|
|
3910
|
+
}
|
|
3911
|
+
);
|
|
3912
|
+
MarkButton.displayName = "MarkButton";
|
|
3913
|
+
var BlockQuoteIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3914
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3915
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3916
|
+
"path",
|
|
3917
|
+
{
|
|
3918
|
+
fillRule: "evenodd",
|
|
3919
|
+
clipRule: "evenodd",
|
|
3920
|
+
d: "M8 6C8 5.44772 8.44772 5 9 5H16C16.5523 5 17 5.44772 17 6C17 6.55228 16.5523 7 16 7H9C8.44772 7 8 6.55228 8 6Z",
|
|
3921
|
+
fill: "currentColor"
|
|
3922
|
+
}
|
|
3923
|
+
),
|
|
3924
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3925
|
+
"path",
|
|
3926
|
+
{
|
|
3927
|
+
fillRule: "evenodd",
|
|
3928
|
+
clipRule: "evenodd",
|
|
3929
|
+
d: "M4 3C4.55228 3 5 3.44772 5 4L5 20C5 20.5523 4.55229 21 4 21C3.44772 21 3 20.5523 3 20L3 4C3 3.44772 3.44772 3 4 3Z",
|
|
3930
|
+
fill: "currentColor"
|
|
3931
|
+
}
|
|
3932
|
+
),
|
|
3933
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3934
|
+
"path",
|
|
3935
|
+
{
|
|
3936
|
+
fillRule: "evenodd",
|
|
3937
|
+
clipRule: "evenodd",
|
|
3938
|
+
d: "M8 12C8 11.4477 8.44772 11 9 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H9C8.44772 13 8 12.5523 8 12Z",
|
|
3939
|
+
fill: "currentColor"
|
|
3940
|
+
}
|
|
3941
|
+
),
|
|
3942
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3943
|
+
"path",
|
|
3944
|
+
{
|
|
3945
|
+
fillRule: "evenodd",
|
|
3946
|
+
clipRule: "evenodd",
|
|
3947
|
+
d: "M8 18C8 17.4477 8.44772 17 9 17H16C16.5523 17 17 17.4477 17 18C17 18.5523 16.5523 19 16 19H9C8.44772 19 8 18.5523 8 18Z",
|
|
3948
|
+
fill: "currentColor"
|
|
3949
|
+
}
|
|
3950
|
+
)
|
|
3951
|
+
] });
|
|
3952
|
+
});
|
|
3953
|
+
BlockQuoteIcon.displayName = "BlockQuoteIcon";
|
|
3954
|
+
var CodeBlockIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
3955
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
3956
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3957
|
+
"path",
|
|
3958
|
+
{
|
|
3959
|
+
fillRule: "evenodd",
|
|
3960
|
+
clipRule: "evenodd",
|
|
3961
|
+
d: "M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z",
|
|
3962
|
+
fill: "currentColor"
|
|
3963
|
+
}
|
|
3964
|
+
),
|
|
3965
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3966
|
+
"path",
|
|
3967
|
+
{
|
|
3968
|
+
fillRule: "evenodd",
|
|
3969
|
+
clipRule: "evenodd",
|
|
3970
|
+
d: "M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z",
|
|
3971
|
+
fill: "currentColor"
|
|
3972
|
+
}
|
|
3973
|
+
),
|
|
3974
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3975
|
+
"path",
|
|
3976
|
+
{
|
|
3977
|
+
fillRule: "evenodd",
|
|
3978
|
+
clipRule: "evenodd",
|
|
3979
|
+
d: "M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z",
|
|
3980
|
+
fill: "currentColor"
|
|
3981
|
+
}
|
|
3982
|
+
)
|
|
3983
|
+
] });
|
|
3984
|
+
});
|
|
3985
|
+
CodeBlockIcon.displayName = "CodeBlockIcon";
|
|
3986
|
+
var nodeIcons = {
|
|
3987
|
+
codeBlock: CodeBlockIcon,
|
|
3988
|
+
blockquote: BlockQuoteIcon
|
|
3989
|
+
};
|
|
3990
|
+
var nodeShortcutKeys = {
|
|
3991
|
+
codeBlock: "Ctrl-Alt-c",
|
|
3992
|
+
blockquote: "Ctrl-Shift-b"
|
|
3993
|
+
};
|
|
3994
|
+
var nodeLabels = {
|
|
3995
|
+
codeBlock: "\u4EE3\u7801\u5757",
|
|
3996
|
+
blockquote: "\u5F15\u7528\u5757"
|
|
3997
|
+
};
|
|
3998
|
+
function canToggleNode(editor, type) {
|
|
3999
|
+
if (!editor) return false;
|
|
4000
|
+
try {
|
|
4001
|
+
return type === "codeBlock" ? editor.can().toggleNode("codeBlock", "paragraph") : editor.can().toggleWrap("blockquote");
|
|
4002
|
+
} catch {
|
|
4003
|
+
return false;
|
|
4004
|
+
}
|
|
4005
|
+
}
|
|
4006
|
+
function isNodeActive(editor, type) {
|
|
4007
|
+
if (!editor) return false;
|
|
4008
|
+
return editor.isActive(type);
|
|
4009
|
+
}
|
|
4010
|
+
function toggleNode(editor, type) {
|
|
4011
|
+
if (!editor) return false;
|
|
4012
|
+
if (type === "codeBlock") {
|
|
4013
|
+
return editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
|
|
4014
|
+
} else {
|
|
4015
|
+
return editor.chain().focus().toggleWrap("blockquote").run();
|
|
4016
|
+
}
|
|
4017
|
+
}
|
|
4018
|
+
function isNodeButtonDisabled(editor, canToggle, userDisabled = false) {
|
|
4019
|
+
if (!editor) return true;
|
|
4020
|
+
if (userDisabled) return true;
|
|
4021
|
+
if (!canToggle) return true;
|
|
4022
|
+
return false;
|
|
4023
|
+
}
|
|
4024
|
+
function shouldShowNodeButton(params) {
|
|
4025
|
+
const { editor, hideWhenUnavailable, nodeInSchema, canToggle } = params;
|
|
4026
|
+
if (!nodeInSchema || !editor) {
|
|
4027
|
+
return false;
|
|
4028
|
+
}
|
|
4029
|
+
if (hideWhenUnavailable) {
|
|
4030
|
+
if (react.isNodeSelection(editor.state.selection) || !canToggle) {
|
|
4031
|
+
return false;
|
|
4032
|
+
}
|
|
4033
|
+
}
|
|
4034
|
+
return Boolean(editor?.isEditable);
|
|
4035
|
+
}
|
|
4036
|
+
function useNodeState(editor, type, disabled = false, hideWhenUnavailable = false) {
|
|
4037
|
+
const nodeInSchema = isNodeInSchema(type, editor);
|
|
4038
|
+
const canToggle = canToggleNode(editor, type);
|
|
4039
|
+
const isDisabled = isNodeButtonDisabled(editor, canToggle, disabled);
|
|
4040
|
+
const isActive = isNodeActive(editor, type);
|
|
4041
|
+
const shouldShow = React16__namespace.useMemo(
|
|
4042
|
+
() => shouldShowNodeButton({
|
|
4043
|
+
editor,
|
|
4044
|
+
hideWhenUnavailable,
|
|
4045
|
+
nodeInSchema,
|
|
4046
|
+
canToggle
|
|
4047
|
+
}),
|
|
4048
|
+
[editor, type, hideWhenUnavailable, nodeInSchema, canToggle]
|
|
4049
|
+
);
|
|
4050
|
+
const handleToggle = React16__namespace.useCallback(() => {
|
|
4051
|
+
if (!isDisabled && editor) {
|
|
4052
|
+
return toggleNode(editor, type);
|
|
4053
|
+
}
|
|
4054
|
+
return false;
|
|
4055
|
+
}, [editor, type, isDisabled]);
|
|
4056
|
+
const Icon = nodeIcons[type];
|
|
4057
|
+
const shortcutKey = nodeShortcutKeys[type];
|
|
4058
|
+
const label = nodeLabels[type];
|
|
4059
|
+
return {
|
|
4060
|
+
nodeInSchema,
|
|
4061
|
+
canToggle,
|
|
4062
|
+
isDisabled,
|
|
4063
|
+
isActive,
|
|
4064
|
+
shouldShow,
|
|
4065
|
+
handleToggle,
|
|
4066
|
+
Icon,
|
|
4067
|
+
shortcutKey,
|
|
4068
|
+
label
|
|
4069
|
+
};
|
|
4070
|
+
}
|
|
4071
|
+
var NodeButton = React16__namespace.forwardRef(
|
|
4072
|
+
({ editor: providedEditor, type, text, hideWhenUnavailable = false, className = "", disabled, onClick, children, ...buttonProps }, ref) => {
|
|
4073
|
+
const editor = useTiptapEditor(providedEditor);
|
|
4074
|
+
const { isDisabled, isActive, shouldShow, handleToggle, Icon, shortcutKey, label } = useNodeState(editor, type, disabled, hideWhenUnavailable);
|
|
4075
|
+
const handleClick = React16__namespace.useCallback(
|
|
4076
|
+
(e) => {
|
|
4077
|
+
onClick?.(e);
|
|
4078
|
+
if (!e.defaultPrevented && !isDisabled) {
|
|
4079
|
+
handleToggle();
|
|
4080
|
+
}
|
|
4081
|
+
},
|
|
4082
|
+
[onClick, isDisabled, handleToggle]
|
|
4083
|
+
);
|
|
4084
|
+
if (!shouldShow || !editor || !editor.isEditable) {
|
|
4085
|
+
return null;
|
|
4086
|
+
}
|
|
4087
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4088
|
+
Button2,
|
|
4089
|
+
{
|
|
4090
|
+
type: "button",
|
|
4091
|
+
className: className.trim(),
|
|
4092
|
+
disabled: isDisabled,
|
|
4093
|
+
"data-style": "ghost",
|
|
4094
|
+
"data-active-state": isActive ? "on" : "off",
|
|
4095
|
+
"data-disabled": isDisabled,
|
|
4096
|
+
role: "button",
|
|
4097
|
+
tabIndex: -1,
|
|
4098
|
+
"aria-label": type,
|
|
4099
|
+
"aria-pressed": isActive,
|
|
4100
|
+
tooltip: label,
|
|
4101
|
+
shortcutKeys: shortcutKey,
|
|
4102
|
+
onClick: handleClick,
|
|
4103
|
+
...buttonProps,
|
|
4104
|
+
ref,
|
|
4105
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4106
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
4107
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
4108
|
+
] })
|
|
4109
|
+
}
|
|
4110
|
+
);
|
|
4111
|
+
}
|
|
4112
|
+
);
|
|
4113
|
+
NodeButton.displayName = "NodeButton";
|
|
4114
|
+
var QuoteIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4115
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4116
|
+
"path",
|
|
4117
|
+
{
|
|
4118
|
+
d: "M6 17H10L8.5 15.5C9.33 15.5 10 14.83 10 14V10C10 8.9 9.1 8 8 8H6C5.45 8 5 8.45 5 9V15C5 16.1 5.9 17 6 17ZM14 17H18L16.5 15.5C17.33 15.5 18 14.83 18 14V10C18 8.9 17.1 8 16 8H14C13.45 8 13 8.45 13 9V15C13 16.1 13.9 17 14 17Z",
|
|
4119
|
+
fill: "currentColor"
|
|
4120
|
+
}
|
|
4121
|
+
) });
|
|
4122
|
+
});
|
|
4123
|
+
QuoteIcon.displayName = "QuoteIcon";
|
|
4124
|
+
function hasSelection(editor) {
|
|
4125
|
+
if (!editor) return false;
|
|
4126
|
+
const selection = editor.state.selection;
|
|
4127
|
+
return !!selection && !selection.empty;
|
|
4128
|
+
}
|
|
4129
|
+
function getSelectedText(editor) {
|
|
4130
|
+
if (!editor) return "";
|
|
4131
|
+
const { from, to } = editor.state.selection;
|
|
4132
|
+
return editor.state.doc.textBetween(from, to, " ");
|
|
4133
|
+
}
|
|
4134
|
+
function useQuote(editor, disabled = false, hideWhenUnavailable = false) {
|
|
4135
|
+
const selectionAvailable = React16__namespace.useMemo(() => hasSelection(editor), [editor?.state.selection]);
|
|
4136
|
+
const isDisabled = React16__namespace.useMemo(() => !selectionAvailable || disabled, [selectionAvailable, disabled]);
|
|
4137
|
+
const shouldShow = React16__namespace.useMemo(() => {
|
|
4138
|
+
if (!editor?.isEditable) return false;
|
|
4139
|
+
if (hideWhenUnavailable && !selectionAvailable) return false;
|
|
4140
|
+
return true;
|
|
4141
|
+
}, [editor, hideWhenUnavailable, selectionAvailable]);
|
|
4142
|
+
const getText = React16__namespace.useCallback(() => getSelectedText(editor), [editor]);
|
|
4143
|
+
return {
|
|
4144
|
+
isDisabled,
|
|
4145
|
+
shouldShow,
|
|
4146
|
+
getText
|
|
4147
|
+
};
|
|
4148
|
+
}
|
|
4149
|
+
var QuoteButton = React16__namespace.forwardRef(
|
|
4150
|
+
({ editor: providedEditor, onQuote, text, className = "", disabled = false, hideWhenUnavailable = false, onClick, children, ...buttonProps }, ref) => {
|
|
4151
|
+
const editor = useTiptapEditor(providedEditor);
|
|
4152
|
+
const { isDisabled, shouldShow, getText } = useQuote(editor, disabled, hideWhenUnavailable);
|
|
4153
|
+
const handleClick = React16__namespace.useCallback(
|
|
4154
|
+
(e) => {
|
|
4155
|
+
onClick?.(e);
|
|
4156
|
+
if (e.defaultPrevented || isDisabled || !editor) return;
|
|
4157
|
+
const selectedText = getText();
|
|
4158
|
+
if (selectedText) {
|
|
4159
|
+
onQuote?.(selectedText);
|
|
4160
|
+
} else {
|
|
4161
|
+
console.warn("No text selected for quote.");
|
|
4162
|
+
}
|
|
4163
|
+
},
|
|
4164
|
+
[onClick, editor, isDisabled, getText, onQuote]
|
|
4165
|
+
);
|
|
4166
|
+
if (!shouldShow || !editor || !editor.isEditable) return null;
|
|
4167
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4168
|
+
Button2,
|
|
4169
|
+
{
|
|
4170
|
+
type: "button",
|
|
4171
|
+
className: className.trim(),
|
|
4172
|
+
disabled: isDisabled,
|
|
4173
|
+
"data-style": "ghost",
|
|
4174
|
+
"data-disabled": isDisabled,
|
|
4175
|
+
tooltip: "\u5F15\u7528\u9009\u4E2D\u6587\u672C",
|
|
4176
|
+
onClick: handleClick,
|
|
4177
|
+
...buttonProps,
|
|
4178
|
+
ref,
|
|
4179
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4180
|
+
/* @__PURE__ */ jsxRuntime.jsx(QuoteIcon, { className: "tiptap-button-icon" }),
|
|
4181
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
4182
|
+
] })
|
|
4183
|
+
}
|
|
4184
|
+
);
|
|
4185
|
+
}
|
|
4186
|
+
);
|
|
4187
|
+
QuoteButton.displayName = "QuoteButton";
|
|
4188
|
+
var AlignCenterIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4189
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
4190
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4191
|
+
"path",
|
|
4192
|
+
{
|
|
4193
|
+
fillRule: "evenodd",
|
|
4194
|
+
clipRule: "evenodd",
|
|
4195
|
+
d: "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z",
|
|
4196
|
+
fill: "currentColor"
|
|
4197
|
+
}
|
|
4198
|
+
),
|
|
4199
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4200
|
+
"path",
|
|
4201
|
+
{
|
|
4202
|
+
fillRule: "evenodd",
|
|
4203
|
+
clipRule: "evenodd",
|
|
4204
|
+
d: "M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z",
|
|
4205
|
+
fill: "currentColor"
|
|
4206
|
+
}
|
|
4207
|
+
),
|
|
4208
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4209
|
+
"path",
|
|
4210
|
+
{
|
|
4211
|
+
fillRule: "evenodd",
|
|
4212
|
+
clipRule: "evenodd",
|
|
4213
|
+
d: "M4 18C4 17.4477 4.44772 17 5 17H19C19.5523 17 20 17.4477 20 18C20 18.5523 19.5523 19 19 19H5C4.44772 19 4 18.5523 4 18Z",
|
|
4214
|
+
fill: "currentColor"
|
|
4215
|
+
}
|
|
4216
|
+
)
|
|
4217
|
+
] });
|
|
4218
|
+
});
|
|
4219
|
+
AlignCenterIcon.displayName = "AlignCenterIcon";
|
|
4220
|
+
var AlignJustifyIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4221
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
4222
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4223
|
+
"path",
|
|
4224
|
+
{
|
|
4225
|
+
fillRule: "evenodd",
|
|
4226
|
+
clipRule: "evenodd",
|
|
4227
|
+
d: "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z",
|
|
4228
|
+
fill: "currentColor"
|
|
4229
|
+
}
|
|
4230
|
+
),
|
|
4231
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4232
|
+
"path",
|
|
4233
|
+
{
|
|
4234
|
+
fillRule: "evenodd",
|
|
4235
|
+
clipRule: "evenodd",
|
|
4236
|
+
d: "M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z",
|
|
4237
|
+
fill: "currentColor"
|
|
4238
|
+
}
|
|
4239
|
+
),
|
|
4240
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4241
|
+
"path",
|
|
4242
|
+
{
|
|
4243
|
+
fillRule: "evenodd",
|
|
4244
|
+
clipRule: "evenodd",
|
|
4245
|
+
d: "M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z",
|
|
4246
|
+
fill: "currentColor"
|
|
4247
|
+
}
|
|
4248
|
+
)
|
|
4249
|
+
] });
|
|
4250
|
+
});
|
|
4251
|
+
AlignJustifyIcon.displayName = "AlignJustifyIcon";
|
|
4252
|
+
var AlignLeftIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4253
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
4254
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4255
|
+
"path",
|
|
4256
|
+
{
|
|
4257
|
+
fillRule: "evenodd",
|
|
4258
|
+
clipRule: "evenodd",
|
|
4259
|
+
d: "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z",
|
|
4260
|
+
fill: "currentColor"
|
|
4261
|
+
}
|
|
4262
|
+
),
|
|
4263
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4264
|
+
"path",
|
|
4265
|
+
{
|
|
4266
|
+
fillRule: "evenodd",
|
|
4267
|
+
clipRule: "evenodd",
|
|
4268
|
+
d: "M2 12C2 11.4477 2.44772 11 3 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H3C2.44772 13 2 12.5523 2 12Z",
|
|
4269
|
+
fill: "currentColor"
|
|
4270
|
+
}
|
|
4271
|
+
),
|
|
4272
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4273
|
+
"path",
|
|
4274
|
+
{
|
|
4275
|
+
fillRule: "evenodd",
|
|
4276
|
+
clipRule: "evenodd",
|
|
4277
|
+
d: "M2 18C2 17.4477 2.44772 17 3 17H17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19H3C2.44772 19 2 18.5523 2 18Z",
|
|
4278
|
+
fill: "currentColor"
|
|
4279
|
+
}
|
|
4280
|
+
)
|
|
4281
|
+
] });
|
|
4282
|
+
});
|
|
4283
|
+
AlignLeftIcon.displayName = "AlignLeftIcon";
|
|
4284
|
+
var AlignRightIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4285
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
|
|
4286
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4287
|
+
"path",
|
|
4288
|
+
{
|
|
4289
|
+
fillRule: "evenodd",
|
|
4290
|
+
clipRule: "evenodd",
|
|
4291
|
+
d: "M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z",
|
|
4292
|
+
fill: "currentColor"
|
|
4293
|
+
}
|
|
4294
|
+
),
|
|
4295
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4296
|
+
"path",
|
|
4297
|
+
{
|
|
4298
|
+
fillRule: "evenodd",
|
|
4299
|
+
clipRule: "evenodd",
|
|
4300
|
+
d: "M8 12C8 11.4477 8.44772 11 9 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H9C8.44772 13 8 12.5523 8 12Z",
|
|
4301
|
+
fill: "currentColor"
|
|
4302
|
+
}
|
|
4303
|
+
),
|
|
4304
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4305
|
+
"path",
|
|
4306
|
+
{
|
|
4307
|
+
fillRule: "evenodd",
|
|
4308
|
+
clipRule: "evenodd",
|
|
4309
|
+
d: "M6 18C6 17.4477 6.44772 17 7 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H7C6.44772 19 6 18.5523 6 18Z",
|
|
4310
|
+
fill: "currentColor"
|
|
4311
|
+
}
|
|
4312
|
+
)
|
|
4313
|
+
] });
|
|
4314
|
+
});
|
|
4315
|
+
AlignRightIcon.displayName = "AlignRightIcon";
|
|
4316
|
+
var textAlignIcons = {
|
|
4317
|
+
left: AlignLeftIcon,
|
|
4318
|
+
center: AlignCenterIcon,
|
|
4319
|
+
right: AlignRightIcon,
|
|
4320
|
+
justify: AlignJustifyIcon
|
|
4321
|
+
};
|
|
4322
|
+
var textAlignShortcutKeys = {
|
|
4323
|
+
left: "Ctrl-Shift-l",
|
|
4324
|
+
center: "Ctrl-Shift-e",
|
|
4325
|
+
right: "Ctrl-Shift-r",
|
|
4326
|
+
justify: "Ctrl-Shift-j"
|
|
4327
|
+
};
|
|
4328
|
+
var textAlignLabels = {
|
|
4329
|
+
left: "\u5DE6\u5BF9\u9F50",
|
|
4330
|
+
center: "\u5C45\u4E2D\u5BF9\u9F50",
|
|
4331
|
+
right: "\u53F3\u5BF9\u9F50",
|
|
4332
|
+
justify: "\u4E24\u7AEF\u5BF9\u9F50"
|
|
4333
|
+
};
|
|
4334
|
+
function hasSetTextAlign(commands) {
|
|
4335
|
+
return "setTextAlign" in commands;
|
|
4336
|
+
}
|
|
4337
|
+
function checkTextAlignExtension(editor) {
|
|
4338
|
+
if (!editor) return false;
|
|
4339
|
+
const hasExtension = editor.extensionManager.extensions.some((extension) => extension.name === "textAlign");
|
|
4340
|
+
if (!hasExtension) {
|
|
4341
|
+
console.warn("TextAlign extension is not available. Make sure it is included in your editor configuration.");
|
|
4342
|
+
}
|
|
4343
|
+
return hasExtension;
|
|
4344
|
+
}
|
|
4345
|
+
function canSetTextAlign(editor, align, alignAvailable) {
|
|
4346
|
+
if (!editor || !alignAvailable) return false;
|
|
4347
|
+
try {
|
|
4348
|
+
return editor.can().setTextAlign(align);
|
|
4349
|
+
} catch {
|
|
4350
|
+
return false;
|
|
4351
|
+
}
|
|
4352
|
+
}
|
|
4353
|
+
function isTextAlignActive(editor, align) {
|
|
4354
|
+
if (!editor) return false;
|
|
4355
|
+
return editor.isActive({ textAlign: align });
|
|
4356
|
+
}
|
|
4357
|
+
function setTextAlign(editor, align) {
|
|
4358
|
+
if (!editor) return false;
|
|
4359
|
+
const chain = editor.chain().focus();
|
|
4360
|
+
if (hasSetTextAlign(chain)) {
|
|
4361
|
+
return chain.setTextAlign(align).run();
|
|
4362
|
+
}
|
|
4363
|
+
return false;
|
|
4364
|
+
}
|
|
4365
|
+
function isTextAlignButtonDisabled(editor, alignAvailable, canAlign, userDisabled = false) {
|
|
4366
|
+
if (!editor || !alignAvailable) return true;
|
|
4367
|
+
if (userDisabled) return true;
|
|
4368
|
+
if (!canAlign) return true;
|
|
4369
|
+
return false;
|
|
4370
|
+
}
|
|
4371
|
+
function shouldShowTextAlignButton(editor, canAlign, hideWhenUnavailable) {
|
|
4372
|
+
if (!editor?.isEditable) return false;
|
|
4373
|
+
if (hideWhenUnavailable && !canAlign) return false;
|
|
4374
|
+
return true;
|
|
4375
|
+
}
|
|
4376
|
+
function useTextAlign(editor, align, disabled = false, hideWhenUnavailable = false) {
|
|
4377
|
+
const alignAvailable = React16__namespace.useMemo(() => checkTextAlignExtension(editor), [editor]);
|
|
4378
|
+
const canAlign = React16__namespace.useMemo(() => canSetTextAlign(editor, align, alignAvailable), [editor, align, alignAvailable]);
|
|
4379
|
+
const isDisabled = isTextAlignButtonDisabled(editor, alignAvailable, canAlign, disabled);
|
|
4380
|
+
const isActive = isTextAlignActive(editor, align);
|
|
4381
|
+
const handleAlignment = React16__namespace.useCallback(() => {
|
|
4382
|
+
if (!alignAvailable || !editor || isDisabled) return false;
|
|
4383
|
+
return setTextAlign(editor, align);
|
|
4384
|
+
}, [alignAvailable, editor, isDisabled, align]);
|
|
4385
|
+
const shouldShow = React16__namespace.useMemo(() => shouldShowTextAlignButton(editor, canAlign, hideWhenUnavailable), [editor, canAlign, hideWhenUnavailable]);
|
|
4386
|
+
const Icon = textAlignIcons[align];
|
|
4387
|
+
const shortcutKey = textAlignShortcutKeys[align];
|
|
4388
|
+
const label = textAlignLabels[align];
|
|
4389
|
+
return {
|
|
4390
|
+
alignAvailable,
|
|
4391
|
+
canAlign,
|
|
4392
|
+
isDisabled,
|
|
4393
|
+
isActive,
|
|
4394
|
+
handleAlignment,
|
|
4395
|
+
shouldShow,
|
|
4396
|
+
Icon,
|
|
4397
|
+
shortcutKey,
|
|
4398
|
+
label
|
|
4399
|
+
};
|
|
4400
|
+
}
|
|
4401
|
+
var TextAlignButton = React16__namespace.forwardRef(
|
|
4402
|
+
({ editor: providedEditor, align, text, hideWhenUnavailable = false, className = "", disabled, onClick, children, ...buttonProps }, ref) => {
|
|
4403
|
+
const editor = useTiptapEditor(providedEditor);
|
|
4404
|
+
const { isDisabled, isActive, handleAlignment, shouldShow, Icon, shortcutKey, label } = useTextAlign(editor, align, disabled, hideWhenUnavailable);
|
|
4405
|
+
const handleClick = React16__namespace.useCallback(
|
|
4406
|
+
(e) => {
|
|
4407
|
+
onClick?.(e);
|
|
4408
|
+
if (!e.defaultPrevented && !disabled) {
|
|
4409
|
+
handleAlignment();
|
|
4410
|
+
}
|
|
4411
|
+
},
|
|
4412
|
+
[onClick, disabled, handleAlignment]
|
|
4413
|
+
);
|
|
4414
|
+
if (!shouldShow || !editor || !editor.isEditable) {
|
|
4415
|
+
return null;
|
|
4416
|
+
}
|
|
4417
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4418
|
+
Button2,
|
|
4419
|
+
{
|
|
4420
|
+
type: "button",
|
|
4421
|
+
className: className.trim(),
|
|
4422
|
+
disabled: isDisabled,
|
|
4423
|
+
"data-style": "ghost",
|
|
4424
|
+
"data-active-state": isActive ? "on" : "off",
|
|
4425
|
+
"data-disabled": isDisabled,
|
|
4426
|
+
role: "button",
|
|
4427
|
+
tabIndex: -1,
|
|
4428
|
+
"aria-label": label,
|
|
4429
|
+
"aria-pressed": isActive,
|
|
4430
|
+
tooltip: label,
|
|
4431
|
+
shortcutKeys: shortcutKey,
|
|
4432
|
+
onClick: handleClick,
|
|
4433
|
+
...buttonProps,
|
|
4434
|
+
ref,
|
|
4435
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4436
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
4437
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
4438
|
+
] })
|
|
4439
|
+
}
|
|
4440
|
+
);
|
|
4441
|
+
}
|
|
4442
|
+
);
|
|
4443
|
+
TextAlignButton.displayName = "TextAlignButton";
|
|
4444
|
+
var Redo2Icon = React16__namespace.memo(({ className, ...props }) => {
|
|
4445
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4446
|
+
"path",
|
|
4447
|
+
{
|
|
4448
|
+
fillRule: "evenodd",
|
|
4449
|
+
clipRule: "evenodd",
|
|
4450
|
+
d: "M15.7071 2.29289C15.3166 1.90237 14.6834 1.90237 14.2929 2.29289C13.9024 2.68342 13.9024 3.31658 14.2929 3.70711L17.5858 7H9.5C7.77609 7 6.12279 7.68482 4.90381 8.90381C3.68482 10.1228 3 11.7761 3 13.5C3 14.3536 3.16813 15.1988 3.49478 15.9874C3.82144 16.7761 4.30023 17.4926 4.90381 18.0962C6.12279 19.3152 7.77609 20 9.5 20H13C13.5523 20 14 19.5523 14 19C14 18.4477 13.5523 18 13 18H9.5C8.30653 18 7.16193 17.5259 6.31802 16.682C5.90016 16.2641 5.56869 15.768 5.34254 15.2221C5.1164 14.6761 5 14.0909 5 13.5C5 12.3065 5.47411 11.1619 6.31802 10.318C7.16193 9.47411 8.30653 9 9.5 9H17.5858L14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071L20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289L15.7071 2.29289Z",
|
|
4451
|
+
fill: "currentColor"
|
|
4452
|
+
}
|
|
4453
|
+
) });
|
|
4454
|
+
});
|
|
4455
|
+
Redo2Icon.displayName = "Redo2Icon";
|
|
4456
|
+
var Undo2Icon = React16__namespace.memo(({ className, ...props }) => {
|
|
4457
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4458
|
+
"path",
|
|
4459
|
+
{
|
|
4460
|
+
fillRule: "evenodd",
|
|
4461
|
+
clipRule: "evenodd",
|
|
4462
|
+
d: "M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L8.29289 13.7071C8.68342 14.0976 9.31658 14.0976 9.70711 13.7071C10.0976 13.3166 10.0976 12.6834 9.70711 12.2929L6.41421 9H14.5C15.0909 9 15.6761 9.1164 16.2221 9.34254C16.768 9.56869 17.2641 9.90016 17.682 10.318C18.0998 10.7359 18.4313 11.232 18.6575 11.7779C18.8836 12.3239 19 12.9091 19 13.5C19 14.0909 18.8836 14.6761 18.6575 15.2221C18.4313 15.768 18.0998 16.2641 17.682 16.682C17.2641 17.0998 16.768 17.4313 16.2221 17.6575C15.6761 17.8836 15.0909 18 14.5 18H11C10.4477 18 10 18.4477 10 19C10 19.5523 10.4477 20 11 20H14.5C15.3536 20 16.1988 19.8319 16.9874 19.5052C17.7761 19.1786 18.4926 18.6998 19.0962 18.0962C19.6998 17.4926 20.1786 16.7761 20.5052 15.9874C20.8319 15.1988 21 14.3536 21 13.5C21 12.6464 20.8319 11.8012 20.5052 11.0126C20.1786 10.2239 19.6998 9.50739 19.0962 8.90381C18.4926 8.30022 17.7761 7.82144 16.9874 7.49478C16.1988 7.16813 15.3536 7 14.5 7H6.41421L9.70711 3.70711Z",
|
|
4463
|
+
fill: "currentColor"
|
|
4464
|
+
}
|
|
4465
|
+
) });
|
|
4466
|
+
});
|
|
4467
|
+
Undo2Icon.displayName = "Undo2Icon";
|
|
4468
|
+
var historyIcons = {
|
|
4469
|
+
undo: Undo2Icon,
|
|
4470
|
+
redo: Redo2Icon
|
|
4471
|
+
};
|
|
4472
|
+
var historyShortcutKeys = {
|
|
4473
|
+
undo: "Ctrl-z",
|
|
4474
|
+
redo: "Ctrl-Shift-z"
|
|
4475
|
+
};
|
|
4476
|
+
var historyActionLabels = {
|
|
4477
|
+
undo: "\u64A4\u9500",
|
|
4478
|
+
redo: "\u91CD\u505A"
|
|
4479
|
+
};
|
|
4480
|
+
function canExecuteHistoryAction(editor, action) {
|
|
4481
|
+
if (!editor) return false;
|
|
4482
|
+
return action === "undo" ? editor.can().undo() : editor.can().redo();
|
|
4483
|
+
}
|
|
4484
|
+
function executeHistoryAction(editor, action) {
|
|
4485
|
+
if (!editor) return false;
|
|
4486
|
+
const chain = editor.chain().focus();
|
|
4487
|
+
return action === "undo" ? chain.undo().run() : chain.redo().run();
|
|
4488
|
+
}
|
|
4489
|
+
function isHistoryActionDisabled(editor, action, userDisabled = false) {
|
|
4490
|
+
if (userDisabled) return true;
|
|
4491
|
+
return !canExecuteHistoryAction(editor, action);
|
|
4492
|
+
}
|
|
4493
|
+
function useHistoryAction(editor, action, disabled = false) {
|
|
4494
|
+
const canExecute = React16__namespace.useMemo(() => canExecuteHistoryAction(editor, action), [editor, action]);
|
|
4495
|
+
const isDisabled = isHistoryActionDisabled(editor, action, disabled);
|
|
4496
|
+
const handleAction = React16__namespace.useCallback(() => {
|
|
4497
|
+
if (!editor || isDisabled) return;
|
|
4498
|
+
executeHistoryAction(editor, action);
|
|
4499
|
+
}, [editor, action, isDisabled]);
|
|
4500
|
+
const Icon = historyIcons[action];
|
|
4501
|
+
const actionLabel = historyActionLabels[action];
|
|
4502
|
+
const shortcutKey = historyShortcutKeys[action];
|
|
4503
|
+
return {
|
|
4504
|
+
canExecute,
|
|
4505
|
+
isDisabled,
|
|
4506
|
+
handleAction,
|
|
4507
|
+
Icon,
|
|
4508
|
+
actionLabel,
|
|
4509
|
+
shortcutKey
|
|
4510
|
+
};
|
|
4511
|
+
}
|
|
4512
|
+
var UndoRedoButton = React16__namespace.forwardRef(
|
|
4513
|
+
({ editor: providedEditor, action, text, className = "", disabled, onClick, children, ...buttonProps }, ref) => {
|
|
4514
|
+
const editor = useTiptapEditor(providedEditor);
|
|
4515
|
+
const { isDisabled, handleAction, Icon, actionLabel, shortcutKey } = useHistoryAction(editor, action, disabled);
|
|
4516
|
+
const handleClick = React16__namespace.useCallback(
|
|
4517
|
+
(e) => {
|
|
4518
|
+
onClick?.(e);
|
|
4519
|
+
if (!e.defaultPrevented && !disabled) {
|
|
4520
|
+
handleAction();
|
|
4521
|
+
}
|
|
4522
|
+
},
|
|
4523
|
+
[onClick, disabled, handleAction]
|
|
4524
|
+
);
|
|
4525
|
+
if (!editor || !editor.isEditable) {
|
|
4526
|
+
return null;
|
|
4527
|
+
}
|
|
4528
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4529
|
+
Button2,
|
|
4530
|
+
{
|
|
4531
|
+
ref,
|
|
4532
|
+
type: "button",
|
|
4533
|
+
className: className.trim(),
|
|
4534
|
+
disabled: isDisabled,
|
|
4535
|
+
"data-style": "ghost",
|
|
4536
|
+
"data-disabled": isDisabled,
|
|
4537
|
+
role: "button",
|
|
4538
|
+
tabIndex: -1,
|
|
4539
|
+
"aria-label": actionLabel,
|
|
4540
|
+
tooltip: actionLabel,
|
|
4541
|
+
shortcutKeys: shortcutKey,
|
|
4542
|
+
onClick: handleClick,
|
|
4543
|
+
...buttonProps,
|
|
4544
|
+
children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4545
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tiptap-button-icon" }),
|
|
4546
|
+
text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiptap-button-text", children: text })
|
|
4547
|
+
] })
|
|
4548
|
+
}
|
|
4549
|
+
);
|
|
4550
|
+
}
|
|
4551
|
+
);
|
|
4552
|
+
UndoRedoButton.displayName = "UndoRedoButton";
|
|
4553
|
+
var ArrowLeftIcon = React16__namespace.memo(({ className, ...props }) => {
|
|
4554
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", className, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4555
|
+
"path",
|
|
4556
|
+
{
|
|
4557
|
+
d: "M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L12.7071 5.70711Z",
|
|
4558
|
+
fill: "currentColor"
|
|
4559
|
+
}
|
|
4560
|
+
) });
|
|
4561
|
+
});
|
|
4562
|
+
ArrowLeftIcon.displayName = "ArrowLeftIcon";
|
|
4563
|
+
function useWindowSize() {
|
|
4564
|
+
const [windowSize, setWindowSize] = React16__namespace.useState({
|
|
4565
|
+
width: 0,
|
|
4566
|
+
height: 0,
|
|
4567
|
+
offsetTop: 0
|
|
4568
|
+
});
|
|
4569
|
+
function handleResize() {
|
|
4570
|
+
if (typeof window === "undefined") return;
|
|
4571
|
+
const vp = window.visualViewport;
|
|
4572
|
+
if (!vp) return;
|
|
4573
|
+
const { width = 0, height = 0, offsetTop = 0 } = vp;
|
|
4574
|
+
setWindowSize((state) => {
|
|
4575
|
+
if (width === state.width && height === state.height && offsetTop === state.offsetTop) {
|
|
4576
|
+
return state;
|
|
4577
|
+
}
|
|
4578
|
+
return { width, height, offsetTop };
|
|
4579
|
+
});
|
|
4580
|
+
}
|
|
4581
|
+
React16__namespace.useEffect(() => {
|
|
4582
|
+
handleResize();
|
|
4583
|
+
const visualViewport = window.visualViewport;
|
|
4584
|
+
if (visualViewport) {
|
|
4585
|
+
visualViewport.addEventListener("resize", handleResize);
|
|
4586
|
+
visualViewport.addEventListener("scroll", handleResize);
|
|
4587
|
+
}
|
|
4588
|
+
return () => {
|
|
4589
|
+
if (visualViewport) {
|
|
4590
|
+
visualViewport.removeEventListener("resize", handleResize);
|
|
4591
|
+
visualViewport.removeEventListener("scroll", handleResize);
|
|
4592
|
+
}
|
|
4593
|
+
};
|
|
4594
|
+
}, []);
|
|
4595
|
+
return windowSize;
|
|
4596
|
+
}
|
|
4597
|
+
|
|
4598
|
+
// src/components/MarkdownEditor/hooks/use-cursor-visibility.ts
|
|
4599
|
+
function useCursorVisibility({ editor, overlayHeight = 0, elementRef = null }) {
|
|
4600
|
+
const { height: windowHeight } = useWindowSize();
|
|
4601
|
+
const [rect, setRect] = React16__namespace.useState({
|
|
4602
|
+
x: 0,
|
|
4603
|
+
y: 0,
|
|
4604
|
+
width: 0,
|
|
4605
|
+
height: 0
|
|
4606
|
+
});
|
|
4607
|
+
const updateRect = React16__namespace.useCallback(() => {
|
|
4608
|
+
const element = elementRef?.current ?? document.body;
|
|
4609
|
+
const { x, y, width, height } = element.getBoundingClientRect();
|
|
4610
|
+
setRect({ x, y, width, height });
|
|
4611
|
+
}, [elementRef]);
|
|
4612
|
+
React16__namespace.useEffect(() => {
|
|
4613
|
+
const element = elementRef?.current ?? document.body;
|
|
4614
|
+
updateRect();
|
|
4615
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
4616
|
+
window.requestAnimationFrame(updateRect);
|
|
4617
|
+
});
|
|
4618
|
+
resizeObserver.observe(element);
|
|
4619
|
+
window.addEventListener("scroll", updateRect, { passive: true });
|
|
4620
|
+
return () => {
|
|
4621
|
+
resizeObserver.disconnect();
|
|
4622
|
+
window.removeEventListener("scroll", updateRect);
|
|
4623
|
+
};
|
|
4624
|
+
}, [elementRef, updateRect]);
|
|
4625
|
+
React16__namespace.useEffect(() => {
|
|
4626
|
+
const ensureCursorVisibility = () => {
|
|
4627
|
+
if (!editor) return;
|
|
4628
|
+
const { state, view } = editor;
|
|
4629
|
+
if (!view.hasFocus()) return;
|
|
4630
|
+
const { from } = state.selection;
|
|
4631
|
+
const cursorCoords = view.coordsAtPos(from);
|
|
4632
|
+
if (windowHeight < rect.height) {
|
|
4633
|
+
if (cursorCoords) {
|
|
4634
|
+
const availableSpace = windowHeight - cursorCoords.top - overlayHeight > 0;
|
|
4635
|
+
if (!availableSpace) {
|
|
4636
|
+
const targetScrollY = (
|
|
4637
|
+
// TODO: Needed?
|
|
4638
|
+
// window.scrollY + (cursorCoords.top - windowHeight / 2)
|
|
4639
|
+
cursorCoords.top - windowHeight / 2
|
|
4640
|
+
);
|
|
4641
|
+
window.scrollTo({
|
|
4642
|
+
top: targetScrollY,
|
|
4643
|
+
behavior: "smooth"
|
|
4644
|
+
});
|
|
4645
|
+
}
|
|
4646
|
+
}
|
|
4647
|
+
}
|
|
4648
|
+
};
|
|
4649
|
+
ensureCursorVisibility();
|
|
4650
|
+
}, [editor, overlayHeight, windowHeight, rect.height]);
|
|
4651
|
+
return rect;
|
|
4652
|
+
}
|
|
4653
|
+
var MOBILE_BREAKPOINT = 768;
|
|
4654
|
+
function useMobile() {
|
|
4655
|
+
const [isMobile, setIsMobile] = React16__namespace.useState(void 0);
|
|
4656
|
+
React16__namespace.useEffect(() => {
|
|
4657
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
4658
|
+
const onChange = () => {
|
|
4659
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
4660
|
+
};
|
|
4661
|
+
mql.addEventListener("change", onChange);
|
|
4662
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
4663
|
+
return () => mql.removeEventListener("change", onChange);
|
|
4664
|
+
}, []);
|
|
4665
|
+
return !!isMobile;
|
|
4666
|
+
}
|
|
4667
|
+
var pageNoNode_default = core.Node.create({
|
|
4668
|
+
name: "PageNoNode",
|
|
4669
|
+
// 节点名称
|
|
4670
|
+
group: "block",
|
|
4671
|
+
// 可以作为块级元素
|
|
4672
|
+
// content: 'block+', // 能嵌套多个块级内容(如 heading, paragraph 等)
|
|
4673
|
+
// defining: true, // 使其在文档结构中稳定,避免被合并
|
|
4674
|
+
// 自定义渲染HTML
|
|
4675
|
+
renderHTML({ node, HTMLAttributes }) {
|
|
4676
|
+
const pageIndex = node.attrs.pageIndex || "1";
|
|
4677
|
+
return [
|
|
4678
|
+
"div",
|
|
4679
|
+
core.mergeAttributes(HTMLAttributes, {
|
|
4680
|
+
class: "page-no",
|
|
4681
|
+
// 添加类名
|
|
4682
|
+
"page-no": pageIndex
|
|
4683
|
+
// 设置动态的 page-no 属性
|
|
4684
|
+
})
|
|
4685
|
+
// 0
|
|
4686
|
+
];
|
|
4687
|
+
},
|
|
4688
|
+
// 自定义节点的可视化表现
|
|
4689
|
+
addAttributes() {
|
|
4690
|
+
return {
|
|
4691
|
+
pageIndex: {
|
|
4692
|
+
default: null,
|
|
4693
|
+
// 默认没有值,允许动态传递
|
|
4694
|
+
renderHTML: (attributes) => {
|
|
4695
|
+
return {
|
|
4696
|
+
"page-no": attributes.pageIndex
|
|
4697
|
+
};
|
|
4698
|
+
}
|
|
4699
|
+
}
|
|
4700
|
+
};
|
|
4701
|
+
},
|
|
4702
|
+
// 用于从节点中提取文本内容
|
|
4703
|
+
parseHTML() {
|
|
4704
|
+
return [
|
|
4705
|
+
{
|
|
4706
|
+
tag: "div.page-no",
|
|
4707
|
+
// 匹配 `.page-no` 类的 div
|
|
4708
|
+
getAttrs: (node) => {
|
|
4709
|
+
const pageIndex = node.getAttribute("page-no");
|
|
4710
|
+
return { pageIndex };
|
|
4711
|
+
}
|
|
4712
|
+
}
|
|
4713
|
+
];
|
|
4714
|
+
}
|
|
4715
|
+
});
|
|
4716
|
+
var getRegex = (s, disableRegex, caseSensitive) => {
|
|
4717
|
+
return RegExp(disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : s, caseSensitive ? "gu" : "gui");
|
|
4718
|
+
};
|
|
4719
|
+
function processSearches(doc, searchTerm, searchResultClass, resultIndex) {
|
|
4720
|
+
const decorations = [];
|
|
4721
|
+
const results = [];
|
|
4722
|
+
let textNodesWithPosition = [];
|
|
4723
|
+
let index = 0;
|
|
4724
|
+
if (!searchTerm) {
|
|
4725
|
+
return {
|
|
4726
|
+
decorationsToReturn: view.DecorationSet.empty,
|
|
4727
|
+
results: []
|
|
4728
|
+
};
|
|
4729
|
+
}
|
|
4730
|
+
doc?.descendants((node, pos) => {
|
|
4731
|
+
if (node.isText) {
|
|
4732
|
+
if (textNodesWithPosition[index]) {
|
|
4733
|
+
textNodesWithPosition[index] = {
|
|
4734
|
+
text: textNodesWithPosition[index].text + node.text,
|
|
4735
|
+
pos: textNodesWithPosition[index].pos
|
|
4736
|
+
};
|
|
4737
|
+
} else {
|
|
4738
|
+
textNodesWithPosition[index] = {
|
|
4739
|
+
text: `${node.text}`,
|
|
4740
|
+
pos
|
|
4741
|
+
};
|
|
4742
|
+
}
|
|
4743
|
+
} else {
|
|
4744
|
+
index += 1;
|
|
4745
|
+
}
|
|
4746
|
+
});
|
|
4747
|
+
textNodesWithPosition = textNodesWithPosition.filter(Boolean);
|
|
4748
|
+
for (const element of textNodesWithPosition) {
|
|
4749
|
+
const { text, pos } = element;
|
|
4750
|
+
const matches = Array.from(text.matchAll(searchTerm)).filter(([matchText]) => matchText.trim());
|
|
4751
|
+
for (const m of matches) {
|
|
4752
|
+
if (m[0] === "") break;
|
|
4753
|
+
if (m.index !== void 0) {
|
|
4754
|
+
results.push({
|
|
4755
|
+
from: pos + m.index,
|
|
4756
|
+
to: pos + m.index + m[0].length
|
|
4757
|
+
});
|
|
4758
|
+
}
|
|
4759
|
+
}
|
|
4760
|
+
}
|
|
4761
|
+
for (let i = 0; i < results.length; i += 1) {
|
|
4762
|
+
const r = results[i];
|
|
4763
|
+
const className = i === resultIndex ? `${searchResultClass} ${searchResultClass}-current` : searchResultClass;
|
|
4764
|
+
const decoration = view.Decoration.inline(r.from, r.to, {
|
|
4765
|
+
class: className
|
|
4766
|
+
});
|
|
4767
|
+
decorations.push(decoration);
|
|
4768
|
+
}
|
|
4769
|
+
return {
|
|
4770
|
+
decorationsToReturn: view.DecorationSet.create(doc, decorations),
|
|
4771
|
+
results
|
|
4772
|
+
};
|
|
4773
|
+
}
|
|
4774
|
+
var replace = (replaceTerm, results, { state, dispatch }) => {
|
|
4775
|
+
const firstResult = results[0];
|
|
4776
|
+
if (!firstResult) return;
|
|
4777
|
+
const { from, to } = results[0];
|
|
4778
|
+
if (dispatch) dispatch(state.tr.insertText(replaceTerm, from, to));
|
|
4779
|
+
};
|
|
4780
|
+
var rebaseNextResult = (replaceTerm, index, lastOffset, results) => {
|
|
4781
|
+
const nextIndex = index + 1;
|
|
4782
|
+
if (!results[nextIndex]) return null;
|
|
4783
|
+
const { from: currentFrom, to: currentTo } = results[index];
|
|
4784
|
+
const offset4 = currentTo - currentFrom - replaceTerm.length + lastOffset;
|
|
4785
|
+
const { from, to } = results[nextIndex];
|
|
4786
|
+
results[nextIndex] = {
|
|
4787
|
+
to: to - offset4,
|
|
4788
|
+
from: from - offset4
|
|
4789
|
+
};
|
|
4790
|
+
return [offset4, results];
|
|
4791
|
+
};
|
|
4792
|
+
var replaceAll = (replaceTerm, results, { tr, dispatch }) => {
|
|
4793
|
+
let offset4 = 0;
|
|
4794
|
+
let resultsCopy = results.slice();
|
|
4795
|
+
if (!resultsCopy.length) return;
|
|
4796
|
+
for (let i = 0; i < resultsCopy.length; i += 1) {
|
|
4797
|
+
const { from, to } = resultsCopy[i];
|
|
4798
|
+
tr.insertText(replaceTerm, from, to);
|
|
4799
|
+
const rebaseNextResultResponse = rebaseNextResult(replaceTerm, i, offset4, resultsCopy);
|
|
4800
|
+
if (!rebaseNextResultResponse) continue;
|
|
4801
|
+
offset4 = rebaseNextResultResponse[0];
|
|
4802
|
+
resultsCopy = rebaseNextResultResponse[1];
|
|
4803
|
+
}
|
|
4804
|
+
dispatch?.(tr);
|
|
4805
|
+
};
|
|
4806
|
+
var searchAndReplacePluginKey = new state.PluginKey("searchAndReplacePlugin");
|
|
4807
|
+
var SearchAndReplace = core.Extension.create({
|
|
4808
|
+
name: "searchAndReplace",
|
|
4809
|
+
addOptions() {
|
|
4810
|
+
return {
|
|
4811
|
+
searchResultClass: "search-result",
|
|
4812
|
+
disableRegex: true
|
|
4813
|
+
};
|
|
4814
|
+
},
|
|
4815
|
+
addStorage() {
|
|
4816
|
+
return {
|
|
4817
|
+
searchTerm: "",
|
|
4818
|
+
replaceTerm: "",
|
|
4819
|
+
results: [],
|
|
4820
|
+
lastSearchTerm: "",
|
|
4821
|
+
caseSensitive: false,
|
|
4822
|
+
lastCaseSensitive: false,
|
|
4823
|
+
resultIndex: 0,
|
|
4824
|
+
lastResultIndex: 0
|
|
4825
|
+
};
|
|
4826
|
+
},
|
|
4827
|
+
addCommands() {
|
|
4828
|
+
return {
|
|
4829
|
+
setSearchTerm: (searchTerm) => ({ editor }) => {
|
|
4830
|
+
editor.storage.searchAndReplace.searchTerm = searchTerm;
|
|
4831
|
+
return false;
|
|
4832
|
+
},
|
|
4833
|
+
setReplaceTerm: (replaceTerm) => ({ editor }) => {
|
|
4834
|
+
editor.storage.searchAndReplace.replaceTerm = replaceTerm;
|
|
4835
|
+
return false;
|
|
4836
|
+
},
|
|
4837
|
+
setCaseSensitive: (caseSensitive) => ({ editor }) => {
|
|
4838
|
+
editor.storage.searchAndReplace.caseSensitive = caseSensitive;
|
|
4839
|
+
return false;
|
|
4840
|
+
},
|
|
4841
|
+
resetIndex: () => ({ editor }) => {
|
|
4842
|
+
editor.storage.searchAndReplace.resultIndex = 0;
|
|
4843
|
+
return false;
|
|
4844
|
+
},
|
|
4845
|
+
nextSearchResult: () => ({ editor }) => {
|
|
4846
|
+
const { results, resultIndex } = editor.storage.searchAndReplace;
|
|
4847
|
+
const nextIndex = resultIndex + 1;
|
|
4848
|
+
if (results[nextIndex]) {
|
|
4849
|
+
editor.storage.searchAndReplace.resultIndex = nextIndex;
|
|
4850
|
+
} else {
|
|
4851
|
+
editor.storage.searchAndReplace.resultIndex = 0;
|
|
4852
|
+
}
|
|
4853
|
+
return false;
|
|
4854
|
+
},
|
|
4855
|
+
previousSearchResult: () => ({ editor }) => {
|
|
4856
|
+
const { results, resultIndex } = editor.storage.searchAndReplace;
|
|
4857
|
+
const prevIndex = resultIndex - 1;
|
|
4858
|
+
if (results[prevIndex]) {
|
|
4859
|
+
editor.storage.searchAndReplace.resultIndex = prevIndex;
|
|
4860
|
+
} else {
|
|
4861
|
+
editor.storage.searchAndReplace.resultIndex = results.length - 1;
|
|
4862
|
+
}
|
|
4863
|
+
return false;
|
|
4864
|
+
},
|
|
4865
|
+
replace: () => ({ editor, state, dispatch }) => {
|
|
4866
|
+
const { replaceTerm, results } = editor.storage.searchAndReplace;
|
|
4867
|
+
replace(replaceTerm, results, { state, dispatch });
|
|
4868
|
+
return false;
|
|
4869
|
+
},
|
|
4870
|
+
replaceAll: () => ({ editor, tr, dispatch }) => {
|
|
4871
|
+
const { replaceTerm, results } = editor.storage.searchAndReplace;
|
|
4872
|
+
replaceAll(replaceTerm, results, { tr, dispatch });
|
|
4873
|
+
return false;
|
|
4874
|
+
}
|
|
4875
|
+
};
|
|
4876
|
+
},
|
|
4877
|
+
addProseMirrorPlugins() {
|
|
4878
|
+
const editor = this.editor;
|
|
4879
|
+
const { searchResultClass, disableRegex } = this.options;
|
|
4880
|
+
const setLastSearchTerm = (t) => editor.storage.searchAndReplace.lastSearchTerm = t;
|
|
4881
|
+
const setLastCaseSensitive = (t) => editor.storage.searchAndReplace.lastCaseSensitive = t;
|
|
4882
|
+
const setLastResultIndex = (t) => editor.storage.searchAndReplace.lastResultIndex = t;
|
|
4883
|
+
return [
|
|
4884
|
+
new state.Plugin({
|
|
4885
|
+
key: searchAndReplacePluginKey,
|
|
4886
|
+
state: {
|
|
4887
|
+
init: () => view.DecorationSet.empty,
|
|
4888
|
+
apply({ doc, docChanged }, oldState) {
|
|
4889
|
+
const { searchTerm, lastSearchTerm, caseSensitive, lastCaseSensitive, resultIndex, lastResultIndex } = editor.storage.searchAndReplace;
|
|
4890
|
+
if (!docChanged && lastSearchTerm === searchTerm && lastCaseSensitive === caseSensitive && lastResultIndex === resultIndex)
|
|
4891
|
+
return oldState;
|
|
4892
|
+
setLastSearchTerm(searchTerm);
|
|
4893
|
+
setLastCaseSensitive(caseSensitive);
|
|
4894
|
+
setLastResultIndex(resultIndex);
|
|
4895
|
+
if (!searchTerm) {
|
|
4896
|
+
editor.storage.searchAndReplace.results = [];
|
|
4897
|
+
return view.DecorationSet.empty;
|
|
4898
|
+
}
|
|
4899
|
+
const { decorationsToReturn, results } = processSearches(
|
|
4900
|
+
doc,
|
|
4901
|
+
getRegex(searchTerm, disableRegex, caseSensitive),
|
|
4902
|
+
searchResultClass,
|
|
4903
|
+
resultIndex
|
|
4904
|
+
);
|
|
4905
|
+
editor.storage.searchAndReplace.results = results;
|
|
4906
|
+
return decorationsToReturn;
|
|
4907
|
+
}
|
|
4908
|
+
},
|
|
4909
|
+
props: {
|
|
4910
|
+
decorations(state) {
|
|
4911
|
+
return this.getState(state);
|
|
4912
|
+
}
|
|
4913
|
+
}
|
|
4914
|
+
})
|
|
4915
|
+
];
|
|
4916
|
+
}
|
|
4917
|
+
});
|
|
4918
|
+
var searchAndReplace_default = SearchAndReplace;
|
|
4919
|
+
var MainToolbarContent = ({
|
|
4920
|
+
onHighlighterClick,
|
|
4921
|
+
onLinkClick,
|
|
4922
|
+
onQuote,
|
|
4923
|
+
// onSetComment,
|
|
4924
|
+
isMobile,
|
|
4925
|
+
isBubble
|
|
4926
|
+
}) => {
|
|
4927
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4928
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
|
|
4929
|
+
onQuote && /* @__PURE__ */ jsxRuntime.jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(QuoteButton, { onQuote }) }),
|
|
4930
|
+
!isBubble && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4931
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ToolbarGroup, { children: [
|
|
4932
|
+
/* @__PURE__ */ jsxRuntime.jsx(UndoRedoButton, { action: "undo" }),
|
|
4933
|
+
/* @__PURE__ */ jsxRuntime.jsx(UndoRedoButton, { action: "redo" })
|
|
4934
|
+
] }),
|
|
4935
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {})
|
|
4936
|
+
] }),
|
|
4937
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ToolbarGroup, { children: [
|
|
4938
|
+
/* @__PURE__ */ jsxRuntime.jsx(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
|
|
4939
|
+
/* @__PURE__ */ jsxRuntime.jsx(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
|
|
4940
|
+
/* @__PURE__ */ jsxRuntime.jsx(NodeButton, { type: "codeBlock" }),
|
|
4941
|
+
/* @__PURE__ */ jsxRuntime.jsx(NodeButton, { type: "blockquote" })
|
|
4942
|
+
] }),
|
|
4943
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
|
|
4944
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ToolbarGroup, { children: [
|
|
4945
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "bold" }),
|
|
4946
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "italic" }),
|
|
4947
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "strike" }),
|
|
4948
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "code" }),
|
|
4949
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "underline" }),
|
|
4950
|
+
!isMobile ? /* @__PURE__ */ jsxRuntime.jsx(HighlightPopover, {}) : /* @__PURE__ */ jsxRuntime.jsx(HighlighterButton, { onClick: onHighlighterClick }),
|
|
4951
|
+
!isMobile ? /* @__PURE__ */ jsxRuntime.jsx(LinkPopover, {}) : /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { onClick: onLinkClick })
|
|
4952
|
+
] }),
|
|
4953
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
|
|
4954
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ToolbarGroup, { children: [
|
|
4955
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "superscript" }),
|
|
4956
|
+
/* @__PURE__ */ jsxRuntime.jsx(MarkButton, { type: "subscript" })
|
|
4957
|
+
] }),
|
|
4958
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
|
|
4959
|
+
/* @__PURE__ */ jsxRuntime.jsxs(ToolbarGroup, { children: [
|
|
4960
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextAlignButton, { align: "left" }),
|
|
4961
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextAlignButton, { align: "center" }),
|
|
4962
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextAlignButton, { align: "right" }),
|
|
4963
|
+
/* @__PURE__ */ jsxRuntime.jsx(TextAlignButton, { align: "justify" })
|
|
4964
|
+
] }),
|
|
4965
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
|
|
4966
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
|
|
4967
|
+
isMobile && /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {})
|
|
4968
|
+
] });
|
|
4969
|
+
};
|
|
4970
|
+
var MobileToolbarContent = ({ type, onBack }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4971
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { "data-style": "ghost", onClick: onBack, children: [
|
|
4972
|
+
/* @__PURE__ */ jsxRuntime.jsx(ArrowLeftIcon, { className: "tiptap-button-icon" }),
|
|
4973
|
+
type === "highlighter" ? /* @__PURE__ */ jsxRuntime.jsx(HighlighterIcon, { className: "tiptap-button-icon" }) : /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { className: "tiptap-button-icon" })
|
|
4974
|
+
] }) }),
|
|
4975
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
|
|
4976
|
+
type === "highlighter" ? /* @__PURE__ */ jsxRuntime.jsx(HighlightContent, {}) : /* @__PURE__ */ jsxRuntime.jsx(LinkContent, {})
|
|
4977
|
+
] });
|
|
4978
|
+
var MarkdownEditor_default = ({ value = "", onChange, onScrollPage, searchValue, disabled, extraNav, showToolbar = true, onQuote }) => {
|
|
4979
|
+
const isMobile = useMobile();
|
|
4980
|
+
const windowSize = useWindowSize();
|
|
4981
|
+
const lastContentRef = React16.useRef("");
|
|
4982
|
+
const [mobileView, setMobileView] = React16.useState("main");
|
|
4983
|
+
const toolbarRef = React16.useRef(null);
|
|
4984
|
+
const editor = react.useEditor({
|
|
4985
|
+
immediatelyRender: false,
|
|
4986
|
+
editorProps: {
|
|
4987
|
+
attributes: {
|
|
4988
|
+
autocomplete: "off",
|
|
4989
|
+
autocorrect: "off",
|
|
4990
|
+
autocapitalize: "off",
|
|
4991
|
+
"aria-label": "Main content area, start typing to enter text."
|
|
4992
|
+
}
|
|
4993
|
+
},
|
|
4994
|
+
extensions: [
|
|
4995
|
+
tiptapMarkdown.Markdown.configure({
|
|
4996
|
+
transformPastedText: true,
|
|
4997
|
+
transformCopiedText: true,
|
|
4998
|
+
breaks: true
|
|
4999
|
+
}),
|
|
5000
|
+
starterKit.StarterKit,
|
|
5001
|
+
extensionTextAlign.TextAlign.configure({ types: ["heading", "paragraph"] }),
|
|
5002
|
+
extensionUnderline.Underline,
|
|
5003
|
+
extensionTaskList.TaskList,
|
|
5004
|
+
extensionTaskItem.TaskItem.configure({ nested: true }),
|
|
5005
|
+
extensionHighlight.Highlight.configure({ multicolor: true }),
|
|
5006
|
+
extensionImage.Image,
|
|
5007
|
+
extensionTypography.Typography,
|
|
5008
|
+
extensionSuperscript.Superscript,
|
|
5009
|
+
extensionSubscript.Subscript,
|
|
5010
|
+
Selection,
|
|
5011
|
+
TrailingNode,
|
|
5012
|
+
Link.configure({ openOnClick: false }),
|
|
5013
|
+
Table__default.default.configure({
|
|
5014
|
+
resizable: true
|
|
5015
|
+
// 可选,允许调整表格大小
|
|
5016
|
+
}),
|
|
5017
|
+
TableHeader__default.default,
|
|
5018
|
+
TableRow__default.default,
|
|
5019
|
+
TableCell__default.default,
|
|
5020
|
+
// Gapcursor,
|
|
5021
|
+
searchAndReplace_default.configure({
|
|
5022
|
+
searchResultClass: "cube-hl",
|
|
5023
|
+
// class to give to found items. default 'cube-hl'
|
|
5024
|
+
disableRegex: false
|
|
5025
|
+
// also no need to explain
|
|
5026
|
+
}),
|
|
5027
|
+
pageNoNode_default
|
|
5028
|
+
// Comment.configure({
|
|
5029
|
+
// HTMLAttributes: {
|
|
5030
|
+
// class: 'my-comment'
|
|
5031
|
+
// },
|
|
5032
|
+
// onCommentActivated: (commentId) => {
|
|
5033
|
+
// setActiveCommentId(commentId)
|
|
5034
|
+
// if (commentId) setTimeout(() => focusCommentWithActiveId(commentId))
|
|
5035
|
+
// }
|
|
5036
|
+
// })
|
|
5037
|
+
],
|
|
5038
|
+
content: "",
|
|
5039
|
+
onUpdate: ({ editor: editor2 }) => {
|
|
5040
|
+
const markdownOutput = editor2.storage.markdown.getMarkdown();
|
|
5041
|
+
if (markdownOutput === lastContentRef.current) return;
|
|
5042
|
+
lastContentRef.current = markdownOutput;
|
|
5043
|
+
onChange?.(markdownOutput);
|
|
5044
|
+
}
|
|
5045
|
+
});
|
|
5046
|
+
const bodyRect = useCursorVisibility({
|
|
5047
|
+
editor,
|
|
5048
|
+
overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0
|
|
5049
|
+
});
|
|
5050
|
+
React16.useEffect(() => {
|
|
5051
|
+
if (!isMobile && mobileView !== "main") {
|
|
5052
|
+
setMobileView("main");
|
|
5053
|
+
}
|
|
5054
|
+
}, [isMobile, mobileView]);
|
|
5055
|
+
React16.useEffect(() => {
|
|
5056
|
+
if (!editor) return;
|
|
5057
|
+
if (lastContentRef.current === value) return;
|
|
5058
|
+
editor?.commands.setContent(value);
|
|
5059
|
+
lastContentRef.current = value;
|
|
5060
|
+
}, [value, editor]);
|
|
5061
|
+
const onPageChange = useDebounce((pageIndex) => {
|
|
5062
|
+
onScrollPage?.(parseInt(pageIndex ?? "0"));
|
|
5063
|
+
}, 300);
|
|
5064
|
+
React16.useEffect(() => {
|
|
5065
|
+
if (!editor) return;
|
|
5066
|
+
const container2 = document.querySelector(".content-wrapper");
|
|
5067
|
+
if (!container2) return;
|
|
5068
|
+
const handleSelectionUpdate = () => {
|
|
5069
|
+
const { from } = editor.state.selection;
|
|
5070
|
+
const domAtPos = editor.view.domAtPos(from);
|
|
5071
|
+
const domNode = domAtPos.node;
|
|
5072
|
+
const contentRoot = editor.view.dom;
|
|
5073
|
+
let el = domNode.nodeType === 1 ? domNode : domNode.parentElement;
|
|
5074
|
+
let pageNo = null;
|
|
5075
|
+
while (el && el !== contentRoot) {
|
|
5076
|
+
if (el.classList.contains("page-no")) {
|
|
5077
|
+
pageNo = el.getAttribute("page-no");
|
|
5078
|
+
break;
|
|
5079
|
+
}
|
|
5080
|
+
el = el.previousElementSibling || el.parentElement;
|
|
5081
|
+
}
|
|
5082
|
+
if (!pageNo && domNode) {
|
|
5083
|
+
const allPageNoEls = Array.from(contentRoot.querySelectorAll(".page-no"));
|
|
5084
|
+
const scrollTop = domNode.getBoundingClientRect?.()?.top;
|
|
5085
|
+
for (let i = allPageNoEls.length - 1; i >= 0; i--) {
|
|
5086
|
+
const elTop = allPageNoEls[i].getBoundingClientRect().top;
|
|
5087
|
+
if (elTop < scrollTop) {
|
|
5088
|
+
pageNo = allPageNoEls[i].getAttribute("page-no");
|
|
5089
|
+
break;
|
|
5090
|
+
}
|
|
5091
|
+
}
|
|
5092
|
+
}
|
|
5093
|
+
if (pageNo) {
|
|
5094
|
+
onPageChange(pageNo);
|
|
5095
|
+
}
|
|
5096
|
+
};
|
|
5097
|
+
const handleScroll = () => {
|
|
5098
|
+
const pageNos = Array.from(container2.querySelectorAll(".page-no"));
|
|
5099
|
+
if (!pageNos.length) return;
|
|
5100
|
+
let closestNode = null;
|
|
5101
|
+
let closestTopDiff = -Infinity;
|
|
5102
|
+
const containerTop = container2.getBoundingClientRect().top;
|
|
5103
|
+
pageNos.forEach((node) => {
|
|
5104
|
+
const rect = node.getBoundingClientRect();
|
|
5105
|
+
const top = rect.top - containerTop;
|
|
5106
|
+
if (Math.abs(top) <= 80) {
|
|
5107
|
+
closestNode = node;
|
|
5108
|
+
closestTopDiff = 0;
|
|
5109
|
+
} else if (top < 0 && top > closestTopDiff) {
|
|
5110
|
+
closestNode = node;
|
|
5111
|
+
closestTopDiff = top;
|
|
5112
|
+
}
|
|
5113
|
+
});
|
|
5114
|
+
if (closestNode) {
|
|
5115
|
+
const pageNo = closestNode.getAttribute("page-no");
|
|
5116
|
+
onPageChange(pageNo);
|
|
5117
|
+
}
|
|
5118
|
+
};
|
|
5119
|
+
editor.on("selectionUpdate", handleSelectionUpdate);
|
|
5120
|
+
container2.addEventListener("scroll", handleScroll);
|
|
5121
|
+
return () => {
|
|
5122
|
+
editor.off("selectionUpdate", handleSelectionUpdate);
|
|
5123
|
+
container2.removeEventListener("scroll", handleScroll);
|
|
5124
|
+
};
|
|
5125
|
+
}, [editor]);
|
|
5126
|
+
React16.useEffect(() => {
|
|
5127
|
+
editor?.commands.setSearchTerm(searchValue || "");
|
|
5128
|
+
}, [searchValue, value, editor]);
|
|
5129
|
+
React16.useEffect(() => {
|
|
5130
|
+
editor?.setEditable(!disabled);
|
|
5131
|
+
}, [disabled, editor]);
|
|
5132
|
+
const NsToolBar = ({ isBubble = true }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5133
|
+
Toolbar,
|
|
5134
|
+
{
|
|
5135
|
+
...isBubble ? {} : {
|
|
5136
|
+
ref: toolbarRef,
|
|
5137
|
+
style: isMobile ? {
|
|
5138
|
+
bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
|
|
5139
|
+
} : {}
|
|
5140
|
+
},
|
|
5141
|
+
children: mobileView === "main" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
5142
|
+
MainToolbarContent,
|
|
5143
|
+
{
|
|
5144
|
+
isBubble,
|
|
5145
|
+
onHighlighterClick: () => setMobileView("highlighter"),
|
|
5146
|
+
onLinkClick: () => setMobileView("link"),
|
|
5147
|
+
onQuote,
|
|
5148
|
+
isMobile
|
|
5149
|
+
}
|
|
5150
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(MobileToolbarContent, { type: mobileView === "highlighter" ? "highlighter" : "link", onBack: () => setMobileView("main") })
|
|
5151
|
+
}
|
|
5152
|
+
) });
|
|
5153
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames2__default.default("height-full", "editor-parent"), children: /* @__PURE__ */ jsxRuntime.jsxs(react.EditorContext.Provider, { value: { editor }, children: [
|
|
5154
|
+
showToolbar && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5155
|
+
/* @__PURE__ */ jsxRuntime.jsxs(antd.Flex, { justify: "end", align: "center", children: [
|
|
5156
|
+
NsToolBar({ isBubble: false }),
|
|
5157
|
+
extraNav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-l-16 m-r-16", children: extraNav })
|
|
5158
|
+
] }),
|
|
5159
|
+
!isMobile && /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, children: NsToolBar({ isBubble: true }) })
|
|
5160
|
+
] }),
|
|
5161
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "content-wrapper scroll-fade-in", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5162
|
+
react.EditorContent,
|
|
5163
|
+
{
|
|
5164
|
+
editor,
|
|
5165
|
+
role: "presentation",
|
|
5166
|
+
className: classNames2__default.default("simple-editor-content ns-markdown", { "no-toolbar": !showToolbar })
|
|
5167
|
+
}
|
|
5168
|
+
) })
|
|
5169
|
+
] }) });
|
|
5170
|
+
};
|
|
1376
5171
|
function isRenderFn(node) {
|
|
1377
5172
|
return isFunction(node) || isObject(node) && !isNull(node) && "$$typeof" in node && node.$$typeof === Symbol.for("react.forward_ref");
|
|
1378
5173
|
}
|
|
@@ -1428,6 +5223,7 @@ exports.LazyComponent = LazyComponent_default;
|
|
|
1428
5223
|
exports.LgPrimaryColor = LgPrimaryColor;
|
|
1429
5224
|
exports.LoginPastCode = LoginPastCode;
|
|
1430
5225
|
exports.MISSING_PARAMETER = MISSING_PARAMETER;
|
|
5226
|
+
exports.MarkdownEditor = MarkdownEditor_default;
|
|
1431
5227
|
exports.MarkdownPreview = MarkdownPreview_default;
|
|
1432
5228
|
exports.NOT_FOUND = NOT_FOUND;
|
|
1433
5229
|
exports.OK = OK;
|