@happeouikit/content-renderer 3.5.0 → 3.5.2

package/dist/index.cjs.js

@@ -137,6 +137,7 @@
 `).replace(/<p>/g,"").replace(/<\/p>/g,"")).replace(n,s=>zr(s,{whiteList:{pre:[],code:[]}}))},vi=e=>e.replace(/<(?![a-zA-Z\/!])/g,"&lt;"),wi=(e,n,u)=>{try{let t;try{t=decodeURIComponent(n)}catch{t=n}const s=t.replace("#",""),p=e.querySelector(`[id="${s}"]`);p&&setTimeout(()=>{window.scrollTo({top:p.getBoundingClientRect().top-u,behavior:"smooth"}),p.classList.add("highlight"),setTimeout(()=>{p.classList.remove("highlight")},5e3)},500)}catch{}},yi=X.forwardRef(({content:e,type:n,widgetType:u="post",createAnchors:t,useHashAutoscroll:s,hashAutoscrollTopMargin:p=0,forceDefaultLinkTarget:g,inheritBrandingStyles:m=!1,addColorBlocks:b=!1,replaceLinkDomains:D=[],onSaveToClipboard:S,onTextSelected:E},w)=>{const A=X.useRef(null),q=X.useRef(!1),[z,N]=X.useState([]),x=X.useCallback(r=>{A.current=r,typeof w=="function"?w(r):w&&(w.current=r)},[w]),O=X.useCallback(()=>{const{hash:r}=window.location;if(A.current&&r){const i=Lt(r.substring(1));wi(A.current,`#${i}`,p)}},[p]);X.useEffect(()=>(s&&(O(),document.addEventListener("hashchange",O)),()=>{document.removeEventListener("hashchange",O)}),[s,O]),X.useEffect(()=>{if(!E||!A.current)return;const r=()=>{const a=window.getSelection();if(!a)return;const d=a.toString().trim();if(d.length===0)return;const f=a.getRangeAt(0).getBoundingClientRect(),o={x:f.x,y:f.y,width:f.width,height:f.height,top:f.top,left:f.left,bottom:f.bottom,right:f.right};E(d,o)},i=A.current;return i.addEventListener("mouseup",r),()=>{i.removeEventListener("mouseup",r)}},[E]),X.useLayoutEffect(()=>{if(!A.current||q.current)return;const r=()=>{if(!A.current||!g)return;const f=A.current.querySelectorAll("a")||[];if(f.length>0){const o=window.origin;f.forEach(h=>{const{href:T}=h;T.startsWith(o)?delete h.target:h.target="_blank"})}},i=()=>{A.current&&(A.current.querySelectorAll("a")||[]).forEach(f=>{const{href:o}=f;o.startsWith("mailto:")&&(f.target="_blank")})},a=()=>{if(!A.current)return;const f=A.current.querySelectorAll(ot);f.length>0&&(Er.isDefined("highlightjs")||(mi(),Er([...pa,...ha],"highlightjs")),Er.ready("highlightjs",()=>{window.hljs.configure({languages:ma,useBr:!0}),f.forEach(o=>{const h=o.innerText,T=document.createElement(ga),_=ta(h);T.textContent=_,o.innerHTML="",o.appendChild(T),window.hljs.highlightBlock(o)}),N(o=>[...o,...f])}))},d=()=>{D.length!==0&&D.forEach(({domainToReplace:f,domainToReplaceWith:o})=>{if(!A.current)return;const h=A.current.querySelectorAll("a")||[];h.length>0&&h.forEach(T=>{try{const{href:_}=T,v=new URL(_),{hostname:k}=v;if(k!==f||v.pathname==="/")return;if(o===""){const l=`${v.pathname}${v.search}${v.hash}`;T.href=l}else T.href=_.replace(f,o)}catch{}})})};requestAnimationFrame(()=>{r(),i(),a(),d(),s&&O()}),q.current=!0},[A,t,g,s,D,O]),X.useLayoutEffect(()=>{const r=()=>{if(!A.current||!t)return;const a=A.current.querySelectorAll("h1, h2, h3, h4, h5, h6")||[];a.length>0&&a.forEach(d=>{const{textContent:c=""}=d;(c||"").length>0&&(d.id=d.id||At((c||"").toLowerCase().replace(/\s/g,"-")))}),N(d=>[...d,...a])},i=()=>{if(!A.current)return;A.current.querySelectorAll("td, th").forEach(d=>{var f;const c=d.style.backgroundColor;if(c){const[o,h,T]=((f=c.match(/[.?\d]+/g))==null?void 0:f.map(k=>parseInt(k,10)))??[0,0,0],v=.2126*o+.7152*h+.0722*T>186?"light":"dark";d.style.colorScheme!==v&&d.style.setProperty("color-scheme",v)}else d.style.colorScheme&&d.style.removeProperty("color-scheme")})};r(),i()},[t,e]);const I=X.useMemo(()=>{const r=n&&typeof n=="string"?n.toLowerCase():"html";let i=r==="text"?`<p>${e}</p>`:gi(e,r);return b&&(i=pi(i)),i=bi(i),fi(i)},[e,n,b]);return fe.jsxs(fe.Fragment,{children:[fe.jsx(ki,{className:`content-renderer ${u==="page"?"fr-view pages-text":""}`,ref:x,widgetType:u,createAnchors:t,hashAutoscrollTopMargin:s&&p,dangerouslySetInnerHTML:{__html:I},inheritBrandingStyles:m}),z.map(r=>{let i=r.textContent?At(r.textContent):"",a=!1;if(r.tagName!==ot){a=!0;const d=Pt(r);i=`${window.location.href.split("#")[0]}#${d}`}return ua.createPortal(fe.jsx(_i,{className:"content-copy-btn",children:fe.jsx(ia.CopyToClipboardButton,{icon:a?fe.jsx(da,{}):void 0,colorScheme:"blank",clipboardCopyLabel:"Copy heading link",clipboardContent:i,onSaveToClipboard:S,hideSuccessTooltip:!!S})}),r)})]})}),_i=he.div`
   position: absolute;
   top: calc(50% - (32 / 2) * 1px);
+  right: 0;
   display: inline-block;
   margin-inline-start: var(--space-sm);
 
@@ -380,6 +381,12 @@
     max-width: 100%;
     margin: 5px;
     padding: 0;
+      
+    // Make images stand out from text similarly as they do in Froala edit mode
+    // For example customer had headings with white background color by the side of images,
+    // and the headings rendered full width white bars on top of the images
+    position: relative;
+    z-index: 1;
   }
     
   // everything-except-pages CSS