diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 03:07:43 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 03:07:43 +0300 |
commit | 8a55899cab04afa065fc681b42da746c93de7bfe (patch) | |
tree | 2b99a3340edf639216b46904a34867e7226d9c6a /app/assets/javascripts/content_editor | |
parent | 93003eb1155fdc2ce078fa03c74d7f15e83a80de (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/content_editor')
4 files changed, 14 insertions, 101 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 74f620b57b6..204ac07d401 100644 --- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js +++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js @@ -1,33 +1,11 @@ import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'; -import { textblockTypeInputRule } from '@tiptap/core'; -import { isFunction } from 'lodash'; +import { lowlight } from 'lowlight/lib/all'; const extractLanguage = (element) => element.getAttribute('lang'); -const backtickInputRegex = /^```([a-z]+)?[\s\n]$/; -const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/; - -const loadLanguageFromInputRule = (languageLoader) => (match) => { - const language = match[1]; - - if (isFunction(languageLoader?.loadLanguages)) { - languageLoader.loadLanguages([language]); - } - - return { - language, - }; -}; export default CodeBlockLowlight.extend({ isolating: true, - addOptions() { - return { - ...this.parent?.(), - languageLoader: {}, - }; - }, - addAttributes() { return { language: { @@ -40,22 +18,6 @@ export default CodeBlockLowlight.extend({ }, }; }, - addInputRules() { - const { languageLoader } = this.options; - - return [ - textblockTypeInputRule({ - find: backtickInputRegex, - type: this.type, - getAttributes: loadLanguageFromInputRule(languageLoader), - }), - textblockTypeInputRule({ - find: tildeInputRegex, - type: this.type, - getAttributes: loadLanguageFromInputRule(languageLoader), - }), - ]; - }, renderHTML({ HTMLAttributes }) { return [ 'pre', @@ -66,4 +28,6 @@ export default CodeBlockLowlight.extend({ ['code', {}, 0], ]; }, +}).configure({ + lowlight, }); diff --git a/app/assets/javascripts/content_editor/services/code_block_language_loader.js b/app/assets/javascripts/content_editor/services/code_block_language_loader.js deleted file mode 100644 index 3c12cf614a5..00000000000 --- a/app/assets/javascripts/content_editor/services/code_block_language_loader.js +++ /dev/null @@ -1,35 +0,0 @@ -export default class CodeBlockLanguageLoader { - constructor(lowlight) { - this.lowlight = lowlight; - } - - isLanguageLoaded(language) { - return this.lowlight.registered(language); - } - - loadLanguagesFromDOM(domTree) { - const languages = []; - - domTree.querySelectorAll('pre').forEach((preElement) => { - languages.push(preElement.getAttribute('lang')); - }); - - return this.loadLanguages(languages); - } - - loadLanguages(languageList = []) { - const loaders = languageList - .filter((languageName) => !this.isLanguageLoaded(languageName)) - .map((languageName) => { - return import( - /* webpackChunkName: 'highlight.language.js' */ `highlight.js/lib/languages/${languageName}` - ) - .then(({ default: language }) => { - this.lowlight.registerLanguage(languageName, language); - }) - .catch(() => false); - }); - - return Promise.all(loaders); - } -} diff --git a/app/assets/javascripts/content_editor/services/content_editor.js b/app/assets/javascripts/content_editor/services/content_editor.js index 05c831109a5..c5638da2daf 100644 --- a/app/assets/javascripts/content_editor/services/content_editor.js +++ b/app/assets/javascripts/content_editor/services/content_editor.js @@ -3,12 +3,11 @@ import { LOADING_CONTENT_EVENT, LOADING_SUCCESS_EVENT, LOADING_ERROR_EVENT } fro /* eslint-disable no-underscore-dangle */ export class ContentEditor { - constructor({ tiptapEditor, serializer, deserializer, eventHub, languageLoader }) { + constructor({ tiptapEditor, serializer, deserializer, eventHub }) { this._tiptapEditor = tiptapEditor; this._serializer = serializer; this._deserializer = deserializer; this._eventHub = eventHub; - this._languageLoader = languageLoader; } get tiptapEditor() { @@ -35,35 +34,23 @@ export class ContentEditor { } async setSerializedContent(serializedContent) { - const { - _tiptapEditor: editor, - _deserializer: deserializer, - _eventHub: eventHub, - _languageLoader: languageLoader, - } = this; + const { _tiptapEditor: editor, _deserializer: deserializer, _eventHub: eventHub } = this; const { doc, tr } = editor.state; const selection = TextSelection.create(doc, 0, doc.content.size); try { eventHub.$emit(LOADING_CONTENT_EVENT); - const result = await deserializer.deserialize({ + const { document } = await deserializer.deserialize({ schema: editor.schema, content: serializedContent, }); - if (Object.keys(result).length === 0) { - return; + if (document) { + tr.setSelection(selection) + .replaceSelectionWith(document, false) + .setMeta('preventUpdate', true); + editor.view.dispatch(tr); } - - const { document, dom } = result; - - await languageLoader.loadLanguagesFromDOM(dom); - - tr.setSelection(selection) - .replaceSelectionWith(document, false) - .setMeta('preventUpdate', true); - editor.view.dispatch(tr); - eventHub.$emit(LOADING_SUCCESS_EVENT); } catch (e) { eventHub.$emit(LOADING_ERROR_EVENT, e); 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 5b637eee176..d9d39a387d0 100644 --- a/app/assets/javascripts/content_editor/services/create_content_editor.js +++ b/app/assets/javascripts/content_editor/services/create_content_editor.js @@ -1,6 +1,5 @@ import { Editor } from '@tiptap/vue-2'; import { isFunction } from 'lodash'; -import { lowlight } from 'lowlight/lib/core'; import eventHubFactory from '~/helpers/event_hub_factory'; import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants'; import Attachment from '../extensions/attachment'; @@ -59,7 +58,6 @@ import { ContentEditor } from './content_editor'; import createMarkdownSerializer from './markdown_serializer'; import createMarkdownDeserializer from './markdown_deserializer'; import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts'; -import CodeBlockLanguageLoader from './code_block_language_loader'; const createTiptapEditor = ({ extensions = [], ...options } = {}) => new Editor({ @@ -85,7 +83,6 @@ export const createContentEditor = ({ const eventHub = eventHubFactory(); - const languageLoader = new CodeBlockLanguageLoader(lowlight); const builtInContentEditorExtensions = [ Attachment.configure({ uploadsPath, renderMarkdown, eventHub }), Audio, @@ -94,7 +91,7 @@ export const createContentEditor = ({ BulletList, Code, ColorChip, - CodeBlockHighlight.configure({ lowlight, languageLoader }), + CodeBlockHighlight, DescriptionItem, DescriptionList, Details, @@ -108,7 +105,7 @@ export const createContentEditor = ({ FootnoteDefinition, FootnoteReference, FootnotesSection, - Frontmatter.configure({ lowlight }), + Frontmatter, Gapcursor, HardBreak, Heading, @@ -147,5 +144,5 @@ export const createContentEditor = ({ const serializer = createMarkdownSerializer({ serializerConfig }); const deserializer = createMarkdownDeserializer({ render: renderMarkdown }); - return new ContentEditor({ tiptapEditor, serializer, eventHub, deserializer, languageLoader }); + return new ContentEditor({ tiptapEditor, serializer, eventHub, deserializer }); }; |