diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-11-19 08:27:35 +0000 |
commit | 7e9c479f7de77702622631cff2628a9c8dcbc627 (patch) | |
tree | c8f718a08e110ad7e1894510980d2155a6549197 /app/assets/javascripts/vue_shared/components/rich_content_editor | |
parent | e852b0ae16db4052c1c567d9efa4facc81146e88 (diff) | |
download | gitlab-ce-7e9c479f7de77702622631cff2628a9c8dcbc627.tar.gz |
Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/rich_content_editor')
4 files changed, 33 insertions, 23 deletions
diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue index e1652f54982..82060d2e4ad 100644 --- a/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue +++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/modals/add_image/add_image_modal.vue @@ -1,8 +1,7 @@ <script> import { GlModal, GlFormGroup, GlFormInput, GlTabs, GlTab } from '@gitlab/ui'; -import { isSafeURL } from '~/lib/utils/url_utility'; +import { isSafeURL, joinPaths } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { IMAGE_TABS } from '../../constants'; import UploadImageTab from './upload_image_tab.vue'; @@ -15,7 +14,6 @@ export default { GlTabs, GlTab, }, - mixins: [glFeatureFlagMixin()], props: { imageRoot: { type: String, @@ -34,10 +32,10 @@ export default { }, modalTitle: __('Image details'), okTitle: __('Insert image'), - urlTabTitle: __('By URL'), + urlTabTitle: __('Link to an image'), urlLabel: __('Image URL'), descriptionLabel: __('Description'), - uploadTabTitle: __('Upload file'), + uploadTabTitle: __('Upload an image'), computed: { altText() { return this.description; @@ -54,7 +52,7 @@ export default { this.$refs.modal.show(); }, onOk(event) { - if (this.glFeatures.sseImageUploads && this.tabIndex === IMAGE_TABS.UPLOAD_TAB) { + if (this.tabIndex === IMAGE_TABS.UPLOAD_TAB) { this.submitFile(event); return; } @@ -74,7 +72,7 @@ export default { return; } - const imageUrl = `${this.imageRoot}${file.name}`; + const imageUrl = joinPaths(this.imageRoot, file.name); this.$emit('addImage', { imageUrl, file, altText: altText || file.name }); }, @@ -108,7 +106,7 @@ export default { :ok-title="$options.okTitle" @ok="onOk" > - <gl-tabs v-if="glFeatures.sseImageUploads" v-model="tabIndex"> + <gl-tabs v-model="tabIndex"> <!-- Upload file Tab --> <gl-tab :title="$options.uploadTabTitle"> <upload-image-tab ref="uploadImageTab" @input="setFile" /> @@ -128,17 +126,6 @@ export default { </gl-tab> </gl-tabs> - <gl-form-group - v-else - class="gl-mt-5 gl-mb-3" - :label="$options.urlLabel" - label-for="url-input" - :state="!Boolean(urlError)" - :invalid-feedback="urlError" - > - <gl-form-input id="url-input" ref="urlInput" v-model="imageUrl" /> - </gl-form-group> - <!-- Description Input --> <gl-form-group :label="$options.descriptionLabel" label-for="description-input"> <gl-form-input id="description-input" ref="descriptionInput" v-model="description" /> diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue index c2518441506..9eacf74bba8 100644 --- a/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue +++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue @@ -53,7 +53,6 @@ export default { imageRoot: { type: String, required: true, - validator: prop => prop.endsWith('/'), }, }, data() { @@ -115,10 +114,9 @@ export default { if (file) { this.$emit('uploadImage', { file, imageUrl }); - // TODO - ensure that the actual repo URL for the image is used in Markdown mode } - addImage(this.editorInstance, image); + addImage(this.editorInstance, image, file); }, onOpenInsertVideoModal() { this.$refs.insertVideoModal.show(); diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js index 2bce691e793..9744e25a8e1 100644 --- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js +++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js @@ -99,6 +99,10 @@ const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) => ? `\n\n${node.innerText}\n\n` : baseRenderer.convert(node, subContent); }, + IMG(node) { + const { originalSrc } = node.dataset; + return `![${node.alt}](${originalSrc || node.src})`; + }, }; }; diff --git a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js index 8b3fbcabcfa..463e64b4936 100644 --- a/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js +++ b/app/assets/javascripts/vue_shared/components/rich_content_editor/services/editor_service.js @@ -34,6 +34,20 @@ const buildVideoIframe = src => { return wrapper; }; +const buildImg = (alt, originalSrc, file) => { + const img = document.createElement('img'); + const src = file ? URL.createObjectURL(file) : originalSrc; + const attributes = { alt, src }; + + if (file) { + img.dataset.originalSrc = originalSrc; + } + + Object.assign(img, attributes); + + return img; +}; + export const generateToolbarItem = config => { const { icon, classes, event, command, tooltip, isDivider } = config; @@ -59,7 +73,14 @@ export const addCustomEventListener = (editorApi, event, handler) => { export const removeCustomEventListener = (editorApi, event, handler) => editorApi.eventManager.removeEventHandler(event, handler); -export const addImage = ({ editor }, image) => editor.exec('AddImage', image); +export const addImage = ({ editor }, { altText, imageUrl }, file) => { + if (editor.isWysiwygMode()) { + const img = buildImg(altText, imageUrl, file); + editor.getSquire().insertElement(img); + } else { + editor.insertText(`![${altText}](${imageUrl})`); + } +}; export const insertVideo = ({ editor }, url) => { const videoIframe = buildVideoIframe(url); |