Function htmlText

packages/backend/src/html/htmlMain.ts:471–556

(node: TextNode, settings: HTMLSettings)

// For htmlText and htmlContainer, use the htmlGenerationMode to determine styling approach
const htmlText = (node: TextNode, settings: HTMLSettings): string => {
  let layoutBuilder = new HtmlTextBuilder(node, settings)
    .commonPositionStyles()
    .textTrim()
    .textAlignHorizontal()
    .textAlignVertical();

  const styledHtml = layoutBuilder.getTextSegments(node);
  previousExecutionCache.push(...styledHtml);

  const mode = settings.htmlGenerationMode || "html";

  // For styled-components mode
  if (mode === "styled-components") {
    // Build wrapper to store in cssCollection
    layoutBuilder.build();

    const wrapperComponentName =
      cssCollection[layoutBuilder.cssClassName!]?.componentName || "div";

    const content = styledHtml
      .map((style) => {
        const tag =
          style.openTypeFeatures.SUBS === true
            ? "sub"
            : style.openTypeFeatures.SUPS === true
              ? "sup"
              : "span";

        if (style.componentName) {
          return `<${style.componentName}>${style.text}</${style.componentName}>`;
        }
        return `<${tag}>${style.text}</${tag}>`;
      })
      .join("");

    return `\n<${wrapperComponentName}>${content}</${wrapperComponentName}>`;
  }

  // Standard HTML/CSS approach for HTML, React or Svelte
  let content = "";
  if (styledHtml.length === 1) {
    // For HTML and React modes, we use inline styles
    if (mode === "html" || mode === "jsx") {
      layoutBuilder.addStyles(styledHtml[0].style);
    }

    content = styledHtml[0].text;

    const additionalTag =
      styledHtml[0].openTypeFeatures.SUBS === true
        ? "sub"
        : styledHtml[0].openTypeFeatures.SUPS === true
          ? "sup"
          : "";

    if (additionalTag) {
      content = `<${additionalTag}>${content}</${additionalTag}>`;