group all content files by section

This commit is contained in:
Hans Pagel
2020-08-18 21:47:04 +02:00
parent c182842681
commit 4d297e9116
18 changed files with 25 additions and 33 deletions

View File

@@ -0,0 +1,62 @@
# Commands
- menus
- buttons
- commands
## .clearContent()
Clear the whole document.
## .deleteSelection()
Delete the selection, if there is one.
## .focus()
Focus the editor at the given position.
## .insertHTML()
Insert a string of HTML at the currently selected position.
## .insertText()
Insert a string of text at the currently selected position.
## .removeMark()
Remove a mark in the current selection.
## .removeMarks()
Remove all marks in the current selection.
## .replaceWithNode()
Replace a given range with a node.
## .selectAll()
Select the whole document.
## .selectParentNode()
Select the parent node.
## .setContent()
Replace the whole document with new content.
## .toggleMark()
Toggle a mark on and off.
## .toggleNode()
Toggle a node with another node.
## .updateMark()
Update a mark with new attributes.

View File

@@ -0,0 +1,3 @@
# Editor
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.

View File

@@ -0,0 +1 @@
# Events

View File

@@ -0,0 +1,10 @@
# Extensions
> ⚠️ TODO: This is old content.
By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. You must
install `tiptap-extensions` package separately so that you can use basic Nodes, Marks, or Plugins. An extension is
usually tied to a Command. The official set of commands are part of the
[`tiptap-commands`][@npmjs-tiptap-commands] package.
[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands

View File

@@ -0,0 +1,70 @@
# Schema
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
This schema is *very* strict. You cant use any HTML-element or attribute that is not defined in your schema.
For example if you paste something like `This is <strong>important</strong>` into tiptap and dont have registered any extension that handles `strong` tags, youll only see `This is important`.
## How a schema looks like
The most simple schema for a typical *ProseMirror* editor is looking something like that.
```js
{
nodes: {
document: {
content: 'block+',
},
paragraph: {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
},
text: {
group: 'inline',
},
},
}
```
We register three nodes here. `document`, `paragraph` and `text`. `document` is the root node which allows one or more block nodes as children (`content: 'block+'`). Since `paragraph` is in the group of block nodes (`group: 'block'`) our document can only contain paragraphs. Our paragraphs allow zero or more inline nodes as children (`content: 'inline*'`) so there can only be `text` in it. `parseDOM` defines how a node can be parsed from pasted HTML. `toDOM` defines how it will be rendered in the DOM.
In tiptap we define every node in its own `Extension` class instead. This allows us to split logic per node. Under the hood the schema will be merged together.
```js
class Document extends Node {
name = 'document'
topNode = true
schema() {
return {
content: 'block+',
}
}
}
class Paragraph extends Node {
name = 'paragraph'
schema() {
return {
content: 'inline*',
group: 'block',
parseDOM: [{ tag: 'p' }],
toDOM: () => ['p', 0],
}
}
}
class Text extends Node {
name = 'text'
schema() {
return {
group: 'inline',
}
}
}
```