mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-08-06 13:38:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel 2021-02-04 17:33:59 +01:00
parent d40131d8d1
commit ac97e393d1
14 changed files with 96 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/src/demos/Examples/MultipleEditors/index.vue
View File

@ -33,6 +33,7 @@ import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Bold from '@tiptap/extension-bold'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import Collaboration from '@tiptap/extension-collaboration'
@ -78,7 +79,7 @@ export default {
field: 'title',
}),
],
content: '<p>No matter what you do, this’ll be a single paragraph.',
content: '<p>No matter what you do, this will be a single paragraph.',
})
this.tasks = new Editor({
@ -107,12 +108,16 @@ export default {
Document,
Paragraph,
Text,
Bold,
Collaboration.configure({
document: this.ydoc,
field: 'description',
}),
],
content: `
<p>
<strong>Lengthy text</strong>
</p>
<p>
This can be lengthy text.
</p>
@ -174,9 +179,14 @@ export default {
padding: 0.75rem 1rem;
border-radius: 5px;
border: 1px solid #e9ecef;
transition: .1s all ease-in-out;
&:hover {
border-color: #68CEF8;
}
&--title {
font-size: 1.6rem;
font-size: 1.5rem;
}
&--json {

27
docs/src/demos/Examples/Tables/index.vue
View File

@ -94,15 +94,17 @@ export default {
TableCell,
],
content: `
<p>
<h3>
Have you seen our tables? They are amazing!
</p>
</h3>
<ul>
<li>tables with rows, headers and cells</li>
<li>Support for <code>colgroup</code> and <code>rowspan</code></li>
<li>Resizable columns</li>
</ul>
<li>tables with rows, cells and headers (optional)</li>
<li>support for <code>colgroup</code> and <code>rowspan</code></li>
<li>and even resizable columns (optional)</li>
</ul>
<p>
Here is an example:
</p>
<table>
<tbody>
<tr>
@ -115,6 +117,17 @@ export default {
<td>songwriter</td>
<td>actress</td>
</tr>
<tr>
<td>Philipp Kühn</td>
<td>designer</td>
<td>developer</td>
<td>maker</td>
</tr>
<tr>
<td>Hans Pagel</td>
<td>wrote this</td>
<td colspan="2">that’s it</td>
</tr>
</tbody>
</table>
`,
@ -130,6 +143,8 @@ export default {
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
margin: 1rem 0;
> * + * {
margin-top: 0.75em;
}

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

@ -3,7 +3,7 @@
## toc
## Introduction
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.
Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/marks) are rendered in HTML. Extensions can’t add to the schema, but can add functionality or change the behaviour of the editor.
## List of provided extensions
| Title | Default Extension | Source Code |
@ -19,7 +19,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
| [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/) |
You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/default).
You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. See an example on [how to use `defaultExtensions()`](/examples/default).
## How extensions work
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.

3
docs/src/docPages/api/marks.md
View File

@ -3,8 +3,7 @@
## toc
## Introduction
TODO
Marks add new capabilities to tiptap. Marks are like different types of inline styling, for example bold, italic or highlights.
## List of supported marks
| Title | Default Extension | Source Code |

27
docs/src/docPages/api/nodes.md
View File

@ -3,8 +3,7 @@
## toc
## Introduction
TODO
Nodes add new capabilities to tiptap. Nodes are like block types, for example a paragraph, heading, or code block.
## List of supported nodes
| Title | Default Extension | Source Code |
@ -29,3 +28,27 @@ TODO
| [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/) |
| [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/) |
| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) |
## Create a new node
You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node:
```js
import { Node } from '@tiptap/core'
const CustomNode = Node.create({
// Your code here
})
const editor = new Editor({
extensions: [
// Register your custom node with the editor.
CustomNode,
// … and don’t forget all other extensions.
Document,
Paragraph,
Text,
// …
],
```
Learn [more about custom extensions in our guide](/guide/build-extensions).

5
docs/src/docPages/api/utilities/html.md
View File

@ -1,5 +1,8 @@
# HTML
TODO
[![Version](https://img.shields.io/npm/v/@tiptap/html.svg?label=version)](https://www.npmjs.com/package/@tiptap/html)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/html.svg)](https://npmcharts.com/compare/@tiptap/html?minimal=true)
The utility helps rendering JSON content as HTML without an editor instance, for example on the server side. All it needs is a JSON and an array of extensions.
## Source code
[packages/html/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/html/)

12
docs/src/docPages/api/utilities/suggestion.md
View File

@ -1,5 +1,8 @@
# Suggestion
TODO
[![Version](https://img.shields.io/npm/v/@tiptap/suggestion.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestion)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestion.svg)](https://npmcharts.com/compare/@tiptap/suggestion?minimal=true)
This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action.
## Settings
| Option | Type | Default | Description |
@ -13,13 +16,6 @@ TODO
| items | `Function` | `() => {}` | Pass an array of filtered suggestions, can be async. |
| render | `Function` | `() => ({})` | A render function for the autocomplete popup. |
## Render
TODO
## Source code
[packages/suggestion/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/suggestion/)
## Usage
* [`Emoji`](/api/nodes/emoji)
* [`Hashtag`](/api/nodes/hashtag)
* [`Mention`](/api/nodes/mention)

2
docs/src/docPages/examples/community.md
View File

@ -1,3 +1,3 @@
# Community
# Suggestions
<demo name="Examples/Community" />

2
docs/src/docPages/examples/multiple-editors.md
View File

@ -1,5 +1,5 @@
# Multiple editors
The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced with other users.
The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.
<demo name="Examples/MultipleEditors" />

4
docs/src/docPages/experiments.md
View File

@ -1,5 +1,5 @@
# Experiments
Congratulations! You’ve found our secret playground with a list of experiments. Be aware, that nothing here is ready to use. Feel free to play around, but please, don’t open an issue for a bug you’ve found here or send pull requests. :-)
Congratulations! You’ve found our playground with a list of experiments. Be aware that nothing here is ready to use. Feel free to play around, but please, don’t open an issue for a bug you’ve found here or send pull requests. :-)
## New
* [Linter](/experiments/linter)
@ -10,4 +10,4 @@ Congratulations! You’ve found our secret playground with a list of experiments
* [Embeds](/experiments/embeds)
## Waiting for approval
* [Placeholder](/experiments/placeholder)
* [@tiptap/extension-placeholder](/experiments/placeholder)

6
docs/src/docPages/guide/accessibility.md
View File

@ -9,15 +9,15 @@ We need your support to maintain, update, support and develop tiptap 2. If you
## Introduction
We strive to make tiptap accessible to everyone, but to be honest, there’s not much work done now. From our current understanding, that’s what needs to be done:
### Interface
## Interface
An interface needs to have well-defined contrasts, big enough click areas, semantic markup, must be keyboard accessible and well documented. Currently, we don’t even provide an interface, so for now that’s totally up to you.
But no worries, we’ll provide an interface soon and take accessibility into account early on.
### Editor
## Editor
The editor needs to produce semantic markup, must be keyboard accessible and well documented. The tiptap content is well structured so that’s a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
### Writing assistance (optional)
## Writing assistance (optional)
An optional writing assitance could help people writing content semanticly correct, for example pointing out an incorrect usage of heading levels. With that kind of assistance provided by the core developers, we could help to improve the content of a lot of applications.
## Resources

4
docs/src/docPages/guide/build-extensions.md
View File

@ -3,9 +3,9 @@
## toc
## Introduction
You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.
You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Just pass an object with your configuration and custom code. Read the guide on [extending the functionality](/guide/extend-extensions) to learn more about all the things you can control.
And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap/issues/819).
### Create a node
```js

34
docs/src/links.yaml
View File

@ -21,28 +21,25 @@
type: pro
- title: Markdown shortcuts
link: /examples/markdown-shortcuts
- title: Formatting
link: /examples/formatting
- title: Todo app
link: /examples/todo-app
- title: Write a book
link: /examples/book
- title: Minimal
link: /examples/minimal
- title: Draw on a canvas
link: /examples/drawing
- title: Multiple editors
link: /examples/multiple-editors
type: draft
- title: Community
link: /examples/community
type: draft
- title: Tables
link: /examples/tables
type: pro
- title: Images
link: /examples/images
type: draft
- title: Formatting
link: /examples/formatting
- title: Task lists
link: /examples/todo-app
- title: Lengthy texts
link: /examples/book
- title: Draw on a canvas
link: /examples/drawing
- title: Suggestions
link: /examples/community
- title: Minimal setup
link: /examples/minimal
- title: Multiple editors
link: /examples/multiple-editors
- title: Guide
items:
@ -217,7 +214,6 @@
items:
- title: HTML
link: /api/utilities/html
type: draft
- title: Suggestion
link: /api/utilities/suggestion
type: new
@ -232,6 +228,8 @@
items:
- title: 'Follow on Twitter'
link: https://twitter.com/tiptap_editor
- title: Experiments
link: /experiments
- title: Documentation for tiptap 1.x
link: https://v1.tiptap.dev

7
docs/src/pages/404.vue
View File

@ -17,13 +17,10 @@
justify-content: center;
align-items: center;
min-height: 100vh;
// margin: 5rem 1rem;
text-align: center;
color: rgba($colorWhite, 0.4);
color: rgba($colorBlack, 0.4);
a {
color: $colorWhite;
color: $colorBlack;
}
}
</style>