diff options
Diffstat (limited to 'app/assets/javascripts/content_editor/components')
7 files changed, 59 insertions, 43 deletions
diff --git a/app/assets/javascripts/content_editor/components/content_editor.vue b/app/assets/javascripts/content_editor/components/content_editor.vue index 02ab34447ca..a8405fe37c7 100644 --- a/app/assets/javascripts/content_editor/components/content_editor.vue +++ b/app/assets/javascripts/content_editor/components/content_editor.vue @@ -3,7 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { EditorContent as TiptapEditorContent } from '@tiptap/vue-2'; import { LOADING_CONTENT_EVENT, LOADING_SUCCESS_EVENT, LOADING_ERROR_EVENT } from '../constants'; import { createContentEditor } from '../services/create_content_editor'; -import ContentEditorError from './content_editor_error.vue'; +import ContentEditorAlert from './content_editor_alert.vue'; import ContentEditorProvider from './content_editor_provider.vue'; import EditorStateObserver from './editor_state_observer.vue'; import FormattingBubbleMenu from './formatting_bubble_menu.vue'; @@ -12,7 +12,7 @@ import TopToolbar from './top_toolbar.vue'; export default { components: { GlLoadingIcon, - ContentEditorError, + ContentEditorAlert, ContentEditorProvider, TiptapEditorContent, TopToolbar, @@ -92,7 +92,7 @@ export default { <content-editor-provider :content-editor="contentEditor"> <div> <editor-state-observer @docUpdate="notifyChange" @focus="focus" @blur="blur" /> - <content-editor-error /> + <content-editor-alert /> <div data-testid="content-editor" data-qa-selector="content_editor_container" diff --git a/app/assets/javascripts/content_editor/components/content_editor_alert.vue b/app/assets/javascripts/content_editor/components/content_editor_alert.vue new file mode 100644 index 00000000000..c6737da1d77 --- /dev/null +++ b/app/assets/javascripts/content_editor/components/content_editor_alert.vue @@ -0,0 +1,33 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import EditorStateObserver from './editor_state_observer.vue'; + +export default { + components: { + GlAlert, + EditorStateObserver, + }, + data() { + return { + message: null, + variant: 'danger', + }; + }, + methods: { + displayAlert({ message, variant }) { + this.message = message; + this.variant = variant; + }, + dismissAlert() { + this.message = null; + }, + }, +}; +</script> +<template> + <editor-state-observer @alert="displayAlert"> + <gl-alert v-if="message" class="gl-mb-6" :variant="variant" @dismiss="dismissAlert"> + {{ message }} + </gl-alert> + </editor-state-observer> +</template> diff --git a/app/assets/javascripts/content_editor/components/content_editor_error.vue b/app/assets/javascripts/content_editor/components/content_editor_error.vue deleted file mode 100644 index 031ea92a7e9..00000000000 --- a/app/assets/javascripts/content_editor/components/content_editor_error.vue +++ /dev/null @@ -1,31 +0,0 @@ -<script> -import { GlAlert } from '@gitlab/ui'; -import EditorStateObserver from './editor_state_observer.vue'; - -export default { - components: { - GlAlert, - EditorStateObserver, - }, - data() { - return { - error: null, - }; - }, - methods: { - displayError({ error }) { - this.error = error; - }, - dismissError() { - this.error = null; - }, - }, -}; -</script> -<template> - <editor-state-observer @error="displayError"> - <gl-alert v-if="error" class="gl-mb-6" variant="danger" @dismiss="dismissError"> - {{ error }} - </gl-alert> - </editor-state-observer> -</template> diff --git a/app/assets/javascripts/content_editor/components/editor_state_observer.vue b/app/assets/javascripts/content_editor/components/editor_state_observer.vue index 2eeb0719096..0604047a953 100644 --- a/app/assets/javascripts/content_editor/components/editor_state_observer.vue +++ b/app/assets/javascripts/content_editor/components/editor_state_observer.vue @@ -7,7 +7,7 @@ export const tiptapToComponentMap = { transaction: 'transaction', focus: 'focus', blur: 'blur', - error: 'error', + alert: 'alert', }; const getComponentEventName = (tiptapEventName) => tiptapToComponentMap[tiptapEventName]; diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue index c44e8145982..41c083111c5 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_base.vue @@ -26,8 +26,8 @@ export default { type: Object, required: true, }, - getPos: { - type: Function, + node: { + type: Object, required: true, }, }, @@ -61,7 +61,17 @@ export default { const { state } = this.editor; const { $cursor } = state.selection; - this.displayActionsDropdown = $cursor?.pos - $cursor?.parentOffset - 1 === this.getPos(); + if (!$cursor) return; + + this.displayActionsDropdown = false; + + for (let level = 0; level < $cursor.depth; level += 1) { + if ($cursor.node(level) === this.node) { + this.displayActionsDropdown = true; + break; + } + } + if (this.displayActionsDropdown) { this.selectedRect = getSelectedRect(state); } @@ -99,7 +109,11 @@ export default { :as="cellType" @click="hideDropdown" > - <span v-if="displayActionsDropdown" class="gl-absolute gl-right-0 gl-top-0"> + <span + v-if="displayActionsDropdown" + contenteditable="false" + class="gl-absolute gl-right-0 gl-top-0" + > <gl-dropdown ref="dropdown" dropup diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue index 6b4343dd5b8..47cd837d060 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_body.vue @@ -11,8 +11,8 @@ export default { type: Object, required: true, }, - getPos: { - type: Function, + node: { + type: Object, required: true, }, }, diff --git a/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue b/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue index 5f9889374f6..150f78bc84f 100644 --- a/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue +++ b/app/assets/javascripts/content_editor/components/wrappers/table_cell_header.vue @@ -11,8 +11,8 @@ export default { type: Object, required: true, }, - getPos: { - type: Function, + node: { + type: Object, required: true, }, }, |