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

Merge branch 'main' into feature/extension-code-block-lowlight

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-07 22:39:39 +02:00
parent 6720666fc3 7c4c50e520
commit 95f31f48fd
125 changed files with 1230 additions and 1389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,8 +43,8 @@ addCommands() {
// Does work:
return chain()
.insertNode('timecode', attributes)
.insertText(' ')
.insertContent('foo!')
.insertContent('bar!')
.run()
},
}
@@ -60,7 +60,7 @@ editor
.focus()
.command(({ tr }) => {
// manipulate the transaction
tr.insertText('hey, that’s cool!')
tr.insertContent('hey, that’s cool!')
return true
})
@@ -91,7 +91,7 @@ Both calls would return `true` if it’s possible to apply the commands, and `fa
In order to make that work with your custom commands, don’t forget to return `true` or `false`.
For some of your own commands, you probably want to work with the raw [transaction](/api/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how we do that within `.insertText()`:
For some of your own commands, you probably want to work with the raw [transaction](/api/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how you can create a simple `.insertText()` command:
```js
export default (value: string): Command => ({ tr, dispatch }) => {
@@ -148,13 +148,11 @@ commands.first([
Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible.
### Content
| Command | Description |
| --------------- | ------------------------------------------------ |
| .clearContent() | Clear the whole document. |
| .insertHTML() | Insert a string of HTML at the current position. |
| .insertNode() | Insert a node at the current position. |
| .insertText() | Insert a string of text at the current position. |
| .setContent() | Replace the whole document with new content. |
| Command | Description | Links |
| ---------------- | -------------------------------------------------------- | ------------------------------------ |
| .clearContent() | Clear the whole document. | [More](/api/commands/clear-content) |
| .insertContent() | Insert a node or string of HTML at the current position. | [More](/api/commands/insert-content) |
| .setContent() | Replace the whole document with new content. | [More](/api/commands/set-content) |
### Nodes & Marks
| Command | Description |
@@ -170,7 +168,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .newlineInCode() | Add a newline character in code. |
| .replace() | Replaces text with a node. |
| .replaceRange() | Replaces text with a node within a range. |
| .resetNodeAttributes() | Resets all node attributes to the default value. |
| .resetAttributes() | Resets some node or mark attributes to the default value. |
| .selectParentNode() | Select the parent node. |
| .setMark() | Add a mark with new attributes. |
| .setNode() | Replace a given range with a node. |
@@ -181,7 +179,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .undoInputRule() | Undo an input rule. |
| .unsetAllMarks() | Remove all marks in the current selection. |
| .unsetMark() | Remove a mark in the current selection. |
| .updateNodeAttributes() | Update attributes of a node. |
| .updateAttributes() | Update attributes of a node or mark. |
### Lists
| Command | Description |
@@ -220,13 +218,13 @@ this.editor
.chain()
.focus()
.createParagraphNear()
.insertText(text)
.insertContent(text)
.setBlockquote()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.createParagraphNear()
.unsetBlockquote()
.createParagraphNear()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.run()
```
@@ -237,7 +235,18 @@ addCommands() {
insertTimecode: attributes => ({ chain }) => {
return chain()
.focus()
.insertNode('timecode', attributes)
.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'heading',
},
],
})
.insertText(' ')
.run();
},
@@ -249,5 +258,5 @@ addCommands() {
## 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.
Of course, you can [add your custom extensions](/guide/custom-extensions) with custom commands aswell.

12
docs/src/docPages/api/commands/clear-content.md Normal file
View File

@@ -0,0 +1,12 @@
# clearContent
See also: [setContent](/api/commands/set-content)
## Parameters
## Usage
```js
this.editor.commands.clearContent()
```

23
docs/src/docPages/api/commands/insert-content.md Normal file
View File

@@ -0,0 +1,23 @@
# insertContent
## Parameters
## Usage
```js
this.editor.commands.insertContent('text')
this.editor.commands.insertContent('<p>HTML</p>')
this.editor.commands.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'nested nodes',
},
],
})
```

42
docs/src/docPages/api/commands/set-content.md Normal file
View File

@@ -0,0 +1,42 @@
# setContent
The `setContent` command replaces the document with a new one. You can pass JSON or HTML, both work fine. It’s basically the same as setting the `content` on initialization.
See also: [clearContent](/api/commands/clear-content)
## Parameters
`content: string`
Pass a string (JSON or HTML) as [content](/guide/output). The editor will only render what’s allowed according to the [schema](/api/schema).
`emitUpdate?: Boolean`
By default, it doesn’t trigger the update event. Passing `true` doesn’t prevent triggering the update event.
`parseOptions?: AnyObject`
Options to configure the parsing can be passed during initialization and/or with setContent. Read more about parseOptions in the [ProseMirror documentation](https://prosemirror.net/docs/ref/#model.ParseOptions).
## Usage
```js
// HTML
this.editor.commands.setContent('<p>Example Text</p>')
// JSON
this.editor.commands.setContent({
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
]
})
```

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

@@ -14,7 +14,6 @@ Don’t confuse methods with [commands](/api/commands). Commands are used to cha
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `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. |
@@ -129,7 +128,7 @@ new Editor({
| `null` | Disables autofocus. |
### Enable input rules
By default, tiptap enables all [input rules](/guide/build-extensions/#input-rules). With `enableInputRules` you can disable that.
By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rules). With `enableInputRules` you can disable that.
```js
import { Editor } from '@tiptap/core'
@@ -143,7 +142,7 @@ new Editor({
```
### Enable paste rules
By default, tiptap enables all [paste rules](/guide/build-extensions/#paste-rules). With `enablePasteRules` you can disable that.
By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
```js
import { Editor } from '@tiptap/core'

10
docs/src/docPages/api/events.md
View File

@@ -19,9 +19,6 @@ const editor = new Editor({
onSelectionUpdate({ editor }) {
// The selection has changed.
},
onViewUpdate({ editor }) {
// The view has changed.
},
onTransaction({ editor, transaction }) {
// The editor state has changed.
},
@@ -57,10 +54,6 @@ editor.on('selectionUpdate', ({ editor }) => {
// The selection has changed.
}
editor.on('viewUpdate', ({ editor }) => {
// The view has changed.
}
editor.on('transaction', ({ editor, transaction }) => {
// The editor state has changed.
}
@@ -113,9 +106,6 @@ const CustomExtension = Extension.create({
onSelectionUpdate({ editor }) {
// The selection has changed.
},
onViewUpdate({ editor }) {
// The view has changed.
},
onTransaction({ editor, transaction }) {
// The editor state has changed.
},

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

@@ -51,6 +51,7 @@ const editor = new Editor({
Text,
// …
],
})
```
Learn [more about custom extensions in our guide](/guide/extend-extensions).

3
docs/src/docPages/api/nodes.md
View File

@@ -49,6 +49,7 @@ const editor = new Editor({
Text,
// …
],
})
```
Learn [more about custom extensions in our guide](/guide/build-extensions).
Learn [more about custom extensions in our guide](/guide/custom-extensions).

2
docs/src/docPages/api/nodes/emoji.md
View File

@@ -13,7 +13,7 @@ We need your support to maintain, update, support and develop tiptap 2. If you
You can use any emoji picker, or build your own. Just use [commands](/api/commands) to insert the picked emojis.
```js
this.editor.chain().focus().insertText('✨').run()
this.editor.chain().focus().insertContent('✨').run()
```
<demo name="Nodes/Emoji" />

2
docs/src/docPages/api/schema.md
View File

@@ -7,7 +7,7 @@ Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net
This schema is *very* strict. You can’t use any HTML element or attribute that is not defined in your schema.
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, don’t have any extension that handles `strong` tags registered, you’ll only see `This is important` – without the strong tags.
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, but don’t have any extension that handles `strong` tags, you’ll only see `This is important` – without the strong tags.
## How a schema looks like
When you’ll work with the provided extensions only, you don’t have to care that much about the schema. If you’re building your own extensions, it’s probably helpful to understand how the schema works. Let’s look at the most simple schema for a typical ProseMirror editor: