@happeouikit/content-renderer 3.2.20 → 3.2.21

package/dist/index.cjs.js

@@ -134,7 +134,7 @@
 
 `}return d}),t.subParser("makeMarkdown.paragraph",function(r,n){var a="";if(r.hasChildNodes())for(var d=r.childNodes,o=d.length,f=0;f<o;++f)a+=t.subParser("makeMarkdown.node")(d[f],n);return a=a.trim(),a}),t.subParser("makeMarkdown.pre",function(r,n){var a=r.getAttribute("prenum");return"<pre>"+n.preList[a]+"</pre>"}),t.subParser("makeMarkdown.strikethrough",function(r,n){var a="";if(r.hasChildNodes()){a+="~~";for(var d=r.childNodes,o=d.length,f=0;f<o;++f)a+=t.subParser("makeMarkdown.node")(d[f],n);a+="~~"}return a}),t.subParser("makeMarkdown.strong",function(r,n){var a="";if(r.hasChildNodes()){a+="**";for(var d=r.childNodes,o=d.length,f=0;f<o;++f)a+=t.subParser("makeMarkdown.node")(d[f],n);a+="**"}return a}),t.subParser("makeMarkdown.table",function(r,n){var a="",d=[[],[]],o=r.querySelectorAll("thead>tr>th"),f=r.querySelectorAll("tbody>tr"),c,h;for(c=0;c<o.length;++c){var A=t.subParser("makeMarkdown.tableCell")(o[c],n),_="---";if(o[c].hasAttribute("style")){var y=o[c].getAttribute("style").toLowerCase().replace(/\s/g,"");switch(y){case"text-align:left;":_=":---";break;case"text-align:right;":_="---:";break;case"text-align:center;":_=":---:";break}}d[0][c]=A.trim(),d[1][c]=_}for(c=0;c<f.length;++c){var k=d.push([])-1,l=f[c].getElementsByTagName("td");for(h=0;h<o.length;++h){var v=" ";typeof l[h]<"u"&&(v=t.subParser("makeMarkdown.tableCell")(l[h],n)),d[k].push(v)}}var S=3;for(c=0;c<d.length;++c)for(h=0;h<d[c].length;++h){var P=d[c][h].length;P>S&&(S=P)}for(c=0;c<d.length;++c){for(h=0;h<d[c].length;++h)c===1?d[c][h].slice(-1)===":"?d[c][h]=t.helper.padEnd(d[c][h].slice(-1),S-1,"-")+":":d[c][h]=t.helper.padEnd(d[c][h],S,"-"):d[c][h]=t.helper.padEnd(d[c][h],S);a+="| "+d[c].join(" | ")+` |
 `}return a.trim()}),t.subParser("makeMarkdown.tableCell",function(r,n){var a="";if(!r.hasChildNodes())return"";for(var d=r.childNodes,o=d.length,f=0;f<o;++f)a+=t.subParser("makeMarkdown.node")(d[f],n,!0);return a.trim()}),t.subParser("makeMarkdown.txt",function(r){var n=r.nodeValue;return n=n.replace(/ +/g," "),n=n.replace(/¨NBSP;/g," "),n=t.helper.unescapeHTMLEntities(n),n=n.replace(/([*_~|`])/g,"\\$1"),n=n.replace(/^(\s*)>/g,"\\$1>"),n=n.replace(/^#/gm,"\\#"),n=n.replace(/^(\s*)([-=]{3,})(\s*)$/,"$1\\$2$3"),n=n.replace(/^( {0,3}\d+)\./gm,"$1\\."),n=n.replace(/^( {0,3})([+-])/gm,"$1\\$2"),n=n.replace(/]([\s]*)\(/g,"\\]$1\\("),n=n.replace(/^ {0,3}\[([\S \t]*?)]:/gm,"\\[$1]:"),n});var O=this;e.exports?e.exports=t:O.showdown=t}).call(xe)})(Xt);var $n=Xt.exports;const ze=Vr($n),at=/@(\d*|channel|editors):\((.*?)\)/,Zt=["channel","editors"],Gn=new RegExp(at,"i"),Wn=new RegExp(at,"gi");let ie;const Dr={color:{type:"lang",regex:/\((.*?)\)\[(rgb\((?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]))\))\]/gi,replace:(e,i)=>`<span style="color:${e.match(/\[(rgb\((?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]), ?)(?:([0-9]{1,2}|1[0-9]{1,2}|2[0-4][0-9]|25[0-5]))\))\]/gi)[0].replace("[","").replace("]","")}">${i}</span>`},mention:{type:"lang",regex:Wn,replace:e=>{const i=e.match(Gn),u=i&&i.length>1&&i[1],t=i&&i.length>2&&i[2];return Zt.find(s=>s.toLowerCase()===String(u).toLowerCase())?`<a class="mention extraMention" data-user-id="${u}">@${t}</a>`:`<a class="mention" data-user-id="${u}">@${t}</a>`}},userMentioTag:{type:"lang",regex:/<user-mentio[^>]*>(.+?)<\/user-mentio>/gi,replace:e=>{const i=e.match(/<user-mentio[^>]*>(.+?)<\/user-mentio>/),u=e.match(/data-user-id=["']([^"]+)["']/),t=i&&i.length>1&&i[1];return`<a class="mention" data-user-id="${u&&u.length>1&&u[1]}">${t}</a>`}}};function Kn(){return ie||(ze.extension("color",Dr.color),ze.extension("mention",Dr.mention),ze.extension("usermentiotag",Dr.userMentioTag),ie=new ze.Converter({extensions:["color","mention","usermentiotag"]}),ie.setOption("strikethrough",!0),ie.setOption("tables",!0),ie.setOption("openLinksInNewWindow",!0),ie.setOption("disableForced4SpacesIndentedSublists",!0),ie)}const Qn=Kn(),Yn=new RegExp(at,"gi"),Xn=new RegExp(/<user-mentio[^>]*data-user-id=["']([^"]+)["'][^>]*>(?:@|(?:&#64;))(.+?)<\/user-mentio>/,"gi"),Et=(e,i,u)=>Zt.find(t=>t.toLowerCase()===String(i).toLowerCase())?`<a class="mention extraMention" data-user-id="${i}">@${u}</a>`:`<a class="mention" data-user-id="${i}">@${u}</a>`,Zn=(e="")=>e.replace(Yn,Et).replace(Xn,Et),Jn=(e="")=>zr(e,{whiteList:xn,css:{whiteList:{...zr.getDefaultCSSWhiteList(),"vertical-align":!0}},stripIgnoreTag:!0}).replace(/&nbsp;/g," ").replace(/\u2060/g,""),ei=(e="")=>{const i=/#(?:[0-9a-fA-F]{3}){1,2}|\brgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)|\brgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d*(?:\.\d+)?\s*\)/gi;return e.replace(i,u=>`${u}<span class="color-block" style="background-color: ${u};"></span>`)},ri=(e="")=>{try{return Tn(e,{target:"_blank",ignoreTags:["pre","code","script","style"],render:({tagName:i,attributes:u,content:t})=>{let s=t;if(s.length>85){const g=s.slice(0,40),m=s.slice(-40);s=`${g}[...]${m}`}const p=Object.keys(u).reduce((g,m)=>{const b=u[m];return`${g} ${m}="${b}"`});return`<${i} ${p}>${s}</${i}>`},validate:{url(i){return/^(http|ftp)s?:\/\//.test(i)}}})}catch{return e}},ti=(e="",i="html")=>{let u=st.shortToUnicode(e);return u=st.fixEmojioneBug(u),i==="markdown"?u=Qn.makeHtml(u):u=Zn(u),u=Yt(u),u=ri(u),u},ai=()=>{const e="ibmMonoOnDemand";if(!document.getElementById(e)){const i=document.createElement("style");i.id=e,i.appendChild(document.createTextNode(`@import url(${Mn});`)),document.head.appendChild(i)}},Tt=(e="")=>e.replace(/[^\u0000-\u007E]/g,""),ni=(e="")=>{const i=/<pre\b[^>]*>\s*<code\b[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/g;return e.replace(i,s=>s.replace(/<\/p>\s*<p>/g,`
-`).replace(/<p>/g,"").replace(/<\/p>/g,"")).replace(i,s=>zr(s,{whiteList:{pre:[],code:[]}}))},ii=({content:e,type:i,widgetType:u="post",createAnchors:t,useHashAutoscroll:s,hashAutoscrollTopMargin:p=0,forceDefaultLinkTarget:g,inheritBrandingStyles:m=!1,addColorBlocks:b=!1,replaceLinkDomains:D=[]})=>{const T=le.useRef(null),E=le.useRef(!1),[w,q]=le.useState([]),L=le.useCallback(()=>{var N;try{const{hash:z}=window.location;if(T.current&&z){const x=(N=T.current)==null?void 0:N.querySelector(z);x&&setTimeout(()=>{window.scrollTo({top:x.getBoundingClientRect().top-p,behavior:"smooth"}),x.classList.add("highlight"),setTimeout(()=>{x.classList.remove("highlight")},5e3)},500)}}catch{}},[p]);le.useLayoutEffect(()=>{if(!T.current||E.current)return;const N=()=>{if(!T.current||!t)return;const d=T.current.querySelectorAll("h1, h2, h3, h4, h5, h6")||[];d.length>0&&d.forEach(o=>{const{textContent:f=""}=o;(f||"").length>0&&(o.id=o.id||Tt((f||"").toLowerCase().replace(/\s/g,"-")))}),q(o=>[...o,...d])},z=()=>{if(!T.current||!g)return;const d=T.current.querySelectorAll("a")||[];if(d.length>0){const o=window.origin;d.forEach(f=>{const{href:c}=f;c.startsWith(o)?delete f.target:f.target="_blank"})}},x=()=>{T.current&&(T.current.querySelectorAll("a")||[]).forEach(d=>{const{href:o}=d;o.startsWith("mailto:")&&(d.target="_blank")})},O=()=>{if(!T.current)return;const d=T.current.querySelectorAll(kt);d.length>0&&(Er.isDefined("highlightjs")||(ai(),Er([...Un,...Bn],"highlightjs")),Er.ready("highlightjs",()=>{window.hljs.configure({languages:Fn,useBr:!0}),d.forEach(o=>{const f=o.innerText,c=document.createElement(Vn),h=Yt(f);c.textContent=h,o.innerHTML="",o.appendChild(c),window.hljs.highlightBlock(o)}),q(o=>[...o,...d])}))},r=()=>{D.length!==0&&D.forEach(({domainToReplace:d,domainToReplaceWith:o})=>{if(!T.current)return;const f=T.current.querySelectorAll("a")||[];f.length>0&&f.forEach(c=>{try{const{href:h}=c,A=new URL(h),{hostname:_}=A;if(_!==d||A.pathname==="/")return;if(o===""){const y=`${A.pathname}${A.search}${A.hash}`;c.href=y}else c.href=h.replace(d,o)}catch{}})})},n=()=>{if(!T.current)return;T.current.querySelectorAll("iframe").forEach(o=>{var f,c;if(!((c=(f=o.allow)==null?void 0:f.includes)!=null&&c.call(f,"autoplay"))){if(!o.allow){o.allow="autoplay";return}o.allow=o.allow+" autoplay"}})};s&&L(),requestAnimationFrame(()=>{N(),z(),x(),O(),r(),n()}),E.current=!0},[T,t,g,s,D,L]);const j=le.useMemo(()=>{const N=i&&typeof i=="string"?i.toLowerCase():"html";let z=N==="text"?`<p>${e}</p>`:ti(e,N);return b&&(z=ei(z)),z=ni(z),Jn(z)},[e,i,b]);return be.jsxs(be.Fragment,{children:[be.jsx(si,{className:`content-renderer ${u==="page"?"fr-view pages-text":""}`,ref:T,widgetType:u,createAnchors:t,dangerouslySetInnerHTML:{__html:j},inheritBrandingStyles:m}),w.map(N=>{let z=N.textContent||"";return N.tagName!==kt&&(z=`${window.location.href.split("#")[0]}#${N.id}`),z=Tt(z),Jt.createPortal(be.jsx(ui,{className:"content-copy-btn",children:be.jsx(ea.CopyToClipboardButton,{clipboardContent:z})}),N)})]})},ui=Ne.div`
+`).replace(/<p>/g,"").replace(/<\/p>/g,"")).replace(i,s=>zr(s,{whiteList:{pre:[],code:[]}}))},ii=({content:e,type:i,widgetType:u="post",createAnchors:t,useHashAutoscroll:s,hashAutoscrollTopMargin:p=0,forceDefaultLinkTarget:g,inheritBrandingStyles:m=!1,addColorBlocks:b=!1,replaceLinkDomains:D=[]})=>{const T=le.useRef(null),E=le.useRef(!1),[w,q]=le.useState([]),L=le.useCallback(()=>{var N;try{const{hash:z}=window.location;if(T.current&&z){const x=(N=T.current)==null?void 0:N.querySelector(z);x&&setTimeout(()=>{window.scrollTo({top:x.getBoundingClientRect().top-p,behavior:"smooth"}),x.classList.add("highlight"),setTimeout(()=>{x.classList.remove("highlight")},5e3)},500)}}catch{}},[p]);le.useLayoutEffect(()=>{if(!T.current||E.current)return;const N=()=>{if(!T.current||!t)return;const a=T.current.querySelectorAll("h1, h2, h3, h4, h5, h6")||[];a.length>0&&a.forEach(d=>{const{textContent:o=""}=d;(o||"").length>0&&(d.id=d.id||Tt((o||"").toLowerCase().replace(/\s/g,"-")))}),q(d=>[...d,...a])},z=()=>{if(!T.current||!g)return;const a=T.current.querySelectorAll("a")||[];if(a.length>0){const d=window.origin;a.forEach(o=>{const{href:f}=o;f.startsWith(d)?delete o.target:o.target="_blank"})}},x=()=>{T.current&&(T.current.querySelectorAll("a")||[]).forEach(a=>{const{href:d}=a;d.startsWith("mailto:")&&(a.target="_blank")})},O=()=>{if(!T.current)return;const a=T.current.querySelectorAll(kt);a.length>0&&(Er.isDefined("highlightjs")||(ai(),Er([...Un,...Bn],"highlightjs")),Er.ready("highlightjs",()=>{window.hljs.configure({languages:Fn,useBr:!0}),a.forEach(d=>{const o=d.innerText,f=document.createElement(Vn),c=Yt(o);f.textContent=c,d.innerHTML="",d.appendChild(f),window.hljs.highlightBlock(d)}),q(d=>[...d,...a])}))},r=()=>{D.length!==0&&D.forEach(({domainToReplace:a,domainToReplaceWith:d})=>{if(!T.current)return;const o=T.current.querySelectorAll("a")||[];o.length>0&&o.forEach(f=>{try{const{href:c}=f,h=new URL(c),{hostname:A}=h;if(A!==a||h.pathname==="/")return;if(d===""){const _=`${h.pathname}${h.search}${h.hash}`;f.href=_}else f.href=c.replace(a,d)}catch{}})})};s&&L(),requestAnimationFrame(()=>{N(),z(),x(),O(),r()}),E.current=!0},[T,t,g,s,D,L]);const j=le.useMemo(()=>{const N=i&&typeof i=="string"?i.toLowerCase():"html";let z=N==="text"?`<p>${e}</p>`:ti(e,N);return b&&(z=ei(z)),z=ni(z),Jn(z)},[e,i,b]);return be.jsxs(be.Fragment,{children:[be.jsx(si,{className:`content-renderer ${u==="page"?"fr-view pages-text":""}`,ref:T,widgetType:u,createAnchors:t,dangerouslySetInnerHTML:{__html:j},inheritBrandingStyles:m}),w.map(N=>{let z=N.textContent||"";return N.tagName!==kt&&(z=`${window.location.href.split("#")[0]}#${N.id}`),z=Tt(z),Jt.createPortal(be.jsx(ui,{className:"content-copy-btn",children:be.jsx(ea.CopyToClipboardButton,{clipboardContent:z})}),N)})]})},ui=Ne.div`
   position: relative;
   display: inline-block;
   margin-left: var(--space-xs);
@@ -222,8 +222,8 @@
     }
   .mention {
     border-radius: var(--radii-md);
-    background-color: var(--color-yellow50);
-    border: 1px solid var(--color-yellow50);
+    background-color: var(--color-warning-lighten80);
+    border: 1px solid var(--color-warning-lighten80);
     color: var(--color-primary-text-on-light);
     font-weight: 400;
 
@@ -245,11 +245,15 @@
     border-radius: var(--radius-md);
     border: 1px solid var(--color-gray100);
   }
-    
-  // NOTE - most of these table colors should have opacity so that they work well with colored backgrounds
+
+  /* Table styles */
+  // this code is duplicated:
+  // - in the happeouikit ContentRenderer (used for viewed content)
+  // - in the react-ng-bridge RichTextEditor/styles.js (used for content in editor)
+  // - in the universe-angular-app text.less (used in PagesV1)
   table {
     width: 100%;
-    margin: var(--space-md) 0;
+    margin: var(--space-md, 16px) 0;
     text-align: left;
     border-spacing: 0;
     border-collapse: separate; // doubles internal borders, but needed to allow more customization
@@ -311,10 +315,10 @@
       tr:last-child > td:last-child { border-bottom-right-radius: 6px; }
     }
     &.padded-1 > tbody > tr > td {
-      padding: var(--space-md);
+      padding: var(--space-md, 16px);
     }
     &.padded-2 > tbody > tr > td {
-      padding: var(--space-xl);
+      padding: var(--space-xl, 32px);
     }
     &.highlight-first-row > tbody > {
       tr:first-child > td {