snapshot of https://github.com/ueberdosis/tiptap.git (main, 2026-09-15; blobs > 131072B omitted)

packages/extension-highlight/README.md

@@ -0,0 +1,18 @@
+# @tiptap/extension-highlight
+
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-highlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-highlight)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-highlight.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-highlight.svg)](https://www.npmjs.com/package/@tiptap/extension-highlight)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
+
+## Official Documentation
+
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

packages/extension-highlight/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@tiptap/extension-highlight",
+  "version": "3.30.3",
+  "description": "highlight extension for tiptap",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "homepage": "https://tiptap.dev",
+  "bugs": {
+    "url": "https://github.com/ueberdosis/tiptap/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-highlight"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vp pack"
+  },
+  "devDependencies": {
+    "@tiptap/core": "workspace:^"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "workspace:*"
+  }
+}

packages/extension-highlight/src/highlight.ts

@@ -0,0 +1,183 @@
+import { getStyleProperty, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
+
+export interface HighlightOptions {
+  /**
+   * Allow multiple highlight colors
+   * @default false
+   * @example true
+   */
+  multicolor: boolean
+
+  /**
+   * HTML attributes to add to the highlight element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    highlight: {
+      /**
+       * Set a highlight mark
+       * @param attributes The highlight attributes
+       * @example editor.commands.setHighlight({ color: 'red' })
+       */
+      setHighlight: (attributes?: { color: string }) => ReturnType
+      /**
+       * Toggle a highlight mark
+       * @param attributes The highlight attributes
+       * @example editor.commands.toggleHighlight({ color: 'red' })
+       */
+      toggleHighlight: (attributes?: { color: string }) => ReturnType
+      /**
+       * Unset a highlight mark
+       * @example editor.commands.unsetHighlight()
+       */
+      unsetHighlight: () => ReturnType
+    }
+  }
+}
+
+/**
+ * Matches a highlight to a ==highlight== on input.
+ */
+export const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/
+
+/**
+ * Matches a highlight to a ==highlight== on paste.
+ */
+export const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g
+
+/**
+ * This extension allows you to highlight text.
+ * @see https://www.tiptap.dev/api/marks/highlight
+ */
+export const Highlight = Mark.create<HighlightOptions>({
+  name: 'highlight',
+
+  addOptions() {
+    return {
+      multicolor: false,
+      HTMLAttributes: {},
+    }
+  },
+
+  addAttributes() {
+    if (!this.options.multicolor) {
+      return {}
+    }
+
+    return {
+      color: {
+        default: null,
+        // Prefer `data-color` (set by our own `renderHTML`) for lossless
+        // round-trips. Otherwise parse the raw inline `style` attribute so
+        // the original color format (e.g. `#rrggbb`) is preserved instead of
+        // the canonicalized `rgb(...)` value from `element.style.backgroundColor`.
+        parseHTML: element =>
+          element.getAttribute('data-color') ||
+          getStyleProperty(element, 'background-color') ||
+          element.style.backgroundColor,
+        renderHTML: attributes => {
+          if (!attributes.color) {
+            return {}
+          }
+
+          return {
+            'data-color': attributes.color,
+            style: `background-color: ${attributes.color}; color: inherit`,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'mark',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+  },
+
+  renderMarkdown: (node, h) => {
+    return `==${h.renderChildren(node)}==`
+  },
+
+  parseMarkdown: (token, h) => {
+    return h.applyMark('highlight', h.parseInline(token.tokens || []))
+  },
+
+  markdownTokenizer: {
+    name: 'highlight',
+    level: 'inline',
+    start: (src: string) => src.indexOf('=='),
+    tokenize(src, _, h) {
+      const rule = /^(==)([^=]+)(==)/ // ==highlighted text==
+      const match = rule.exec(src)
+
+      if (match) {
+        const innerContent = match[2].trim()
+
+        const children = h.inlineTokens(innerContent)
+
+        return {
+          type: 'highlight',
+          raw: match[0],
+          text: innerContent,
+          tokens: children,
+        }
+      }
+    },
+  },
+
+  addCommands() {
+    return {
+      setHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes)
+        },
+      toggleHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes)
+        },
+      unsetHighlight:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name)
+        },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),
+    }
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
+    ]
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type,
+      }),
+    ]
+  },
+})

packages/extension-highlight/src/index.ts

@@ -0,0 +1,5 @@
+import { Highlight } from './highlight.js'
+
+export * from './highlight.js'
+
+export default Highlight

packages/extension-highlight/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite-plus'
+import { basePackConfig } from '../../pack.config.mjs'
+
+export default defineConfig({
+  pack: {
+    entry: ['src/index.ts'],
+    ...basePackConfig(),
+  },
+})