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

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2020-12-01 12:03:50 +01:00
parent 62d7163e30
commit 07af85999c
5 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/src/docPages/api/extensions/collaboration-cursor.md
View File

@@ -4,7 +4,7 @@ This extension adds information about all connected users (like their name and a
Open this page in multiple browser windows to test it.
:::premium Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor)
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
::: warning Use with Collaboration
@@ -22,11 +22,10 @@ yarn add @tiptap/extension-collaboration-cursor
## Settings
| Option | Type | Default | Description |
| -------- | ---------- | ----------- | ----------------------------------------------------------------------------------- |
| provider | `Object` | `null` | The Y.js provider, for example a WebSocket connection. |
| name | `String` | `'Someone'` | The name of the current user. |
| color | `String` | `'#cccccc'` | The current user’s cursor color. |
| render | `Function` | … | A render function for the cursor, look at the extension source code for an example. |
| -------- | ---------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
| user | `Object` | `{ user: null, color: null }` | Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. |
| render | `Function` | … | A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) for an example. |
## Commands
| Command | Parameters | Description |
@@ -40,4 +39,4 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" highlight="11,48-52" />
<demo name="Extensions/CollaborationCursor" highlight="11,38-44" />

14
docs/src/docPages/api/extensions/collaboration.md
View File

@@ -2,24 +2,22 @@
The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
:::premium Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor)
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
## Installation
```bash
# with npm
npm install @tiptap/extension-collaboration yjs y-webrtc
npm install @tiptap/extension-collaboration yjs y-websocket
# with Yarn
yarn add @tiptap/extension-collaboration yjs y-webrtc
yarn add @tiptap/extension-collaboration yjs y-websocket
```
## Settings
<!-- TODO -->
| Option | Type | Default | Description |
| -------- | ---- | ------- | ----------- |
| provider | | | |
| type | | | |
| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- |
| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
## Commands
*None*
@@ -34,4 +32,4 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" highlight="10-12,30-32,43-46,53" />
<demo name="Extensions/Collaboration" highlight="10,26-27,34-36" />

4
docs/src/docPages/api/marks/link.md
View File

@@ -1,9 +1,9 @@
# Link
The Link extension adds support for `<a>` tags to the editor. The extension is headless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work.
In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like.
In a real world application, you would probably add a more sophisticated user interface.
Pasted URLs will be linked automatically.
Pasted URLs will be transformed to links automatically.
## Installation
```bash

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

@@ -383,7 +383,7 @@ const CustomLink = Link.extend({
})
```
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/advanced-node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
## Start from scratch
You can also build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.

8
docs/src/docPages/introduction.md
View File

@@ -2,17 +2,11 @@
title: Headless rich text editor
---
:::error Work in progress
Nothing here is ready, don’t use it in production.
:::
# Introduction
# tiptap – a headless text editor framework
[![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/core.svg)](https://npmcharts.com/compare/@tiptap/core?minimal=true)
[![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
<!-- [![Filesize](https://img.badgesize.io/https://unpkg.com/tiptap/dist/tiptap.min.js?compression=gzip&label=size&colorB=000000)](https://www.npmjs.com/package/tiptap) -->
<!-- [![Build Status](https://github.com/ueberdosis/tiptap-next/workflows/build/badge.svg)](https://github.com/ueberdosis/tiptap-next/actions) -->
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.