add content

This commit is contained in:
Hans Pagel
2020-11-05 16:02:12 +01:00
parent 1aebab31d9
commit 36f8b29f0d
3 changed files with 137 additions and 14 deletions

View File

@@ -14,7 +14,7 @@ editor.bold()
While thats perfectly fine and does make the selected bold, youd likely want to change multiple commands in one run. Lets have a look at how that works.
## Chain commands
### Chain commands
Most commands can be executed combined to one call. First of all, thats shorter than separate function call in most cases. Here is an example to make the selected text bold:
```js
@@ -27,26 +27,43 @@ When a user clicks on a button outside of the content, the editor isnt in foc
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.
## Dry run for commands
Sometimes, you dont want to actually run the commands, but only know if it would be possible to run commands, for example to show or hide buttons in a menu. Inside of a command you can *try* to execute other commands, without actually changing the content like this:
### Dry run for commands
Sometimes, you dont want to actually run the commands, but only know if it would be possible to run commands, for example to show or hide buttons in a menu. Thats what we added `.can()` for. Everything coming after this method will be executed, without applying the changes to the document:
```js
commands.try([
() => commands.splitBlock(),
() => commands.whatever(),
])
editor.can().bold()
```
Outside of components you can do this, too. The editor exposes a try method, which passes all commands and expects an array of commands you want to try:
And you can use it together with `.chain()`, too. Here is an example which checks if its possible to apply all the commands:
```js
editor.can().chain().bold().italic().run()
```
Both calls would return `true` if its possible to apply the commands, and `false` in case its not.
### Try commands
If you want to run a list of commands, but want only the first successful command to be applied, you can do this with the `.try()` method. This method runs one command after the other and stops at the first which returns `true`.
For example, the backspace key tries to undo an input rule first. If that was successful, it stops there. If no input rule has been applied and thus cant be reverted, it runs the next command and deletes the selection, if there is one. Here is the simplified example:
```js
editor.try(({ commands }) => [
() => commands.splitBlock(),
() => commands.whatever(),
() => commands.undoInputRule(),
() => commands.deleteSelection(),
// …
])
```
This stops at the first command which return `false`. Commands after that wont be executed. Even if all commands would be possible to run, none of the changes are applied to the document.
Inside of commands you can do the same thing like that:
```js
commands.try([
() => commands.undoInputRule(),
() => commands.deleteSelection(),
// …
])
```
## List of commands
Have a look at all of the core commands listed below. They should give you a good first impression of whats possible.
@@ -98,5 +115,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .scrollIntoView() | Scroll the selection into view. |
| .selectAll() | Select the whole document. |
### Extensions
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-custom-extensions) with custom commands aswell.
## Add your own 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-custom-extensions) with custom commands aswell.

View File

@@ -76,35 +76,121 @@ Marks can be applied to specific parts of a node. Thats the case for **bold**
### The node schema
#### Content
> The content expression for this node, as described in the schema guide. When not given, the node does not allow any content.
The content attribute defines exactly what kind of content the node can have. ProseMirror is really strict with that. That means, content which doesnt fit the schema is thrown away. It expects a name or group as a string. Here are a few examples:
```js
createNode({
// must have one ore more blocks
content: 'block+',
// allows all kinds of 'inline' content (text or hard breaks)
content: 'inline*',
// must not have anything else than 'text'
content: 'text*',
// can have one or more paragraphs, or lists (if lists are used)
content: '(paragraph|list?)+',
})
```
#### Marks
> The marks that are allowed inside of this node. May be a space-separated string referring to mark names or groups, "_" to explicitly allow all marks, or "" to disallow marks. When not given, nodes with inline content default to allowing all marks, other nodes default to not allowing marks.
```js
createNode({
// must contain 'bold' marks only
marks: 'bold',
// allows all marks
marks: '_',
// disallows all marks
marks: '',
})
```
#### Group
> The group or space-separated groups to which this node belongs, which can be referred to in the content expressions for the schema.
```js
createNode({
// add to 'block' group
group: 'block',
// add to 'inline' group
group: 'inline',
// add to 'block' and 'list' group
group: 'block list',
})
```
#### Inline
> Should be set to true for inline nodes. (Implied for text nodes.)
```js
createNode({
// renders nodes in line with, for example, the text
inline: true,
})
```
#### Atom
> Can be set to true to indicate that, though this isn't a leaf node, it doesn't have directly editable content and should be treated as a single unit in the view.
```js
createNode({
atom: true,
})
```
#### Selectable
> Controls whether nodes of this type can be selected as a node selection. Defaults to true for non-text nodes.
```js
createNode({
selectable: true,
})
```
#### Draggable
> Determines whether nodes of this type can be dragged without being selected. Defaults to false.
```js
createNode({
draggable: true,
})
```
#### Code
> Can be used to indicate that this node contains code, which causes some commands to behave differently.
```js
createNode({
code: true,
})
```
#### Defining
> Determines whether this node is considered an important parent node during replace operations (such as paste). Non-defining (the default) nodes get dropped when their entire content is replaced, whereas defining nodes persist and wrap the inserted content. Likewise, in inserted content the defining parents of the content are preserved when possible. Typically, non-default-paragraph textblock types, and possibly list items, are marked as defining.
```js
createNode({
defining: true,
})
```
#### Isolating
> When enabled (default is false), the sides of nodes of this type count as boundaries that regular editing operations, like backspacing or lifting, won't cross. An example of a node that should probably have this enabled is a table cell.
```js
createNode({
isolating: true,
})
```
### The mark schema
#### Inclusive
> Whether this mark should be active when the cursor is positioned at its end (or at its start when that is also the start of the parent node). Defaults to true.

View File

@@ -1,8 +1,26 @@
# Monthly reports
## October 2020
* Writing extensions for tiptap 2
* 25 sponsors, $423/month
* 102 hours, $7,140 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$6,816**
## September 2020
* Developing the API of tiptap 2, writing the documentation
* 125 hours, $8,750 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$8,849**
## August 2020
* Setting up tiptap 2
* 56 hours, $3,920 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$4,019**
## All time
* **Total -$19.684**