feat(rich-markdown-editor): keyboard block reordering (Mod-Shift-Arrow)

Mod-Shift-ArrowUp/ArrowDown swaps the current top-level block with its neighbour, carrying
the caret, and no-ops at the document edges. Pure UI interaction, no schema change. Covered
by tests (up/down, edge no-op, list stays intact).

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/block-mover.ts

@@ -0,0 +1,70 @@
+import { Extension } from '@tiptap/core'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
+import { TextSelection } from '@tiptap/pm/state'
+
+/** The position range of the depth-1 block containing the cursor, or null at the document root. */
+function currentTopLevelBlock(state: EditorState): { from: number; to: number } | null {
+  const { $from } = state.selection
+  if ($from.depth === 0) return null
+  return { from: $from.before(1), to: $from.after(1) }
+}
+
+/**
+ * Swaps the current top-level block with its neighbour in `direction`, keeping the caret on the moved
+ * block. Adjacent top-level blocks share a boundary position (no separator token between them), so the
+ * move is a single `replaceWith` of the two-block span with the pair reordered. No-ops (returns false)
+ * at the matching document edge or when the neighbour isn't a top-level block. After the swap the moved
+ * block begins one token into the span (up) or just after the neighbour it leapfrogged (down), so
+ * `movedStart` re-anchors the caret at its original offset within the block.
+ */
+function moveBlock(
+  state: EditorState,
+  dispatch: ((tr: Transaction) => void) | undefined,
+  direction: 'up' | 'down'
+): boolean {
+  const block = currentTopLevelBlock(state)
+  if (!block) return false
+  const { from, to } = block
+  const up = direction === 'up'
+
+  if (up ? from === 0 : to >= state.doc.content.size) return false
+  const $neighbour = state.doc.resolve(up ? from - 1 : to + 1)
+  if ($neighbour.depth === 0) return false
+  if (!dispatch) return true
+
+  const spanFrom = up ? $neighbour.before(1) : from
+  const spanTo = up ? to : $neighbour.after(1)
+  const moving = state.doc.slice(from, to).content
+  const neighbour = up
+    ? state.doc.slice(spanFrom, from).content
+    : state.doc.slice(to, spanTo).content
+  const tr = state.tr.replaceWith(
+    spanFrom,
+    spanTo,
+    up ? moving.append(neighbour) : neighbour.append(moving)
+  )
+
+  const movedStart = (up ? spanFrom : spanFrom + neighbour.size) + 1
+  const offset = state.selection.from - from
+  tr.setSelection(
+    TextSelection.near(tr.doc.resolve(Math.min(movedStart + offset, movedStart - 1 + moving.size)))
+  )
+  dispatch(tr.scrollIntoView())
+  return true
+}
+
+/**
+ * Reorders the current top-level block with `Mod-Shift-ArrowUp`/`ArrowDown` — the standard
+ * keyboard block-move affordance (Notion/Obsidian). Pure UI interaction: no schema change, and the
+ * caret rides along with the block. A no-op (returns false, falling through) at the document edges.
+ */
+export const BlockMover = Extension.create({
+  name: 'blockMover',
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-ArrowUp': ({ editor }) => moveBlock(editor.state, editor.view.dispatch, 'up'),
+      'Mod-Shift-ArrowDown': ({ editor }) => moveBlock(editor.state, editor.view.dispatch, 'down'),
+    }
+  },
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/editor-extensions.ts

@@ -1,5 +1,6 @@
 import type { Extensions } from '@tiptap/core'
 import Placeholder from '@tiptap/extension-placeholder'
+import { BlockMover } from './block-mover'
 import { CodeBlockWithLanguage } from './code-block'
 import { CodeBlockHighlight } from './code-highlight'
 import { LinkEmbed } from './embed/link-embed'
@@ -44,6 +45,7 @@ export function createMarkdownEditorExtensions({
     SlashCommand,
     Mention,
     RichMarkdownKeymap,
+    BlockMover,
     MarkdownPaste,
     Placeholder.configure({ placeholder }),
     ...(embeds ? [LinkEmbed] : []),

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/keymap.test.ts

@@ -257,3 +257,67 @@ describe('verbatim block boundary (isolating)', () => {
     }
   )
 })
+
+describe('block reordering (Mod-Shift-Arrow)', () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn()
+  })
+
+  /** Fire a Mod-Shift-Arrow chord (both meta+ctrl set so it matches Mod on either platform). */
+  function pressMoveBlock(editor: Editor, direction: 'ArrowUp' | 'ArrowDown'): void {
+    editor.view.dom.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: direction,
+        shiftKey: true,
+        metaKey: true,
+        ctrlKey: true,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  }
+
+  function caretInto(editor: Editor, word: string): void {
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText && node.text?.includes(word)) editor.commands.setTextSelection(pos + 1)
+    })
+  }
+
+  it('moves the current top-level block up, carrying the caret', () => {
+    const editor = editorWith('')
+    editor.commands.setContent('# One\n\nTwo para\n\n- item', { contentType: 'markdown' })
+    editor.commands.focus()
+    caretInto(editor, 'Two')
+    pressMoveBlock(editor, 'ArrowUp')
+    expect(editor.getMarkdown().trim().startsWith('Two para')).toBe(true)
+    editor.destroy()
+  })
+
+  it('moves the current top-level block down', () => {
+    const editor = editorWith('')
+    editor.commands.setContent('# One\n\nTwo para', { contentType: 'markdown' })
+    editor.commands.focus()
+    caretInto(editor, 'One')
+    pressMoveBlock(editor, 'ArrowDown')
+    expect(editor.getMarkdown().trim().startsWith('Two para')).toBe(true)
+    editor.destroy()
+  })
+
+  it('is a no-op at the top edge and keeps a moved list intact', () => {
+    const top = editorWith('')
+    top.commands.setContent('# One\n\nTwo', { contentType: 'markdown' })
+    top.commands.focus()
+    caretInto(top, 'One')
+    pressMoveBlock(top, 'ArrowUp')
+    expect(top.getMarkdown().trim().startsWith('# One')).toBe(true)
+    top.destroy()
+
+    const list = editorWith('')
+    list.commands.setContent('- a\n- b\n\npara', { contentType: 'markdown' })
+    list.commands.focus()
+    caretInto(list, 'para')
+    pressMoveBlock(list, 'ArrowUp')
+    expect(list.getMarkdown().trim()).toBe('para\n\n- a\n- b')
+    list.destroy()
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/keymap.ts

@@ -128,7 +128,8 @@ function selectAdjacentSelectedLeaf(editor: Editor, direction: 'up' | 'down'): b
  *   same scoped behavior as a code editor.
  * - **ArrowUp/ArrowDown** select an adjacent divider or image, whether arrowing off a textblock edge
  *   ({@link selectAdjacentLeaf}) or stepping from one already-selected leaf to the next
- *   ({@link selectAdjacentSelectedLeaf}).
+ *   ({@link selectAdjacentSelectedLeaf}). (The `Mod-Shift-Arrow` block-reorder chords live separately
+ *   in `./block-mover.ts`.)
  *
  * Plus a plugin that (a) highlights dividers/images falling inside a range selection (e.g. select-all),
  * which the browser's native text highlight skips because leaves carry no text, and (b) flags the