From 4b1848917dd818d8f572043350db81d02a592772 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 19 Oct 2021 20:59:51 +0200
Subject: [PATCH] docs: update mark examples

---
 demos/src/Marks/Bold/Vue/index.vue        |  8 ++++-
 demos/src/Marks/Code/Vue/index.vue        | 26 +++++++++++++++-
 demos/src/Marks/Highlight/Vue/index.vue   | 38 ++++++++++-------------
 demos/src/Marks/Italic/Vue/index.vue      |  8 ++++-
 demos/src/Marks/Link/Vue/index.vue        | 15 +++++++--
 demos/src/Marks/Strike/Vue/index.vue      |  8 ++++-
 demos/src/Marks/Subscript/Vue/index.vue   |  8 ++++-
 demos/src/Marks/Superscript/Vue/index.vue |  8 ++++-
 demos/src/Marks/Underline/Vue/index.vue   |  8 ++++-
 docs/about.md                             |  2 +-
 10 files changed, 98 insertions(+), 31 deletions(-)

diff --git a/demos/src/Marks/Bold/Vue/index.vue b/demos/src/Marks/Bold/Vue/index.vue
index 6e33fc00..21c22ca6 100644
--- a/demos/src/Marks/Bold/Vue/index.vue
+++ b/demos/src/Marks/Bold/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Marks/Code/Vue/index.vue b/demos/src/Marks/Code/Vue/index.vue
index 1272fd47..94ebe57a 100644
--- a/demos/src/Marks/Code/Vue/index.vue
+++ b/demos/src/Marks/Code/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
@@ -46,3 +52,21 @@ export default {
   },
 }
 </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>
diff --git a/demos/src/Marks/Highlight/Vue/index.vue b/demos/src/Marks/Highlight/Vue/index.vue
index cfae669e..43d08bd7 100644
--- a/demos/src/Marks/Highlight/Vue/index.vue
+++ b/demos/src/Marks/Highlight/Vue/index.vue
@@ -1,26 +1,7 @@
 <template>
   <div v-if="editor">
-    <button
-      @click="editor.chain().focus().toggleHighlight().run()"
-      :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 @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+      toggleHighlight
     </button>
     <button @click="editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
       orange
@@ -34,6 +15,18 @@
     <button @click="editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
       purple
     </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" />
   </div>
@@ -83,5 +76,8 @@ export default {
 <style lang="scss">
 mark {
   background-color: #ffe066;
+  padding: 0.125em 0;
+  border-radius: 0.25em;
+  box-decoration-break: clone;
 }
 </style>
diff --git a/demos/src/Marks/Italic/Vue/index.vue b/demos/src/Marks/Italic/Vue/index.vue
index 00fe45da..bb7fcdc0 100644
--- a/demos/src/Marks/Italic/Vue/index.vue
+++ b/demos/src/Marks/Italic/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Marks/Link/Vue/index.vue b/demos/src/Marks/Link/Vue/index.vue
index a9a5fffd..2cb88d1c 100644
--- a/demos/src/Marks/Link/Vue/index.vue
+++ b/demos/src/Marks/Link/Vue/index.vue
@@ -3,7 +3,7 @@
     <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
       setLink
     </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
     </button>
     <editor-content :editor="editor" />
@@ -16,6 +16,7 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Link from '@tiptap/extension-link'
+import Code from '@tiptap/extension-code'
 
 export default {
   components: {
@@ -37,13 +38,14 @@ export default {
         Link.configure({
           openOnClick: false,
         }),
+        Code,
       ],
       content: `
         <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.
         </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>
       `,
     })
@@ -97,5 +99,14 @@ export default {
   a {
     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>
diff --git a/demos/src/Marks/Strike/Vue/index.vue b/demos/src/Marks/Strike/Vue/index.vue
index 0cc5a9c4..f7e7d3c2 100644
--- a/demos/src/Marks/Strike/Vue/index.vue
+++ b/demos/src/Marks/Strike/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Marks/Subscript/Vue/index.vue b/demos/src/Marks/Subscript/Vue/index.vue
index 613d2b2e..e3f06e67 100644
--- a/demos/src/Marks/Subscript/Vue/index.vue
+++ b/demos/src/Marks/Subscript/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Marks/Superscript/Vue/index.vue b/demos/src/Marks/Superscript/Vue/index.vue
index 4411cd04..a20821bb 100644
--- a/demos/src/Marks/Superscript/Vue/index.vue
+++ b/demos/src/Marks/Superscript/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Marks/Underline/Vue/index.vue b/demos/src/Marks/Underline/Vue/index.vue
index d92daddc..51cf8628 100644
--- a/demos/src/Marks/Underline/Vue/index.vue
+++ b/demos/src/Marks/Underline/Vue/index.vue
@@ -1,7 +1,13 @@
 <template>
   <div v-if="editor">
     <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>
 
     <editor-content :editor="editor" />
diff --git a/docs/about.md b/docs/about.md
index fe0a774b..590c512a 100644
--- a/docs/about.md
+++ b/docs/about.md
@@ -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.
 
 ### 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)
\ No newline at end of file