diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-30 21:08:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-30 21:08:57 +0300 |
commit | 76abc55eb4656385925e156210fb8c5750c75652 (patch) | |
tree | 45ae5f75f7f9bf01eb95716566397c1ccb14527a /app/assets/javascripts/content_editor | |
parent | 02c48d0a6bf00afd66a603253ec59db4e1412392 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/content_editor')
3 files changed, 99 insertions, 15 deletions
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue index 518ddd7a09c..4ed89140e5b 100644 --- a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue +++ b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue @@ -1,5 +1,8 @@ <script> import { + GlDropdownForm, + GlFormInput, + GlDropdownDivider, GlButton, GlButtonGroup, GlDropdown, @@ -20,10 +23,13 @@ const CODE_BLOCK_NODE_TYPES = [CodeBlockHighlight.name, Diagram.name, Frontmatte export default { components: { BubbleMenu, + GlDropdownForm, + GlFormInput, GlButton, GlButtonGroup, GlDropdown, GlDropdownItem, + GlDropdownDivider, GlSearchBoxByType, EditorStateObserver, }, @@ -37,6 +43,9 @@ export default { selectedLanguage: {}, filterTerm: '', filteredLanguages: [], + + showCustomLanguageInput: false, + customLanguageType: '', }; }, watch: { @@ -57,7 +66,7 @@ export default { if (this.codeBlockType) { const { language } = this.tiptapEditor.getAttributes(this.codeBlockType); - this.selectedLanguage = codeBlockLanguageLoader.findLanguageBySyntax(language); + this.selectedLanguage = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(language); } }, @@ -69,7 +78,7 @@ export default { navigator.clipboard.writeText(node?.textContent || ''); }, - async applySelectedLanguage(language) { + async applyLanguage(language) { this.selectedLanguage = language; await codeBlockLanguageLoader.loadLanguage(language.syntax); @@ -77,6 +86,21 @@ export default { this.tiptapEditor.commands.setCodeBlock({ language: this.selectedLanguage.syntax }); }, + clearCustomLanguageForm() { + this.showCustomLanguageInput = false; + this.customLanguageType = ''; + }, + + applyCustomLanguage() { + this.showCustomLanguageInput = false; + + const language = codeBlockLanguageLoader.findOrCreateLanguageBySyntax( + this.customLanguageType, + ); + + this.applyLanguage(language); + }, + getReferenceClientRect() { const { view } = this.tiptapEditor; const { from } = this.tiptapEditor.state.selection; @@ -108,8 +132,29 @@ export default { contenteditable="false" boundary="viewport" :text="selectedLanguage.label" + @hide="clearCustomLanguageForm" > - <template #header> + <template v-if="showCustomLanguageInput" #header> + <div class="gl-relative"> + <gl-button + v-gl-tooltip + class="gl-absolute gl-mt-n3 gl-ml-2" + variant="default" + category="tertiary" + size="medium" + :aria-label="__('Go back')" + :title="__('Go back')" + icon="arrow-left" + @click.prevent.stop="showCustomLanguageInput = false" + /> + <p + class="gl-text-center gl-new-dropdown-header-top gl-mb-0! gl-border-none! gl-pb-1!" + > + {{ __('Create custom type') }} + </p> + </div> + </template> + <template v-else #header> <gl-search-box-by-type v-model="filterTerm" :clear-button-title="__('Clear')" @@ -117,20 +162,59 @@ export default { /> </template> - <template #highlighted-items> + <template v-if="!showCustomLanguageInput" #highlighted-items> <gl-dropdown-item :key="selectedLanguage.syntax" is-check-item :is-checked="true"> {{ selectedLanguage.label }} </gl-dropdown-item> </template> - <gl-dropdown-item - v-for="language in filteredLanguages" - v-show="selectedLanguage.syntax !== language.syntax" - :key="language.syntax" - @click="applySelectedLanguage(language)" - > - {{ language.label }} - </gl-dropdown-item> + <template v-if="!showCustomLanguageInput" #default> + <gl-dropdown-item + v-for="language in filteredLanguages" + v-show="selectedLanguage.syntax !== language.syntax" + :key="language.syntax" + @click="applyLanguage(language)" + > + {{ language.label }} + </gl-dropdown-item> + </template> + <template v-else #default> + <gl-dropdown-form @submit.prevent="applyCustomLanguage"> + <div class="gl-mx-4 gl-mt-2 gl-mb-3"> + <gl-form-input v-model="customLanguageType" :placeholder="__('Language type')" /> + </div> + <gl-dropdown-divider /> + <div class="gl-mx-4 gl-mt-3 gl-display-flex gl-justify-content-end"> + <gl-button + variant="default" + size="medium" + category="primary" + class="gl-mr-2 gl-w-auto!" + @click.prevent.stop="showCustomLanguageInput = false" + > + {{ __('Cancel') }} + </gl-button> + <gl-button + variant="confirm" + size="medium" + category="primary" + type="submit" + class="gl-w-auto!" + > + {{ __('Apply') }} + </gl-button> + </div> + </gl-dropdown-form> + </template> + + <template v-if="!showCustomLanguageInput" #footer> + <gl-dropdown-item + data-testid="create-custom-type" + @click.capture.native.stop="showCustomLanguageInput = true" + > + {{ __('Create custom type') }} + </gl-dropdown-item> + </template> </gl-dropdown> <gl-button v-gl-tooltip diff --git a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue index 1390b9b2daf..343616db3d6 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue @@ -20,7 +20,7 @@ export default { }, }, async mounted() { - const lang = codeBlockLanguageLoader.findLanguageBySyntax(this.node.attrs.language); + const lang = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(this.node.attrs.language); await codeBlockLanguageLoader.loadLanguage(lang.syntax); this.updateAttributes({ language: this.node.attrs.language }); 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 index 1afaf4bfef6..fa0549d4183 100644 --- a/app/assets/javascripts/content_editor/services/code_block_language_loader.js +++ b/app/assets/javascripts/content_editor/services/code_block_language_loader.js @@ -8,7 +8,7 @@ const codeBlockLanguageLoader = { allLanguages: CODE_BLOCK_LANGUAGES, - findLanguageBySyntax(value) { + findOrCreateLanguageBySyntax(value) { const lowercaseValue = value?.toLowerCase() || 'plaintext'; return ( this.allLanguages.find( @@ -38,7 +38,7 @@ const codeBlockLanguageLoader = { }, loadLanguageFromInputRule(match) { - const { syntax } = this.findLanguageBySyntax(match[1]); + const { syntax } = this.findOrCreateLanguageBySyntax(match[1]); this.loadLanguage(syntax); |