Merge pull request #815 from rbbydotdev/add-highlight-support

petyosi · web-flow · commit ea9defa97c5e · 2025-08-16T18:41:40.000+03:00
add highlight support to toolbar and syntax via ...
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -62,7 +62,7 @@
       "selectBlockTypeTooltip": "Select block type",
       "placeholder": "Block type"
     },
-    "toggleGroup":"toggle group",
+    "toggleGroup": "toggle group",
     "removeBold": "Remove bold",
     "bold": "Bold",
     "removeItalic": "Remove italic",
@@ -88,7 +88,9 @@
     "checkList": "Check list",
     "deleteSandpack": "Delete this code block",
     "undo": "Undo {{shortcut}}",
-    "redo": "Redo {{shortcut}}"
+    "redo": "Redo {{shortcut}}",
+    "highlight": "Highlight",
+    "removeHighlight": "Remove highlight"
   },
   "admonitions": {
     "note": "Note",
@@ -103,7 +105,7 @@
     "language": "Code block language",
     "selectLanguage": "Select code block language"
   },
-  "contentArea":{
+  "contentArea": {
     "editableMarkdown": "editable markdown"
   }
 }
diff --git a/locales/es-es/translation.json b/locales/es-es/translation.json
@@ -88,7 +88,9 @@
     "checkList": "Lista de verificación",
     "deleteSandpack": "Borrar este bloque de código",
     "undo": "Deshacer {{shortcut}}",
-    "redo": "Rehacer {{shortcut}}"
+    "redo": "Rehacer {{shortcut}}",
+    "highlight": "Resaltar",
+    "removeHighlight": "Quitar resaltado"
   },
   "admonitions": {
     "note": "Nota",
diff --git a/locales/fr/translation.json b/locales/fr/translation.json
@@ -88,7 +88,9 @@
     "checkList": "Liste de tâches",
     "deleteSandpack": "Supprimer ce bloc de code",
     "undo": "Annuler {{shortcut}}",
-    "redo": "Rétablir {{shortcut}}"
+    "redo": "Rétablir {{shortcut}}",
+    "highlight": "Surligner",
+    "removeHighlight": "Supprimer le surlignage"
   },
   "admonitions": {
     "note": "Note",
diff --git a/locales/ko-kr/translation.json b/locales/ko-kr/translation.json
@@ -88,7 +88,9 @@
     "checkList": "체크 리스트",
     "deleteSandpack": "이 코드 블록 삭제",
     "undo": "취소 {{shortcut}}",
-    "redo": "다시 {{shortcut}}"
+    "redo": "다시 {{shortcut}}",
+    "highlight": "강조",
+    "removeHighlight": "강조 제거"
   },
   "admonitions": {
     "note": "메모",
diff --git a/locales/pt-br/translation.json b/locales/pt-br/translation.json
@@ -89,6 +89,8 @@
     "deleteSandpack": "Deletar esse bloco de código",
     "undo": "Desfazer {{shortcut}}",
     "redo": "Refazer {{shortcut}}",
+    "highlight": "Destacar",
+    "removeHighlight": "Remover destaque",
     "superscript": "Sobrescrito",
     "subscript": "Subscrito",
     "strikethrough": "Riscado"
diff --git a/locales/ru-ru/translation.json b/locales/ru-ru/translation.json
@@ -89,6 +89,8 @@
         "deleteSandpack": "Удалить этот блок кода",
         "undo": "Отменить {{shortcut}}",
         "redo": "Вернуть {{shortcut}}",
+        "highlight": "Выделить",
+        "removeHighlight": "Убрать выделение",
         "superscript": "Надстрочный",
         "subscript": "Подстрочный",
         "strikethrough": "Зачёркнутый",
diff --git a/locales/uk-ua/translation.json b/locales/uk-ua/translation.json
@@ -88,7 +88,9 @@
       "checkList": "Контрольний список",
       "deleteSandpack": "Видалити цей блок коду",
       "undo": "Скасувати {{shortcut}}",
-      "redo": "Повторити скасоване {{shortcut}}"
+      "redo": "Повторити скасоване {{shortcut}}",
+      "highlight": "Виділити",
+      "removeHighlight": "Прибрати виділення"
     },
     "admonitions": {
       "note": "Примітка",
diff --git a/locales/zh-cn/translation.json b/locales/zh-cn/translation.json
@@ -89,6 +89,8 @@
     "deleteSandpack": "删除 Sandpack",
     "undo": "撤销 {{shortcut}}",
     "redo": "重做 {{shortcut}}",
+    "highlight": "高亮",
+    "removeHighlight": "移除高亮",
     "superscript": "上标",
     "subscript": "下标",
     "strikethrough": "删除线",
diff --git a/locales/zh-tw/translation.json b/locales/zh-tw/translation.json
@@ -88,7 +88,9 @@
     "checkList": "核取清單",
     "deleteSandpack": "刪除 Sandpack",
     "undo": "復原 {{shortcut}}",
-    "redo": "重做 {{shortcut}}"
+    "redo": "重做 {{shortcut}}",
+    "highlight": "螢光標示",
+    "removeHighlight": "移除螢光標示"
   },
   "admonitions": {
     "note": "注意",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "mdast-util-gfm-strikethrough": "^2.0.0",
     "mdast-util-gfm-table": "^2.0.0",
     "mdast-util-gfm-task-list-item": "^2.0.0",
+    "mdast-util-highlight-mark": "^1.2.2",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
@@ -83,6 +84,7 @@
     "micromark-extension-gfm-strikethrough": "^2.0.0",
     "micromark-extension-gfm-table": "^2.0.0",
     "micromark-extension-gfm-task-list-item": "^2.0.1",
+    "micromark-extension-highlight-mark": "^1.2.0",
     "micromark-extension-mdx-jsx": "^3.0.0",
     "micromark-extension-mdx-md": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
diff --git a/src/defaultSvgIcons.tsx b/src/defaultSvgIcons.tsx
@@ -41,6 +41,23 @@ export const defaultSvgIcons = {
       />
     </svg>
   ),
+  format_highlight: (
+    /* taken from from https://lucide.dev/icons/highlighter */
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m9 11-6 6v3h9l3-3" />
+      <path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" />
+    </svg>
+  ),
   code: (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
@@ -395,6 +412,7 @@ export type IconKey =
   | 'format_list_bulleted'
   | 'format_list_numbered'
   | 'format_list_checked'
+  | 'format_highlight'
   | 'link'
   | 'add_photo'
   | 'table'
diff --git a/src/examples/basics.tsx b/src/examples/basics.tsx
@@ -80,6 +80,7 @@ export function MoreFormatting() {
         ref={ref}
         markdown={`
 ~~scratch this~~ *and <sup>sup this</sup> and <sub>sub this</sub> all in italic*  and<u>***something***</u>foo.
+okay ==**highlight** _this_ and <sup>this</sup>==
 `}
         onChange={console.log}
       />
diff --git a/src/index.ts b/src/index.ts
@@ -85,6 +85,7 @@ export * from './plugins/toolbar/components/BoldItalicUnderlineToggles'
 export * from './plugins/toolbar/components/ChangeAdmonitionType'
 export * from './plugins/toolbar/components/ChangeCodeMirrorLanguage'
 export * from './plugins/toolbar/components/CodeToggle'
+export * from './plugins/toolbar/components/HighlightToggle'
 export * from './plugins/toolbar/components/CreateLink'
 export * from './plugins/toolbar/components/DiffSourceToggleWrapper'
 export * from './plugins/toolbar/components/InsertAdmonition'
diff --git a/src/plugins/core/LexicalTextVisitor.ts b/src/plugins/core/LexicalTextVisitor.ts
@@ -1,18 +1,26 @@
 import { $isTextNode, TextNode } from 'lexical'
 import * as Mdast from 'mdast'
-import { IS_BOLD, IS_CODE, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from '../../FormatConstants'
+import {
+  IS_BOLD,
+  IS_CODE,
+  IS_HIGHLIGHT,
+  IS_ITALIC,
+  IS_STRIKETHROUGH,
+  IS_SUBSCRIPT,
+  IS_SUPERSCRIPT,
+  IS_UNDERLINE
+} from '../../FormatConstants'
 import { LexicalExportVisitor } from '../../exportMarkdownFromLexical'
 import { type MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 
 export function isMdastText(mdastNode: Mdast.Nodes): mdastNode is Mdast.Text {
   return mdastNode.type === 'text'
 }
-
 const JOINABLE_TAGS = ['u', 'span', 'sub', 'sup']
 
 export const LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text | Mdast.Html | MdxJsxTextElement> = {
   shouldJoin: (prevNode, currentNode) => {
-    if (['text', 'emphasis', 'strong'].includes(prevNode.type)) {
+    if (['text', 'emphasis', 'strong', 'highlight'].includes(prevNode.type)) {
       return prevNode.type === currentNode.type
     }
 
@@ -109,6 +117,12 @@ export const LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text | Mda
       }) as Mdast.Parent
     }
 
+    if (prevFormat & format & IS_HIGHLIGHT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: 'highlight',
+        children: []
+      }) as Mdast.Parent
+    }
     // repeat the same sequence as above for formatting introduced with this node
 
     if (format & IS_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
@@ -159,6 +173,13 @@ export const LexicalTextVisitor: LexicalExportVisitor<TextNode, Mdast.Text | Mda
       }) as Mdast.Parent
     }
 
+    if (format & IS_HIGHLIGHT && !(prevFormat & IS_HIGHLIGHT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: 'highlight',
+        children: []
+      }) as Mdast.Parent
+    }
+
     if (format & IS_CODE) {
       actions.appendToParent(localParentNode, {
         type: 'inlineCode',
diff --git a/src/plugins/core/MdastFormattingVisitor.ts b/src/plugins/core/MdastFormattingVisitor.ts
@@ -1,6 +1,16 @@
 import * as Mdast from 'mdast'
 import { MdxJsxTextElement } from 'mdast-util-mdx'
-import { FORMAT, IS_BOLD, IS_CODE, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from '../../FormatConstants'
+import {
+  FORMAT,
+  IS_BOLD,
+  IS_CODE,
+  IS_HIGHLIGHT,
+  IS_ITALIC,
+  IS_STRIKETHROUGH,
+  IS_SUBSCRIPT,
+  IS_SUPERSCRIPT,
+  IS_UNDERLINE
+} from '../../FormatConstants'
 import { MdastImportVisitor } from '../../importMarkdownToLexical'
 import { $createTextNode } from 'lexical'
 
@@ -36,6 +46,14 @@ const StrikeThroughVisitor: MdastImportVisitor<Mdast.Delete> = {
   }
 }
 
+const HighlightVisitor: MdastImportVisitor<Mdast.Highlight> = {
+  testNode: 'highlight',
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_HIGHLIGHT)
+    actions.visitChildren(mdastNode, lexicalParent)
+  }
+}
+
 const MdCodeVisitor: MdastImportVisitor<Mdast.InlineCode> = {
   testNode: 'inlineCode',
   visitNode({ mdastNode, actions }) {
@@ -76,6 +94,9 @@ export const formattingVisitors = [
   // strikethrough
   StrikeThroughVisitor,
 
+  // highlight
+  HighlightVisitor,
+
   // superscript
   ...buildFormattingVisitors('sup', IS_SUPERSCRIPT),
   // subscript
diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
@@ -34,8 +34,10 @@ import * as Mdast from 'mdast'
 
 import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough'
 import { gfmStrikethroughFromMarkdown, gfmStrikethroughToMarkdown } from 'mdast-util-gfm-strikethrough'
+import { highlightMarkFromMarkdown, highlightMarkToMarkdown } from 'mdast-util-highlight-mark'
 
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from 'mdast-util-mdx-jsx'
+import { highlightMark } from 'micromark-extension-highlight-mark'
 import { mdxJsx } from 'micromark-extension-mdx-jsx'
 import { mdxMd } from 'micromark-extension-mdx-md'
 import React from 'react'
@@ -916,9 +918,9 @@ export const corePlugin = realmPlugin<{
       [placeholder$]: params?.placeholder,
       [readOnly$]: params?.readOnly,
       [translation$]: params?.translation,
-      [addMdastExtension$]: gfmStrikethroughFromMarkdown(),
-      [addSyntaxExtension$]: gfmStrikethrough(),
-      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()],
+      [addMdastExtension$]: [gfmStrikethroughFromMarkdown(), highlightMarkFromMarkdown],
+      [addSyntaxExtension$]: [gfmStrikethrough(), highlightMark()],
+      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown(), highlightMarkToMarkdown],
       [lexicalTheme$]: params?.lexicalTheme ?? lexicalTheme
     })
 
diff --git a/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx b/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx
@@ -2,7 +2,7 @@ import { applyFormat$, currentFormat$, iconComponentFor$, useTranslation } from
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 import React from 'react'
 import { FORMAT, IS_BOLD, IS_ITALIC, IS_STRIKETHROUGH, IS_SUBSCRIPT, IS_SUPERSCRIPT, IS_UNDERLINE } from '../../../FormatConstants'
-import { ToggleSingleGroupWithItem } from '.././primitives/toolbar'
+import { ToggleSingleGroupWithItem } from '../primitives/toolbar'
 import { TextFormatType } from 'lexical'
 import styles from '../../../styles/ui.module.css'
 import { IconKey } from '../../../defaultSvgIcons'
diff --git a/src/plugins/toolbar/components/HighlightToggle.tsx b/src/plugins/toolbar/components/HighlightToggle.tsx
diff --git a/src/plugins/toolbar/components/KitchenSinkToolbar.tsx b/src/plugins/toolbar/components/KitchenSinkToolbar.tsx
