@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.16 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@tiptap/extension-placeholder"),i=require("@tiptap/starter-kit"),n=require("mui-tiptap"),o=require("react"),l=require("./StyledRichTextEditor.js");module.exports=({onChange:u,value:s,internalChange:a,minWidth:d=100,minHeight:c=100,maxHeight:h,placeholder:x,options:m={}})=>{const p=o.useRef(null),g=t.useTheme(),{bold:j=!0,italic:q=!0,underline:B=!0,bulletList:L=!1,orderedList:M=!1}=m;return e.jsx(l,{sx:{"& .ProseMirror":{overflowY:"auto",minHeight:c,minWidth:d,maxHeight:h}},ref:p,onUpdate:({editor:e})=>{u&&u(e.getHTML()),a&&a()},enableInputRules:!1,extensions:[i.StarterKit.configure({strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,codeBlock:!1,bold:!!j&&{},italic:!!q&&{},listItem:!(!L&&!M)&&{},bulletList:!!L&&{},orderedList:!!M&&{}}),r.Placeholder.configure({placeholder:x})],content:s,renderControls:()=>e.jsxs(t.Stack,{gap:g.custom.margin.xs,direction:"row",children:[j&&e.jsx(n.MenuButtonBold,{}),q&&e.jsx(n.MenuButtonItalic,{}),B&&e.jsx(n.MenuButtonUnderline,{}),L&&e.jsx(n.MenuButtonBulletedList,{}),M&&e.jsx(n.MenuButtonOrderedList,{})]})})};