Add highlight TextFormatType (#3583)

facebook · Jan 31, 2023 · 77d7730 · 77d7730
1 parent 6b5fc8e
commit 77d7730
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/packages/lexical/src/LexicalConstants.ts b/packages/lexical/src/LexicalConstants.ts
@@ -38,6 +38,7 @@ export const IS_UNDERLINE = 1 << 3;
 export const IS_CODE = 1 << 4;
 export const IS_SUBSCRIPT = 1 << 5;
 export const IS_SUPERSCRIPT = 1 << 6;
+export const IS_HIGHLIGHT = 1 << 7;
 
 export const IS_ALL_FORMATTING =
   IS_BOLD |
@@ -89,6 +90,7 @@ export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']');
 export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
   bold: IS_BOLD,
   code: IS_CODE,
+  highlight: IS_HIGHLIGHT,
   italic: IS_ITALIC,
   strikethrough: IS_STRIKETHROUGH,
   subscript: IS_SUBSCRIPT,

diff --git a/packages/lexical/src/nodes/LexicalTextNode.ts b/packages/lexical/src/nodes/LexicalTextNode.ts
@@ -34,6 +34,7 @@ import {
   IS_BOLD,
   IS_CODE,
   IS_DIRECTIONLESS,
+  IS_HIGHLIGHT,
   IS_ITALIC,
   IS_SEGMENTED,
   IS_STRIKETHROUGH,
@@ -83,6 +84,7 @@ export type TextFormatType =
   | 'underline'
   | 'strikethrough'
   | 'italic'
+  | 'highlight'
   | 'code'
   | 'subscript'
   | 'superscript';
@@ -97,6 +99,9 @@ function getElementOuterTag(node: TextNode, format: number): string | null {
   if (format & IS_CODE) {
     return 'code';
   }
+  if (format & IS_HIGHLIGHT) {
+    return 'mark';
+  }
   if (format & IS_SUBSCRIPT) {
     return 'sub';
   }

diff --git a/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx b/packages/lexical/src/nodes/__tests__/unit/LexicalTextNode.test.tsx
@@ -31,6 +31,7 @@ import {
 import {
   IS_BOLD,
   IS_CODE,
+  IS_HIGHLIGHT,
   IS_ITALIC,
   IS_STRIKETHROUGH,
   IS_UNDERLINE,
@@ -47,6 +48,7 @@ const editorConfig = Object.freeze({
     text: {
       bold: 'my-bold-class',
       code: 'my-code-class',
+      highlight: 'my-highlight-class',
       italic: 'my-italic-class',
       strikethrough: 'my-strikethrough-class',
       underline: 'my-underline-class',
@@ -224,6 +226,12 @@ describe('LexicalTextNode tests', () => {
       (node) => node.hasFormat('code'),
       (node) => node.toggleFormat('code'),
     ],
+    [
+      'highlight',
+      IS_HIGHLIGHT,
+      (node) => node.hasFormat('highlight'),
+      (node) => node.toggleFormat('highlight'),
+    ],
   ])(
     '%s flag',
     (formatFlag: TextFormatType, stateFormat, flagPredicate, flagToggle) => {
@@ -568,6 +576,12 @@ describe('LexicalTextNode tests', () => {
         'My text node',
         '<span class="my-strikethrough-class">My text node</span>',
       ],
+      [
+        'highlight',
+        IS_HIGHLIGHT,
+        'My text node',
+        '<mark><span class="my-highlight-class">My text node</span></mark>',
+      ],
       [
         'italic',
         IS_ITALIC,
@@ -600,12 +614,29 @@ describe('LexicalTextNode tests', () => {
         '<code><span class="my-underline-strikethrough-class my-code-class">' +
           'My text node</span></code>',
       ],
+      [
+        'highlight + italic',
+        IS_HIGHLIGHT | IS_ITALIC,
+        'My text node',
+        '<mark><em class="my-highlight-class my-italic-class">My text node</em></mark>',
+      ],
       [
         'code + underline + strikethrough + bold + italic',
         IS_CODE | IS_UNDERLINE | IS_STRIKETHROUGH | IS_BOLD | IS_ITALIC,
         'My text node',
         '<code><strong class="my-underline-strikethrough-class my-bold-class my-code-class my-italic-class">My text node</strong></code>',
       ],
+      [
+        'code + underline + strikethrough + bold + italic + highlight',
+        IS_CODE |
+          IS_UNDERLINE |
+          IS_STRIKETHROUGH |
+          IS_BOLD |
+          IS_ITALIC |
+          IS_HIGHLIGHT,
+        'My text node',
+        '<code><strong class="my-underline-strikethrough-class my-bold-class my-code-class my-highlight-class my-italic-class">My text node</strong></code>',
+      ],
     ])('%s text format type', async (_type, format, contents, expectedHTML) => {
       await update(() => {
         const textNode = $createTextNode(contents);