ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix more commands

Browse Source
This commit is contained in:
Philipp Kühn
2020-09-22 09:08:08 +02:00
parent 655d721914
commit dcac67c61a
25 changed files with 167 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/demos/Examples/History/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.focus().undo()">
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.focus().redo()">
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>

11
docs/src/demos/Examples/Simple/index.vue
View File

@@ -1,13 +1,5 @@
<template>
<div>
<button @click="() => console.log(editor.focus())">focus</button>
<button @click="() => console.log(editor.insertText('hello'))">insert</button>
<button @click="editor.chain().focus().insertText('wat').insertHTML('<p>2</p>').run()">chain 1</button>
<button @click="editor.chain().insertText('1').focus().run()">chain 2</button>
<button @click="editor.chain().setContent('reset').insertText('1').clearContent().run()">setContent</button>
<button @click="editor.chain().focus().deleteSelection().run()">deleteSelection</button>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
@@ -24,7 +16,6 @@ export default {
data() {
return {
editor: null,
console: console,
}
},

2
docs/src/demos/Extensions/Blockquote/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().blockquote()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>

2
docs/src/demos/Extensions/Bold/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>

2
docs/src/demos/Extensions/BulletList/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<!-- <button @click="editor.focus().bulletList()" :class="{ 'is-active': editor.isActive('bulletList') }">
<!-- <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button> -->

2
docs/src/demos/Extensions/Code/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
<button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>

2
docs/src/demos/Extensions/CodeBlock/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>

2
docs/src/demos/Extensions/HardBreak/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().hardBreak()">
<button @click="editor.chain().focus().hardBreak().run()">
hardBreak
</button>

6
docs/src/demos/Extensions/Heading/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<div v-if="editor">
<button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
<button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
<button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.focus().heading({ level: 3 })" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
<button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>

4
docs/src/demos/Extensions/History/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div v-if="editor">
<button @click="editor.focus().undo()">
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.focus().redo()">
<button @click="editor.chain().focus().redo().run()">
redo
</button>

2
docs/src/demos/Extensions/HorizontalRule/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().horizontalRule()">
<button @click="editor.chain().focus().horizontalRule().run()">
horizontalRule
</button>

2
docs/src/demos/Extensions/Italic/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>

2
docs/src/demos/Extensions/Strike/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().strike()" :class="{ 'is-active': editor.isActive('strike') }">
<button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>

2
docs/src/demos/Extensions/Underline/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.focus().underline()" :class="{ 'is-active': editor.isActive('underline') }">
<button @click="editor.chain().focus().underline().run()" :class="{ 'is-active': editor.isActive('underline') }">
underline
</button>

14
docs/src/demos/Guide/BuildYourEditor/index.vue
View File

@@ -1,25 +1,25 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.focus().removeMarks()">
<button @click="editor.chain().focus().removeMarks().run()">
clear formatting
</button>
<button @click="editor.focus().undo()">
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.focus().redo()">
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
<button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
<button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
</div>

4
docs/src/demos/React/index.jsx
View File

@@ -9,12 +9,12 @@ const MenuBar = () => {
return (
<>
<button onClick={() => editor.focus().removeMarks()}>
<button onClick={() => editor.chain().focus().removeMarks().run()}>
Clear formatting
</button>
<button
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
onClick={() => editor.focus().bold()}
onClick={() => editor.chain().focus().bold().run()}
>
Bold
</button>

2
docs/src/demos/SimpleMenuBar/index.vue
View File

@@ -5,7 +5,7 @@
<button
class="menubar__button"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor.focus().bold()"
@click="editor.chain().focus().bold().run()"
>
Bold
</button>

2
docs/src/docPages/overview/upgrade-guide.md
View File

@@ -73,5 +73,5 @@ Currently, blockquotes must not be nested anymore. That said, we’re working on
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
```js
editor.focus().bold()
editor.chain().focus().bold().run()
```