diff --git a/webapp/components/Editor/ContextMenu.vue b/webapp/components/Editor/ContextMenu.vue
index 4297cf971..d0cf4c087 100644
--- a/webapp/components/Editor/ContextMenu.vue
+++ b/webapp/components/Editor/ContextMenu.vue
@@ -7,13 +7,13 @@ export default {
node: Object,
},
methods: {
- displayContextMenu(target, content) {
+ displayContextMenu(target, content, trigger) {
if (this.menu) {
return
}
this.menu = tippy(target, {
content: content,
- trigger: 'mouseenter',
+ trigger: trigger || 'mouseenter',
interactive: true,
theme: 'dark',
placement: 'top-start',
diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 9e1787862..63f948e7e 100644
--- a/webapp/components/Editor/Editor.vue
+++ b/webapp/components/Editor/Editor.vue
@@ -1,5 +1,8 @@
+
+
+
-
-
-
-
-
-
+
@@ -57,25 +23,26 @@ import defaultExtensions from './defaultExtensions.js'
import linkify from 'linkify-it'
import stringHash from 'string-hash'
import Fuse from 'fuse.js'
-import { Editor, EditorContent, EditorMenuBubble } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
import EventHandler from './plugins/eventHandler.js'
import { History } from 'tiptap-extensions'
import Hashtag from './nodes/Hashtag.js'
import Mention from './nodes/Mention.js'
import { mapGetters } from 'vuex'
import MenuBar from './MenuBar'
-import SuggestionsMenu from './SuggestionsMenu'
import ContextMenu from './ContextMenu'
+import SuggestionsMenu from './SuggestionsMenu'
+import LinkInput from './LinkInput'
let throttleInputEvent
export default {
components: {
+ ContextMenu,
EditorContent,
- EditorMenuBubble,
+ LinkInput,
MenuBar,
SuggestionsMenu,
- ContextMenu,
},
props: {
users: { type: Array, default: () => null }, // If 'null', than the Mention extention is not assigned.
@@ -373,26 +340,24 @@ export default {
this.$emit('input', content)
}
},
- showLinkMenu(attrs) {
+ showLinkMenu(attrs, element) {
this.linkUrl = attrs.href
this.linkMenuIsActive = true
+ this.$refs.contextMenu.displayContextMenu(element, this.$refs.linkMenu.$el, 'click')
this.$nextTick(() => {
try {
- const $el = this.$refs.linkInput.$el.getElementsByTagName('input')[0]
- $el.focus()
- $el.select()
+ const input = this.$refs.linkMenu.$el.querySelector('input')
+ input.focus()
+ input.select()
} catch (err) {}
})
},
hideLinkMenu() {
+ this.$refs.contextMenu.hideContextMenu()
this.linkUrl = null
this.linkMenuIsActive = false
this.editor.focus()
},
- hideMenu(isActive) {
- isActive = false
- this.hideLinkMenu()
- },
setLinkUrl(command, url) {
const links = linkify().match(url)
if (links) {
@@ -469,12 +434,6 @@ export default {
}
}
-.ProseMirror {
- padding: $space-base;
- margin: -$space-base;
- min-height: $space-large;
-}
-
.ProseMirror:focus {
outline: none;
}
diff --git a/webapp/components/Editor/LinkInput.vue b/webapp/components/Editor/LinkInput.vue
new file mode 100644
index 000000000..d870065ef
--- /dev/null
+++ b/webapp/components/Editor/LinkInput.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
diff --git a/webapp/components/Editor/MenuBar.vue b/webapp/components/Editor/MenuBar.vue
index d4ff1a673..38f278978 100644
--- a/webapp/components/Editor/MenuBar.vue
+++ b/webapp/components/Editor/MenuBar.vue
@@ -6,8 +6,9 @@