@ctzhian/tiptap 2.3.2-beta.7 → 2.3.2-beta.8
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/extension/index.js +3 -4
- package/dist/extension/node/TableOfContents/index.d.ts +8 -7
- package/dist/extension/node/TableOfContents/index.js +367 -34
- package/dist/extension/node/TableOfContents/types.d.ts +45 -0
- package/dist/extension/node/TableOfContents/types.js +1 -0
- package/dist/extension/node/TableOfContents/util.d.ts +6 -0
- package/dist/extension/node/TableOfContents/util.js +70 -0
- package/package.json +1 -1
package/dist/extension/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import StarterKit from '@tiptap/starter-kit';
|
|
|
14
14
|
import { PLACEHOLDER } from "../contants/placeholder";
|
|
15
15
|
import { AiWritingExtension, ImeComposition, SlashCommands, StructuredDiffExtension } from "./extension";
|
|
16
16
|
import { CodeExtension } from "./mark/Code";
|
|
17
|
-
import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomHorizontalRule, CustomInlineMathExtension, CustomSubscript, CustomSuperscript, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, FlowExtension, IframeExtension, ImageExtension, Indent, InlineAttachmentExtension, InlineLinkExtension, InlineUploadProgressExtension, ListExtension, MentionExtension, TableExtension,
|
|
17
|
+
import { AlertExtension, AudioExtension, BlockAttachmentExtension, BlockLinkExtension, CodeBlockLowlightExtension, CustomBlockMathExtension, CustomHorizontalRule, CustomInlineMathExtension, CustomSubscript, CustomSuperscript, DetailsContentExtension, DetailsExtension, DetailsSummaryExtension, EmojiExtension, FileHandlerExtension, FlowExtension, IframeExtension, ImageExtension, Indent, InlineAttachmentExtension, InlineLinkExtension, InlineUploadProgressExtension, ListExtension, MentionExtension, TableExtension, TableOfContents, UploadProgressExtension, VerticalAlign, VideoExtension, YamlFormat, YoutubeExtension } from "./node";
|
|
18
18
|
export var getExtensions = function getExtensions(_ref) {
|
|
19
19
|
var contentType = _ref.contentType,
|
|
20
20
|
limit = _ref.limit,
|
|
@@ -58,9 +58,8 @@ export var getExtensions = function getExtensions(_ref) {
|
|
|
58
58
|
onValidateUrl: onValidateUrl
|
|
59
59
|
})].concat(_toConsumableArray(TableExtension({
|
|
60
60
|
editable: editable
|
|
61
|
-
})), [
|
|
62
|
-
onTocUpdate: onTocUpdate
|
|
63
|
-
tableOfContentsOptions: tableOfContentsOptions
|
|
61
|
+
})), [TableOfContents({
|
|
62
|
+
onTocUpdate: onTocUpdate
|
|
64
63
|
}), ImageExtension({
|
|
65
64
|
onUpload: onUpload,
|
|
66
65
|
onError: onError,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { TocList } from "../../../type";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { Extension } from '@tiptap/core';
|
|
3
|
+
import { TableOfContentsOptions, TableOfContentsStorage } from './types';
|
|
4
|
+
export * from './types';
|
|
5
|
+
export declare const TableOfContentsExtension: Extension<TableOfContentsOptions, TableOfContentsStorage>;
|
|
6
|
+
export declare const TableOfContents: ({ onTocUpdate }: {
|
|
7
|
+
onTocUpdate?: ((toc: TocList) => void) | undefined;
|
|
8
|
+
}) => Extension<TableOfContentsOptions, TableOfContentsStorage>;
|
|
9
|
+
export default TableOfContents;
|
|
@@ -4,43 +4,375 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
8
|
+
|
|
9
|
+
import { Extension } from '@tiptap/core';
|
|
10
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
9
11
|
import { TableOfContentsPlugin } from "./plugin";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
12
|
+
import { getHeadlineLevel, getHierarchicalIndexes, getLinearIndexes } from "./util";
|
|
13
|
+
export * from "./types";
|
|
14
|
+
|
|
15
|
+
// 全局组合状态管理,避免在 IME 组合期间触发 TOC 更新
|
|
16
|
+
var globalCompositionState = false;
|
|
17
|
+
var globalCompositionEndTimer = null;
|
|
18
|
+
var globalInputTimer = null;
|
|
19
|
+
var lastInputTime = 0;
|
|
20
|
+
|
|
21
|
+
// 全局监听组合状态和输入事件
|
|
22
|
+
if (typeof document !== 'undefined') {
|
|
23
|
+
document.addEventListener('compositionstart', function () {
|
|
24
|
+
globalCompositionState = true;
|
|
25
|
+
}, {
|
|
26
|
+
passive: true
|
|
27
|
+
});
|
|
28
|
+
document.addEventListener('compositionend', function () {
|
|
29
|
+
globalCompositionState = false;
|
|
30
|
+
// 组合结束后,延迟刷新所有 TOC 实例
|
|
31
|
+
if (globalCompositionEndTimer) {
|
|
32
|
+
clearTimeout(globalCompositionEndTimer);
|
|
33
|
+
}
|
|
34
|
+
globalCompositionEndTimer = setTimeout(function () {
|
|
35
|
+
// 这里会通过 editor 实例来触发刷新
|
|
36
|
+
// 具体实现在 onTransaction 中处理
|
|
37
|
+
}, 200);
|
|
38
|
+
}, {
|
|
39
|
+
passive: true
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// 监听所有输入事件,记录最后输入时间
|
|
43
|
+
document.addEventListener('input', function () {
|
|
44
|
+
lastInputTime = Date.now();
|
|
45
|
+
}, {
|
|
46
|
+
passive: true
|
|
47
|
+
});
|
|
48
|
+
document.addEventListener('keydown', function () {
|
|
49
|
+
lastInputTime = Date.now();
|
|
50
|
+
}, {
|
|
51
|
+
passive: true
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
var addTocActiveStatesAndGetItems = function addTocActiveStatesAndGetItems(content, options) {
|
|
55
|
+
var editor = options.editor;
|
|
56
|
+
var headlines = [];
|
|
57
|
+
var scrolledOverIds = [];
|
|
58
|
+
var activeId = null;
|
|
59
|
+
if (editor.isDestroyed) {
|
|
60
|
+
return content;
|
|
61
|
+
}
|
|
62
|
+
editor.state.doc.descendants(function (node, pos) {
|
|
63
|
+
var _options$anchorTypes;
|
|
64
|
+
var isValidType = (_options$anchorTypes = options.anchorTypes) === null || _options$anchorTypes === void 0 ? void 0 : _options$anchorTypes.includes(node.type.name);
|
|
65
|
+
if (!isValidType) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
headlines.push({
|
|
69
|
+
node: node,
|
|
70
|
+
pos: pos
|
|
71
|
+
});
|
|
72
|
+
});
|
|
73
|
+
headlines.forEach(function (headline) {
|
|
74
|
+
var domElement = editor.view.domAtPos(headline.pos + 1).node;
|
|
75
|
+
var scrolledOver = options.storage.scrollPosition >= domElement.offsetTop;
|
|
76
|
+
if (scrolledOver) {
|
|
77
|
+
activeId = headline.node.attrs.id;
|
|
78
|
+
scrolledOverIds.push(headline.node.attrs.id);
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
return content.map(function (heading) {
|
|
82
|
+
return _objectSpread(_objectSpread({}, heading), {}, {
|
|
83
|
+
isActive: heading.id === activeId,
|
|
84
|
+
isScrolledOver: scrolledOverIds.includes(heading.id)
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
var setTocData = function setTocData(options) {
|
|
89
|
+
var editor = options.editor,
|
|
90
|
+
onUpdate = options.onUpdate;
|
|
91
|
+
if (editor.isDestroyed) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
var headlines = [];
|
|
95
|
+
var anchors = [];
|
|
96
|
+
var anchorEls = [];
|
|
97
|
+
editor.state.doc.descendants(function (node, pos) {
|
|
98
|
+
var _options$anchorTypes2;
|
|
99
|
+
var isValidType = (_options$anchorTypes2 = options.anchorTypes) === null || _options$anchorTypes2 === void 0 ? void 0 : _options$anchorTypes2.includes(node.type.name);
|
|
100
|
+
if (!isValidType) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
headlines.push({
|
|
104
|
+
node: node,
|
|
105
|
+
pos: pos
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
headlines.forEach(function (headline) {
|
|
109
|
+
if (headline.node.textContent.length === 0) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
var domElement = editor.view.domAtPos(headline.pos + 1).node;
|
|
113
|
+
var scrolledOver = options.storage.scrollPosition >= domElement.offsetTop;
|
|
114
|
+
anchorEls.push(domElement);
|
|
115
|
+
var originalLevel = headline.node.attrs.level;
|
|
116
|
+
var level = options.getLevelFn(headline, anchors);
|
|
117
|
+
var itemIndex = options.getIndexFn(headline, anchors, level);
|
|
118
|
+
anchors.push({
|
|
119
|
+
itemIndex: itemIndex,
|
|
120
|
+
id: headline.node.attrs.id || options.getId(headline.node.textContent),
|
|
121
|
+
originalLevel: originalLevel,
|
|
122
|
+
level: level,
|
|
123
|
+
textContent: headline.node.textContent,
|
|
124
|
+
pos: headline.pos,
|
|
125
|
+
editor: editor,
|
|
126
|
+
isActive: false,
|
|
127
|
+
isScrolledOver: scrolledOver,
|
|
128
|
+
node: headline.node,
|
|
129
|
+
dom: domElement
|
|
130
|
+
});
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
// 计算 active 和 scrolledOver 状态
|
|
134
|
+
anchors = addTocActiveStatesAndGetItems(anchors, {
|
|
135
|
+
editor: options.editor,
|
|
136
|
+
anchorTypes: options.anchorTypes,
|
|
137
|
+
storage: options.storage
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// 更新存储
|
|
141
|
+
options.storage.anchors = anchorEls;
|
|
142
|
+
options.storage.content = anchors;
|
|
143
|
+
|
|
144
|
+
// 调用回调
|
|
145
|
+
if (onUpdate) {
|
|
146
|
+
var isInitialCreation = options.storage.content.length === 0;
|
|
147
|
+
onUpdate(anchors, isInitialCreation);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
export var TableOfContentsExtension = Extension.create({
|
|
151
|
+
name: 'tableOfContents',
|
|
152
|
+
addStorage: function addStorage() {
|
|
153
|
+
return {
|
|
154
|
+
content: [],
|
|
155
|
+
anchors: [],
|
|
156
|
+
scrollHandler: function scrollHandler() {
|
|
157
|
+
return null;
|
|
158
|
+
},
|
|
159
|
+
scrollPosition: 0
|
|
160
|
+
};
|
|
161
|
+
},
|
|
162
|
+
addGlobalAttributes: function addGlobalAttributes() {
|
|
163
|
+
return [{
|
|
164
|
+
types: this.options.anchorTypes || ['heading'],
|
|
165
|
+
attributes: {
|
|
166
|
+
id: {
|
|
167
|
+
default: null,
|
|
168
|
+
renderHTML: function renderHTML(attributes) {
|
|
169
|
+
return {
|
|
170
|
+
id: attributes.id
|
|
171
|
+
};
|
|
172
|
+
},
|
|
173
|
+
parseHTML: function parseHTML(element) {
|
|
174
|
+
return element.id || null;
|
|
26
175
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}];
|
|
179
|
+
},
|
|
180
|
+
addOptions: function addOptions() {
|
|
181
|
+
var defaultScrollParent = typeof window !== 'undefined' ? function () {
|
|
182
|
+
return window;
|
|
183
|
+
} : undefined;
|
|
184
|
+
return {
|
|
185
|
+
// eslint-disable-next-line
|
|
186
|
+
onUpdate: function onUpdate() {},
|
|
187
|
+
// eslint-disable-next-line
|
|
188
|
+
getId: function getId(_textContent) {
|
|
189
|
+
return uuidv4();
|
|
190
|
+
},
|
|
191
|
+
scrollParent: defaultScrollParent,
|
|
192
|
+
anchorTypes: ['heading']
|
|
193
|
+
};
|
|
194
|
+
},
|
|
195
|
+
addCommands: function addCommands() {
|
|
196
|
+
var _this = this;
|
|
197
|
+
return {
|
|
198
|
+
updateTableOfContents: function updateTableOfContents() {
|
|
199
|
+
return function (_ref) {
|
|
200
|
+
var dispatch = _ref.dispatch;
|
|
201
|
+
if (dispatch) {
|
|
202
|
+
var _this$options$onUpdat;
|
|
203
|
+
setTocData({
|
|
204
|
+
editor: _this.editor,
|
|
205
|
+
storage: _this.storage,
|
|
206
|
+
onUpdate: (_this$options$onUpdat = _this.options.onUpdate) === null || _this$options$onUpdat === void 0 ? void 0 : _this$options$onUpdat.bind(_this),
|
|
207
|
+
getIndexFn: _this.options.getIndex || getLinearIndexes,
|
|
208
|
+
getLevelFn: _this.options.getLevel || getHeadlineLevel,
|
|
209
|
+
anchorTypes: _this.options.anchorTypes,
|
|
210
|
+
getId: _this.options.getId || function (textContent) {
|
|
211
|
+
return uuidv4();
|
|
212
|
+
}
|
|
213
|
+
});
|
|
30
214
|
}
|
|
31
|
-
return
|
|
215
|
+
return true;
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
};
|
|
219
|
+
},
|
|
220
|
+
onTransaction: function onTransaction(_ref2) {
|
|
221
|
+
var _this2 = this;
|
|
222
|
+
var transaction = _ref2.transaction;
|
|
223
|
+
if (!transaction.docChanged) return;
|
|
224
|
+
var now = Date.now();
|
|
225
|
+
var timeSinceLastInput = now - lastInputTime;
|
|
226
|
+
|
|
227
|
+
// 组合期间完全不处理 TOC 更新,避免打断输入
|
|
228
|
+
if (globalCompositionState || this.editor.view.composing) {
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// 如果最近有输入(1秒内),延迟处理
|
|
233
|
+
if (timeSinceLastInput < 1000) {
|
|
234
|
+
if (globalInputTimer) {
|
|
235
|
+
clearTimeout(globalInputTimer);
|
|
236
|
+
}
|
|
237
|
+
globalInputTimer = setTimeout(function () {
|
|
238
|
+
// 再次检查组合状态
|
|
239
|
+
if (!globalCompositionState && !_this2.editor.view.composing) {
|
|
240
|
+
var _this2$options$onUpda;
|
|
241
|
+
setTocData({
|
|
242
|
+
editor: _this2.editor,
|
|
243
|
+
storage: _this2.storage,
|
|
244
|
+
onUpdate: (_this2$options$onUpda = _this2.options.onUpdate) === null || _this2$options$onUpda === void 0 ? void 0 : _this2$options$onUpda.bind(_this2),
|
|
245
|
+
getIndexFn: _this2.options.getIndex || getLinearIndexes,
|
|
246
|
+
getLevelFn: _this2.options.getLevel || getHeadlineLevel,
|
|
247
|
+
anchorTypes: _this2.options.anchorTypes,
|
|
248
|
+
getId: _this2.options.getId || function (textContent) {
|
|
249
|
+
return uuidv4();
|
|
250
|
+
}
|
|
251
|
+
});
|
|
32
252
|
}
|
|
33
|
-
})
|
|
253
|
+
}, 1000 - timeSinceLastInput + 200);
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
// 非组合期间且无最近输入,使用 setTimeout 确保有足够延迟
|
|
258
|
+
setTimeout(function () {
|
|
259
|
+
// 再次检查,确保组合状态没有变化
|
|
260
|
+
if (!globalCompositionState && !_this2.editor.view.composing) {
|
|
261
|
+
var _this2$options$onUpda2;
|
|
262
|
+
setTocData({
|
|
263
|
+
editor: _this2.editor,
|
|
264
|
+
storage: _this2.storage,
|
|
265
|
+
onUpdate: (_this2$options$onUpda2 = _this2.options.onUpdate) === null || _this2$options$onUpda2 === void 0 ? void 0 : _this2$options$onUpda2.bind(_this2),
|
|
266
|
+
getIndexFn: _this2.options.getIndex || getLinearIndexes,
|
|
267
|
+
getLevelFn: _this2.options.getLevel || getHeadlineLevel,
|
|
268
|
+
anchorTypes: _this2.options.anchorTypes,
|
|
269
|
+
getId: _this2.options.getId || function (textContent) {
|
|
270
|
+
return uuidv4();
|
|
271
|
+
}
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
}, 100);
|
|
275
|
+
},
|
|
276
|
+
onCreate: function onCreate() {
|
|
277
|
+
var _this3 = this;
|
|
278
|
+
var tr = this.editor.state.tr;
|
|
279
|
+
var existingIds = [];
|
|
280
|
+
if (this.options.scrollParent && typeof this.options.scrollParent !== 'function') {
|
|
281
|
+
console.warn("[Tiptap Table of Contents Deprecation Notice]: The 'scrollParent' option must now be provided as a callback function that returns the 'scrollParent' element. The ability to pass this option directly will be deprecated in future releases.");
|
|
34
282
|
}
|
|
35
|
-
}).configure(_objectSpread(_objectSpread({
|
|
36
|
-
getIndex: getHierarchicalIndexes
|
|
37
|
-
}, tableOfContentsOptions || {}), {}, {
|
|
38
|
-
onUpdate: function onUpdate(data, isCreate) {
|
|
39
|
-
var _tableOfContentsOptio;
|
|
40
|
-
// 先调用用户传入的 onUpdate 回调(如果存在)
|
|
41
|
-
tableOfContentsOptions === null || tableOfContentsOptions === void 0 || (_tableOfContentsOptio = tableOfContentsOptions.onUpdate) === null || _tableOfContentsOptio === void 0 || _tableOfContentsOptio.call(tableOfContentsOptions, data, isCreate);
|
|
42
283
|
|
|
43
|
-
|
|
284
|
+
// 异步处理初始 ID 分配,避免与初始输入竞争
|
|
285
|
+
requestAnimationFrame(function () {
|
|
286
|
+
_this3.editor.state.doc.descendants(function (node, pos) {
|
|
287
|
+
var _this3$options$anchor;
|
|
288
|
+
var nodeId = node.attrs.id;
|
|
289
|
+
var isValidType = (_this3$options$anchor = _this3.options.anchorTypes) === null || _this3$options$anchor === void 0 ? void 0 : _this3$options$anchor.includes(node.type.name);
|
|
290
|
+
if (!isValidType || node.textContent.length === 0) {
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
if (nodeId === null || nodeId === undefined || existingIds.includes(nodeId)) {
|
|
294
|
+
var id = '';
|
|
295
|
+
if (_this3.options.getId) {
|
|
296
|
+
id = _this3.options.getId(node.textContent);
|
|
297
|
+
} else {
|
|
298
|
+
id = uuidv4();
|
|
299
|
+
}
|
|
300
|
+
tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
|
|
301
|
+
id: id
|
|
302
|
+
}));
|
|
303
|
+
}
|
|
304
|
+
existingIds.push(nodeId);
|
|
305
|
+
});
|
|
306
|
+
_this3.editor.view.dispatch(tr);
|
|
307
|
+
|
|
308
|
+
// 延迟初始化 TOC 数据
|
|
309
|
+
setTimeout(function () {
|
|
310
|
+
var _this3$options$onUpda;
|
|
311
|
+
setTocData({
|
|
312
|
+
editor: _this3.editor,
|
|
313
|
+
storage: _this3.storage,
|
|
314
|
+
onUpdate: (_this3$options$onUpda = _this3.options.onUpdate) === null || _this3$options$onUpda === void 0 ? void 0 : _this3$options$onUpda.bind(_this3),
|
|
315
|
+
getIndexFn: _this3.options.getIndex || getLinearIndexes,
|
|
316
|
+
getLevelFn: _this3.options.getLevel || getHeadlineLevel,
|
|
317
|
+
anchorTypes: _this3.options.anchorTypes,
|
|
318
|
+
getId: _this3.options.getId || function (textContent) {
|
|
319
|
+
return uuidv4();
|
|
320
|
+
}
|
|
321
|
+
});
|
|
322
|
+
}, 100);
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
// 防抖的 scroll handler,避免滚动期间频繁触发回调
|
|
326
|
+
var scrollTimer = null;
|
|
327
|
+
this.storage.scrollHandler = function () {
|
|
328
|
+
if (!_this3.options.scrollParent) {
|
|
329
|
+
return;
|
|
330
|
+
}
|
|
331
|
+
var scrollParent = typeof _this3.options.scrollParent === 'function' ? _this3.options.scrollParent() : _this3.options.scrollParent;
|
|
332
|
+
var scrollPosition = scrollParent instanceof HTMLElement ? scrollParent.scrollTop : scrollParent.scrollY;
|
|
333
|
+
_this3.storage.scrollPosition = scrollPosition || 0;
|
|
334
|
+
if (scrollTimer) clearTimeout(scrollTimer);
|
|
335
|
+
scrollTimer = setTimeout(function () {
|
|
336
|
+
var _this3$options$onUpda2, _this3$options;
|
|
337
|
+
var updatedItems = addTocActiveStatesAndGetItems(_this3.storage.content, {
|
|
338
|
+
editor: _this3.editor,
|
|
339
|
+
anchorTypes: _this3.options.anchorTypes,
|
|
340
|
+
storage: _this3.storage
|
|
341
|
+
});
|
|
342
|
+
_this3.storage.content = updatedItems;
|
|
343
|
+
// 调用 onUpdate 回调
|
|
344
|
+
(_this3$options$onUpda2 = (_this3$options = _this3.options).onUpdate) === null || _this3$options$onUpda2 === void 0 || _this3$options$onUpda2.call(_this3$options, updatedItems, false);
|
|
345
|
+
}, 100);
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
// 添加滚动监听
|
|
349
|
+
if (this.options.scrollParent) {
|
|
350
|
+
var scrollParent = typeof this.options.scrollParent === 'function' ? this.options.scrollParent() : this.options.scrollParent;
|
|
351
|
+
if (scrollParent) {
|
|
352
|
+
scrollParent.addEventListener('scroll', this.storage.scrollHandler);
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
onDestroy: function onDestroy() {
|
|
357
|
+
if (this.options.scrollParent) {
|
|
358
|
+
var scrollParent = typeof this.options.scrollParent === 'function' ? this.options.scrollParent() : this.options.scrollParent;
|
|
359
|
+
if (scrollParent) {
|
|
360
|
+
scrollParent.removeEventListener('scroll', this.storage.scrollHandler);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
},
|
|
364
|
+
addProseMirrorPlugins: function addProseMirrorPlugins() {
|
|
365
|
+
return [TableOfContentsPlugin({
|
|
366
|
+
getId: this.options.getId,
|
|
367
|
+
anchorTypes: this.options.anchorTypes
|
|
368
|
+
})];
|
|
369
|
+
}
|
|
370
|
+
});
|
|
371
|
+
export var TableOfContents = function TableOfContents(_ref3) {
|
|
372
|
+
var onTocUpdate = _ref3.onTocUpdate;
|
|
373
|
+
return TableOfContentsExtension.configure({
|
|
374
|
+
getIndex: getHierarchicalIndexes,
|
|
375
|
+
onUpdate: function onUpdate(data) {
|
|
44
376
|
setTimeout(function () {
|
|
45
377
|
onTocUpdate === null || onTocUpdate === void 0 || onTocUpdate(data.map(function (content) {
|
|
46
378
|
return {
|
|
@@ -54,7 +386,8 @@ export var TableOfContentsExtension = function TableOfContentsExtension(_ref) {
|
|
|
54
386
|
textContent: content.textContent
|
|
55
387
|
};
|
|
56
388
|
}));
|
|
57
|
-
},
|
|
389
|
+
}, 0);
|
|
58
390
|
}
|
|
59
|
-
})
|
|
60
|
-
};
|
|
391
|
+
});
|
|
392
|
+
};
|
|
393
|
+
export default TableOfContents;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { Editor } from '@tiptap/core';
|
|
2
|
+
import type { Node } from '@tiptap/pm/model';
|
|
3
|
+
export type GetTableOfContentLevelFunction = (headline: {
|
|
4
|
+
node: Node;
|
|
5
|
+
pos: number;
|
|
6
|
+
}, previousItems: TableOfContentDataItem[]) => number;
|
|
7
|
+
export type GetTableOfContentIndexFunction = (headline: {
|
|
8
|
+
node: Node;
|
|
9
|
+
pos: number;
|
|
10
|
+
}, previousItems: TableOfContentDataItem[], currentLevel?: number) => number;
|
|
11
|
+
export type TableOfContentsOptions = {
|
|
12
|
+
getId?: (textContent: string) => string;
|
|
13
|
+
onUpdate?: (data: TableOfContentData, isCreate?: boolean) => void;
|
|
14
|
+
getLevel?: GetTableOfContentLevelFunction;
|
|
15
|
+
getIndex?: GetTableOfContentIndexFunction;
|
|
16
|
+
scrollParent?: (() => HTMLElement | Window) | HTMLElement | Window;
|
|
17
|
+
anchorTypes?: Array<string>;
|
|
18
|
+
};
|
|
19
|
+
export type TableOfContentsStorage = {
|
|
20
|
+
content: TableOfContentData;
|
|
21
|
+
anchors: Array<HTMLHeadingElement | HTMLElement>;
|
|
22
|
+
scrollHandler: () => void;
|
|
23
|
+
scrollPosition: number;
|
|
24
|
+
};
|
|
25
|
+
export type TableOfContentData = Array<TableOfContentDataItem>;
|
|
26
|
+
export type TableOfContentDataItem = {
|
|
27
|
+
dom: HTMLHeadingElement;
|
|
28
|
+
editor: Editor;
|
|
29
|
+
id: string;
|
|
30
|
+
isActive: boolean;
|
|
31
|
+
isScrolledOver: boolean;
|
|
32
|
+
itemIndex: number;
|
|
33
|
+
level: number;
|
|
34
|
+
node: Node;
|
|
35
|
+
originalLevel: number;
|
|
36
|
+
pos: number;
|
|
37
|
+
textContent: string;
|
|
38
|
+
};
|
|
39
|
+
declare module '@tiptap/core' {
|
|
40
|
+
interface Commands<ReturnType> {
|
|
41
|
+
tableOfContents: {
|
|
42
|
+
updateTableOfContents: () => ReturnType;
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { GetTableOfContentIndexFunction, GetTableOfContentLevelFunction, TableOfContentDataItem } from './types';
|
|
2
|
+
export declare const getLastHeadingOnLevel: (headings: TableOfContentDataItem[], level: number) => TableOfContentDataItem | undefined;
|
|
3
|
+
export declare const getHeadlineLevel: GetTableOfContentLevelFunction;
|
|
4
|
+
export declare const getLinearIndexes: GetTableOfContentIndexFunction;
|
|
5
|
+
export declare const getHierarchicalIndexes: GetTableOfContentIndexFunction;
|
|
6
|
+
export declare function debounce(func: (...args: any[]) => void, wait: number): (...args: any[]) => void;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
7
|
+
export var getLastHeadingOnLevel = function getLastHeadingOnLevel(headings, level) {
|
|
8
|
+
var heading = headings.filter(function (currentHeading) {
|
|
9
|
+
return currentHeading.level === level;
|
|
10
|
+
}).pop();
|
|
11
|
+
if (level === 0) {
|
|
12
|
+
return undefined;
|
|
13
|
+
}
|
|
14
|
+
if (!heading) {
|
|
15
|
+
heading = getLastHeadingOnLevel(headings, level - 1);
|
|
16
|
+
}
|
|
17
|
+
return heading;
|
|
18
|
+
};
|
|
19
|
+
export var getHeadlineLevel = function getHeadlineLevel(headline, previousItems) {
|
|
20
|
+
var level = 1;
|
|
21
|
+
var previousHeadline = previousItems.at(-1);
|
|
22
|
+
var highestHeadlineAbove = _toConsumableArray(previousItems).reverse().find(function (h) {
|
|
23
|
+
return h.originalLevel <= headline.node.attrs.level;
|
|
24
|
+
});
|
|
25
|
+
var highestLevelAbove = (highestHeadlineAbove === null || highestHeadlineAbove === void 0 ? void 0 : highestHeadlineAbove.level) || 1;
|
|
26
|
+
if (headline.node.attrs.level > ((previousHeadline === null || previousHeadline === void 0 ? void 0 : previousHeadline.originalLevel) || 1)) {
|
|
27
|
+
level = ((previousHeadline === null || previousHeadline === void 0 ? void 0 : previousHeadline.level) || 1) + 1;
|
|
28
|
+
} else if (headline.node.attrs.level < ((previousHeadline === null || previousHeadline === void 0 ? void 0 : previousHeadline.originalLevel) || 1)) {
|
|
29
|
+
level = highestLevelAbove;
|
|
30
|
+
} else {
|
|
31
|
+
level = (previousHeadline === null || previousHeadline === void 0 ? void 0 : previousHeadline.level) || 1;
|
|
32
|
+
}
|
|
33
|
+
return level;
|
|
34
|
+
};
|
|
35
|
+
export var getLinearIndexes = function getLinearIndexes(_headline, previousHeadlines) {
|
|
36
|
+
var previousHeadline = previousHeadlines.at(-1);
|
|
37
|
+
if (!previousHeadline) {
|
|
38
|
+
return 1;
|
|
39
|
+
}
|
|
40
|
+
return ((previousHeadline === null || previousHeadline === void 0 ? void 0 : previousHeadline.itemIndex) || 1) + 1;
|
|
41
|
+
};
|
|
42
|
+
export var getHierarchicalIndexes = function getHierarchicalIndexes(headline, previousHeadlines, currentLevel) {
|
|
43
|
+
var _previousHeadlinesOnL;
|
|
44
|
+
var level = currentLevel || headline.node.attrs.level || 1;
|
|
45
|
+
var itemIndex = 1;
|
|
46
|
+
var previousHeadlinesOnLevelOrBelow = previousHeadlines.filter(function (h) {
|
|
47
|
+
return h.level <= level;
|
|
48
|
+
});
|
|
49
|
+
if (((_previousHeadlinesOnL = previousHeadlinesOnLevelOrBelow.at(-1)) === null || _previousHeadlinesOnL === void 0 ? void 0 : _previousHeadlinesOnL.level) === level) {
|
|
50
|
+
var _previousHeadlinesOnL2;
|
|
51
|
+
itemIndex = (((_previousHeadlinesOnL2 = previousHeadlinesOnLevelOrBelow.at(-1)) === null || _previousHeadlinesOnL2 === void 0 ? void 0 : _previousHeadlinesOnL2.itemIndex) || 1) + 1;
|
|
52
|
+
} else {
|
|
53
|
+
itemIndex = 1;
|
|
54
|
+
}
|
|
55
|
+
return itemIndex;
|
|
56
|
+
};
|
|
57
|
+
export function debounce(func, wait) {
|
|
58
|
+
var timeout = null;
|
|
59
|
+
return function () {
|
|
60
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
61
|
+
args[_key] = arguments[_key];
|
|
62
|
+
}
|
|
63
|
+
if (timeout) {
|
|
64
|
+
clearTimeout(timeout);
|
|
65
|
+
}
|
|
66
|
+
timeout = setTimeout(function () {
|
|
67
|
+
func.apply(void 0, args);
|
|
68
|
+
}, wait);
|
|
69
|
+
};
|
|
70
|
+
}
|