feat(rich-markdown-editor): round-trip gate, VSCode/style paste, highlight, block reorder

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/extensions.ts

@@ -12,6 +12,7 @@ import {
 import { Markdown } from '@tiptap/markdown'
 import StarterKit from '@tiptap/starter-kit'
 import { MarkdownCodeBlock } from './code-block'
+import { Highlight } from './highlight'
 import { MarkdownImage } from './image'
 import { MarkdownLinkInputRule } from './link-input-rule'
 import { MarkdownMention } from './mention/mention-node'
@@ -130,6 +131,7 @@ export function createMarkdownContentExtensions(nodeViews: ContentNodeViews = {}
  }),
  BlockSafeParagraph,
  InlineCode,
+ Highlight,
  codeBlock,
  (nodeViews.image ?? MarkdownImage).configure({ allowBase64: true }),
  nodeViews.mention ?? MarkdownMention,

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

@@ -0,0 +1,105 @@
+import type {
+ JSONContent,
+ MarkdownParseHelpers,
+ MarkdownRendererHelpers,
+ MarkdownToken,
+} from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
+import type { Transaction } from '@tiptap/pm/state'
+import { Plugin } from '@tiptap/pm/state'
+
+/**
+ * `==text==` with non-space edges — the Pandoc/Obsidian highlight syntax. The body allows a lone `=`
+ * (`=(?!=)`) but never `==`, so a highlight over text containing `=` (e.g. `==a=b==`) round-trips while
+ * the closing `==` still terminates the run.
+ */
+const HIGHLIGHT_BODY = String.raw`(?:[^=]|=(?!=))+?`
+const HIGHLIGHT_TOKEN = new RegExp(String.raw`^==(?!\s)(${HIGHLIGHT_BODY})(?<!\s)==`)
+/** Input/paste rule form (anchored on a preceding boundary) so typing `==x==` toggles the mark. */
+const HIGHLIGHT_INPUT = new RegExp(String.raw`(?:^|\s)(==(?!\s)(${HIGHLIGHT_BODY})(?<!\s)==)$`)
+const HIGHLIGHT_PASTE = new RegExp(String.raw`(?:^|\s)(==(?!\s)(${HIGHLIGHT_BODY})(?<!\s)==)`, 'g')
+
+/**
+ * Highlight mark (`<mark>`), serialized to and parsed from `==text==`. CommonMark/`marked` has no
+ * highlight token, so this registers a custom inline tokenizer (parsing the inner text as inline
+ * markdown so nested marks like `==**bold**==` survive) and a `renderMarkdown` that wraps the content
+ * in `==`. Mirrors the verbatim-node registration pattern in `./raw-markdown-snippet`.
+ *
+ * The tokenizer's `start` returns the index of the next `==` (a plain string search, not the
+ * `createLexer()`-calling form the `RawHtmlBlock` caveat warns against) so `marked` breaks its inline
+ * text run there and gives this tokenizer a chance mid-line — `=` is not a default break char like `[`.
+ *
+ * A lone `=` is allowed inside a highlight (so `==a=b==` round-trips), but `==` cannot be encoded in the
+ * `==…==` delimiter (emitting `==a==b==` would split the highlight and corrupt the text on reload). The
+ * tokenizer/input rules already exclude `==`; an `appendTransaction` guard removes the mark from any
+ * text that ends up containing `==` (e.g. a toolbar highlight over `a==b`), so the doc never holds an
+ * unrepresentable highlight and serialization stays lossless.
+ */
+export const Highlight = Mark.create({
+ name: 'highlight',
+
+ parseHTML() {
+ return [{ tag: 'mark' }]
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return ['mark', mergeAttributes(HTMLAttributes), 0]
+ },
+
+ addInputRules() {
+ return [markInputRule({ find: HIGHLIGHT_INPUT, type: this.type })]
+ },
+
+ addPasteRules() {
+ return [markPasteRule({ find: HIGHLIGHT_PASTE, type: this.type })]
+ },
+
+ addKeyboardShortcuts() {
+ return { 'Mod-Shift-h': () => this.editor.commands.toggleMark(this.name) }
+ },
+
+ markdownTokenName: 'highlight',
+ markdownTokenizer: {
+ name: 'highlight',
+ level: 'inline' as const,
+ start: (src: string) => src.indexOf('=='),
+ tokenize(src: string): MarkdownToken | undefined {
+ const match = HIGHLIGHT_TOKEN.exec(src)
+ if (!match) return undefined
+ return { type: 'highlight', raw: match[0], text: match[1] }
+ },
+ },
+
+ parseMarkdown(token: MarkdownToken, helpers: MarkdownParseHelpers) {
+ const inner = token.text ?? ''
+ const tokens = helpers.tokenizeInline?.(inner)
+ const content = tokens ? helpers.parseInline(tokens) : [{ type: 'text', text: inner }]
+ return { mark: 'highlight', content }
+ },
+
+ renderMarkdown(node: JSONContent, h: MarkdownRendererHelpers) {
+ return `==${h.renderChildren(node.content ?? [])}==`
+ },
+
+ addProseMirrorPlugins() {
+ const markType = this.type
+ return [
+ new Plugin({
+ appendTransaction(transactions, _oldState, newState) {
+ if (!transactions.some((transaction) => transaction.docChanged)) return null
+ let tr: Transaction | null = null
+ newState.doc.descendants((node, pos) => {
+ if (
+ node.isText &&
+ node.text?.includes('==') &&
+ node.marks.some((mark) => mark.type === markType)
+ ) {
+ tr = (tr ?? newState.tr).removeMark(pos, pos + node.nodeSize, markType)
+ }
+ })
+ return tr
+ },
+ }),
+ ]
+ },
+})

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