reactjs-tiptap-editor/lib/TextAlign.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 M=require("./clsx-CXbNJWDD.cjs"),s=require("react/jsx-runtime"),y=require("react"),r=require("./index-BnVcq33n.cjs");require("./theme.cjs");const T=require("./popover-DIMT3pae.cjs");var S=M.Extension.create({name:"textAlign",addOptions(){return{types:[],alignments:["left","center","right","justify"],defaultAlignment:null}},addGlobalAttributes(){return[{types:this.options.types,attributes:{textAlign:{default:this.options.defaultAlignment,parseHTML:e=>{const t=e.style.textAlign;return this.options.alignments.includes(t)?t:this.options.defaultAlignment},renderHTML:e=>e.textAlign?{style:`text-align: ${e.textAlign}`}:{}}}}]},addCommands(){return{setTextAlign:e=>({commands:t})=>this.options.alignments.includes(e)?this.options.types.map(n=>t.updateAttributes(n,{textAlign:e})).some(n=>n):!1,unsetTextAlign:()=>({commands:e})=>this.options.types.map(t=>e.resetAttributes(t,"textAlign")).some(t=>t),toggleTextAlign:e=>({editor:t,commands:n})=>this.options.alignments.includes(e)?t.isActive({textAlign:e})?n.unsetTextAlign():n.setTextAlign(e):!1}},addKeyboardShortcuts(){return{"Mod-Shift-l":()=>this.editor.commands.setTextAlign("left"),"Mod-Shift-e":()=>this.editor.commands.setTextAlign("center"),"Mod-Shift-r":()=>this.editor.commands.setTextAlign("right"),"Mod-Shift-j":()=>this.editor.commands.setTextAlign("justify")}}}),C=S;function K(){const[e,t]=y.useState(!1),n=r.useButtonProps(b.name),{icon:x=void 0,tooltip:A=void 0,items:l=[],isActive:m=void 0}=(n==null?void 0:n.componentProps)??{},{disabled:c,dataState:a}=r.useActive(m),h=y.useMemo(()=>(a==null?void 0:a.title)||"",[a]),d=y.useMemo(()=>l==null?void 0:l.some(i=>i.title===h),[l,h]);return n?s.jsxs(T.Popover,{modal:!0,onOpenChange:t,open:e,children:[s.jsx(T.PopoverTrigger,{asChild:!0,className:"hover:richtext-bg-accent data-[state=on]:richtext-bg-accent","data-state":d?"on":"off",disabled:c,children:s.jsx(r.ActionButton,{customClass:"!richtext-w-12 richtext-h-12",disabled:c,icon:x,tooltip:A,children:s.jsx(r.IconComponent,{className:"richtext-ml-1 richtext-size-3 richtext-text-zinc-500",name:"MenuDown"})})}),s.jsx(T.PopoverContent,{align:"start",className:"richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",side:"bottom",children:l==null?void 0:l.map((i,p)=>{var o,u;return s.jsxs(r.Tooltip,{children:[s.jsx(r.TooltipTrigger,{asChild:!0,children:s.jsx(r.Toggle,{className:"richtext-size-7 richtext-p-1","data-state":h===i.title?"on":"off",size:"sm",onClick:()=>{i==null||i.action(),t(!1)},children:(i==null?void 0:i.icon)&&s.jsx(r.IconComponent,{name:i.icon})})}),s.jsxs(r.TooltipContent,{className:"richtext-flex richtext-flex-col richtext-items-center",children:[s.jsx("span",{children:i.title}),!!((o=i.shortcutKeys)!=null&&o.length)&&s.jsx("span",{children:(u=i.shortcutKeys)==null?void 0:u.map(g=>r.getShortcutKey(g)).join(" ")})]})]},`text-align-${p}`)})})]}):s.jsx(s.Fragment,{})}const b=C.extend({addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),types:["heading","paragraph","list_item","title"],button({editor:t,extension:n,t:x}){var a,h,d,i,p;const A=((a=n.options)==null?void 0:a.alignments)||[],l={left:((h=n.options.shortcutKeys)==null?void 0:h[0])??["mod","Shift","L"],center:((d=n.options.shortcutKeys)==null?void 0:d[1])??["mod","Shift","E"],right:((i=n.options.shortcutKeys)==null?void 0:i[2])??["mod","Shift","R"],justify:((p=n.options.shortcutKeys)==null?void 0:p[3])??["mod","Shift","J"]},m={left:"AlignLeft",center:"AlignCenter",right:"AlignRight",justify:"AlignJustify"},c=A.map(o=>{var u,g,j;return{title:x(`editor.textalign.${o}.tooltip`),icon:m[o],shortcutKeys:l[o],isActive:()=>t.isActive({textAlign:o})||!1,action:()=>{var f,v;return(v=(f=t.commands)==null?void 0:f.setTextAlign)==null?void 0:v.call(f,o)},disabled:!((j=(g=(u=t==null?void 0:t.can)==null?void 0:u.call(t))==null?void 0:g.setTextAlign)!=null&&j.call(g,o))}});return{componentProps:{icon:"AlignJustify",tooltip:x("editor.textalign.tooltip"),items:c,isActive:()=>c==null?void 0:c.find(u=>u.isActive())}}}}}});exports.RichTextAlign=K;exports.TextAlign=b;