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

add beautiful colors (wip, breaking tests)

Browse Source
This commit is contained in:
Hans Pagel
2020-10-08 14:59:24 +02:00
parent 5c0bf25442
commit 2364ebd974
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/src/demos/Extensions/Highlight/index.vue
View File

@@ -10,19 +10,19 @@
> >
highlight (default) highlight (default)
</button> </button>
<button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }"> <button @click="editor.chain().focus().highlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
red red
</button> </button>
<button @click="editor.chain().focus().highlight({ color: 'orange' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'orange' }) }"> <button @click="editor.chain().focus().highlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
orange orange
</button> </button>
<button @click="editor.chain().focus().highlight({ color: 'green' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'green' }) }"> <button @click="editor.chain().focus().highlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
green green
</button> </button>
<button @click="editor.chain().focus().highlight({ color: 'blue' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'blue' }) }"> <button @click="editor.chain().focus().highlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
blue blue
</button> </button>
<button @click="editor.chain().focus().highlight({ color: 'purple' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'purple' }) }"> <button @click="editor.chain().focus().highlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
purple purple
</button> </button>
@@ -60,7 +60,7 @@ export default {
content: ` content: `
<p>This isn’t highlighted.</s></p> <p>This isn’t highlighted.</s></p>
<p><mark>But that one is.</mark></p> <p><mark>But that one is.</mark></p>
<p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p> <p><mark style="background-color: #ffa8a8;">And this is highlighted too, but in a different color.</mark></p>
`, `,
}) })
}, },
@@ -70,3 +70,9 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
mark {
background-color: #ffe066;
}
</style>