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:
#	docs/src/docPages/api/commands.md
This commit is contained in:
Philipp Kühn
2020-11-05 22:00:24 +01:00
parent 3ce0e791f6 f946954e91
commit aec6872017
12 changed files with 100 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Extensions/CollaborationCursor/index.spec.js
View File

@@ -1,5 +1,5 @@
context('/api/extensions/collaboration', () => {
context('/api/extensions/collaboration-cursor', () => {
before(() => {
cy.visit('/api/extensions/collaboration')
cy.visit('/api/extensions/collaboration-cursor')
})
})

5
docs/src/demos/Extensions/Dropcursor/index.spec.js Normal file
View File

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

46
docs/src/demos/Extensions/Dropcursor/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div>
<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 Dropcursor from '@tiptap/extension-dropcursor'
import Image from '@tiptap/extension-image'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document(),
Paragraph(),
Text(),
Image(),
Dropcursor(),
],
content: `
<p>Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.</p>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

4
docs/src/demos/Extensions/Focus/index.spec.js
View File

@@ -1,6 +1,6 @@
context('/examples/focus', () => {
context('/api/extensions/focus', () => {
before(() => {
cy.visit('/examples/focus')
cy.visit('/api/extensions/focus')
})
it('should have class', () => {

32
docs/src/demos/Extensions/Gapcursor/index.vue
View File

@@ -44,35 +44,3 @@ export default {
},
}
</script>
<style lang="scss">
/* Copied from the original prosemirror-gapcursor plugin by Marijn Haverbeke */
/* https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/style/gapcursor.css */
.ProseMirror-gapcursor {
display: none;
pointer-events: none;
position: absolute;
border: 10px solid red;
}
.ProseMirror-gapcursor:after {
content: "";
display: block;
position: absolute;
top: -2px;
width: 20px;
border-top: 1px solid black;
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
to {
visibility: hidden;
}
}
.ProseMirror-focused .ProseMirror-gapcursor {
display: block;
}
</style>

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

@@ -70,31 +70,28 @@ Have a look at all of the core commands listed below. They should give you a goo
### Content
| Command | Description |
| ---------------- | ----------------------------------------------------------- |
| --------------- | ------------------------------------------------ |
| .clearContent() | Clear the whole document. |
| .insertgetHTML() | Insert a string of HTML at the currently selected position. |
| .insertText() | Insert a string of text at the currently selected position. |
| .insertHTML() | |
| .insertHTML() | Insert a string of HTML at the current position. |
| .insertText() | Insert a string of text at the current position. |
| .setContent() | Replace the whole document with new content. |
### Nodes & Marks
| Command | Description |
| ----------------------- | ------------------------------------------ |
| .clearNodes() | |
| .removeMark() | |
| ----------------------- | --------------------------------------------------------- |
| .clearNodes() | Normalize nodes to a simple paragraph. |
| .removeMark() | Remove a mark in the current selection. |
| .removeMarks() | |
| .removeMarks() | Remove all marks in the current selection. |
| .resetNodeAttributes() | |
| .removeMarks() | Remove all marks in the current selection. |
| .resetNodeAttributes() | Resets all node attributes to the default value. |
| .selectParentNode() | Select the parent node. |
| .setBlockType() | Replace a given range with a node. |
| .updateNoteAttributes() | |
| .splitBlock() | Forks a new node from an existing node. |
| .toggleBlockType() | Toggle a node with another node. |
| .toggleMark() | |
| .toggleMark() | Toggle a mark on and off. |
| .toggleWrap() | |
| .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. |
| .updateMarkAttributes() | Update a mark with new attributes. |
| .updateNodeAttributes() | Update attributes of a node. |
### Lists
| Command | Description |
@@ -102,8 +99,8 @@ Have a look at all of the core commands listed below. They should give you a goo
| .liftListItem() | Lift the list item into a wrapping list. |
| .sinkListItem() | Sink the list item down into an inner list. |
| .splitListItem() | Splits a textblock of a list item into two list items. |
| .toggleList() | Toggle between different list styles. |
| .wrapInList() | |
| .toggleList() | Toggle between different list types. |
| .wrapInList() | Wrap a node in a list. |
### Selection
| Command | Description |

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

@@ -1,7 +1,14 @@
# Collaboration Cursor
This extension adds information about all connected users (like their name and a specified color), their current cursor position and their text selection (if there’s one).
:::premium Premium Extension
Using this in production requires a **tiptap pro** license. [Read more](/sponsor)
Open this page in multiple browser windows to test it.
:::premium 💖 Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor)
:::
::: warning Use with Collaboration
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
:::
## Installation
@@ -31,4 +38,4 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" highlight="" />
<demo name="Extensions/CollaborationCursor" highlight="11,48-52" />

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

@@ -1,8 +1,8 @@
# Collaboration
The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
:::premium Premium Extension
Using this in production requires a **tiptap pro** license. [Read more](/sponsor)
:::premium Pro Extension
We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor)
:::
## Installation
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" highlight="" />
<demo name="Extensions/Collaboration" highlight="10-12,30-32,43-46,53" />

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

@@ -1,4 +1,7 @@
# Dropcursor
This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged over the editor.
Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
## Installation
```bash
@@ -9,17 +12,8 @@ npm install @tiptap/extension-dropcursor
yarn add @tiptap/extension-dropcursor
```
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*
## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)
## Usage
<demo name="Extensions/Dropcursor" highlight="" />
<demo name="Extensions/Dropcursor" highlight="12,33" />

3
docs/src/docPages/api/extensions/focus.md
View File

@@ -1,4 +1,7 @@
# Focus
The Focus extension adds a CSS class to focused nodes. By default it adds `.has-class`, but you can change that.
Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class.
## Installation
```bash

4
docs/src/docPages/examples/collaborative-editing.md
View File

@@ -1,7 +1,7 @@
# Collaborative editing
:::premium Requires Premium Extensions
Using this example in production requires a **tiptap pro** license. [Read more](/sponsor)
:::premium Requires pro extensions
We kindly ask you to sponsor us, before using this example in production. [Read more](/sponsor)
:::
This example shows how you can use tiptap to let different users collaboratively work on the same text in real-time.

4
docs/src/links.yaml
View File

@@ -16,7 +16,6 @@
link: /examples/basic
- title: Collaborative editing
link: /examples/collaborative-editing
premium: true
- title: Markdown shortcuts
link: /examples/markdown-shortcuts
# - title: Menu Bubble
@@ -163,14 +162,11 @@
premium: true
- title: CollaborationCursor
link: /api/extensions/collaboration-cursor
draft: true
premium: true
- title: Dropcursor
link: /api/extensions/dropcursor
draft: true
- title: Focus
link: /api/extensions/focus
draft: true
- title: Gapcursor
link: /api/extensions/gapcursor
- title: History