BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/lexical/html/__tests__/unit/LexicalHtml.test.ts

   1 /**
   2  * Copyright (c) Meta Platforms, Inc. and affiliates.
   3  *
   4  * This source code is licensed under the MIT license found in the
   5  * LICENSE file in the root directory of this source tree.
   6  *
   7  */
   8
   9 //@ts-ignore-next-line
  10 import type {RangeSelection} from 'lexical';
  11
  12 import {createHeadlessEditor} from '@lexical/headless';
  13 import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@lexical/html';
  14 import {LinkNode} from '@lexical/link';
  15 import {ListItemNode, ListNode} from '@lexical/list';
  16 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
  17 import {
  18   $createParagraphNode,
  19   $createRangeSelection,
  20   $createTextNode,
  21   $getRoot,
  22 } from 'lexical';
  23
  24 describe('HTML', () => {
  25   type Input = Array<{
  26     name: string;
  27     html: string;
  28     initializeEditorState: () => void;
  29   }>;
  30
  31   const HTML_SERIALIZE: Input = [
  32     {
  33       html: '<p><br></p>',
  34       initializeEditorState: () => {
  35         $getRoot().append($createParagraphNode());
  36       },
  37       name: 'Empty editor state',
  38     },
  39   ];
  40   for (const {name, html, initializeEditorState} of HTML_SERIALIZE) {
  41     test(`[Lexical -> HTML]: ${name}`, () => {
  42       const editor = createHeadlessEditor({
  43         nodes: [
  44           HeadingNode,
  45           ListNode,
  46           ListItemNode,
  47           QuoteNode,
  48           LinkNode,
  49         ],
  50       });
  51
  52       editor.update(initializeEditorState, {
  53         discrete: true,
  54       });
  55
  56       expect(
  57         editor.getEditorState().read(() => $generateHtmlFromNodes(editor)),
  58       ).toBe(html);
  59     });
  60   }
  61
  62   test(`[Lexical -> HTML]: Use provided selection`, () => {
  63     const editor = createHeadlessEditor({
  64       nodes: [
  65         HeadingNode,
  66         ListNode,
  67         ListItemNode,
  68         QuoteNode,
  69         LinkNode,
  70       ],
  71     });
  72
  73     let selection: RangeSelection | null = null;
  74
  75     editor.update(
  76       () => {
  77         const root = $getRoot();
  78         const p1 = $createParagraphNode();
  79         const text1 = $createTextNode('Hello');
  80         p1.append(text1);
  81         const p2 = $createParagraphNode();
  82         const text2 = $createTextNode('World');
  83         p2.append(text2);
  84         root.append(p1).append(p2);
  85         // Root
  86         // - ParagraphNode
  87         // -- TextNode "Hello"
  88         // - ParagraphNode
  89         // -- TextNode "World"
  90         p1.select(0, text1.getTextContentSize());
  91         selection = $createRangeSelection();
  92         selection.setTextNodeRange(text2, 0, text2, text2.getTextContentSize());
  93       },
  94       {
  95         discrete: true,
  96       },
  97     );
  98
  99     let html = '';
 100
 101     editor.update(() => {
 102       html = $generateHtmlFromNodes(editor, selection);
 103     });
 104
 105     expect(html).toBe('<span style="white-space: pre-wrap;">World</span>');
 106   });
 107
 108   test(`[Lexical -> HTML]: Default selection (undefined) should serialize entire editor state`, () => {
 109     const editor = createHeadlessEditor({
 110       nodes: [
 111         HeadingNode,
 112         ListNode,
 113         ListItemNode,
 114         QuoteNode,
 115         CodeNode,
 116         LinkNode,
 117       ],
 118     });
 119
 120     editor.update(
 121       () => {
 122         const root = $getRoot();
 123         const p1 = $createParagraphNode();
 124         const text1 = $createTextNode('Hello');
 125         p1.append(text1);
 126         const p2 = $createParagraphNode();
 127         const text2 = $createTextNode('World');
 128         p2.append(text2);
 129         root.append(p1).append(p2);
 130         // Root
 131         // - ParagraphNode
 132         // -- TextNode "Hello"
 133         // - ParagraphNode
 134         // -- TextNode "World"
 135         p1.select(0, text1.getTextContentSize());
 136       },
 137       {
 138         discrete: true,
 139       },
 140     );
 141
 142     let html = '';
 143
 144     editor.update(() => {
 145       html = $generateHtmlFromNodes(editor);
 146     });
 147
 148     expect(html).toBe(
 149       '<p><span style="white-space: pre-wrap;">Hello</span></p><p><span style="white-space: pre-wrap;">World</span></p>',
 150     );
 151   });
 152
 153   test(`If alignment is set on the paragraph, don't overwrite from parent empty format`, () => {
 154     const editor = createHeadlessEditor();
 155     const parser = new DOMParser();
 156     const rightAlignedParagraphInDiv =
 157       '<div><p style="text-align: center;">Hello world!</p></div>';
 158
 159     editor.update(
 160       () => {
 161         const root = $getRoot();
 162         const dom = parser.parseFromString(
 163           rightAlignedParagraphInDiv,
 164           'text/html',
 165         );
 166         const nodes = $generateNodesFromDOM(editor, dom);
 167         root.append(...nodes);
 168       },
 169       {discrete: true},
 170     );
 171
 172     let html = '';
 173
 174     editor.update(() => {
 175       html = $generateHtmlFromNodes(editor);
 176     });
 177
 178     expect(html).toBe(
 179       '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
 180     );
 181   });
 182
 183   test(`If alignment is set on the paragraph, it should take precedence over its parent block alignment`, () => {
 184     const editor = createHeadlessEditor();
 185     const parser = new DOMParser();
 186     const rightAlignedParagraphInDiv =
 187       '<div style="text-align: right;"><p style="text-align: center;">Hello world!</p></div>';
 188
 189     editor.update(
 190       () => {
 191         const root = $getRoot();
 192         const dom = parser.parseFromString(
 193           rightAlignedParagraphInDiv,
 194           'text/html',
 195         );
 196         const nodes = $generateNodesFromDOM(editor, dom);
 197         root.append(...nodes);
 198       },
 199       {discrete: true},
 200     );
 201
 202     let html = '';
 203
 204     editor.update(() => {
 205       html = $generateHtmlFromNodes(editor);
 206     });
 207
 208     expect(html).toBe(
 209       '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
 210     );
 211   });
 212 });