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

Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

Browse Source
This commit is contained in:
Philipp Kühn
2020-09-24 22:21:48 +02:00
parent 9df4cd4e35 a00bb32cc4
commit 3b785c5430
7 changed files with 63 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/src/demos/Examples/Basic/index.vue
View File

@@ -1,9 +1,7 @@
<template>
<div>
BUG: Headings can’t be transformed to a bullet or ordered list.
<div v-if="editor">
<button @click="editor.chain().focus().removeMarks().run()">
clear format
</button>
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
@@ -19,14 +17,8 @@
<button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
bullet list
</button>
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
<button @click="editor.chain().focus().removeMarks().run()">
clear format
</button>
<button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
@@ -49,6 +41,15 @@
<button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
bullet list
</button>
<button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>

2
docs/src/demos/General/Installation/index.vue
View File

@@ -18,7 +18,7 @@ export default {
mounted() {
this.editor = new Editor({
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
content: '<p>Hello, I’m tiptap running in Vue.js! 👋</p>',
extensions: defaultExtensions(),
})
},

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

@@ -1,65 +1,35 @@
# Commands
:::warning Out of date
This content is written for tiptap 1 and needs an update.
:::
## Chain commands
- menus
- buttons
- commands
```js
editor.chain().focus().bold().run()
```
## .clearContent()
## List of commands
Clear the whole document.
### Content
| Command | Description |
| --------------- | ----------------------------------------------------------- |
| .clearContent() | Clear the whole document. |
| .insertHTML() | Insert a string of HTML at the currently selected position. |
| .insertText() | Insert a string of text at the currently selected position. |
| .setContent() | Replace the whole document with new content. |
## .deleteSelection()
### Nodes & Marks
| Command | Description |
| ------------------- | ------------------------------------------ |
| .removeMark() | Remove a mark in the current selection. |
| .removeMarks() | Remove all marks in the current selection. |
| .replaceWithNode() | Replace a given range with a node. |
| .selectParentNode() | Select the parent node. |
| .toggleMark() | Toggle a mark on and off. |
| .toggleNode() | Toggle a node with another node. |
| .updateMark() | Update a mark with new attributes. |
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.
### Selection
| Command | Description |
| ------------------ | --------------------------------------- |
| .deleteSelection() | Delete the selection, if there is one. |
| .focus() | Focus the editor at the given position. |
| .selectAll() | Select the whole document. |

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

@@ -1,17 +1,13 @@
# Extensions
Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
## A minimalist set of extensions
You’ll need at least three extensions: Document, Paragraph and Text. See [an example of a tiptap version for minimalists](/examples/minimalist).
You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist).
## Default extensions
You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. See [how you can use the `defaultExtensions()`](/examples/basic).
## List of supported extensions
| Title | Default Extension | Source Code |
| ------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
| [Blockquote](/api/extensions/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) |
@@ -44,13 +40,9 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
<!-- | [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) -->
## Community extensions
:::warning Work in Progress
This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets.
:::
## Your custom extensions
Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/custom-extensions).
[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands

15
docs/src/docPages/api/overview.md Normal file
View File

@@ -0,0 +1,15 @@
# Overview
* tiptap is a friendly wrapped around ProseMirror.
* ProseMirror works with a strict [Schema](/api/schema), which defines the allowed structure of a document.
* A document is a tree of headings, paragraphs and others elements, so called nodes.
* Marks can be attached to a node, e. g. to emphasize part of it.
* [Commands](/api/commands) change that document programmatically.
* The document is stored in a state.
* All changes are applied as transactions to the state.
* The state has details about the current content, cursor position and selection.
* You can hook into a few different [events](/api/events), for example to alter transactions before they get applied.
* [Extensions](/api/extensions) add functionality like nodes, marks and/or commands to the editor.
* A huge amount of commands are bound to common [keyboard shortcuts](/api/keyboard-shortcuts).
All of those concepts are explained in detail on the following pages.

13
docs/src/docPages/overview/installation.md
View File

@@ -1,15 +1,7 @@
# Installation
You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
## Overview <!-- omit in toc -->
- [Option 1: Vanilla JavaScript](#option-1-vanilla-javascript)
- [Option 2: Vue.js](#option-2-vuejs)
- [Option 3: CodeSandbox](#option-3-codesandbox)
## Option 1: Vanilla JavaScript
Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.
```bash
@@ -39,7 +31,6 @@ new Editor({
```
## Option 2: Vue.js
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
```bash
@@ -60,10 +51,10 @@ Create a new component and add the following content to get a basic version of t
<demo name="General/Installation" />
## Option 3: CodeSandbox
<!-- ## Option 3: CodeSandbox
CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
It’s also amazing for bug reports. Found it a bug? Try to recreate it there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). That helps to fix bugs faster.
* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28) -->

7
docs/src/links.yaml
View File

@@ -105,10 +105,12 @@
- title: API
items:
- title: Overview
link: /api/overview
- title: Editor
link: /api/editor/
link: /api/editor
- title: Extensions
link: /api/extensions/
link: /api/extensions
items:
- title: Blockquote
link: /api/extensions/blockquote
@@ -176,7 +178,6 @@
link: /api/extensions/underline
- title: Commands
link: /api/commands
draft: true
- title: Events
link: /api/events
- title: Schema