platform: PT-3799 Remove extra space before inline markers and annotations (#454)

jolierabideau · web-flow · commit 9f097801a9d2 · 2026-02-26T21:06:58.000-05:00
* Fix typo, skip adding trailing space when sibling is char or typed mark node

* Fix same typo in scribe package

* Add tests for not adding space when next sibling is char or typed mark node

* Remove uneeded editor.update() step from test cases

* Update function description, add test for preserving space-only TextNodes when next sibling is CharNode
diff --git a/libs/shared-react/src/plugins/PerfNodesItems/useUsfmMarkersForMenu.ts b/libs/shared-react/src/plugins/PerfNodesItems/useUsfmMarkersForMenu.ts
@@ -4,8 +4,8 @@ import { getMarker, GetMarkerAction, ScriptureReference } from "shared";
 
 // getMarker() takes a marker string and gets its data from a usfm markers map object that is merged with overwrites that fit the PERF editor context.
 // getMarkerAction() returns a function to generate a LexicalNode and insert it in the editor, this lexical node is a custom node made for the PERF editor
-//NOTE: You can create your own typeahead plugin by creating your own getMarker() and getMarkerAction() functions adapted to your editor needs.
-export default function useUsfmMakersForMenu({
+// NOTE: You can create your own typeahead plugin by creating your own getMarker() and getMarkerAction() functions adapted to your editor needs.
+export default function useUsfmMarkersForMenu({
   scriptureReference,
   contextMarker,
   getMarkerAction,
diff --git a/libs/shared-react/src/plugins/PerfTypeahead/index.tsx b/libs/shared-react/src/plugins/PerfTypeahead/index.tsx
@@ -1,5 +1,5 @@
 import { getUsfmMarkerAction, ScriptureReference } from "shared";
-import useUsfmMakersForMenu from "../PerfNodesItems/useUsfmMarkersForMenu";
+import useUsfmMarkersForMenu from "../PerfNodesItems/useUsfmMarkersForMenu";
 import TypeaheadPlugin from "../Typeahead/TypeaheadPlugin";
 
 export default function PerfTypeaheadPlugin({
@@ -11,7 +11,7 @@ export default function PerfTypeaheadPlugin({
   scriptureReference: ScriptureReference;
   contextMarker: string;
 }) {
-  const { markersMenuItems } = useUsfmMakersForMenu({
+  const { markersMenuItems } = useUsfmMarkersForMenu({
     scriptureReference,
     contextMarker,
     getMarkerAction: getUsfmMarkerAction,
diff --git a/libs/shared-react/src/plugins/UsfmNodesMenuPlugin.tsx b/libs/shared-react/src/plugins/UsfmNodesMenuPlugin.tsx
@@ -1,5 +1,5 @@
 import { GetMarkerAction, ScriptureReference } from "shared";
-import useUsfmMakersForMenu from "./PerfNodesItems/useUsfmMarkersForMenu";
+import useUsfmMarkersForMenu from "./PerfNodesItems/useUsfmMarkersForMenu";
 import NodesMenu from "./NodesMenu";
 
 export default function UsfmNodesMenuPlugin({
@@ -13,7 +13,7 @@ export default function UsfmNodesMenuPlugin({
   contextMarker: string | undefined;
   getMarkerAction: GetMarkerAction;
 }) {
-  const { markersMenuItems } = useUsfmMakersForMenu({
+  const { markersMenuItems } = useUsfmMarkersForMenu({
     scriptureReference,
     contextMarker,
     getMarkerAction,
diff --git a/libs/shared-react/src/plugins/usj/TextSpacingPlugin.test.tsx b/libs/shared-react/src/plugins/usj/TextSpacingPlugin.test.tsx
@@ -147,6 +147,72 @@ describe("TextSpacingPlugin", () => {
     });
   });
 
+  it("should not add trailing space when next sibling is a CharNode", async () => {
+    const { editor } = await testEnvironment(() => {
+      $getRoot().append(
+        $createParaNode().append(
+          $createTextNode("abc"),
+          $createCharNode("nd").append($createTextNode("xyz")),
+        ),
+      );
+    });
+
+    editor.getEditorState().read(() => {
+      const para = $getRoot().getFirstChild();
+      if (!$isParaNode(para)) throw new Error("Expected a ParaNode");
+      expect(para.getChildren()).toHaveLength(2);
+      const textNode = para.getChildAtIndex(0);
+      if (!$isTextNode(textNode)) throw new Error("Expected a TextNode");
+      expect(textNode.getTextContent()).toBe("abc");
+      const charNode = para.getChildAtIndex(1);
+      if (!$isCharNode(charNode)) throw new Error("Expected a CharNode");
+      expect(charNode.getTextContent()).toBe("xyz");
+    });
+  });
+
+  it("should not add trailing space when next sibling is a TypedMarkNode", async () => {
+    const { editor } = await testEnvironment(() => {
+      $getRoot().append(
+        $createParaNode().append(
+          $createTextNode("abc"),
+          $createTypedMarkNode({ testType1: ["testID1"] }).append($createTextNode("marked")),
+        ),
+      );
+    });
+
+    editor.getEditorState().read(() => {
+      const para = $getRoot().getFirstChild();
+      if (!$isParaNode(para)) throw new Error("Expected a ParaNode");
+      expect(para.getChildren()).toHaveLength(2);
+      const textNode = para.getChildAtIndex(0);
+      if (!$isTextNode(textNode)) throw new Error("Expected a TextNode");
+      expect(textNode.getTextContent()).toBe("abc");
+      const markNode = para.getChildAtIndex(1);
+      if (!$isTypedMarkNode(markNode)) throw new Error("Expected a TypedMarkNode");
+      expect(markNode.getTextContent()).toBe("marked");
+    });
+  });
+
+  it("should preserve space-only TextNode when next sibling is a CharNode", async () => {
+    const { editor } = await testEnvironment(() => {
+      $getRoot().append(
+        $createParaNode().append(
+          $createTextNode(" "),
+          $createCharNode("nd").append($createTextNode("xyz")),
+        ),
+      );
+    });
+
+    editor.getEditorState().read(() => {
+      const para = $getRoot().getFirstChild();
+      if (!$isParaNode(para)) throw new Error("Expected a ParaNode");
+      expect(para.getChildren()).toHaveLength(2);
+      const spaceNode = para.getChildAtIndex(0);
+      if (!$isTextNode(spaceNode)) throw new Error("Expected a TextNode");
+      expect(spaceNode.getTextContent()).toBe(" ");
+    });
+  });
+
   it("should add a space if typing before an initial verse in a para", async () => {
     const { editor } = await testEnvironment();
 
diff --git a/libs/shared-react/src/plugins/usj/TextSpacingPlugin.tsx b/libs/shared-react/src/plugins/usj/TextSpacingPlugin.tsx
@@ -52,6 +52,11 @@ function useTextSpacing(editor: LexicalEditor) {
  * Adds a space to the end of a TextNode if it doesn't precede a note or isn't inside a CharNode,
  * TypedMarkNode, or UnknownNode. It doesn't add a space if the text node is not editable. It
  * removes a TextNode with only a space if it is not followed by a verse node.
+ *
+ * When the next sibling is a CharNode or TypedMarkNode (inline marker or annotation), we skip
+ * both adding trailing space and the space-only cleanup below, so spacing before inline content
+ * is left unchanged.
+ *
  * @param node - TextNode that might need updating.
  */
 function $textNodeTrailingSpaceTransform(node: TextNode): void {
@@ -65,7 +70,9 @@ function $textNodeTrailingSpaceTransform(node: TextNode): void {
     (text.endsWith(" ") && text.length > 1) ||
     $isNoteNode(nextSibling) ||
     $isCharNode(parent) ||
+    $isCharNode(nextSibling) ||
     $isTypedMarkNode(parent) ||
+    $isTypedMarkNode(nextSibling) ||
     $isUnknownNode(parent)
   )
     return;
diff --git a/packages/scribe/src/editor/plugins/UsfmNodesMenuPlugin.tsx b/packages/scribe/src/editor/plugins/UsfmNodesMenuPlugin.tsx
@@ -1,5 +1,5 @@
 import { GetMarkerAction, ScriptureReference } from "shared";
-import useUsfmMakersForMenu from "@/hooks/useUsfmMarkersForMenu";
+import useUsfmMarkersForMenu from "@/hooks/useUsfmMarkersForMenu";
 import NodesMenu from "@/components/NodesMenu/NodesMenu";
 
 export default function UsfmNodesMenuPlugin({
@@ -15,7 +15,7 @@ export default function UsfmNodesMenuPlugin({
   getMarkerAction: GetMarkerAction;
   autoNumbering?: boolean;
 }) {
-  const { markersMenuItems } = useUsfmMakersForMenu({
+  const { markersMenuItems } = useUsfmMarkersForMenu({
     scriptureReference,
     contextMarker,
     getMarkerAction,
diff --git a/packages/scribe/src/hooks/useUsfmMarkersForMenu.ts b/packages/scribe/src/hooks/useUsfmMarkersForMenu.ts
@@ -4,8 +4,8 @@ import { getMarker, GetMarkerAction, ScriptureReference } from "shared";
 
 // getMarker() takes a marker string and gets its data from a usfm markers map object that is merged with overwrites that fit the PERF editor context.
 // getMarkerAction() returns a function to generate a LexicalNode and insert it in the editor, this lexical node is a custom node made for the PERF editor
-//NOTE: You can create your own typeahead plugin by creating your own getMarker() and getMarkerAction() functions adapted to your editor needs.
-export default function useUsfmMakersForMenu({
+// NOTE: You can create your own typeahead plugin by creating your own getMarker() and getMarkerAction() functions adapted to your editor needs.
+export default function useUsfmMarkersForMenu({
   scriptureReference,
   contextMarker,
   getMarkerAction,
