Merge remote-tracking branch 'upstream/main'
This commit is contained in:
Jeet Mandaliya
@@ -15,7 +15,7 @@
|
||||
"canvas": "^2.8.0",
|
||||
"collect.js": "^4.28.6",
|
||||
"d3": "^6.6.1",
|
||||
"globby": "^11.0.3",
|
||||
"globby": "^11.0.4",
|
||||
"gridsome": "0.7.23",
|
||||
"iframe-resizer": "^4.3.2",
|
||||
"portal-vue": "^2.1.7",
|
||||
@@ -36,11 +36,11 @@
|
||||
"yjs": "^13.5.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.14.2",
|
||||
"@babel/plugin-proposal-class-properties": "^7.14.5",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.14.5",
|
||||
"@babel/plugin-syntax-class-properties": "^7.12.13",
|
||||
"@babel/preset-env": "^7.14.4",
|
||||
"@babel/preset-react": "^7.13.13",
|
||||
"@babel/preset-env": "^7.14.5",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"html-loader": "^1.3.2",
|
||||
"node-sass": "^5.0.0",
|
||||
"sass-loader": "^10.1.1",
|
||||
|
||||
@@ -40,9 +40,9 @@ const getRandomElement = list => {
|
||||
|
||||
const getRandomRoom = () => {
|
||||
return getRandomElement([
|
||||
'room.1',
|
||||
'room.2',
|
||||
'room.3',
|
||||
'room.4',
|
||||
'room.5',
|
||||
'room.6',
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@ export default () => {
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
What do you all think about the new <span data-mention="Winona Ryder"></span> movie?
|
||||
What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
What do you all think about the new <span data-mention="Winona Ryder"></span> movie?
|
||||
What do you all think about the new <span data-mention data-id="Winona Ryder"></span> movie?
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
|
||||
@@ -63,7 +63,9 @@ export default {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
TextAlign,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
Highlight,
|
||||
],
|
||||
content: `
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { Node as ProsemirrorNode } from 'prosemirror-model'
|
||||
|
||||
export interface Result {
|
||||
interface Result {
|
||||
message: string,
|
||||
from: number,
|
||||
to: number,
|
||||
fix?: Function
|
||||
fix?: null
|
||||
}
|
||||
|
||||
export default class LinterPlugin {
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
import { Node, mergeAttributes } from '@tiptap/core'
|
||||
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
||||
import { Plugin } from 'prosemirror-state'
|
||||
|
||||
import CustomNodeView from './CustomNode.vue'
|
||||
|
||||
export default Node.create({
|
||||
name: 'customNode',
|
||||
isBlock: true,
|
||||
inline: false,
|
||||
group: 'block',
|
||||
draggable: true,
|
||||
isolating: true,
|
||||
defining: true,
|
||||
selectable: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
nest: { default: false },
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'custom-node',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
return ['custom-node', mergeAttributes(HTMLAttributes)]
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return VueNodeViewRenderer(CustomNodeView)
|
||||
},
|
||||
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
new Plugin({
|
||||
props: {
|
||||
handleKeyDown: (view, event) => {
|
||||
// Prevent _any_ key from clearing block. As soon as you start typing,
|
||||
// and a block is focused, it'll blast the block away.
|
||||
view.state.typing = true
|
||||
},
|
||||
|
||||
handlePaste: (view, event, slice) => {
|
||||
// Prevent pasting overwriting block
|
||||
view.state.pasting = true
|
||||
},
|
||||
},
|
||||
|
||||
filterTransaction: (transaction, state) => {
|
||||
let result = true
|
||||
|
||||
// Check if our flags are set, and if the selected node is a custom node
|
||||
if (state.typing || state.pasting) {
|
||||
transaction.mapping.maps.forEach(map => {
|
||||
map.forEach((oldStart, oldEnd, newStart, newEnd) => {
|
||||
state.doc.nodesBetween(
|
||||
oldStart,
|
||||
oldEnd,
|
||||
(node, number, pos, parent, index) => {
|
||||
if (node.type.name === 'customNode') {
|
||||
result = false
|
||||
}
|
||||
},
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
}),
|
||||
]
|
||||
},
|
||||
})
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<node-view-wrapper class="draggable-item" :class="{ active: selected }">
|
||||
<div
|
||||
class="drag-handle"
|
||||
contenteditable="false"
|
||||
draggable="true"
|
||||
data-drag-handle
|
||||
/>
|
||||
<div class="draggable-nested">
|
||||
<tiptap-nested />
|
||||
</div>
|
||||
</node-view-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NodeViewWrapper } from '@tiptap/vue-2'
|
||||
import TiptapNested from './Nested.vue'
|
||||
|
||||
export default {
|
||||
name: 'CustomNode',
|
||||
|
||||
components: {
|
||||
NodeViewWrapper,
|
||||
TiptapNested,
|
||||
},
|
||||
|
||||
props: {
|
||||
editor: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
node: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
decorations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
extension: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
getPos: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
|
||||
updateAttributes: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.draggable-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.active {
|
||||
border: 1px red solid;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
top: 0.3rem;
|
||||
margin-right: 0.5rem;
|
||||
cursor: grab;
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.draggable-nested {
|
||||
flex: 1
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div class="editor-nested" v-if="editor">
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import CustomNode from './CustomNode.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: `
|
||||
Nested intro text`,
|
||||
extensions: [StarterKit, CustomNode],
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.editor-nested {
|
||||
padding: 10px;
|
||||
border: 1px gray solid;
|
||||
}
|
||||
.ProseMirror {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="editor" v-if="editor">
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import CustomNode from './CustomNode.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
content: 'Testing<custom-node></custom-node>Text',
|
||||
extensions: [StarterKit, CustomNode],
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.editor {
|
||||
/* TODO: Conflicts with other demos */
|
||||
/* padding: 10px; */
|
||||
border: 1px gray solid;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@@ -45,7 +45,9 @@ export default {
|
||||
Paragraph,
|
||||
Text,
|
||||
Heading,
|
||||
TextAlign,
|
||||
TextAlign.configure({
|
||||
types: ['heading', 'paragraph'],
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<h2>Heading</h2>
|
||||
|
||||
@@ -12,7 +12,7 @@ context('/demos/Marks/Subscript', () => {
|
||||
|
||||
it('should transform inline style to sub tags', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.setContent('<p><span style="vertical-align: middle">Example Text</span></p>')
|
||||
editor.commands.setContent('<p><span style="vertical-align: sub">Example Text</span></p>')
|
||||
expect(editor.getHTML()).to.eq('<p><sub>Example Text</sub></p>')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -82,9 +82,9 @@ export default {
|
||||
],
|
||||
content: `
|
||||
<p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p>
|
||||
<p><span data-mention="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
|
||||
<p><span data-mention="Winona Ryder"></span> <span data-mention="Axl Rose"></span> Let’s go through your most important points quickly.</p>
|
||||
<p>I have a meeting with <span data-mention="Christina Applegate"></span> and don’t want to come late.</p>
|
||||
<p><span data-mention data-id="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
|
||||
<p><span data-mention data-id="Winona Ryder"></span> <span data-mention data-id="Axl Rose"></span> Let’s go through your most important points quickly.</p>
|
||||
<p>I have a meeting with <span data-mention data-id="Christina Applegate"></span> and don’t want to come late.</p>
|
||||
<p>– Thanks, your big boss</p>
|
||||
`,
|
||||
})
|
||||
|
||||
@@ -33,7 +33,7 @@ export default {
|
||||
TaskItem,
|
||||
],
|
||||
content: `
|
||||
<ul data-type="task_list">
|
||||
<ul data-type="taskList">
|
||||
<li data-type="taskItem" data-checked="true">A list item</li>
|
||||
<li data-type="taskItem" data-checked="false">And another one</li>
|
||||
</ul>
|
||||
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
TaskItem,
|
||||
],
|
||||
content: `
|
||||
<ul data-type="task_list">
|
||||
<ul data-type="taskList">
|
||||
<li data-type="taskItem" data-checked="true">A list item</li>
|
||||
<li data-type="taskItem" data-checked="false">And another one</li>
|
||||
</ul>
|
||||
|
||||
@@ -16,11 +16,11 @@ yarn add @tiptap/extension-dropcursor
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | -------- | --------- | --------------------------------------------------------------------- |
|
||||
| color | `String` | `'black'` | Color of the dropcursor. |
|
||||
| width | `Number` | `1` | Width of the dropcursor. |
|
||||
| class | `String` | – | One or multiple CSS classes that should be applied to the dropcursor. |
|
||||
| Option | Type | Default | Description |
|
||||
| ------ | -------- | ---------------- | --------------------------------------------------------------------- |
|
||||
| color | `String` | `'currentcolor'` | Color of the dropcursor. |
|
||||
| width | `Number` | `1` | Width of the dropcursor. |
|
||||
| class | `String` | – | One or multiple CSS classes that should be applied to the dropcursor. |
|
||||
|
||||
## Source code
|
||||
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)
|
||||
|
||||
@@ -18,11 +18,11 @@ yarn add @tiptap/extension-text-align
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ---------------- | -------- | ---------------------------------------- | -------------------------------------------------------------------- |
|
||||
| types | `Array` | `['heading', 'paragraph']` | A list of nodes where the text align attribute should be applied to. |
|
||||
| alignments | `Array` | `['left', 'center', 'right', 'justify']` | A list of available options for the text align attribute. |
|
||||
| defaultAlignment | `String` | `'left'` | The default text align. |
|
||||
| Option | Type | Default | Description |
|
||||
| ---------------- | -------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
||||
| types | `Array` | `[]` | A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']`.|
|
||||
| alignments | `Array` | `['left', 'center', 'right', 'justify']` | A list of available options for the text align attribute. |
|
||||
| defaultAlignment | `String` | `'left'` | The default text align. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
|
||||
@@ -50,6 +50,8 @@ Most of the core extensions register their own keyboard shortcuts. Depending on
|
||||
| Right align | `Control` `Shift` `R` | `Cmd` `Shift` `R` |
|
||||
| Justify | `Control` `Shift` `J` | `Cmd` `Shift` `J` |
|
||||
| Code block | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
|
||||
| Subscript | `Control` `,` | `Cmd` `,` |
|
||||
| Superscript | `Control` `.` | `Cmd` `.` |
|
||||
|
||||
<!--| Toggle task| `Control` `Enter` | `Cmd` `Enter` | -->
|
||||
|
||||
|
||||
@@ -25,6 +25,10 @@ yarn add @tiptap/extension-subscript
|
||||
| toggleSubscript | — | Toggle subscript mark. |
|
||||
| unsetSubscript | — | Remove subscript mark. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `,`
|
||||
* macOS: `Cmd` `,`
|
||||
|
||||
## Source code
|
||||
[packages/extension-subscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/)
|
||||
|
||||
|
||||
@@ -25,6 +25,10 @@ yarn add @tiptap/extension-superscript
|
||||
| toggleSuperscript | — | Toggle superscript mark. |
|
||||
| unsetSuperscript | — | Remove superscript mark. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `.`
|
||||
* macOS: `Cmd` `.`
|
||||
|
||||
## Source code
|
||||
[packages/extension-superscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/)
|
||||
|
||||
|
||||
@@ -42,10 +42,11 @@ And yes, we plan to support React, too. Meanwhile, you can roll your own `ReactR
|
||||
It’s also possible to use Vanilla JavaScript, but that is probably a lot more work.
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| -------------- | -------- | ------- | --------------------------------------------------------------------- |
|
||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||
| suggestion | `Object` | `{ … }` | [Read more](/api/utilities/suggestion) |
|
||||
| Option | Type | Default | Description |
|
||||
| -------------- | -------- | -------------------------- | --------------------------------------------------------------------- |
|
||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||
| renderLabel | `String` | `({ options, node }) => …` | Define how a mention label should be rendered. |
|
||||
| suggestion | `Object` | `{ … }` | [Read more](/api/utilities/suggestion) |
|
||||
|
||||
## Source code
|
||||
[packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/)
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-task-list)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-task-list?minimal=true)
|
||||
|
||||
This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="task_list">`. This implementation doesn’t require any framework, it’s using Vanilla JavaScript only.
|
||||
This extension enables you to use task lists in the editor. They are rendered as `<ul data-type="taskList">`. This implementation doesn’t require any framework, it’s using Vanilla JavaScript only.
|
||||
|
||||
Type <code>[ ] </code> or <code>[x] </code> at the beginning of a new line and it will magically transform to a task list.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user