reactjs-tiptap-editor/lib/Callout.cjs

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./clsx-CXbNJWDD.cjs"),o=require("./index-BnVcq33n.cjs"),t=require("react/jsx-runtime"),x=require("react");require("./theme.cjs");const c=require("lucide-react"),s=require("./select-CYyIeImH.cjs"),k=require("./index-BsFvo9PG.cjs"),j=[{value:"note",label:"Note",icon:c.Info,color:"#1f6feb",background:"#1f6feb1f"},{value:"tip",label:"Tip",icon:c.Lightbulb,color:"#238636",background:"#2386361f"},{value:"important",label:"Important",icon:c.AlertCircle,color:"#ab7df8",background:"#ab7df81f"},{value:"warning",label:"Warning",icon:c.TriangleAlert,color:"#d29922",background:"#d299221f"},{value:"caution",label:"Caution",icon:c.OctagonAlert,color:"#f85149",background:"#f851491f"}];function q({node:e}){const{type:l="note",title:r="",body:u=""}=e.attrs,d=(j.find(h=>h.value===l)||j[0]).icon;return t.jsx(a.NodeViewWrapper,{children:t.jsxs("div",{className:a.clsx("richtext-relative richtext-my-4 richtext-rounded-lg richtext-border richtext-p-4",{"richtext-bg-[#1f6feb1f] richtext-border-[#1f6feb]":l==="note","richtext-bg-[#2386361f] richtext-border-[#238636]":l==="tip","richtext-bg-[#ab7df81f] richtext-border-[#ab7df8]":l==="important","richtext-bg-[#d299221f] richtext-border-[#d29922]":l==="warning","richtext-bg-[#f851491f] richtext-border-[#f85149]":l==="caution"}),children:[t.jsxs("div",{className:a.clsx("richtext-mb-2 richtext-flex richtext-items-center richtext-gap-2",{"richtext-text-[#1f6feb]":l==="note","richtext-text-[#238636]":l==="tip","richtext-text-[#ab7df8]":l==="important","richtext-text-[#d29922]":l==="warning","richtext-text-[#f85149]":l==="caution"}),children:[t.jsx(d,{className:"richtext-size-5"}),t.jsx("span",{className:"richtext-font-semibold",children:r})]}),u&&t.jsx("p",{className:"richtext-pl-[28px]",children:u})]})})}const w=[{value:"note",label:"Note",icon:"Info"},{value:"tip",label:"Tip",icon:"Lightbulb"},{value:"important",label:"Important",icon:"AlertCircle"},{value:"warning",label:"Warning",icon:"TriangleAlert"},{value:"caution",label:"Caution",icon:"OctagonAlert"}];function M(){const{t:e}=k.useLocale(),l=o.useEditorInstance(),r=o.useButtonProps(C.name),[u,n]=x.useState(!1),[d,h]=x.useState("note"),[b,g]=x.useState(""),[f,v]=x.useState(""),{icon:y=void 0,tooltip:T=void 0,shortcutKeys:A=void 0,tooltipOptions:L={},isActive:N=void 0}=(r==null?void 0:r.componentProps)??{},{dataState:S,disabled:m}=o.useToggleActive(N),I=()=>{l&&(l.chain().focus().setCallout({type:d,title:b,body:f}).run(),n(!1),h("note"),g(""),v(""))},O=()=>{m||n(!0)};return r?t.jsxs(o.Dialog,{onOpenChange:n,open:u,children:[t.jsx(o.DialogTrigger,{asChild:!0,children:t.jsx(o.ActionButton,{action:O,dataState:S,disabled:m,icon:y,shortcutKeys:A,tooltip:T,tooltipOptions:L})}),t.jsxs(o.DialogContent,{children:[t.jsx(o.DialogTitle,{children:e("editor.callout.dialog.title")}),t.jsxs("div",{className:"richtext-space-y-4 richtext-py-4",children:[t.jsxs("div",{className:"richtext-space-y-2",children:[t.jsx(o.Label,{children:e("editor.callout.dialog.type")}),t.jsxs(s.Select,{onValueChange:h,value:d,children:[t.jsx(s.SelectTrigger,{children:t.jsx(s.SelectValue,{placeholder:e("editor.callout.dialog.type.placeholder")})}),t.jsx(s.SelectContent,{children:w.map(i=>t.jsx(s.SelectItem,{value:i.value,children:e(`editor.callout.type.${i.value}`)},i.value))})]})]}),t.jsxs("div",{className:"richtext-space-y-2",children:[t.jsx(o.Label,{children:e("editor.callout.dialog.title.label")}),t.jsx(o.Input,{onChange:i=>g(i.target.value),placeholder:e("editor.callout.dialog.title.placeholder"),value:b})]}),t.jsxs("div",{className:"richtext-space-y-2",children:[t.jsx(o.Label,{children:e("editor.callout.dialog.body.label")}),t.jsx(o.Input,{onChange:i=>v(i.target.value),placeholder:e("editor.callout.dialog.body.placeholder"),value:f})]})]}),t.jsxs(o.DialogFooter,{children:[t.jsx(o.Button,{onClick:()=>n(!1),variant:"outline",children:e("editor.callout.dialog.button.cancel")}),t.jsx(o.Button,{onClick:I,children:e("editor.callout.dialog.button.apply")})]})]})]}):t.jsx(t.Fragment,{})}function p(e){return l=>l.getAttribute(e)}const C=a.Node3.create({name:"callout",group:"block",selectable:!0,atom:!0,draggable:!0,inline:!1,addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),HTMLAttributes:{class:"callout"},button:({editor:l,t:r})=>({component:o.ActionButton,componentProps:{action:()=>!0,isActive:()=>l.isActive("callout"),disabled:!1,icon:"Callout",tooltip:r("editor.callout.tooltip")}})}},parseHTML(){return[{tag:"div.callout"}]},renderHTML({HTMLAttributes:e}){return["div",a.mergeAttributes(this.options&&this.options.HTMLAttributes||{},e)]},addAttributes(){return{type:{default:"",parseHTML:p("type")},title:{default:"",parseHTML:p("title")},body:{default:"",parseHTML:p("body")}}},addCommands(){return{setCallout:e=>({chain:l})=>l().insertContent({type:this.name,attrs:e}).run()}},addNodeView(){return a.ReactNodeViewRenderer(q)}});exports.Callout=C;exports.RichTextCallout=M;