mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 09:25:29 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Philipp Kühn 2021-12-16 14:06:35 +01:00
parent 2436e2c8fe
commit 38109831c6
15 changed files with 208 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/src/Examples/Book/React/index.jsx
View File

@ -5,10 +5,6 @@ import { content } from '../content.js'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
if (!editor) {
return null
}
return ( return (
<> <>
<button <button

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

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

4
demos/src/Examples/CodeBlockLanguage/React/index.jsx
View File

@ -16,10 +16,6 @@ import lowlight from 'lowlight'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
if (!editor) {
return null
}
return ( return (
<button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}> <button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
code block code block

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') }"> <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block code block
</button> </button>
<editor-content :editor="editor" />
</div> </div>
<editor-content :editor="editor" />
</template> </template>
<script> <script>

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

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

4
demos/src/Examples/Default/React/index.jsx
View File

@ -4,10 +4,6 @@ import StarterKit from '@tiptap/starter-kit'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
if (!editor) {
return null
}
return ( return (
<> <>
<button <button

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

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

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

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

4
demos/src/Examples/Formatting/React/index.jsx
View File

@ -6,10 +6,6 @@ import Highlight from '@tiptap/extension-highlight'
import './styles.scss' import './styles.scss'
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
if (!editor) {
return null
}
return ( return (
<> <>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}> <button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>

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

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

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

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

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

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

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

@ -30,9 +30,5 @@ export default () => {
`, `,
}) })
if (!editor) {
return null
}
return <EditorContent editor={editor} /> return <EditorContent editor={editor} />
} }

4
demos/src/Examples/Tables/React/index.jsx
View File

@ -54,10 +54,6 @@ export const tableHTML = `
` `
const MenuBar = ({ editor }) => { const MenuBar = ({ editor }) => {
if (!editor) {
return null
}
return ( return (
<> <>
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}> <button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>

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()"> <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
goToPreviousCell goToPreviousCell
</button> </button>
<editor-content :editor="editor" />
</div> </div>
<editor-content :editor="editor" />
</template> </template>
<script> <script>