Documentor - Flexible Text Editor for React
npm install @reusejs/documentorDocumentor - Flexible Text Editor for React
Documentor is a fully flexible rich text editor based on lexical-playground and lexical framework.
⚠️ As the Lexical framework is currently in early development, this component library is also likely to change quite often
```
npm install @reusejs/documentor --save
Live demo is coming soon...
`js
import { FC } from 'react';
import {
EditorComposer,
Editor,
ToolbarPlugin,
AlignDropdown,
BackgroundColorPicker,
BoldButton,
CodeFormatButton,
FloatingLinkEditor,
FontFamilyDropdown,
FontSizeDropdown,
InsertDropdown,
InsertLinkButton,
ItalicButton,
TextColorPicker,
TextFormatDropdown,
UnderlineButton,
Divider,
} from '@reusejs/documentor';
const NoteViewer: FC = () => {
return (
);
};
export default NoteViewer;
`
| Property | Type | | description |
| ------------------ | --------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------- |
| children | ReactNode | optional | Nested child components, like the ToolbarPlugin |boolean
| hashtagsEnabled | | optional | Enables the automatic hashtag highlighting, default is false |boolean
| autoLinkEnabled | | optional | Enables the automatic link highlighting, default is false |boolean
| emojisEnabled | | optional | Replaces the emoji combiniations with its corresponding symbol, default is false |boolean
| actionsEnabled | | optional | Enables the actions toolbar, default is false |string
| placeholder | | optional | The default content of the editor when it is first loaded |number
| listMaxIndent | | optional | The maximum indent capacity of any listed element, the default is 7 |boolean
| isReadOnly | | optional | Enables read-only mode for the editor, default is false |string
| initialEditorState | | optional | JSON string to initialize the initial content of the editor. |(editorState: string, editorInstance?: LexicalEditor) => void
| onChange | | optional | Accessing the current editor state and the active editor instance |
| Property | Type | | description |
| ----------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------------ |
| children | React.ReactElement[] | optional | Nested child components, like the InsertDropdown |string
| defaultFontSize | | optional | The default font size selected when the editor first loaded, default value is 15px |string
| defaultFontColor | | optional | The default font color selected when the editor first loaded, default value is #000 |string
| defaultBgColor | | optional | The default text background color selected when the editor first loaded, default value is #fff |string
| defaultFontFamily | | optional | The default font family selected when the editor first loaded, default value is Arial |
| Property | Type | | description |
| -------------------- | --------- | -------- | ------------------------------------------------ |
| enableTable | boolean | optional | Enables table inserting feature |boolean
| enableYoutube | | optional | Enables youtube video inserting feature |boolean
| enableTwitter | | optional | Enables tweet inserting feature |boolean
| enablePoll | | optional | Enables poll inserting feature |boolean
| enableImage | | optional | Enables image inserting feature |boolean
| enableEquations | | optional | Enables equation inserting feature |boolean
| enableExcalidraw | | optional | Enables diagram inserting feature |boolean
| enableHorizontalRule | | optional | Enables the horizontal rule inserting for layout |boolean
| enableStickyNote | | optional | Enables stick note inserting for layout |
For development use:
`npm install --legacy-peer-deps
$ npm install (in case of an error, run )``
$ npm start
$ npm run storybook
- Test coverage
- Programmatic access to the editor input as JSON
- Localization
- Ready templates with different options (MUI, Bootstrap, etc...)
- Dark/Light modes
- Custom styling flexibility
- Disassembling all of the toolbar to enable using them as nested components, increasing the flexibility
- Enabling adjusting editor settings such read-only mode and etc. programmatically
Licensed under MIT License.