Merge remote-tracking branch 'upstream/main'
This commit is contained in:
Jeet Mandaliya
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user