feat(rich-markdown-editor): VSCode code paste and strip <style>/<script> from pasted HTML

- Code copied from VSCode carries a `vscode-editor-data` payload with the source language,
  but its text/html is per-token colored spans that ProseMirror flattens into plain
  paragraphs. Read the payload and paste a real fenced code block with the mapped language.
- Google Sheets and Word prepend a `<style>` block of CSS that PM's DOM parser walks into
  the document as literal text. Strip <style>/<script> in transformPastedHTML before parsing.

Author: waleedlatif1

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

@@ -21,10 +21,11 @@ function mount(editable = true): Editor {
 }
 
 /** Run the plugin paste handlers the way ProseMirror would, with a mocked clipboard. */
-function paste(ed: Editor, text: string, html = ''): boolean {
+function paste(ed: Editor, text: string, html = '', extra: Record<string, string> = {}): boolean {
   const event = {
     clipboardData: {
-      getData: (type: string) => (type === 'text/plain' ? text : type === 'text/html' ? html : ''),
+      getData: (type: string) =>
+        type === 'text/plain' ? text : type === 'text/html' ? html : (extra[type] ?? ''),
     },
   } as unknown as ClipboardEvent
   for (const plugin of ed.view.state.plugins) {
@@ -35,6 +36,16 @@ function paste(ed: Editor, text: string, html = ''): boolean {
   return false
 }
 
+/** Run the plugin `transformPastedHTML` chain the way ProseMirror would. */
+function transformHtml(ed: Editor, html: string): string {
+  let out = html
+  for (const plugin of ed.view.state.plugins) {
+    const fn = plugin.props?.transformPastedHTML
+    if (fn) out = fn.call(plugin.props, out, ed.view)
+  }
+  return out
+}
+
 describe('markdown paste', () => {
   it('renders a pasted inline link as a link mark', () => {
     editor = mount()
@@ -178,4 +189,38 @@ describe('markdown paste', () => {
       .filter((type) => type !== 'paragraph')
     expect(structural).toEqual(['heading', 'bulletList', 'blockquote'])
   })
+
+  it('pastes VSCode code (vscode-editor-data) as a fenced code block with its language', () => {
+    editor = mount()
+    const code = 'const x: number = 1\nreturn x'
+    const handled = paste(editor, code, '<div><span>const</span></div>', {
+      'vscode-editor-data': JSON.stringify({ mode: 'typescript' }),
+    })
+    expect(handled).toBe(true)
+    const block = (editor.getJSON().content ?? []).find((n) => n.type === 'codeBlock')
+    expect(block).toBeDefined()
+    expect(block?.attrs?.language).toBe('typescript')
+    expect(block?.content?.[0]?.text).toBe(code)
+  })
+
+  it.each([
+    ['html', 'markup'],
+    ['shellscript', 'bash'],
+  ])('maps VSCode language id %s to our code-block value %s', (mode, expected) => {
+    editor = mount()
+    paste(editor, 'code', '', { 'vscode-editor-data': JSON.stringify({ mode }) })
+    const block = (editor.getJSON().content ?? []).find((n) => n.type === 'codeBlock')
+    expect(block?.attrs?.language).toBe(expected)
+  })
+
+  it('strips <style>/<script> from pasted HTML so their text never leaks into the doc', () => {
+    editor = mount()
+    const gsheets =
+      '<google-sheets-html-origin><style>td{mso-1:2}</style><table><tr><td>a</td></tr></table></google-sheets-html-origin>'
+    const cleaned = transformHtml(editor, gsheets)
+    expect(cleaned).not.toContain('<style>')
+    expect(cleaned).not.toContain('mso-1')
+    expect(cleaned).toContain('<td>a</td>')
+    expect(transformHtml(editor, 'a<script>alert(1)</script>b')).toBe('ab')
+  })
 })

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

@@ -37,6 +37,46 @@ function hasAny(hints: ReadonlyArray<RegExp>, text: string): boolean {
   return hints.some((hint) => hint.test(text))
 }
 
+/** VSCode language ids that differ from our code-block language values; others pass through as-is. */
+const VSCODE_LANGUAGE_ALIASES: Readonly<Record<string, string>> = {
+  html: 'markup',
+  shellscript: 'bash',
+  shell: 'bash',
+  jsonc: 'json',
+  plaintext: '',
+}
+
+/**
+ * Extracts the source language from VSCode's `vscode-editor-data` clipboard payload (a JSON blob with a
+ * `mode` field), mapping the few ids that differ from our code-block values. Returns `''` (plain) when
+ * the payload is absent, unparseable, or plaintext. When present, the paste handler emits a fenced code
+ * block with this language rather than letting VSCode's per-token colored-span HTML fall through to
+ * ProseMirror's default parser, which would flatten it into plain paragraphs.
+ */
+function parseVscodeLanguage(data: string | undefined): string {
+  if (!data) return ''
+  try {
+    const mode = (JSON.parse(data) as { mode?: unknown }).mode
+    if (typeof mode !== 'string') return ''
+    return VSCODE_LANGUAGE_ALIASES[mode] ?? mode
+  } catch {
+    return ''
+  }
+}
+
+/** `<style>`/`<script>` elements (with their content), matched as a pair via the tag backreference. */
+const NON_CONTENT_HTML = /<(style|script)\b[\s\S]*?<\/\1>/gi
+
+/**
+ * Strips `<style>`/`<script>` elements from pasted HTML. Google Sheets and Word prepend a `<style>`
+ * block of CSS (and Sheets a `<google-sheets-html-origin>` wrapper); ProseMirror's DOM parser has no
+ * rule for `<style>`, so it would walk the element's CSS text into the document as literal paragraphs.
+ * Removing these before parsing keeps the pasted content clean (PM already discards unknown wrappers).
+ */
+function stripNonContentHtml(html: string): string {
+  return html.replace(NON_CONTENT_HTML, '')
+}
+
 /**
  * Parses pasted plain text that looks like markdown into rich content, via the strict CommonMark
  * parser ({@link parseMarkdownToDoc}, `marked`). Pastes inside a code block or inline code are left
@@ -62,11 +102,21 @@ export const MarkdownPaste = Extension.create({
     return [
       new Plugin({
         props: {
+          transformPastedHTML: (html) => stripNonContentHtml(html),
           handlePaste: (_view, event) => {
             if (!editor.isEditable) return false
             if (editor.isActive('codeBlock') || editor.isActive('code')) return false
             const text = event.clipboardData?.getData('text/plain')
             if (!text) return false
+            const vscodeData = event.clipboardData?.getData('vscode-editor-data')
+            if (vscodeData) {
+              const language = parseVscodeLanguage(vscodeData)
+              return editor.commands.insertContent({
+                type: 'codeBlock',
+                ...(language ? { attrs: { language } } : {}),
+                content: [{ type: 'text', text }],
+              })
+            }
             if (!hasAny(STRUCTURAL_MARKDOWN_HINTS, text)) {
               if (!hasAny(INLINE_MARK_HINTS, text)) return false
               if (event.clipboardData?.getData('text/html')) return false