diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-22 12:09:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-10-22 12:09:20 +0300 |
commit | e9a834ee298801dec92de77783fffa0cea9deb34 (patch) | |
tree | d425f2e96ce226ff80b1f6ef5f4efc2c57f73520 /app/assets/javascripts/content_editor | |
parent | 054cda9ea6511f78169201c2bc12ee25dcb74ab0 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/content_editor')
14 files changed, 115 insertions, 73 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/blockquote.js b/app/assets/javascripts/content_editor/extensions/blockquote.js index 4512ead44bc..5632bc28592 100644 --- a/app/assets/javascripts/content_editor/extensions/blockquote.js +++ b/app/assets/javascripts/content_editor/extensions/blockquote.js @@ -1,10 +1,8 @@ import { Blockquote } from '@tiptap/extension-blockquote'; -import { wrappingInputRule } from 'prosemirror-inputrules'; +import { wrappingInputRule } from '@tiptap/core'; import { getParents } from '~/lib/utils/dom_utils'; import { getMarkdownSource } from '../services/markdown_sourcemap'; -export const multilineInputRegex = /^\s*>>>\s$/gm; - export default Blockquote.extend({ addAttributes() { return { @@ -25,9 +23,15 @@ export default Blockquote.extend({ }, addInputRules() { + const multilineInputRegex = /^\s*>>>\s$/gm; + return [ ...this.parent?.(), - wrappingInputRule(multilineInputRegex, this.type, () => ({ multiline: true })), + wrappingInputRule({ + find: multilineInputRegex, + type: this.type, + getAttributes: () => ({ multiline: true }), + }), ]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/description_list.js b/app/assets/javascripts/content_editor/extensions/description_list.js index a516dfad2b8..8f5b145cfa3 100644 --- a/app/assets/javascripts/content_editor/extensions/description_list.js +++ b/app/assets/javascripts/content_editor/extensions/description_list.js @@ -1,7 +1,4 @@ -import { Node, mergeAttributes } from '@tiptap/core'; -import { wrappingInputRule } from 'prosemirror-inputrules'; - -export const inputRegex = /^\s*(<dl>)$/; +import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'; export default Node.create({ name: 'descriptionList', @@ -18,6 +15,8 @@ export default Node.create({ }, addInputRules() { - return [wrappingInputRule(inputRegex, this.type)]; + const inputRegex = /^\s*(<dl>)$/; + + return [wrappingInputRule({ find: inputRegex, type: this.type })]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/details.js b/app/assets/javascripts/content_editor/extensions/details.js index e3d54ed01fd..46c906d45b1 100644 --- a/app/assets/javascripts/content_editor/extensions/details.js +++ b/app/assets/javascripts/content_editor/extensions/details.js @@ -1,10 +1,7 @@ -import { Node } from '@tiptap/core'; +import { Node, wrappingInputRule } from '@tiptap/core'; import { VueNodeViewRenderer } from '@tiptap/vue-2'; -import { wrappingInputRule } from 'prosemirror-inputrules'; import DetailsWrapper from '../components/wrappers/details.vue'; -export const inputRegex = /^\s*(<details>)$/; - export default Node.create({ name: 'details', content: 'detailsContent+', @@ -24,7 +21,9 @@ export default Node.create({ }, addInputRules() { - return [wrappingInputRule(inputRegex, this.type)]; + const inputRegex = /^\s*(<details>)$/; + + return [wrappingInputRule({ find: inputRegex, type: this.type })]; }, addCommands() { diff --git a/app/assets/javascripts/content_editor/extensions/emoji.js b/app/assets/javascripts/content_editor/extensions/emoji.js index de608c3aaa2..7f8b5da5f46 100644 --- a/app/assets/javascripts/content_editor/extensions/emoji.js +++ b/app/assets/javascripts/content_editor/extensions/emoji.js @@ -1,9 +1,6 @@ -import { Node } from '@tiptap/core'; -import { InputRule } from 'prosemirror-inputrules'; +import { Node, InputRule } from '@tiptap/core'; import { initEmojiMap, getAllEmoji } from '~/emoji'; -export const emojiInputRegex = /(?:^|\s)((?::)((?:\w+))(?::))$/; - export default Node.create({ name: 'emoji', @@ -54,23 +51,28 @@ export default Node.create({ }, addInputRules() { + const emojiInputRegex = /(?:^|\s)(:(\w+):)$/; + return [ - new InputRule(emojiInputRegex, (state, match, start, end) => { - const [, , name] = match; - const emojis = getAllEmoji(); - const emoji = emojis[name]; - const { tr } = state; + new InputRule({ + find: emojiInputRegex, + handler: ({ state, range: { from, to }, match }) => { + const [, , name] = match; + const emojis = getAllEmoji(); + const emoji = emojis[name]; + const { tr } = state; - if (emoji) { - tr.replaceWith(start, end, [ - state.schema.text(' '), - this.type.create({ name, moji: emoji.e, unicodeVersion: emoji.u, title: emoji.d }), - ]); + if (emoji) { + tr.replaceWith(from, to, [ + state.schema.text(' '), + this.type.create({ name, moji: emoji.e, unicodeVersion: emoji.u, title: emoji.d }), + ]); - return tr; - } + return tr; + } - return null; + return null; + }, }), ]; }, diff --git a/app/assets/javascripts/content_editor/extensions/horizontal_rule.js b/app/assets/javascripts/content_editor/extensions/horizontal_rule.js index c8ec45d835c..c4f31e5f981 100644 --- a/app/assets/javascripts/content_editor/extensions/horizontal_rule.js +++ b/app/assets/javascripts/content_editor/extensions/horizontal_rule.js @@ -1,10 +1,10 @@ import { nodeInputRule } from '@tiptap/core'; import { HorizontalRule } from '@tiptap/extension-horizontal-rule'; -export const hrInputRuleRegExp = /^---$/; - export default HorizontalRule.extend({ addInputRules() { - return [nodeInputRule(hrInputRuleRegExp, this.type)]; + const hrInputRuleRegExp = /^---$/; + + return [nodeInputRule({ find: hrInputRuleRegExp, type: this.type })]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/html_marks.js b/app/assets/javascripts/content_editor/extensions/html_marks.js index 54adb9efa0c..3abf0e3eee2 100644 --- a/app/assets/javascripts/content_editor/extensions/html_marks.js +++ b/app/assets/javascripts/content_editor/extensions/html_marks.js @@ -60,7 +60,13 @@ export default marks.map((name) => }, addInputRules() { - return [markInputRule(markInputRegex(name), this.type, extractMarkAttributesFromMatch)]; + return [ + markInputRule({ + find: markInputRegex(name), + type: this.type, + getAttributes: extractMarkAttributesFromMatch, + }), + ]; }, }), ); diff --git a/app/assets/javascripts/content_editor/extensions/inline_diff.js b/app/assets/javascripts/content_editor/extensions/inline_diff.js index 3bd328958df..22bb1ac072e 100644 --- a/app/assets/javascripts/content_editor/extensions/inline_diff.js +++ b/app/assets/javascripts/content_editor/extensions/inline_diff.js @@ -1,8 +1,5 @@ import { Mark, markInputRule, mergeAttributes } from '@tiptap/core'; -export const inputRegexAddition = /(\{\+(.+?)\+\})$/gm; -export const inputRegexDeletion = /(\{-(.+?)-\})$/gm; - export default Mark.create({ name: 'inlineDiff', @@ -38,9 +35,20 @@ export default Mark.create({ }, addInputRules() { + const inputRegexAddition = /(\{\+(.+?)\+\})$/gm; + const inputRegexDeletion = /(\{-(.+?)-\})$/gm; + return [ - markInputRule(inputRegexAddition, this.type, () => ({ type: 'addition' })), - markInputRule(inputRegexDeletion, this.type, () => ({ type: 'deletion' })), + markInputRule({ + find: inputRegexAddition, + type: this.type, + getAttributes: () => ({ type: 'addition' }), + }), + markInputRule({ + find: inputRegexDeletion, + type: this.type, + getAttributes: () => ({ type: 'deletion' }), + }), ]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/link.js b/app/assets/javascripts/content_editor/extensions/link.js index fc0f38e6935..27bc05dce6f 100644 --- a/app/assets/javascripts/content_editor/extensions/link.js +++ b/app/assets/javascripts/content_editor/extensions/link.js @@ -1,9 +1,6 @@ import { markInputRule } from '@tiptap/core'; import { Link } from '@tiptap/extension-link'; -export const markdownLinkSyntaxInputRuleRegExp = /(?:^|\s)\[([\w|\s|-]+)\]\((?<href>.+?)\)$/gm; -export const urlSyntaxRegExp = /(?:^|\s)(?<href>(?:https?:\/\/|www\.)[\S]+)(?:\s|\n)$/gim; - const extractHrefFromMatch = (match) => { return { href: match.groups.href }; }; @@ -26,9 +23,20 @@ export default Link.extend({ openOnClick: false, }, addInputRules() { + const markdownLinkSyntaxInputRuleRegExp = /(?:^|\s)\[([\w|\s|-]+)\]\((?<href>.+?)\)$/gm; + const urlSyntaxRegExp = /(?:^|\s)(?<href>(?:https?:\/\/|www\.)[\S]+)(?:\s|\n)$/gim; + return [ - markInputRule(markdownLinkSyntaxInputRuleRegExp, this.type, extractHrefFromMarkdownLink), - markInputRule(urlSyntaxRegExp, this.type, extractHrefFromMatch), + markInputRule({ + find: markdownLinkSyntaxInputRuleRegExp, + type: this.type, + getAttributes: extractHrefFromMarkdownLink, + }), + markInputRule({ + find: urlSyntaxRegExp, + type: this.type, + getAttributes: extractHrefFromMatch, + }), ]; }, addAttributes() { diff --git a/app/assets/javascripts/content_editor/extensions/math_inline.js b/app/assets/javascripts/content_editor/extensions/math_inline.js index 60f5288dcf6..4844f6feb29 100644 --- a/app/assets/javascripts/content_editor/extensions/math_inline.js +++ b/app/assets/javascripts/content_editor/extensions/math_inline.js @@ -2,8 +2,6 @@ import { Mark, markInputRule } from '@tiptap/core'; import { __ } from '~/locale'; import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants'; -export const inputRegex = /(?:^|\s)\$`([^`]+)`\$$/gm; - export default Mark.create({ name: 'mathInline', @@ -30,6 +28,8 @@ export default Mark.create({ }, addInputRules() { - return [markInputRule(inputRegex, this.type)]; + const inputRegex = /(?:^|\s)\$`([^`]+)`\$$/gm; + + return [markInputRule({ find: inputRegex, type: this.type })]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/subscript.js b/app/assets/javascripts/content_editor/extensions/subscript.js index d0766f42308..a8c087e8bf0 100644 --- a/app/assets/javascripts/content_editor/extensions/subscript.js +++ b/app/assets/javascripts/content_editor/extensions/subscript.js @@ -4,6 +4,12 @@ import { markInputRegex, extractMarkAttributesFromMatch } from '../services/mark export default Subscript.extend({ addInputRules() { - return [markInputRule(markInputRegex('sub'), this.type, extractMarkAttributesFromMatch)]; + return [ + markInputRule({ + find: markInputRegex('sub'), + type: this.type, + getAttributes: extractMarkAttributesFromMatch, + }), + ]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/superscript.js b/app/assets/javascripts/content_editor/extensions/superscript.js index 6cd814977ea..b86906f01f2 100644 --- a/app/assets/javascripts/content_editor/extensions/superscript.js +++ b/app/assets/javascripts/content_editor/extensions/superscript.js @@ -4,6 +4,12 @@ import { markInputRegex, extractMarkAttributesFromMatch } from '../services/mark export default Superscript.extend({ addInputRules() { - return [markInputRule(markInputRegex('sup'), this.type, extractMarkAttributesFromMatch)]; + return [ + markInputRule({ + find: markInputRegex('sup'), + type: this.type, + getAttributes: extractMarkAttributesFromMatch, + }), + ]; }, }); diff --git a/app/assets/javascripts/content_editor/extensions/table_of_contents.js b/app/assets/javascripts/content_editor/extensions/table_of_contents.js index 9e31158837e..a8882f9ede4 100644 --- a/app/assets/javascripts/content_editor/extensions/table_of_contents.js +++ b/app/assets/javascripts/content_editor/extensions/table_of_contents.js @@ -1,10 +1,7 @@ -import { Node } from '@tiptap/core'; -import { InputRule } from 'prosemirror-inputrules'; +import { Node, InputRule } from '@tiptap/core'; import { s__ } from '~/locale'; import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants'; -export const inputRuleRegExps = [/^\[\[_TOC_\]\]$/, /^\[TOC\]$/]; - export default Node.create({ name: 'tableOfContents', @@ -34,17 +31,21 @@ export default Node.create({ addInputRules() { const { type } = this; + const inputRuleRegExps = [/^\[\[_TOC_\]\]$/, /^\[TOC\]$/]; return inputRuleRegExps.map( (regex) => - new InputRule(regex, (state, match, start, end) => { - const { tr } = state; + new InputRule({ + find: regex, + handler: ({ state, range: { from, to }, match }) => { + const { tr } = state; - if (match) { - tr.replaceWith(start - 1, end, type.create()); - } + if (match) { + tr.replaceWith(from - 1, to, type.create()); + } - return tr; + return tr; + }, }), ); }, diff --git a/app/assets/javascripts/content_editor/extensions/word_break.js b/app/assets/javascripts/content_editor/extensions/word_break.js index 93b42466850..fa7e02f8cc8 100644 --- a/app/assets/javascripts/content_editor/extensions/word_break.js +++ b/app/assets/javascripts/content_editor/extensions/word_break.js @@ -1,7 +1,5 @@ import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core'; -export const inputRegex = /^<wbr>$/; - export default Node.create({ name: 'wordBreak', inline: true, @@ -24,6 +22,8 @@ export default Node.create({ }, addInputRules() { - return [nodeInputRule(inputRegex, this.type)]; + const inputRegex = /^<wbr>$/; + + return [nodeInputRule({ find: inputRegex, type: this.type })]; }, }); diff --git a/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js b/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js index d26f32a7e7a..9b1cb76f845 100644 --- a/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js +++ b/app/assets/javascripts/content_editor/services/track_input_rules_and_shortcuts.js @@ -1,5 +1,5 @@ import { mapValues } from 'lodash'; -import { InputRule } from 'prosemirror-inputrules'; +import { InputRule } from '@tiptap/core'; import { ENTER_KEY, BACKSPACE_KEY } from '~/lib/utils/keys'; import Tracking from '~/tracking'; import { @@ -17,17 +17,20 @@ const trackKeyboardShortcut = (contentType, commandFn, shortcut) => () => { }; const trackInputRule = (contentType, inputRule) => { - return new InputRule(inputRule.match, (...args) => { - const result = inputRule.handler(...args); + return new InputRule({ + find: inputRule.find, + handler: (...args) => { + const result = inputRule.handler(...args); - if (result) { - Tracking.event(undefined, INPUT_RULE_TRACKING_ACTION, { - label: CONTENT_EDITOR_TRACKING_LABEL, - property: contentType, - }); - } + if (result !== null) { + Tracking.event(undefined, INPUT_RULE_TRACKING_ACTION, { + label: CONTENT_EDITOR_TRACKING_LABEL, + property: contentType, + }); + } - return result; + return result; + }, }); }; |