payload-lexical-typography/dist/converters.mjs

PayloadCMS lexical-editor typography extension plugin

// src/converters/HTMLConverters/TextHTMLConverter.tsx
import {
  IS_BOLD,
  IS_ITALIC,
  IS_STRIKETHROUGH,
  IS_UNDERLINE,
  IS_CODE,
  IS_SUBSCRIPT,
  IS_SUPERSCRIPT
} from "@payloadcms/richtext-lexical/lexical";
import escapeHTML from "escape-html";
var TextHTMLConverter = {
  text: ({ node }) => {
    let styles = "";
    if (node.style) {
      let match = /(?:^|;)\s?color: ([^;]+)/.exec(node.style);
      if (match) {
        styles = `${styles} color: ${match[1]};`;
      }
      match = /(?:^|;)\s?font-size: ([^;]+)/.exec(node.style);
      if (match) {
        styles = `${styles} font-size: ${match[1]};`;
      }
      match = /(?:^|;)\s?letter-spacing: ([^;]+)/.exec(node.style);
      if (match) {
        styles = `${styles} letter-spacing: ${match[1]};`;
      }
      match = /(?:^|;)\s?line-height: ([^;]+)/.exec(node.style);
      if (match) {
        styles = `${styles} line-height: ${match[1]};`;
      }
      match = /(?:^|;)\s?font-family: ([^;]+)/.exec(node.style);
      if (match) {
        styles = `${styles} font-family: ${match[1]};`;
      }
    }
    const styleAttr = styles ? ` style="${styles}"` : "";
    let html = escapeHTML(node.text);
    if (!html) {
      return "";
    }
    const formatters = {
      [IS_BOLD]: (content) => `<strong>${content}</strong>`,
      [IS_ITALIC]: (content) => `<em>${content}</em>`,
      [IS_STRIKETHROUGH]: (content) => {
        return `<span style="text-decoration: line-through">${content}</span>`;
      },
      [IS_UNDERLINE]: (content) => {
        return `<span style="text-decoration: underline">${content}</span>`;
      },
      [IS_CODE]: (content) => `<code>${content}</code>`,
      [IS_SUBSCRIPT]: (content) => `<sub>${content}</sub>`,
      [IS_SUPERSCRIPT]: (content) => `<sup>${content}</sup>`
    };
    html = styles ? `<span${styleAttr}>${html}</span>` : html;
    Object.entries(formatters).forEach(([formatFlag, formatter]) => {
      if (node.format & Number(formatFlag)) {
        html = formatter(html, styleAttr);
      }
    });
    return html;
  }
};
var TextHTMLConverterAsync = {
  text: TextHTMLConverter.text
};

// src/converters/HTMLConverters/index.tsx
var TypographyHTMLConverters = { ...TextHTMLConverter };
var TypographyHTMLConvertersAsync = { ...TextHTMLConverterAsync };

// src/converters/JSXConverters/TextJSXConverter.tsx
import {
  IS_BOLD as IS_BOLD2,
  IS_ITALIC as IS_ITALIC2,
  IS_STRIKETHROUGH as IS_STRIKETHROUGH2,
  IS_UNDERLINE as IS_UNDERLINE2,
  IS_CODE as IS_CODE2,
  IS_SUBSCRIPT as IS_SUBSCRIPT2,
  IS_SUPERSCRIPT as IS_SUPERSCRIPT2
} from "@payloadcms/richtext-lexical/lexical";
import { Fragment, jsx } from "react/jsx-runtime";
var TextJSXConverter = {
  text: ({ node }) => {
    const styles = {};
    if (node.style) {
      let match = /(?:^|;)\s?color: ([^;]+)/.exec(node.style);
      if (match) styles.color = match[1];
      match = /(?:^|;)\s?font-size: ([^;]+)/.exec(node.style);
      if (match) styles.fontSize = match[1];
      match = /(?:^|;)\s?letter-spacing: ([^;]+)/.exec(node.style);
      if (match) styles.letterSpacing = match[1];
      match = /(?:^|;)\s?line-height: ([^;]+)/.exec(node.style);
      if (match) styles.lineHeight = match[1];
      match = /(?:^|;)\s?font-family: ([^;]+)/.exec(node.style);
      if (match) styles.fontFamily = match[1];
    }
    const formatters = {
      [IS_BOLD2]: (el) => /* @__PURE__ */ jsx("strong", { children: el }),
      [IS_ITALIC2]: (el) => /* @__PURE__ */ jsx("em", { children: el }),
      [IS_STRIKETHROUGH2]: (el) => /* @__PURE__ */ jsx("span", { style: { textDecoration: "line-through" }, children: el }),
      [IS_UNDERLINE2]: (el) => /* @__PURE__ */ jsx("span", { style: { textDecoration: "underline" }, children: el }),
      [IS_CODE2]: (el) => /* @__PURE__ */ jsx("code", { children: el }),
      [IS_SUBSCRIPT2]: (el) => /* @__PURE__ */ jsx("sub", { children: el }),
      [IS_SUPERSCRIPT2]: (el) => /* @__PURE__ */ jsx("sup", { children: el })
    };
    let textElement = Object.keys(styles).length > 0 ? /* @__PURE__ */ jsx("span", { style: styles, children: node.text }) : /* @__PURE__ */ jsx(Fragment, { children: node.text });
    Object.entries(formatters).forEach(([formatFlag, formatter]) => {
      if (node.format & Number(formatFlag)) {
        textElement = formatter(textElement);
      }
    });
    return textElement;
  }
};

// src/converters/JSXConverters/index.tsx
var TypographyJSXConverters = { ...TextJSXConverter };
export {
  TypographyHTMLConverters,
  TypographyJSXConverters
};
//# sourceMappingURL=converters.mjs.map