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