add UnmatchedNode (#154)

- displays an invalid unmatched node to the user, usually a closing marker without a corresponding opening marker

Author: irahopkinson

packages/platform/src/editor/adaptors/editor-usj.adaptor.ts

@@ -17,13 +17,6 @@ import {
   SerializedTypedMarkNode,
   TypedMarkNode,
 } from "shared/nodes/features/TypedMarkNode";
-import {
-  NBSP,
-  getEditableCallerText,
-  parseNumberFromMarkerText,
-  removeEndingZwsp,
-  removeUndefinedProperties,
-} from "shared/nodes/scripture/usj/node.utils";
 import { BookNode, SerializedBookNode } from "shared/nodes/scripture/usj/BookNode";
 import { ChapterNode, SerializedChapterNode } from "shared/nodes/scripture/usj/ChapterNode";
 import { CharNode, SerializedCharNode } from "shared/nodes/scripture/usj/CharNode";
@@ -32,6 +25,11 @@ import {
   SerializedImmutableChapterNode,
 } from "shared/nodes/scripture/usj/ImmutableChapterNode";
 import { ImmutableNoteCallerNode } from "shared-react/nodes/scripture/usj/ImmutableNoteCallerNode";
+import {
+  ImmutableUnmatchedNode,
+  SerializedImmutableUnmatchedNode,
+  UNMATCHED_TAG_NAME,
+} from "shared/nodes/scripture/usj/ImmutableUnmatchedNode";
 import {
   ImmutableVerseNode,
   SerializedImmutableVerseNode,
@@ -52,6 +50,13 @@ import { NoteNode, SerializedNoteNode } from "shared/nodes/scripture/usj/NoteNod
 import { ParaNode, SerializedParaNode } from "shared/nodes/scripture/usj/ParaNode";
 import { SerializedUnknownNode, UnknownNode } from "shared/nodes/scripture/usj/UnknownNode";
 import { SerializedVerseNode, VerseNode } from "shared/nodes/scripture/usj/VerseNode";
+import {
+  NBSP,
+  getEditableCallerText,
+  parseNumberFromMarkerText,
+  removeEndingZwsp,
+  removeUndefinedProperties,
+} from "shared/nodes/scripture/usj/node.utils";
 import { LoggerBasic } from "shared-react/plugins/logger-basic.model";
 
 interface EditorUsjAdaptor {
@@ -222,6 +227,14 @@ function createUnknownMarker(
   });
 }
 
+function createUnmatchedMarker(node: SerializedImmutableUnmatchedNode): MarkerObject {
+  const { marker } = node;
+  return {
+    type: UNMATCHED_TAG_NAME,
+    marker,
+  };
+}
+
 /**
  * If the last added content is text then combine the new text content to it, otherwise add the new
  * text content.
@@ -395,6 +408,9 @@ function recurseNodes(
           createUnknownMarker(serializedUnknownNode, recurseNodes(serializedUnknownNode.children)),
         );
         break;
+      case ImmutableUnmatchedNode.getType():
+        markers.push(createUnmatchedMarker(node as SerializedImmutableUnmatchedNode));
+        break;
       default:
         _logger?.error(`Unexpected node type '${node.type}'!`);
     }

packages/platform/src/editor/adaptors/usj-editor.adaptor.ts

@@ -26,11 +26,6 @@ import {
   BookNode,
   SerializedBookNode,
 } from "shared/nodes/scripture/usj/BookNode";
-import {
-  SerializedImmutableChapterNode,
-  IMMUTABLE_CHAPTER_VERSION,
-  ImmutableChapterNode,
-} from "shared/nodes/scripture/usj/ImmutableChapterNode";
 import {
   SerializedChapterNode,
   CHAPTER_VERSION,
@@ -39,6 +34,33 @@ import {
   ChapterMarker,
 } from "shared/nodes/scripture/usj/ChapterNode";
 import { CHAR_VERSION, CharNode, SerializedCharNode } from "shared/nodes/scripture/usj/CharNode";
+import {
+  SerializedImmutableChapterNode,
+  IMMUTABLE_CHAPTER_VERSION,
+  ImmutableChapterNode,
+} from "shared/nodes/scripture/usj/ImmutableChapterNode";
+import {
+  IMMUTABLE_NOTE_CALLER_VERSION,
+  ImmutableNoteCallerNode,
+  OnClick,
+  SerializedImmutableNoteCallerNode,
+  immutableNoteCallerNodeName,
+} from "shared-react/nodes/scripture/usj/ImmutableNoteCallerNode";
+import {
+  IMMUTABLE_UNMATCHED_VERSION,
+  ImmutableUnmatchedNode,
+  SerializedImmutableUnmatchedNode,
+} from "shared/nodes/scripture/usj/ImmutableUnmatchedNode";
+import {
+  SerializedImmutableVerseNode,
+  IMMUTABLE_VERSE_VERSION,
+  ImmutableVerseNode,
+} from "shared/nodes/scripture/usj/ImmutableVerseNode";
+import {
+  IMPLIED_PARA_VERSION,
+  ImpliedParaNode,
+  SerializedImpliedParaNode,
+} from "shared/nodes/scripture/usj/ImpliedParaNode";
 import {
   MILESTONE_VERSION,
   MilestoneNode,
@@ -48,35 +70,18 @@ import {
   ENDING_MS_COMMENT_MARKER,
   isMilestoneCommentMarker,
 } from "shared/nodes/scripture/usj/MilestoneNode";
-import {
-  IMPLIED_PARA_VERSION,
-  ImpliedParaNode,
-  SerializedImpliedParaNode,
-} from "shared/nodes/scripture/usj/ImpliedParaNode";
-import {
-  PARA_MARKER_DEFAULT,
-  PARA_VERSION,
-  ParaNode,
-  SerializedParaNode,
-} from "shared/nodes/scripture/usj/ParaNode";
 import {
   NOTE_VERSION,
   NoteNode,
   NoteMarker,
   SerializedNoteNode,
 } from "shared/nodes/scripture/usj/NoteNode";
 import {
-  IMMUTABLE_NOTE_CALLER_VERSION,
-  ImmutableNoteCallerNode,
-  OnClick,
-  SerializedImmutableNoteCallerNode,
-  immutableNoteCallerNodeName,
-} from "shared-react/nodes/scripture/usj/ImmutableNoteCallerNode";
-import {
-  SerializedImmutableVerseNode,
-  IMMUTABLE_VERSE_VERSION,
-  ImmutableVerseNode,
-} from "shared/nodes/scripture/usj/ImmutableVerseNode";
+  PARA_MARKER_DEFAULT,
+  PARA_VERSION,
+  ParaNode,
+  SerializedParaNode,
+} from "shared/nodes/scripture/usj/ParaNode";
 import {
   SerializedUnknownNode,
   UNKNOWN_VERSION,
@@ -500,6 +505,14 @@ function createUnknown(
   });
 }
 
+function createUnmatched(marker: string): SerializedImmutableUnmatchedNode {
+  return {
+    type: ImmutableUnmatchedNode.getType(),
+    marker,
+    version: IMMUTABLE_UNMATCHED_VERSION,
+  };
+}
+
 function createMarker(marker: string, isOpening = true): SerializedMarkerNode {
   return {
     type: MarkerNode.getType(),
@@ -644,6 +657,9 @@ function recurseNodes(markers: MarkerContent[] | undefined): SerializedLexicalNo
           }
           nodes.push(createMilestone(markerContent));
           break;
+        case ImmutableUnmatchedNode.getType():
+          nodes.push(createUnmatched(markerContent.marker));
+          break;
         default:
           _logger?.warn(`Unknown type-marker '${markerContent.type}-${markerContent.marker}'!`);
           nodes.push(createUnknown(markerContent, recurseNodes(markerContent.content)));

packages/shared/nodes/scripture/usj/ImmutableUnmatchedNode.ts

@@ -0,0 +1,130 @@
+import {
+  type LexicalNode,
+  type NodeKey,
+  $applyNodeReplacement,
+  DecoratorNode,
+  SerializedLexicalNode,
+  Spread,
+  DOMConversionMap,
+  LexicalEditor,
+  DOMExportOutput,
+  isHTMLElement,
+  DOMConversionOutput,
+} from "lexical";
+import { INVALID_CLASS_NAME, ZWSP } from "./node.utils";
+
+export const UNMATCHED_TAG_NAME = "unmatched";
+export const IMMUTABLE_UNMATCHED_VERSION = 1;
+
+export type SerializedImmutableUnmatchedNode = Spread<
+  {
+    marker: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class ImmutableUnmatchedNode extends DecoratorNode<void> {
+  __marker: string;
+
+  constructor(marker: string, key?: NodeKey) {
+    super(key);
+    this.__marker = marker;
+  }
+
+  static getType(): string {
+    return "unmatched";
+  }
+
+  static clone(node: ImmutableUnmatchedNode): ImmutableUnmatchedNode {
+    const { __marker, __key } = node;
+    return new ImmutableUnmatchedNode(__marker, __key);
+  }
+
+  static importJSON(serializedNode: SerializedImmutableUnmatchedNode): ImmutableUnmatchedNode {
+    const { marker } = serializedNode;
+    const node = $createImmutableUnmatchedNode(marker);
+    return node;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      [UNMATCHED_TAG_NAME]: (node: HTMLElement) => {
+        if (!isUnmatchedElement(node)) return null;
+
+        return {
+          conversion: $convertImmutableUnmatchedElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  setMarker(marker: string): void {
+    const self = this.getWritable();
+    self.__marker = marker;
+  }
+
+  getMarker(): string {
+    const self = this.getLatest();
+    return self.__marker;
+  }
+
+  createDOM(): HTMLElement {
+    const dom = document.createElement(UNMATCHED_TAG_NAME);
+    dom.setAttribute("data-marker", this.__marker);
+    dom.classList.add(INVALID_CLASS_NAME);
+    const isClosing = this.__marker.endsWith("*");
+    dom.title = isClosing
+      ? `This closing marker has no matching opening marker!`
+      : `This opening marker has no matching closing marker!`;
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    // Returning false tells Lexical that this node does not need its
+    // DOM element replacing with a new copy from createDOM.
+    return false;
+  }
+
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const { element } = super.exportDOM(editor);
+    if (element && isHTMLElement(element)) {
+      element.setAttribute("data-marker", this.getMarker());
+      element.classList.add(INVALID_CLASS_NAME);
+    }
+
+    return { element };
+  }
+
+  decorate(): string {
+    return `\\${this.getMarker()}${ZWSP}`;
+  }
+
+  exportJSON(): SerializedImmutableUnmatchedNode {
+    return {
+      type: this.getType(),
+      marker: this.getMarker(),
+      version: IMMUTABLE_UNMATCHED_VERSION,
+    };
+  }
+}
+
+function $convertImmutableUnmatchedElement(element: HTMLElement): DOMConversionOutput {
+  const marker = element.getAttribute("data-marker") ?? "";
+  const node = $createImmutableUnmatchedNode(marker);
+  return { node };
+}
+
+export function $createImmutableUnmatchedNode(marker: string): ImmutableUnmatchedNode {
+  return $applyNodeReplacement(new ImmutableUnmatchedNode(marker));
+}
+
+function isUnmatchedElement(node: HTMLElement | null | undefined): boolean {
+  return node?.tagName === UNMATCHED_TAG_NAME;
+}
+
+export function $isImmutableUnmatchedNode(
+  node: LexicalNode | null | undefined,
+): node is ImmutableUnmatchedNode {
+  return node instanceof ImmutableUnmatchedNode;
+}

packages/shared/nodes/scripture/usj/index.ts

@@ -11,6 +11,7 @@ import { MarkerNode } from "./MarkerNode";
 import { ImpliedParaNode } from "./ImpliedParaNode";
 import { ParaNode } from "./ParaNode";
 import { UnknownNode } from "./UnknownNode";
+import { ImmutableUnmatchedNode } from "./ImmutableUnmatchedNode";
 
 const scriptureUsjNodes = [
   BookNode,
@@ -23,6 +24,7 @@ const scriptureUsjNodes = [
   MilestoneNode,
   MarkerNode,
   UnknownNode,
+  ImmutableUnmatchedNode,
   ImpliedParaNode,
   ParaNode,
   {

packages/shared/nodes/scripture/usj/node.utils.ts

@@ -36,6 +36,7 @@ export const ZWSP = "\u200B";
 
 export const CHAPTER_CLASS_NAME = "chapter";
 export const VERSE_CLASS_NAME = "verse";
+export const INVALID_CLASS_NAME = "invalid";
 export const TEXT_SPACING_CLASS_NAME = "text-spacing";
 export const FORMATTED_FONT_CLASS_NAME = "formatted-font";
 

packages/utilities/src/converters/usj/converter-test.data.ts

@@ -45,7 +45,7 @@ export const usxGen1v1 = `
       <verse style="v" number="15" sid="GEN 1:15"/>Tell the Israelites that I, the <char style="nd">Lord</char>, the God of their ancestors, the God of Abraham, Isaac, and Jacob,<verse eid="GEN 1:15" />
     </para>
     <para style="b" />
-    <para style="q2"><verse style="v" number="16" sid="GEN 1:16"/>“There is no help for him in God.”<note style="f" caller="+"><char style="fr">3:2 </char><char style="ft">The Hebrew word rendered “God” is “אֱלֹהִ֑ים” (Elohim).</char></note> <char style="qs">Selah.</char><verse eid="GEN 1:16" /></para>
+    <para style="q2"><verse style="v" number="16" sid="GEN 1:16"/>“There is no help for him in God.”<note style="f" caller="+"><char style="fr">3:2 </char><char style="ft">The Hebrew word rendered “God” is “אֱלֹהִ֑ים” (Elohim).</char></note> <unmatched style="f*" /> <char style="qs">Selah.</char><verse eid="GEN 1:16" /></para>
   <chapter eid="GEN 1" />
 </usx>
 `;
@@ -113,6 +113,8 @@ export const usjGen1v1: Usj = {
           ],
         },
         " ",
+        { type: "unmatched", marker: "f*" },
+        " ",
         { type: "char", marker: "qs", content: ["Selah."] },
       ],
     },
@@ -302,6 +304,20 @@ export const editorStateGen1v1 = {
             style: "",
             version: 1,
           },
+          {
+            type: "unmatched",
+            marker: "f*",
+            version: 1,
+          },
+          {
+            type: "text",
+            text: " ",
+            detail: 0,
+            format: 0,
+            mode: "normal",
+            style: "",
+            version: 1,
+          },
           {
             type: "char",
             marker: "qs",
@@ -677,6 +693,20 @@ export const editorStateGen1v1Editable = {
             style: "",
             version: 1,
           },
+          {
+            type: "unmatched",
+            marker: "f*",
+            version: 1,
+          },
+          {
+            type: "text",
+            text: " ",
+            detail: 0,
+            format: 0,
+            mode: "normal",
+            style: "",
+            version: 1,
+          },
           {
             type: "marker",
             marker: "qs",