feat (tiptap): move blocks

packages/web-pkg/package.json

@@ -53,26 +53,29 @@
     "@opencloud-eu/design-system": "workspace:^",
     "@opencloud-eu/web-client": "workspace:^",
     "@sentry/vue": "^10.46.0",
-    "@tiptap/core": "^3.20.4",
-    "@tiptap/extension-document": "^3.20.4",
+    "@tiptap/core": "^3.28.0",
+    "@tiptap/extension-document": "^3.28.0",
+    "@tiptap/extension-drag-handle": "^3.28.0",
+    "@tiptap/extension-drag-handle-vue-3": "^3.28.0",
     "@tiptap/extension-file-handler": "^3.28.0",
-    "@tiptap/extension-hard-break": "^3.20.4",
-    "@tiptap/extension-image": "^3.20.4",
-    "@tiptap/extension-link": "^3.20.4",
-    "@tiptap/extension-paragraph": "^3.20.4",
-    "@tiptap/extension-placeholder": "^3.20.4",
-    "@tiptap/extension-text": "^3.20.4",
-    "@tiptap/extension-text-style": "^3.20.4",
-    "@tiptap/extension-table": "^3.20.4",
-    "@tiptap/extension-task-item": "^3.20.4",
-    "@tiptap/extension-task-list": "^3.20.4",
-    "@tiptap/extension-underline": "^3.20.4",
-    "@tiptap/extension-text-align": "^3.20.4",
-    "@tiptap/markdown": "^3.20.4",
-    "@tiptap/pm": "^3.20.4",
-    "@tiptap/starter-kit": "^3.20.4",
-    "@tiptap/suggestion": "^3.20.4",
-    "@tiptap/vue-3": "^3.20.4",
+    "@tiptap/extension-hard-break": "^3.28.0",
+    "@tiptap/extension-image": "^3.28.0",
+    "@tiptap/extension-link": "^3.28.0",
+    "@tiptap/extension-node-range": "^3.28.0",
+    "@tiptap/extension-paragraph": "^3.28.0",
+    "@tiptap/extension-placeholder": "^3.28.0",
+    "@tiptap/extension-table": "^3.28.0",
+    "@tiptap/extension-task-item": "^3.28.0",
+    "@tiptap/extension-task-list": "^3.28.0",
+    "@tiptap/extension-text": "^3.28.0",
+    "@tiptap/extension-text-align": "^3.28.0",
+    "@tiptap/extension-text-style": "^3.28.0",
+    "@tiptap/extension-underline": "^3.28.0",
+    "@tiptap/markdown": "^3.28.0",
+    "@tiptap/pm": "^3.28.0",
+    "@tiptap/starter-kit": "^3.28.0",
+    "@tiptap/suggestion": "^3.28.0",
+    "@tiptap/vue-3": "^3.28.0",
     "@uppy/core": "^5.2.0",
     "@uppy/tus": "^5.1.1",
     "@uppy/utils": "^7.2.0",
@@ -92,6 +95,7 @@
     "p-queue": "^9.1.0",
     "password-sheriff": "^2.0.0",
     "pinia": "^4.0.0",
+    "prosemirror-transform": "^1.12.0",
     "qs": "^6.15.0",
     "uuid": "^14.0.0",
     "vue-concurrency": "^5.0.3",

packages/web-pkg/src/editor/components/TextEditorContent.vue

@@ -6,6 +6,9 @@
       '--text-editor-zoom-factor': zoomFactor
     }"
   >
+    <DragHandle v-if="!isSourceMode" :editor="textEditor.editor.value">
+      <div class="custom-drag-handle" />
+    </DragHandle>
     <EditorContent v-show="!isSourceMode" :editor="textEditor.editor.value" class="h-full" />
     <div v-if="isSourceMode" class="flex size-full justify-center">
       <textarea
@@ -21,6 +24,7 @@
 <script setup lang="ts">
 import { computed, inject, nextTick, ref, unref, useTemplateRef, watch } from 'vue'
 import { EditorContent } from '@tiptap/vue-3'
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'
 import type { TextEditorInstance } from '../types'
 
 const { editor = undefined } = defineProps<{

packages/web-pkg/src/editor/composables/strategies/plainText.ts

@@ -42,7 +42,6 @@ export const useStrategyPlainText = (editorState: TextEditorState): ContentTypeS
         bulletList: false,
         code: false,
         codeBlock: false,
-        dropcursor: false,
         gapcursor: false,
         heading: false,
         horizontalRule: false,

packages/web-pkg/src/editor/styles/content.css

@@ -1 +1,3 @@
 @import './text-editor.css';
+@import './resize-handle.css';
+@import './drag-handle.css';

packages/web-pkg/src/editor/styles/drag-handle.css

@@ -0,0 +1,28 @@
+/* Drag handle styles */
+.custom-drag-handle::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.25rem;
+  margin-right: 0.25rem;
+  margin-top: 0.25rem;
+  content: '⠿';
+  font-weight: 700;
+  cursor: grab;
+  color: var(--color-role-on-surface-variant);
+  border-radius: 0.25rem;
+  font-size: 1.5em;
+}
+
+.custom-drag-handle:hover::after {
+  background: var(--color-role-surface-container);
+}
+
+@media (max-width: 840px) {
+  .custom-drag-handle::after {
+    margin-right: 0;
+    width: 0.8rem;
+    font-size: 1.25em;
+  }
+}

packages/web-pkg/src/editor/styles/resize-handle.css

@@ -0,0 +1,108 @@
+/* Resize handle styles */
+
+/* Prevent images from stretching */
+.text-editor-content .ProseMirror img {
+  height: auto !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle] {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 2px;
+  z-index: 10;
+  pointer-events: none;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle]:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.text-editor-content .ProseMirror [data-resize-wrapper] {
+  overflow: visible;
+}
+
+.text-editor-content
+  .ProseMirror
+  [data-resize-container].ProseMirror-selectednode
+  [data-resize-handle],
+.text-editor-content
+  .ProseMirror
+  [data-resize-container][data-resize-state='true']
+  [data-resize-handle] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='top'],
+.text-editor-content .ProseMirror [data-resize-handle='bottom'],
+.text-editor-content .ProseMirror [data-resize-handle='left'],
+.text-editor-content .ProseMirror [data-resize-handle='right'] {
+  left: auto;
+  right: auto;
+  top: auto;
+  bottom: auto;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='top-left'] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='top-right'] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='bottom-left'] {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='bottom-right'] {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='top'] {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='bottom'] {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='left'] {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-handle='right'] {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: ew-resize !important;
+}
+
+.text-editor-content .ProseMirror [data-resize-state='true'] [data-resize-wrapper] {
+  outline: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0.125rem;
+}

packages/web-pkg/src/editor/styles/text-editor.css

@@ -177,112 +177,3 @@
   border-top: 1px solid var(--oc-role-outline-variant);
   margin: 12px 0;
 }
-
-.text-editor-content .ProseMirror [data-resize-handle] {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  display: block;
-  background: rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 2px;
-  z-index: 10;
-  pointer-events: none;
-  touch-action: none;
-  opacity: 0;
-  transition: opacity 120ms ease;
-}
-
-/* Resize handles */
-
-/* Prevent images from stretching */
-.text-editor-content .ProseMirror img {
-  height: auto !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle]:hover {
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.text-editor-content .ProseMirror [data-resize-wrapper] {
-  overflow: visible;
-}
-
-.text-editor-content
-  .ProseMirror
-  [data-resize-container].ProseMirror-selectednode
-  [data-resize-handle],
-.text-editor-content
-  .ProseMirror
-  [data-resize-container][data-resize-state='true']
-  [data-resize-handle] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='top'],
-.text-editor-content .ProseMirror [data-resize-handle='bottom'],
-.text-editor-content .ProseMirror [data-resize-handle='left'],
-.text-editor-content .ProseMirror [data-resize-handle='right'] {
-  left: auto;
-  right: auto;
-  top: auto;
-  bottom: auto;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='top-left'] {
-  top: 0;
-  left: 0;
-  cursor: nwse-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='top-right'] {
-  top: 0;
-  right: 0;
-  cursor: nesw-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='bottom-left'] {
-  bottom: 0;
-  left: 0;
-  cursor: nesw-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='bottom-right'] {
-  bottom: 0;
-  right: 0;
-  cursor: nwse-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='top'] {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: ns-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='bottom'] {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: ns-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='left'] {
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: ew-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-handle='right'] {
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: ew-resize !important;
-}
-
-.text-editor-content .ProseMirror [data-resize-state='true'] [data-resize-wrapper] {
-  outline: 1px solid rgba(0, 0, 0, 0.25);
-  border-radius: 0.125rem;
-}

packages/web-pkg/tests/unit/editor/components/TextEditorContent.spec.ts

@@ -13,6 +13,14 @@ vi.mock('@tiptap/vue-3', () => ({
   })
 }))
 
+vi.mock('@tiptap/extension-drag-handle-vue-3', () => ({
+  DragHandle: defineComponent({
+    name: 'DragHandle',
+    props: { editor: { type: Object, required: false } },
+    template: '<div class="mock-drag-handle"><slot /></div>'
+  })
+}))
+
 function mountEditorContent({
   contentType = 'markdown',
   sourceMode = false,