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

update readme

Browse Source
This commit is contained in:
Philipp Kühn
2018-11-12 22:49:54 +01:00
parent 7dfbb11311
commit f41965f58c
1 changed files with 158 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
README.md
View File

@@ -32,27 +32,32 @@ yarn add tiptap
## Basic Setup ## Basic Setup
```vue ```vue
<template> <template>
<editor> <editor-content :editor="editor" />
<!-- Add HTML to the scoped slot called `content` -->
<div slot="content" slot-scope="props">
<p>Hi, I'm just a boring paragraph</p>
</div>
</editor>
</template> </template>
<script> <script>
// Import the editor // Import the editor
import { Editor } from 'tiptap' import { Editor, EditorContent } from 'tiptap'
export default { export default {
components: { components: {
Editor, EditorContent,
},
data() {
return {
editor: new Editor({
content: '<p>Hi, I'm just a boring paragraph</p>',
}),
}
},
beforeDestroy() {
this.editor.destroy()
}, },
} }
</script> </script>
``` ```
## Editor Properties <!-- ## Editor Properties
| **Property** | **Type** | **Default** | **Description** | | **Property** | **Type** | **Default** | **Description** |
| --- | :---: | :---: | --- | | --- | :---: | :---: | --- |
@@ -61,27 +66,105 @@ export default {
| `watchDoc` | `Boolean` | `true` | If set to `true` the content gets updated whenever `doc` changes. | | `watchDoc` | `Boolean` | `true` | If set to `true` the content gets updated whenever `doc` changes. |
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. | | `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
| `@init` | `Object` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. | | `@init` | `Object` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. |
| `@update` | `Object` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function on every change. | | `@update` | `Object` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function on every change. | -->
## Scoped Slots ## Components
| **Name** | **Description** | | **Name** | **Description** |
| --- | --- | | --- | --- |
| `editor` | Here the content will be rendered. | | `<editor-content />` | Here the content will be rendered. |
| `menubar` | Here a menu bar will be rendered. | | `<editor-menu-bar />` | Here a menu bar will be rendered. |
| `menububble` | Here a menu bubble will be rendered. | | `<editor-menu-bubble />` | Here a menu bubble will be rendered. |
| `<editor-floating-menu />` | Here a floating menu will be rendered. |
### Slot Properties ### EditorMenuBar
The `menubar` and `menububble` slot will receive some properties. The `<editor-menu-bar />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** | | **Property** | **Type** | **Description** |
| --- | :---: | --- | | --- | :---: | --- |
| `nodes` | `Object` | A list of available nodes with active state and command. | | `commands` | `Array` | A list of all commands. |
| `marks` | `Object` | A list of available marks with active state and command. | | `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. | | `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. | | `focus` | `Function` | A function to focus the editor. |
#### Example
```vue
<template>
<editor-menu-bar :editor="editor">
<div slot-scope="{ commands, isActive }">
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold">
Bold
</button>
</div>
</editor-menu-bar>
</template>
```
### EditorMenuBubble
The `<editor-menu-bubble />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| `commands` | `Array` | A list of all commands. |
| `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. |
| `menu` | `Object` | An object for positioning your menu. |
#### Example
```vue
<template>
<editor-menu-bubble :editor="editor">
<div
slot-scope="{ commands, isActive, menu }"
:class="{ 'is-active': menu.isActive }"
:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
>
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold">
Bold
</button>
</div>
</editor-menu-bubble>
</template>
```
### EditorFloatingMenu
The `<editor-floating-menu />` component is renderless and will receive some properties through a scoped slot.
| **Property** | **Type** | **Description** |
| --- | :---: | --- |
| `commands` | `Array` | A list of all commands. |
| `isActive` | `Function` | A function to check if your selected text is a node or mark. `isActive({node|mark}, attrs)` |
| `markAttrs` | `Function` | A function to get all mark attributes of your selection. |
| `focused` | `Boolean` | Whether the editor is focused. |
| `focus` | `Function` | A function to focus the editor. |
| `menu` | `Object` | An object for positioning your menu. |
#### Example
```vue
<template>
<editor-floating-menu :editor="editor">
<div
slot-scope="{ commands, isActive, menu }"
:class="{ 'is-active': menu.isActive }"
:style="`top: ${menu.top}px`"
>
<button :class="{ 'is-active': isActive('bold') }" @click="commands.bold">
Bold
</button>
</div>
</editor-floating-menu>
</template>
```
## Extensions ## Extensions
By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. There is a package called `tiptap-extensions` with the most basic nodes, marks, and plugins. By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. There is a package called `tiptap-extensions` with the most basic nodes, marks, and plugins.
@@ -90,71 +173,75 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
```vue ```vue
<template> <template>
<editor :extensions="extensions"> <div>
<div slot="content" slot-scope="props"> <editor-menu-bar :editor="editor">
<h1>Yay Headlines!</h1> <div slot-scope="{ commands, isActive }">
<p>All these <strong>cool tags</strong> are working now.</p> <button :class="{ 'is-active': isActive('bold') }" @click="commands.bold">
Bold
</button>
</div>
</editor-menu-bar>
<editor-content :editor="editor" />
</div> </div>
</editor>
</template> </template>
<script> <script>
import { Editor } from 'tiptap' import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { import {
// Nodes Blockquote,
BlockquoteNode, CodeBlock,
CodeBlockNode, HardBreak,
CodeBlockHighlightNode, Heading,
HardBreakNode, OrderedList,
HeadingNode, BulletList,
ImageNode, ListItem,
OrderedListNode, TodoItem,
BulletListNode, TodoList,
ListItemNode, Bold,
TodoItemNode, Code,
TodoListNode, Italic,
Link,
// Marks Strike,
BoldMark, Underline,
CodeMark, History,
ItalicMark,
LinkMark,
StrikeMark,
UnderlineMark,
// General Extensions
HistoryExtension,
PlaceholderExtension,
} from 'tiptap-extensions' } from 'tiptap-extensions'
export default { export default {
components: { components: {
Editor, EditorMenuBar,
EditorContent,
}, },
data() { data() {
return { return {
editor: new Editor({
extensions: [ extensions: [
new BlockquoteNode(), new Blockquote(),
new BulletListNode(), new BulletList(),
new CodeBlockNode(), new CodeBlock(),
new HardBreakNode(), new HardBreak(),
new HeadingNode({ maxLevel: 3 }), new Heading({ levels: [1, 2, 3] }),
new ImageNode(), new ListItem(),
new ListItemNode(), new OrderedList(),
new OrderedListNode(), new TodoItem(),
new TodoItemNode(), new TodoList(),
new TodoListNode(), new Bold(),
new BoldMark(), new Code(),
new CodeMark(), new Italic(),
new ItalicMark(), new Link(),
new LinkMark(), new Strike(),
new StrikeMark(), new Underline(),
new UnderlineMark(), new History(),
new HistoryExtension(),
new PlaceholderExtension(),
], ],
content: `
<h1>Yay Headlines!</h1>
<p>All these <strong>cool tags</strong> are working now.</p>
`,
}),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>
``` ```
@@ -230,7 +317,7 @@ export default class BlockquoteNode extends Node {
// this command will be called from menus to add a blockquote // this command will be called from menus to add a blockquote
// `type` is the prosemirror schema object for this blockquote // `type` is the prosemirror schema object for this blockquote
// `schema` is a collection of all registered nodes and marks // `schema` is a collection of all registered nodes and marks
command({ type, schema }) { commands({ type, schema }) {
return wrapIn(type) return wrapIn(type)
} }
@@ -327,49 +414,6 @@ export default class IframeNode extends Node {
} }
``` ```
## Building a Menu
This is a basic example of building a custom menu. A more advanced menu can be found at the [examples page](https://tiptap.scrumpy.io).
```vue
<template>
<editor :extensions="extensions">
<div slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button :class="{ 'is-active': nodes.heading.active({ level: 1 }) }" @click="nodes.heading.command({ level: 1 })">
H1
</button>
<button :class="{ 'is-active': marks.bold.active() }" @click="marks.bold.command()">
Bold
</button>
</div>
</div>
<div slot="content" slot-scope="props">
<p>This text can be made bold.</p>
</div>
</editor>
</template>
<script>
import { Editor } from 'tiptap'
import { HeadingNode, BoldMark } from 'tiptap-extensions'
export default {
components: {
Editor,
},
data() {
return {
extensions: [
new HeadingNode({ maxLevel: 3 }),
new BoldMark(),
],
}
},
}
</script>
```
## Development Setup ## Development Setup
Currently, only Yarn is supported for development because of a feature called workspaces we are using here. Currently, only Yarn is supported for development because of a feature called workspaces we are using here.