# Text Editor The Text Editor component is used for rich-text editing. It is based on [Tiptap](https://tiptap.dev). ## Usage The TextEditor component is very flexible in terms of layout and features. It provides building blocks like menus and slots for building any type of editor experience you might want. Here is a basic version with fixed menu at the top. ```vue ``` If you are on Vue version 3.2 or earlier, you need to add this line in your main.js file: ```js app.config.unwrapInjectedRef = true ``` You can read more about it here: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity ## Props | Name | Default | Value | Description | | :------------------ | :------ | :-------------------------- | :----------------------------------------------------------------------------------------------------- | | `content` | `null` | `String` | HTML string to set as the initial value in the editor | | `placeholder` | `null` | `String` | Placeholder text to show when the content is empty | | `editorClass` | `null` | `String \| Object \| Array` | Valid [CSS class values](https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes) | | `editable` | `true` | `Boolean` | Enable/disable editing | | `fixedMenu` | `null` | `true \| false \| Array` | See [customizing menu](#customizing-menu) | | `bubbleMenu` | `null` | `true \| false \| Array` | See [customizing menu](#customizing-menu) | | `floatingMenu` | `null` | `true \| false \| Array` | See [customizing menu](#customizing-menu) | | `extensions` | `null` | `Array` | [Tiptap extensions](https://tiptap.dev/extensions) | | `starterkitOptions` | `null` | `Object` | Options to pass to the [Starterkit Extension](https://tiptap.dev/api/extensions/starter-kit) | | `mentions` | `null` | `Array` | Array of `{label, value}` for mentions list | ## Customizing Menu There are three types of menus available for the editor. - Fixed Menu: Menu that is always visible at a fixed place - Bubble Menu: Menu that shows up when you select some text - Floating Menu: Menu that shows up on a new line You can choose to use any of these or a combination of these in your editor. Here are some examples of customized editors: ### Fixed menu with custom buttons You can customize which buttons show up in the menu by passing an array of button names. You can find the list of all buttons available [here](https://github.com/jingrow/jingrow-ui/blob/main/src/components/TextEditor/commands.js). ```vue ``` ### Minimal editor with bubble menu Setting `bubbleMenu` to `true` will show a bubble menu on text selection. You can also pass a list of button names, just like the previous example. ```vue ``` ### Floating menu and bubble menu You can combine multiple menus. You can also pass an array of button names. ```vue ``` ### Comment Editor An example of how to use slots and various features of the TextEditor to make a customized editor experience. There are three slots available: `top`, `bottom` and `editor`. The `top` and `bottom` are slots for placing menus at the top or bottom of the editor. If you are using these slots, you must import and render the Menu components manually. They are available to import as `TextEditorFixedMenu`, `TextEditorBubbleMenu`, and `TextEditorFloatingMenu`. The `editor` slot renders the `TextEditorContent` component, you can override it and render the `TextEditorContent` component if you want some custom behaviour. ```vue ```