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 
# Conflicts:
#	yarn.lock
This commit is contained in:
Philipp Kühn
2020-08-20 23:27:24 +02:00
parent 4125c2dd17 0de9357fbb
commit 1a1ceae608
77 changed files with 825 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/gridsome.config.js
View File

@@ -11,7 +11,7 @@ function addStyleResource(rule) {
}
module.exports = {
siteName: 'tiptap',
siteName: 'tiptap 2',
titleTemplate: '%s',
port: 3000,
plugins: [

51
docs/src/components/Demo/index.vue
View File

@@ -1,24 +1,37 @@
<template>
<div class="demo">
<div class="demo__preview" v-if="mainFile">
<component :is="mainFile" v-if="mode === 'vue'" />
<react-renderer :component="mainFile" v-if="mode === 'react'" />
</div>
<div class="demo__source">
<div class="demo__tabs" v-if="showFileNames">
<button
class="demo__tab"
:class="{ 'is-active': currentIndex === index}"
v-for="(file, index) in files"
:key="index"
@click="currentIndex = index"
>
{{ file.name }}
</button>
<template v-if="mainFile">
<div class="demo__preview">
<component :is="mainFile" v-if="mode === 'vue'" />
<react-renderer :component="mainFile" v-if="mode === 'react'" />
</div>
<div class="demo__code" v-if="activeFile" :key="activeFile.path">
<prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
<div class="demo__source">
<div class="demo__tabs" v-if="showFileNames">
<button
class="demo__tab"
:class="{ 'is-active': currentIndex === index}"
v-for="(file, index) in files"
:key="index"
@click="currentIndex = index"
>
{{ file.name }}
</button>
</div>
<div class="demo__code" v-if="activeFile" :key="activeFile.path">
<prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
</div>
</div>
<div class="demo__meta">
<div class="demo__name">
Demo/{{ this.name }}
</div>
<a class="demo__link" :href="githubUrl" target="_blank">
Edit on GitHub →
</a>
</div>
</template>
<div v-else class="demo__error">
Could not find a demo called “{{ this.name }}”.
</div>
</div>
</template>
@@ -81,6 +94,10 @@ export default {
activeFile() {
return this.files[this.currentIndex]
},
githubUrl() {
return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
},
},
mounted() {

27
docs/src/components/Demo/style.scss
View File

@@ -10,7 +10,7 @@
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
&__source {
// background-color: $colorBlack;
}
@@ -39,13 +39,34 @@
&:hover {
color: $colorWhite;
background-color: rgba($colorWhite, 0.1);
}
}
}
&__code {
pre {
margin: 0;
border-radius: 0;
}
}
&__meta {
display: flex;
justify-content: space-between;
width: 100%;
padding: 1rem 1.5rem;
border: 1px solid rgba($colorBlack, 0.1);
border-top-width: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
&__link {
text-align: right;
}
&__error {
padding: 1rem 1.5rem;
color: $colorRed;
background-color: rgba($colorRed, 0.1);
}
}

0
docs/src/demos/Basic/index.spec.js → docs/src/demos/Examples/Basic/index.spec.js
View File

0
docs/src/demos/Basic/index.vue → docs/src/demos/Examples/Basic/index.vue
View File

0
docs/src/demos/Basic/style.scss → docs/src/demos/Examples/Basic/style.scss
View File

64
docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js Normal file
View File

@@ -0,0 +1,64 @@
context('export-html-or-json', () => {
beforeEach(() => {
cy.visit('/examples/export-html-or-json')
})
describe('export', () => {
it('should return json', () => {
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
const json = editor.json()
expect(json).to.deep.equal({
'type': 'document',
'content': [
{
'type': 'paragraph',
'content': [
{
'type': 'text',
'text': 'You are able to export your data as '
},
{
'type': 'text',
'marks': [
{
'type': 'code'
}
],
'text': 'HTML'
},
{
'type': 'text',
'text': ' or '
},
{
'type': 'text',
'marks': [
{
'type': 'code'
}
],
'text': 'JSON'
},
{
'type': 'text',
'text': '.'
}
]
}
]
})
})
})
it('should return html', () => {
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
const html = editor.html()
expect(html).to.equal('<p>You are able to export your data as <code>HTML</code> or <code>JSON</code>.</p>')
})
})
})
})

93
docs/src/demos/Examples/ExportHtmlOrJson/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div>
<editor-content :editor="editor" />
<div class="actions">
<button class="button" @click="clearContent">
Clear Content
</button>
<button class="button" @click="setContent">
Set Content
</button>
</div>
<div class="export">
<h3>JSON</h3>
<pre><code v-html="json"></code></pre>
<h3>HTML</h3>
<pre><code>{{ html }}</code></pre>
</div>
</div>
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
json: null,
html: null,
}
},
mounted() {
this.editor = new Editor({
content: `
<p>
You are able to export your data as <code>HTML</code> or <code>JSON</code>.
</p>
`,
extensions: defaultExtensions(),
})
this.json = this.editor.json()
this.html = this.editor.html()
this.editor.on('update', () => {
this.json = this.editor.json()
this.html = this.editor.html()
})
window.editor = this.editor
},
methods: {
clearContent() {
this.editor.clearContent(true)
this.editor.focus()
},
setContent() {
// you can pass a json document
this.editor.setContent({
type: 'document',
content: [{
type: 'paragraph',
content: [
{
type: 'text',
text: 'This is some inserted text. 👋',
},
],
}],
}, true)
// HTML string is also supported
// this.editor.setContent('<p>This is some inserted text. 👋</p>')
this.editor.focus()
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss" src="./style.scss">

12
docs/src/demos/Examples/ExportHtmlOrJson/style.scss Normal file
View File

@@ -0,0 +1,12 @@
.export {
pre {
border-radius: 5px;
font-size: 0.8rem;
color: rgba($colorBlack, 0.8);
}
code {
display: block;
white-space: pre-wrap;
}
}

13
docs/src/demos/Examples/Focus/index.spec.js Normal file
View File

@@ -0,0 +1,13 @@
context('focus', () => {
beforeEach(() => {
cy.visit('/examples/focus')
})
describe('focus class', () => {
it('should have class', () => {
cy.get('.ProseMirror').window().then(window => {
cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
})
})
})
})

82
docs/src/demos/Examples/Focus/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div class="editor">
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import History from '@tiptap/extension-history'
import Bold from '@tiptap/extension-bold'
import Italic from '@tiptap/extension-italic'
import Code from '@tiptap/extension-code'
import CodeBlock from '@tiptap/extension-codeblock'
import Heading from '@tiptap/extension-heading'
// import Focus from '@tiptap/extension-focus'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Document(),
new History(),
new Paragraph(),
new Text(),
new Bold(),
new Italic(),
new Code(),
new CodeBlock(),
new Heading(),
// new Focus({
// className: 'has-focus',
// nested: true,
// }),
],
// autoFocus: true,
content: `
<p>
With the focus extension you can add custom classes to focused nodes. Default options:
</p>
<pre><code>{\n className: 'has-focus',\n nested: true,\n}</code></pre>
<ul>
<li>
When set <code>nested</code> to <code>true</code> also nested elements like this list item will be captured.
</li>
<li>
Otherwise only the wrapping list will get this class.
</li>
</ul>
`,
})
window.editor = this.editor
},
watch: {
editable() {
this.editor.setOptions({
editable: this.editable,
})
},
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss" src="./style.scss">

4
docs/src/demos/Examples/Focus/style.scss Normal file
View File

@@ -0,0 +1,4 @@
.has-focus {
border-radius: 3px;
box-shadow: 0 0 0 3px #3ea4ffe6;
}

29
docs/src/demos/Examples/ReadOnly/index.spec.js Normal file
View File

@@ -0,0 +1,29 @@
context('read-only', () => {
beforeEach(() => {
cy.visit('/examples/read-only')
})
describe('editable', () => {
it('should be read-only', () => {
cy.get('.ProseMirror').window().then(window => {
cy.get('#editable').uncheck()
const { editor } = window
editor.insertText('Edited: ')
cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
})
})
it('should be editable', () => {
cy.get('.ProseMirror').window().then(window => {
cy.get('#editable').check()
const { editor } = window
editor.insertText('Edited: ')
cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
})
})
})
})

5
docs/src/demos/ReadOnly/index.vue → docs/src/demos/Examples/ReadOnly/index.vue
View File

@@ -25,11 +25,8 @@ export default {
mounted() {
this.editor = new Editor({
editable: false,
editable: this.editable,
content: `
<h2>
Read-Only
</h2>
<p>
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://ueber.io/">Links to fancy websites</a> are still working.
</p>

0
docs/src/demos/ReadOnly/style.scss → docs/src/demos/Examples/ReadOnly/style.scss
View File

54
docs/src/demos/Extensions/Bold/index.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div v-if="editor">
<button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
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'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Document(),
new Paragraph(),
new Text(),
new Bold(),
],
content: `
<p>This isn’t bold.</p>
<p><strong>This is bold.</strong></p>
<p><b>And this.</b></p>
<p style="font-weight: bold">This as well.</p>
<p style="font-weight: bolder">Oh, and this!</p>
<p style="font-weight: 500">Cool, isn’t it!?</p>
<p style="font-weight: 999">Up to font weight 999!!!</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>

51
docs/src/demos/Extensions/Italic/index.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div v-if="editor">
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Italic from '@tiptap/extension-italic'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Document(),
new Paragraph(),
new Text(),
new Italic(),
],
content: `
<p>This isn’t italic.</p>
<p><em>This is italic.</em></p>
<p><i>And this.</i></p>
<p style="font-style: italic">This as well.</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>

5
docs/src/demos/ReadOnly/index.spec.js
View File

@@ -1,5 +0,0 @@
context('read-only', () => {
beforeEach(() => {
cy.visit('/examples/read-only')
})
})

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

@@ -7,4 +7,26 @@ install `tiptap-extensions` package separately so that you can use basic Nodes,
usually tied to a Command. The official set of commands are part of the
[`tiptap-commands`][@npmjs-tiptap-commands] package.
## Default extensions
Starterkits have defaultExtensions, that include ...
## A minimalist set of extensions
Document, Paragraph, Text
## List of extensions
* Bold
* Italic
...
## Community extensions
How does that work?
## Your custom extensions
Link to the Guide
[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands

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

@@ -1,18 +1,18 @@
# Blockquote
Allows you to use the `<blockquote>` HTML tag in the editor.
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor.
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| blockquote | none | Wrap content in a blockquote. |
| blockquote | — | Wrap content in a blockquote. |
#### Keybindings
## Keybindings
* `Control` + `→`
#### Example
## Usage
```markup
<template>
<div>

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

@@ -1,66 +1,24 @@
# Bold
Renders text in **bold** text weight. If you pass `<strong>`, or `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor's initial content, they will be rendered accordingly.
This extension is used to render text in **bold**. If you pass `<strong>`, `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor’s initial content, they will all be rendered accordingly.
::: warning Restrictions
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked as bold, regardless of method will be normalized to `<strong>` HTML tags.
The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked bold, regardless of the method will be normalized to `<strong>` HTML tags.
:::
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| bold | none | Mark text as bold. |
| bold | — | Mark text bold. |
#### Keybindings
## Keybindings
* Windows & Linux: `Control` + `B`
* macOS: `Command` + `B`
#### Example
## Source Code
[packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
```markup
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
Bold
</button>
</editor-menu-bar>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { Bold } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
new Bold(),
],
content: `
<p><strong>This is strong</strong></p>
<p><b>And this</b></p>
<p style="font-weight: bold">This as well</p>
<p style="font-weight: bolder">Oh! and this</p>
<p style="font-weight: 500">Cool! Right!?</p>
<p style="font-weight: 999">Up to 999!!!</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```
## Usage
<Demo name="Extensions/Bold" highlight="3-5,17,36" />

17
docs/src/docPages/api/extensions/bulletlist.md → docs/src/docPages/api/extensions/bullet-list.md
View File

@@ -1,23 +1,22 @@
# BulletList
Allows you to use the `<ul>` HTML tag in the editor.
This extension enables you to use the `<ul>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `ListItem` extension.
It’s intended to be used with the `ListItem` extension.
:::
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| bullet_list | none | Toggle a bullet list. |
| bullet_list | — | Toggle a bullet list. |
#### Keybindings
## Keybindings
* `Control` + `Shift` + `8`
#### Example
## Usage
```markup
<template>
<div>

11
docs/src/docPages/api/extensions/code-block-highlight.md Normal file
View File

@@ -0,0 +1,11 @@
# CodeBlockHighlight
Enables you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
## Options
*None*
## Commands
*None*
## Keybindings
*None*

11
docs/src/docPages/api/extensions/code-block.md Normal file
View File

@@ -0,0 +1,11 @@
# CodeBlock
Enables you to use the `<pre>` HTML tag in the editor.
## Options
*None*
## Commands
*None*
## Keybindings
*None*

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

@@ -1,18 +1,18 @@
# Code
Allows you to use the `<code>` HTML tag in the editor.
The Code extensions enables you to use the `<code>` HTML tag in the editor.
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| code | none | Mark text as code. |
| code | — | Mark text as code. |
#### Keybindings
## Keybindings
* `Alt` + `
#### Example
## Usage
```markup
<template>
<div>

18
docs/src/docPages/api/extensions/codeblock.md
View File

@@ -1,18 +0,0 @@
# CodeBlock
Allows you to use the `<pre>` HTML tag in the editor.
## CodeBlockHighlight
Allows you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
## Collaboration
Allows you to collaborate with others on one document.
## HardBreak
Allows you to use the `<br>` HTML tag in the editor.
#### Options
*None*
#### Keybindings
* New CodeBlock: `Shift` + `Enter` + `
* Leave CodeBlock: `Command` + `Enter`

2
docs/src/docPages/api/extensions/collaboration.md Normal file
View File

@@ -0,0 +1,2 @@
# Collaboration
Enables you to collaborate with others on one document.

9
docs/src/docPages/api/extensions/hard-break.md Normal file
View File

@@ -0,0 +1,9 @@
# HardBreak
Enables you to use the `<br>` HTML tag in the editor.
## Options
*None*
## Keybindings
* `Command` + `Enter`
* `Shift` + `Enter`

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

@@ -1,17 +1,17 @@
# Heading
Allows you to use the headline HTML tags in the editor.
Enables you to use headline HTML tags in the editor.
#### Options
| option | type | default | description |
## Options
| Option | Type | Default | Description |
| ------ | ---- | ---- | ----- |
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are to be supported. |
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are supported. |
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| heading | level | Creates a heading node. |
#### Keybindings
## Keybindings
* `Control` + `Shift` + `1` → H1
* `Control` + `Shift` + `2` → H2
* `Control` + `Shift` + `3` → H3
@@ -19,7 +19,7 @@ Allows you to use the headline HTML tags in the editor.
* `Control` + `Shift` + `5` → H5
* `Control` + `Shift` + `6` → H6
#### Example
## Usage
```markup
<template>
<div>

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

@@ -1,19 +1,19 @@
# History
Enables history support.
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| undo | none | Undo the latest change. |
| redo | none | Redo the latest change. |
| undo | — | Undo the latest change. |
| redo | — | Redo the latest change. |
#### Keybindings
## Keybindings
* Windows & Linux: `Control` + `Z` → Undo
* Windows & Linux: `Shift` + `Control` + `Z` → Redo
* macOS: `Command` + `Z` → Undo
* macOS: `Shift` + `Command` + `Z` → Redo
#### Example
## Usage
```markup
<template>
<div>

14
docs/src/docPages/api/extensions/horizontalrule.md → docs/src/docPages/api/extensions/horizontal-rule.md
View File

@@ -1,18 +1,18 @@
# HorizontalRule
Allows you to use the `<hr>` HTML tag in the editor.
Enables you to use the `<hr>` HTML tag in the editor.
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| horizontal_rule | none | Create a horizontal rule. |
| horizontal_rule | — | Create a horizontal rule. |
#### Keybindings
## Keybindings
*None*
#### Example
## Usage
```markup
<template>
<div>

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

@@ -1,58 +1,24 @@
# Italic
Allows you to use the `<em>` HTML tag in the editor.
This extension is used to render text in *italic*. If you pass `<em>`, `<i>` tags, or text with inline `style` attributes setting `font-style: italic` in the editor’s initial content, they will all be rendered accordingly.
#### Options
::: warning Restrictions
The extension will generate the corresponding `<em>` HTML tags when reading contents of the `Editor` instance. All text marked italic, regardless of the method will be normalized to `<em>` HTML tags.
:::
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| italic | none | Mark text as italic. |
| italic | — | Mark text italic. |
#### Keybindings
## Keybindings
* Windows & Linux: `Control` + `I`
* macOS: `Command` + `I`
#### Example
```markup
<template>
<div>
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<button type="button" :class="{ 'is-active': isActive.italic() }" @click="commands.italic">
Italic
</button>
</editor-menu-bar>
## Source Code
[packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import { Italic } from 'tiptap-extensions'
export default {
components: {
EditorMenuBar,
EditorContent,
},
data() {
return {
editor: new Editor({
extensions: [
new Italic(),
],
content: `
<p><em>This is italic</em></p>
<p><i>And this</i></p>
<p style="font-style: italic">This as well</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>
```
## Usage
<Demo name="Extensions/Italic" highlight="3-5,17,36" />

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

@@ -1,7 +1,7 @@
# Link
Allows you to use the `<a>` HTML tag in the editor.
Enables you to use the `<a>` HTML tag in the editor.
#### Options
| option | type | default | description |
## Options
| Option | Type | Default | Description |
| ------ | ---- | ---- | ----- |
| openOnClick | Boolean | true | Specifies if links will be opened on click. |

2
docs/src/docPages/api/extensions/listitem.md → docs/src/docPages/api/extensions/list-item.md
View File

@@ -1,5 +1,5 @@
# ListItem
Allows you to use the `<li>` HTML tag in the editor.
Enables you to use the `<li>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `BulletList` or `OrderedList` extension.

2
docs/src/docPages/api/extensions/mention.md
View File

@@ -1,2 +1,2 @@
## Mention
Allows you to use mentions in the editor.
Enables you to use mentions in the editor.

14
docs/src/docPages/api/extensions/orderedlist.md → docs/src/docPages/api/extensions/ordered-list.md
View File

@@ -1,22 +1,22 @@
# OrderedList
Allows you to use the `<ol>` HTML tag in the editor.
Enables you to use the `<ol>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `ListItem` extension.
:::
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| ordered_list | none | Toggle an ordered list. |
| ordered_list | — | Toggle an ordered list. |
#### Keybindings
## Keybindings
* `Control` + `Shift` + `9`
#### Example
## Usage
```markup
<template>
<div>

42
docs/src/docPages/api/extensions/placeholder.md
View File

@@ -1,40 +1,40 @@
# Placeholder
Allows you to show placeholders on empty paragraphs.
Enables you to show placeholders on empty paragraphs.
## Table
This enables support for tables in your editor.
Tables can be nested and allow all blocks to be used inside.
Each `<TableCell>` includes a single `<Paragraph>`.
#### Options
| option | type | default | description |
## Options
| Option | Type | Default | Description |
| ------ | ---- | ---- | ----- |
| resizable | Boolean | false | Enables the resizing of columns |
#### Keybindings
## Keybindings
* `Tab` → Next Cell
* `Shift` + `Tab` + ` → Previous Cell
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| createTable | ```{ rowsCount, colsCount, withHeaderRow }``` | Returns a table node of a given size. `withHeaderRow` defines whether the first row of the table will be a header row. |
| deleteTable | none | Deletes the complete table which is active |
| addColumnBefore | none | Add a column before the selection. |
| addColumnAfter | none | Add a column after the selection. |
| deleteColumn | none | Removes the selected columns. |
| addRowBefore | none | Add a table row before the selection. |
| addRowAfter | none | Add a table row after the selection. |
| toggleCellMerge | none | See mergeCells and splitCells |
| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
| splitCell | none | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
| toggleHeaderColumn | none | Toggles whether the selected column contains header cells. |
| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
| setCellAttr | none | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
| fixTables | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
| deleteTable | — | Deletes the complete table which is active |
| addColumnBefore | — | Add a column before the selection. |
| addColumnAfter | — | Add a column after the selection. |
| deleteColumn | — | Removes the selected columns. |
| addRowBefore | — | Add a table row before the selection. |
| addRowAfter | — | Add a table row after the selection. |
| toggleCellMerge | — | See mergeCells and splitCells |
| mergeCells | — | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
| splitCell | — | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
| toggleHeaderColumn | — | Toggles whether the selected column contains header cells. |
| toggleHeaderRow | — | Toggles whether the selected row contains header cells. |
| toggleHeaderCell | — | Toggles whether the selected column contains header cells. |
| setCellAttr | — | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
| fixTables | — | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
#### Example
## Usage
::: warning
You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow`)
:::

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

@@ -1,20 +1,19 @@
# Strike
Allows you to use the `<s>` HTML tag in the editor.
Enables you to use the `<s>` HTML tag in the editor.
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| strike | none | Mark text as strikethrough. |
| strike | — | Mark text as strikethrough. |
#### Keybindings
## Keybindings
* Windows & Linux: `Control` + `D`
* macOS: `Command` + `D`
#### Example
## Usage
```markup
<template>
<div>

2
docs/src/docPages/api/extensions/tablecell.md → docs/src/docPages/api/extensions/table-cell.md
View File

@@ -1,5 +1,5 @@
# TableCell
Allows you to use the `<td>` HTML tag in the editor.
Enables you to use the `<td>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.

2
docs/src/docPages/api/extensions/tableheader.md → docs/src/docPages/api/extensions/table-header.md
View File

@@ -1,5 +1,5 @@
# TableHeader
Allows you to use the `<th>` HTML tag in the editor.
Enables you to use the `<th>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.

2
docs/src/docPages/api/extensions/tablerow.md → docs/src/docPages/api/extensions/table-row.md
View File

@@ -1,5 +1,5 @@
# TableRow
Allows you to use the `<tr>` HTML tag in the editor.
Enables you to use the `<tr>` HTML tag in the editor.
::: warning Restrictions
This extensions is intended to be used with the `Table` extension.

8
docs/src/docPages/api/extensions/todoitem.md → docs/src/docPages/api/extensions/todo-item.md
View File

@@ -5,13 +5,13 @@ It renders a single toggleable item of a list.
This extensions is intended to be used with the `TodoList` extension.
:::
#### Options
| option | type | default | description |
## Options
| Option | Type | Default | Description |
| ------ | ---- | ---- | ----- |
| nested | Boolean | false | Specifies if you can nest todo lists. |
#### Commands
## Commands
*None*
#### Keybindings
## Keybindings
*None*

12
docs/src/docPages/api/extensions/todolist.md → docs/src/docPages/api/extensions/todo-list.md
View File

@@ -5,18 +5,18 @@ Renders a toggleable list of items.
This extensions is intended to be used with the `TodoItem` extension.
:::
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| todo_list | none | Toggle todo list. |
| todo_list | — | Toggle todo list. |
#### Keybindings
## Keybindings
*None*
#### Example
## Usage
```markup
<template>
<div>

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

@@ -1,20 +1,19 @@
# Underline
Allows you to use the `<u>` HTML tag in the editor.
Enables you to use the `<u>` HTML tag in the editor.
#### Options
## Options
*None*
#### Commands
| command | options | description |
## Commands
| Command | Options | Description |
| ------ | ---- | ---------------- |
| underline | none | Mark text as underlined. |
| underline | — | Mark text as underlined. |
#### Keybindings
## Keybindings
* Windows & Linux: `Control` + `U`
* macOS: `Command` + `U`
#### Example
## Usage
```markup
<template>
<div>

2
docs/src/docPages/api/schema.md
View File

@@ -1,6 +1,6 @@
# Schema
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This allows you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. This enables you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested.
This schema is *very* strict. You can’t use any HTML-element or attribute that is not defined in your schema.

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

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

3
docs/src/docPages/examples/code-highlighting.md Normal file
View File

@@ -0,0 +1,3 @@
# Code Highlighting
<demo name="Examples/CodeHighlighting" />

3
docs/src/docPages/examples/collaboration.md Normal file
View File

@@ -0,0 +1,3 @@
# Collaboration
<demo name="Examples/Collaboration" />

3
docs/src/docPages/examples/drag-handle.md Normal file
View File

@@ -0,0 +1,3 @@
# Drag Handle
<demo name="Examples/DragHandle" />

3
docs/src/docPages/examples/embeds.md Normal file
View File

@@ -0,0 +1,3 @@
# Embeds
<demo name="Examples/Embeds" />

3
docs/src/docPages/examples/export-html-or-json.md Normal file
View File

@@ -0,0 +1,3 @@
# Export HTML or JSON
<demo name="Examples/ExportHtmlOrJson" />

3
docs/src/docPages/examples/floating-menu.md Normal file
View File

@@ -0,0 +1,3 @@
# Floating Menu
<demo name="Examples/FloatingMenu" />

3
docs/src/docPages/examples/focus.md Normal file
View File

@@ -0,0 +1,3 @@
# Focus
<demo name="Examples/Focus" highlight="18,43-46,48" />

3
docs/src/docPages/examples/hiding-menu-bar.md Normal file
View File

@@ -0,0 +1,3 @@
# Hiding Menu Bar
<demo name="Examples/HidingMenuBar" />

3
docs/src/docPages/examples/history.md Normal file
View File

@@ -0,0 +1,3 @@
# History
<demo name="Examples/History" />

3
docs/src/docPages/examples/images.md Normal file
View File

@@ -0,0 +1,3 @@
# Images
<demo name="Examples/Images" />

3
docs/src/docPages/examples/links.md Normal file
View File

@@ -0,0 +1,3 @@
# Links
<demo name="Examples/Links" />

3
docs/src/docPages/examples/markdown-shortcuts.md Normal file
View File

@@ -0,0 +1,3 @@
# Markdown Shortcuts
<demo name="Examples/MarkdownShortcuts" />

3
docs/src/docPages/examples/menu-bubble.md Normal file
View File

@@ -0,0 +1,3 @@
# Menu Bubble
<demo name="Examples/MenuBubble" />

3
docs/src/docPages/examples/placeholder.md Normal file
View File

@@ -0,0 +1,3 @@
# Placeholder
<demo name="Examples/Placeholder" />

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

@@ -1,3 +1,3 @@
# Read-Only
<demo name="ReadOnly" highlight="3-6,22,28,43-49" />
<demo name="Examples/ReadOnly" highlight="3-6,22,28,40-46" />

3
docs/src/docPages/examples/search-and-replace.md Normal file
View File

@@ -0,0 +1,3 @@
# Search and Replace
<demo name="Examples/SearchAndReplace" />

3
docs/src/docPages/examples/suggestions.md Normal file
View File

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

3
docs/src/docPages/examples/tables.md Normal file
View File

@@ -0,0 +1,3 @@
# Tables
<demo name="Examples/Tables" />

3
docs/src/docPages/examples/title.md Normal file
View File

@@ -0,0 +1,3 @@
# Title
<demo name="Examples/Title" />

3
docs/src/docPages/examples/todo-list.md Normal file
View File

@@ -0,0 +1,3 @@
# Todo List
<demo name="Examples/TodoList" />

3
docs/src/docPages/examples/trailing-paragraph.md Normal file
View File

@@ -0,0 +1,3 @@
# Trailing Paragraph
<demo name="Examples/TrailingParagraph" />

10
docs/src/docPages/guide/build-your-editor.md
View File

@@ -14,7 +14,7 @@ You might wonder what features tiptap supports out of the box. In the above exam
### Related Links
* [List of available commands](/commands/)
* [List of available commands](/api/commands)
## Configure extensions
@@ -28,8 +28,8 @@ That’s also the place where you can register custom extensions, which you or s
### Related links
* [List of available commands](/commands/)
* [List of available extensions](/extensions/)
* [List of available commands](/api/commands)
* [List of available extensions](/api/extensions)
* Build custom extensions
## Difference between nodes and marks
@@ -42,5 +42,5 @@ tiptap used a JSON schema under the hood. Every part of the text is stored as a
### Related links
* [Learn more about the schema](/schema/)
* [List of available extensions](/extensions/)
* [Learn more about the schema](/api/schema)
* [List of available extensions](/api/extensions)

4
docs/src/docPages/guide/getting-started.md
View File

@@ -23,10 +23,10 @@ Create a new Vue component (you can call it `<Tiptap />`) and add the following
<demo name="GettingStarted" />
::: warning Using with Nuxt.js
If you are using **Nuxt.js**, note that tiptap needs to run in the client, not on the server. Wrapping the editor in a `<client-only>` tag is **required**.
If you are using 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.
:::
Congrats! You’ve got it! 🎉 Let’s start to build your editor in the next step.
Congrats! You’ve got it! 🎉 Let’s start to configure your editor in the next step.
### Related links

7
docs/src/layouts/App/index.vue
View File

@@ -43,16 +43,16 @@
<div class="app__link-group-title">
{{ linkGroup.title }}
</div>
<ul>
<ul class="app__link-list">
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link class="app__link" :to="item.link">
{{ item.title }}
</g-link>
<ul v-if="item.items">
<ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k">
<g-link class="app__link" :to="item.link">
‒ {{ item.title }}
{{ item.title }}
</g-link>
</li>
</ul>
@@ -64,6 +64,7 @@
<main class="app__main">
<slot/>
<p>
<br />
<a :href="editLink" target="_blank">
<span>Edit this page on GitHub</span>
</a>

7
docs/src/layouts/App/style.scss
View File

@@ -24,6 +24,13 @@ $menuBreakPoint: 750px;
margin-bottom: 0.5rem;
}
&__link-list &__link-list {
padding-left: 1rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
border-left: 2px solid rgba($colorBlack, 0.1);
}
&__link {
display: block;
padding: 0.1rem 0.5rem;

48
docs/src/links.yaml
View File

@@ -1,27 +1,27 @@
- title: Getting Started
items:
- title: Introduction 🚧
- title: Introduction
link: /getting-started/introduction/
- title: Installation ✅
- title: Installation
link: /getting-started/installation/
- title: Upgrade Guide ❌
- title: Upgrade Guide
link: /getting-started/upgrade-guide/
- title: Guide
items:
- title: Getting started ✅
- title: Getting started
link: /guide/getting-started/
- title: Configuration 🚧
- title: Configuration
link: /guide/configuration/
- title: Build your editor 🚧
- title: Build your editor
link: /guide/build-your-editor/
- title: Custom styling ❌
- title: Custom styling
link: /guide/custom-styling/
- title: Get content 🚧
- title: Get content
link: /guide/get-content/
- title: Custom extensions ❌
- title: Custom extensions
link: /guide/custom-extensions/
- title: Use Vue Components ❌
- title: Use Vue Components
link: /guide/use-vue-components/
- title: Examples
@@ -75,7 +75,7 @@
items:
- title: Editor
link: /api/editor/
- title: Extensions 🚧
- title: Extensions
link: /api/extensions/
items:
- title: Blockquote
@@ -83,41 +83,47 @@
- title: Bold
link: /api/extensions/bold
- title: BulletList
link: /api/extensions/bulletlist
link: /api/extensions/bullet-list
- title: Code
link: /api/extensions/code
- title: CodeBlock
link: /api/extensions/codeblock
link: /api/extensions/code-block
- title: CodeBlockHighlight
link: /api/extensions/code-block-highlight
- title: Collaboration
link: /api/extensions/collaboration
- title: Hardbreak
link: /api/extensions/hard-break
- title: Heading
link: /api/extensions/heading
- title: History
link: /api/extensions/history
- title: HorizontalRule
link: /api/extensions/horizontalrule
link: /api/extensions/horizontal-rule
- title: Italic
link: /api/extensions/italic
- title: Link
link: /api/extensions/link
- title: ListItem
link: /api/extensions/listitem
link: /api/extensions/list-item
- title: Mention
link: /api/extensions/mention
- title: OrderedList
link: /api/extensions/orderedlist
link: /api/extensions/ordered-list
- title: Placeholder
link: /api/extensions/placeholder
- title: Strike
link: /api/extensions/strike
- title: TableCell
link: /api/extensions/tablecell
link: /api/extensions/table-cell
- title: TableHeader
link: /api/extensions/tableheader
link: /api/extensions/table-header
- title: TableRow
link: /api/extensions/tablerow
link: /api/extensions/table-row
- title: TodoItem
link: /api/extensions/todoitem
link: /api/extensions/todo-item
- title: TodoList
link: /api/extensions/todolist
link: /api/extensions/todo-list
- title: Underline
link: /api/extensions/underline
- title: Commands

1
docs/src/variables.scss
View File

@@ -1,5 +1,6 @@
$colorWhite: #FFF;
$colorBlack: #000;
$colorRed: #fa5252;
$colorBackground: mix($colorBlack, $colorWhite, 2%);
/* Default Equations */