reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
2 lines (1 loc) • 1.53 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./clsx-CXbNJWDD.cjs"),n=require("react/jsx-runtime"),c=require("./index-BnVcq33n.cjs");require("react");require("./theme.cjs");function v(){const e=c.useButtonProps(a.name),{icon:t=void 0,tooltip:o=void 0,shortcutKeys:i=void 0,tooltipOptions:d={},action:s=void 0,isActive:l=void 0}=(e==null?void 0:e.componentProps)??{},{dataState:u,disabled:r,update:p}=c.useToggleActive(l),g=()=>{r||s&&(s(),p())};return e?n.jsx(c.ActionButton,{action:g,dataState:u,disabled:r,icon:t,shortcutKeys:i,tooltip:o,tooltipOptions:d}):n.jsx(n.Fragment,{})}const a=m.Extension.create({name:"codeView",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),button({editor:t,t:o}){return{componentProps:{action:()=>{t.commands.toggleCodeView()},isActive:()=>t.storage.codeView.isActive,disabled:!1,icon:"Html",tooltip:o("editor.codeView.tooltip")||"View HTML Code",customClass:"tiptap-code-view-button"}}}}},addStorage(){return{isActive:!1,originalContent:""}},addCommands(){return{toggleCodeView:()=>({editor:e})=>{const t=e.storage.codeView.isActive;if(t)e.commands.setContent(e.getText());else{const o=e.getHTML();e.storage.codeView.originalContent=o;const i=o.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");e.commands.setContent(`<div class="tiptap-code-view-wrapper">${i}</div>`)}return e.storage.codeView.isActive=!t,!0}}}});exports.CodeView=a;exports.RichTextCodeView=v;