fix: make LexicalRichText more accessible

packages/pages-components/CHANGELOG.md

@@ -2,39 +2,39 @@
 
 ##### Continuous Integration
 
-*  support trusted publishing ([#109](https://github.com/yext/js/pull/109)) ([8650b782](https://github.com/yext/js/commit/8650b782671dd76e87f2e39455510026ab597bd8))
+- support trusted publishing ([#109](https://github.com/yext/js/pull/109)) ([8650b782](https://github.com/yext/js/commit/8650b782671dd76e87f2e39455510026ab597bd8))
 
 ##### New Features
 
-* **pages-components:**  support cdn parameters and use cdn for aspect images ([#108](https://github.com/yext/js/pull/108)) ([7dde1c51](https://github.com/yext/js/commit/7dde1c5153657ef3e7e1dfdfa35c14e10a8cdab5))
+- **pages-components:** support cdn parameters and use cdn for aspect images ([#108](https://github.com/yext/js/pull/108)) ([7dde1c51](https://github.com/yext/js/commit/7dde1c5153657ef3e7e1dfdfa35c14e10a8cdab5))
 
 ##### Bug Fixes
 
-*  store tag correctly for publish step ([#115](https://github.com/yext/js/pull/115)) ([0622c36e](https://github.com/yext/js/commit/0622c36e77f5ce7d73e90efe4d7146a4684241d1))
-*  provide correct tag for publish ([#114](https://github.com/yext/js/pull/114)) ([f994b98a](https://github.com/yext/js/commit/f994b98a359f6df578cc0d44fbca408b6d4d4172))
-*  pass correct tag to publish step ([#113](https://github.com/yext/js/pull/113)) ([2953455a](https://github.com/yext/js/commit/2953455a83591443427c4cf8635c27386002d040))
-*  checkout main branch before publishing ([#112](https://github.com/yext/js/pull/112)) ([e10d7c12](https://github.com/yext/js/commit/e10d7c12417bc95c28f7bdcdefc0f961a92647c6))
-*  split on '@' in verifyPublish ([#111](https://github.com/yext/js/pull/111)) ([f924fc6e](https://github.com/yext/js/commit/f924fc6e50a5277ebdd502e4707b950f28eb6743))
-*  support LocationMap Mapbox in VLE iframe ([#110](https://github.com/yext/js/pull/110)) ([0c70007d](https://github.com/yext/js/commit/0c70007d6041c9bca7e8bbc26266128068c33a34))
-*  block cta links that are not strings ([#107](https://github.com/yext/js/pull/107)) ([3a03462f](https://github.com/yext/js/commit/3a03462f61823e49f236bf90b9e359665983dc08))
+- store tag correctly for publish step ([#115](https://github.com/yext/js/pull/115)) ([0622c36e](https://github.com/yext/js/commit/0622c36e77f5ce7d73e90efe4d7146a4684241d1))
+- provide correct tag for publish ([#114](https://github.com/yext/js/pull/114)) ([f994b98a](https://github.com/yext/js/commit/f994b98a359f6df578cc0d44fbca408b6d4d4172))
+- pass correct tag to publish step ([#113](https://github.com/yext/js/pull/113)) ([2953455a](https://github.com/yext/js/commit/2953455a83591443427c4cf8635c27386002d040))
+- checkout main branch before publishing ([#112](https://github.com/yext/js/pull/112)) ([e10d7c12](https://github.com/yext/js/commit/e10d7c12417bc95c28f7bdcdefc0f961a92647c6))
+- split on '@' in verifyPublish ([#111](https://github.com/yext/js/pull/111)) ([f924fc6e](https://github.com/yext/js/commit/f924fc6e50a5277ebdd502e4707b950f28eb6743))
+- support LocationMap Mapbox in VLE iframe ([#110](https://github.com/yext/js/pull/110)) ([0c70007d](https://github.com/yext/js/commit/0c70007d6041c9bca7e8bbc26266128068c33a34))
+- block cta links that are not strings ([#107](https://github.com/yext/js/pull/107)) ([3a03462f](https://github.com/yext/js/commit/3a03462f61823e49f236bf90b9e359665983dc08))
 
 ##### Other Changes
 
-*  pages-components@1.1.13 ([bfc928bf](https://github.com/yext/js/commit/bfc928bff2ffe880e6c19a48522722971a0c4e16))
-*  pages-components@1.1.13 ([6287e0be](https://github.com/yext/js/commit/6287e0bea4dc6ac7f6d16b05bed6d81baa88e239))
-*  store tag correctly for publish step ([#115](https://github.com/yext/js/pull/115))" ([7bec74d9](https://github.com/yext/js/commit/7bec74d9b4f668fe2d601bb10fbd84def11d6310))
-*  pages-components@1.1.13" ([69a9e328](https://github.com/yext/js/commit/69a9e328136e378495e2ea33bc97f68263eb7dc4))
-*  pages-components@1.1.13 ([e6e57d1a](https://github.com/yext/js/commit/e6e57d1a56670a811919e78ca40d45b28dac2005))
-*  pages-components@1.1.13" ([1d1bf855](https://github.com/yext/js/commit/1d1bf855761263ad96a5993ba8c52bf62eee90dd))
-*  pages-components@1.1.13 ([c4420bdd](https://github.com/yext/js/commit/c4420bdd470c0f45dbaaed9837f87e3e39da6511))
-*  pages-components@1.1.13" ([0369cda3](https://github.com/yext/js/commit/0369cda377095f78eaa3e7382745b71a00b15dfe))
-*  pages-components@1.1.13 ([17a6db63](https://github.com/yext/js/commit/17a6db6306ef02e8e6af4bb30022d6d848d8eec4))
-*  pages-components@1.1.13" ([797c5c27](https://github.com/yext/js/commit/797c5c275a8a2a384044fcb871a4a569e049f532))
-*  pages-components@1.1.13 ([fedd33ba](https://github.com/yext/js/commit/fedd33ba48f92bab59074550f98e4c095dc984d8))
-*  pages-components@1.1.13" ([ab3be7ce](https://github.com/yext/js/commit/ab3be7cef5c5df40074bc201a539aee4d17e2e16))
-*  pages-components@1.1.13 ([333203a7](https://github.com/yext/js/commit/333203a78d7b6deedad14f162c1ad299095ab562))
-*  pages-components@1.1.13" ([326031ec](https://github.com/yext/js/commit/326031ec7fc863735d011bfea419383b87e6e175))
-*  pages-components@1.1.13 ([721b8caf](https://github.com/yext/js/commit/721b8cafed50e61e4ac50bd03755c178a205048b))
+- pages-components@1.1.13 ([bfc928bf](https://github.com/yext/js/commit/bfc928bff2ffe880e6c19a48522722971a0c4e16))
+- pages-components@1.1.13 ([6287e0be](https://github.com/yext/js/commit/6287e0bea4dc6ac7f6d16b05bed6d81baa88e239))
+- store tag correctly for publish step ([#115](https://github.com/yext/js/pull/115))" ([7bec74d9](https://github.com/yext/js/commit/7bec74d9b4f668fe2d601bb10fbd84def11d6310))
+- pages-components@1.1.13" ([69a9e328](https://github.com/yext/js/commit/69a9e328136e378495e2ea33bc97f68263eb7dc4))
+- pages-components@1.1.13 ([e6e57d1a](https://github.com/yext/js/commit/e6e57d1a56670a811919e78ca40d45b28dac2005))
+- pages-components@1.1.13" ([1d1bf855](https://github.com/yext/js/commit/1d1bf855761263ad96a5993ba8c52bf62eee90dd))
+- pages-components@1.1.13 ([c4420bdd](https://github.com/yext/js/commit/c4420bdd470c0f45dbaaed9837f87e3e39da6511))
+- pages-components@1.1.13" ([0369cda3](https://github.com/yext/js/commit/0369cda377095f78eaa3e7382745b71a00b15dfe))
+- pages-components@1.1.13 ([17a6db63](https://github.com/yext/js/commit/17a6db6306ef02e8e6af4bb30022d6d848d8eec4))
+- pages-components@1.1.13" ([797c5c27](https://github.com/yext/js/commit/797c5c275a8a2a384044fcb871a4a569e049f532))
+- pages-components@1.1.13 ([fedd33ba](https://github.com/yext/js/commit/fedd33ba48f92bab59074550f98e4c095dc984d8))
+- pages-components@1.1.13" ([ab3be7ce](https://github.com/yext/js/commit/ab3be7cef5c5df40074bc201a539aee4d17e2e16))
+- pages-components@1.1.13 ([333203a7](https://github.com/yext/js/commit/333203a78d7b6deedad14f162c1ad299095ab562))
+- pages-components@1.1.13" ([326031ec](https://github.com/yext/js/commit/326031ec7fc863735d011bfea419383b87e6e175))
+- pages-components@1.1.13 ([721b8caf](https://github.com/yext/js/commit/721b8cafed50e61e4ac50bd03755c178a205048b))
 
 #### 1.1.12 (2025-08-22)
 

packages/pages-components/THIRD-PARTY-NOTICES

@@ -137,12 +137,12 @@ The following npm packages may be included in this product:
 
  - @lexical/code@0.12.6
  - @lexical/hashtag@0.12.6
+ - @lexical/html@0.12.6
  - @lexical/link@0.12.6
  - @lexical/list@0.12.6
  - @lexical/react@0.12.6
  - @lexical/rich-text@0.12.6
  - @lexical/table@0.12.6
- - @lexical/utils@0.12.6
  - lexical@0.12.6
 
 These packages each contain the following license:

packages/pages-components/index.d.ts

@@ -2,11 +2,5 @@ declare module "@lexical/react/LexicalComposer" {
   export type InitialConfigType = any;
   export class LexicalComposer extends React.Component<any, any> {}
 }
-declare module "@lexical/react/LexicalRichTextPlugin";
-declare module "@lexical/react/LexicalContentEditable";
-declare module "@lexical/react/LexicalErrorBoundary";
-declare module "@lexical/react/LexicalListPlugin";
-declare module "@lexical/react/LexicalLinkPlugin";
-declare module "@lexical/react/LexicalTablePlugin";
 declare module "@lexical/react/LexicalHorizontalRuleNode";
 declare module "@lexical/react/LexicalComposerContext";

packages/pages-components/package.json

@@ -93,19 +93,19 @@
     "vitest": "^3.0.5"
   },
   "dependencies": {
-    "@lexical/code": "^0.12.5",
-    "@lexical/hashtag": "^0.12.5",
-    "@lexical/link": "^0.12.5",
-    "@lexical/list": "^0.12.5",
-    "@lexical/react": "^0.12.5",
-    "@lexical/rich-text": "^0.12.5",
-    "@lexical/table": "^0.12.5",
-    "@lexical/utils": "^0.12.5",
+    "@lexical/code": "0.12.6",
+    "@lexical/hashtag": "0.12.6",
+    "@lexical/html": "0.12.6",
+    "@lexical/link": "0.12.6",
+    "@lexical/list": "0.12.6",
+    "@lexical/react": "0.12.6",
+    "@lexical/rich-text": "0.12.6",
+    "@lexical/table": "0.12.6",
     "@yext/analytics": "^1.0.0",
     "browser-or-node": "^2.1.1",
     "classnames": "^2.3.2",
     "cross-fetch": "^4.0.0",
-    "lexical": "^0.12.5",
+    "lexical": "0.12.6",
     "mdast-util-from-markdown": "1.2.0",
     "mdast-util-to-hast": "12.3.0",
     "micromark-util-chunked": "1.0.0",

packages/pages-components/src/components/richText/LexicalRichText.tsx

@@ -1,53 +1,54 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
-import {
-  CodeHighlightPlugin,
-  ImagePlugin,
-  ListMaxIndentLevelPlugin,
-} from "./plugins/index.js";
 import { LexicalRichTextProps } from "./types.js";
 import { generateConfig } from "./methods.js";
 import styles from "./lexical.module.css";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $generateHtmlFromNodes } from "@lexical/html";
 
 /**
+ * @deprecated Use the stream's .html version instead with `dangerouslySetInnerHTML`.
+ * ```jsx
+ * <div dangerouslySetInnerHTML={{ __html: c_lrt.html }} />
+ * ```
+ *
  * Renders a read-only view of a Lexical Rich Text field. Styling for the various
  * types of Rich Text element can be optionally provided. If not provided, Yext default
  * styling will be applied.
+ *
+ * Note: This component currently only supports rendering on the client side.
  */
 export function LexicalRichText({
   serializedAST,
   nodeClassNames,
 }: LexicalRichTextProps) {
+  const [html, setHtml] = useState("");
+
   return (
-    <LexicalComposer
-      initialConfig={generateConfig(serializedAST, nodeClassNames)}
-    >
-      <div className={`${styles["editor-inner"]} ${styles["no-border"]}`}>
-        <div className={styles["editor-inner"]}>
-          <RichTextPlugin
-            contentEditable={
-              <ContentEditable
-                className="editor-input"
-                ariaLabel="Lexical Rich Text"
-              />
-            }
-            ErrorBoundary={LexicalErrorBoundary}
-            placeholder={<div></div>}
-          />
-          <CodeHighlightPlugin />
-          <ListPlugin />
-          <LinkPlugin />
-          <TablePlugin />
-          <ImagePlugin />
-          <ListMaxIndentLevelPlugin maxDepth={7} />
+    <>
+      <LexicalComposer
+        initialConfig={generateConfig(serializedAST, nodeClassNames)}
+      >
+        <HtmlExportPlugin onHTML={setHtml} />
+        <div className={`${styles["editor-inner"]} ${styles["no-border"]}`}>
+          <div className={styles["editor-inner"]}>
+            <div dangerouslySetInnerHTML={{ __html: html }} />
+          </div>
         </div>
-      </div>
-    </LexicalComposer>
+      </LexicalComposer>
+    </>
   );
 }
+
+function HtmlExportPlugin({ onHTML }: { onHTML: (html: string) => void }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    editor.update(() => {
+      const html = $generateHtmlFromNodes(editor);
+      onHTML(html);
+    });
+  }, [editor, onHTML]);
+
+  return null;
+}

packages/pages-components/src/components/richText/TableCellNode.tsx

@@ -0,0 +1,58 @@
+import { TableCellNode, SerializedTableCellNode } from "@lexical/table";
+import { LexicalEditor, DOMExportOutput, $applyNodeReplacement } from "lexical";
+
+/**
+ * This class extends the default Lexical {@link TableCellNode} to remove the
+ * default styles the Node automatically applies. https://github.com/facebook/lexical/issues/5081
+ */
+export class CustomTableCellNode extends TableCellNode {
+  static getType(): string {
+    return "tablecell";
+  }
+
+  static clone(node: CustomTableCellNode) {
+    const cellNode = new CustomTableCellNode(
+      node.__headerState,
+      node.__colSpan,
+      node.__width,
+      node.__key
+    );
+    cellNode.__rowSpan = node.__rowSpan;
+    cellNode.__backgroundColor = node.__backgroundColor;
+    return cellNode;
+  }
+
+  static importJSON(serializedNode: SerializedTableCellNode): TableCellNode {
+    const colSpan = serializedNode.colSpan || 1;
+    const rowSpan = serializedNode.rowSpan || 1;
+    const cellNode = $applyNodeReplacement(
+      new CustomTableCellNode(
+        serializedNode.headerState,
+        colSpan,
+        serializedNode.width || undefined
+      )
+    ) as TableCellNode;
+    cellNode.__rowSpan = rowSpan;
+    cellNode.__backgroundColor = serializedNode.backgroundColor || null;
+    return cellNode;
+  }
+
+  exportJSON(): SerializedTableCellNode {
+    return super.exportJSON();
+  }
+
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const domExported = super.exportDOM(editor);
+    if (domExported.element) {
+      const element_ = domExported.element as HTMLElement;
+      element_.removeAttribute("style");
+      element_.style.width = this.getWidth() ? `${this.getWidth()}px` : "";
+      return {
+        ...domExported,
+        element: element_,
+      };
+    }
+
+    return domExported;
+  }
+}

packages/pages-components/src/components/richText/imageNode/ImageNode.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { EditorConfig, DecoratorNode, NodeKey } from "lexical";
+import {
+  EditorConfig,
+  DecoratorNode,
+  NodeKey,
+  DOMExportOutput,
+  LexicalEditor,
+} from "lexical";
 
 import LexicalImage from "./LexicalImage.js";
 import { SerializedImageNode } from "./types.js";
@@ -94,6 +100,35 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
     return span;
   }
 
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const span = document.createElement("span");
+    const className = editor._config.theme.image;
+    if (className) {
+      span.className = className;
+    }
+
+    const img = document.createElement("img");
+    img.src = this.__src; // Use 'this' for instance properties
+    if (this.__altText) {
+      img.alt = this.__altText;
+    }
+    if (this.__width !== "inherit" && this.__width) {
+      img.width = Number(this.__width);
+    }
+    if (this.__height !== "inherit" && this.__height) {
+      img.height = Number(this.__height);
+    }
+    if (this.__maxWidth) {
+      img.style.maxWidth = `${this.__maxWidth}px`;
+    }
+    img.loading = "lazy";
+    img.decoding = "async";
+
+    span.appendChild(img);
+
+    return { element: span };
+  }
+
   /**
    * Since this Node will only be used in a read-only context, we don't need to worry about
    * updating the DOM when its attributes change.

packages/pages-components/src/components/richText/methods.ts

@@ -1,14 +1,15 @@
 import { InitialConfigType } from "@lexical/react/LexicalComposer";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { TableNode, TableRowNode } from "@lexical/table";
 import { ListItemNode, ListNode } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { HashtagNode } from "@lexical/hashtag";
 import { EditorThemeClasses } from "lexical";
 import DefaultNodeStyling from "./DefaultStyling.js";
-import { ImageNode } from "./imageNode/index.js";
+import { ImageNode } from "./imageNode/ImageNode.js";
 import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { CustomTableCellNode } from "./TableCellNode.js";
 
 /**
  * Configuration for the Lexical Editor that powers the {@link LexicalComposer}. There is
@@ -36,7 +37,7 @@ export function generateConfig(
       CodeNode,
       CodeHighlightNode,
       TableNode,
-      TableCellNode,
+      CustomTableCellNode,
       TableRowNode,
       AutoLinkNode,
       LinkNode,