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

update content

Browse Source
This commit is contained in:
Hans Pagel
2020-10-30 14:24:16 +01:00
parent f5763b8cc0
commit 25f4078996
36 changed files with 131 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -1,10 +1,13 @@
<template> <template>
<div> <div>
<button @click="setName"> <button @click="setName">
set username Set Name
</button>
<button @click="changeName">
Random Name
</button> </button>
<button @click="changeColor"> <button @click="changeColor">
change color Random Color
</button> </button>
<div class="collaboration-status"> <div class="collaboration-status">
@@ -89,7 +92,16 @@ export default {
methods: { methods: {
setName() { setName() {
this.name = window.prompt('Name') const name = window.prompt('Name')
if (name) {
this.name = name
return this.updateUser()
}
},
changeName() {
this.name = this.getRandomName()
this.updateUser() this.updateUser()
}, },
@@ -108,28 +120,26 @@ export default {
}, },
getRandomColor() { getRandomColor() {
const colors = [ return this.getRandomElement([
'#f03e3e', '#616161',
'#d6336c', '#A975FF',
'#ae3ec9', '#FB5151',
'#7048e8', '#fd9170',
'#4263eb', '#FFCB6B',
'#1c7ed6', '#68CEF8',
'#1098ad', '#80cbc4',
'#0ca678', '#9DEF8F',
'#37b24d', ])
'#74b816',
'#f59f00',
'#f76707',
]
return colors[Math.floor(Math.random() * colors.length)]
}, },
getRandomName() { getRandomName() {
const names = ['🙈', '🙉', '🙊', '💥', '💫', '💦', '💨', '🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', '🐕‍🦺', '🐩', '🐺', '🦊', '🦝', '🐱', '🐈', '🦁', '🐯', '🐅', '🐆', '🐴', '🐎', '🦄', '🦓', '🦌', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🦙', '🦒', '🐘', '🦏', '🦛', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐿', '🦔', '🦇', '🐻', '🐨', '🐼', '🦥', '🦦', '🦨', '🦘', '🦡', '🐾', '🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🕊', '🦅', '🦆', '🦢', '🦉', '🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', '🐍', '🐲', '🐉', '🦕', '🦖', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🦈', '🐙', '🐚', '🐌', '🦋', '🐛', '🐜', '🐝', '🐞', '🦗', '🕷', '🕸', '🦂', '🦟', '🦠'] return this.getRandomElement([
'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
])
},
return names[Math.floor(Math.random() * names.length)] getRandomElement(list) {
return list[Math.floor(Math.random() * list.length)]
}, },
updateState() { updateState() {
@@ -151,7 +161,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* A list of all available users */
.collaboration-users { .collaboration-users {
margin-top: 0.5rem; margin-top: 0.5rem;
@@ -165,6 +176,7 @@ export default {
} }
} }
/* Some information about the status */
.collaboration-status { .collaboration-status {
background: #eee; background: #eee;
color: #666; color: #666;
@@ -183,7 +195,7 @@ export default {
} }
} }
/* This gives the remote user caret */ /* Give a remote user a caret */
.collaboration-cursor__caret { .collaboration-cursor__caret {
position: relative; position: relative;
margin-left: -1px; margin-left: -1px;
@@ -194,7 +206,7 @@ export default {
pointer-events: none; pointer-events: none;
} }
/* This renders the username above the caret */ /* Render the username above the caret */
.collaboration-cursor__label { .collaboration-cursor__label {
position: absolute; position: absolute;
top: -1.4em; top: -1.4em;

19
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

@@ -7,6 +7,12 @@
<button class="button" @click="clearContent"> <button class="button" @click="clearContent">
Clear Content Clear Content
</button> </button>
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
</div> </div>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -70,7 +76,7 @@ export default {
content: [ content: [
{ {
type: 'text', type: 'text',
text: 'This is some inserted text. 👋', text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
}, },
], ],
}], }],
@@ -95,11 +101,14 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.export { .export {
padding: 1rem 0 0;
h3 { h3 {
margin: 0.5rem 0; margin: 1rem 0 0.5rem;
} }
pre { pre {
border-radius: 5px; border-radius: 5px;
color: #333; color: #333;
@@ -109,7 +118,9 @@ export default {
display: block; display: block;
white-space: pre-wrap; white-space: pre-wrap;
font-size: 0.8rem; font-size: 0.8rem;
padding: 1rem; padding: 0.75rem 1rem;
background-color:#e9ecef;
color: #495057;
} }
} }
</style> </style>

2
docs/src/demos/Examples/Focus/index.vue
View File

@@ -58,7 +58,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.has-focus { .has-focus {
border-radius: 3px; border-radius: 3px;
box-shadow: 0 0 0 3px #3ea4ffe6; box-shadow: 0 0 0 3px #3ea4ffe6;

2
docs/src/demos/Examples/ReadOnly/index.vue
View File

@@ -52,7 +52,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.checkbox { .checkbox {
margin-bottom: 1rem; margin-bottom: 1rem;

6
docs/src/demos/Extensions/CollaborationCursor/index.vue
View File

@@ -61,8 +61,8 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* This gives the remote user caret */ /* Give a remote user a caret */
.collaboration-cursor__caret { .collaboration-cursor__caret {
position: relative; position: relative;
margin-left: -1px; margin-left: -1px;
@@ -73,7 +73,7 @@ export default {
pointer-events: none; pointer-events: none;
} }
/* This renders the username above the caret */ /* Render the username above the caret */
.collaboration-cursor__label { .collaboration-cursor__label {
position: absolute; position: absolute;
top: -1.4em; top: -1.4em;

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

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

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

@@ -6,10 +6,10 @@ Type <code>>&nbsp;</code> at the beginning of a new line and it will magically t
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-blockquote npm install @tiptap/extension-blockquote
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-blockquote yarn add @tiptap/extension-blockquote
``` ```

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-bold npm install @tiptap/extension-bold
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-bold yarn add @tiptap/extension-bold
``` ```

4
docs/src/docPages/api/extensions/bullet-list.md
View File

@@ -9,10 +9,10 @@ The `BulletList` extension is intended to be used with the [`ListItem`](/api/ext
::: :::
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-bullet-list @tiptap/extension-list-item npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
``` ```

4
docs/src/docPages/api/extensions/code-block.md
View File

@@ -9,10 +9,10 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-code-block npm install @tiptap/extension-code-block
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-code-block yarn add @tiptap/extension-code-block
``` ```

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

@@ -5,10 +5,10 @@ Type something with <code>\`back-ticks around\`</code> and it will magically tra
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-code npm install @tiptap/extension-code
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-code yarn add @tiptap/extension-code
``` ```

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

@@ -6,10 +6,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-collaboration-cursor npm install @tiptap/extension-collaboration-cursor
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-collaboration-cursor yarn add @tiptap/extension-collaboration-cursor
``` ```

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

@@ -7,10 +7,10 @@ Using this in production requires a **tiptap pro** license. [Read more](/sponsor
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-collaboration yjs y-webrtc npm install @tiptap/extension-collaboration yjs y-webrtc
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-collaboration yjs y-webrtc yarn add @tiptap/extension-collaboration yjs y-webrtc
``` ```

6
docs/src/docPages/api/extensions/document.md
View File

@@ -9,10 +9,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. A tiny,
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-document npm install @tiptap/extension-document
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-document yarn add @tiptap/extension-document
``` ```
@@ -20,4 +20,4 @@ yarn add @tiptap/extension-document
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/) [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
## Usage ## Usage
<demo name="Extensions/Document" highlight="10,28" /> <demo name="Extensions/Document" highlight="10,28" />

4
docs/src/docPages/api/extensions/hard-break.md
View File

@@ -3,10 +3,10 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-hard-break npm install @tiptap/extension-hard-break
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-hard-break yarn add @tiptap/extension-hard-break
``` ```

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

@@ -5,10 +5,10 @@ Type <code>#&nbsp;</code> at the beginning of a new line and it will magically t
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-heading npm install @tiptap/extension-heading
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-heading yarn add @tiptap/extension-heading
``` ```

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

@@ -3,10 +3,10 @@ This extension provides history support. All changes to the document will be tra
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-history npm install @tiptap/extension-history
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-history yarn add @tiptap/extension-history
``` ```

4
docs/src/docPages/api/extensions/horizontal-rule.md
View File

@@ -5,10 +5,10 @@ Type three dashes (<code>---</code>) or three underscores and a space (<code>___
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-horizontal-rule npm install @tiptap/extension-horizontal-rule
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-horizontal-rule yarn add @tiptap/extension-horizontal-rule
``` ```

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

@@ -2,10 +2,10 @@
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-image npm install @tiptap/extension-image
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-image yarn add @tiptap/extension-image
``` ```

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-italic npm install @tiptap/extension-italic
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-italic yarn add @tiptap/extension-italic
``` ```

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

@@ -7,10 +7,10 @@ Pasted URLs will be linked automatically.
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-link npm install @tiptap/extension-link
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-link yarn add @tiptap/extension-link
``` ```

4
docs/src/docPages/api/extensions/list-item.md
View File

@@ -7,10 +7,10 @@ This extensions is intended to be used with the [`BulletList`](/api/extensions/b
::: :::
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-list-item npm install @tiptap/extension-list-item
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-list-item yarn add @tiptap/extension-list-item
``` ```

4
docs/src/docPages/api/extensions/ordered-list.md
View File

@@ -9,10 +9,10 @@ The `OrderedList` extension is intended to be used with the [`ListItem`](/api/ex
::: :::
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-ordered-list @tiptap/extension-list-item npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
``` ```

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

@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-paragraph npm install @tiptap/extension-paragraph
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-paragraph yarn add @tiptap/extension-paragraph
``` ```

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-strike npm install @tiptap/extension-strike
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-strike yarn add @tiptap/extension-strike
``` ```

4
docs/src/docPages/api/extensions/text-align.md
View File

@@ -2,10 +2,10 @@
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-text-align npm install @tiptap/extension-text-align
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-text-align yarn add @tiptap/extension-text-align
``` ```

6
docs/src/docPages/api/extensions/text.md
View File

@@ -7,10 +7,10 @@ Tiptap 1 tried to hide that node from you, but it has always been there. You hav
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-text npm install @tiptap/extension-text
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-text yarn add @tiptap/extension-text
``` ```
@@ -18,4 +18,4 @@ yarn add @tiptap/extension-text
[packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/) [packages/extension-text/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
## Usage ## Usage
<demo name="Extensions/Text" highlight="12,30" /> <demo name="Extensions/Text" highlight="12,30" />

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
## Installation ## Installation
```bash ```bash
# With npm # with npm
npm install @tiptap/extension-underline npm install @tiptap/extension-underline
# Or: With Yarn # with Yarn
yarn add @tiptap/extension-underline yarn add @tiptap/extension-underline
``` ```

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

@@ -1,9 +1,3 @@
# Examples # Examples
We put together a few examples to show the capabilities of tiptap, but keep in mind: tiptap is renderless and highly customizable. Everything you see can be changed, modified, combined or remixed. Feel free to copy the code to your project and change it to your liking. TODO: This page should redirect to [/examples/basic](/examples/basic).
A few examples show what you’d probably expect from a text editor anyway: [Basic](/examples/basic), [Links](/examples/links), [History](/examples/history), [Read-only](/examples/read-only), [Export HTML or JSON](/examples/export-html-or-json).
Some examples show how you can improve the user experience: [Markdown shortcuts](/examples/markdown-shortcuts).
Or they show advanced use cases, like the [Collaborative editing](/examples/collaborative-editing) example, which is basically tiptap in multiplayer mode.

1
docs/src/docPages/examples/basic.md
View File

@@ -1,4 +1,3 @@
# Basic # Basic
BUG: Headings can’t be transformed to a bullet or ordered list.
<demo name="Examples/Basic" /> <demo name="Examples/Basic" />

2
docs/src/docPages/examples/read-only.md
View File

@@ -1,3 +1,3 @@
# Read-only # Read-only
<demo name="Examples/ReadOnly" highlight="3-6,22,28,40-46" /> <demo name="Examples/ReadOnly" highlight="3-6,22,28,41-47" />

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

@@ -40,7 +40,6 @@ The extension name is used in a whole lot of places and changing it isn’t too
The extension name is also part of the JSON. If you [store your content as JSON](http://localhost:3000/guide/store-content#option-1-json), you need to change the name in there too. The extension name is also part of the JSON. If you [store your content as JSON](http://localhost:3000/guide/store-content#option-1-json), you need to change the name in there too.
### Settings ### Settings
All settings can be overwritten through the extension anyway, but if you want to change the defaults, for example to provide a library on top of tiptap for other developers, you can do it like that: All settings can be overwritten through the extension anyway, but if you want to change the defaults, for example to provide a library on top of tiptap for other developers, you can do it like that:
```js ```js
@@ -54,7 +53,6 @@ const CustomHeading = Heading.extend({
``` ```
### Schema ### Schema
Tiptap works with a [strict schema](/api/schema), which configures how the content can be structured, nested, how it behaves and many more things. You can change all aspects of the schema for existing extensions. Let’s walk through a few common use cases. Tiptap works with a [strict schema](/api/schema), which configures how the content can be structured, nested, how it behaves and many more things. You can change all aspects of the schema for existing extensions. Let’s walk through a few common use cases.
The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it: The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
@@ -95,6 +93,9 @@ const CustomParagraph = Paragraph.extend({
}) })
``` ```
### Attributes
### Keyboard shortcuts ### Keyboard shortcuts
Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map: Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:

2
docs/src/docPages/guide/store-content.md
View File

@@ -85,6 +85,6 @@ Unfortunately, **tiptap doesn’t support Markdown as an input or output format*
You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases. You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap to work with Markdown. Their code is open source, so maybe you can learn from them. If you still think you need Markdown, [Nextcloud Text](https://github.com/nextcloud/text) uses tiptap 1 to work with Markdown. Their code is open source, so maybe you can learn from them.
That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example. That said, tiptap **does** support Markdown shortcuts to format your content. Try typing `**two asterisks**` to make your text bold for example.

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

@@ -1,15 +1,17 @@
:::warning Don’t try this at home :::error Don’t try this at home
This version of tiptap is not production-ready, don’t use it anywhere. Nothing here is production-ready, don’t use it anywhere.
::: :::
# Introduction # Introduction
[![Version](https://img.shields.io/npm/v/@tiptap/core.svg?label=version)](https://www.npmjs.com/package/@tiptap/core) <!-- [![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) <!-- [![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) <!-- [![License](https://img.shields.io/npm/l/@tiptap/core.svg)](https://www.npmjs.com/package/@tiptap/core) -->
<!-- [![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) -->
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis) [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. tiptap is a renderless 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*.
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. 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.
@@ -29,3 +31,6 @@ Although tiptap tries to hide most of the complexity of ProseMirror, it’s buil
- [Directus CMS](https://directus.io) - [Directus CMS](https://directus.io)
- [Nextcloud](https://apps.nextcloud.com/apps/text) - [Nextcloud](https://apps.nextcloud.com/apps/text)
- [and many more →](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D) - [and many more →](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
## License
Tiptap is licensed under MIT, so you’re free to whatever you want. Anyway, we kindly ask you to [become a sponsor](https://github.com/sponsors/ueberdosis) on GitHub to fund the development, maintenance and support of tiptap.

5
docs/src/docPages/overview/contributing.md
View File

@@ -6,8 +6,9 @@
Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution: Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
## Welcome examples ## Welcome examples
* Improve the documentation, e. g. fix a typo, add a section * Failing regression tests as bug reports
* New features for existing extensions, e. g. a new option * Documentation improvements, e. g. fix a typo, add a section
* New features for existing extensions, e. g. a new configureable option
* New extensions, which don’t require changes to the core or other core extensions * New extensions, which don’t require changes to the core or other core extensions
* Well explained, non-breaking changes to the core * Well explained, non-breaking changes to the core

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

@@ -9,10 +9,10 @@ You’re free to use tiptap with the framework of your choice. Depending on what
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. 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 ```bash
# With npm # with npm
npm install @tiptap/core @tiptap/starter-kit npm install @tiptap/core @tiptap/starter-kit
# Or: With Yarn # with Yarn
yarn add @tiptap/core @tiptap/starter-kit yarn add @tiptap/core @tiptap/starter-kit
``` ```
@@ -33,10 +33,10 @@ new Editor({
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
```bash ```bash
# With npm # with npm
npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
# Or: With Yarn # with Yarn
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
``` ```
@@ -44,9 +44,10 @@ Create a new component and add the following content to get a basic version of t
<demo name="Overview/Installation" /> <demo name="Overview/Installation" />
::: warning Nuxt.js ### Nuxt.js
If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag. Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
:::
[Read more](https://nuxtjs.org/api/components-client-only)
<!-- ## Option 3: CodeSandbox <!-- ## Option 3: CodeSandbox