2021-10-22 09:09:20 +00:00
|
|
|
import { Node, InputRule } from '@tiptap/core';
|
2021-09-21 12:11:06 +00:00
|
|
|
import { s__ } from '~/locale';
|
|
|
|
import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
|
|
|
|
|
|
|
|
export default Node.create({
|
|
|
|
name: 'tableOfContents',
|
|
|
|
|
|
|
|
inline: false,
|
|
|
|
|
|
|
|
group: 'block',
|
|
|
|
|
|
|
|
parseHTML() {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
tag: 'ul.section-nav',
|
|
|
|
priority: PARSE_HTML_PRIORITY_HIGHEST,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
},
|
|
|
|
|
|
|
|
renderHTML() {
|
|
|
|
return [
|
|
|
|
'div',
|
|
|
|
{
|
|
|
|
class:
|
|
|
|
'table-of-contents gl-border-1 gl-border-solid gl-text-center gl-border-gray-100 gl-mb-5',
|
|
|
|
},
|
|
|
|
s__('ContentEditor|Table of Contents'),
|
|
|
|
];
|
|
|
|
},
|
|
|
|
|
|
|
|
addInputRules() {
|
2021-10-01 12:13:32 +00:00
|
|
|
const { type } = this;
|
2021-10-22 09:09:20 +00:00
|
|
|
const inputRuleRegExps = [/^\[\[_TOC_\]\]$/, /^\[TOC\]$/];
|
2021-10-01 12:13:32 +00:00
|
|
|
|
|
|
|
return inputRuleRegExps.map(
|
|
|
|
(regex) =>
|
2021-10-22 09:09:20 +00:00
|
|
|
new InputRule({
|
|
|
|
find: regex,
|
|
|
|
handler: ({ state, range: { from, to }, match }) => {
|
|
|
|
const { tr } = state;
|
2021-10-01 12:13:32 +00:00
|
|
|
|
2021-10-22 09:09:20 +00:00
|
|
|
if (match) {
|
|
|
|
tr.replaceWith(from - 1, to, type.create());
|
|
|
|
}
|
2021-10-01 12:13:32 +00:00
|
|
|
|
2021-10-22 09:09:20 +00:00
|
|
|
return tr;
|
|
|
|
},
|
2021-10-01 12:13:32 +00:00
|
|
|
}),
|
|
|
|
);
|
2021-09-21 12:11:06 +00:00
|
|
|
},
|
|
|
|
});
|