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

Merge branch 'main' into feature/extension-code-block-lowlight

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-07 22:39:39 +02:00
parent 6720666fc3 7c4c50e520
commit 95f31f48fd
125 changed files with 1230 additions and 1389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,13 +30,9 @@ import TaskItem from '@tiptap/extension-task-item'
import Highlight from '@tiptap/extension-highlight'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
// import { IndexeddbPersistence } from 'y-indexeddb'
import { IndexeddbPersistence } from 'y-indexeddb'
import MenuBar from './MenuBar.vue'
const CustomTaskItem = TaskItem.extend({
content: 'paragraph',
})
const getRandomElement = list => {
return list[Math.floor(Math.random() * list.length)]
}
@@ -70,14 +66,17 @@ export default {
window.ydoc = ydoc
// this.indexdb = new IndexeddbPersistence('tiptap-collaboration-example', ydoc)
this.indexdb = new IndexeddbPersistence('tiptap-collaboration-example', ydoc)
this.editor = new Editor({
extensions: [
...defaultExtensions().filter(extension => extension.config.name !== 'history'),
Highlight,
TaskList,
CustomTaskItem,
TaskItem,
Collaboration.configure({
document: ydoc,
}),
CollaborationCursor.configure({
provider: this.provider,
user: this.currentUser,
@@ -85,9 +84,6 @@ export default {
this.users = users
},
}),
Collaboration.configure({
document: ydoc,
}),
],
})
@@ -327,7 +323,7 @@ export default {
display: flex;
align-items: center;
> input {
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
}

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

@@ -69,7 +69,7 @@ ul[data-type="taskList"] {
display: flex;
align-items: center;
> input {
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
}

3
docs/src/demos/Experiments/GlobalDragHandle/index.vue
View File

@@ -5,7 +5,8 @@
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-2'
import { defaultExtensions } from '@tiptap/starter-kit'
import DragHandle from './DragHandle.js'
export default {

2
docs/src/demos/Experiments/MultipleEditors/index.vue
View File

@@ -158,7 +158,7 @@ export default {
display: flex;
align-items: center;
> input {
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
}

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

@@ -33,6 +33,9 @@ export default {
Document,
Paragraph,
Text,
Collaboration.configure({
document: ydoc,
}),
CollaborationCursor.configure({
provider: this.provider,
user: {
@@ -40,9 +43,6 @@ export default {
color: '#f783ac',
},
}),
Collaboration.configure({
document: ydoc,
}),
],
})
},

4
docs/src/demos/Guide/Content/ReadOnly/index.spec.js
View File

@@ -6,7 +6,7 @@ context('/demos/Guide/Content/ReadOnly', () => {
it('should be read-only', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(false)
editor.commands.insertText('Edited: ')
editor.commands.insertContent('Edited: ')
cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
})
@@ -15,7 +15,7 @@ context('/demos/Guide/Content/ReadOnly', () => {
it('should be editable', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setEditable(true)
editor.commands.insertText('Edited: ')
editor.commands.insertContent('Edited: ')
cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
})

2
docs/src/demos/Guide/NodeViews/JavaScriptContent/Extension.js
View File

@@ -16,7 +16,7 @@ export default Node.create({
},
renderHTML({ HTMLAttributes }) {
return ['node-view', mergeAttributes(HTMLAttributes)]
return ['node-view', mergeAttributes(HTMLAttributes), 0]
},
addNodeView() {

2
docs/src/demos/Guide/NodeViews/ReactComponentContent/Extension.js
View File

@@ -18,7 +18,7 @@ export default Node.create({
},
renderHTML({ HTMLAttributes }) {
return ['react-component', mergeAttributes(HTMLAttributes)]
return ['react-component', mergeAttributes(HTMLAttributes), 0]
},
addNodeView() {

2
docs/src/demos/Guide/NodeViews/VueComponentContent/Extension.js
View File

@@ -18,7 +18,7 @@ export default Node.create({
},
renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes)]
return ['vue-component', mergeAttributes(HTMLAttributes), 0]
},
addNodeView() {

4
docs/src/demos/Marks/Link/index.vue
View File

@@ -16,6 +16,7 @@ import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Link from '@tiptap/extension-link'
import Bold from '@tiptap/extension-bold'
export default {
components: {
@@ -34,11 +35,12 @@ export default {
Document,
Paragraph,
Text,
Bold,
Link,
],
content: `
<p>
Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
Wow, this editor has support for links to the whole <strong><a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a></strong>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
</p>
<p>
By default every link will get a \`rel="noopener noreferrer nofollow"\` attribute. It’s configurable though.

12
docs/src/demos/Nodes/Emoji/index.vue
View File

@@ -1,21 +1,21 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus(). insertText('✨').run()">
<button @click="editor.chain().focus().insertContent('✨').run()">
✨
</button>
<button @click="editor.chain().focus(). insertText('😅').run()">
<button @click="editor.chain().focus().insertContent('😅').run()">
😅
</button>
<button @click="editor.chain().focus(). insertText('🎉').run()">
<button @click="editor.chain().focus().insertContent('🎉').run()">
🎉
</button>
<button @click="editor.chain().focus(). insertText('💖').run()">
<button @click="editor.chain().focus().insertContent('💖').run()">
💖
</button>
<button @click="editor.chain().focus(). insertText('👀').run()">
<button @click="editor.chain().focus().insertContent('👀').run()">
👀
</button>
<button @click="editor.chain().focus(). insertText('👍️').run()">
<button @click="editor.chain().focus().insertContent('👍️').run()">
👍️
</button>
<editor-content :editor="editor" />

2
docs/src/demos/Nodes/TaskItem/index.vue
View File

@@ -56,7 +56,7 @@ ul[data-type="taskList"] {
display: flex;
align-items: center;
> input {
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
}

2
docs/src/demos/Nodes/TaskList/index.vue
View File

@@ -60,7 +60,7 @@ ul[data-type="taskList"] {
display: flex;
align-items: center;
> input {
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
}

45
docs/src/docPages/api/commands.md
View File

@@ -43,8 +43,8 @@ addCommands() {
// Does work:
return chain()
.insertNode('timecode', attributes)
.insertText(' ')
.insertContent('foo!')
.insertContent('bar!')
.run()
},
}
@@ -60,7 +60,7 @@ editor
.focus()
.command(({ tr }) => {
// manipulate the transaction
tr.insertText('hey, that’s cool!')
tr.insertContent('hey, that’s cool!')
return true
})
@@ -91,7 +91,7 @@ Both calls would return `true` if it’s possible to apply the commands, and `fa
In order to make that work with your custom commands, don’t forget to return `true` or `false`.
For some of your own commands, you probably want to work with the raw [transaction](/api/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how we do that within `.insertText()`:
For some of your own commands, you probably want to work with the raw [transaction](/api/concept). To make them work with `.can()` you should check if the transaction should be dispatched. Here is how you can create a simple `.insertText()` command:
```js
export default (value: string): Command => ({ tr, dispatch }) => {
@@ -148,13 +148,11 @@ commands.first([
Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible.
### Content
| Command | Description |
| --------------- | ------------------------------------------------ |
| .clearContent() | Clear the whole document. |
| .insertHTML() | Insert a string of HTML at the current position. |
| .insertNode() | Insert a node at the current position. |
| .insertText() | Insert a string of text at the current position. |
| .setContent() | Replace the whole document with new content. |
| Command | Description | Links |
| ---------------- | -------------------------------------------------------- | ------------------------------------ |
| .clearContent() | Clear the whole document. | [More](/api/commands/clear-content) |
| .insertContent() | Insert a node or string of HTML at the current position. | [More](/api/commands/insert-content) |
| .setContent() | Replace the whole document with new content. | [More](/api/commands/set-content) |
### Nodes & Marks
| Command | Description |
@@ -170,7 +168,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .newlineInCode() | Add a newline character in code. |
| .replace() | Replaces text with a node. |
| .replaceRange() | Replaces text with a node within a range. |
| .resetNodeAttributes() | Resets all node attributes to the default value. |
| .resetAttributes() | Resets some node or mark attributes to the default value. |
| .selectParentNode() | Select the parent node. |
| .setMark() | Add a mark with new attributes. |
| .setNode() | Replace a given range with a node. |
@@ -181,7 +179,7 @@ Have a look at all of the core commands listed below. They should give you a goo
| .undoInputRule() | Undo an input rule. |
| .unsetAllMarks() | Remove all marks in the current selection. |
| .unsetMark() | Remove a mark in the current selection. |
| .updateNodeAttributes() | Update attributes of a node. |
| .updateAttributes() | Update attributes of a node or mark. |
### Lists
| Command | Description |
@@ -220,13 +218,13 @@ this.editor
.chain()
.focus()
.createParagraphNear()
.insertText(text)
.insertContent(text)
.setBlockquote()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.createParagraphNear()
.unsetBlockquote()
.createParagraphNear()
.insertHTML('<p></p>')
.insertContent('<p></p>')
.run()
```
@@ -237,7 +235,18 @@ addCommands() {
insertTimecode: attributes => ({ chain }) => {
return chain()
.focus()
.insertNode('timecode', attributes)
.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'heading',
},
],
})
.insertText(' ')
.run();
},
@@ -249,5 +258,5 @@ addCommands() {
## Add custom commands
All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.
Of course, you can [add your custom extensions](/guide/build-extensions) with custom commands aswell.
Of course, you can [add your custom extensions](/guide/custom-extensions) with custom commands aswell.

12
docs/src/docPages/api/commands/clear-content.md Normal file
View File

@@ -0,0 +1,12 @@
# clearContent
See also: [setContent](/api/commands/set-content)
## Parameters
## Usage
```js
this.editor.commands.clearContent()
```

23
docs/src/docPages/api/commands/insert-content.md Normal file
View File

@@ -0,0 +1,23 @@
# insertContent
## Parameters
## Usage
```js
this.editor.commands.insertContent('text')
this.editor.commands.insertContent('<p>HTML</p>')
this.editor.commands.insertContent({
type: 'heading',
attrs: {
level: 2,
},
content: [
{
type: 'text',
text: 'nested nodes',
},
],
})
```

42
docs/src/docPages/api/commands/set-content.md Normal file
View File

@@ -0,0 +1,42 @@
# setContent
The `setContent` command replaces the document with a new one. You can pass JSON or HTML, both work fine. It’s basically the same as setting the `content` on initialization.
See also: [clearContent](/api/commands/clear-content)
## Parameters
`content: string`
Pass a string (JSON or HTML) as [content](/guide/output). The editor will only render what’s allowed according to the [schema](/api/schema).
`emitUpdate?: Boolean`
By default, it doesn’t trigger the update event. Passing `true` doesn’t prevent triggering the update event.
`parseOptions?: AnyObject`
Options to configure the parsing can be passed during initialization and/or with setContent. Read more about parseOptions in the [ProseMirror documentation](https://prosemirror.net/docs/ref/#model.ParseOptions).
## Usage
```js
// HTML
this.editor.commands.setContent('<p>Example Text</p>')
// JSON
this.editor.commands.setContent({
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Example Text"
}
]
}
]
})
```

5
docs/src/docPages/api/editor.md
View File

@@ -14,7 +14,6 @@ Don’t confuse methods with [commands](/api/commands). Commands are used to cha
| --------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `can()` | - | Check if a command or a command chain can be executed. Without executing it. |
| `chain()` | - | Create a command chain to call multiple commands at once. |
| `createDocument()` | `content` EditorContent<br>`parseOptions` | Creates a ProseMirror document. |
| `destroy()` | – | Stops the editor instance and unbinds all events. |
| `getHTML()` | – | Returns the current content as HTML. |
| `getJSON()` | – | Returns the current content as JSON. |
@@ -129,7 +128,7 @@ new Editor({
| `null` | Disables autofocus. |
### Enable input rules
By default, tiptap enables all [input rules](/guide/build-extensions/#input-rules). With `enableInputRules` you can disable that.
By default, tiptap enables all [input rules](/guide/custom-extensions/#input-rules). With `enableInputRules` you can disable that.
```js
import { Editor } from '@tiptap/core'
@@ -143,7 +142,7 @@ new Editor({
```
### Enable paste rules
By default, tiptap enables all [paste rules](/guide/build-extensions/#paste-rules). With `enablePasteRules` you can disable that.
By default, tiptap enables all [paste rules](/guide/custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
```js
import { Editor } from '@tiptap/core'

10
docs/src/docPages/api/events.md
View File

@@ -19,9 +19,6 @@ const editor = new Editor({
onSelectionUpdate({ editor }) {
// The selection has changed.
},
onViewUpdate({ editor }) {
// The view has changed.
},
onTransaction({ editor, transaction }) {
// The editor state has changed.
},
@@ -57,10 +54,6 @@ editor.on('selectionUpdate', ({ editor }) => {
// The selection has changed.
}
editor.on('viewUpdate', ({ editor }) => {
// The view has changed.
}
editor.on('transaction', ({ editor, transaction }) => {
// The editor state has changed.
}
@@ -113,9 +106,6 @@ const CustomExtension = Extension.create({
onSelectionUpdate({ editor }) {
// The selection has changed.
},
onViewUpdate({ editor }) {
// The view has changed.
},
onTransaction({ editor, transaction }) {
// The editor state has changed.
},

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

@@ -51,6 +51,7 @@ const editor = new Editor({
Text,
// …
],
})
```
Learn [more about custom extensions in our guide](/guide/extend-extensions).

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

@@ -49,6 +49,7 @@ const editor = new Editor({
Text,
// …
],
})
```
Learn [more about custom extensions in our guide](/guide/build-extensions).
Learn [more about custom extensions in our guide](/guide/custom-extensions).

2
docs/src/docPages/api/nodes/emoji.md
View File

@@ -13,7 +13,7 @@ We need your support to maintain, update, support and develop tiptap 2. If you
You can use any emoji picker, or build your own. Just use [commands](/api/commands) to insert the picked emojis.
```js
this.editor.chain().focus().insertText('✨').run()
this.editor.chain().focus().insertContent('✨').run()
```
<demo name="Nodes/Emoji" />

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

@@ -7,7 +7,7 @@ Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net
This schema is *very* strict. You can’t use any HTML element or attribute that is not defined in your schema.
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, don’t have any extension that handles `strong` tags registered, you’ll only see `This is important` – without the strong tags.
Let me give you one example: If you paste something like `This is <strong>important</strong>` into tiptap, but don’t have any extension that handles `strong` tags, you’ll only see `This is important` – without the strong tags.
## How a schema looks like
When you’ll work with the provided extensions only, you don’t have to care that much about the schema. If you’re building your own extensions, it’s probably helpful to understand how the schema works. Let’s look at the most simple schema for a typical ProseMirror editor:

4
docs/src/docPages/community.md Normal file
View File

@@ -0,0 +1,4 @@
# Community
* GitHub https://github.com/ueberdosis/tiptap-next
* Discord https://discord.gg/WtJ49jGshW
* Twitter https://twitter.com/tiptap_editor

6
docs/src/docPages/guide/collaborative-editing.md
View File

@@ -158,15 +158,15 @@ const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document'
const editor = new Editor({
extensions: [
Collaboration.configure({
document: ydoc,
}),
// Register the collaboration cursor extension
CollaborationCursor.configure({
provider: provider,
name: 'Cyndi Lauper',
color: '#f783ac',
}),
Collaboration.configure({
document: ydoc,
}),
// …
],
})

2
docs/src/docPages/guide/configuration.md
View File

@@ -1,4 +1,4 @@
# Configure the editor
# Configuration
## toc

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

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

15
docs/src/docPages/guide/extend-extensions.md
View File

@@ -1,4 +1,4 @@
# Extend the functionality
# Overwrite & extend
## toc
@@ -37,7 +37,18 @@ The same applies to every aspect of an existing extension, except to the name. L
### Name
The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, we would recommended to copy the whole extension and change the name in all occurrences.
The extension name is also part of the JSON. If you [store your content as JSON](/guide/content#option-1-json), you need to change the name there too.
The extension name is also part of the JSON. If you [store your content as JSON](/guide/output#option-1-json), you need to change the name there too.
### Priority
With the priority you can specify the order of the extensions. This has an impact on the schema and ProseMirror plugins. Default priority is `100`. A higher value means that the extension will be loaded earlier.
```js
import Link from '@tiptap/extension-link'
const CustomLink = Link.extend({
priority: 1000,
})
```
### Settings
All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of tiptap for other developers, you can do it like that:

2
docs/src/docPages/guide/menus.md
View File

@@ -49,7 +49,7 @@ Let’s assume you’ve got the editor running already and you want to add your
Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/commands#chain-commands), so let’s go through this one by one:
```js
editor.chain().toggleBold().focus().run()
editor.chain().focus().toggleBold().run()
```
1. `editor` should be a tiptap instance,

2
docs/src/docPages/guide/node-views.md
View File

@@ -61,7 +61,7 @@ You can even mix non-editable and editable text. That’s great to build complex
**BUT**, that also means the cursor can’t just move from outside of the node view to the inside. Users have to manually place their cursor to edit the content inside the node view. Just so you know.
## Markup
But what happens if you [access the editor content](/guide/content)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
But what happens if you [access the editor content](/guide/output)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
The editor **does not** export the rendered JavaScript node, and for a lot of use cases you wouldn’t want that anyway.

2
docs/src/docPages/guide/node-views/js.md
View File

@@ -8,7 +8,7 @@ Using frameworks like Vue or React can feel too complex, if you’re used to wor
## Render a node view with JavaScript
Here is what you need to do to render a node view inside your editor:
1. [Create a node extension](/guide/build-extensions)
1. [Create a node extension](/guide/custom-extensions)
2. Register a new node view with `addNodeView()`
3. Write your render function
4. [Configure tiptap to use your new node extension](/guide/configuration)

2
docs/src/docPages/guide/node-views/react.md
View File

@@ -8,7 +8,7 @@ Using plain JavaScript can feel complex if you are used to work in React. Good n
## Render a React component
Here is what you need to do to render React components inside your editor:
1. [Create a node extension](/guide/build-extensions)
1. [Create a node extension](/guide/custom-extensions)
2. Create a React component
3. Pass that component to the provided `ReactNodeViewRenderer`
4. Register it with `addNodeView()`

2
docs/src/docPages/guide/node-views/vue.md
View File

@@ -8,7 +8,7 @@ Using plain JavaScript can feel complex if you are used to work in Vue. Good new
## Render a Vue component
Here is what you need to do to render Vue components inside your editor:
1. [Create a node extension](/guide/build-extensions)
1. [Create a node extension](/guide/custom-extensions)
2. Create a Vue component
3. Pass that component to the provided `VueNodeViewRenderer`
4. Register it with `addNodeView()`

2
docs/src/docPages/guide/content.md → docs/src/docPages/guide/output.md
View File

@@ -1,4 +1,4 @@
# Export content
# Output
## toc

2
docs/src/docPages/guide/styling.md
View File

@@ -1,4 +1,4 @@
# Custom styling
# Styling
## toc

4
docs/src/docPages/installation/alpine.md
View File

@@ -1,3 +1,7 @@
---
title: Alpine WYSIWYG
---
# Alpine.js
## toc

4
docs/src/docPages/installation/livewire.md
View File

@@ -1,3 +1,7 @@
---
title: Livewire WYSIWYG
---
# Livewire
## toc

10
docs/src/docPages/installation/next.md
View File

@@ -1,10 +0,0 @@
# Next.js
## toc
## Introduction
The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
TODO
<demo name="React" />

4
docs/src/docPages/installation/nuxt.md
View File

@@ -1,3 +1,7 @@
---
title: Nuxt.js WYSIWYG
---
# Nuxt.js
## toc

4
docs/src/docPages/installation/react.md
View File

@@ -1,3 +1,7 @@
---
title: React WYSIWYG
---
# React
## toc

4
docs/src/docPages/installation/svelte.md
View File

@@ -1,3 +1,7 @@
---
title: Svelte WYSIWYG
---
# Svelte
## toc

4
docs/src/docPages/installation/vue2.md
View File

@@ -1,3 +1,7 @@
---
title: Vue.js 2 WYSIWYG
---
# Vue.js 2
## toc

4
docs/src/docPages/installation/vue3.md
View File

@@ -1,3 +1,7 @@
---
title: Vue.js 3 WYSIWYG
---
# Vue.js 3
## toc

2
docs/src/docPages/overview/upgrade-guide.md
View File

@@ -110,7 +110,7 @@ const CustomExtension = Node.create({
})
```
Read more about [all the nifty details building custom extensions](/guide/build-extensions) in our guide.
Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
### Renamed settings and methods
[We renamed a lot of settings and methods](/api/editor). Hopefully you can migrate to the new API with search & replace. Here is a list of what changed:

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

@@ -57,42 +57,52 @@
<portal :to="sidebarPortal" v-if="showSidebar">
<nav class="app__sidebar-menu">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title">
{{ linkGroup.title }}
</div>
<ul class="app__link-list">
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null,
'app__link--with-children': !!item.items
}"
:to="item.redirect || item.link"
>
{{ item.title }}
</g-link>
<template v-if="linkGroup.link && !linkGroup.items">
<g-link
class="app__link-group__link"
:to="linkGroup.redirect || linkGroup.link"
>
{{ linkGroup.title }}
</g-link>
</template>
<template v-else>
<div class="app__link-group-title">
{{ linkGroup.title }}
</div>
<ul class="app__link-list">
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null,
'app__link--with-children': !!item.items
}"
:to="item.redirect || item.link"
>
{{ item.title }}
</g-link>
<ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k">
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null,
}"
:to="item.link"
exact
>
{{ item.title }}
</g-link>
</li>
</ul>
</li>
</ul>
<ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k">
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
[`app__link--${item.type}`]: item.type !== null,
}"
:to="item.link"
exact
>
{{ item.title }}
</g-link>
</li>
</ul>
</li>
</ul>
</template>
</div>
</nav>
</portal>

35
docs/src/links.yaml
View File

@@ -1,3 +1,13 @@
# - title: Documentation
# link: introduction
# - title: Examples
# link: /examples
# redirect: /examples/default
# - title: Community
# link: community
# - title: Sponsor
# link: https://github.com/ueberdosis/sponsor
- title: Overview
items:
- title: Installation
@@ -82,24 +92,24 @@
- title: Guide
items:
- title: Configure the editor
- title: Configuration
link: /guide/configuration
- title: Create menus
- title: Menus
link: /guide/menus
type: new
- title: Custom styling
- title: Styling
link: /guide/styling
- title: Output
link: /guide/output
- title: Accessibility
link: /guide/accessibility
- title: Export content
link: /guide/content
- title: Collaborative editing
link: /guide/collaborative-editing
# type: pro
- title: Extend the functionality
- title: Custom extensions
link: /guide/custom-extensions
- title: Overwrite & extend
link: /guide/extend-extensions
- title: Build extensions
link: /guide/build-extensions
- title: Interactive node views
link: /guide/node-views
type: new
@@ -125,6 +135,15 @@
link: /api/editor
- title: Commands
link: /api/commands
items:
- title: clearContent
link: /api/commands/clear-content
type: draft
- title: insertContent
link: /api/commands/insert-content
type: draft
- title: setContent
link: /api/commands/set-content
- title: Nodes
link: /api/nodes
items:

10
docs/src/tests/core/commands/insertHTML.spec.js → docs/src/tests/core/commands/insertContent.spec.js
View File

@@ -1,23 +1,23 @@
context('insertHTML', () => {
context('insertContent', () => {
before(() => {
cy.visit('/demos/Examples/Default/Vue')
})
it('returns true for the insertHTML command', () => {
it('returns true for the insertContent command', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
const command = editor.commands.insertHTML('<p>Cindy Lauper</p>')
const command = editor.commands.insertContent('<p>Cindy Lauper</p>')
expect(command).to.be.eq(true)
})
})
it('appends the content when using the insertHTML command', () => {
it('appends the content when using the insertContent command', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
editor.commands.insertHTML('<p>Cindy Lauper</p>')
editor.commands.insertContent('<p>Cindy Lauper</p>')
expect(editor.getHTML()).to.be.eq('<p>Example Text</p><p>Cindy Lauper</p>')
})