ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-04-03 15:21:30 +02:00
parent 0e6c79a761
commit 4792fc3200
20 changed files with 256 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/src/docPages/api/commands.md
View File

@@ -31,6 +31,26 @@ In the example above two different commands are executed at once. When a user cl
All chained commands are kind of queued up. They are combined to one single transaction. That means, the content is only updated once, also the `update` event is only triggered once.
#### Chaining inside custom commands
When chaining a command, the transaction is held back. If you want to chain commands inside your custom commands, you’ll need to use said transaction and add to it. Here is how you would do that:
```js
addCommands() {
return {
insertTimecode: attributes => ({ chain }) => {
// Doesn’t work:
// return editor.chain() …
// Does work:
return chain()
.insertNode('timecode', attributes)
.insertText(' ')
.run()
},
}
}
```
### Inline commands
In some cases, it’s helpful to put some more logic in a command. That’s why you can execute commands in commands. I know, that sounds crazy, but let’s look at an example:
@@ -208,9 +228,26 @@ this.editor
.createParagraphNear()
.insertHTML('<p></p>')
.run()
``` -->
```
## Add your own commands
Add a custom command to insert a node.
```js
addCommands() {
return {
insertTimecode: attributes => ({ chain }) => {
return chain()
.focus()
.insertNode('timecode', attributes)
.insertText(' ')
.run();
},
}
},
```
-->
## Add custom commands
All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.
Of course, you can [add your custom extensions](/guide/build-extensions) with custom commands aswell.

1
docs/src/docPages/api/concept.md
View File

@@ -23,3 +23,4 @@ ProseMirror has its own vocabulary and you’ll stumble upon all those words now
| Node | Adds blocks, like heading, paragraph. |
| Mark | Adds inline formatting, for example bold or italic. |
| Command | Execute an action inside the editor, that somehow changes the state. |
| Decoration | Styling on top of the document, for example to highlight mistakes. |

79
docs/src/docPages/api/editor.md
View File

@@ -5,8 +5,30 @@
## Introduction
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
## List of available settings
Check out the API documentation to see [all available options](/api/editor/).
## Methods
The editor instance will provide a bunch of public methods. They’ll help you to work with the editor.
Don’t confuse methods with [commands](/api/commands). Commands are used to change the state of editor (content, selection, and so on) and only return `true` or `false`. Methods are regular functions and can return anything.
| Method | Parameters | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `can()` | - | Check if a command or a command chain can be executed. Without executing it. |
| `chain()` | - | Create a command chain to call multiple commands at once. |
| `createDocument()` | `content` EditorContent<br>`parseOptions` | Creates a ProseMirror document. |
| `destroy()` | – | Stops the editor instance and unbinds all events. |
| `getHTML()` | – | Returns the current content as HTML. |
| `getJSON()` | – | Returns the current content as JSON. |
| `getMarkAttributes()` | `name` Name of the mark | Get attributes of the currently selected mark. |
| `getNodeAttributes()` | `name` Name of the node | Get attributes of the currently selected node. |
| `isActive()` | `name` Name of the node or mark<br>`attrs` Attributes of the node or mark | Returns if the currently selected node or mark is active. |
| `isEditable()` | - | Returns whether the editor is editable. |
| `isEmpty()` | - | Check if there is no content. |
| `getCharacterCount()` | - | Get the number of characters for the current document. |
| `registerPlugin()` | `plugin` A ProseMirror plugin<br>`handlePlugins` Control how to merge the plugin into the existing plugins. | Register a ProseMirror plugin. |
| `setOptions()` | `options` A list of options | Update editor options. |
| `unregisterPlugin()` | `name` The plugins name | Unregister a ProseMirror plugin. |
## Settings
### Element
The `element` specifies the HTML element the editor will be binded too. The following code will integrate tiptap with an element with the `.element` class:
@@ -147,37 +169,28 @@ new Editor({
})
```
<!--
| Setting | Type | Default | Description |
| ------------------ | --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `autofocus` | `Boolean` | `false` | Focus the editor on init. |
| `content` | `Object|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
| ~~`editorProps`~~ | ~~`Object`~~ | ~~`{}`~~ | ~~A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps).~~ |
| `element` | `Element` | `false` | Focus the editor on init. |
| `extensions` | `Array` | `[]` | A list of extensions you would like to use. Can be [`Nodes`](/api/nodes), [`Marks`](/api/marks) or [`Extensions`](/api/extensions). |
| `injectCSS` | `Boolean` | `true` | When set to `false` tiptap won’t load [the default ProseMirror CSS](https://github.com/ueberdosis/tiptap-next/tree/main/packages/core/src/style.ts). |
| ~~`parseOptions`~~ | ~~`Object`~~ | ~~`{}`~~ | ~~A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions).~~ | -->
### 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.
## List of available methods
An editor instance will provide the following public methods. They’ll help you to work with the editor.
```js
new Editor({
// Learn more: https://prosemirror.net/docs/ref/#view.EditorProps
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
}
},
})
```
Don’t confuse methods with [commands](/api/commands), which are used to change the state of editor (content, selection, and so on) and only return `true` or `false`.
### Parse options
Passed content is parsed by ProseMirror. To hook into the parsing, you can pass `parseOptions` which are then handled by [ProseMirror](https://prosemirror.net/docs/ref/#model.ParseOptions).
| Method | Parameters | Description |
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `can()` | - | Check if a command or a command chain can be executed. Without executing it. |
| `chain()` | - | Create a command chain to call multiple commands at once. |
| `createDocument()` | `content` EditorContent<br>`parseOptions` | Creates a ProseMirror document. |
| `destroy()` | – | Stops the editor instance and unbinds all events. |
| `getHTML()` | – | Returns the current content as HTML. |
| `getJSON()` | – | Returns the current content as JSON. |
| `getMarkAttributes()` | `name` Name of the mark | Get attributes of the currently selected mark. |
| `getNodeAttributes()` | `name` Name of the node | Get attributes of the currently selected node. |
| `isActive()` | `name` Name of the node or mark<br>`attrs` Attributes of the node or mark | Returns if the currently selected node or mark is active. |
| `isEditable()` | - | Returns whether the editor is editable. |
| `isEmpty()` | - | Check if there is no content. |
| `getCharacterCount()` | - | Get the number of characters for the current document. |
| `registerPlugin()` | `plugin` A ProseMirror plugin<br>`handlePlugins` Control how to merge the plugin into the existing plugins. | Register a ProseMirror plugin. |
| `setOptions()` | `options` A list of options | Update editor options. |
| `unregisterPlugin()` | `name` The plugins name | Unregister a ProseMirror plugin. |
```js
new Editor({
// Learn more: https://prosemirror.net/docs/ref/#model.ParseOptions
parseOptions: {
preserveWhitespace: 'full',
},
})
```

2
docs/src/docPages/api/extensions/collaboration-cursor.md
View File

@@ -41,5 +41,5 @@ This extension requires the [`Collaboration`](/api/extensions/collaboration) ext
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" :show-source="false" />
<demo name="Extensions/CollaborationCursor" hide-source />
<demo name="Extensions/CollaborationCursor" highlight="11,39-45" />

2
docs/src/docPages/api/extensions/collaboration.md
View File

@@ -48,5 +48,5 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" :show-source="false" />
<demo name="Extensions/Collaboration" hide-source />
<demo name="Extensions/Collaboration" highlight="10,27-28,35-37,44" />

7
docs/src/docPages/api/nodes/code-block-lowlight.md Normal file
View File

@@ -0,0 +1,7 @@
# CodeBlockLowlight
:::pro Fund the development ♥
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
:::
TODO

2
docs/src/docPages/api/nodes/code-block.md
View File

@@ -7,7 +7,7 @@ With the CodeBlock extension you can add fenced code blocks to your documents. I
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
::: warning Restrictions
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s [on our roadmap](/api/nodes/code-block-lowlight) though.
:::
## Installation