Merge branch 'master' of github.com:tiptap/tiptap-next
# Conflicts: # docs/src/docPages/licensing.md
This commit is contained in:
5
docs/src/docPages/advanced-example.md
Normal file
5
docs/src/docPages/advanced-example.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Advanced Example
|
||||
|
||||
Use a custom list of extensions.
|
||||
|
||||
<demo name="HandleExtensions" />
|
||||
5
docs/src/docPages/basic-example.md
Normal file
5
docs/src/docPages/basic-example.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Basic Example
|
||||
|
||||
This is a basic example of tiptap.
|
||||
|
||||
<demo name="Basic" />
|
||||
57
docs/src/docPages/commands.md
Normal file
57
docs/src/docPages/commands.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 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.
|
||||
3
docs/src/docPages/editor.md
Normal file
3
docs/src/docPages/editor.md
Normal 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.
|
||||
1
docs/src/docPages/events.md
Normal file
1
docs/src/docPages/events.md
Normal file
@@ -0,0 +1 @@
|
||||
# Events
|
||||
1
docs/src/docPages/extensions.md
Normal file
1
docs/src/docPages/extensions.md
Normal file
@@ -0,0 +1 @@
|
||||
# Extensions
|
||||
24
docs/src/docPages/installation.md
Normal file
24
docs/src/docPages/installation.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# Installation
|
||||
|
||||
tiptap has a very modular package structure and is independent of any framework. If you want to start as fast as possible, you need at least the two packages `@tiptap/core` and `@tiptap/starter-kit`.
|
||||
|
||||
```bash
|
||||
# Using npm
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# Using Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
You can use it like this:
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
import extensions from '@tiptap/starter-kit'
|
||||
|
||||
new Editor({
|
||||
element: document.getElementsByClassName('element'),
|
||||
extensions: extensions(),
|
||||
content: '<p>Hey there.</p>',
|
||||
})
|
||||
```
|
||||
23
docs/src/docPages/introduction.md
Normal file
23
docs/src/docPages/introduction.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Introduction
|
||||
|
||||
tiptap is a <g-link to="/renderless">renderless</g-link> wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that are already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
|
||||
Although tiptap tries to hide most of the complexity of ProseMirror, it’s is built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). You’ll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap.
|
||||
|
||||
## Who is using tiptap already?
|
||||
- [GitLab](https://gitlab.com)
|
||||
- [Statamic CMS](https://statamic.com)
|
||||
- [Twill CMS](https://twill.io)
|
||||
- [ApostropheCMS](https://apostrophecms.com)
|
||||
- [Directus CMS](https://directus.io)
|
||||
- [Nextcloud](https://apps.nextcloud.com/apps/text)
|
||||
- [and many more →](https://github.com/scrumpy/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see the [`CONTRIBUTING.md`](https://github.com/scrumpy/tiptap/blob/master/CONTRIBUTING.md) file for details.
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
yarn start
|
||||
```
|
||||
5
docs/src/docPages/react.md
Normal file
5
docs/src/docPages/react.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# React
|
||||
|
||||
This is a basic example of tiptap.
|
||||
|
||||
<demo name="React" mode="react" />
|
||||
3
docs/src/docPages/renderless.md
Normal file
3
docs/src/docPages/renderless.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Renderless
|
||||
|
||||
The implementation of a text editor can be very specific for each use case. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You’ll have full control over markup and styling.
|
||||
70
docs/src/docPages/schema.md
Normal file
70
docs/src/docPages/schema.md
Normal 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 can’t 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 don’t have registered any extension that handles `strong` tags, you’ll 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',
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user