penpot-exporter-figma-plugin/plugin-src/translators/text/translateTextSegments.ts

import { textStyles } from '@plugin/libraries';
import { transformFills } from '@plugin/transformers/partials';
import { translateFontName } from '@plugin/translators/text/font';
import { TextSegment, translateParagraphProperties } from '@plugin/translators/text/paragraph';
import {
  translateFontStyle,
  translateHorizontalAlign,
  translateLetterSpacing,
  translateLineHeight,
  translateTextDecoration,
  translateTextTransform
} from '@plugin/translators/text/properties';

import { TextNode as PenpotTextNode, TextStyle } from '@ui/lib/types/shapes/textShape';

export const translateTextSegments = (
  node: TextNode,
  segments: TextSegment[]
): PenpotTextNode[] => {
  const partials = segments.map(segment => ({
    textNode: translateStyleTextSegment(node, segment),
    segment
  }));

  return translateParagraphProperties(node, partials);
};

export const transformTextStyle = (node: TextNode, segment: TextSegment): TextStyle => {
  if (hasTextStyle(segment)) {
    return {
      ...partialTransformTextStyle(node, segment),
      textStyleId: translateTextStyleId(segment.textStyleId)
    };
  }

  return {
    ...partialTransformTextStyle(node, segment),
    fontFamily: segment.fontName.family,
    fontSize: segment.fontSize.toString(),
    fontStyle: translateFontStyle(segment.fontName.style),
    textDecoration: translateTextDecoration(segment),
    letterSpacing: translateLetterSpacing(segment),
    lineHeight: translateLineHeight(segment),
    textTransform: translateTextTransform(segment)
  };
};

const partialTransformTextStyle = (node: TextNode, segment: TextSegment): TextStyle => {
  return {
    ...translateFontName(segment.fontName),
    textAlign: translateHorizontalAlign(node.textAlignHorizontal)
  };
};

const translateStyleTextSegment = (node: TextNode, segment: TextSegment): PenpotTextNode => {
  return {
    text: segment.characters,
    ...transformTextStyle(node, segment),
    ...transformFills(segment)
  };
};

const hasTextStyle = (segment: TextSegment): boolean => {
  return segment.textStyleId !== undefined && segment.textStyleId.length > 0;
};

const translateTextStyleId = (textStyleId: string | undefined): string | undefined => {
  if (textStyleId === undefined) return;

  if (!textStyles.has(textStyleId)) {
    textStyles.set(textStyleId, undefined);
  }

  return textStyleId;
};