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

2021-04-16 19:15:59 +02:00
parent 698a3ad0d3 0c1b77132b
commit 13da47f31b
144 changed files with 1861 additions and 813 deletions
--- a/docs/src/components/BannerMessage/index.vue
+++ b/docs/src/components/BannerMessage/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <g-link :class="`banner-message banner-message--${color}`" :to="to">
+    <slot />
+  </g-link>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+
+    color: {
+      type: String,
+      default: 'black',
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0.65rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+
+  &--black {
+    background-color: $colorBlack;
+    color: $colorWhite;
+  }
+
+  &--yellow {
+    background-color: $colorYellow;
+    color: $colorBlack;
+  }
+}
+</style>
--- a/docs/src/demos/Examples/CodeBlockLanguage/CodeBlockComponent.vue
+++ b/docs/src/demos/Examples/CodeBlockLanguage/CodeBlockComponent.vue
@@ -17,7 +17,6 @@

 <script>
 import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
-import lowlight from 'lowlight/lib/core'

 export default {
  components: {
@@ -29,7 +28,7 @@ export default {

  data() {
    return {
-      languages: lowlight.listLanguages(),
+      languages: this.extension.options.lowlight.listLanguages(),
    }
  },

--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -70,7 +70,7 @@ export default {

    this.editor = new Editor({
      extensions: [
-        ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+        ...defaultExtensions().filter(extension => extension.name !== 'history'),
        Highlight,
        TaskList,
        TaskItem,
--- a/docs/src/demos/Examples/Menus/React/index.jsx
+++ b/docs/src/demos/Examples/Menus/React/index.jsx
@@ -24,8 +24,8 @@ export default () => {
  })

  return (
-    <div style={{ position: 'relative' }}>
-      {editor && <BubbleMenu className="bubble-menu" editor={editor}>
+    <>
+      {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor}>
        <button
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive('bold') ? 'is-active' : ''}
@@ -46,7 +46,7 @@ export default () => {
        </button>
      </BubbleMenu>}

-      {editor && <FloatingMenu className="floating-menu" editor={editor}>
+      {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} editor={editor}>
        <button
          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
@@ -68,6 +68,6 @@ export default () => {
      </FloatingMenu>}

      <EditorContent editor={editor} />
-    </div>
+    </>
  )
 }
--- a/docs/src/demos/Examples/Menus/React/styles.scss
+++ b/docs/src/demos/Examples/Menus/React/styles.scss
@@ -14,7 +14,6 @@
  background-color: #0D0D0D;
  padding: 0.2rem;
  border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;

  button {
    border: none;
@@ -37,9 +36,6 @@
  background-color: #0D0D0D10;
  padding: 0.2rem;
  border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;

  button {
    border: none;
--- a/docs/src/demos/Examples/Menus/Vue/index.vue
+++ b/docs/src/demos/Examples/Menus/Vue/index.vue
@@ -1,6 +1,11 @@
 <template>
-  <div style="position: relative">
-    <bubble-menu class="bubble-menu" :editor="editor" v-if="editor">
+  <div>
+    <bubble-menu
+      class="bubble-menu"
+      :tippy-options="{ duration: 100 }"
+      :editor="editor"
+      v-if="editor"
+    >
      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
        Bold
      </button>
@@ -12,7 +17,12 @@
      </button>
    </bubble-menu>

-    <floating-menu class="floating-menu" :editor="editor" v-if="editor">
+    <floating-menu
+      class="floating-menu"
+      :tippy-options="{ duration: 100 }"
+      :editor="editor"
+      v-if="editor"
+    >
      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
        H1
      </button>
@@ -95,7 +105,6 @@ export default {
  background-color: #0D0D0D;
  padding: 0.2rem;
  border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;

  button {
    border: none;
@@ -118,9 +127,6 @@ export default {
  background-color: #0D0D0D10;
  padding: 0.2rem;
  border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;

  button {
    border: none;
--- a/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
+++ b/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
@@ -16,7 +16,7 @@ export default () => {
  })

  return (
-    <div style={{ position: 'relative' }}>
+    <>
      {editor && <BubbleMenu editor={editor}>
        <button
          onClick={() => editor.chain().focus().toggleBold().run()}
@@ -38,6 +38,6 @@ export default () => {
        </button>
      </BubbleMenu>}
      <EditorContent editor={editor} />
-    </div>
+    </>
  )
 }
--- a/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
+++ b/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative">
+  <div>
    <bubble-menu :editor="editor" v-if="editor">
      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
        bold
--- a/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
+++ b/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
@@ -17,7 +17,7 @@ export default () => {
  })

  return (
-    <div style={{ position: 'relative' }}>
+    <>
      {editor && <FloatingMenu editor={editor}>
        <button
          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
@@ -39,6 +39,6 @@ export default () => {
        </button>
      </FloatingMenu>}
      <EditorContent editor={editor} />
-    </div>
+    </>
  )
 }
--- a/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
+++ b/docs/src/demos/Extensions/FloatingMenu/Vue/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative">
+  <div>
    <floating-menu :editor="editor" v-if="editor">
      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
        h1
--- a/docs/src/docPages/api/events.md
+++ b/docs/src/docPages/api/events.md
@@ -28,9 +28,6 @@ const editor = new Editor({
  onBlur({ editor, event }) {
    // The editor isn’t focused anymore.
  },
-  onResize({ editor, event }) {
-    // The editor view has resized.
-  },
  onDestroy() {
    // The editor is being destroyed.
  },
@@ -66,10 +63,6 @@ editor.on('blur', ({ editor, event }) => {
  // The editor isn’t focused anymore.
 }

-editor.on('resize', ({ editor, event }) => {
-  // The editor view has resized.
-}
-
 editor.on('destroy', () => {
  // The editor is being destroyed.
 }
@@ -115,9 +108,6 @@ const CustomExtension = Extension.create({
  onBlur({ editor, event }) {
    // The editor isn’t focused anymore.
  },
-  onResize({ editor, event }) {
-    // The editor view has resized.
-  },
  onDestroy() {
    // The editor is being destroyed.
  },
--- a/docs/src/docPages/api/extensions/bubble-menu.md
+++ b/docs/src/docPages/api/extensions/bubble-menu.md
@@ -15,10 +15,10 @@ yarn add @tiptap/extension-bubble-menu
 ```

 ## Settings
-| Option       | Type          | Default | Description                                                          |
-| ------------ | ------------- | ------- | -------------------------------------------------------------------- |
-| element      | `HTMLElement` | `null`  | The DOM element that contains your menu.                             |
-| keepInBounds | `Boolean`     | `true`  | When enabled, it’s rendered inside the bounding box of the document. |
+| Option       | Type          | Default | Description                                                             |
+| ------------ | ------------- | ------- | ----------------------------------------------------------------------- |
+| element      | `HTMLElement` | `null`  | The DOM element that contains your menu.                                |
+| tippyOptions | `Object`      | `{}`    | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |

 ## Source code
 [packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bubble-menu/)
--- a/docs/src/docPages/api/extensions/floating-menu.md
+++ b/docs/src/docPages/api/extensions/floating-menu.md
@@ -13,9 +13,10 @@ yarn add @tiptap/extension-floating-menu
 ```

 ## Settings
-| Option       | Type          | Default   | Description                   |
-| ------------ | ------------- | --------- | ----------------------------- |
-| element      | `HTMLElement` | `null`    | The DOM element of your menu. |
+| Option       | Type          | Default | Description                                                             |
+| ------------ | ------------- | ------- | ----------------------------------------------------------------------- |
+| element      | `HTMLElement` | `null`  | The DOM element of your menu.                                           |
+| tippyOptions | `Object`      | `{}`    | [Options for tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/) |

 ## Source code
 [packages/extension-floating-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-floating-menu/)
--- a/docs/src/docPages/guide/configuration.md
+++ b/docs/src/docPages/guide/configuration.md
@@ -127,7 +127,7 @@ import { Editor, defaultExtensions } from '@tiptap/starter-kit'

 new Editor({
  extensions: [
-    ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
+    ...defaultExtensions().filter(extension => extension.name !== 'history'),
  ],
 })
 ```
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -1,6 +1,14 @@
 <template>
  <div class="app">
    <div class="app__navigation">
+      <banner-message
+        to="https://www.tiptap.dev/"
+        v-if="$route.name === 'home'"
+        color="black"
+      >
+        You’re browsing the documentation for v2.x. Click here for v1.x documentation →
+      </banner-message>
+
      <div class="app__top-bar">
        <g-link class="app__logo" to="/">
          <img src="~@/assets/images/logo.svg">
@@ -54,7 +62,7 @@
        </g-link>
      </portal>

-      <portal :to="sidebarPortal" v-if="showSidebar">
+      <portal :to="sidebarPortal">
        <nav class="app__sidebar-menu">
          <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
            <template v-if="linkGroup.link && !linkGroup.items">
@@ -124,6 +132,7 @@ query {
 import linkGroups from '@/links.yaml'
 import Icon from '@/components/Icon'
 import PageFooter from '@/components/PageFooter'
+import BannerMessage from '@/components/BannerMessage'
 // import GithubButton from 'vue-github-button'

 export default {
@@ -137,6 +146,7 @@ export default {
  components: {
    Icon,
    PageFooter,
+    BannerMessage,
    // GithubButton,
  },