mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
79 lines (78 loc) • 5.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, memo } from 'react';
import { Box, InputDescription, InputError, InputLabel, InputWrapper, } from '@mantine/core';
import { Link, RichTextEditor } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import { Color } from '@tiptap/extension-color';
import TextStyle from '@tiptap/extension-text-style';
import Superscript from '@tiptap/extension-superscript';
import SubScript from '@tiptap/extension-subscript';
import TextAlign from '@tiptap/extension-text-align';
import '@mantine/tiptap/styles.css';
import { IconTrash } from '@tabler/icons-react';
const RTEditor = forwardRef(({ editable = true, onChange, value = '', label, description, defaultValue = '', withAsterisk, error, disabled, inputWrapperOrder = ['label', 'description', 'input', 'error'], ...props }, ref) => {
const editor = useEditor({
extensions: [
StarterKit,
Underline,
Link,
Superscript,
SubScript,
TextStyle,
Color,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
editable: !disabled,
immediatelyRender: false,
content: String(value ?? defaultValue),
onUpdate: (edit) => onChange(edit.editor.isEmpty ? '' : edit.editor.getHTML()),
}, [editable]);
const content = inputWrapperOrder.map((part, key) => {
switch (part) {
case 'label':
return (_jsx(InputLabel, { required: withAsterisk, children: label }, "label"));
case 'input':
return (_jsx(Box, { my: 4, children: _jsxs(RichTextEditor, { editor: editor, content: String(value ?? defaultValue), styles: {
root: {
'--mantine-color-body': 'var(--card)',
borderColor: error ? 'var(--mantine-color-error)' : '',
},
content: {
minHeight: 200,
},
}, children: [editor && editable && (_jsxs(RichTextEditor.Toolbar, { sticky: true, stickyOffset: 30, bg: 'var(--card)', children: [_jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.ColorPicker, { colors: [
'#25262b',
'#868e96',
'#fa5252',
'#e64980',
'#be4bdb',
'#7950f2',
'#4c6ef5',
'#228be6',
'#15aabf',
'#12b886',
'#40c057',
'#82c91e',
'#fab005',
'#fd7e14',
] }), _jsx(RichTextEditor.UnsetColor, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.Bold, {}), _jsx(RichTextEditor.Italic, {}), _jsx(RichTextEditor.Underline, {}), _jsx(RichTextEditor.Strikethrough, {}), _jsx(RichTextEditor.ClearFormatting, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.Link, {}), _jsx(RichTextEditor.Unlink, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.AlignLeft, {}), _jsx(RichTextEditor.AlignCenter, {}), _jsx(RichTextEditor.AlignJustify, {}), _jsx(RichTextEditor.AlignRight, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.H1, {}), _jsx(RichTextEditor.H2, {}), _jsx(RichTextEditor.H3, {}), _jsx(RichTextEditor.H4, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.Blockquote, {}), _jsx(RichTextEditor.Hr, {}), _jsx(RichTextEditor.BulletList, {}), _jsx(RichTextEditor.OrderedList, {}), _jsx(RichTextEditor.Subscript, {}), _jsx(RichTextEditor.Superscript, {})] }), _jsxs(RichTextEditor.ControlsGroup, { children: [_jsx(RichTextEditor.Undo, {}), _jsx(RichTextEditor.Redo, {}), _jsx(RichTextEditor.Control, { disabled: editor?.isEmpty, onClick: () => {
editor
?.chain()
.setContent(String(defaultValue))
.run();
onChange('');
}, "aria-label": "Clear", title: "Clear", children: _jsx(IconTrash, { stroke: 1.5, size: "1rem" }) })] })] })), _jsx(RichTextEditor.Content, {})] }) }, "input"));
case 'description':
return (_jsx(InputDescription, { children: description }, "description"));
case 'error':
return (_jsx(InputError, { ta: 'left', children: error }, "error"));
default:
return null;
}
});
return (_jsxs(InputWrapper, { children: [_jsx("button", { ref: ref }), content] }));
});
RTEditor.displayName = 'RTEditor';
export const RichTextInput = memo(RTEditor);