diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-02 00:08:27 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-02 00:08:27 +0300 |
commit | 6252c30d1707dcd26f6404f861d27a94f0e1d74f (patch) | |
tree | 9c6030d1f8f9698667674e10034da44f57e2b66b /app/assets/javascripts/content_editor | |
parent | 24d67ec55454fc6f4e8e80bf7c8dc5bc677e8514 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/content_editor')
5 files changed, 38 insertions, 45 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js index 61f6a233694..edf8b3d3a0b 100644 --- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js +++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js @@ -42,11 +42,14 @@ export default CodeBlockLowlight.extend({ }, parseHTML() { return [ - ...(this.parent?.() || []), { tag: 'div.markdown-code-block', skip: true, }, + { + tag: 'pre.js-syntax-highlight', + preserveWhitespace: 'full', + }, ]; }, renderHTML({ HTMLAttributes }) { diff --git a/app/assets/javascripts/content_editor/extensions/division.js b/app/assets/javascripts/content_editor/extensions/division.js deleted file mode 100644 index 566ed85acf3..00000000000 --- a/app/assets/javascripts/content_editor/extensions/division.js +++ /dev/null @@ -1,31 +0,0 @@ -import { Node } from '@tiptap/core'; -import { PARSE_HTML_PRIORITY_LOWEST } from '../constants'; - -const getDiv = (element) => { - if (element.nodeName === 'DIV') return element; - return element.querySelector('div'); -}; - -export default Node.create({ - name: 'division', - content: 'block*', - group: 'block', - defining: true, - - addAttributes() { - return { - className: { - default: null, - parseHTML: (element) => getDiv(element).className || null, - }, - }; - }, - - parseHTML() { - return [{ tag: 'div', priority: PARSE_HTML_PRIORITY_LOWEST }]; - }, - - renderHTML({ HTMLAttributes }) { - return ['div', HTMLAttributes, 0]; - }, -}); diff --git a/app/assets/javascripts/content_editor/extensions/html_nodes.js b/app/assets/javascripts/content_editor/extensions/html_nodes.js new file mode 100644 index 00000000000..23409354814 --- /dev/null +++ b/app/assets/javascripts/content_editor/extensions/html_nodes.js @@ -0,0 +1,25 @@ +import { Node } from '@tiptap/core'; +import { PARSE_HTML_PRIORITY_LOWEST } from '../constants'; + +const tags = ['div', 'pre']; + +const createHtmlNodeExtension = (tagName) => + Node.create({ + name: tagName, + content: 'block*', + group: 'block', + defining: true, + addOptions() { + return { + tagName, + }; + }, + parseHTML() { + return [{ tag: tagName, priority: PARSE_HTML_PRIORITY_LOWEST }]; + }, + renderHTML({ HTMLAttributes }) { + return [tagName, HTMLAttributes, 0]; + }, + }); + +export default tags.map(createHtmlNodeExtension); diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js index 15aac3d86e5..c5cfa9a4285 100644 --- a/app/assets/javascripts/content_editor/services/create_content_editor.js +++ b/app/assets/javascripts/content_editor/services/create_content_editor.js @@ -16,7 +16,6 @@ import DescriptionList from '../extensions/description_list'; import Details from '../extensions/details'; import DetailsContent from '../extensions/details_content'; import Diagram from '../extensions/diagram'; -import Division from '../extensions/division'; import Document from '../extensions/document'; import Dropcursor from '../extensions/dropcursor'; import Emoji from '../extensions/emoji'; @@ -32,6 +31,7 @@ import Heading from '../extensions/heading'; import History from '../extensions/history'; import HorizontalRule from '../extensions/horizontal_rule'; import HTMLMarks from '../extensions/html_marks'; +import HTMLNodes from '../extensions/html_nodes'; import Image from '../extensions/image'; import InlineDiff from '../extensions/inline_diff'; import Italic from '../extensions/italic'; @@ -103,7 +103,6 @@ export const createContentEditor = ({ DetailsContent, Document, Diagram, - Division, Dropcursor, Emoji, Figure, @@ -118,6 +117,7 @@ export const createContentEditor = ({ History, HorizontalRule, ...HTMLMarks, + ...HTMLNodes, Image, InlineDiff, Italic, diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js index 2d33a16f1a5..c7e05072927 100644 --- a/app/assets/javascripts/content_editor/services/markdown_serializer.js +++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js @@ -12,7 +12,6 @@ import DescriptionItem from '../extensions/description_item'; import DescriptionList from '../extensions/description_list'; import Details from '../extensions/details'; import DetailsContent from '../extensions/details_content'; -import Division from '../extensions/division'; import Diagram from '../extensions/diagram'; import Emoji from '../extensions/emoji'; import Figure from '../extensions/figure'; @@ -24,6 +23,7 @@ import HardBreak from '../extensions/hard_break'; import Heading from '../extensions/heading'; import HorizontalRule from '../extensions/horizontal_rule'; import HTMLMarks from '../extensions/html_marks'; +import HTMLNodes from '../extensions/html_nodes'; import Image from '../extensions/image'; import InlineDiff from '../extensions/inline_diff'; import Italic from '../extensions/italic'; @@ -123,16 +123,6 @@ const defaultSerializerConfig = { [BulletList.name]: preserveUnchanged(renderBulletList), [CodeBlockHighlight.name]: preserveUnchanged(renderCodeBlock), [Diagram.name]: renderCodeBlock, - [Division.name]: (state, node) => { - if (node.attrs.className?.includes('js-markdown-code')) { - state.renderInline(node); - } else { - const newNode = node; - delete newNode.attrs.className; - - renderHTMLNode('div')(state, newNode); - } - }, [DescriptionList.name]: renderHTMLNode('dl', true), [DescriptionItem.name]: (state, node, parent, index) => { if (index === 1) state.ensureNewLine(); @@ -180,6 +170,12 @@ const defaultSerializerConfig = { [HardBreak.name]: preserveUnchanged(renderHardBreak), [Heading.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.heading), [HorizontalRule.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.horizontal_rule), + ...HTMLNodes.reduce((serializers, htmlNode) => { + return { + ...serializers, + [htmlNode.name]: (state, node) => renderHTMLNode(htmlNode.options.tagName)(state, node), + }; + }, {}), [Image.name]: preserveUnchanged(renderImage), [ListItem.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.list_item), [OrderedList.name]: preserveUnchanged(renderOrderedList), |