feat(rich-markdown-editor): add highlight (==mark==) support

Adds a highlight mark rendered as <mark> and serialized to/from ==text== (Pandoc/Obsidian
syntax). A custom inline tokenizer parses ==text== (inner text parsed as inline markdown so
nested marks like ==**bold**== survive; the body allows a lone `=` so ==a=b== round-trips).
`==` cannot be encoded in the delimiter, so an appendTransaction guard strips the mark from
any text that ends up containing `==` (e.g. a toolbar highlight over a==b), keeping the text
and never emitting the corrupting ==a==b==. Comparison operators (x == y) stay literal.
Wired with an input rule, paste rule, Mod-Shift-H, a bubble-menu button, and themed <mark>
styling. Also locks in mark-stacking round-trips across contexts.

Author: waleedlatif1

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/menus/bubble-menu.tsx

@@ -10,6 +10,7 @@ import {
   Code,
   Heading1,
   Heading2,
+  Highlighter,
   Italic,
   Link as LinkIcon,
   List,
@@ -76,6 +77,7 @@ export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMen
       bold: e.isActive('bold'),
       italic: e.isActive('italic'),
       strike: e.isActive('strike'),
+      highlight: e.isActive('highlight'),
       code: e.isActive('code'),
       link: e.isActive('link'),
       heading1: e.isActive('heading', { level: 1 }),
@@ -262,6 +264,13 @@ export function EditorBubbleMenu({ editor, scrollContainerRef }: EditorBubbleMen
             isActive={active.strike}
             onClick={() => editor.chain().focus().toggleStrike().run()}
           />
+          <ToolbarButton
+            icon={Highlighter}
+            label='Highlight'
+            shortcut='⌘⇧H'
+            isActive={active.highlight}
+            onClick={() => editor.chain().focus().toggleMark('highlight').run()}
+          />
           <ToolbarButton
             icon={Code}
             label='Code'

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

@@ -397,6 +397,20 @@
   pointer-events: none;
 }
 
+/*
+ * Highlight mark (`==text==`). An opacity-based amber tint so it reads on both light and dark
+ * surfaces without a theme override; `color: inherit` keeps the text at the surrounding body color
+ * and `box-decoration-break: clone` keeps the tint clean where a highlight wraps across lines.
+ */
+.rich-markdown-prose mark {
+  background-color: rgba(255, 212, 0, 0.4);
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 0.1em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
 /*
  * Field variant (modal embed): match the surrounding chip fields' typography exactly —
  * body at the chip `text-sm` (14px) scale and the placeholder at `--text-muted` (not the

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

@@ -158,6 +158,23 @@ describe('editor markdown round-trip', () => {
     'bold code': '**`x`**',
     'heading strike code': '# ~~`x`~~',
     'table with pipe': '| x \\| y | 2 |\n| --- | --- |\n| a | b |',
+    'bold italic nested': '**bold _italic_ word**',
+    'strike bold nested': '~~**struck bold**~~',
+    'bold code inline': '**bold `code` here**',
+    'triple nested marks': '*i **b ~~s~~** i*',
+    'all marks in heading': '# **b** ~~s~~ *i* `c`',
+    'marks in bullet': '- **a** ~~b~~ `c`',
+    'marks in quote': '> **a** ~~b~~ *c*',
+    'nested list marks': '- **a**\n  - ~~b~~\n    - *c*',
+    'bold link': '[**bold link**](https://x.com)',
+    'link inside bold': '**see [x](https://x.com)**',
+    'table with marks': '| **b** | ~~s~~ | `c` |\n| --- | --- | --- |\n| *i* | a | b |',
+    'bold across code boundary': '**a** `b` **c**',
+    highlight: 'a ==marked== word',
+    'highlight in heading': '# a ==mark== b',
+    'highlight nested in bold': '**bold ==mark== here**',
+    'highlight in list': '- ==a== item',
+    'highlight with interior equals': 'x ==a=b== y',
   }
 
   for (const [name, input] of Object.entries(cases)) {
@@ -434,3 +451,53 @@ describe('consecutive empty paragraphs', () => {
     }
   )
 })
+
+describe('highlight ==mark==', () => {
+  function markPresent(src: string): boolean {
+    editor = new Editor({ extensions: createMarkdownContentExtensions() })
+    editor.commands.setContent(src, { contentType: 'markdown' })
+    const has = JSON.stringify(editor.getJSON()).includes('"type":"highlight"')
+    editor.destroy()
+    editor = null
+    return has
+  }
+
+  it('parses ==text== into a highlight mark, including mid-line and in headings', () => {
+    expect(markPresent('a ==marked== word')).toBe(true)
+    expect(markPresent('# a ==mark== b')).toBe(true)
+    expect(markPresent('**bold ==mark== here**')).toBe(true)
+  })
+
+  it('parses a highlight body containing a lone `=` (so ==a=b== round-trips)', () => {
+    expect(markPresent('x ==a=b== y')).toBe(true)
+  })
+
+  it('strips a highlight whose text contains `==` (unrepresentable), keeping the text', () => {
+    editor = new Editor({ extensions: createMarkdownContentExtensions() })
+    editor.commands.setContent('x a==b y', { contentType: 'markdown' })
+    let from = -1
+    let to = -1
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText) {
+        const i = node.text?.indexOf('a==b') ?? -1
+        if (i >= 0) {
+          from = pos + i
+          to = from + 4
+        }
+      }
+    })
+    editor.commands.setTextSelection({ from, to })
+    editor.commands.toggleMark('highlight')
+    const md = postProcessSerializedMarkdown(editor.getMarkdown())
+    expect(JSON.stringify(editor.getJSON())).not.toContain('"type":"highlight"')
+    expect(md).not.toContain('==a==b==')
+    expect(editor.getText().trim()).toBe('x a==b y')
+    editor.destroy()
+    editor = null
+  })
+
+  it('leaves comparison / spaced == operators as literal text', () => {
+    expect(markPresent('if x == y then z')).toBe(false)
+    expect(markPresent('a == b == c')).toBe(false)
+  })
+})