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

docs: update mark examples

Browse Source
This commit is contained in:
Hans Pagel
2021-10-19 20:59:51 +02:00
parent d47b45cbc2
commit 4b1848917d
10 changed files with 98 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/src/Marks/Bold/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<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 toggleBold
</button>
<button @click="editor.chain().focus().setBold().run()" :disabled="editor.isActive('bold')">
setBold
</button>
<button @click="editor.chain().focus().unsetBold().run()" :disabled="!editor.isActive('bold')">
unsetBold
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

26
demos/src/Marks/Code/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<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 toggleCode
</button>
<button @click="editor.chain().focus().setCode().run()" :disabled="editor.isActive('code')">
setCode
</button>
<button @click="editor.chain().focus().unsetCode().run()" :disabled="!editor.isActive('code')">
unsetCode
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -46,3 +52,21 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
code {
font-size: 0.9rem;
padding: 0.25em;
border-radius: 0.25em;
background-color: rgba(#616161, 0.1);
color: #616161;
box-decoration-break: clone;
}
}
</style>

38
demos/src/Marks/Highlight/Vue/index.vue
View File

@@ -1,26 +1,7 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
@click="editor.chain().focus().toggleHighlight().run()" toggleHighlight
:class="{ 'is-active': editor.isActive('highlight') }"
>
highlight (any)
</button>
<button
@click="editor.chain().focus().toggleHighlight({
color: ''
}).run()"
:class="{ 'is-active': editor.isActive('highlight', {
color: ''
}) }"
>
highlight (default)
</button>
<button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
"red"
</button>
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
red
</button> </button>
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }"> <button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
orange orange
@@ -34,6 +15,18 @@
<button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }"> <button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
purple purple
</button> </button>
<button @click="editor.chain().focus().toggleHighlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
red ('red')
</button>
<button @click="editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
red (#ffa8a8)
</button>
<button
@click="editor.chain().focus().unsetHighlight().run()"
:disabled="!editor.isActive('highlight')"
>
unsetHighlight
</button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
</div> </div>
@@ -83,5 +76,8 @@ export default {
<style lang="scss"> <style lang="scss">
mark { mark {
background-color: #ffe066; background-color: #ffe066;
padding: 0.125em 0;
border-radius: 0.25em;
box-decoration-break: clone;
} }
</style> </style>

8
demos/src/Marks/Italic/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<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 toggleItalic
</button>
<button @click="editor.chain().focus().setItalic().run()" :disabled="editor.isActive('italic')">
setItalic
</button>
<button @click="editor.chain().focus().unsetItalic().run()" :disabled="!editor.isActive('italic')">
unsetItalic
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

15
demos/src/Marks/Link/Vue/index.vue
View File

@@ -3,7 +3,7 @@
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }"> <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
setLink setLink
</button> </button>
<button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')"> <button @click="editor.chain().focus().unsetLink().run()" :disabled="!editor.isActive('link')">
unsetLink unsetLink
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -16,6 +16,7 @@ import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph' import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text' import Text from '@tiptap/extension-text'
import Link from '@tiptap/extension-link' import Link from '@tiptap/extension-link'
import Code from '@tiptap/extension-code'
export default { export default {
components: { components: {
@@ -37,13 +38,14 @@ export default {
Link.configure({ Link.configure({
openOnClick: false, openOnClick: false,
}), }),
Code,
], ],
content: ` content: `
<p> <p>
Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work. Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
</p> </p>
<p> <p>
By default every link will get a \`rel="noopener noreferrer nofollow"\` attribute. It’s configurable though. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute. It’s configurable though.
</p> </p>
`, `,
}) })
@@ -97,5 +99,14 @@ export default {
a { a {
color: #68CEF8; color: #68CEF8;
} }
code {
font-size: 0.9rem;
padding: 0.25em;
border-radius: 0.25em;
background-color: rgba(#616161, 0.1);
color: #616161;
box-decoration-break: clone;
}
} }
</style> </style>

8
demos/src/Marks/Strike/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<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 toggleStrike
</button>
<button @click="editor.chain().focus().setStrike().run()" :disabled="editor.isActive('strike')">
setStrike
</button>
<button @click="editor.chain().focus().unsetStrike().run()" :disabled="!editor.isActive('strike')">
unsetStrike
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

8
demos/src/Marks/Subscript/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }"> <button @click="editor.chain().focus().toggleSubscript().run()" :class="{ 'is-active': editor.isActive('subscript') }">
subscript toggleSubscript
</button>
<button @click="editor.chain().focus().setSubscript().run()" :disabled="editor.isActive('subscript')">
setSubscript
</button>
<button @click="editor.chain().focus().unsetSubscript().run()" :disabled="!editor.isActive('subscript')">
unsetSubscript
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

8
demos/src/Marks/Superscript/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }"> <button @click="editor.chain().focus().toggleSuperscript().run()" :class="{ 'is-active': editor.isActive('superscript') }">
superscript toggleSuperscript
</button>
<button @click="editor.chain().focus().setSuperscript().run()" :disabled="editor.isActive('superscript')">
setSuperscript
</button>
<button @click="editor.chain().focus().unsetSuperscript().run()" :disabled="!editor.isActive('superscript')">
unsetSuperscript
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

8
demos/src/Marks/Underline/Vue/index.vue
View File

@@ -1,7 +1,13 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }"> <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }">
underline toggleUnderline
</button>
<button @click="editor.chain().focus().setUnderline().run()" :disabled="editor.isActive('underline')">
setUnderline
</button>
<button @click="editor.chain().focus().unsetUnderline().run()" :disabled="!editor.isActive('underline')">
unsetUnderline
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />

2
docs/about.md
View File

@@ -46,4 +46,4 @@ We are part of the [Y-Collective](https://opencollective.com/y-collective), a fu
If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues/new/choose) to keep everything accessible to the whole community. For everything else, reach out to [humans@tiptap.dev](mailto:humans@tiptap.dev). We can take on a limited number of custom development and consulting contracts. If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues/new/choose) to keep everything accessible to the whole community. For everything else, reach out to [humans@tiptap.dev](mailto:humans@tiptap.dev). We can take on a limited number of custom development and consulting contracts.
### Can we have a call? ### Can we have a call?
Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues). Nope, we are big fans of asynchronous communication. If you really need to reach out in private, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev), but don’t expect technical email support. That all happens on [GitHub](https://github.com/ueberdosis/tiptap/issues)