Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/package.json

@@ -28,6 +28,7 @@
     "simplify-js": "^1.2.4",
     "tippy.js": "^6.3.1",
     "vue-github-button": "^1.1.2",
+    "vue-observe-visibility": "^1.0.0",
     "y-indexeddb": "^9.0.6",
     "y-prosemirror": "^1.0.7",
     "y-webrtc": "^10.1.7",

docs/src/components/Demo/index.vue

@@ -5,16 +5,18 @@
       <template v-if="mainFile">
         <demo-frame class="demo__preview" v-bind="props" />
         <div class="demo__source" v-if="showSource">
-          <div class="demo__tabs" v-if="showFileNames">
-            <button
-              class="demo__tab"
-              :class="{ 'is-active': currentIndex === index}"
-              v-for="(file, index) in files"
-              :key="index"
-              @click="currentIndex = index"
-            >
-              {{ file.name }}
-            </button>
+          <div class="demo__scroller" v-if="showFileNames">
+            <div class="demo__tabs">
+              <button
+                class="demo__tab"
+                :class="{ 'is-active': currentIndex === index}"
+                v-for="(file, index) in files"
+                :key="index"
+                @click="currentIndex = index"
+              >
+                {{ file.name }}
+              </button>
+            </div>
           </div>
           <div class="demo__code" v-if="activeFile" :key="activeFile.path">
             <!-- eslint-disable-next-line -->

docs/src/components/Demo/style.scss

@@ -18,33 +18,42 @@
     background-color: $colorBlack;
   }
 
-  &__tabs {
-    padding: 0.5rem 1.25rem 0 1.25rem;
-    background-color: rgba($colorBlack, 0.9);
-    white-space: nowrap;
+  &__scroller {
+    display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  &__tabs {
+    display: flex;
+    flex: 1 1 auto;
+    padding: 0 1.25rem 0 1.25rem;
+    border-bottom: 2px solid rgba($colorWhite, 0.1);
+  }
+
   &__tab {
+    position: relative;
     display: inline-flex;
     position: relative;
     background-color: transparent;
     color: rgba($colorWhite, 0.7);
-    padding: 0.1rem 0.5rem;
-    border-radius: 5px;
-    font-weight: 500;
+    padding: 0.3rem 0 calc(0.3rem + 2px) 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
     border: none;
-    margin-right: 0.5rem;
-
-    &:first-child {
-      margin-left: -0.5rem;
-    }
+    margin-right: 1rem;
+    margin-bottom: -2px;
+    border-bottom: 2px solid transparent;
 
     &.is-active,
     &:hover {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.1);
+    }
+
+    &.is-active {
+      font-weight: 700;
+      border-bottom-color: $colorWhite
     }
   }
 

docs/src/components/DemoFrame/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="demo-frame" :class="{ 'is-inline': inline, 'is-loading': isLoading }">
+  <div
+    class="demo-frame"
+    :class="{ 'is-inline': inline, 'is-loading': isLoading }"
+    v-observe-visibility="{
+      callback: visibilityChanged,
+      once: true,
+    }"
+  >
     <div class="demo-frame__loader-wrapper" v-if="isLoading">
       <div class="demo-frame__loader" />
     </div>
@@ -11,11 +18,14 @@
       height="0"
       frameborder="0"
       @load="onLoad"
+      v-if="isVisible"
     />
   </div>
 </template>
 
 <script>
+import { ObserveVisibility } from 'vue-observe-visibility'
+
 export default {
   props: {
     name: {
@@ -39,9 +49,14 @@ export default {
     },
   },
 
+  directives: {
+    ObserveVisibility,
+  },
+
   data() {
     return {
       isLoading: true,
+      isVisible: false,
     }
   },
 
@@ -55,6 +70,10 @@ export default {
     onLoad() {
       this.isLoading = false
     },
+
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible
+    },
   },
 }
 </script>

docs/src/components/Demos/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="demos" :class="{ 'is-first-active': selectedIndex === 0 }">
+    <button
+      class="demos__tab"
+      :class="{ 'is-active': selectedIndex === index }"
+      v-for="(item, index) in formattedItems"
+      :key="index"
+      @click="selectedIndex = index"
+    >
+      {{ item.title }}
+    </button>
+    <demo
+      :name="selectedItem.name"
+      :key="selectedItem.title"
+    />
+  </div>
+</template>
+
+<script>
+import Demo from '@/components/Demo'
+
+export default {
+  components: {
+    Demo,
+  },
+
+  props: {
+    items: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  computed: {
+    formattedItems() {
+      return Object
+        .entries(this.items)
+        .map(([title, name]) => {
+          return {
+            title,
+            name,
+          }
+        })
+    },
+
+    selectedItem() {
+      return this.formattedItems[this.selectedIndex]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demos {
+  &__tab {
+    border-radius: 0.4rem 0.4rem 0 0;
+    border: none;
+    background: none;
+    padding: 0.3rem 1.25rem;
+    margin-bottom: -1px;
+    font: inherit;
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025rem;
+
+    &.is-active {
+      background-color: $colorBlack;
+      color: $colorWhite;
+      font-weight: 700;
+    }
+  }
+
+  &.is-first-active ::v-deep .demo {
+    border-top-left-radius: 0;
+  }
+}
+</style>

docs/src/demos/Examples/InteractiveNodeViews/Component.vue

@@ -32,6 +32,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;

docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss

@@ -6,6 +6,7 @@
 }
 
 .react-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;

docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss

@@ -6,6 +6,7 @@
 }
 
 .react-component-with-content {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;

docs/src/demos/Guide/NodeViews/VueComponent/Component.vue

@@ -32,6 +32,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;

docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue

@@ -21,6 +21,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;

docs/src/docPages/examples/community.md

@@ -1,7 +1,6 @@
 # Suggestions
 
-## Vue
-<demo name="Examples/Community/Vue" />
-
-## React
-<demo name="Examples/Community/React" />
+<demos :items="{
+  Vue: 'Examples/Community/Vue',
+  React: 'Examples/Community/React',
+}" />

docs/src/docPages/examples/default.md

@@ -1,8 +1,7 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
 
-## Vue
-<demo name="Examples/Default/Vue" />
-
-## React
-<demo name="Examples/Default/React" />
+<demos :items="{
+  Vue: 'Examples/Default/Vue',
+  React: 'Examples/Default/React',
+}" />

docs/src/docPages/installation/react.md

@@ -40,7 +40,7 @@ To actually start using tiptap, you’ll need to add a new component to your app
 
 This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
 
-```js
+```jsx
 import { useEditor, EditorContent } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 
@@ -61,7 +61,7 @@ export default Tiptap
 ## 4. Add it to your app
 Now, let’s replace the content of `src/App.js` with the following example code to use our new `Tiptap` component in our app.
 
-```js
+```jsx
 import Tiptap from './Tiptap.jsx'
 
 const App = () => {

docs/src/main.js

@@ -51,4 +51,5 @@ export default function (Vue) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
+  Vue.component('Demos', () => import(/* webpackChunkName: "demos" */ '~/components/Demos'))
 }

yarn.lock

@@ -14863,6 +14863,11 @@ vue-meta@^2.2.2:
   dependencies:
     deepmerge "^4.2.2"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-router@^3.1.3:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"