mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-29 08:19:34 +08:00
Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/replace-classes
# Conflicts: # docs/src/demos/Examples/Focus/index.vue # docs/src/docPages/api/extensions/placeholder.md # docs/src/docPages/general/roadmap.md
This commit is contained in:
Philipp Kühn
commit
0361da1b71
@ -1,4 +1,4 @@
|
||||
context('basic', () => {
|
||||
context('/examples/basic', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/basic')
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
context('export-html-or-json', () => {
|
||||
context('/examples/export-html-or-json', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/export-html-or-json')
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
context('focus', () => {
|
||||
context('/examples/focus', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/focus')
|
||||
})
|
||||
|
||||
@ -9,12 +9,7 @@ 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 {
|
||||
@ -32,14 +27,9 @@ export default {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
History(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
Bold(),
|
||||
Italic(),
|
||||
Code(),
|
||||
CodeBlock(),
|
||||
Heading(),
|
||||
Focus({
|
||||
className: 'has-focus',
|
||||
nested: true,
|
||||
@ -48,16 +38,12 @@ export default {
|
||||
autoFocus: true,
|
||||
content: `
|
||||
<p>
|
||||
With the focus extension you can add custom classes to focused nodes. Default options:
|
||||
The focus extension adds custom classes to focused nodes. By default, it’ll add a <code>has-focus</code> class, even to nested nodes:
|
||||
</p>
|
||||
<pre><code>{\n className: 'has-focus',\n nested: true,\n}</code></pre>
|
||||
<pre><code>{ className: 'has-focus', nested: true }</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>
|
||||
<li>With <code>nested: true</code> nested elements like this list item will be focused.</li>
|
||||
<li>Otherwise the whole list will get the focus class, even if only a single list item is selected.</li>
|
||||
</ul>
|
||||
`,
|
||||
})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
context('history', () => {
|
||||
context('/examples/history', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/history')
|
||||
})
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
context('markdown-shortcuts', () => {
|
||||
context('/examples/markdown-shortcuts', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/markdown-shortcuts')
|
||||
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
const { editor } = window
|
||||
editor.setContent('<p></p>')
|
||||
editor.clearContent()
|
||||
})
|
||||
})
|
||||
|
||||
@ -69,7 +69,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
|
||||
describe('code block', () => {
|
||||
it('should create a code block without language', () => {
|
||||
it.skip('should create a code block without language', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('``` {enter}const foo = bar{enter}```', {force: true})
|
||||
@ -79,7 +79,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
|
||||
describe('bullet list', () => {
|
||||
it('should create a bullet list from asteriks', () => {
|
||||
it.skip('should create a bullet list from asteriks', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('* foobar', {force: true})
|
||||
@ -87,7 +87,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('should create a bullet list from dashes', () => {
|
||||
it.skip('should create a bullet list from dashes', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('- foobar', {force: true})
|
||||
@ -95,7 +95,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('should create a bullet list from pluses', () => {
|
||||
it.skip('should create a bullet list from pluses', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('+ foobar', {force: true})
|
||||
@ -105,7 +105,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
|
||||
describe('ordered list', () => {
|
||||
it('should create a ordered list', () => {
|
||||
it.skip('should create a ordered list', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('1. foobar', {force: true})
|
||||
@ -115,7 +115,7 @@ context('markdown-shortcuts', () => {
|
||||
})
|
||||
|
||||
describe('blockquote', () => {
|
||||
it('should create a blockquote', () => {
|
||||
it.skip('should create a blockquote', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('.ProseMirror')
|
||||
.type('> foobar', {force: true})
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
context('read-only', () => {
|
||||
context('/examples/read-only', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/read-only')
|
||||
})
|
||||
|
||||
describe('editable', () => {
|
||||
it('should be read-only', () => {
|
||||
it.skip('should be read-only', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('#editable').uncheck()
|
||||
|
||||
@ -15,7 +15,7 @@ context('read-only', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('should be editable', () => {
|
||||
it.skip('should be editable', () => {
|
||||
cy.get('.ProseMirror').window().then(window => {
|
||||
cy.get('#editable').check()
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
context('simple', () => {
|
||||
context('/examples/simple', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/examples/simple')
|
||||
})
|
||||
|
||||
5
docs/src/demos/Extensions/Document/index.spec.js
Normal file
5
docs/src/demos/Extensions/Document/index.spec.js
Normal file
@ -0,0 +1,5 @@
|
||||
context('/api/extensions/document', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/api/extensions/document')
|
||||
})
|
||||
})
|
||||
44
docs/src/demos/Extensions/Document/index.vue
Normal file
44
docs/src/demos/Extensions/Document/index.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
new Document(),
|
||||
new Paragraph(),
|
||||
new Text(),
|
||||
],
|
||||
content: `
|
||||
<p>The Document extension is required. Though, you can write your own implementation, e. g. to give it custom name.</p>
|
||||
`,
|
||||
})
|
||||
|
||||
window.editor = this.editor
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -38,7 +38,7 @@ context('/api/extensions/history', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('the keyboard shortcut should apply the last undone change again', () => {
|
||||
it.skip('the keyboard shortcut should apply the last undone change again', () => {
|
||||
const undoShortcut = Cypress.platform === 'darwin' ? '{meta}z' : '{ctrl}z'
|
||||
const redoShortcut = Cypress.platform === 'darwin' ? '{meta}{shift}z' : '{ctrl}{shift}z'
|
||||
|
||||
|
||||
5
docs/src/demos/Extensions/Paragraph/index.spec.js
Normal file
5
docs/src/demos/Extensions/Paragraph/index.spec.js
Normal file
@ -0,0 +1,5 @@
|
||||
context('/api/extensions/paragraph', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/api/extensions/paragraph')
|
||||
})
|
||||
})
|
||||
44
docs/src/demos/Extensions/Paragraph/index.vue
Normal file
44
docs/src/demos/Extensions/Paragraph/index.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
new Document(),
|
||||
new Paragraph(),
|
||||
new Text(),
|
||||
],
|
||||
content: `
|
||||
<p>The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. 🤓</p>
|
||||
`,
|
||||
})
|
||||
|
||||
window.editor = this.editor
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1 +1,34 @@
|
||||
# Events
|
||||
# Events
|
||||
|
||||
:::warning Out of date
|
||||
This content is written for tiptap 1 and needs an update.
|
||||
:::
|
||||
|
||||
There are some events you can listen for. A full list of events can be found [here](/api/classes.md#editor-options).
|
||||
|
||||
```js
|
||||
const editor = new Editor({
|
||||
onInit: () => {
|
||||
// editor is initialized
|
||||
},
|
||||
onUpdate: ({ getHTML }) => {
|
||||
// get new content on update
|
||||
const newContent = getHTML()
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
It's also possible to register event listeners afterwards.
|
||||
|
||||
```js
|
||||
const editor = new Editor(…)
|
||||
|
||||
editor.on('init', () => {
|
||||
// editor is initialized
|
||||
})
|
||||
|
||||
editor.on('update', ({ getHTML }) => {
|
||||
// get new content on update
|
||||
const newContent = getHTML()
|
||||
})
|
||||
```
|
||||
|
||||
@ -18,9 +18,6 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
|
||||
| [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
|
||||
| [BulletList](/api/extensions/bullet-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
|
||||
| [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
|
||||
| [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
|
||||
| [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/)
|
||||
| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)
|
||||
| [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
||||
| [HardBreak](/api/extensions/hard-break) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
|
||||
| [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
|
||||
@ -28,20 +25,24 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
|
||||
| [HorizontalRule](/api/extensions/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
|
||||
| [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
|
||||
| [Link](/api/extensions/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
|
||||
| [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
|
||||
| [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)
|
||||
| [OrderedList](/api/extensions/ordered-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
|
||||
| [Paragraph](/api/extensions/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
|
||||
| [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/)
|
||||
| [Strike](/api/extensions/strike) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
|
||||
| [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/)
|
||||
| [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/)
|
||||
| [TableTow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/)
|
||||
| [Text](/api/extensions/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
|
||||
| [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/)
|
||||
| [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/)
|
||||
| [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
|
||||
|
||||
<!-- | [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) -->
|
||||
<!-- | [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) -->
|
||||
<!-- | [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/) -->
|
||||
<!-- | [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) -->
|
||||
<!-- | [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) -->
|
||||
<!-- | [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/) -->
|
||||
<!-- | [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) -->
|
||||
<!-- | [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/) -->
|
||||
<!-- | [TableRow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) -->
|
||||
<!-- | [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/) -->
|
||||
<!-- | [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) -->
|
||||
|
||||
## Community extensions
|
||||
|
||||
:::warning Work in Progress
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -6,7 +6,9 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -6,7 +6,9 @@ It’s intended to be used with the `ListItem` extension.
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -1 +1,14 @@
|
||||
# Document
|
||||
# Document
|
||||
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s the home to all other nodes. Think of it like the `<body>` tag for your document.
|
||||
|
||||
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself:
|
||||
|
||||
:::warning Breaking Change from 1.x → 2.x
|
||||
Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
||||
:::
|
||||
|
||||
## Source Code
|
||||
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Document" highlight="10,28" />
|
||||
@ -3,7 +3,8 @@ Enables you to use headline HTML tags in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are supported. |
|
||||
|
||||
## Commands
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
Enables you to use the `<hr>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -6,7 +6,9 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -3,5 +3,6 @@ Enables you to use the `<a>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
| openOnClick | Boolean | true | Specifies if links will be opened on click. |
|
||||
|
||||
@ -3,4 +3,9 @@ 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.
|
||||
:::
|
||||
:::
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
@ -6,7 +6,9 @@ This extensions is intended to be used with the `ListItem` extension.
|
||||
:::
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -1,2 +1,19 @@
|
||||
# Paragraph
|
||||
Enables you to use paragraphs in the editor.
|
||||
Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
*None*
|
||||
|
||||
## Keybindings
|
||||
*None*
|
||||
|
||||
## Source Code
|
||||
[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
|
||||
|
||||
## Usage
|
||||
<demo name="Extensions/Paragraph" highlight="11,29" />
|
||||
|
||||
@ -1,83 +1,2 @@
|
||||
# Placeholder
|
||||
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 |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| resizable | Boolean | false | Enables the resizing of columns |
|
||||
|
||||
## Keybindings
|
||||
* `Tab` → Next Cell
|
||||
* `Shift` + `Tab` + ` → Previous Cell
|
||||
|
||||
## 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 | — | 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. |
|
||||
|
||||
## Usage
|
||||
::: warning
|
||||
You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow`)
|
||||
:::
|
||||
|
||||
```markup
|
||||
<template>
|
||||
<div>
|
||||
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||
<button :class="{ 'is-active': isActive.bold() }" @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })">
|
||||
Create Table
|
||||
</button>
|
||||
</editor-menu-bar>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||
import { Table, TableCell, TableHeader, TableRow } from 'tiptap-extensions'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorMenuBar,
|
||||
EditorContent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
Table(),
|
||||
TableCell(),
|
||||
TableHeader(),
|
||||
TableRow(),
|
||||
],
|
||||
content: ''
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -2,7 +2,9 @@
|
||||
Enables you to use the `<s>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -7,7 +7,7 @@ This extensions is intended to be used with the `TodoList` extension.
|
||||
|
||||
## Options
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ---- | ----- |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| nested | Boolean | false | Specifies if you can nest todo lists. |
|
||||
|
||||
## Commands
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
Enables you to use the `<u>` HTML tag in the editor.
|
||||
|
||||
## Options
|
||||
*None*
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | ---- | ------- | ----------- |
|
||||
| class | string | – | Add a custom class to the rendered HTML tag. |
|
||||
|
||||
## Commands
|
||||
| Command | Options | Description |
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
# Focus
|
||||
|
||||
<demo name="Examples/Focus" highlight="18,43-46,48" />
|
||||
<demo name="Examples/Focus" highlight="13,33-36,38" />
|
||||
@ -1,73 +0,0 @@
|
||||
# Roadmap
|
||||
|
||||
## New features
|
||||
|
||||
* generate schema without initializing tiptap, to make SSR easier (e. g. `getSchema([Doc(), Paragraph()])`)
|
||||
|
||||
## Requested features
|
||||
|
||||
* Basic Styling
|
||||
* https://github.com/ueberdosis/tiptap/issues/507
|
||||
* Support vor Vue.js 3
|
||||
* Easily add custom classes to everything
|
||||
* https://github.com/ueberdosis/tiptap/discussions/817
|
||||
* Text snippets
|
||||
* https://github.com/ueberdosis/tiptap/issues/737
|
||||
* Markdown Support
|
||||
|
||||
## Requested extensions
|
||||
|
||||
* Alignment
|
||||
* https://github.com/ueberdosis/tiptap/pull/544
|
||||
* Font color
|
||||
* Font family
|
||||
* Font size
|
||||
* Created embed from pasted YouTube URL
|
||||
* Superscript/Subscript
|
||||
* https://github.com/ueberdosis/tiptap/discussions/813
|
||||
* Math Support
|
||||
* https://github.com/ueberdosis/tiptap/issues/179
|
||||
* https://github.com/ueberdosis/tiptap/issues/698
|
||||
* Resizeable Images
|
||||
* https://gist.github.com/zachjharris/a5442efbdff11948d085b6b1406dfbe6
|
||||
|
||||
## Ideas
|
||||
|
||||
* A `@tiptap/extensions` package would be helpful to make imports easier.
|
||||
* Add more shorcuts:
|
||||
* Ctrl+I → Italic ✅
|
||||
* Ctrl+B → Bold ✅
|
||||
* Ctrl+K → Link (Medium, Tumblr, Slack, Google Docs, Word)
|
||||
* Ctrl+Shift+K → Code (Slack)
|
||||
* Shift+Enter → Line break
|
||||
* Ctrl+Shift+X → Strikethrough (Slack)
|
||||
* Alt+Shift+5 → Strikethrough (Google Docs)
|
||||
* Ctrl+Shift+6 → Strikethrough (Tumblr)
|
||||
* Ctrl+Alt+0 → Paragraph (Google Docs)
|
||||
* Ctrl+Alt+1 to 6 → Heading (Google Docs, Word, ~Medium, ~Slack)
|
||||
* Ctrl+Shift+2 → Heading (Tumblr)
|
||||
* Ctrl+Shift+7 → Ordered list (Google Docs, Slack, Tumblr)
|
||||
* Ctrl+Shift+8 → Unordered list (Google Docs, Slack, Tumblr)
|
||||
* Tab, Shift+Tab → Increase / decrease nesting in lists
|
||||
* Ctrl+], Ctrl+[ → Same as above (when Tab needs to be used)
|
||||
* Ctrl+Shift+9 → Blockquote (Tumblr)
|
||||
* Ctrl+Alt+K → Code block (Slack)
|
||||
* Ctrl+R → Horizontal ruler (Stack Overflow)
|
||||
* Markdown shortcuts
|
||||
* #+Space → Heading (the number of # determines the header level)
|
||||
* *+Space, -+Space → Unordered list
|
||||
* 1.+Space → Ordered list
|
||||
* >+Space → Blockquote
|
||||
* ```+Space → Code block
|
||||
* ---- → Horizontal ruler
|
||||
* ![] → Embedded resource (not part of Slack, but would it not be fancy?)
|
||||
* :emoji: → Emoji (based on the name). A nice-to-have, most certainly.
|
||||
* General shortcuts
|
||||
* Ctrl+C, Ctrl+X, Ctrl+V: copy, cut, paste
|
||||
* Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y: undo, redo
|
||||
* Ctrl+Backspace: delete previous word
|
||||
* Ctrl+Delete: delete next word
|
||||
* Ctrl+Home, Ctrl+End: go to the start / end of the whole document
|
||||
* Ctrl+F, Ctrl+G: find, find next occurrence
|
||||
* Ctrl+S: if there is no auto-saving, this should save the document
|
||||
* Ctrl+/: show shortcuts (Medium, Slack)
|
||||
@ -1,3 +0,0 @@
|
||||
# Upgrade Guide
|
||||
|
||||
## Upgrading from 1.x to 2.x
|
||||
11
docs/src/docPages/overview/contributing.md
Normal file
11
docs/src/docPages/overview/contributing.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Contributing
|
||||
|
||||
## What kind of contributions are welcome
|
||||
|
||||
## What kind of contributions won’t be merged
|
||||
|
||||
## How to send your first Pull Request
|
||||
|
||||
## Code style
|
||||
|
||||
## Testing
|
||||
@ -2,15 +2,15 @@
|
||||
|
||||
tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
|
||||
|
||||
## Vanilla JavaScript
|
||||
## Plain 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 the tiptap core with other frameworks not mentioned here.
|
||||
|
||||
```bash
|
||||
# Use npm
|
||||
# With npm
|
||||
npm install @tiptap/core @tiptap/starter-kit
|
||||
|
||||
# Or: Use Yarn
|
||||
# Or: With Yarn
|
||||
yarn add @tiptap/core @tiptap/starter-kit
|
||||
```
|
||||
|
||||
@ -18,11 +18,11 @@ Great, that should be enough to start. Here is the most essential code you need
|
||||
|
||||
```js
|
||||
import { Editor } from '@tiptap/core'
|
||||
import extensions from '@tiptap/starter-kit'
|
||||
import defaultExtensions from '@tiptap/starter-kit'
|
||||
|
||||
new Editor({
|
||||
element: document.getElementsByClassName('element'),
|
||||
extensions: extensions(),
|
||||
extensions: defaultExtensions(),
|
||||
content: '<p>Your content.</p>',
|
||||
})
|
||||
```
|
||||
@ -32,10 +32,10 @@ new Editor({
|
||||
To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project:
|
||||
|
||||
```bash
|
||||
# Using npm
|
||||
# With npm
|
||||
npm install @tiptap/vue @tiptap/vue-starter-kit
|
||||
|
||||
# Using Yarn
|
||||
# Or: With Yarn
|
||||
yarn add @tiptap/vue @tiptap/vue-starter-kit
|
||||
```
|
||||
|
||||
3
docs/src/docPages/overview/roadmap.md
Normal file
3
docs/src/docPages/overview/roadmap.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Roadmap
|
||||
|
||||
See https://github.com/ueberdosis/tiptap-next/projects/1
|
||||
3
docs/src/docPages/overview/sponsoring.md
Normal file
3
docs/src/docPages/overview/sponsoring.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Sponsoring
|
||||
|
||||
https://github.com/sponsors/ueberdosis
|
||||
35
docs/src/docPages/overview/upgrade-guide.md
Normal file
35
docs/src/docPages/overview/upgrade-guide.md
Normal file
@ -0,0 +1,35 @@
|
||||
# Upgrade Guide
|
||||
|
||||
## Reasons to upgrade to tiptap 2.x
|
||||
|
||||
* TypeScript: auto complete, less bugs, generated API documentation
|
||||
* Amazing documentation with 100+ pages
|
||||
* Active maintenance, no more updates to 1.x
|
||||
* Tons of new extensions planned
|
||||
* Less bugs, tested code based
|
||||
|
||||
## Upgrading from 1.x to 2.x
|
||||
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you should do:
|
||||
|
||||
### New document type
|
||||
**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
||||
|
||||
```js
|
||||
import Document from '@tiptap/extension-document'
|
||||
const CustomDocument = Document.name('doc').create()
|
||||
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomDocument(),
|
||||
…
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
### New extension API
|
||||
|
||||
In case you’ve built some custom extensions for your project, you’ll need to rewrite them to fit the new API. No worries, though, you can keep a lot of your work though. The schema, commands, keys, inputRules, pasteRules all work like they did before. It’s just different how you register them.
|
||||
|
||||
```js
|
||||
const CustomExtension = …
|
||||
```
|
||||
@ -1,14 +1,20 @@
|
||||
- title: General
|
||||
- title: Overview
|
||||
items:
|
||||
- title: Introduction
|
||||
link: /
|
||||
- title: Installation
|
||||
link: /general/installation
|
||||
link: /overview/installation
|
||||
- title: Upgrade Guide
|
||||
link: /general/upgrade-guide
|
||||
link: /overview/upgrade-guide
|
||||
draft: true
|
||||
- title: Contributing
|
||||
link: /overview/contributing
|
||||
draft: true
|
||||
- title: Sponsoring
|
||||
link: /overview/sponsoring
|
||||
draft: true
|
||||
- title: Roadmap
|
||||
link: /general/roadmap
|
||||
link: /overview/roadmap
|
||||
draft: true
|
||||
|
||||
- title: Guide
|
||||
@ -40,62 +46,62 @@
|
||||
link: /examples/basic
|
||||
- title: Simple
|
||||
link: /examples/simple
|
||||
- title: Menu Bubble
|
||||
link: /examples/menu-bubble
|
||||
draft: true
|
||||
- title: Floating Menu
|
||||
link: /examples/floating-menu
|
||||
draft: true
|
||||
- title: Links
|
||||
link: /examples/links
|
||||
draft: true
|
||||
- title: Images
|
||||
link: /examples/images
|
||||
draft: true
|
||||
- title: Hiding Menu Bar
|
||||
link: /examples/hiding-menu-bar
|
||||
draft: true
|
||||
- title: Todo List
|
||||
link: /examples/todo-list
|
||||
draft: true
|
||||
- title: Tables
|
||||
link: /examples/tables
|
||||
draft: true
|
||||
- title: Search and Replace
|
||||
link: /examples/search-and-replace
|
||||
draft: true
|
||||
- title: Suggestions
|
||||
link: /examples/suggestions
|
||||
draft: true
|
||||
# - title: Menu Bubble
|
||||
# link: /examples/menu-bubble
|
||||
# draft: true
|
||||
# - title: Floating Menu
|
||||
# link: /examples/floating-menu
|
||||
# draft: true
|
||||
# - title: Links
|
||||
# link: /examples/links
|
||||
# draft: true
|
||||
# - title: Images
|
||||
# link: /examples/images
|
||||
# draft: true
|
||||
# - title: Hiding Menu Bar
|
||||
# link: /examples/hiding-menu-bar
|
||||
# draft: true
|
||||
# - title: Todo List
|
||||
# link: /examples/todo-list
|
||||
# draft: true
|
||||
# - title: Tables
|
||||
# link: /examples/tables
|
||||
# draft: true
|
||||
# - title: Search and Replace
|
||||
# link: /examples/search-and-replace
|
||||
# draft: true
|
||||
# - title: Suggestions
|
||||
# link: /examples/suggestions
|
||||
# draft: true
|
||||
- title: Markdown Shortcuts
|
||||
link: /examples/markdown-shortcuts
|
||||
- title: Code Highlighting
|
||||
link: /examples/code-highlighting
|
||||
draft: true
|
||||
# - title: Code Highlighting
|
||||
# link: /examples/code-highlighting
|
||||
# draft: true
|
||||
- title: History
|
||||
link: /examples/history
|
||||
- title: Read-Only
|
||||
link: /examples/read-only
|
||||
- title: Embeds
|
||||
link: /examples/embeds
|
||||
draft: true
|
||||
- title: Placeholder
|
||||
link: /examples/placeholder
|
||||
draft: true
|
||||
# - title: Embeds
|
||||
# link: /examples/embeds
|
||||
# draft: true
|
||||
# - title: Placeholder
|
||||
# link: /examples/placeholder
|
||||
# draft: true
|
||||
- title: Focus
|
||||
link: /examples/focus
|
||||
- title: Collaboration
|
||||
link: /examples/collaboration
|
||||
draft: true
|
||||
- title: Title
|
||||
link: /examples/title
|
||||
draft: true
|
||||
- title: Trailing Paragraph
|
||||
link: /examples/trailing-paragraph
|
||||
draft: true
|
||||
- title: Drag Handle
|
||||
link: /examples/drag-handle
|
||||
draft: true
|
||||
# - title: Collaboration
|
||||
# link: /examples/collaboration
|
||||
# draft: true
|
||||
# - title: Title
|
||||
# link: /examples/title
|
||||
# draft: true
|
||||
# - title: Trailing Paragraph
|
||||
# link: /examples/trailing-paragraph
|
||||
# draft: true
|
||||
# - title: Drag Handle
|
||||
# link: /examples/drag-handle
|
||||
# draft: true
|
||||
- title: Export HTML or JSON
|
||||
link: /examples/export-html-or-json
|
||||
|
||||
@ -117,18 +123,17 @@
|
||||
draft: true
|
||||
- title: Code
|
||||
link: /api/extensions/code
|
||||
- title: CodeBlock
|
||||
link: /api/extensions/code-block
|
||||
draft: true
|
||||
- title: CodeBlockHighlight
|
||||
link: /api/extensions/code-block-highlight
|
||||
draft: true
|
||||
- title: Collaboration
|
||||
link: /api/extensions/collaboration
|
||||
draft: true
|
||||
# - title: CodeBlock
|
||||
# link: /api/extensions/code-block
|
||||
# draft: true
|
||||
# - title: CodeBlockHighlight
|
||||
# link: /api/extensions/code-block-highlight
|
||||
# draft: true
|
||||
# - title: Collaboration
|
||||
# link: /api/extensions/collaboration
|
||||
# draft: true
|
||||
- title: Document
|
||||
link: /api/extensions/document
|
||||
draft: true
|
||||
- title: Hardbreak
|
||||
link: /api/extensions/hard-break
|
||||
draft: true
|
||||
@ -148,39 +153,38 @@
|
||||
- title: ListItem
|
||||
link: /api/extensions/list-item
|
||||
draft: true
|
||||
- title: Mention
|
||||
link: /api/extensions/mention
|
||||
draft: true
|
||||
# - title: Mention
|
||||
# link: /api/extensions/mention
|
||||
# draft: true
|
||||
- title: OrderedList
|
||||
link: /api/extensions/ordered-list
|
||||
draft: true
|
||||
- title: Paragraph
|
||||
link: /api/extensions/paragraph
|
||||
draft: true
|
||||
- title: Placeholder
|
||||
link: /api/extensions/placeholder
|
||||
draft: true
|
||||
# - title: Placeholder
|
||||
# link: /api/extensions/placeholder
|
||||
# draft: true
|
||||
- title: Strike
|
||||
link: /api/extensions/strike
|
||||
draft: true
|
||||
# - title: TableCell
|
||||
# link: /api/extensions/table-cell
|
||||
# draft: true
|
||||
# - title: TableHeader
|
||||
# link: /api/extensions/table-header
|
||||
# draft: true
|
||||
# - title: TableRow
|
||||
# link: /api/extensions/table-row
|
||||
# draft: true
|
||||
- title: Text
|
||||
link: /api/extensions/text
|
||||
draft: true
|
||||
- title: TableCell
|
||||
link: /api/extensions/table-cell
|
||||
draft: true
|
||||
- title: TableHeader
|
||||
link: /api/extensions/table-header
|
||||
draft: true
|
||||
- title: TableRow
|
||||
link: /api/extensions/table-row
|
||||
draft: true
|
||||
- title: TodoItem
|
||||
link: /api/extensions/todo-item
|
||||
draft: true
|
||||
- title: TodoList
|
||||
link: /api/extensions/todo-list
|
||||
draft: true
|
||||
# - title: TodoItem
|
||||
# link: /api/extensions/todo-item
|
||||
# draft: true
|
||||
# - title: TodoList
|
||||
# link: /api/extensions/todo-list
|
||||
# draft: true
|
||||
- title: Underline
|
||||
link: /api/extensions/underline
|
||||
draft: true
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"build:docs": "yarn --cwd ./docs build",
|
||||
"build:packages": "yarn clean:packages && lerna exec --parallel -- microbundle --compress",
|
||||
"clean:packages": "rm -rf ./packages/*/dist",
|
||||
"test": "cypress open --project tests",
|
||||
"test:open": "cypress open --project tests",
|
||||
"test": "cypress run --project tests",
|
||||
"reset": "clean:packages && rm -rf ./**/.cache && rm -rf ./**/node_modules && rm -rf ./yarn.lock && yarn install"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user