2021-04-29 00:09:48 +00:00
|
|
|
import { Editor } from '@tiptap/vue-2';
|
|
|
|
import { isFunction } from 'lodash';
|
2022-02-24 15:15:02 +00:00
|
|
|
import eventHubFactory from '~/helpers/event_hub_factory';
|
2021-04-29 00:09:48 +00:00
|
|
|
import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
|
2021-08-10 15:10:03 +00:00
|
|
|
import Attachment from '../extensions/attachment';
|
2021-08-28 06:10:17 +00:00
|
|
|
import Audio from '../extensions/audio';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Blockquote from '../extensions/blockquote';
|
|
|
|
import Bold from '../extensions/bold';
|
|
|
|
import BulletList from '../extensions/bullet_list';
|
|
|
|
import Code from '../extensions/code';
|
|
|
|
import CodeBlockHighlight from '../extensions/code_block_highlight';
|
2021-10-14 03:12:40 +00:00
|
|
|
import ColorChip from '../extensions/color_chip';
|
2021-09-01 18:08:49 +00:00
|
|
|
import DescriptionItem from '../extensions/description_item';
|
|
|
|
import DescriptionList from '../extensions/description_list';
|
2021-10-08 21:09:48 +00:00
|
|
|
import Details from '../extensions/details';
|
|
|
|
import DetailsContent from '../extensions/details_content';
|
2022-03-28 09:07:06 +00:00
|
|
|
import Diagram from '../extensions/diagram';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Document from '../extensions/document';
|
|
|
|
import Dropcursor from '../extensions/dropcursor';
|
2021-08-12 09:09:05 +00:00
|
|
|
import Emoji from '../extensions/emoji';
|
2021-08-31 12:11:07 +00:00
|
|
|
import Figure from '../extensions/figure';
|
|
|
|
import FigureCaption from '../extensions/figure_caption';
|
2021-12-02 00:17:32 +00:00
|
|
|
import FootnoteDefinition from '../extensions/footnote_definition';
|
|
|
|
import FootnoteReference from '../extensions/footnote_reference';
|
|
|
|
import FootnotesSection from '../extensions/footnotes_section';
|
2021-09-23 22:34:10 +00:00
|
|
|
import Frontmatter from '../extensions/frontmatter';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Gapcursor from '../extensions/gapcursor';
|
|
|
|
import HardBreak from '../extensions/hard_break';
|
|
|
|
import Heading from '../extensions/heading';
|
|
|
|
import History from '../extensions/history';
|
|
|
|
import HorizontalRule from '../extensions/horizontal_rule';
|
2021-08-25 18:11:33 +00:00
|
|
|
import HTMLMarks from '../extensions/html_marks';
|
2022-07-01 21:08:27 +00:00
|
|
|
import HTMLNodes from '../extensions/html_nodes';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Image from '../extensions/image';
|
2021-08-17 12:08:42 +00:00
|
|
|
import InlineDiff from '../extensions/inline_diff';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Italic from '../extensions/italic';
|
|
|
|
import Link from '../extensions/link';
|
|
|
|
import ListItem from '../extensions/list_item';
|
2021-08-10 15:10:03 +00:00
|
|
|
import Loading from '../extensions/loading';
|
2021-10-14 09:09:30 +00:00
|
|
|
import MathInline from '../extensions/math_inline';
|
2021-07-27 21:09:42 +00:00
|
|
|
import OrderedList from '../extensions/ordered_list';
|
|
|
|
import Paragraph from '../extensions/paragraph';
|
2022-03-04 15:16:11 +00:00
|
|
|
import PasteMarkdown from '../extensions/paste_markdown';
|
2021-08-17 18:10:35 +00:00
|
|
|
import Reference from '../extensions/reference';
|
2022-07-29 15:12:25 +00:00
|
|
|
import ReferenceDefinition from '../extensions/reference_definition';
|
2022-05-11 00:08:02 +00:00
|
|
|
import Sourcemap from '../extensions/sourcemap';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Strike from '../extensions/strike';
|
2021-08-13 12:10:58 +00:00
|
|
|
import Subscript from '../extensions/subscript';
|
2022-09-29 12:08:49 +00:00
|
|
|
import Suggestions from '../extensions/suggestions';
|
2021-08-13 12:10:58 +00:00
|
|
|
import Superscript from '../extensions/superscript';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Table from '../extensions/table';
|
|
|
|
import TableCell from '../extensions/table_cell';
|
|
|
|
import TableHeader from '../extensions/table_header';
|
2021-09-21 12:11:06 +00:00
|
|
|
import TableOfContents from '../extensions/table_of_contents';
|
2021-07-27 21:09:42 +00:00
|
|
|
import TableRow from '../extensions/table_row';
|
2021-08-16 09:09:05 +00:00
|
|
|
import TaskItem from '../extensions/task_item';
|
|
|
|
import TaskList from '../extensions/task_list';
|
2021-07-27 21:09:42 +00:00
|
|
|
import Text from '../extensions/text';
|
2021-09-01 03:11:03 +00:00
|
|
|
import Video from '../extensions/video';
|
2021-09-23 22:34:10 +00:00
|
|
|
import WordBreak from '../extensions/word_break';
|
2021-04-29 00:09:48 +00:00
|
|
|
import { ContentEditor } from './content_editor';
|
|
|
|
import createMarkdownSerializer from './markdown_serializer';
|
2022-04-22 12:08:38 +00:00
|
|
|
import createGlApiMarkdownDeserializer from './gl_api_markdown_deserializer';
|
2022-04-30 00:09:38 +00:00
|
|
|
import createRemarkMarkdownDeserializer from './remark_markdown_deserializer';
|
2022-05-05 15:08:47 +00:00
|
|
|
import createAssetResolver from './asset_resolver';
|
2021-05-19 00:10:43 +00:00
|
|
|
import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
|
2021-04-29 00:09:48 +00:00
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
const createTiptapEditor = ({ extensions = [], ...options } = {}) =>
|
2021-04-29 00:09:48 +00:00
|
|
|
new Editor({
|
2021-05-07 12:10:27 +00:00
|
|
|
extensions: [...extensions],
|
2021-04-29 00:09:48 +00:00
|
|
|
editorProps: {
|
|
|
|
attributes: {
|
|
|
|
class: 'gl-outline-0!',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
...options,
|
|
|
|
});
|
|
|
|
|
2021-07-09 09:09:53 +00:00
|
|
|
export const createContentEditor = ({
|
|
|
|
renderMarkdown,
|
|
|
|
uploadsPath,
|
|
|
|
extensions = [],
|
2021-07-27 21:09:42 +00:00
|
|
|
serializerConfig = { marks: {}, nodes: {} },
|
2021-07-09 09:09:53 +00:00
|
|
|
tiptapOptions,
|
|
|
|
} = {}) => {
|
2021-04-29 00:09:48 +00:00
|
|
|
if (!isFunction(renderMarkdown)) {
|
|
|
|
throw new Error(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
|
|
|
|
}
|
|
|
|
|
2022-02-24 15:15:02 +00:00
|
|
|
const eventHub = eventHubFactory();
|
|
|
|
|
2021-07-09 09:09:53 +00:00
|
|
|
const builtInContentEditorExtensions = [
|
2022-02-24 15:15:02 +00:00
|
|
|
Attachment.configure({ uploadsPath, renderMarkdown, eventHub }),
|
2021-08-28 06:10:17 +00:00
|
|
|
Audio,
|
2021-07-09 09:09:53 +00:00
|
|
|
Blockquote,
|
|
|
|
Bold,
|
|
|
|
BulletList,
|
|
|
|
Code,
|
2021-10-14 03:12:40 +00:00
|
|
|
ColorChip,
|
2022-07-28 00:09:28 +00:00
|
|
|
CodeBlockHighlight,
|
2021-09-01 18:08:49 +00:00
|
|
|
DescriptionItem,
|
|
|
|
DescriptionList,
|
2021-10-08 21:09:48 +00:00
|
|
|
Details,
|
|
|
|
DetailsContent,
|
2021-07-09 09:09:53 +00:00
|
|
|
Document,
|
2022-03-28 09:07:06 +00:00
|
|
|
Diagram,
|
2021-07-09 09:09:53 +00:00
|
|
|
Dropcursor,
|
2021-08-12 09:09:05 +00:00
|
|
|
Emoji,
|
2021-08-31 12:11:07 +00:00
|
|
|
Figure,
|
|
|
|
FigureCaption,
|
2021-12-02 00:17:32 +00:00
|
|
|
FootnoteDefinition,
|
|
|
|
FootnoteReference,
|
|
|
|
FootnotesSection,
|
2022-07-28 00:09:28 +00:00
|
|
|
Frontmatter,
|
2021-07-09 09:09:53 +00:00
|
|
|
Gapcursor,
|
|
|
|
HardBreak,
|
|
|
|
Heading,
|
|
|
|
History,
|
|
|
|
HorizontalRule,
|
2021-08-25 18:11:33 +00:00
|
|
|
...HTMLMarks,
|
2022-07-01 21:08:27 +00:00
|
|
|
...HTMLNodes,
|
2021-08-10 15:10:03 +00:00
|
|
|
Image,
|
2021-08-17 12:08:42 +00:00
|
|
|
InlineDiff,
|
2021-07-09 09:09:53 +00:00
|
|
|
Italic,
|
|
|
|
Link,
|
|
|
|
ListItem,
|
2021-08-10 15:10:03 +00:00
|
|
|
Loading,
|
2021-10-14 09:09:30 +00:00
|
|
|
MathInline,
|
2021-07-09 09:09:53 +00:00
|
|
|
OrderedList,
|
|
|
|
Paragraph,
|
2022-09-13 15:12:17 +00:00
|
|
|
PasteMarkdown.configure({ eventHub, renderMarkdown }),
|
2021-08-17 18:10:35 +00:00
|
|
|
Reference,
|
2022-07-29 15:12:25 +00:00
|
|
|
ReferenceDefinition,
|
2022-05-11 00:08:02 +00:00
|
|
|
Sourcemap,
|
2021-07-09 09:09:53 +00:00
|
|
|
Strike,
|
2021-08-13 12:10:58 +00:00
|
|
|
Subscript,
|
2022-09-29 12:08:49 +00:00
|
|
|
Suggestions,
|
2021-08-13 12:10:58 +00:00
|
|
|
Superscript,
|
2021-07-13 21:08:20 +00:00
|
|
|
TableCell,
|
|
|
|
TableHeader,
|
2021-09-21 12:11:06 +00:00
|
|
|
TableOfContents,
|
2021-07-13 21:08:20 +00:00
|
|
|
TableRow,
|
|
|
|
Table,
|
2021-08-16 09:09:05 +00:00
|
|
|
TaskItem,
|
|
|
|
TaskList,
|
2021-07-09 09:09:53 +00:00
|
|
|
Text,
|
2021-09-01 03:11:03 +00:00
|
|
|
Video,
|
2021-09-23 22:34:10 +00:00
|
|
|
WordBreak,
|
2021-07-09 09:09:53 +00:00
|
|
|
];
|
|
|
|
|
2021-05-07 12:10:27 +00:00
|
|
|
const allExtensions = [...builtInContentEditorExtensions, ...extensions];
|
2021-07-27 21:09:42 +00:00
|
|
|
const trackedExtensions = allExtensions.map(trackInputRulesAndShortcuts);
|
|
|
|
const tiptapEditor = createTiptapEditor({ extensions: trackedExtensions, ...tiptapOptions });
|
2022-02-28 06:16:06 +00:00
|
|
|
const serializer = createMarkdownSerializer({ serializerConfig });
|
2022-04-30 00:09:38 +00:00
|
|
|
const deserializer = window.gon?.features?.preserveUnchangedMarkdown
|
|
|
|
? createRemarkMarkdownDeserializer()
|
|
|
|
: createGlApiMarkdownDeserializer({
|
|
|
|
render: renderMarkdown,
|
|
|
|
});
|
2022-05-05 15:08:47 +00:00
|
|
|
const assetResolver = createAssetResolver({ renderMarkdown });
|
2021-04-29 00:09:48 +00:00
|
|
|
|
2022-05-05 15:08:47 +00:00
|
|
|
return new ContentEditor({
|
|
|
|
tiptapEditor,
|
|
|
|
serializer,
|
|
|
|
eventHub,
|
|
|
|
deserializer,
|
|
|
|
assetResolver,
|
|
|
|
});
|
2021-04-29 00:09:48 +00:00
|
|
|
};
|