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) with a renderMarkdown that wraps in ==; comparison
operators (x == y, a == b == c) 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 (bold/italic/strike/code/highlight nested across paragraphs, headings, lists,
quotes, links, and table cells) as regression tests.

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,70 @@
+import type {
+  JSONContent,
+  MarkdownParseHelpers,
+  MarkdownRendererHelpers,
+  MarkdownToken,
+} from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
+
+/** `==text==` with non-space edges and no interior `=` — the Pandoc/Obsidian highlight syntax. */
+const HIGHLIGHT_TOKEN = /^==(?!\s)([^=]+?)(?<!\s)==/
+/** Input/paste rule form (anchored on a preceding boundary) so typing `==x==` toggles the mark. */
+const HIGHLIGHT_INPUT = /(?:^|\s)(==(?!\s)([^=]+?)(?<!\s)==)$/
+const HIGHLIGHT_PASTE = /(?:^|\s)(==(?!\s)([^=]+?)(?<!\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 `[`.
+ */
+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 ?? [])}==`
+  },
+})

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,22 @@ 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',
   }
 
   for (const [name, input] of Object.entries(cases)) {
@@ -434,3 +450,25 @@ 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('leaves comparison / spaced == operators as literal text', () => {
+    expect(markPresent('if x == y then z')).toBe(false)
+    expect(markPresent('a == b == c')).toBe(false)
+  })
+})