[stable32] fix(FloatingButtons): group smartpicker button and drag handle together

src/components/Editor/ContentContainer.vue

@@ -14,13 +14,7 @@
 			<EditorOutline />
 		</div>
 		<slot />
-		<DragHandle :editor="editor" class="drag-handle--button">
-			<NcButton type="tertiary-no-background" size="normal">
-				<template #icon>
-					<DragVerticalIcon :size="20" />
-				</template>
-			</NcButton>
-		</DragHandle>
+		<FloatingButtons v-if="!isMobile && !isFullWidth" />
 		<EditorContent
 			role="document"
 			class="editor__content text-editor__content"
@@ -30,27 +24,27 @@
 </template>
 
 <script>
-import NcButton from '@nextcloud/vue/components/NcButton'
-import { DragHandle } from '@tiptap/extension-drag-handle-vue-2'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { EditorContent } from '@tiptap/vue-2'
-import DragVerticalIcon from 'vue-material-design-icons/DragVertical.vue'
 import { useEditor } from '../../composables/useEditor.ts'
+import { useEditorWidth } from '../../composables/useEditorWidth.ts'
 import EditorOutline from './EditorOutline.vue'
+import FloatingButtons from './FloatingButtons.vue'
 import { useOutlineStateMixin } from './Wrapper.provider.js'
 
 export default {
 	name: 'ContentContainer',
 	components: {
 		EditorContent,
 		EditorOutline,
-		NcButton,
-		DragHandle,
-		DragVerticalIcon,
+		FloatingButtons,
 	},
 	mixins: [useOutlineStateMixin],
 	setup() {
+		const isMobile = useIsMobile()
 		const { editor } = useEditor()
-		return { editor }
+		const { isFullWidth } = useEditorWidth()
+		return { editor, isMobile, isFullWidth }
 	},
 	computed: {
 		showOutline() {
@@ -72,12 +66,6 @@ export default {
 	}
 }
 
-.ie {
-	.editor__content:deep(.ProseMirror) {
-		padding-top: 50px;
-	}
-}
-
 .text-editor__content-wrapper {
 	--side-width: calc((100% - var(--text-editor-max-width)) / 2);
 	display: grid;
@@ -104,12 +92,4 @@ export default {
 		}
 	}
 }
-
-.drag-handle--button {
-	color: var(--color-maxcontrast);
-	position: absolute;
-	left: -60px;
-	transform: translate(0, -20%);
-	padding-right: 24px;
-}
 </style>

src/components/Editor/FloatingButtons.vue

@@ -0,0 +1,112 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<DragHandle
+		:editor="editor"
+		class="floating-buttons"
+		:class="{ heading: isHeadingNode }"
+		:on-node-change="onNodeChange">
+		<NcButton
+			type="tertiary-no-background"
+			size="small"
+			:title="t('text', 'Insert below')"
+			@click="onOpenSmartPicker">
+			<template #icon>
+				<PlusIcon :size="16" />
+			</template>
+		</NcButton>
+		<NcButton
+			type="tertiary-no-background"
+			size="small"
+			class="drag-button"
+			:title="t('text', 'Click for options, hold to drag')">
+			<template #icon>
+				<DragVerticalIcon :size="16" />
+			</template>
+		</NcButton>
+	</DragHandle>
+</template>
+
+<script>
+import { t } from '@nextcloud/l10n'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-2'
+import DragVerticalIcon from 'vue-material-design-icons/DragVertical.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import { useEditor } from '../../composables/useEditor.ts'
+
+export default {
+	name: 'FloatingButtons',
+
+	components: {
+		DragHandle,
+		DragVerticalIcon,
+		NcButton,
+		PlusIcon,
+	},
+
+	setup() {
+		const { editor } = useEditor()
+		return { editor }
+	},
+
+	data() {
+		return {
+			node: null,
+			pos: -1,
+		}
+	},
+
+	computed: {
+		isHeadingNode() {
+			return this.node?.type === this.editor.schema.nodes.heading
+		},
+	},
+
+	methods: {
+		onNodeChange({ node, pos }) {
+			this.node = node
+			this.pos = pos
+		},
+		onOpenSmartPicker() {
+			if (!this.node || this.pos === -1) {
+				return
+			}
+
+			// Node has no children or just text children and no text content
+			const { schema } = this.editor
+			const emptyNode =
+				this.node.textContent.trim() === ''
+				&& (this.node.children.length === 0
+					|| this.node.children.every((n) => n.type === schema.nodes.text))
+
+			// Insert at the end of the node
+			const pos = emptyNode ? this.pos + 1 : this.pos + this.node.nodeSize
+			this.editor.chain().insertContentAt(pos, '/').focus().run()
+		},
+		t,
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.floating-buttons {
+	display: flex;
+
+	&.heading {
+		margin-right: 16px;
+	}
+}
+
+.drag-button {
+	cursor: grab;
+
+	:deep(span),
+	:deep(svg) {
+		cursor: grab !important;
+	}
+}
+</style>

src/nodes/Paragraph.js

@@ -4,7 +4,6 @@
  */
 
 import TiptapParagraph from '@tiptap/extension-paragraph'
-import currentLineMenu from '../plugins/currentLineMenu.js'
 
 const Paragraph = TiptapParagraph.extend({
 	parseHTML() {
@@ -42,10 +41,6 @@ const Paragraph = TiptapParagraph.extend({
 			},
 		}
 	},
-
-	addProseMirrorPlugins() {
-		return [currentLineMenu({ editor: this.editor })]
-	},
 })
 
 export default Paragraph

src/nodes/Preview.vue

@@ -79,6 +79,7 @@ export default {
 
 :deep(div.widgets--list a.widget-default) {
 	color: var(--color-main-text);
+	margin: 0;
 	padding: 0;
 	text-decoration: none;
 	max-width: calc(100vw - 156px);