mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-19 06:43:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/ueberdosis/tiptap

Browse Source
This commit is contained in:
Hans Pagel 2021-12-17 13:18:49 +01:00
commit c980bb2f5f
70 changed files with 1829 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/build.yml vendored
View File

@ -99,7 +99,7 @@ jobs:
quiet: true
- name: Export screenshots (on failure only)
uses: actions/upload-artifact@v2.2.3
uses: actions/upload-artifact@v2.3.0
if: failure()
with:
name: cypress-screenshots
@ -107,7 +107,7 @@ jobs:
retention-days: 7
- name: Export screen recordings (on failure only)
uses: actions/upload-artifact@v2.2.3
uses: actions/upload-artifact@v2.3.0
if: failure()
with:
name: cypress-videos

14
demos/package.json
View File

@ -8,11 +8,11 @@
"ts": "tsc --project tsconfig.base.json --noEmit && tsc --project tsconfig.react.json --noEmit && tsc --project tsconfig.vue-2.json --noEmit && tsc --project tsconfig.vue-3.json --noEmit"
},
"dependencies": {
"@hocuspocus/provider": "^1.0.0-alpha.28",
"d3": "^7.2.0",
"@hocuspocus/provider": "^1.0.0-alpha.29",
"d3": "^7.2.1",
"fast-glob": "^3.2.7",
"remixicon": "^2.5.0",
"shiki": "^0.9.14",
"shiki": "^0.9.15",
"simplify-js": "^1.2.4",
"y-webrtc": "^10.2.2",
"yjs": "^13.5.22"
@ -23,14 +23,14 @@
"@vitejs/plugin-vue": "^1.10.2",
"autoprefixer": "^10.4.0",
"iframe-resizer": "^4.3.2",
"postcss": "^8.4.4",
"postcss": "^8.4.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.44.0",
"sass": "^1.45.0",
"tailwindcss": "^2.2.19",
"typescript": "^4.5.2",
"typescript": "^4.5.4",
"uuid": "^8.3.2",
"vite": "^2.7.1",
"vite": "^2.7.2",
"vite-plugin-checker": "^0.3.4",
"vue": "^3.0.5",
"vue-router": "^4.0.11"

132
demos/src/Examples/Book/Vue/index.vue
View File

@ -1,72 +1,70 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
</template>
<script>

3
demos/src/Examples/CodeBlockLanguage/Vue/index.vue
View File

@ -3,9 +3,8 @@
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>

68
demos/src/Examples/Community/Vue/index.vue
View File

@ -1,41 +1,39 @@
<template>
<div>
<editor-content :editor="editor" />
<editor-content :editor="editor" />
<div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
class="character-count__graph"
>
<circle
r="10"
cx="10"
cy="10"
fill="#e9ecef"
/>
<circle
r="5"
cx="10"
cy="10"
fill="transparent"
stroke="currentColor"
stroke-width="10"
:stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
transform="rotate(-90) translate(-20)"
/>
<circle
r="6"
cx="10"
cy="10"
fill="white"
/>
</svg>
<div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
<svg
height="20"
width="20"
viewBox="0 0 20 20"
class="character-count__graph"
>
<circle
r="10"
cx="10"
cy="10"
fill="#e9ecef"
/>
<circle
r="5"
cx="10"
cy="10"
fill="transparent"
stroke="currentColor"
stroke-width="10"
:stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
transform="rotate(-90) translate(-20)"
/>
<circle
r="6"
cx="10"
cy="10"
fill="white"
/>
</svg>
<div class="character-count__text">
{{ editor.storage.characterCount.characters() }}/{{ limit }} characters
</div>
<div class="character-count__text">
{{ editor.storage.characterCount.characters() }}/{{ limit }} characters
</div>
</div>
</template>

132
demos/src/Examples/Default/Vue/index.vue
View File

@ -1,72 +1,70 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
</template>
<script>

4
demos/src/Examples/Drawing/Vue/index.vue
View File

@ -1,7 +1,5 @@
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>

78
demos/src/Examples/Formatting/Vue/index.vue
View File

@ -1,45 +1,43 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
highlight
</button>
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
left
</button>
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
center
</button>
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
right
</button>
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
justify
</button>
</div>
<editor-content :editor="editor" />
<div v-if="editor">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
highlight
</button>
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
left
</button>
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
center
</button>
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
right
</button>
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
justify
</button>
</div>
<editor-content :editor="editor" />
</template>
<script>

2
demos/src/Examples/Images/Vue/index.vue
View File

@ -3,8 +3,8 @@
<button @click="addImage">
add image from URL
</button>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>

2
demos/src/Examples/Menus/Vue/index.spec.js
View File

@ -44,7 +44,7 @@ context('/src/Examples/Menus/Vue/', () => {
.type('Test')
.type('{selectall}')
cy.get('#app div')
cy.get('#app')
.find('[data-tippy-root]')
.contains(mark.button)
.click()

8
demos/src/Examples/Menus/Vue/index.vue
View File

@ -1,10 +1,9 @@
<template>
<div>
<div v-if="editor">
<bubble-menu
class="bubble-menu"
:tippy-options="{ duration: 100 }"
:editor="editor"
v-if="editor"
>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
@ -21,7 +20,6 @@
class="floating-menu"
:tippy-options="{ duration: 100 }"
:editor="editor"
v-if="editor"
>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
H1
@ -33,9 +31,9 @@
Bullet List
</button>
</floating-menu>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>

44
demos/src/Examples/Savvy/React/index.jsx
View File

@ -11,28 +11,32 @@ import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, Code, Typography, ColorHighlighter, SmilieReplacer],
extensions: [
Document,
Paragraph,
Text,
Code,
Typography,
ColorHighlighter,
SmilieReplacer,
],
content: `
<p>
→ With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
</p>
<p>
Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
</p>
<p></p>
<p>
Or add completely custom input rules. We added a custom extension here that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
</p>
<p></p>
<p>
You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
</p>
`,
<p>
→ With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
</p>
<p>
Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
</p>
<p></p>
<p>
Or add completely custom input rules. We added a custom extension here that replaces smilies like <code>:-)</code>, <code><3</code> or <code>>:P</code> with emojis. Try it out:
</p>
<p></p>
<p>
You can also teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
</p>
`,
})
if (!editor) {
return null
}
return <EditorContent editor={editor} />
}

3
demos/src/Examples/Tables/Vue/index.vue
View File

@ -54,9 +54,8 @@
<button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
goToPreviousCell
</button>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>

76
demos/src/Experiments/All/Vue/index.vue
View File

@ -1,5 +1,72 @@
<template>
<editor-content :editor="editor" />
<div>
<div v-if="editor" class="menu">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>
<editor-content :editor="editor" />
</div>
</template>
<script>
@ -402,4 +469,11 @@ export default {
padding: 0.1rem 0.3rem;
box-decoration-break: clone;
}
.menu {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
</style>

21
demos/src/Nodes/Blockquote/React/index.jsx
View File

@ -8,13 +8,18 @@ import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, Blockquote],
extensions: [
Document,
Paragraph,
Text,
Blockquote,
],
content: `
<blockquote>
Nothing is impossible, the word itself says “I’m possible!”
</blockquote>
<p>Audrey Hepburn</p>
`,
<blockquote>
Nothing is impossible, the word itself says “I’m possible!”
</blockquote>
<p>Audrey Hepburn</p>
`,
})
if (!editor) {
@ -31,13 +36,13 @@ export default () => {
</button>
<button
onClick={() => editor.chain().focus().setBlockquote().run()}
disabled={editor.isActive('blockquote')}
disabled={!editor.can().setBlockquote()}
>
setBlockquote
</button>
<button
onClick={() => editor.chain().focus().unsetBlockquote().run()}
disabled={!editor.isActive('blockquote')}
disabled={!editor.can().unsetBlockquote()}
>
unsetBlockquote
</button>

4
demos/src/Nodes/Blockquote/Vue/index.vue
View File

@ -3,10 +3,10 @@
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
toggleBlockquote
</button>
<button @click="editor.chain().focus().setBlockquote().run()" :disabled="editor.isActive('blockquote')">
<button @click="editor.chain().focus().setBlockquote().run()" :disabled="!editor.can().setBlockquote()">
setBlockquote
</button>
<button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.isActive('blockquote')">
<button @click="editor.chain().focus().unsetBlockquote().run()" :disabled="!editor.can().unsetBlockquote()">
unsetBlockquote
</button>

2
docs/api/extensions/character-count.md
View File

@ -20,7 +20,7 @@ npm install @tiptap/extension-character-count
The maximum number of characters that should be allowed.
Default: `0`
Default: `null`
```js
CharacterCount.configure({

2
docs/api/extensions/floating-menu.md
View File

@ -24,7 +24,7 @@ Type: `HTMLElement`
Default: `null`
### tippyOptions
Under the hood, the `BubbleMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
Under the hood, the `FloatingMenu` uses [tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/). You can directly pass options to it.
Type: `Object`

11
docs/api/nodes/bullet-list.md
View File

@ -31,6 +31,17 @@ BulletList.configure({
})
```
### itemTypeName
Specify the list item name.
Default: `'listItem'`
```js
BulletList.configure({
itemTypeName: 'listItem',
})
```
## Commands
### toggleBulletList()

11
docs/api/nodes/ordered-list.md
View File

@ -31,6 +31,17 @@ OrderedList.configure({
})
```
### itemTypeName
Specify the list item name.
Default: `'listItem'`
```js
OrderedList.configure({
itemTypeName: 'listItem',
})
```
## Commands
### toggleOrderedList()

11
docs/api/nodes/task-list.md
View File

@ -31,6 +31,17 @@ TaskList.configure({
})
```
### itemTypeName
Specify the list item name.
Default: `'taskItem'`
```js
TaskList.configure({
itemTypeName: 'taskItem',
})
```
## Commands
# toggleTaskList()

66
docs/installation/nuxt.md
View File

@ -96,3 +96,69 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
value(value) {
// HTML
const isSame = this.editor.getHTML() === value
// JSON
// const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.value,
extensions: [
StarterKit,
],
onUpdate: () => {
// HTML
this.$emit('input', this.editor.getHTML())
// JSON
// this.$emit('input', this.editor.getJSON())
},
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
```

66
docs/installation/vue2.md
View File

@ -103,4 +103,68 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
value(value) {
// HTML
const isSame = this.editor.getHTML() === value
// JSON
// const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.value,
extensions: [
StarterKit,
],
onUpdate: () => {
// HTML
this.$emit('input', this.editor.getHTML())
// JSON
// this.$emit('input', this.editor.getJSON())
},
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
```

58
docs/installation/vue3.md
View File

@ -133,60 +133,4 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
modelValue(value) {
const isSame = this.editor.getHTML() === value
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.modelValue,
extensions: [
StarterKit,
],
onUpdate: () => {
this.$emit('update:modelValue', this.editor.getHTML())
},
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
```
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel

20
package.json
View File

@ -24,20 +24,20 @@
},
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
"@babel/core": "^7.16.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/core": "^7.16.5",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"@cypress/webpack-preprocessor": "^5.10.0",
"@lerna/batch-packages": "^3.16.0",
"@lerna/filter-packages": "^4.0.0",
"@lerna/project": "^4.0.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"@rollup/plugin-node-resolve": "^13.1.1",
"@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"babel-loader": "^8.2.3",
"cypress": "^9.1.1",
"eslint": "^8.4.1",
@ -48,12 +48,12 @@
"eslint-plugin-vue": "^8.2.0",
"lerna": "^4.0.0",
"minimist": "^1.2.5",
"rollup": "^2.60.2",
"rollup": "^2.61.1",
"rollup-plugin-auto-external": "^2.0.0",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-typescript2": "^0.31.1",
"ts-loader": "^9.2.6",
"typescript": "^4.5.2",
"typescript": "^4.5.4",
"webpack": "^5.65.0"
}
}

73
packages/core/CHANGELOG.md
View File

@ -3,6 +3,79 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.158](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.157...@tiptap/core@2.0.0-beta.158) (2021-12-17)
### Bug Fixes
* remove empty mark attributes from getDebugJSON ([07cabe6](https://github.com/ueberdosis/tiptap/commit/07cabe65f4852a3c7fcab5c60b51318a05272aee))
# [2.0.0-beta.157](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.156...@tiptap/core@2.0.0-beta.157) (2021-12-16)
### Bug Fixes
* Improve backspace handling ([#2284](https://github.com/ueberdosis/tiptap/issues/2284)), fix [#2281](https://github.com/ueberdosis/tiptap/issues/2281) ([8ed485b](https://github.com/ueberdosis/tiptap/commit/8ed485ba53e809207a23ca6871aab2eb0806f0ab))
# [2.0.0-beta.156](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.155...@tiptap/core@2.0.0-beta.156) (2021-12-15)
### Bug Fixes
* prevent error in toggleList command, fix [#2279](https://github.com/ueberdosis/tiptap/issues/2279) ([66eb2f2](https://github.com/ueberdosis/tiptap/commit/66eb2f2a47cdf21590881153a6cb6b1f3f38641a))
# [2.0.0-beta.155](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.154...@tiptap/core@2.0.0-beta.155) (2021-12-15)
**Note:** Version bump only for package @tiptap/core
# [2.0.0-beta.154](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.153...@tiptap/core@2.0.0-beta.154) (2021-12-14)
**Note:** Version bump only for package @tiptap/core
# [2.0.0-beta.153](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.152...@tiptap/core@2.0.0-beta.153) (2021-12-13)
### Bug Fixes
* check for invalid content in `insertContentAt` command ([e09fd93](https://github.com/ueberdosis/tiptap/commit/e09fd93e59dbae5bca9da7def6ddafc6beda9987))
* don’t check for active node in wrapIn command, fix [#1059](https://github.com/ueberdosis/tiptap/issues/1059) ([170ec4b](https://github.com/ueberdosis/tiptap/commit/170ec4be5b3c8362890ca3100a223b505f788381))
* improve `setNode` behavior for list items, fix [#2261](https://github.com/ueberdosis/tiptap/issues/2261) ([f2ced69](https://github.com/ueberdosis/tiptap/commit/f2ced6971d60c555ce1e6bc7116fe0168f018bf1))
# [2.0.0-beta.152](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.151...@tiptap/core@2.0.0-beta.152) (2021-12-10)
### Features
* join lists on toggleList ([#2260](https://github.com/ueberdosis/tiptap/issues/2260)), fix [#1329](https://github.com/ueberdosis/tiptap/issues/1329) ([126ad72](https://github.com/ueberdosis/tiptap/commit/126ad722c7a1c4131fa332deb9f333798d4af056))
# [2.0.0-beta.151](https://github.com/ueberdosis/tiptap/compare/@tiptap/core@2.0.0-beta.150...@tiptap/core@2.0.0-beta.151) (2021-12-08)

4
packages/core/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/core",
"description": "headless rich text editor",
"version": "2.0.0-beta.151",
"version": "2.0.0-beta.158",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -29,7 +29,7 @@
"@types/prosemirror-model": "^1.13.2",
"@types/prosemirror-schema-list": "^1.0.3",
"@types/prosemirror-state": "^1.2.8",
"@types/prosemirror-transform": "^1.1.4",
"@types/prosemirror-transform": "^1.1.5",
"@types/prosemirror-view": "^1.19.2",
"prosemirror-commands": "^1.1.12",
"prosemirror-keymap": "^1.1.5",

21
packages/core/src/commands/clearNodes.ts
View File

@ -16,15 +16,20 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
const { selection } = tr
const { ranges } = selection
ranges.forEach(range => {
state.doc.nodesBetween(range.$from.pos, range.$to.pos, (node, pos) => {
if (!dispatch) {
return true
}
ranges.forEach(({ $from, $to }) => {
state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
if (node.type.isText) {
return
}
const $fromPos = tr.doc.resolve(tr.mapping.map(pos))
const $toPos = tr.doc.resolve(tr.mapping.map(pos + node.nodeSize))
const nodeRange = $fromPos.blockRange($toPos)
const { doc, mapping } = tr
const $mappedFrom = doc.resolve(mapping.map(pos))
const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize))
const nodeRange = $mappedFrom.blockRange($mappedTo)
if (!nodeRange) {
return
@ -32,13 +37,13 @@ export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatc
const targetLiftDepth = liftTarget(nodeRange)
if (node.type.isTextblock && dispatch) {
const { defaultType } = $fromPos.parent.contentMatchAt($fromPos.index())
if (node.type.isTextblock) {
const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
tr.setNodeMarkup(nodeRange.start, defaultType)
}
if ((targetLiftDepth || targetLiftDepth === 0) && dispatch) {
if (targetLiftDepth || targetLiftDepth === 0) {
tr.lift(nodeRange, targetLiftDepth)
}
})

3
packages/core/src/commands/insertContentAt.ts
View File

@ -59,6 +59,9 @@ export const insertContentAt: RawCommands['insertContentAt'] = (position, value,
: [content]
nodes.forEach(node => {
// check if added node is valid
node.check()
isOnlyBlockContent = isOnlyBlockContent
? node.isBlock
: false

25
packages/core/src/commands/setNode.ts
View File

@ -14,8 +14,29 @@ declare module '@tiptap/core' {
}
}
export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
export const setNode: RawCommands['setNode'] = (typeOrName, attributes = {}) => ({ state, dispatch, chain }) => {
const type = getNodeType(typeOrName, state.schema)
return setBlockType(type, attributes)(state, dispatch)
// TODO: use a fallback like insertContent?
if (!type.isTextblock) {
console.warn('[tiptap warn]: Currently "setNode()" only supports text block nodes.')
return false
}
return chain()
// try to convert node to default node if needed
.command(({ commands }) => {
const canSetBlock = setBlockType(type, attributes)(state)
if (canSetBlock) {
return true
}
return commands.clearNodes()
})
.command(({ state: updatedState }) => {
return setBlockType(type, attributes)(updatedState, dispatch)
})
.run()
}

86
packages/core/src/commands/toggleList.ts
View File

@ -1,9 +1,63 @@
import { NodeType } from 'prosemirror-model'
import { Transaction } from 'prosemirror-state'
import { canJoin } from 'prosemirror-transform'
import { RawCommands } from '../types'
import { getNodeType } from '../helpers/getNodeType'
import { findParentNode } from '../helpers/findParentNode'
import { isList } from '../helpers/isList'
const joinListBackwards = (tr: Transaction, listType: NodeType): boolean => {
const list = findParentNode(node => node.type === listType)(tr.selection)
if (!list) {
return true
}
const before = tr.doc.resolve(Math.max(0, list.pos - 1)).before(list.depth)
if (before === undefined) {
return true
}
const nodeBefore = tr.doc.nodeAt(before)
const canJoinBackwards = list.node.type === nodeBefore?.type
&& canJoin(tr.doc, list.pos)
if (!canJoinBackwards) {
return true
}
tr.join(list.pos)
return true
}
const joinListForwards = (tr: Transaction, listType: NodeType): boolean => {
const list = findParentNode(node => node.type === listType)(tr.selection)
if (!list) {
return true
}
const after = tr.doc.resolve(list.start).after(list.depth)
if (after === undefined) {
return true
}
const nodeAfter = tr.doc.nodeAt(after)
const canJoinForwards = list.node.type === nodeAfter?.type
&& canJoin(tr.doc, after)
if (!canJoinForwards) {
return true
}
tr.join(after)
return true
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
toggleList: {
@ -43,21 +97,31 @@ export const toggleList: RawCommands['toggleList'] = (listTypeOrName, itemTypeOr
&& listType.validContent(parentList.node.content)
&& dispatch
) {
tr.setNodeMarkup(parentList.pos, listType)
return chain()
.command(() => {
tr.setNodeMarkup(parentList.pos, listType)
return true
return true
})
.command(() => joinListBackwards(tr, listType))
.command(() => joinListForwards(tr, listType))
.run()
}
}
const canWrapInList = can().wrapInList(listType)
return chain()
// try to convert node to default node if needed
.command(() => {
const canWrapInList = can().wrapInList(listType)
// try to convert node to paragraph if needed
if (!canWrapInList) {
return chain()
.clearNodes()
.wrapInList(listType)
.run()
}
if (canWrapInList) {
return true
}
return commands.wrapInList(listType)
return commands.clearNodes()
})
.wrapInList(listType)
.command(() => joinListBackwards(tr, listType))
.command(() => joinListForwards(tr, listType))
.run()
}

7
packages/core/src/commands/toggleWrap.ts
View File

@ -1,4 +1,3 @@
import { wrapIn, lift } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { RawCommands } from '../types'
import { isNodeActive } from '../helpers/isNodeActive'
@ -15,13 +14,13 @@ declare module '@tiptap/core' {
}
}
export const toggleWrap: RawCommands['toggleWrap'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
export const toggleWrap: RawCommands['toggleWrap'] = (typeOrName, attributes = {}) => ({ state, commands }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = isNodeActive(state, type, attributes)
if (isActive) {
return lift(state, dispatch)
return commands.lift(type)
}
return wrapIn(type, attributes)(state, dispatch)
return commands.wrapIn(type, attributes)
}

6
packages/core/src/commands/wrapIn.ts
View File

@ -1,7 +1,6 @@
import { wrapIn as originalWrapIn } from 'prosemirror-commands'
import { NodeType } from 'prosemirror-model'
import { RawCommands } from '../types'
import { isNodeActive } from '../helpers/isNodeActive'
import { getNodeType } from '../helpers/getNodeType'
declare module '@tiptap/core' {
@ -17,11 +16,6 @@ declare module '@tiptap/core' {
export const wrapIn: RawCommands['wrapIn'] = (typeOrName, attributes = {}) => ({ state, dispatch }) => {
const type = getNodeType(typeOrName, state.schema)
const isActive = isNodeActive(state, type, attributes)
if (isActive) {
return false
}
return originalWrapIn(type, attributes)(state, dispatch)
}

70
packages/core/src/extensions/keymap.ts
View File

@ -1,3 +1,6 @@
import { Plugin, PluginKey, Selection } from 'prosemirror-state'
import { createChainableState } from '../helpers/createChainableState'
import { CommandManager } from '../CommandManager'
import { Extension } from '../Extension'
export const Keymap = Extension.create({
@ -6,6 +9,24 @@ export const Keymap = Extension.create({
addKeyboardShortcuts() {
const handleBackspace = () => this.editor.commands.first(({ commands }) => [
() => commands.undoInputRule(),
// maybe convert first text block node to default node
() => commands.command(({ tr }) => {
const { selection, doc } = tr
const { empty, $anchor } = selection
const { pos, parent } = $anchor
const isAtStart = Selection.atStart(doc).from === pos
if (
!empty
|| !isAtStart
|| !parent.type.isTextblock
|| parent.textContent.length
) {
return false
}
return commands.clearNodes()
}),
() => commands.deleteSelection(),
() => commands.joinBackward(),
() => commands.selectNodeBackward(),
@ -33,4 +54,53 @@ export const Keymap = Extension.create({
'Mod-a': () => this.editor.commands.selectAll(),
}
},
addProseMirrorPlugins() {
return [
// With this plugin we check if the whole document was selected and deleted.
// In this case we will additionally call `clearNodes()` to convert e.g. a heading
// to a paragraph if necessary.
// This is an alternative to ProseMirror's `AllSelection`, which doesn’t work well
// with many other commands.
new Plugin({
key: new PluginKey('clearDocument'),
appendTransaction: (transactions, oldState, newState) => {
const docChanges = transactions.some(transaction => transaction.docChanged)
&& !oldState.doc.eq(newState.doc)
if (!docChanges) {
return
}
const { empty, from, to } = oldState.selection
const allFrom = Selection.atStart(oldState.doc).from
const allEnd = Selection.atEnd(oldState.doc).to
const allWasSelected = from === allFrom && to === allEnd
const isEmpty = newState.doc.textBetween(0, newState.doc.content.size, ' ', ' ').length === 0
if (empty || !allWasSelected || !isEmpty) {
return
}
const tr = newState.tr
const state = createChainableState({
state: newState,
transaction: tr,
})
const { commands } = new CommandManager({
editor: this.editor,
state,
})
commands.clearNodes()
if (!tr.steps.length) {
return
}
return tr
},
}),
]
},
})

17
packages/core/src/helpers/getDebugJSON.ts
View File

@ -9,12 +9,19 @@ interface DebugJSONContent extends JSONContent {
export function getDebugJSON(node: ProseMirrorNode, startOffset = 0): DebugJSONContent {
const isTopNode = node.type === node.type.schema.topNodeType
const increment = isTopNode ? 0 : 1
const from = startOffset // + offset
const from = startOffset
const to = from + node.nodeSize
const marks = node.marks.map(mark => ({
type: mark.type.name,
attrs: { ...mark.attrs },
}))
const marks = node.marks.map(mark => {
const output: { type: string, attrs?: Record<string, any> } = {
type: mark.type.name,
}
if (Object.keys(mark.attrs).length) {
output.attrs = { ...mark.attrs }
}
return output
})
const attrs = { ...node.attrs }
const output: DebugJSONContent = {
type: node.type.name,

11
packages/extension-bubble-menu/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.52](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-bubble-menu@2.0.0-beta.51...@tiptap/extension-bubble-menu@2.0.0-beta.52) (2021-12-15)
### Bug Fixes
* maybe hide tippy on blur, fix [#1433](https://github.com/ueberdosis/tiptap/issues/1433) ([063ced2](https://github.com/ueberdosis/tiptap/commit/063ced27ca55f331960b01ee6aea5623eee0ba49))
# [2.0.0-beta.51](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-bubble-menu@2.0.0-beta.50...@tiptap/extension-bubble-menu@2.0.0-beta.51) (2021-12-02)
**Note:** Version bump only for package @tiptap/extension-bubble-menu

2
packages/extension-bubble-menu/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-bubble-menu",
"description": "bubble-menu extension for tiptap",
"version": "2.0.0-beta.51",
"version": "2.0.0-beta.52",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

20
packages/extension-bubble-menu/src/bubble-menu-plugin.ts
View File

@ -40,7 +40,12 @@ export class BubbleMenuView {
public tippyOptions?: Partial<Props>
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ state, from, to }) => {
public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
view,
state,
from,
to,
}) => {
const { doc, selection } = state
const { empty } = selection
@ -50,7 +55,11 @@ export class BubbleMenuView {
const isEmptyTextBlock = !doc.textBetween(from, to).length
&& isTextSelection(state.selection)
if (empty || isEmptyTextBlock) {
if (
!view.hasFocus()
|| empty
|| isEmptyTextBlock
) {
return false
}
@ -130,6 +139,13 @@ export class BubbleMenuView {
hideOnClick: 'toggle',
...this.tippyOptions,
})
// maybe we have to hide tippy on its own blur event as well
if (this.tippy.popper.firstChild) {
(this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', event => {
this.blurHandler({ event })
})
}
}
update(view: EditorView, oldState?: EditorState) {

11
packages/extension-bullet-list/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.25](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-bullet-list@2.0.0-beta.24...@tiptap/extension-bullet-list@2.0.0-beta.25) (2021-12-10)
### Features
* add itemTypeName option ([3d7c8e6](https://github.com/ueberdosis/tiptap/commit/3d7c8e642f31b1fa813e84dddc3968504477d536))
# [2.0.0-beta.24](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-bullet-list@2.0.0-beta.23...@tiptap/extension-bullet-list@2.0.0-beta.24) (2021-12-02)

2
packages/extension-bullet-list/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-bullet-list",
"description": "bullet list extension for tiptap",
"version": "2.0.0-beta.24",
"version": "2.0.0-beta.25",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

8
packages/extension-bullet-list/src/bullet-list.ts
View File

@ -1,6 +1,7 @@
import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
export interface BulletListOptions {
itemTypeName: string,
HTMLAttributes: Record<string, any>,
}
@ -22,13 +23,16 @@ export const BulletList = Node.create<BulletListOptions>({
addOptions() {
return {
itemTypeName: 'listItem',
HTMLAttributes: {},
}
},
group: 'block list',
content: 'listItem+',
content() {
return `${this.options.itemTypeName}+`
},
parseHTML() {
return [
@ -43,7 +47,7 @@ export const BulletList = Node.create<BulletListOptions>({
addCommands() {
return {
toggleBulletList: () => ({ commands }) => {
return commands.toggleList(this.name, 'listItem')
return commands.toggleList(this.name, this.options.itemTypeName)
},
}
},

33
packages/extension-character-count/CHANGELOG.md
View File

@ -3,6 +3,39 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.23](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-character-count@2.0.0-beta.22...@tiptap/extension-character-count@2.0.0-beta.23) (2021-12-14)
### Bug Fixes
* allow null and undefined for CharacterCount limit, fix [#2276](https://github.com/ueberdosis/tiptap/issues/2276) ([dd4bcb8](https://github.com/ueberdosis/tiptap/commit/dd4bcb81f05f980b143c46f97f108c28b02c1caf))
# [2.0.0-beta.22](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-character-count@2.0.0-beta.21...@tiptap/extension-character-count@2.0.0-beta.22) (2021-12-10)
### Bug Fixes
* mark characterCount storage method types as optional ([ed7f93a](https://github.com/ueberdosis/tiptap/commit/ed7f93a2b84234b365f74ff39424f72ca5cf42ea))
# [2.0.0-beta.21](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-character-count@2.0.0-beta.20...@tiptap/extension-character-count@2.0.0-beta.21) (2021-12-10)
### Bug Fixes
* fix types for characterCount storage methods ([d1daf9c](https://github.com/ueberdosis/tiptap/commit/d1daf9cca06b4ac5855485533255b1275391b524))
# [2.0.0-beta.20](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-character-count@2.0.0-beta.19...@tiptap/extension-character-count@2.0.0-beta.20) (2021-12-09)

2
packages/extension-character-count/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-character-count",
"description": "font family extension for tiptap",
"version": "2.0.0-beta.20",
"version": "2.0.0-beta.23",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

20
packages/extension-character-count/src/character-count.ts
View File

@ -6,7 +6,7 @@ export interface CharacterCountOptions {
/**
* The maximum number of characters that should be allowed. Defaults to `0`.
*/
limit: number,
limit: number | null | undefined,
/**
* The mode by which the size is calculated. Defaults to 'textSize'.
*/
@ -17,7 +17,7 @@ export interface CharacterCountStorage {
/**
* Get the number of characters for the current document.
*/
characters?: (options: {
characters: (options?: {
node?: ProseMirrorNode,
mode?: 'textSize' | 'nodeSize',
}) => number,
@ -25,7 +25,7 @@ export interface CharacterCountStorage {
/**
* Get the number of words for the current document.
*/
words?: (options: {
words: (options?: {
node?: ProseMirrorNode,
}) => number,
}
@ -35,15 +35,15 @@ export const CharacterCount = Extension.create<CharacterCountOptions, CharacterC
addOptions() {
return {
limit: 0,
limit: null,
mode: 'textSize',
}
},
addStorage() {
return {
characters: undefined,
words: undefined,
characters: () => 0,
words: () => 0,
}
},
@ -80,12 +80,12 @@ export const CharacterCount = Extension.create<CharacterCountOptions, CharacterC
const limit = this.options.limit
// Nothing has changed or no limit is defined. Ignore it.
if (!transaction.docChanged || limit === 0) {
if (!transaction.docChanged || limit === 0 || limit === null || limit === undefined) {
return true
}
const oldSize = this.storage.characters?.({ node: state.doc }) || 0
const newSize = this.storage.characters?.({ node: transaction.doc }) || 0
const oldSize = this.storage.characters({ node: state.doc })
const newSize = this.storage.characters({ node: transaction.doc })
// Everything is in the limit. Good.
if (newSize <= limit) {
@ -123,7 +123,7 @@ export const CharacterCount = Extension.create<CharacterCountOptions, CharacterC
// This happens e.g. when truncating within a complex node (e.g. table)
// and ProseMirror has to close this node again.
// If this is the case, we prevent the transaction completely.
const updatedSize = this.storage.characters?.({ node: transaction.doc }) || 0
const updatedSize = this.storage.characters({ node: transaction.doc })
if (updatedSize > limit) {
return false

8
packages/extension-code-block-lowlight/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.61](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-code-block-lowlight@2.0.0-beta.60...@tiptap/extension-code-block-lowlight@2.0.0-beta.61) (2021-12-16)
**Note:** Version bump only for package @tiptap/extension-code-block-lowlight
# [2.0.0-beta.60](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-code-block-lowlight@2.0.0-beta.59...@tiptap/extension-code-block-lowlight@2.0.0-beta.60) (2021-12-05)
**Note:** Version bump only for package @tiptap/extension-code-block-lowlight

4
packages/extension-code-block-lowlight/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-code-block-lowlight",
"description": "code block extension for tiptap",
"version": "2.0.0-beta.60",
"version": "2.0.0-beta.61",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -24,7 +24,7 @@
"@tiptap/core": "^2.0.0-beta.1"
},
"dependencies": {
"@tiptap/extension-code-block": "^2.0.0-beta.31",
"@tiptap/extension-code-block": "^2.0.0-beta.32",
"@types/lowlight": "^0.0.3",
"lowlight": "^1.20.0",
"prosemirror-model": "^1.15.0",

11
packages/extension-code-block/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.32](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-code-block@2.0.0-beta.31...@tiptap/extension-code-block@2.0.0-beta.32) (2021-12-16)
### Features
* escape code blocks on arrow down, fix [#1204](https://github.com/ueberdosis/tiptap/issues/1204) ([ffafff9](https://github.com/ueberdosis/tiptap/commit/ffafff9e365f9636fae4a67bb825d49b7d95cb94))
# [2.0.0-beta.31](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-code-block@2.0.0-beta.30...@tiptap/extension-code-block@2.0.0-beta.31) (2021-12-05)

2
packages/extension-code-block/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-code-block",
"description": "code block extension for tiptap",
"version": "2.0.0-beta.31",
"version": "2.0.0-beta.32",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

31
packages/extension-code-block/src/code-block.ts
View File

@ -146,6 +146,37 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
.exitCode()
.run()
},
// escape node on arrow down
ArrowDown: ({ editor }) => {
const { state } = editor
const { selection, doc } = state
const { $from, empty } = selection
if (!empty || $from.parent.type !== this.type) {
return false
}
const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2
if (!isAtEnd) {
return false
}
const after = $from.after()
if (after === undefined) {
return false
}
const nodeAfter = doc.nodeAt(after)
if (nodeAfter) {
return false
}
return editor.commands.exitCode()
},
}
},

12
packages/extension-floating-menu/CHANGELOG.md
View File

@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.47](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-floating-menu@2.0.0-beta.46...@tiptap/extension-floating-menu@2.0.0-beta.47) (2021-12-15)
### Bug Fixes
* maybe hide tippy on blur, fix [#1433](https://github.com/ueberdosis/tiptap/issues/1433) ([063ced2](https://github.com/ueberdosis/tiptap/commit/063ced27ca55f331960b01ee6aea5623eee0ba49))
* show FloatingMenu by default only if focused ([#2275](https://github.com/ueberdosis/tiptap/issues/2275)) ([809af3b](https://github.com/ueberdosis/tiptap/commit/809af3b6c6dd2b82cfd4da032181c1f4e93d01cd))
# [2.0.0-beta.46](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-floating-menu@2.0.0-beta.45...@tiptap/extension-floating-menu@2.0.0-beta.46) (2021-12-02)
**Note:** Version bump only for package @tiptap/extension-floating-menu

2
packages/extension-floating-menu/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-floating-menu",
"description": "floating-menu extension for tiptap",
"version": "2.0.0-beta.46",
"version": "2.0.0-beta.47",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

16
packages/extension-floating-menu/src/floating-menu-plugin.ts
View File

@ -33,7 +33,7 @@ export class FloatingMenuView {
public tippyOptions?: Partial<Props>
public shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null> = ({ state }) => {
public shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null> = ({ view, state }) => {
const { selection } = state
const { $anchor, empty } = selection
const isRootDepth = $anchor.depth === 1
@ -41,7 +41,12 @@ export class FloatingMenuView {
&& !$anchor.parent.type.spec.code
&& !$anchor.parent.textContent
if (!empty || !isRootDepth || !isEmptyTextBlock) {
if (
!view.hasFocus()
|| !empty
|| !isRootDepth
|| !isEmptyTextBlock
) {
return false
}
@ -116,6 +121,13 @@ export class FloatingMenuView {
hideOnClick: 'toggle',
...this.tippyOptions,
})
// maybe we have to hide tippy on its own blur event as well
if (this.tippy.popper.firstChild) {
(this.tippy.popper.firstChild as HTMLElement).addEventListener('blur', event => {
this.blurHandler({ event })
})
}
}
update(view: EditorView, oldState?: EditorState) {

11
packages/extension-ordered-list/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.26](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-ordered-list@2.0.0-beta.25...@tiptap/extension-ordered-list@2.0.0-beta.26) (2021-12-10)
### Features
* add itemTypeName option ([3d7c8e6](https://github.com/ueberdosis/tiptap/commit/3d7c8e642f31b1fa813e84dddc3968504477d536))
# [2.0.0-beta.25](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-ordered-list@2.0.0-beta.24...@tiptap/extension-ordered-list@2.0.0-beta.25) (2021-12-02)

2
packages/extension-ordered-list/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-ordered-list",
"description": "ordered list extension for tiptap",
"version": "2.0.0-beta.25",
"version": "2.0.0-beta.26",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

8
packages/extension-ordered-list/src/ordered-list.ts
View File

@ -1,6 +1,7 @@
import { Node, mergeAttributes, wrappingInputRule } from '@tiptap/core'
export interface OrderedListOptions {
itemTypeName: string,
HTMLAttributes: Record<string, any>,
}
@ -22,13 +23,16 @@ export const OrderedList = Node.create<OrderedListOptions>({
addOptions() {
return {
itemTypeName: 'listItem',
HTMLAttributes: {},
}
},
group: 'block list',
content: 'listItem+',
content() {
return `${this.options.itemTypeName}+`
},
addAttributes() {
return {
@ -62,7 +66,7 @@ export const OrderedList = Node.create<OrderedListOptions>({
addCommands() {
return {
toggleOrderedList: () => ({ commands }) => {
return commands.toggleList(this.name, 'listItem')
return commands.toggleList(this.name, this.options.itemTypeName)
},
}
},

11
packages/extension-task-list/CHANGELOG.md
View File

@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.25](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-task-list@2.0.0-beta.24...@tiptap/extension-task-list@2.0.0-beta.25) (2021-12-10)
### Features
* add itemTypeName option ([3d7c8e6](https://github.com/ueberdosis/tiptap/commit/3d7c8e642f31b1fa813e84dddc3968504477d536))
# [2.0.0-beta.24](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-task-list@2.0.0-beta.23...@tiptap/extension-task-list@2.0.0-beta.24) (2021-12-02)

2
packages/extension-task-list/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/extension-task-list",
"description": "task list extension for tiptap",
"version": "2.0.0-beta.24",
"version": "2.0.0-beta.25",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",

8
packages/extension-task-list/src/task-list.ts
View File

@ -1,6 +1,7 @@
import { Node, mergeAttributes } from '@tiptap/core'
export interface TaskListOptions {
itemTypeName: string,
HTMLAttributes: Record<string, any>,
}
@ -20,13 +21,16 @@ export const TaskList = Node.create<TaskListOptions>({
addOptions() {
return {
itemTypeName: 'taskItem',
HTMLAttributes: {},
}
},
group: 'block list',
content: 'taskItem+',
content() {
return `${this.options.itemTypeName}+`
},
parseHTML() {
return [
@ -44,7 +48,7 @@ export const TaskList = Node.create<TaskListOptions>({
addCommands() {
return {
toggleTaskList: () => ({ commands }) => {
return commands.toggleList(this.name, 'taskItem')
return commands.toggleList(this.name, this.options.itemTypeName)
},
}
},

56
packages/html/CHANGELOG.md
View File

@ -3,6 +3,62 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.157](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.156...@tiptap/html@2.0.0-beta.157) (2021-12-17)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.156](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.155...@tiptap/html@2.0.0-beta.156) (2021-12-16)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.155](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.154...@tiptap/html@2.0.0-beta.155) (2021-12-15)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.154](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.153...@tiptap/html@2.0.0-beta.154) (2021-12-15)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.153](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.152...@tiptap/html@2.0.0-beta.153) (2021-12-14)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.152](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.151...@tiptap/html@2.0.0-beta.152) (2021-12-13)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.151](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.150...@tiptap/html@2.0.0-beta.151) (2021-12-10)
**Note:** Version bump only for package @tiptap/html
# [2.0.0-beta.150](https://github.com/ueberdosis/tiptap/compare/@tiptap/html@2.0.0-beta.149...@tiptap/html@2.0.0-beta.150) (2021-12-08)
**Note:** Version bump only for package @tiptap/html

4
packages/html/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/html",
"description": "utility package to render tiptap JSON as HTML",
"version": "2.0.0-beta.150",
"version": "2.0.0-beta.157",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -21,7 +21,7 @@
"dist"
],
"dependencies": {
"@tiptap/core": "^2.0.0-beta.151",
"@tiptap/core": "^2.0.0-beta.158",
"prosemirror-model": "^1.15.0",
"zeed-dom": "^0.9.19"
},

30
packages/react/CHANGELOG.md
View File

@ -3,6 +3,36 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.101](https://github.com/ueberdosis/tiptap/compare/@tiptap/react@2.0.0-beta.100...@tiptap/react@2.0.0-beta.101) (2021-12-17)
### Reverts
* Revert "fix: Make sure editor is available on first render (#2282), fix #2040, fix #2182" ([629f4d2](https://github.com/ueberdosis/tiptap/commit/629f4d2a76c62e82c104598bf42a53a6d32015a8)), closes [#2040](https://github.com/ueberdosis/tiptap/issues/2040) [#2182](https://github.com/ueberdosis/tiptap/issues/2182)
# [2.0.0-beta.100](https://github.com/ueberdosis/tiptap/compare/@tiptap/react@2.0.0-beta.99...@tiptap/react@2.0.0-beta.100) (2021-12-16)
### Bug Fixes
* Make sure editor is available on first render ([#2282](https://github.com/ueberdosis/tiptap/issues/2282)), fix [#2040](https://github.com/ueberdosis/tiptap/issues/2040), fix [#2182](https://github.com/ueberdosis/tiptap/issues/2182) ([2436e2c](https://github.com/ueberdosis/tiptap/commit/2436e2c8fe88cdce6685ae3d712e5f2d3e70851d))
# [2.0.0-beta.99](https://github.com/ueberdosis/tiptap/compare/@tiptap/react@2.0.0-beta.98...@tiptap/react@2.0.0-beta.99) (2021-12-15)
**Note:** Version bump only for package @tiptap/react
# [2.0.0-beta.98](https://github.com/ueberdosis/tiptap/compare/@tiptap/react@2.0.0-beta.97...@tiptap/react@2.0.0-beta.98) (2021-12-03)
**Note:** Version bump only for package @tiptap/react

6
packages/react/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/react",
"description": "React components for tiptap",
"version": "2.0.0-beta.98",
"version": "2.0.0-beta.101",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -32,8 +32,8 @@
"react-dom": "^17.0.0"
},
"dependencies": {
"@tiptap/extension-bubble-menu": "^2.0.0-beta.51",
"@tiptap/extension-floating-menu": "^2.0.0-beta.46",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.52",
"@tiptap/extension-floating-menu": "^2.0.0-beta.47",
"prosemirror-view": "^1.23.3"
},
"repository": {

72
packages/starter-kit/CHANGELOG.md
View File

@ -3,6 +3,78 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.163](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.162...@tiptap/starter-kit@2.0.0-beta.163) (2021-12-17)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.162](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.161...@tiptap/starter-kit@2.0.0-beta.162) (2021-12-16)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.161](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.160...@tiptap/starter-kit@2.0.0-beta.161) (2021-12-16)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.160](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.159...@tiptap/starter-kit@2.0.0-beta.160) (2021-12-15)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.159](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.158...@tiptap/starter-kit@2.0.0-beta.159) (2021-12-15)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.158](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.157...@tiptap/starter-kit@2.0.0-beta.158) (2021-12-14)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.157](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.156...@tiptap/starter-kit@2.0.0-beta.157) (2021-12-13)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.156](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.155...@tiptap/starter-kit@2.0.0-beta.156) (2021-12-10)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.155](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.154...@tiptap/starter-kit@2.0.0-beta.155) (2021-12-10)
**Note:** Version bump only for package @tiptap/starter-kit
# [2.0.0-beta.154](https://github.com/ueberdosis/tiptap/compare/@tiptap/starter-kit@2.0.0-beta.153...@tiptap/starter-kit@2.0.0-beta.154) (2021-12-08)
**Note:** Version bump only for package @tiptap/starter-kit

10
packages/starter-kit/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/starter-kit",
"description": "starter kit for tiptap",
"version": "2.0.0-beta.154",
"version": "2.0.0-beta.163",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -21,12 +21,12 @@
"dist"
],
"dependencies": {
"@tiptap/core": "^2.0.0-beta.151",
"@tiptap/core": "^2.0.0-beta.158",
"@tiptap/extension-blockquote": "^2.0.0-beta.26",
"@tiptap/extension-bold": "^2.0.0-beta.25",
"@tiptap/extension-bullet-list": "^2.0.0-beta.24",
"@tiptap/extension-bullet-list": "^2.0.0-beta.25",
"@tiptap/extension-code": "^2.0.0-beta.26",
"@tiptap/extension-code-block": "^2.0.0-beta.31",
"@tiptap/extension-code-block": "^2.0.0-beta.32",
"@tiptap/extension-document": "^2.0.0-beta.15",
"@tiptap/extension-dropcursor": "^2.0.0-beta.25",
"@tiptap/extension-gapcursor": "^2.0.0-beta.33",
@ -36,7 +36,7 @@
"@tiptap/extension-horizontal-rule": "^2.0.0-beta.30",
"@tiptap/extension-italic": "^2.0.0-beta.25",
"@tiptap/extension-list-item": "^2.0.0-beta.20",
"@tiptap/extension-ordered-list": "^2.0.0-beta.25",
"@tiptap/extension-ordered-list": "^2.0.0-beta.26",
"@tiptap/extension-paragraph": "^2.0.0-beta.23",
"@tiptap/extension-strike": "^2.0.0-beta.27",
"@tiptap/extension-text": "^2.0.0-beta.15"

8
packages/vue-2/CHANGELOG.md
View File

@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.72](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.71...@tiptap/vue-2@2.0.0-beta.72) (2021-12-15)
**Note:** Version bump only for package @tiptap/vue-2
# [2.0.0-beta.71](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-2@2.0.0-beta.70...@tiptap/vue-2@2.0.0-beta.71) (2021-12-03)
**Note:** Version bump only for package @tiptap/vue-2

6
packages/vue-2/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/vue-2",
"description": "Vue components for tiptap",
"version": "2.0.0-beta.71",
"version": "2.0.0-beta.72",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -28,8 +28,8 @@
"vue": "^2.6.0"
},
"dependencies": {
"@tiptap/extension-bubble-menu": "^2.0.0-beta.51",
"@tiptap/extension-floating-menu": "^2.0.0-beta.46",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.52",
"@tiptap/extension-floating-menu": "^2.0.0-beta.47",
"prosemirror-view": "^1.23.3"
},
"repository": {

19
packages/vue-3/CHANGELOG.md
View File

@ -3,6 +3,25 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [2.0.0-beta.84](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-3@2.0.0-beta.83...@tiptap/vue-3@2.0.0-beta.84) (2021-12-15)
**Note:** Version bump only for package @tiptap/vue-3
# [2.0.0-beta.83](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-3@2.0.0-beta.82...@tiptap/vue-3@2.0.0-beta.83) (2021-12-10)
### Features
* add support for template strings in VueNodeViewRenderer, fix [#1987](https://github.com/ueberdosis/tiptap/issues/1987) ([7c98f80](https://github.com/ueberdosis/tiptap/commit/7c98f80547b8aff9d574732d20f8a3b565b9fdb2))
# [2.0.0-beta.82](https://github.com/ueberdosis/tiptap/compare/@tiptap/vue-3@2.0.0-beta.81...@tiptap/vue-3@2.0.0-beta.82) (2021-12-02)
**Note:** Version bump only for package @tiptap/vue-3

6
packages/vue-3/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@tiptap/vue-3",
"description": "Vue components for tiptap",
"version": "2.0.0-beta.82",
"version": "2.0.0-beta.84",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
@ -28,8 +28,8 @@
"vue": "^3.0.0"
},
"dependencies": {
"@tiptap/extension-bubble-menu": "^2.0.0-beta.51",
"@tiptap/extension-floating-menu": "^2.0.0-beta.46",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.52",
"@tiptap/extension-floating-menu": "^2.0.0-beta.47",
"prosemirror-state": "^1.3.4",
"prosemirror-view": "^1.23.3"
},

1
packages/vue-3/src/VueNodeViewRenderer.ts
View File

@ -88,6 +88,7 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
const extendedComponent = defineComponent({
extends: { ...this.component },
props: Object.keys(props),
template: (this.component as any).template,
setup: reactiveProps => {
provide('onDragStart', onDragStart)
provide('decorationClasses', this.decorationClasses)

1254
yarn.lock
View File

File diff suppressed because it is too large Load Diff