textcrafter
Version:
TextCrafter: A modern, customizable rich text editor for React. Supports rich formatting, media embedding and real-time collaboration. Ideal for content creators.
2 lines (1 loc) • 28.7 kB
JavaScript
import e,{useState as t,useEffect as n,useRef as l}from"react";function a(e,t,n,l){return new(n||(n=Promise))((function(a,o){function c(e){try{i(l.next(e))}catch(e){o(e)}}function r(e){try{i(l.throw(e))}catch(e){o(e)}}function i(e){var t;e.done?a(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(c,r)}i((l=l.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const o=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 448 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M288 64c0 17.7-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32L32 352c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"})),c=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 448 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M352 64c0-17.7-14.3-32-32-32L128 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32L32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 416c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32l-192 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32z"})),r=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 448 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M448 64c0 17.7-14.3 32-32 32L192 96c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"})),i=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 448 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M448 64c0-17.7-14.3-32-32-32L32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32L32 288c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32z"})),s=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"})),m=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M24 56c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24l0 120 16 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l16 0 0-96-8 0C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432l33.2 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-88 0c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"})),d=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 640 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"})),u=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 640 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM406.6 416.4L220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3zm-290-228.5L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9z"})),g=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"})),h=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"})),p=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z"})),v=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"})),E=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 576 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7L288 480l9.4 0L512 480c17.7 0 32-14.3 32-32s-14.3-32-32-32l-124.1 0L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416l-9.4 0-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z"})),b="padding: 8px; text-align: center; border: 1px solid #ddd; min-width: 80px;",w="padding: 8px; text-align: center; border: 1px solid #ddd; min-width: 80px; background-color: #f1f1f1;font-weight: bold;",f=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 576 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M384 480l48 0c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224l-400 0c-11.4 0-21.9 6-27.6 15.9L48 357.1 48 96c0-8.8 7.2-16 16-16l117.5 0c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8L416 144c8.8 0 16 7.2 16 16l0 32 48 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l23.7 0L384 480z"})),y=({className:t,width:n=24,height:l=24})=>e.createElement("svg",{className:t,width:n,height:l,viewBox:"0 0 448 512",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"})),N=({onTableCreate:n})=>{const[l,a]=t(0),[o,c]=t(0),r=()=>{n(l+1,o+1)};return e.createElement("div",{className:"table-selector"},[...new Array(8)].map(((t,n)=>e.createElement("div",{key:`row-${n}`,className:"table-selector-row"},[...new Array(8)].map(((t,i)=>e.createElement("div",{key:`col-${i}`,className:"table-selector-cell "+(n<=l&&i<=o?"highlighted":""),onMouseEnter:()=>((e,t)=>{a(e),c(t)})(n,i),onClick:r})))))),e.createElement("div",{className:"table-selector-label"},l+1," x ",o+1))},L=({onCommand:l,toolbarClassName:a,onInsertImageFromDevice:L,onInsertImageFromURL:C})=>{const[k,x]=t({}),[M,T]=t(""),[z,H]=t(""),[B,R]=t(null),[S,I]=t(""),D=k.justifyLeft||k.justifyCenter||k.justifyRight||k.justifyFull,A=()=>{R(null),I("");const e=document.getElementById("current-selection-highlight");if(e){const t=e.parentNode;for(;e.firstChild;)null==t||t.insertBefore(e.firstChild,e);null==t||t.removeChild(e)}},U=(e,t)=>{let n;return function(...l){clearTimeout(n),n=window.setTimeout((()=>e.apply(this,l)),t)}},j=()=>{const e=window.getSelection();if(!e||0===e.rangeCount)return;let t=e.getRangeAt(0).startContainer;t.nodeType===Node.TEXT_NODE&&(t=t.parentElement);const n={},l=(e,t)=>{for(;e&&e!==document.body;){if(e.tagName===t)return!0;e=e.parentNode}return!1};n.bold=l(t,"B")||l(t,"STRONG")||"700"===window.getComputedStyle(t).fontWeight,n.italic=l(t,"I")||l(t,"EM")||"italic"===window.getComputedStyle(t).fontStyle,n.underline=l(t,"U")||window.getComputedStyle(t).textDecorationLine.includes("underline"),n.strikeThrough=l(t,"S")||l(t,"STRIKE")||window.getComputedStyle(t).textDecorationLine.includes("line-through");const a=window.getComputedStyle(t).textAlign;n.justifyLeft="left"===a,n.justifyCenter="center"===a,n.justifyRight="right"===a,n.justifyFull="justify"===a,n.insertUnorderedList=l(t,"UL"),n.insertOrderedList=l(t,"OL"),x(n)};return n((()=>{const e=U(j,200);return document.addEventListener("selectionchange",e),()=>document.removeEventListener("selectionchange",e)}),[]),e.createElement("div",{id:"toolbar",className:`toolbar ${a||"default-toolbar-class"}`,onClick:e=>e.stopPropagation()},e.createElement("div",{id:"font-group",className:"toolbar-group"},e.createElement("select",{onChange:e=>{e.preventDefault(),l("fontName",e.target.value)},role:"combobox"},e.createElement("option",{value:""},"Font Family"),e.createElement("option",{value:"Arial"},"Arial"),e.createElement("option",{value:"Courier New"},"Courier New"),e.createElement("option",{value:"Georgia"},"Georgia"),e.createElement("option",{value:"Tahoma"},"Tahoma"),e.createElement("option",{value:"Times New Roman"},"T New Roman"),e.createElement("option",{value:"Verdana"},"Verdana")),e.createElement("select",{onChange:e=>{e.preventDefault(),l("fontSize",e.target.value)}},e.createElement("option",{value:""},"Font Size"),e.createElement("option",{value:"1"},"Tiny"),e.createElement("option",{value:"2"},"Small"),e.createElement("option",{value:"3"},"Regular"),e.createElement("option",{value:"4"},"Medium"),e.createElement("option",{value:"5"},"Large"),e.createElement("option",{value:"6"},"E.Large"),e.createElement("option",{value:"7"},"Huge"))),e.createElement("div",{id:"text-formatting-group",className:"toolbar-group"},e.createElement("button",{type:"button",onClick:()=>l("bold"),style:{fontWeight:"700"},className:k.bold?"active":"","aria-label":"Bold"},"B"),e.createElement("button",{type:"button",onClick:()=>l("italic"),className:k.italic?"active":"",style:{fontStyle:"italic"},"aria-label":"Italic"},"I"),e.createElement("button",{type:"button",onClick:()=>l("underline"),className:k.underline?"active":"",style:{textDecoration:"underline"},"aria-label":"Underline"},"U"),e.createElement("button",{type:"button",onClick:()=>l("strikeThrough"),className:k.strikeThrough?"active":"",style:{textDecoration:"line-through"},"aria-label":"strikeThrough"},"abc"),e.createElement("button",{type:"button",onClick:()=>l("removeFormat"),title:"Clear Formatting"},e.createElement(E,{className:"button-icon"}))),e.createElement("div",{id:"color-group",className:"toolbar-group"},e.createElement("label",{className:"color-picker"},"A",e.createElement("input",{type:"color",onChange:e=>{e.preventDefault(),e.stopPropagation(),l("foreColor",e.target.value)},onMouseDown:e=>e.preventDefault(),title:"Text Color"})),e.createElement("label",{className:"color-picker"},"H",e.createElement("input",{type:"color",onChange:e=>{e.preventDefault(),e.stopPropagation(),l("hiliteColor",e.target.value)},onMouseDown:e=>e.preventDefault(),title:"Highlight Color"}))),e.createElement("div",{id:"alignment-group",className:"toolbar-group"},e.createElement("div",{className:"alignment-container"},e.createElement("button",{type:"button",className:D?"active":""}," ",(null==k?void 0:k.justifyLeft)?e.createElement(o,{className:"button-icon"}):(null==k?void 0:k.justifyCenter)?e.createElement(c,{className:"button-icon"}):(null==k?void 0:k.justifyRight)?e.createElement(r,{className:"button-icon"}):(null==k?void 0:k.justifyFull)?e.createElement(i,{className:"button-icon"}):e.createElement(o,{className:"button-icon"})),e.createElement("div",{className:"alignment-selector-container"},e.createElement("div",{className:"alignment-selector-show"},e.createElement("div",{className:"alignment-option-button"},e.createElement("button",{type:"button",onClick:()=>l("justifyLeft"),className:k.justifyLeft?"active":""},e.createElement(o,{className:"button-icon"})),e.createElement("button",{type:"button",onClick:()=>l("justifyCenter"),className:k.justifyCenter?"active":""},e.createElement(c,{className:"button-icon"})),e.createElement("button",{type:"button",onClick:()=>l("justifyRight"),className:k.justifyRight?"active":""},e.createElement(r,{className:"button-icon"})),e.createElement("button",{type:"button",onClick:()=>l("justifyFull"),className:k.justifyFull?"active":""},e.createElement(i,{className:"button-icon"}))))))),e.createElement("div",{id:"list-group",className:"toolbar-group"},e.createElement("button",{type:"button",onClick:()=>l("insertUnorderedList"),className:k.insertUnorderedList?"active":""},e.createElement(s,{className:"button-icon"})),e.createElement("button",{type:"button",onClick:()=>l("insertOrderedList"),className:k.insertOrderedList?"active":""},e.createElement(m,{className:"button-icon"}))),e.createElement("div",{id:"table-group",className:"toolbar-group"},e.createElement("div",{className:"table-container"},e.createElement("button",{type:"button"},e.createElement(v,{className:"button-icon"})),e.createElement("div",{className:"table-selector-container"},e.createElement("div",{className:"table-selector-show"},e.createElement(N,{onTableCreate:(e,t)=>{l("insertHTML",((e,t)=>{let n='<div style="overflow-x: auto; max-width: 100%;"><table id="editor-custom-table" style="width: 100%; border-collapse: collapse; margin: 10px 0;"><thead><tr>';for(let e=0;e<t;e++)n+=`<th style="${w}">Header ${e+1}</th>`;n+="</tr></thead><tbody>";for(let l=0;l<e-1;l++){n+="<tr>";for(let e=0;e<t;e++)n+=`<td style="${b}">Cell ${l+1}-${e+1}</td>`;n+="</tr>"}return n+="</tbody></table></div>",n})(e,t))}}),e.createElement("div",{className:"table-option-button"},e.createElement("button",{type:"button",onClick:()=>(()=>{var e;const t=document.getElementById("editor-custom-table");if(!t)return;const n=t.querySelector("tbody"),l=t.querySelector("thead");if(!n||!l)return;const a=(null===(e=l.rows[0])||void 0===e?void 0:e.cells.length)||0,o=document.createElement("tr");for(let e=0;e<a;e++){const e=document.createElement("td");e.innerHTML="New Cell",e.style.cssText=b,o.appendChild(e)}n.appendChild(o)})(),value:"addRow"},"Add Row"),e.createElement("button",{type:"button",onClick:()=>(()=>{const e=document.getElementById("editor-custom-table");e&&e.rows.length>1&&e.deleteRow(-1)})(),value:"removeRow"},"Remove Row"),e.createElement("button",{type:"button",onClick:()=>(()=>{const e=document.getElementById("editor-custom-table");if(!e)return;const t=e.querySelector("thead"),n=e.querySelector("tbody");if(t){const e=t.rows[0],n=document.createElement("th");n.textContent=`Header ${e.cells.length+1}`,n.style.cssText=w,e.appendChild(n)}if(n)for(const e of Array.from(n.rows)){const t=document.createElement("td");t.innerHTML="New Cell",t.style.cssText=b,e.appendChild(t)}})(),value:"addColumn"},"Add Column"),e.createElement("button",{type:"button",onClick:()=>(()=>{const e=document.getElementById("editor-custom-table");if(e)for(let t=0;t<e.rows.length;t++)e.rows[t].cells.length>1&&e.rows[t].deleteCell(-1)})(),value:"removeColumn"},"Remove Column"),e.createElement("button",{type:"button",onClick:()=>l("insertHorizontalRule"),value:"horizontalLine"},"Horizontal Line")))))),e.createElement("div",{id:"link-image-group",className:"toolbar-group"},e.createElement("div",{id:"link"},e.createElement("button",{type:"button",className:"link-selector-button"},e.createElement(d,{className:"button-icon"})),e.createElement("div",{className:"link-selector-container"},e.createElement("div",{className:"link-selector-show"},e.createElement("div",{className:"link-insert-option"},S&&e.createElement("div",{className:"link-selected-text"},e.createElement("span",null," Linking: ",S.length>20?`${S.substring(0,20)}...`:S),e.createElement("button",{type:"button",className:"link-unselect-button",onClick:A},"✕")),e.createElement("div",{className:"link-insert-url"},e.createElement("input",{type:"url",placeholder:"URL",onChange:e=>H(e.target.value),onClick:e=>e.stopPropagation(),onFocus:()=>{const e=window.getSelection();if(e&&e.rangeCount>0){const t=e.getRangeAt(0).cloneRange();if(R(t),I(e.toString()),!document.getElementById("temp-selection-highlight")){const e=document.createElement("style");e.id="temp-selection-highlight",e.innerHTML="\n .temp-selection-highlight {\n background-color: rgba(41, 119, 255, 0.2);\n border-radius: 2px;\n }\n ",document.head.appendChild(e)}const n=document.createElement("span");n.className="temp-selection-highlight",n.id="current-selection-highlight";const l=document.getElementById("current-selection-highlight");if(l){const e=l.parentNode;for(;l.firstChild;)null==e||e.insertBefore(l.firstChild,l);null==e||e.removeChild(l)}try{t.surroundContents(n)}catch(e){console.warn("Could not highlight complex selection (likely spans multiple elements)",e)}}}}),e.createElement("button",{type:"button",className:"link-insert-url-button",onClick:()=>{z&&l&&(()=>{if(B){const e=window.getSelection();return null==e||e.removeAllRanges(),null==e||e.addRange(B.cloneRange()),setTimeout((()=>{const e=document.getElementById("current-selection-highlight");if(e){const t=e.parentNode;for(;e.firstChild;)null==t||t.insertBefore(e.firstChild,e);null==t||t.removeChild(e)}}),0),!0}return!1})()&&(l("createLink",z),document.querySelector(".link-insert-url input").value="",H(""),A())}},e.createElement(y,{className:"button-icon"}))))))),e.createElement("button",{type:"button",onClick:()=>l("unlink")},e.createElement(u,{className:"button-icon"})),e.createElement("div",{id:"image"},e.createElement("button",{type:"button",className:"image-selector-button"},e.createElement(g,{className:"button-icon"})),e.createElement("div",{className:"image-selector-container"},e.createElement("div",{className:"image-selector-show"},e.createElement("div",{className:"image-option-button"},e.createElement("label",{htmlFor:"file-upload",className:"custom-file-upload"},e.createElement("div",{className:"image-insert-button",title:"Browse Folder"},e.createElement(f,{className:"button-icon"})),e.createElement("input",{accept:"image/*",type:"file",id:"file-upload",onChange:e=>{var t;const n=null===(t=e.target.files)||void 0===t?void 0:t[0];n&&L&&(L(n),e.target.value="")}})),e.createElement("div",{className:"image-insert-url"},e.createElement("input",{type:"url",placeholder:"Image URL",onBlur:e=>{T(e.target.value)}}),e.createElement("button",{type:"button",className:"image-insert-url-button",onClick:()=>{M&&C&&(C(M),document.querySelector(".image-insert-url input").value="",T(""))}},e.createElement(y,{className:"button-icon"})))))))),e.createElement("div",{id:"block-style-group",className:"toolbar-group"},e.createElement("select",{onChange:e=>{e.preventDefault(),l("formatBlock",e.target.value)}},e.createElement("option",{value:"p"},"Normal Text"),e.createElement("option",{value:"h1"},"Heading 1"),e.createElement("option",{value:"h2"},"Heading 2"),e.createElement("option",{value:"h3"},"Heading 3"),e.createElement("option",{value:"blockquote"},"Blockquote"),e.createElement("option",{value:"pre"},"Code Block"))),e.createElement("div",{id:"symbol-group",className:"toolbar-group"},e.createElement("div",{className:"symbol-container"},e.createElement("button",{type:"button"},"Symbols"),e.createElement("div",{className:"symbol-selector-container"},e.createElement("div",{className:"symbol-selector-show"},e.createElement("div",{className:"symbol-option-button"},e.createElement("button",{type:"button",onClick:()=>l("insertHTML","©")},"©"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","€")},"€"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","™")},"™"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","❝")},"❝"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","❞")},"❞"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","✓")},"✓"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","😊")},"😊"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","👍")},"👍"),e.createElement("button",{type:"button",onClick:()=>l("insertHTML","🎉")},"🎉")))))),e.createElement("div",{id:"undo-redo-group",className:"toolbar-group"},e.createElement("button",{type:"button",onClick:()=>l("undo")},e.createElement(h,{className:"button-icon"})),e.createElement("button",{type:"button",onClick:()=>l("redo")},e.createElement(p,{className:"button-icon"}))))},C=({value:t,onChange:o,isServer:c=!1,isEditable:r=!0,editorClassName:i,toolbarClassName:s,handleImageUpload:m,handleImageDelete:d})=>{const u=l(null),g=(e,t)=>{var n,l;const a=u.current;if(a)try{switch(e){case"createLink":if(t){document.execCommand("createLink",!1,t);const e=window.getSelection();if(e&&"A"===(null===(l=null===(n=e.anchorNode)||void 0===n?void 0:n.parentElement)||void 0===l?void 0:l.tagName)){const n=e.anchorNode.parentElement;n.title=t,n.target="_blank"}}break;case"insertImage":console.log("insertImage",t),t&&document.execCommand("insertImage",!1,t);break;case"formatBlock":t&&document.execCommand("formatBlock",!1,t);break;case"insertHTML":h(a,t);break;case"insertUnorderedList":p(e,"disc");break;case"insertOrderedList":p(e,"decimal");break;default:document.execCommand(e,!1,t||"")}a.focus(),o(a.innerHTML)}catch(e){}},h=(e,t)=>{if(t)if(t.includes('<table id="editor-custom-table"'))e.innerHTML+=t;else{const e=window.getSelection(),n=null==e?void 0:e.getRangeAt(0);if(!n)return;n.deleteContents();const l=n.createContextualFragment(t);n.insertNode(l);const a=l.lastChild||l.firstChild;if(a&&a.parentNode){const t=document.createRange();t.setStartAfter(a),t.collapse(!0),null==e||e.removeAllRanges(),null==e||e.addRange(t)}}},p=(e,t)=>{document.execCommand(e);const n=window.getSelection();if(!n||0===n.rangeCount)return;let l=(null==n?void 0:n.getRangeAt(0)).commonAncestorContainer;l.nodeType===Node.TEXT_NODE&&(l=l.parentElement);let a=l;for(;a&&"UL"!==a.tagName&&"OL"!==a.tagName&&a.parentElement&&a!==u.current;)a=a.parentElement;if(a&&("UL"===a.tagName||"OL"===a.tagName)){const e=`\n margin: 10px 0px 10px 20px;\n padding-left: 0;\n list-style-position: inside;\n list-style-type: ${t};\n `;a.setAttribute("style",e);a.querySelectorAll("li").forEach((e=>{e.setAttribute("style","margin: 4px 0; padding: 0;")}))}};return n((()=>{u.current&&u.current.innerHTML!==t&&(u.current.innerHTML=t)}),[t]),e.createElement("div",{id:"editor-container",className:`editor-canvas ${r?"editor-canvas-editable":""} ${null!=i?i:"default-editor-canvas"}`,onClick:e=>{var t;const n=e.target;if(n.closest(".toolbar"))return e.preventDefault(),void e.stopPropagation();const l=n.closest(".image-container");if(!l)return;const a=l.getBoundingClientRect(),r=e.clientX-a.left,i=e.clientY-a.top;if(r>a.width-70&&i<27){l.remove(),o(u.current?u.current.innerHTML:"");const e=null===(t=l.querySelector("img"))||void 0===t?void 0:t.src;c&&d&&e&&d(e)}}},e.createElement(L,{onCommand:g,onInsertImageFromDevice:e=>a(void 0,void 0,void 0,(function*(){const t=u.current;if(t)if(t.focus(),c&&m){const n=yield m(e);g("insertHTML",`<div class="image-container" contenteditable="false"><img src="${n}" alt="Uploaded Image"/></div>`),o(t.innerHTML)}else{const n=new FileReader;n.onload=e=>{var n;const l=null===(n=e.target)||void 0===n?void 0:n.result;g("insertHTML",`<div class="image-container" contenteditable="false"><img src="${l}" alt="Uploaded Image"/></div>`),o((null==t?void 0:t.innerHTML)||"")},n.readAsDataURL(e)}})),onInsertImageFromURL:e=>{const t=u.current;if(!t||!e)return;t.focus();g("insertHTML",`<div class="image-container" contenteditable="false"><img src="${e}" alt="Uploaded Image"/></div>`),o(t.innerHTML)},toolbarClassName:s}),e.createElement("div",{id:"editor-drop-overlay",className:"drop-overlay"},"Drop Your Image Here"),e.createElement("div",{id:"content-area","data-testid":"editor",ref:u,contentEditable:!0,onDrop:e=>((e,t)=>a(void 0,void 0,void 0,(function*(){e.preventDefault();const n=document.getElementById("editor-drop-overlay");n&&(n.style.display="none");const l=Array.from(e.dataTransfer.files),a=u.current;if(!a||0===l.length)return;a.focus();const c=l[0];if(c.type.startsWith("image/"))if(t&&m){const e=yield m(c);g("insertHTML",`<div class="image-container" contenteditable="false"><img src="${e}" alt="Uploaded Image"/></div>`),o(a.innerHTML)}else{const e=new FileReader;e.onload=e=>{var t;const n=null===(t=e.target)||void 0===t?void 0:t.result;g("insertHTML",`<div class="image-container" contenteditable="false"><img src="${n}" alt="Uploaded Image"/></div>`),o((null==a?void 0:a.innerHTML)||"")},e.readAsDataURL(c)}})))(e,c),onDragOver:e=>(e=>{e.preventDefault();const t=document.getElementById("editor-drop-overlay");t&&(t.style.display="flex")})(e),onDragLeave:e=>(e=>{e.preventDefault();const t=document.getElementById("editor-drop-overlay");t&&(t.style.display="none")})(e),onInput:e=>{e.preventDefault(),u.current&&o(u.current.innerHTML)},role:"textbox"}))};export{C as Editor,L as Toolbar,C as default};