feat: add rtf functionality

THIRD-PARTY-NOTICES

@@ -13335,4 +13335,4 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -----------
 
 This file was generated with the generate-license-file npm package!
-https://www.npmjs.com/package/generate-license-file
+https://www.npmjs.com/package/generate-license-file

packages/visual-editor/src/components/atoms/maybeRTF.tsx

@@ -15,7 +15,7 @@ export const MaybeRTF = ({
   const background = useBackground();
 
   if (!data) {
-    return undefined;
+    return <></>;
   }
 
   if (typeof data === "string") {
@@ -41,4 +41,6 @@ export const MaybeRTF = ({
       return <LexicalRichText serializedAST={JSON.stringify(data.json)} />;
     }
   }
+
+  return <></>;
 };

packages/visual-editor/src/components/pageSections/PromoSection.tsx

@@ -19,12 +19,12 @@ import {
   resolveYextStructField,
   ComponentFields,
   EntityField,
-  resolveTranslatableString,
-  resolveTranslatableRichText,
   msg,
   pt,
   HeadingLevel,
   ThemeOptions,
+  resolveTranslatableString,
+  resolveTranslatableRichText,
 } from "@yext/visual-editor";
 import { AnalyticsScopeProvider } from "@yext/pages-components";
 

packages/visual-editor/src/editor/TranslatableRichTextField.tsx

@@ -1,7 +1,7 @@
-import { TranslatableRichText } from "../types/types.ts";
+import { TranslatableRichText, RichText } from "../types/types.ts";
 import { MsgString, pt } from "../utils/i18nPlatform.ts";
 import { CustomField, FieldLabel } from "@measured/puck";
-import { getDisplayValue } from "../utils/resolveTranslatableString.tsx";
+import { resolveTranslatableRichText } from "../utils/resolveTranslatableString.tsx";
 import React from "react";
 import {
   TARGET_ORIGINS,
@@ -22,51 +22,80 @@ export function TranslatableRichTextField<
     render: ({ onChange, value }) => {
       const { i18n } = useTranslation();
       const locale = i18n.language;
-      const resolvedValue = getDisplayValue(value, locale);
-      const fieldLabel = (label && pt(label)) + ` (${locale})`;
+      const resolvedValue = resolveTranslatableRichText(value, locale);
+      const fieldLabel = label ? `${pt(label)} (${locale})` : "";
+
+      const [pendingMessageId, setPendingMessageId] = React.useState<
+        string | undefined
+      >();
 
       const { sendToParent: openConstantValueEditor } = useSendMessageToParent(
         "constantValueEditorOpened",
         TARGET_ORIGINS
       );
 
-      const [pendingMessageId, setPendingMessageId] = React.useState<
-        string | undefined
-      >();
       useReceiveMessage(
         "constantValueEditorClosed",
         TARGET_ORIGINS,
         (_, payload) => {
           if (pendingMessageId && pendingMessageId === payload?.id) {
-            handleNewValue(payload.value);
+            // Handle the new Storm payload structure with locale, rtfJson, and rtfHtml
+            if (payload.locale && payload.rtfJson) {
+              handleNewValue(payload.rtfJson, payload.locale, payload.rtfHtml);
+            } else {
+              // Fallback for backward compatibility
+              handleNewValue(payload.value || "", locale);
+            }
           }
         }
       );
 
       const handleClick = () => {
         const messageId = `RichText-${Date.now()}`;
         setPendingMessageId(messageId);
+        const valueForCurrentLocale =
+          typeof value === "object" && value !== null && !Array.isArray(value)
+            ? (value as Record<string, any>)[locale]
+            : undefined;
+
+        const initialValue = React.isValidElement(resolvedValue)
+          ? valueForCurrentLocale?.json
+          : valueForCurrentLocale;
+
         openConstantValueEditor({
           payload: {
             type: "RichText",
-            value: resolvedValue,
+            value: initialValue,
             id: messageId,
             fieldName: fieldLabel,
+            locale: locale,
           },
         });
 
-        // localDev
+        // for local development testing
         if (
           window.location.href.includes("http://localhost:5173/dev-location")
         ) {
-          handleNewValue(prompt("Enter text:") ?? "");
+          const userInput = prompt("Enter Rich Text (HTML):");
+          handleNewValue("", locale, userInput ?? "");
         }
       };
 
-      const handleNewValue = (newValue: string) => {
+      const handleNewValue = (
+        newValue: string,
+        targetLocale?: string,
+        rtfHtml?: string
+      ) => {
+        const localeToUpdate = targetLocale || locale;
+
+        // Create a RichText object if we have both JSON and HTML
+        const richTextValue = rtfHtml
+          ? ({ json: newValue, html: rtfHtml } as RichText)
+          : newValue;
+
         onChange({
           ...(typeof value === "object" && !Array.isArray(value) ? value : {}),
-          [locale]: newValue,
+          [localeToUpdate]: richTextValue,
           hasLocalizedValue: "true",
         } as TranslatableRichText as T);
       };

packages/visual-editor/src/editor/TranslatableStringField.tsx

@@ -1,7 +1,7 @@
 import { TranslatableString } from "../types/types.ts";
 import { MsgString, pt } from "../utils/i18nPlatform.ts";
 import { AutoField, CustomField, FieldLabel } from "@measured/puck";
-import { getDisplayValue } from "../utils/resolveTranslatableString.tsx";
+import { resolveTranslatableString } from "../utils/resolveTranslatableString.tsx";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
@@ -18,10 +18,12 @@ export function TranslatableStringField<
     render: ({ onChange, value }) => {
       const { i18n } = useTranslation();
       const locale = i18n.language;
+      const resolvedValue = resolveTranslatableString(value, locale);
+
       const autoField = (
         <AutoField
           field={{ type: fieldType ?? "text" }}
-          value={getDisplayValue(value, locale)}
+          value={resolvedValue}
           onChange={(val) => {
             return onChange({
               ...(typeof value === "object" && !Array.isArray(value)
@@ -39,7 +41,7 @@ export function TranslatableStringField<
       }
 
       return (
-        <FieldLabel label={pt(label) + ` (${locale})`}>{autoField}</FieldLabel>
+        <FieldLabel label={`${pt(label)} (${locale})`}>{autoField}</FieldLabel>
       );
     },
   };

packages/visual-editor/src/editor/YextStructFieldSelector.tsx

@@ -169,7 +169,10 @@ const SubfieldsInput = ({
                   constantValueEnabled={value?.constantValueOverride?.[field]}
                   toggleConstantValueEnabled={toggleConstantValueEnabled}
                   label={label}
-                  showLocale={type === "type.string" && !disallowTranslation}
+                  showLocale={
+                    (type === "type.string" || type === "type.rich_text_v2") &&
+                    !disallowTranslation
+                  }
                 />
               </div>
               {value?.constantValueOverride?.[field] && (

packages/visual-editor/src/internal/puck/Subfields.ts

@@ -30,7 +30,7 @@ const PROMO_SECTION_SUBFIELD: SubFieldProps = [
   { field: "title", type: "type.string", label: msg("fields.title", "Title") },
   {
     field: "description",
-    type: "type.string",
+    type: "type.rich_text_v2",
     label: msg("fields.description", "Description"),
   },
   { field: "cta", type: "type.cta", label: msg("fields.cta", "CTA") },

packages/visual-editor/src/utils/resolveTranslatableString.tsx

@@ -34,33 +34,48 @@ export const resolveTranslatableString = (
 };
 
 /**
- * Converts a type TranslatableRichText to a type that can be viewed on the page
+ * Converts a type TranslatableRichText to string or RTF Element
  * @param translatableRichText
  * @param locale
  */
 export const resolveTranslatableRichText = (
   translatableRichText?: TranslatableRichText,
   locale: string = "en"
 ): string | React.ReactElement => {
-  if (!translatableRichText) return "";
+  try {
+    if (!translatableRichText) return "";
+
+    if (
+      typeof translatableRichText === "string" ||
+      isRichText(translatableRichText)
+    ) {
+      return toStringOrElement(translatableRichText);
+    }
 
-  if (
-    typeof translatableRichText === "string" ||
-    isRichText(translatableRichText)
-  ) {
-    return toStringOrElement(translatableRichText);
-  }
+    if (typeof translatableRichText === "object") {
+      const localizedValue = translatableRichText[locale];
+      if (localizedValue) {
+        return toStringOrElement(localizedValue);
+      }
+    }
 
-  const localizedValue = translatableRichText[locale];
-  if (localizedValue) {
-    return toStringOrElement(localizedValue);
+    return "";
+  } catch (error) {
+    console.warn("Error in resolveTranslatableRichText:", error);
+    return "";
   }
-
-  return "";
 };
 
+function isRichText(value: unknown): value is RichText {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    ("html" in value || "json" in value)
+  );
+}
+
 /**
- * Takes a TranslatableString and a locale and returns the value to be displayed in the editor input
+ * Takes a TranslatableString and a locale and returns the value as a string
  * @param translatableString a TranslatableString
  * @param locale "en" or other locale value
  * @return string to be displayed in the editor input
@@ -75,6 +90,7 @@ export function getDisplayValue(
   if (!locale) {
     locale = "en";
   }
+
   if (typeof translatableString === "string") {
     return translatableString;
   }
@@ -100,14 +116,6 @@ function richTextToString(rtf: RichText): string {
   return rtf.html || rtf.json || "";
 }
 
-function isRichText(value: unknown): value is RichText {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    ("html" in value || "json" in value)
-  );
-}
-
 /**
  * Converts a "string | RichText" type to "string | React.ReactElement" which can be viewed on the page
  * @param value
@@ -118,5 +126,12 @@ function toStringOrElement(
   if (isRichText(value)) {
     return <MaybeRTF data={value} />;
   }
-  return value ?? "";
+
+  // Ensure we only return strings
+  if (typeof value === "string") {
+    return value;
+  }
+
+  // If value is anything else (object, number, etc.), return empty string
+  return "";
 }