@atelier-disko/payload-lexical-react-renderer
Version:
A react component for rendering the lexical editor state to jsx
2 lines (1 loc) • 3.61 kB
JavaScript
(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a["payload-lexical-react-renderer"]={},a.jsx,a.React))})(this,function(a,l,f){"use strict";function u({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 h={heading:t=>f.createElement(t.tag,{style:u(t)},t.children),list:t=>f.createElement(t.tag,{style:u(t)},t.children),listItem:t=>l.jsx("li",{style:u(t),children:t.children}),paragraph:t=>l.jsx("p",{style:u(t),children:t.children}),link:t=>l.jsx("a",{href:t.fields.url,target:t.fields.newTab?"_blank":"_self",style:u(t),children:t.children}),autolink:t=>l.jsx("a",{href:t.fields.url,target:t.fields.newTab?"_blank":"_self",style:u(t),children:t.children}),quote:t=>l.jsx("blockquote",{style:u(t),children:t.children}),horizontalRule:()=>l.jsx("hr",{}),linebreak:()=>l.jsx("br",{}),tab:()=>l.jsx("br",{}),upload:t=>{var i;if((i=t.value.mimeType)!=null&&i.includes("image"))return l.jsx("img",{src:t.value.url,alt:t.value.alt})}},o=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?l.jsx("code",{children:t.text}):t.highlight?l.jsx("mark",{style:i,children:t.text}):t.subscript?l.jsx("sub",{style:i,children:t.text}):t.superscript?l.jsx("sup",{style:i,children:t.text}):Object.keys(i).length===0?l.jsx(l.Fragment,{children:t.text}):l.jsx("span",{style:i,children:t.text})};function b({content:t,elementRenderers:i=h,renderMark:c=o,blockRenderers:y={}}){const p=f.useCallback((r,e)=>{if(!i)throw new Error("'elementRenderers' prop not provided.");if(r.type==="link"&&r.fields)return i.link({...r,children:e});if(r.type==="autolink"&&r.fields)return i.autolink({...r,children:e});if(r.type==="heading")return i.heading({...r,children:e});if(r.type==="paragraph")return i.paragraph({...r,children:e});if(r.type==="list")return i.list({...r,children:e});if(r.type==="listitem")return i.listItem({...r,children:e});if(r.type==="quote")return i.quote({...r,children:e});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]),n=f.useCallback(r=>{if(!c)throw new Error("'renderMark' prop not provided.");return r.format?c({text:r.text,bold:(r.format&1)>0,italic:(r.format&2)>0,underline:(r.format&8)>0,strikethrough:(r.format&4)>0,code:(r.format&16)>0,subscript:(r.format&32)>0,superscript:(r.format&64)>0,highlight:(r.format&128)>0}):c({text:r.text})},[c]),I=f.useCallback(r=>r.map((e,s)=>{if(e.type==="text")return l.jsx(f.Fragment,{children:n(e)},s);if(e.type==="block"){const g=y[e.fields.blockType];if(typeof g!="function")throw new Error(`Missing block renderer for block type '${e.fields.blockType}'`);return l.jsx(f.Fragment,{children:g(e)},s)}return e.type==="linebreak"||e.type==="tab"||e.type==="upload"||e.type==="horizontalrule"?l.jsx(f.Fragment,{children:p(e)},s):l.jsx(f.Fragment,{children:p(e,I(e.children||[]))},s)}),[p,n,y]);return l.jsx(l.Fragment,{children:I(t.root.children)})}a.PayloadLexicalReactRenderer=b,a.defaultElementRenderers=h,a.defaultRenderMark=o,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});