@atelier-disko/payload-lexical-react-renderer/dist/payload-lexical-react-renderer.es.js

A react component for rendering the lexical editor state to jsx

import { jsx as u, Fragment as y } from "react/jsx-runtime";
import a from "react";
const g = 1, b = 2, I = 4, x = 8, S = 16, E = 32, T = 64, _ = 128;
function f({
  indent: t,
  format: i
}) {
  const c = {};
  return t > 0 && (c.marginLeft = `${t * 20}px`), (i === "right" || i === "center" || i === "justify") && (c.textAlign = i), c;
}
const k = {
  heading: (t) => a.createElement(
    t.tag,
    {
      style: f(t)
    },
    t.children
  ),
  list: (t) => a.createElement(
    t.tag,
    {
      style: f(t)
    },
    t.children
  ),
  listItem: (t) => /* @__PURE__ */ u("li", { style: f(t), children: t.children }),
  paragraph: (t) => /* @__PURE__ */ u("p", { style: f(t), children: t.children }),
  link: (t) => /* @__PURE__ */ u(
    "a",
    {
      href: t.fields.url,
      target: t.fields.newTab ? "_blank" : "_self",
      style: f(t),
      children: t.children
    }
  ),
  autolink: (t) => /* @__PURE__ */ u(
    "a",
    {
      href: t.fields.url,
      target: t.fields.newTab ? "_blank" : "_self",
      style: f(t),
      children: t.children
    }
  ),
  quote: (t) => /* @__PURE__ */ u("blockquote", { style: f(t), children: t.children }),
  horizontalRule: () => /* @__PURE__ */ u("hr", {}),
  linebreak: () => /* @__PURE__ */ u("br", {}),
  tab: () => /* @__PURE__ */ u("br", {}),
  upload: (t) => {
    var i;
    if ((i = t.value.mimeType) != null && i.includes("image"))
      return /* @__PURE__ */ u("img", { src: t.value.url, alt: t.value.alt });
  }
}, w = (t) => {
  const i = {};
  return t.bold && (i.fontWeight = "bold"), t.italic && (i.fontStyle = "italic"), t.underline && (i.textDecoration = "underline"), t.strikethrough && (i.textDecoration = "line-through"), t.code ? /* @__PURE__ */ u("code", { children: t.text }) : t.highlight ? /* @__PURE__ */ u("mark", { style: i, children: t.text }) : t.subscript ? /* @__PURE__ */ u("sub", { style: i, children: t.text }) : t.superscript ? /* @__PURE__ */ u("sup", { style: i, children: t.text }) : Object.keys(i).length === 0 ? /* @__PURE__ */ u(y, { children: t.text }) : /* @__PURE__ */ u("span", { style: i, children: t.text });
};
function v({
  content: t,
  elementRenderers: i = k,
  renderMark: c = w,
  blockRenderers: e = {}
}) {
  const s = a.useCallback(
    (r, l) => {
      if (!i)
        throw new Error("'elementRenderers' prop not provided.");
      if (r.type === "link" && r.fields)
        return i.link({
          ...r,
          children: l
        });
      if (r.type === "autolink" && r.fields)
        return i.autolink({
          ...r,
          children: l
        });
      if (r.type === "heading")
        return i.heading({
          ...r,
          children: l
        });
      if (r.type === "paragraph")
        return i.paragraph({
          ...r,
          children: l
        });
      if (r.type === "list")
        return i.list({
          ...r,
          children: l
        });
      if (r.type === "listitem")
        return i.listItem({
          ...r,
          children: l
        });
      if (r.type === "quote")
        return i.quote({
          ...r,
          children: l
        });
      if (r.type === "linebreak")
        return i.linebreak();
      if (r.type === "tab")
        return i.tab();
      if (r.type === "upload")
        return i.upload(r);
      if (r.type === "horizontalrule")
        return i.horizontalRule();
      if (Object.keys(i).includes(r.type))
        return i[r.type](r);
      throw new Error(`Missing element renderer for node type '${r.type}'`);
    },
    [i]
  ), h = a.useCallback(
    (r) => {
      if (!c)
        throw new Error("'renderMark' prop not provided.");
      return r.format ? c({
        text: r.text,
        bold: (r.format & g) > 0,
        italic: (r.format & b) > 0,
        underline: (r.format & x) > 0,
        strikethrough: (r.format & I) > 0,
        code: (r.format & S) > 0,
        subscript: (r.format & E) > 0,
        superscript: (r.format & T) > 0,
        highlight: (r.format & _) > 0
      }) : c({
        text: r.text
      });
    },
    [c]
  ), n = a.useCallback(
    (r) => r.map((l, p) => {
      if (l.type === "text")
        return /* @__PURE__ */ u(a.Fragment, { children: h(l) }, p);
      if (l.type === "block") {
        const o = e[l.fields.blockType];
        if (typeof o != "function")
          throw new Error(
            `Missing block renderer for block type '${l.fields.blockType}'`
          );
        return /* @__PURE__ */ u(a.Fragment, { children: o(l) }, p);
      }
      return l.type === "linebreak" || l.type === "tab" || l.type === "upload" || l.type === "horizontalrule" ? /* @__PURE__ */ u(a.Fragment, { children: s(l) }, p) : /* @__PURE__ */ u(a.Fragment, { children: s(l, n(l.children || [])) }, p);
    }),
    [s, h, e]
  );
  return /* @__PURE__ */ u(y, { children: n(t.root.children) });
}
export {
  v as PayloadLexicalReactRenderer,
  k as defaultElementRenderers,
  w as defaultRenderMark
};