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 at its original offset (newBefore + offset, no off-by-one), and no-ops at the
document edges. Exposed as moveBlockUp/moveBlockDown commands (the keyboard shortcuts call
them). Pure UI interaction, no schema change. Covered by tests (order, caret offset, 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,94 @@
+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. `newBefore` is the moved
+ * block's new `before(1)` position; adding the caret's original offset (`selection.from - from`, also
+ * measured from `before(1)`) re-anchors the caret at the same spot 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 newBefore = up ? spanFrom : spanFrom + neighbour.size
+  const offset = state.selection.from - from
+  tr.setSelection(
+    TextSelection.near(tr.doc.resolve(Math.min(newBefore + offset, newBefore + moving.size)))
+  )
+  dispatch(tr.scrollIntoView())
+  return true
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    blockMover: {
+      /** Move the current top-level block up one position, carrying the caret. */
+      moveBlockUp: () => ReturnType
+      /** Move the current top-level block down one position, carrying the caret. */
+      moveBlockDown: () => ReturnType
+    }
+  }
+}
+
+/**
+ * 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',
+
+  addCommands() {
+    return {
+      moveBlockUp:
+        () =>
+        ({ state, dispatch }) =>
+          moveBlock(state, dispatch, 'up'),
+      moveBlockDown:
+        () =>
+        ({ state, dispatch }) =>
+          moveBlock(state, dispatch, 'down'),
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-ArrowUp': ({ editor }) => editor.commands.moveBlockUp(),
+      'Mod-Shift-ArrowDown': ({ editor }) => editor.commands.moveBlockDown(),
+    }
+  },
+})

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,73 @@ describe('verbatim block boundary (isolating)', () => {
     }
   )
 })
+
+describe('block reordering (Mod-Shift-Arrow)', () => {
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = vi.fn()
+  })
+
+  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')
+    editor.commands.moveBlockUp()
+    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')
+    editor.commands.moveBlockDown()
+    expect(editor.getMarkdown().trim().startsWith('Two para')).toBe(true)
+    editor.destroy()
+  })
+
+  it.each([
+    ['up', '# One\n\nabcdef'],
+    ['down', 'abcdef\n\n# Two'],
+  ])('keeps the caret at its original offset after moving %s (no off-by-one)', (direction, md) => {
+    const editor = editorWith('')
+    editor.commands.setContent(md, { contentType: 'markdown' })
+    editor.commands.focus()
+    let textPos = -1
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText && node.text === 'abcdef') textPos = pos
+    })
+    editor.commands.setTextSelection(textPos + 3)
+    if (direction === 'up') editor.commands.moveBlockUp()
+    else editor.commands.moveBlockDown()
+    const at = editor.state.selection.from
+    expect(editor.state.doc.textBetween(at - 1, at)).toBe('c')
+    expect(editor.state.doc.textBetween(at, at + 1)).toBe('d')
+    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')
+    top.commands.moveBlockUp()
+    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')
+    list.commands.moveBlockUp()
+    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