From a9708f65354485b16adcbe46749e975aa9011204 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 2 Feb 2021 14:48:58 +0100
Subject: [PATCH] docs: minor improvements to the demo style

---
 docs/src/demos/Examples/Book/index.vue        |  9 ++++
 .../Examples/CollaborativeEditing/index.vue   |  9 ++++
 docs/src/demos/Examples/Community/index.vue   |  9 ++++
 docs/src/demos/Examples/Default/index.vue     |  9 ++++
 docs/src/demos/Examples/Formatting/index.vue  |  9 ++++
 .../Examples/MarkdownShortcuts/index.vue      |  9 ++++
 docs/src/demos/Examples/Tables/index.vue      | 54 ++++++++++---------
 .../demos/Guide/Content/ExportHTML/index.vue  |  9 ++++
 .../demos/Guide/Content/ExportJSON/index.vue  |  9 ++++
 9 files changed, 100 insertions(+), 26 deletions(-)

diff --git a/docs/src/demos/Examples/Book/index.vue b/docs/src/demos/Examples/Book/index.vue
index 44b31291..1e3a53b5 100644
--- a/docs/src/demos/Examples/Book/index.vue
+++ b/docs/src/demos/Examples/Book/index.vue
@@ -109,6 +109,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index bba1e2ac..5f962783 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -265,6 +265,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Community/index.vue b/docs/src/demos/Examples/Community/index.vue
index d64d4a4f..b7bcf223 100644
--- a/docs/src/demos/Examples/Community/index.vue
+++ b/docs/src/demos/Examples/Community/index.vue
@@ -147,6 +147,15 @@ export default {
   > * + * {
     margin-top: 0.75em;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
 }
 
 .mention {
diff --git a/docs/src/demos/Examples/Default/index.vue b/docs/src/demos/Examples/Default/index.vue
index b3bb8114..1f0bd869 100644
--- a/docs/src/demos/Examples/Default/index.vue
+++ b/docs/src/demos/Examples/Default/index.vue
@@ -139,6 +139,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue
index 0e795b82..6c1b48a7 100644
--- a/docs/src/demos/Examples/Formatting/index.vue
+++ b/docs/src/demos/Examples/Formatting/index.vue
@@ -124,6 +124,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
index 59062178..8f55d2ae 100644
--- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue
+++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
@@ -65,6 +65,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Tables/index.vue b/docs/src/demos/Examples/Tables/index.vue
index 07288eaf..8e89ac38 100644
--- a/docs/src/demos/Examples/Tables/index.vue
+++ b/docs/src/demos/Examples/Tables/index.vue
@@ -4,56 +4,56 @@
       insertTable
     </button>
 
-    <template v-if="editor.isActive('table')">
-      <button @click="editor.chain().focus().addColumnBefore().run()" v-if="editor.can().addColumnBefore()">
+    <template>
+      <button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
         addColumnBefore
       </button>
-      <button @click="editor.chain().focus().addColumnAfter().run()" v-if="editor.can().addColumnAfter()">
+      <button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
         addColumnAfter
       </button>
-      <button @click="editor.chain().focus().deleteColumn().run()" v-if="editor.can().deleteColumn()">
+      <button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
         deleteColumn
       </button>
-      <button @click="editor.chain().focus().addRowBefore().run()" v-if="editor.can().addRowBefore()">
+      <button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
         addRowBefore
       </button>
-      <button @click="editor.chain().focus().addRowAfter().run()" v-if="editor.can().addRowAfter()">
+      <button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
         addRowAfter
       </button>
-      <button @click="editor.chain().focus().deleteRow().run()" v-if="editor.can().deleteRow()">
+      <button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
         deleteRow
       </button>
-      <button @click="editor.chain().focus().deleteTable().run()" v-if="editor.can().deleteTable()">
+      <button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
         deleteTable
       </button>
-      <button @click="editor.chain().focus().mergeCells().run()" v-if="editor.can().mergeCells()">
+      <button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
         mergeCells
       </button>
-      <button @click="editor.chain().focus().splitCell().run()" v-if="editor.can().splitCell()">
+      <button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
         splitCell
       </button>
-      <button @click="editor.chain().focus().toggleHeaderColumn().run()" v-if="editor.can().toggleHeaderColumn()">
+      <button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
         toggleHeaderColumn
       </button>
-      <button @click="editor.chain().focus().toggleHeaderRow().run()" v-if="editor.can().toggleHeaderRow()">
+      <button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
         toggleHeaderRow
       </button>
-      <button @click="editor.chain().focus().toggleHeaderCell().run()" v-if="editor.can().toggleHeaderCell()">
+      <button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
         toggleHeaderCell
       </button>
-      <button @click="editor.chain().focus().mergeOrSplit().run()" v-if="editor.can().mergeOrSplit()">
+      <button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
         mergeOrSplit
       </button>
-      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" v-if="editor.can().setCellAttribute('colspan', 2)">
+      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" :disabled="!editor.can().setCellAttribute('colspan', 2)">
         setCellAttribute
       </button>
-      <button @click="editor.chain().focus().fixTables().run()" v-if="editor.can().fixTables()">
+      <button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
         fixTables
       </button>
-      <button @click="editor.chain().focus().goToNextCell().run()" v-if="editor.can().goToNextCell()">
+      <button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
         goToNextCell
       </button>
-      <button @click="editor.chain().focus().goToPreviousCell().run()" v-if="editor.can().goToPreviousCell()">
+      <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
         goToPreviousCell
       </button>
     </template>
@@ -95,14 +95,8 @@ export default {
       ],
       content: `
         <h1>
-          Fun with tables
+          Have you seen our tables? They are amazing.
         </h1>
-        <p>
-          Greeks were the first people to use a table as a dining place. Not sure why they put their plates on a computer display, but I don’t care. If you want to create your own table, tiptap got you covered. No matter, what you want to do with those tables.
-        </p>
-        <h2>
-          Amazing features
-        </h2>
         <ul>
           <li>tables with rows, headers and cells</li>
           <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
@@ -145,6 +139,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
@@ -232,7 +235,6 @@ export default {
 }
 
 .tableWrapper {
-  padding: 1rem 0;
   overflow-x: auto;
 }
 
diff --git a/docs/src/demos/Guide/Content/ExportHTML/index.vue b/docs/src/demos/Guide/Content/ExportHTML/index.vue
index 0509ac3b..61c273e3 100644
--- a/docs/src/demos/Guide/Content/ExportHTML/index.vue
+++ b/docs/src/demos/Guide/Content/ExportHTML/index.vue
@@ -121,6 +121,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Guide/Content/ExportJSON/index.vue b/docs/src/demos/Guide/Content/ExportJSON/index.vue
index e51532bf..e3302067 100644
--- a/docs/src/demos/Guide/Content/ExportJSON/index.vue
+++ b/docs/src/demos/Guide/Content/ExportJSON/index.vue
@@ -128,6 +128,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;