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(() => { 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(() => { before(() => {
cy.visit('/examples/focus') cy.visit('/api/extensions/focus')
}) })
it('should have class', () => { it('should have class', () => {

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

@@ -44,35 +44,3 @@ export default {
}, },
} }
</script> </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>

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

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

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

@@ -1,7 +1,14 @@
# Collaboration Cursor # 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 Open this page in multiple browser windows to test it.
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)
:::
::: warning Use with Collaboration
This extension requires the [`Collaboration`](/api/extensions/collaboration) extension.
::: :::
## Installation ## Installation
@@ -31,4 +38,4 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public :::warning Public
The content of this editor is shared with other users. 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 # 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. 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 :::premium Pro Extension
Using this in production requires a **tiptap pro** license. [Read more](/sponsor) We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor)
::: :::
## Installation ## Installation
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc
:::warning Public :::warning Public
The content of this editor is shared with other users. 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 # 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 ## Installation
```bash ```bash
@@ -9,17 +12,8 @@ npm install @tiptap/extension-dropcursor
yarn add @tiptap/extension-dropcursor yarn add @tiptap/extension-dropcursor
``` ```
## Settings
*None*
## Commands
*None*
## Keyboard shortcuts
*None*
## Source code ## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/) [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)
## Usage ## 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 # 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 ## Installation
```bash ```bash

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

@@ -1,7 +1,7 @@
# Collaborative editing # Collaborative editing
:::premium Requires Premium Extensions :::premium Requires pro extensions
Using this example in production requires a **tiptap pro** license. [Read more](/sponsor) 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. 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 link: /examples/basic
- title: Collaborative editing - title: Collaborative editing
link: /examples/collaborative-editing link: /examples/collaborative-editing
premium: true
- title: Markdown shortcuts - title: Markdown shortcuts
link: /examples/markdown-shortcuts link: /examples/markdown-shortcuts
# - title: Menu Bubble # - title: Menu Bubble
@@ -163,14 +162,11 @@
premium: true premium: true
- title: CollaborationCursor - title: CollaborationCursor
link: /api/extensions/collaboration-cursor link: /api/extensions/collaboration-cursor
draft: true
premium: true premium: true
- title: Dropcursor - title: Dropcursor
link: /api/extensions/dropcursor link: /api/extensions/dropcursor
draft: true
- title: Focus - title: Focus
link: /api/extensions/focus link: /api/extensions/focus
draft: true
- title: Gapcursor - title: Gapcursor
link: /api/extensions/gapcursor link: /api/extensions/gapcursor
- title: History - title: History