edit-on-slate
Version:
Slate 기반의 직관적이고 강력한 리액트 텍스트 에디터 라이브러리
307 lines (285 loc) • 21.6 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/react/jsx-runtime"),t=require("react"),n=require("slate"),r=require("slate-react"),o=require("slate-history"),i=require("@emotion/styled"),s=require("react-dom"),a=require("@emotion/react"),l=require("@emotion/cache");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),A=d(i),u=d(l);const g=e=>`\n text-align: ${e||"left"};\n transition: text-align 0.2s ease;\n`,p=A.default.p`
margin: 0.5em 0;
line-height: 1.6;
${e=>g(e.textAlign)}
`,f=A.default.h1`
font-size: 2em;
margin-top: 1em;
margin-bottom: 0.5em;
font-weight: bold;
${e=>g(e.textAlign)}
`,m=A.default.h2`
font-size: 1.5em;
margin-top: 0.8em;
margin-bottom: 0.4em;
font-weight: bold;
${e=>g(e.textAlign)}
`,x=A.default.h3`
font-size: 1.2em;
margin-top: 0.6em;
margin-bottom: 0.3em;
font-weight: bold;
${e=>g(e.textAlign)}
`,h=A.default.blockquote`
border-left: 2px solid #ddd;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
color: #666;
font-style: italic;
${e=>g(e.textAlign)}
`,b=A.default.ul`
margin: 0.5em 0;
padding-left: 1.5em;
${e=>g(e.textAlign)}
`,j=A.default.ol`
margin: 0.5em 0;
padding-left: 1.5em;
${e=>g(e.textAlign)}
`,w=A.default.li`
margin: 0.2em 0;
${e=>g(e.textAlign)}
`,y=t=>{const{attributes:n,children:r,element:o}=t,i=o.textAlign;switch(o.type){case"paragraph":default:return e.jsx(p,Object.assign({textAlign:i},n,{children:r}));case"heading-one":return e.jsx(f,Object.assign({textAlign:i},n,{children:r}));case"heading-two":return e.jsx(m,Object.assign({textAlign:i},n,{children:r}));case"heading-three":return e.jsx(x,Object.assign({textAlign:i},n,{children:r}));case"block-quote":return e.jsx(h,Object.assign({textAlign:i},n,{children:r}));case"bulleted-list":return e.jsx(b,Object.assign({textAlign:i},n,{children:r}));case"numbered-list":return e.jsx(j,Object.assign({textAlign:i},n,{children:r}));case"list-item":return e.jsx(w,Object.assign({textAlign:i},n,{children:r}))}},E=t=>e.jsx(y,Object.assign({},t)),B=A.default.span`
font-family: ${e=>e.fontFamily||"inherit"};
color: ${e=>e.color||"inherit"};
font-weight: ${e=>e.isBold?"bold":"normal"};
font-style: ${e=>e.isItalic?"italic":"normal"};
text-decoration: ${e=>e.isUnderline?"underline":"none"};
${e=>e.isCode&&"\n background-color: #f0f0f0;\n padding: 0.2em 0.4em;\n border-radius: 3px;\n font-family: var(--font-code, monospace);\n font-size: 0.9em;\n "}
transition: all 0.2s ease;
`,C=({attributes:t,children:n,leaf:r})=>{const o=r;return e.jsx(B,Object.assign({},t,{fontFamily:o.fontFamily,color:o.color,isBold:r.bold,isItalic:r.italic,isUnderline:r.underline,isCode:r.code},{children:n}))},v=t=>e.jsx(C,Object.assign({},t)),S=(e,t)=>{const r=O(e,t);n.Transforms.setNodes(e,{[t]:!r||null},{match:e=>n.Text.isText(e),split:!0})},O=(e,t)=>{const r=n.Editor.marks(e);return!!r&&!0===r[t]},U=(e,t)=>{const r=R(e,t),o=["numbered-list","bulleted-list"].includes(t);let i;if(n.Transforms.unwrapNodes(e,{match:e=>!n.Editor.isEditor(e)&&n.Element.isElement(e)&&["numbered-list","bulleted-list"].includes(e.type),split:!0}),i=r?{type:"paragraph"}:{type:o?"list-item":t},n.Transforms.setNodes(e,i),!r&&o){const r={type:t,children:[]};n.Transforms.wrapNodes(e,r)}},R=(e,t)=>{const{selection:r}=e;if(!r)return!1;const[o]=Array.from(n.Editor.nodes(e,{at:n.Editor.unhangRange(e,r),match:e=>!n.Editor.isEditor(e)&&n.Element.isElement(e)&&e.type===t}));return!!o},k=(e,t)=>{const{selection:r}=e;if(!r)return!1;const[o]=Array.from(n.Editor.nodes(e,{at:n.Editor.unhangRange(e,r),match:e=>!n.Editor.isEditor(e)&&n.Element.isElement(e)&&e.textAlign===t}));return!!o},I=(e,t)=>{n.Transforms.setNodes(e,{color:t},{match:e=>n.Text.isText(e),split:!0})};const Y=["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082","#9400D3","#FF1493","#00FFFF","#FFD700","#C0C0C0","#000000","#FFFFFF"],Q=A.default.div`
display: flex;
flex-wrap: wrap;
padding: 8px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
background-color: #f8f8f8;
`,F=A.default.button`
all: unset;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 6px;
width: 32px;
height: 32px;
border: 1px solid ${e=>e.active?"#666":"#ccc"};
border-radius: 4px;
background-color: ${e=>e.active?"#e6e6e6":"white"};
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #e6e6e6;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(1px);
}
`,N=A.default.div`
width: 1px;
height: 24px;
background-color: #ddd;
margin: 0 10px;
`,T=A.default.img`
width: 16px;
height: 16px;
display: block;
`,D=A.default.select`
margin-right: 5px;
margin-bottom: 5px;
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: white;
font-size: 14px;
cursor: pointer;
&:focus {
outline: none;
}
`,P=A.default.input`
width: 30px;
height: 30px;
padding: 0;
border: none;
background: none;
cursor: pointer;
&::-webkit-color-swatch-wrapper {
padding: 0;
}
&::-webkit-color-swatch {
border: 1px solid #ccc;
border-radius: 3px;
}
`,V=A.default.div`
position: relative;
display: inline-block;
`,M=A.default.div`
position: absolute;
top: 100%;
left: 0;
z-index: 10;
display: ${e=>e.visible?"block":"none"};
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 200px;
`,X=A.default.div`
display: flex;
flex-wrap: wrap;
margin-top: 8px;
`,K=A.default.button`
width: 24px;
height: 24px;
margin: 2px;
padding: 0;
border: 1px solid #ccc;
background-color: ${e=>e.color};
border-radius: 3px;
cursor: pointer;
&:hover {
transform: scale(1.1);
}
&:focus {
outline: none;
}
`,z=A.default.div`
display: flex;
align-items: center;
gap: 4px;
`,L=({format:t,icon:n})=>{const o=r.useSlate(),i=O(o,t);return e.jsx(F,Object.assign({active:i,onMouseDown:e=>{e.preventDefault(),S(o,t)},title:t},{children:n}))},H=({format:t,icon:n})=>{const o=r.useSlate(),i=R(o,t);return e.jsx(F,Object.assign({active:i,onMouseDown:e=>{e.preventDefault(),U(o,t)},title:t},{children:n}))},q=({align:t,icon:o})=>{const i=r.useSlate();return e.jsx(F,Object.assign({active:!1,onMouseDown:e=>{e.preventDefault(),((e,t)=>{const{selection:r}=e;if(!r)return;const o=k(e,t);n.Transforms.setNodes(e,{textAlign:o?void 0:t},{match:t=>n.Element.isElement(t)&&n.Editor.isBlock(e,t)})})(i,t)},title:`${t} Align`},{children:o}))},G=({editor:r})=>{const[o,i]=t.useState(!1);return e.jsxs(Q,{children:[e.jsxs(z,{children:[e.jsx(L,{format:"bold",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC5SURBVHgB7ZRhDcIwEIUfBAGTUAuTgAKCAqzgAAugAAkMBeBgczAcjLtwBFLa4+Ag2Y9+yUu33nJvbV8KFMbOkFFL2lgaTPDegOmi+SBjQ5rDwf2PQ8Kgl9pCazDFd3SknTzX+IMBU8nYah/NYCNE77wtK9xWcoSDQVGfMH7BmqIz6fI0H0QNaRnVPiKXImYrtTUcaAYBj63K8osUVXCQWwE3PUntoDXwXhV8uHWibkaL6B6GmBYKfq79OjoFZRx41QAAAABJRU5ErkJggg==",alt:"Bold"})}),e.jsx(L,{format:"italic",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7dTtCYAgEAbgl2iARrhNapMapU1yExuhDVyhDUroQv+YFh0o+MCh3g8VPw6oSqBsHJEIapCBzgZxzLh2bLwc4UeaF1gggODOnCBA8eQaQgwvMELABHe5r6Q+03vXKwQQcr7cNpAfvH7P7ebldx5/Fqs9yR8ti1pUVc9OqjQoxqfV1cIAAAAASUVORK5CYII=",alt:"Italic"})}),e.jsx(L,{format:"underline",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACNSURBVHgB7ZPtDUAwEIZfFmCEjmAEG7CBFWyESdiADYzABnXifkn1IyUR+iTPj17f9NJLCwTeiiAl2WgyLWeEJoMYDxMa/LjBCjOJQ1ZJTy5Qv/O9tv+BER7kfMhMVlxLuT7zXglPahy3kCcX3jMSWWQEWZAZryeyg8fsb+XqBjncGODYQMINm1EHvsoGDegZ70jEgwoAAAAASUVORK5CYII=",alt:"Underline"})}),e.jsx(L,{format:"code",icon:"</>"})]}),e.jsx(N,{}),e.jsxs(z,{children:[e.jsx(H,{format:"heading-one",icon:"H1"}),e.jsx(H,{format:"heading-two",icon:"H2"}),e.jsx(H,{format:"block-quote",icon:'"'})]}),e.jsx(N,{}),e.jsxs(z,{children:[e.jsx(H,{format:"bulleted-list",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACHSURBVHgB7ZTNCYAwDEY/fw4eHcFuoCN0I0dwFSdwBEexG+gIJtqT2BqoUoQ+eJcQEkLSAonYZI74QhpSkzXZQ8YgbbCSG6nIhpwhQwnzjqItEh5qazC+K+Ild7bRBBn6GsjxzCuT3BX9pPD/KBxxfmQVzkUH4bsiJvirKB2JxsrwFCMSiWjs60UQJ+UU5ZcAAAAASUVORK5CYII=",alt:"Bullet List"})}),e.jsx(H,{format:"numbered-list",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACfSURBVHgB7ZThDUYwEIbffJ8BjMAGRmADG2ACMYFR2IAN2IQV/POPk1YipFxSCZI+yZP07s81vd4Bhqf5K/IN6ZItNPkp8sku7siJ4QELPBLcjE16+DKF1IEmqh5kZLUr6OCagFsgh2hsL+Nhc76F9Yne32jVJMcQt+/JERqcDZovC7RkCDEbV5TcAjUZbeIUvF9Ugsmy7Jb948NgeJwZb/EedhQbiekAAAAASUVORK5CYII=",alt:"Number List"})})]}),e.jsx(N,{}),e.jsxs(z,{children:[e.jsx(q,{align:"center",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACBSURBVHgB7ZTdCYAwDISv4gCOoBO4giPoCG7kBq7QURyhI7iBxjcRroZaKYV+cC/5aSA9AhRSY0j8QKT3alLYIReMomYR9SS3iyZPL13RHSvaPAPSwla0Ioz5GaiQOxoXjaKG5K5Ptr5mjYsGcJu6twG/w1bUIgynHRDt2BUK3zkBCfsMpS/i8k4AAAAASUVORK5CYII=",alt:"Center Align"})}),e.jsx(q,{align:"right",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgB7dTbCYAwDIXhv9IBHKGO0g1cwcnUCVzJTdTnQiDGohbyQV/CoaEXAu5rQagfVNovCsGBVgRlrr/WpsjlshDRW/kj6YpmbKay0NG6O79oVOQWa4OE7l0yb5NOkLDZtQ2qDTvnnjsBroAH1Omb/jAAAAAASUVORK5CYII=",alt:"Right Align"})}),e.jsx(q,{align:"justify",icon:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABhSURBVHgB7dTRCYAwDIThX3EQHcVNdDJ1EldxE30vHJSYUgL5Ho/S0KMEUm+DyF+c7pvEwYUoVEU3NmsZqIouolAVHdjsZTASnapow+asHeD2TZtTL5ixeWoHuC27lP77AN9sB9Q2IFqfAAAAAElFTkSuQmCC",alt:"Justify"})})]}),e.jsx(N,{}),e.jsx(z,{children:e.jsxs(D,Object.assign({onChange:e=>{((e,t)=>{n.Transforms.setNodes(e,{fontFamily:t},{match:e=>n.Text.isText(e),split:!0})})(r,e.target.value)},title:"Font Family"},{children:[e.jsx("option",Object.assign({value:"Pretendard"},{children:"Pretendard"})),e.jsx("option",Object.assign({value:"Nanum Gothic"},{children:"나눔고딕"})),e.jsx("option",Object.assign({value:"sans-serif"},{children:"Sans-serif"})),e.jsx("option",Object.assign({value:"serif"},{children:"Serif"})),e.jsx("option",Object.assign({value:"monospace"},{children:"Monospace"}))]}))}),e.jsx(N,{}),e.jsx(z,{children:e.jsxs(V,{children:[e.jsx(F,Object.assign({active:!1,onMouseDown:e=>{e.preventDefault(),i(!o)},title:"Font Color"},{children:e.jsx(T,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACxSURBVHgB7ZK9DcIwEIVfgJ6UlB4hI6SkZISMwAZ4A0aAFdgASqqMYDZgBHhWHCmK8nNKLkWUfNInWWf7LN8dsDIHUnrDQDaCM08a0Qsm5jvkka3wnC/Rmx7pgb6gyJXasI5pTs9QwpfkXosZ6ugJAqKefZ/o0xA39AGFnyQomvur6cIj/hcxRpK1JEdYWyiQNSRPQiyHEmkleYmFsNnzpWtMHeS0juyu45KBnD1Wlssf+cgh3sQW0TwAAAAASUVORK5CYII=",alt:"Font Color"})})),e.jsxs(M,Object.assign({visible:o},{children:[e.jsx(P,{type:"color",onChange:e=>{I(r,e.target.value),i(!1)},title:"Choose Color"}),e.jsx(X,{children:Y.map((t=>e.jsx(K,{color:t,onClick:()=>(e=>{I(r,e),i(!1)})(t)},t)))})]}))]})})]})},Z=e=>{const{deleteBackward:t,insertText:r}=e;return e.insertText=t=>{const{selection:o}=e;if(o&&n.Range.isCollapsed(o)&&" "===t){const{anchor:t}=o,r=n.Editor.above(e,{match:t=>n.Element.isElement(t)&&n.Editor.isBlock(e,t)}),i=r?r[1]:[],s={anchor:t,focus:n.Editor.start(e,i)},a={"*":"bulleted-list","-":"bulleted-list","+":"bulleted-list","1.":"numbered-list",">":"block-quote","#":"heading-one","##":"heading-two","###":"heading-three"}[n.Editor.string(e,s)];if(a){if(n.Transforms.select(e,s),n.Transforms.delete(e),n.Transforms.setNodes(e,{type:a},{match:t=>n.Element.isElement(t)&&n.Editor.isBlock(e,t)}),["bulleted-list","numbered-list"].includes(a)){const t={type:a,children:[{type:"list-item",children:[{text:""}]}]};return void n.Transforms.wrapNodes(e,t)}return}}r(t)},e.deleteBackward=(...r)=>{const{selection:o}=e;if(console.log("deleteBackward called",{selection:o,args:r}),o&&n.Range.isCollapsed(o)){const t=n.Editor.above(e,{match:t=>n.Element.isElement(t)&&n.Editor.isBlock(e,t)});if(t){const[r,i]=t,s=n.Editor.start(e,i);if(n.Point.equals(o.anchor,s)&&"paragraph"!==r.type)return void n.Transforms.setNodes(e,{type:"paragraph"})}}t(...r)},e},W=({children:n})=>{const r=t.useRef(null),o=t.useRef(null),i=t.useRef(null),[,l]=c.default.useState({});return t.useEffect((()=>{if(r.current&&!o.current){o.current=r.current.attachShadow({mode:"open"});const e=document.createElement("div");o.current.appendChild(e),i.current=u.default({key:"edit-on-slate",container:o.current,prepend:!0,stylisPlugins:[]});document.querySelectorAll('link[rel="stylesheet"][href*="fonts.googleapis.com"]').forEach((e=>{var t;const n=e.cloneNode(!0);null===(t=o.current)||void 0===t||t.appendChild(n)})),l({})}}),[]),e.jsx("div",Object.assign({ref:r},{children:o.current&&i.current&&s.createPortal(e.jsx(a.CacheProvider,Object.assign({value:i.current},{children:n})),o.current)}))};A.default.div`
${'\n --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n --font-code: "JetBrains Mono", "Fira Code", monospace;\n --font-family-sans: "Nanum Gothic", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;\n --font-family-serif: "Noto Serif KR", Georgia, "Times New Roman", serif;\n --font-family-mono: "JetBrains Mono", "D2Coding", Consolas, monospace;\n'}
width: 100%;
max-width: 800px;
margin: 0 auto;
background: #fff;
`;const J=A.default.div`
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
background: #fff;
height: ${e=>e.height||"500px"};
display: flex;
flex-direction: column;
`,$=A.default.div`
font-family: var(--font-primary);
line-height: 1.5;
padding: 1rem;
flex: 1;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
&:focus {
outline: none;
border-color: #0077ff;
box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.1);
}
p {
margin: 0 0 1em 0;
&:last-child { margin-bottom: 0; }
}
h1 { font-size: 2em; margin: 1em 0 0.5em; }
h2 { font-size: 1.5em; margin: 1em 0 0.5em; }
h3 { font-size: 1.17em; margin: 1em 0 0.5em; }
blockquote {
border-left: 2px solid #ddd;
margin: 1em 0;
padding-left: 1em;
color: #666;
}
code {
font-family: var(--font-code);
background: #f5f5f5;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
ul, ol {
margin: 1em 0;
padding-left: 2em;
}
li { margin: 0.5em 0; }
`;A.default.div`
padding: 8px;
border: 1px solid #ddd;
border-bottom: none;
border-radius: 4px 4px 0 0;
background: #f8f9fa;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
`,A.default.div`
display: flex;
gap: 4px;
align-items: center;
`,A.default.button`
min-width: 32px;
height: 32px;
padding: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
&:hover {
background: #f0f0f0;
border-color: #ccc;
}
&.active {
background: #e9ecef;
border-color: #adb5bd;
color: #000;
}
img {
width: 16px;
height: 16px;
opacity: 0.7;
&:hover {
opacity: 1;
}
}
`,A.default.select`
height: 32px;
padding: 0 24px 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 4px center;
cursor: pointer;
font-size: 14px;
color: #333;
appearance: none;
min-width: 120px;
&:hover {
background-color: #f0f0f0;
border-color: #ccc;
}
&:focus {
outline: none;
border-color: #0077ff;
box-shadow: 0 0 0 2px rgba(0, 119, 255, 0.1);
}
`,A.default.div`
width: 1px;
height: 24px;
margin: 0;
background: #ddd;
flex-shrink: 0;
`;const _=({value:o,style:i,containerStyle:s,editorStyle:a})=>{const l=t.useMemo((()=>r.withReact(n.createEditor())),[]);return e.jsx("div",Object.assign({style:i},{children:e.jsx(r.Slate,Object.assign({editor:l,initialValue:o},{children:e.jsx(J,Object.assign({style:s},{children:e.jsx($,Object.assign({style:a},{children:e.jsx(r.Editable,{renderElement:E,renderLeaf:v,readOnly:!0})}))}))}))}))},ee=(e,t="a")=>!("undefined"==typeof document||!document.fonts)&&document.fonts.check(`12px '${e}'`,t),te=(e,t=5e3)=>"undefined"!=typeof document&&document.fonts?new Promise((n=>{if(ee(e))return void n(!0);const r=()=>{ee(e)&&(n(!0),document.removeEventListener("fontload",r),clearTimeout(o))},o=setTimeout((()=>{document.removeEventListener("fontload",r),n(!1)}),t);document.addEventListener("fontload",r),document.fonts.load&&document.fonts.load(`12px '${e}'`).then(r)})):Promise.resolve(!1),ne=e=>{if("undefined"==typeof document)return;const t=document.createElement("link");t.rel="preconnect",t.href=new URL(e).origin,t.crossOrigin="anonymous",document.head.appendChild(t);const n=document.createElement("link");n.rel="preload",n.as="style",n.href=e,document.head.appendChild(n);const r=document.createElement("link");r.rel="stylesheet",r.href=e,r.media="print",r.onload=()=>{r.media="all"},document.head.appendChild(r);const o=document.createElement("noscript"),i=document.createElement("link");i.rel="stylesheet",i.href=e,o.appendChild(i),document.head.appendChild(o)},re=()=>{ne("https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap"),ne("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css")},oe=[{type:"paragraph",children:[{text:""}]}];Object.defineProperty(exports,"Node",{enumerable:!0,get:function(){return n.Node}}),Object.defineProperty(exports,"Path",{enumerable:!0,get:function(){return n.Path}}),Object.defineProperty(exports,"Point",{enumerable:!0,get:function(){return n.Point}}),Object.defineProperty(exports,"Range",{enumerable:!0,get:function(){return n.Range}}),Object.defineProperty(exports,"SlateEditor",{enumerable:!0,get:function(){return n.Editor}}),Object.defineProperty(exports,"SlateElement",{enumerable:!0,get:function(){return n.Element}}),Object.defineProperty(exports,"Text",{enumerable:!0,get:function(){return n.Text}}),Object.defineProperty(exports,"Transforms",{enumerable:!0,get:function(){return n.Transforms}}),Object.defineProperty(exports,"createEditor",{enumerable:!0,get:function(){return n.createEditor}}),Object.defineProperty(exports,"Editable",{enumerable:!0,get:function(){return r.Editable}}),Object.defineProperty(exports,"ReactEditor",{enumerable:!0,get:function(){return r.ReactEditor}}),Object.defineProperty(exports,"Slate",{enumerable:!0,get:function(){return r.Slate}}),Object.defineProperty(exports,"useFocused",{enumerable:!0,get:function(){return r.useFocused}}),Object.defineProperty(exports,"useSelected",{enumerable:!0,get:function(){return r.useSelected}}),Object.defineProperty(exports,"useSlate",{enumerable:!0,get:function(){return r.useSlate}}),Object.defineProperty(exports,"useSlateStatic",{enumerable:!0,get:function(){return r.useSlateStatic}}),Object.defineProperty(exports,"withReact",{enumerable:!0,get:function(){return r.withReact}}),Object.defineProperty(exports,"HistoryEditor",{enumerable:!0,get:function(){return o.HistoryEditor}}),Object.defineProperty(exports,"withHistory",{enumerable:!0,get:function(){return o.withHistory}}),exports.Editor=({value:i=oe,onChange:s,placeholder:a="내용을 입력하세요...",readOnly:l=!1,containerStyle:d,editorStyle:c})=>{const[A,u]=t.useState(!1);t.useEffect((()=>{re(),Promise.all([te("Nanum Gothic"),te("Pretendard"),te("Inter")]).then((()=>{u(!0),document.documentElement.classList.add("fonts-loaded")}))}),[]);const g=t.useMemo((()=>Z(o.withHistory(r.withReact(n.createEditor())))),[]),p=t.useCallback((t=>e.jsx(y,Object.assign({},t))),[]),f=t.useCallback((t=>e.jsx(C,Object.assign({},t))),[]),m=l?e.jsx(_,{value:i,placeholder:a,containerStyle:d,editorStyle:c}):e.jsx(r.Slate,Object.assign({editor:g,initialValue:i,onChange:s},{children:e.jsxs(J,Object.assign({style:d},{children:[e.jsx(G,{editor:g}),e.jsx($,Object.assign({style:c},{children:e.jsx(r.Editable,{renderElement:p,renderLeaf:f,placeholder:a,spellCheck:!0,autoFocus:!0})}))]}))}));return e.jsx(W,{children:e.jsx("div",Object.assign({className:A?"fonts-loaded":""},{children:m}))})},exports.ReadOnlyEditor=_,exports.Toolbar=G,exports.isBlockActive=R,exports.isFontLoaded=ee,exports.isMarkActive=O,exports.loadDefaultFonts=re,exports.loadFontStylesheet=ne,exports.toggleBlock=U,exports.toggleMark=S,exports.waitForFont=te,exports.withShortcuts=Z;
//# sourceMappingURL=index.js.map