Merge pull request #5415 from BookStackApp/more_lexical_fixes

Further Lexical Fixes

Author: ssddanbrown

lang/en/editor.php

@@ -13,6 +13,7 @@
     'cancel' => 'Cancel',
     'save' => 'Save',
     'close' => 'Close',
+    'apply' => 'Apply',
     'undo' => 'Undo',
     'redo' => 'Redo',
     'left' => 'Left',
@@ -147,6 +148,7 @@
     'url' => 'URL',
     'text_to_display' => 'Text to display',
     'title' => 'Title',
+    'browse_links' => 'Browse links',
     'open_link' => 'Open link',
     'open_link_in' => 'Open link in...',
     'open_link_current' => 'Current window',

resources/icons/editor/color-display.svg

@@ -8,7 +8,6 @@
 
 import type {
   BaseSelection,
-  ElementFormatType,
   LexicalCommand,
   LexicalNode,
   TextFormatType,
@@ -91,8 +90,6 @@ export const OUTDENT_CONTENT_COMMAND: LexicalCommand<void> = createCommand(
 );
 export const DROP_COMMAND: LexicalCommand<DragEvent> =
   createCommand('DROP_COMMAND');
-export const FORMAT_ELEMENT_COMMAND: LexicalCommand<ElementFormatType> =
-  createCommand('FORMAT_ELEMENT_COMMAND');
 export const DRAGSTART_COMMAND: LexicalCommand<DragEvent> =
   createCommand('DRAGSTART_COMMAND');
 export const DRAGOVER_COMMAND: LexicalCommand<DragEvent> =

resources/icons/editor/color-select.svg

@@ -6,7 +6,6 @@
  *
  */
 
-import type {ElementFormatType} from './nodes/LexicalElementNode';
 import type {
   TextDetailType,
   TextFormatType,
@@ -111,27 +110,6 @@ export const DETAIL_TYPE_TO_DETAIL: Record<TextDetailType | string, number> = {
   unmergeable: IS_UNMERGEABLE,
 };
 
-export const ELEMENT_TYPE_TO_FORMAT: Record<
-  Exclude<ElementFormatType, ''>,
-  number
-> = {
-  center: IS_ALIGN_CENTER,
-  end: IS_ALIGN_END,
-  justify: IS_ALIGN_JUSTIFY,
-  left: IS_ALIGN_LEFT,
-  right: IS_ALIGN_RIGHT,
-  start: IS_ALIGN_START,
-};
-
-export const ELEMENT_FORMAT_TO_TYPE: Record<number, ElementFormatType> = {
-  [IS_ALIGN_CENTER]: 'center',
-  [IS_ALIGN_END]: 'end',
-  [IS_ALIGN_JUSTIFY]: 'justify',
-  [IS_ALIGN_LEFT]: 'left',
-  [IS_ALIGN_RIGHT]: 'right',
-  [IS_ALIGN_START]: 'start',
-};
-
 export const TEXT_MODE_TO_TYPE: Record<TextModeType, 0 | 1 | 2> = {
   normal: IS_NORMAL,
   segmented: IS_SEGMENTED,

resources/js/wysiwyg/lexical/core/LexicalCommands.ts

@@ -146,6 +146,12 @@ type NodeName = string;
  * Output for a DOM conversion.
  * Node can be set to 'ignore' to ignore the conversion and handling of the DOMNode
  * including all its children.
+ *
+ * You can specify a function to run for each converted child (forChild) or on all
+ * the child nodes after the conversion is complete (after).
+ * The key difference here is that forChild runs for every deeply nested child node
+ * of the current node, whereas after will run only once after the
+ * transformation of the node and all its children is complete.
  */
 export type DOMConversionOutput = {
   after?: (childLexicalNodes: Array<LexicalNode>) => Array<LexicalNode>;
@@ -1165,6 +1171,16 @@ export class LexicalNode {
   markDirty(): void {
     this.getWritable();
   }
+
+  /**
+   * Insert the DOM of this node into that of the parent.
+   * Allows this node to implement custom DOM attachment logic.
+   * Boolean result indicates if the insertion was handled by the function.
+   * A true return value prevents default insertion logic from taking place.
+   */
+  insertDOMIntoParent(nodeDOM: HTMLElement, parentDOM: HTMLElement): boolean {
+    return false;
+  }
 }
 
 function errorOnTypeKlassMismatch(

resources/js/wysiwyg/lexical/core/LexicalConstants.ts

@@ -171,16 +171,21 @@ function $createNode(
   }
 
   if (parentDOM !== null) {
-    if (insertDOM != null) {
-      parentDOM.insertBefore(dom, insertDOM);
-    } else {
-      // @ts-expect-error: internal field
-      const possibleLineBreak = parentDOM.__lexicalLineBreak;
 
-      if (possibleLineBreak != null) {
-        parentDOM.insertBefore(dom, possibleLineBreak);
+    const inserted = node?.insertDOMIntoParent(dom, parentDOM);
+
+    if (!inserted) {
+      if (insertDOM != null) {
+        parentDOM.insertBefore(dom, insertDOM);
       } else {
-        parentDOM.appendChild(dom);
+        // @ts-expect-error: internal field
+        const possibleLineBreak = parentDOM.__lexicalLineBreak;
+
+        if (possibleLineBreak != null) {
+          parentDOM.insertBefore(dom, possibleLineBreak);
+        } else {
+          parentDOM.appendChild(dom);
+        }
       }
     }
   }

resources/js/wysiwyg/lexical/core/LexicalNode.ts

@@ -37,8 +37,6 @@ import {QuoteNode} from "@lexical/rich-text/LexicalQuoteNode";
 import {DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
 import {EditorUiContext} from "../../../../ui/framework/core";
 import {EditorUIManager} from "../../../../ui/framework/manager";
-import {turtle} from "@codemirror/legacy-modes/mode/turtle";
-
 
 type TestEnv = {
   readonly container: HTMLDivElement;
@@ -47,6 +45,9 @@ type TestEnv = {
   readonly innerHTML: string;
 };
 
+/**
+ * @deprecated - Consider using `createTestContext` instead within the test case.
+ */
 export function initializeUnitTest(
   runTests: (testEnv: TestEnv) => void,
   editorConfig: CreateEditorArgs = {namespace: 'test', theme: {}},
@@ -795,6 +796,30 @@ export function expectNodeShapeToMatch(editor: LexicalEditor, expected: nodeShap
   expect(shape.children).toMatchObject(expected);
 }
 
+/**
+ * Expect a given prop within the JSON editor state structure to be the given value.
+ * Uses dot notation for the provided `propPath`. Example:
+ * 0.5.cat => First child, Sixth child, cat property
+ */
+export function expectEditorStateJSONPropToEqual(editor: LexicalEditor, propPath: string, expected: any) {
+  let currentItem: any = editor.getEditorState().toJSON().root;
+  let currentPath = [];
+  const pathParts = propPath.split('.');
+
+  for (const part of pathParts) {
+    currentPath.push(part);
+    const childAccess = Number.isInteger(Number(part)) && Array.isArray(currentItem.children);
+    const target = childAccess ? currentItem.children : currentItem;
+
+    if (typeof target[part] === 'undefined') {
+      throw new Error(`Could not resolve editor state at path ${currentPath.join('.')}`)
+    }
+    currentItem = target[part];
+  }
+
+  expect(currentItem).toBe(expected);
+}
+
 function formatHtml(s: string): string {
   return s.replace(/>\s+</g, '><').replace(/\s*\n\s*/g, ' ').trim();
 }

resources/js/wysiwyg/lexical/core/LexicalReconciler.ts

@@ -49,15 +49,12 @@ export type {
 } from './LexicalNode';
 export type {
   BaseSelection,
-  ElementPointType as ElementPoint,
   NodeSelection,
   Point,
   PointType,
   RangeSelection,
-  TextPointType as TextPoint,
 } from './LexicalSelection';
 export type {
-  ElementFormatType,
   SerializedElementNode,
 } from './nodes/LexicalElementNode';
 export type {SerializedRootNode} from './nodes/LexicalRootNode';
@@ -87,7 +84,6 @@ export {
   DRAGSTART_COMMAND,
   DROP_COMMAND,
   FOCUS_COMMAND,
-  FORMAT_ELEMENT_COMMAND,
   FORMAT_TEXT_COMMAND,
   INDENT_CONTENT_COMMAND,
   INSERT_LINE_BREAK_COMMAND,

resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts

@@ -46,15 +46,6 @@ export type SerializedElementNode<
   SerializedLexicalNode
 >;
 
-export type ElementFormatType =
-  | 'left'
-  | 'start'
-  | 'center'
-  | 'right'
-  | 'end'
-  | 'justify'
-  | '';
-
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export interface ElementNode {
   getTopLevelElement(): ElementNode | null;