@bettaibi/react-blocknote
Version:
A modern, versatile rich text editor component for React applications with an elegant UI and Notion-like functionality. Supports both React 18 and React 19.
2 lines (1 loc) • 15.7 kB
JavaScript
import{c as e,j as t,T as s,H as o,a as n,b as i,d as l,e as c,f as a,U as r,R as d,B as u,I as h,g as m,L as x,h as p,S as b,C as j,A as k,i as g,k as f,l as v,m as y,u as N,E as C}from"./blocknote-gBqZGJxD.js";import{n as w}from"./blocknote-gBqZGJxD.js";import{useState as A,useRef as z,useEffect as I}from"react";import*as L from"@radix-ui/react-popover";import*as H from"@radix-ui/react-dropdown-menu";const T=e("arrow-down",[["path",{d:"M12 5v14",key:"s699le"}],["path",{d:"m19 12-7 7-7-7",key:"1idqje"}]]),R=e("arrow-left",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]]),M=e("arrow-right",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"m12 5 7 7-7 7",key:"xquz4c"}]]),B=e("arrow-up",[["path",{d:"m5 12 7-7 7 7",key:"hav0vg"}],["path",{d:"M12 19V5",key:"x0mq9r"}]]),O=e("chevron-down",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]),S=e("columns-2",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M12 3v18",key:"108xh3"}]]),q=e("image",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2",key:"1m3agn"}],["circle",{cx:"9",cy:"9",r:"2",key:"af1f0g"}],["path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",key:"1xmnt7"}]]),U=e("link",[["path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",key:"1cjeqo"}],["path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",key:"19qd67"}]]),D=e("rows-3",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M21 9H3",key:"1338ky"}],["path",{d:"M21 15H3",key:"9uk58r"}]]),P=e("subscript",[["path",{d:"m4 5 8 8",key:"1eunvl"}],["path",{d:"m12 5-8 8",key:"1ah0jp"}],["path",{d:"M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07",key:"e8ta8j"}]]),F=e("superscript",[["path",{d:"m4 19 8-8",key:"hr47gm"}],["path",{d:"m12 19-8-8",key:"1dhhmo"}],["path",{d:"M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06",key:"1dfcux"}]]),V=e("table",[["path",{d:"M12 3v18",key:"108xh3"}],["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M3 15h18",key:"5xshup"}]]),E=e("trash-2",[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17",key:"1uufr5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17",key:"xtxkd"}]]);function $({editor:e}){const[s,o]=A(""),[n,i]=A(""),[l,c]=A(!1),a=z(null);return I((()=>{l&&a.current&&setTimeout((()=>{var e;null==(e=a.current)||e.focus()}),100);const e=document.querySelector(".blocknote-toolbar");e&&(l?e.classList.add("is-dropdown-active"):e.classList.remove("is-dropdown-active"))}),[l]),t.jsxs(L.Root,{open:l,onOpenChange:c,children:[t.jsx(L.Trigger,{asChild:!0,children:t.jsx("button",{type:"button",className:e.isActive("image")?"is-active":"",title:"Insert Image",children:t.jsx(q,{size:20})})}),t.jsx(L.Portal,{children:t.jsxs(L.Content,{className:"blocknote-popover",sideOffset:5,align:"start",alignOffset:-5,onInteractOutside:e=>{e.target&&e.target.closest(".blocknote-popover-content")&&e.preventDefault()},children:[t.jsxs("div",{className:"blocknote-popover-content",children:[t.jsx("h3",{className:"blocknote-popover-title",children:"Insert Image"}),t.jsxs("div",{children:[t.jsxs("div",{className:"blocknote-form-field",children:[t.jsx("label",{className:"blocknote-form-label",htmlFor:"image-url",children:"Image URL"}),t.jsx("input",{id:"image-url",ref:a,type:"url",value:s,onChange:e=>o(e.target.value),className:"blocknote-form-input",placeholder:"https://example.com/image.jpg",required:!0})]}),t.jsxs("div",{className:"blocknote-form-field",children:[t.jsx("label",{className:"blocknote-form-label",htmlFor:"image-alt",children:"Alt Text (optional)"}),t.jsx("input",{id:"image-alt",type:"text",value:n,onChange:e=>i(e.target.value),className:"blocknote-form-input",placeholder:"Image description"})]}),t.jsxs("div",{className:"blocknote-form-actions",children:[t.jsx("button",{type:"button",onClick:()=>c(!1),className:"blocknote-form-button blocknote-form-button-cancel",children:"Cancel"}),t.jsx("button",{type:"button",className:"blocknote-form-button blocknote-form-button-submit",onClick:t=>{t.preventDefault(),s&&(e.chain().focus().setImage({src:s,alt:n}).run(),o(""),i(""),c(!1))},children:"Insert Image"})]})]})]}),t.jsx(L.Arrow,{className:"blocknote-popover-arrow"})]})})]})}function G({editor:e}){const[s,o]=A(""),[n,i]=A(""),[l,c]=A(!1),a=z(null);return I((()=>{l&&a.current&&setTimeout((()=>{var e;null==(e=a.current)||e.focus()}),100);const e=document.querySelector(".blocknote-toolbar");e&&(l?e.classList.add("is-dropdown-active"):e.classList.remove("is-dropdown-active"))}),[l]),t.jsxs(L.Root,{open:l,onOpenChange:c,children:[t.jsx(L.Trigger,{asChild:!0,children:t.jsx("button",{type:"button",className:e.isActive("link")?"is-active":"",title:"Insert Link",children:t.jsx(U,{size:20})})}),t.jsx(L.Portal,{children:t.jsxs(L.Content,{className:"blocknote-popover",sideOffset:5,align:"start",alignOffset:-5,onInteractOutside:e=>{e.target&&e.target.closest(".blocknote-popover-content")&&e.preventDefault()},children:[t.jsxs("div",{className:"blocknote-popover-content",children:[t.jsx("h3",{className:"blocknote-popover-title",children:"Insert Link"}),t.jsxs("div",{children:[t.jsxs("div",{className:"blocknote-form-field",children:[t.jsx("label",{className:"blocknote-form-label",htmlFor:"link-url",children:"URL"}),t.jsx("input",{id:"link-url",ref:a,type:"url",value:s,onChange:e=>o(e.target.value),className:"blocknote-form-input",placeholder:"https://example.com",required:!0})]}),t.jsxs("div",{className:"blocknote-form-field",children:[t.jsx("label",{className:"blocknote-form-label",htmlFor:"link-text",children:"Text (optional)"}),t.jsx("input",{id:"link-text",type:"text",value:n,onChange:e=>i(e.target.value),className:"blocknote-form-input",placeholder:"Link text"})]}),t.jsxs("div",{className:"blocknote-form-actions",children:[t.jsx("button",{type:"button",onClick:()=>c(!1),className:"blocknote-form-button blocknote-form-button-cancel",children:"Cancel"}),t.jsx("button",{type:"button",onClick:t=>{t.preventDefault(),s&&(e.chain().focus().extendMarkRange("link").setLink({href:s}).run(),o(""),i(""),c(!1))},className:"blocknote-form-button blocknote-form-button-submit",children:"Add Link"})]})]})]}),t.jsx(L.Arrow,{className:"blocknote-popover-arrow"})]})})]})}function J({editor:e}){const[s,o]=A(!1);return I((()=>{const e=document.querySelector(".blocknote-toolbar");e&&(s?e.classList.add("is-dropdown-active"):e.classList.remove("is-dropdown-active"))}),[s]),t.jsxs(H.Root,{open:s,onOpenChange:o,children:[t.jsx(H.Trigger,{asChild:!0,children:t.jsx("button",{type:"button",className:e.isActive("table")||e.can().addColumnAfter()||e.can().addRowAfter()||e.can().deleteTable()?"is-active":"",title:"Table Options",children:t.jsxs("div",{className:"table-button-content",children:[t.jsx(V,{size:20}),t.jsx(O,{size:14,className:"dropdown-caret"})]})})}),t.jsx(H.Portal,{children:t.jsxs(H.Content,{className:"blocknote-dropdown",sideOffset:5,align:"start",alignOffset:-5,children:[t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().insertTable({rows:3,cols:3,withHeaderRow:!0}).run(),disabled:e.isActive("table"),children:[t.jsx(V,{size:16}),t.jsx("span",{children:"Insert Table"})]}),t.jsx(H.Separator,{className:"blocknote-dropdown-separator"}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().addColumnBefore().run(),disabled:!e.can().addColumnBefore(),children:[t.jsx(R,{size:16}),t.jsx("span",{children:"Add Column Before"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().addColumnAfter().run(),disabled:!e.can().addColumnAfter(),children:[t.jsx(M,{size:16}),t.jsx("span",{children:"Add Column After"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().deleteColumn().run(),disabled:!e.can().deleteColumn(),children:[t.jsx(S,{size:16}),t.jsx("span",{children:"Delete Column"})]}),t.jsx(H.Separator,{className:"blocknote-dropdown-separator"}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().addRowBefore().run(),disabled:!e.can().addRowBefore(),children:[t.jsx(B,{size:16}),t.jsx("span",{children:"Add Row Before"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().addRowAfter().run(),disabled:!e.can().addRowAfter(),children:[t.jsx(T,{size:16}),t.jsx("span",{children:"Add Row After"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().deleteRow().run(),disabled:!e.can().deleteRow(),children:[t.jsx(D,{size:16}),t.jsx("span",{children:"Delete Row"})]}),t.jsx(H.Separator,{className:"blocknote-dropdown-separator"}),t.jsxs(H.Item,{className:"blocknote-dropdown-item blocknote-dropdown-item-danger",onClick:()=>e.chain().focus().deleteTable().run(),disabled:!e.can().deleteTable(),children:[t.jsx(E,{size:16}),t.jsx("span",{children:"Delete Table"})]}),t.jsx(H.Arrow,{className:"blocknote-dropdown-arrow"})]})})]})}function K({editor:e}){const[r,d]=A(!1);return I((()=>{const e=document.querySelector(".blocknote-toolbar");e&&(r?e.classList.add("is-dropdown-active"):e.classList.remove("is-dropdown-active"))}),[r]),t.jsxs(H.Root,{open:r,onOpenChange:d,children:[t.jsx(H.Trigger,{asChild:!0,children:t.jsx("button",{type:"button",className:e.isActive("heading")?"is-active":"",title:"Headings",children:t.jsxs("div",{className:"heading-button-content",children:[t.jsx(s,{size:20}),t.jsx(O,{size:14,className:"dropdown-caret"})]})})}),t.jsx(H.Portal,{children:t.jsxs(H.Content,{className:"blocknote-dropdown",sideOffset:5,align:"start",alignOffset:-5,children:[t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:1}).run(),children:[t.jsx(o,{size:16}),t.jsx("span",{children:"Heading 1"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:2}).run(),children:[t.jsx(n,{size:16}),t.jsx("span",{children:"Heading 2"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:3}).run(),children:[t.jsx(i,{size:16}),t.jsx("span",{children:"Heading 3"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:4}).run(),children:[t.jsx(l,{size:16}),t.jsx("span",{children:"Heading 4"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:5}).run(),children:[t.jsx(c,{size:16}),t.jsx("span",{children:"Heading 5"})]}),t.jsxs(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().toggleHeading({level:6}).run(),children:[t.jsx(a,{size:16}),t.jsx("span",{children:"Heading 6"})]}),t.jsx(H.Separator,{className:"blocknote-dropdown-separator"}),t.jsx(H.Item,{className:"blocknote-dropdown-item",onClick:()=>e.chain().focus().setParagraph().run(),children:t.jsx("span",{children:"Normal Text"})}),t.jsx(H.Arrow,{className:"blocknote-dropdown-arrow"})]})})]})}function Q({editor:e}){return e?t.jsx("div",{className:"blocknote-toolbar",children:t.jsxs("div",{className:"blocknote-toolbar-main",children:[t.jsx("button",{type:"button",onClick:()=>e.chain().focus().undo().run(),disabled:!e.can().chain().focus().undo().run(),title:"Undo",children:t.jsx(r,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().redo().run(),disabled:!e.can().chain().focus().redo().run(),title:"Redo",children:t.jsx(d,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleBold().run(),className:e.isActive("bold")?"is-active":"",title:"Bold",children:t.jsx(u,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleItalic().run(),className:e.isActive("italic")?"is-active":"",title:"Italic",children:t.jsx(h,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleUnderline().run(),className:e.isActive("underline")?"is-active":"",title:"Underline",children:t.jsx(m,{size:20})}),t.jsx(G,{editor:e}),t.jsx($,{editor:e}),t.jsx(K,{editor:e}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleBulletList().run(),className:e.isActive("bulletList")?"is-active":"",title:"Bullet List",children:t.jsx(x,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleOrderedList().run(),className:e.isActive("orderedList")?"is-active":"",title:"Ordered List",children:t.jsx(p,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleTaskList().run(),className:e.isActive("taskList")?"is-active":"",title:"Task List",children:t.jsx(b,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleCodeBlock().run(),className:e.isActive("codeBlock")?"is-active":"",title:"Code Block",children:t.jsx(j,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().setTextAlign("left").run(),className:e.isActive({textAlign:"left"})?"is-active":"",title:"Align Left",children:t.jsx(k,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().setTextAlign("center").run(),className:e.isActive({textAlign:"center"})?"is-active":"",title:"Align Center",children:t.jsx(g,{size:20})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().setTextAlign("right").run(),className:e.isActive({textAlign:"right"})?"is-active":"",title:"Align Right",children:t.jsx(f,{size:20})}),t.jsx(J,{editor:e})]})}):null}const W=({editor:e})=>e?t.jsxs(v,{editor:e,tippyOptions:{duration:100},className:"blocknote-bubble-menu",children:[t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleBold().run(),className:e.isActive("bold")?"is-active":"",title:"Bold",children:t.jsx(u,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleItalic().run(),className:e.isActive("italic")?"is-active":"",title:"Italic",children:t.jsx(h,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleStrike().run(),className:e.isActive("strike")?"is-active":"",title:"Strikethrough",children:t.jsx(y,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleCode().run(),className:e.isActive("code")?"is-active":"",title:"Code",children:t.jsx(j,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleUnderline().run(),className:e.isActive("underline")?"is-active":"",title:"Underline",children:t.jsx(m,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleSubscript().run(),className:e.isActive("subscript")?"is-active":"",title:"Subscript",children:t.jsx(P,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleSuperscript().run(),className:e.isActive("superscript")?"is-active":"",title:"Superscript",children:t.jsx(F,{size:16})}),t.jsx("div",{className:"bubble-menu-separator"}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleHeading({level:1}).run(),className:e.isActive("heading",{level:1})?"is-active":"",title:"Heading 1",children:t.jsx(o,{size:16})}),t.jsx("button",{type:"button",onClick:()=>e.chain().focus().toggleHeading({level:2}).run(),className:e.isActive("heading",{level:2})?"is-active":"",title:"Heading 2",children:t.jsx(n,{size:16})})]}):null;function X({className:e="",showToolbar:s=!0,showBubbleMenu:o=!0}){const n=N();return t.jsxs("div",{className:`blocknote-editor ${e}`,children:[t.jsx(C,{editor:n}),s&&t.jsx(Q,{editor:n}),o&&t.jsx(W,{editor:n})]})}export{X as BlockNote,w as BlockNoteProvider};