docs: Clear up Prosemirror EditorProps usage

This commit is contained in:
domnantas 2021-09-20 23:39:03 +03:00 committed by Hans Pagel
parent 047ef8c8c9
commit 27f8986866
2 changed files with 9 additions and 4 deletions

View File

@ -187,7 +187,7 @@ new Editor({
``` ```
### Editor props ### Editor props
For advanced use cases, you can pass `editorProps` which will be handled by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). Here is an example how you can pass a few [Tailwind](https://tailwindcss.com/) classes to the editor container, but there is a lot more you can do. For advanced use cases, you can pass `editorProps` which will be handled by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). Here is an example how you can pass a few [Tailwind](https://tailwindcss.com/) classes to the editor container, and transform pasted text, but there is a lot more you can do.
```js ```js
new Editor({ new Editor({
@ -196,8 +196,11 @@ new Editor({
attributes: { attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none', class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
}, },
}, transformPastedText(text) {
}) return text.toUpperCase();
}
}
});
``` ```
You can use that to hook into event handlers and pass - for example - a custom paste handler, too. You can use that to hook into event handlers and pass - for example - a custom paste handler, too.

View File

@ -499,7 +499,9 @@ const History = Extension.create({
``` ```
#### Access the ProseMirror API #### Access the ProseMirror API
To hook into events, for example a click, double click or when content is pasted, you can pass event handlers as `editorProps` to the [editor](/api/editor). Or you can add them to a tiptap extension like shown in the below example. To hook into events, for example a click, double click or when content is pasted, you can pass [event handlers](https://prosemirror.net/docs/ref/#view.EditorProps) to `editorProps` on the [editor](/api/editor).
Or you can add them to a tiptap extension like shown in the below example.
```js ```js
import { Extension } from '@tiptap/core' import { Extension } from '@tiptap/core'