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

add italic commands

Browse Source
This commit is contained in:
Philipp Kühn
2020-11-17 21:49:23 +01:00
parent 3349ebf081
commit f24e8f7ee9
9 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/Examples/Basic/index.vue
View File

@@ -4,7 +4,7 @@
<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().italic().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().strike().run()" :class="{ 'is-active': editor.isActive('strike') }"> <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">

2
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -4,7 +4,7 @@
<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().italic().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().strike().run()" :class="{ 'is-active': editor.isActive('strike') }"> <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">

2
docs/src/demos/Examples/CollaborativeEditingWs/index.vue
View File

@@ -4,7 +4,7 @@
<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().italic().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().strike().run()" :class="{ 'is-active': editor.isActive('strike') }"> <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">

2
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

@@ -10,7 +10,7 @@
<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().italic().run()" :class="{ 'is-active': editor.isActive('italic') }"> <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic Italic
</button> </button>
</div> </div>

2
docs/src/demos/Examples/Formatting/index.vue
View File

@@ -4,7 +4,7 @@
<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().italic().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().heading({ level: 1 }).run()" :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 }) }">

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

@@ -13,7 +13,7 @@
<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().italic().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().heading({ level: 1 }).run()" :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 }) }">

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

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

2
docs/src/docPages/api/commands.md
View File

@@ -63,7 +63,7 @@ editor
.can() .can()
.chain() .chain()
.toggleBold() .toggleBold()
.italic() .toggleItalic()
.run() .run()
``` ```

16
packages/extension-italic/src/index.ts
View File

@@ -44,18 +44,30 @@ const Italic = Mark.create({
addCommands() { addCommands() {
return { return {
/**
* Set a italic mark
*/
setItalic: (): Command => ({ commands }) => {
return commands.addMark('italic')
},
/** /**
* Toggle an italic mark * Toggle an italic mark
*/ */
italic: (): Command => ({ commands }) => { toggleItalic: (): Command => ({ commands }) => {
return commands.toggleMark('italic') return commands.toggleMark('italic')
}, },
/**
* Set a italic mark
*/
unsetItalic: (): Command => ({ commands }) => {
return commands.addMark('italic')
},
} }
}, },
addKeyboardShortcuts() { addKeyboardShortcuts() {
return { return {
'Mod-i': () => this.editor.commands.italic(), 'Mod-i': () => this.editor.commands.toggleItalic(),
} }
}, },