feat(file-viewer): linked images, typed-link input rule, drag-to-reorder, churn fixes

- image: round-trip linked images/badges via an href attr + custom markdown tokenizer; make
  the image a drag handle so it can be grabbed and reordered
- link-input-rule: convert typed [text](url) to a link on the closing paren (normalized href)
- markdown-paste: render pasted markdown as rich content, guarded against code blocks
- round-trip-safety: behavioral link-count check replaces the static linked-image rejection
- extensions: trim the table serializer's blank lines to stop interior-table whitespace churn

Author: waleedlatif1

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

@@ -15,6 +15,8 @@ import { CodeBlockWithLanguage, MarkdownCodeBlock } from './code-block'
 import { CodeBlockHighlight } from './code-highlight'
 import { MarkdownImage, ResizableImage } from './image'
 import { EditorKeymap } from './keymap'
+import { MarkdownLinkInputRule } from './link-input-rule'
+import { MarkdownPaste } from './markdown-paste'
 import { SlashCommand } from './slash-command/slash-command'
 
 /**
@@ -29,14 +31,22 @@ const InlineCode = Code.extend({ excludes: '' })
  * joins cells with `|` without escaping, so a cell containing a literal pipe silently splits
  * into phantom columns on round-trip (data loss). Escaping must happen on the `table` node —
  * `tableCell`/`tableHeader` have no markdown renderer; the table renders cell children directly.
+ *
+ * The upstream serializer also wraps the table in its own leading/trailing blank lines; left in,
+ * the block joiner adds another, so an interior table churns its surrounding whitespace to
+ * `\n\n\n` on the first edit. Trimming the table's own output lets the joiner own the single
+ * blank-line separator — without touching blank lines inside fenced code (those live in the code
+ * node's text, not here).
  */
 const PipeSafeTable = Table.extend({
   renderMarkdown: (node: JSONContent, h: MarkdownRendererHelpers) =>
     renderTableToMarkdown(node, {
       ...h,
       renderChildren: (nodes, separator) =>
         h.renderChildren(nodes, separator).replace(/\|/g, '\\|'),
-    }),
+    })
+      .replace(/^\n+/, '')
+      .replace(/\n+$/, ''),
 })
 
 interface MarkdownEditorExtensionOptions {
@@ -79,6 +89,7 @@ export function createMarkdownContentExtensions({
     TableRow,
     TableHeader,
     TableCell,
+    MarkdownLinkInputRule,
     Markdown,
   ]
 }
@@ -96,6 +107,7 @@ export function createMarkdownEditorExtensions({
     CodeBlockHighlight,
     SlashCommand,
     EditorKeymap,
+    MarkdownPaste,
     Placeholder.configure({ placeholder }),
   ]
 }

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

@@ -6,6 +6,16 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
 
 const MIN_WIDTH = 64
 
+/**
+ * A markdown linked image `[![alt](src "t")](href "t2")` — an image wrapped in a link, the canonical
+ * form of a README badge. `@tiptap/markdown` parses this as a link mark over an image node, but an
+ * image node can't carry inline marks, so the wrapping link is silently dropped. We instead tokenize
+ * the whole construct ourselves and hang the link target on the image node's `href` attribute, so it
+ * round-trips losslessly (and the file stays editable rather than opening read-only).
+ */
+const LINKED_IMAGE_RE =
+  /^\[!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/
+
 /** Escape a value for safe interpolation into a double-quoted HTML attribute. */
 function escapeAttr(value: string): string {
   return value
@@ -18,25 +28,68 @@ function escapeAttr(value: string): string {
 /**
  * Serialize an image to markdown when it has no explicit size, and to an HTML `<img>` tag when
  * it does — standard markdown has no width syntax, so a resized image must round-trip as HTML to
- * preserve its dimensions. Unsized images stay clean `![alt](src)`.
+ * preserve its dimensions. Unsized images stay clean `![alt](src)`. An image with an `href` is
+ * wrapped in a markdown link so a linked badge round-trips as `[![alt](src)](href)`.
  */
 function imageMarkdown(node: JSONContent): string {
   const attrs = node.attrs ?? {}
   const src = typeof attrs.src === 'string' ? attrs.src : ''
   const alt = typeof attrs.alt === 'string' ? attrs.alt : ''
   const title = typeof attrs.title === 'string' ? attrs.title : ''
+  const href = typeof attrs.href === 'string' ? attrs.href : ''
+  const hrefTitle = typeof attrs.hrefTitle === 'string' ? attrs.hrefTitle : ''
   const width = attrs.width
   const height = attrs.height
+  let image: string
   if (width || height) {
     const parts = [`src="${escapeAttr(src)}"`]
     if (alt) parts.push(`alt="${escapeAttr(alt)}"`)
     if (title) parts.push(`title="${escapeAttr(title)}"`)
     if (width) parts.push(`width="${escapeAttr(String(width))}"`)
     if (height) parts.push(`height="${escapeAttr(String(height))}"`)
-    return `<img ${parts.join(' ')}>`
+    image = `<img ${parts.join(' ')}>`
+  } else {
+    const titlePart = title ? ` "${title}"` : ''
+    image = `![${alt}](${src}${titlePart})`
+  }
+  if (!href) return image
+  const hrefTitlePart = hrefTitle ? ` "${hrefTitle}"` : ''
+  return `[${image}](${href}${hrefTitlePart})`
+}
+
+interface MarkdownImageToken {
+  /** Set only by our linked-image tokenizer; absent on the built-in `![](src)` token. */
+  src?: string
+  alt?: string
+  title?: string | null
+  /** Built-in image token holds the source URL here; our linked token holds the link target. */
+  href?: string
+  hrefTitle?: string | null
+  /** Built-in image token holds the alt text here. */
+  text?: string
+}
+
+/** Map both the built-in image token and our linked-image token onto the image node's attributes. */
+function parseImageToken(token: MarkdownImageToken): JSONContent {
+  const isLinked = typeof token.src === 'string'
+  return {
+    type: 'image',
+    attrs: isLinked
+      ? {
+          src: token.src,
+          alt: token.alt ?? '',
+          title: token.title ?? null,
+          href: token.href ?? null,
+          hrefTitle: token.hrefTitle ?? null,
+        }
+      : {
+          src: token.href ?? '',
+          alt: token.text ?? '',
+          title: token.title ?? null,
+          href: null,
+          hrefTitle: null,
+        },
   }
-  const titlePart = title ? ` "${title}"` : ''
-  return `![${alt}](${src}${titlePart})`
 }
 
 const widthAttr = {
@@ -53,14 +106,44 @@ const heightAttr = {
     attributes.height ? { height: String(attributes.height) } : {},
 }
 
+/** Link target of a linked image — markdown-only state, never emitted as an HTML `<img>` attribute. */
+const hrefAttr = { default: null, rendered: false }
+const hrefTitleAttr = { default: null, rendered: false }
+
 /**
- * Image node that carries optional `width`/`height` and serializes them as an HTML `<img>` tag.
- * Shared by the headless round-trip path (no node view) and the live {@link ResizableImage}.
+ * Image node that carries optional `width`/`height` (serialized as an HTML `<img>` tag) and an
+ * optional `href`/`hrefTitle` (a wrapping markdown link, for badges). Shared by the headless
+ * round-trip path (no node view) and the live {@link ResizableImage}.
  */
 export const MarkdownImage = Image.extend({
   addAttributes() {
-    return { ...this.parent?.(), width: widthAttr, height: heightAttr }
+    return {
+      ...this.parent?.(),
+      width: widthAttr,
+      height: heightAttr,
+      href: hrefAttr,
+      hrefTitle: hrefTitleAttr,
+    }
   },
+  markdownTokenizer: {
+    name: 'image',
+    level: 'inline',
+    start: (src: string) => src.indexOf('[!['),
+    tokenize: (src: string): (MarkdownImageToken & { type: string; raw: string }) | undefined => {
+      const match = LINKED_IMAGE_RE.exec(src)
+      if (!match) return undefined
+      return {
+        type: 'image',
+        raw: match[0],
+        alt: match[1] ?? '',
+        src: match[2],
+        title: match[3] ?? null,
+        href: match[4],
+        hrefTitle: match[5] ?? null,
+      }
+    },
+  },
+  parseMarkdown: parseImageToken,
   renderMarkdown: imageMarkdown,
 })
 
@@ -72,7 +155,13 @@ function ResizableImageView({ node, updateAttributes, selected }: ReactNodeViewP
   const imageRef = useRef<HTMLImageElement>(null)
   const dragAbortRef = useRef<AbortController | null>(null)
   const [dragging, setDragging] = useState(false)
-  const attrs = node.attrs as { src?: string; alt?: string; title?: string; width?: string | null }
+  const attrs = node.attrs as {
+    src?: string
+    alt?: string
+    title?: string
+    width?: string | null
+    href?: string | null
+  }
 
   useEffect(() => () => dragAbortRef.current?.abort(), [])
 
@@ -110,17 +199,31 @@ function ResizableImageView({ node, updateAttributes, selected }: ReactNodeViewP
     ? { width: /^\d+$/.test(attrs.width) ? `${attrs.width}px` : attrs.width }
     : undefined
 
+  const image = (
+    <img
+      ref={imageRef}
+      src={attrs.src}
+      alt={attrs.alt ?? ''}
+      title={attrs.title ?? undefined}
+      // The image itself is the drag handle — grab anywhere on it to reorder. (The node view's
+      // wrapper is forced `draggable=false` by the React renderer, so the handle must be a child;
+      // the resize button sits outside this element, so it keeps its own pointer behavior.)
+      draggable
+      data-drag-handle
+      style={widthStyle}
+      className='block max-w-full cursor-grab rounded-lg border border-[var(--border)]'
+    />
+  )
+
   return (
     <NodeViewWrapper className='relative my-4 inline-block leading-none'>
-      <img
-        ref={imageRef}
-        src={attrs.src}
-        alt={attrs.alt ?? ''}
-        title={attrs.title ?? undefined}
-        draggable={false}
-        style={widthStyle}
-        className='block max-w-full rounded-lg border border-[var(--border)]'
-      />
+      {attrs.href ? (
+        <a href={attrs.href} rel='noopener noreferrer' className='block'>
+          {image}
+        </a>
+      ) : (
+        image
+      )}
       {(selected || dragging) && (
         <button
           type='button'

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

@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Typing a markdown link `[text](url)` should convert to a real link mark on the closing `)`.
+ * Input rules only fire on real text input, so these drive the editor's `handleTextInput` path
+ * (NOT `insertContent`, which bypasses input rules).
+ */
+import { Editor } from '@tiptap/core'
+import { afterEach, describe, expect, it } from 'vitest'
+import { createMarkdownContentExtensions } from './extensions'
+
+let editor: Editor | null = null
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+function mount(): Editor {
+  return new Editor({ extensions: createMarkdownContentExtensions() })
+}
+
+/** Type `prefix` (no input rules), then simulate typing the final char so the input rule fires. */
+function typeWithFinalChar(ed: Editor, prefix: string, finalChar: string): boolean {
+  ed.commands.setContent('', { contentType: 'markdown' })
+  ed.commands.insertContent(prefix)
+  const pos = ed.state.selection.from
+  return ed.view.someProp('handleTextInput', (fn) => fn(ed.view, pos, pos, finalChar)) === true
+}
+
+describe('typed markdown link input rule', () => {
+  it('converts [text](url) to a link mark on the closing paren', () => {
+    editor = mount()
+    typeWithFinalChar(editor, '[hi](https://example.com', ')')
+    const json = JSON.stringify(editor.getJSON())
+    expect(json).toContain('"type":"link"')
+    expect(json).toContain('"href":"https://example.com"')
+    expect(editor.getText()).toBe('hi')
+  })
+
+  it('normalizes a bare domain to https (parity with paste)', () => {
+    editor = mount()
+    typeWithFinalChar(editor, '[site](www.example.com', ')')
+    expect(JSON.stringify(editor.getJSON())).toContain('"href":"https://www.example.com"')
+  })
+
+  it('preserves a link title', () => {
+    editor = mount()
+    typeWithFinalChar(editor, '[t](https://e.com "the title"', ')')
+    const json = JSON.stringify(editor.getJSON())
+    expect(json).toContain('"href":"https://e.com"')
+    expect(json).toContain('"title":"the title"')
+  })
+
+  it('refuses an unsafe scheme (leaves it literal)', () => {
+    editor = mount()
+    typeWithFinalChar(editor, '[x](javascript:alert(1)', ')')
+    expect(JSON.stringify(editor.getJSON())).not.toContain('"type":"link"')
+  })
+
+  it('does not fire inside a code block', () => {
+    editor = mount()
+    editor.commands.setContent('```\n\n```', { contentType: 'markdown' })
+    editor.commands.setTextSelection(2)
+    const pos = editor.state.selection.from
+    editor.commands.insertContent('[x](https://e.com')
+    editor.view.someProp('handleTextInput', (fn) => fn(editor!.view, pos, pos, ')'))
+    expect(JSON.stringify(editor.getJSON())).not.toContain('"type":"link"')
+  })
+})

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

@@ -0,0 +1,45 @@
+import { Extension, InputRule } from '@tiptap/core'
+import { normalizeLinkHref } from './markdown-fidelity'
+
+/**
+ * Typed markdown link: `[text](url)` or `[text](url "title")`, completed by the closing `)`. The URL
+ * is space-free (markdown requires `<url>` for spaces, which this intentionally skips). StarterKit's
+ * Link ships no input rule — only paste/autolink — so without this, typed link syntax stays literal.
+ */
+const LINK_INPUT_RULE = /\[([^\]]+)]\(([^)\s]+)(?:\s+"([^"]*)")?\)$/
+
+/**
+ * Converts a typed markdown link into a real link mark on the closing `)`. The visible text is the
+ * first capture group (so `markInputRule`, which keeps the *last* group, can't express this); the
+ * href comes from the second group, normalized through {@link normalizeLinkHref} so a bare domain
+ * gets `https://` and an unsafe scheme (`javascript:`) is refused (left as literal text). Skipped
+ * inside code blocks, where the brackets are literal source.
+ */
+export const MarkdownLinkInputRule = Extension.create({
+  name: 'markdownLinkInputRule',
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: LINK_INPUT_RULE,
+        handler: ({ state, range, match }) => {
+          if (state.selection.$from.parent.type.spec.code) return null
+          const linkType = state.schema.marks.link
+          if (!linkType) return null
+          const [fullMatch, text, rawHref, title] = match
+          const href = normalizeLinkHref(rawHref ?? '')
+          if (!href || !text) return null
+
+          const { tr } = state
+          const textStart = range.from + fullMatch.indexOf(text)
+          const textEnd = textStart + text.length
+          if (textEnd < range.to) tr.delete(textEnd, range.to)
+          if (textStart > range.from) tr.delete(range.from, textStart)
+          const markEnd = range.from + text.length
+          tr.addMark(range.from, markEnd, linkType.create({ href, title: title || null }))
+          tr.removeStoredMark(linkType)
+        },
+      }),
+    ]
+  },
+})