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

2025-01-18 14:13:21 +08:00 · 2020-11-27 12:48:21 +01:00 · 2020-11-27 12:48:21 +01:00 · bfc04212b4
commit bfc04212b4
parent 4f92e38fdd a2b03d4cec
17 changed files with 527 additions and 92 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -46,6 +46,7 @@ module.exports = {
        'func-names': ['error', 'never'],
        'arrow-body-style': 'off',
        'max-len': 'off',
+        'vue/one-component-per-file': 'off',
        'vue/this-in-template': ['error', 'never'],
        'vue/max-attributes-per-line': ['error', {
          singleline: 3,
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@ -124,7 +124,7 @@ export default {
        }
      })
      .filter(item => {
-        return ['vue', 'jsx', 'scss'].includes(item.extension)
+        return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
      })
      .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
      .toArray()
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@ -19,6 +19,9 @@
  &__tabs {
    padding: 1rem 1.25rem 0 1.25rem;
    background-color: rgba($colorBlack, 0.9);
+    white-space: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
  }

  &__tab {
--- a/docs/src/demos/Examples/DragHandle/Component.vue
+++ b/docs/src/demos/Examples/DragHandle/Component.vue
@ -0,0 +1,43 @@
+<template>
+  <node-view-wrapper class="draggable-item">
+    <div
+      class="drag-handle"
+      contenteditable="false"
+      draggable="true"
+      data-drag-handle
+    />
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<style lang="scss" scoped>
+.draggable-item {
+  display: flex;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  background: white;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+
+  .drag-handle {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.3rem;
+    margin-right: 0.5rem;
+    cursor: grab;
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+</style>
--- a/docs/src/demos/Examples/DragHandle/DraggableItem.js
+++ b/docs/src/demos/Examples/DragHandle/DraggableItem.js
@ -0,0 +1,29 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'draggableItem',
+
+  group: 'block',
+
+  content: 'block+',
+
+  draggable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="draggable-item"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'draggable-item' }), 0]
+  },
+
+  addNodeView() {
+    return VueRenderer(Component)
+  },
+})
--- a/docs/src/demos/Examples/DragHandle/index.vue
+++ b/docs/src/demos/Examples/DragHandle/index.vue
@ -0,0 +1,51 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
+import DraggableItem from './DraggableItem.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        DraggableItem,
+      ],
+      content: `
+        <p>paragraph</p>
+        <div data-type="draggable-item">
+          <p>draggable item</p>
+        </div>
+        <div data-type="draggable-item">
+          <p>another one</p>
+          <div data-type="draggable-item">
+            <p>can be nested too</p>
+            <div data-type="draggable-item">
+              <p>but can we go deeper?</p>
+            </div>
+          </div>
+        </div>
+        <p>paragraph</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
--- a/docs/src/demos/Examples/VModel/index.vue
+++ b/docs/src/demos/Examples/VModel/index.vue
@ -25,7 +25,7 @@ export default {
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
 .content {
  padding: 1rem 0 0;

--- a/docs/src/docPages/examples/drag-handle.md
+++ b/docs/src/docPages/examples/drag-handle.md
@ -1,3 +1,3 @@
 # Drag Handle

-<demo name="Examples/DragHandle" />
+<demo name="Examples/DragHandle" />
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@ -34,6 +34,9 @@
          link: /examples/minimalist
        - title: Use with v-model
          link: /examples/v-model
+        - title: Drag handle
+          link: /examples/drag-handle
+          draft: true
        - title: Export HTML or JSON
          link: /examples/export-html-or-json
    - title: Feedback
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
  },
  "devDependencies": {
    "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@babel/core": "^7.12.7",
+    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
    "@babel/preset-env": "^7.12.7",
@ -35,9 +35,9 @@
    "@rollup/plugin-babel": "^5.2.1",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
-    "cypress": "^5.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/parser": "^4.8.2",
+    "cypress": "^6.0.0",
    "eslint": "^7.14.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-cypress": "^2.11.2",
--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@ -137,6 +137,7 @@ export default class ExtensionManager {
            getPos,
            decorations,
            HTMLAttributes,
+            extension,
          })
        }

--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@ -97,6 +97,7 @@ export type NodeViewRendererProps = {
  getPos: (() => number) | boolean,
  decorations: Decoration[],
  HTMLAttributes: { [key: string]: any },
+  extension: Node,
 }

 export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView
--- a/packages/extension-dropcursor/src/index.ts
+++ b/packages/extension-dropcursor/src/index.ts
@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/core'
 import { dropCursor } from 'prosemirror-dropcursor'

-type DropcursorOptions = {
+export interface DropcursorOptions {
  color: string | null,
  width: number | null,
  class: string | null,
--- a/packages/starter-kit/src/index.ts
+++ b/packages/starter-kit/src/index.ts
@ -1,45 +1,57 @@
-import Dropcursor from '@tiptap/extension-dropcursor'
+import Dropcursor, { DropcursorOptions } from '@tiptap/extension-dropcursor'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
+import Paragraph, { ParagraphOptions } from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import History, { HistoryOptions } from '@tiptap/extension-history'
-import Bold from '@tiptap/extension-bold'
-import Italic from '@tiptap/extension-italic'
-import Code from '@tiptap/extension-code'
+import Bold, { BoldOptions } from '@tiptap/extension-bold'
+import Italic, { ItalicOptions } from '@tiptap/extension-italic'
+import Code, { CodeOptions } from '@tiptap/extension-code'
 import CodeBlock, { CodeBlockOptions } from '@tiptap/extension-code-block'
 import Heading, { HeadingOptions } from '@tiptap/extension-heading'
-import HardBreak from '@tiptap/extension-hard-break'
-import Strike from '@tiptap/extension-strike'
-import Blockquote from '@tiptap/extension-blockquote'
-import HorizontalRule from '@tiptap/extension-horizontal-rule'
-import BulletList from '@tiptap/extension-bullet-list'
-import OrderedList from '@tiptap/extension-ordered-list'
-import ListItem from '@tiptap/extension-list-item'
+import HardBreak, { HardBreakOptions } from '@tiptap/extension-hard-break'
+import Strike, { StrikeOptions } from '@tiptap/extension-strike'
+import Blockquote, { BlockquoteOptions } from '@tiptap/extension-blockquote'
+import HorizontalRule, { HorizontalRuleOptions } from '@tiptap/extension-horizontal-rule'
+import BulletList, { BulletListOptions } from '@tiptap/extension-bullet-list'
+import OrderedList, { OrderedListOptions } from '@tiptap/extension-ordered-list'
+import ListItem, { ListItemOptions } from '@tiptap/extension-list-item'

 export function defaultExtensions(options: {
+  dropursor: DropcursorOptions,
+  paragraph: ParagraphOptions,
  history: HistoryOptions,
+  bold: BoldOptions,
+  italic: ItalicOptions,
+  code: CodeOptions,
  codeBlock: CodeBlockOptions,
  heading: HeadingOptions,
+  hardBreak: HardBreakOptions,
+  strike: StrikeOptions,
+  blockquote: BlockquoteOptions,
+  horizontalRule: HorizontalRuleOptions,
+  bulletList: BulletListOptions,
+  orderedList: OrderedListOptions,
+  listItem: ListItemOptions,
 }) {
  return [
-    Dropcursor,
+    Dropcursor.configure(options?.dropursor),
    Gapcursor,
    Document,
    History.configure(options?.history),
-    Paragraph,
+    Paragraph.configure(options?.paragraph),
    Text,
-    Bold,
-    Italic,
-    Code,
+    Bold.configure(options?.bold),
+    Italic.configure(options?.italic),
+    Code.configure(options?.code),
    CodeBlock.configure(options?.codeBlock),
    Heading.configure(options?.heading),
-    HardBreak,
-    Strike,
-    Blockquote,
-    HorizontalRule,
-    BulletList,
-    OrderedList,
-    ListItem,
+    HardBreak.configure(options?.hardBreak),
+    Strike.configure(options?.strike),
+    Blockquote.configure(options?.blockquote),
+    HorizontalRule.configure(options?.horizontalRule),
+    BulletList.configure(options?.bulletList),
+    OrderedList.configure(options?.orderedList),
+    ListItem.configure(options?.listItem),
  ]
 }
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@ -1,27 +1,153 @@
-import { NodeViewRendererProps } from '@tiptap/core'
-import { NodeView } from 'prosemirror-view'
+import { Editor, Node, NodeViewRendererProps } from '@tiptap/core'
+import { Decoration, NodeView } from 'prosemirror-view'
+import { NodeSelection } from 'prosemirror-state'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'

+interface VueRendererOptions {
+  stopEvent: ((event: Event) => boolean) | null,
+  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+}
+
 class VueNodeView implements NodeView {

  vm!: Vue

-  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
-    // eslint-disable-next-line
-    const { node, editor, getPos } = props
-    // eslint-disable-next-line
-    const { view } = editor
+  editor: Editor

+  extension!: Node
+
+  node!: ProseMirrorNode
+
+  decorations!: Decoration[]
+
+  id!: string
+
+  getPos!: any
+
+  isDragging = false
+
+  options: VueRendererOptions = {
+    stopEvent: null,
+    update: null,
+  }
+
+  constructor(component: Vue | VueConstructor, props: NodeViewRendererProps, options?: Partial<VueRendererOptions>) {
+    this.options = { ...this.options, ...options }
+    this.editor = props.editor
+    this.extension = props.extension
+    this.node = props.node
+    this.getPos = props.getPos
+    this.createUniqueId()
    this.mount(component)
  }

+  createUniqueId() {
+    this.id = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
+  }
+
+  createNodeViewWrapper() {
+    const { handleDragStart } = this
+    const dragstart = handleDragStart.bind(this)
+
+    return Vue.extend({
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement) {
+        return createElement(
+          this.as, {
+            style: {
+              whiteSpace: 'normal',
+            },
+            on: {
+              dragstart,
+            },
+          },
+          this.$slots.default,
+        )
+      },
+    })
+  }
+
+  handleDragStart(event: DragEvent) {
+    const { view } = this.editor
+    const target = (event.target as HTMLElement)
+
+    if (this.contentDOM?.contains(target)) {
+      return
+    }
+
+    // sometimes `event.target` is not the `dom` element
+    event.dataTransfer?.setDragImage(this.dom, 0, 0)
+
+    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const transaction = view.state.tr.setSelection(selection)
+
+    view.dispatch(transaction)
+  }
+
+  createNodeViewContent() {
+    const { id } = this
+    const { isEditable } = this.editor
+
+    return Vue.extend({
+      inheritAttrs: false,
+      props: {
+        as: {
+          type: String,
+          default: 'div',
+        },
+      },
+      render(createElement) {
+        return createElement(
+          this.as, {
+            style: {
+              whiteSpace: 'pre-wrap',
+            },
+            attrs: {
+              id,
+              contenteditable: isEditable,
+            },
+          },
+        )
+      },
+    })
+  }
+
  mount(component: Vue | VueConstructor) {
-    const Component = Vue.extend(component)
+    const NodeViewWrapper = this.createNodeViewWrapper()
+    const NodeViewContent = this.createNodeViewContent()
+
+    const Component = Vue
+      .extend(component)
+      .extend({
+        components: {
+          NodeViewWrapper,
+          NodeViewContent,
+        },
+      })
+
+    const props = {
+      NodeViewWrapper,
+      NodeViewContent,
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+    }

    this.vm = new Component({
+      // TODO: get parent component <editor-content>
      // parent: this.parent,
-      // propsData: props,
+      propsData: props,
    }).$mount()
  }

@ -30,15 +156,144 @@ class VueNodeView implements NodeView {
  }

  get contentDOM() {
-    return this.vm.$refs.content as Element
+    if (this.vm.$el.id === this.id) {
+      return this.vm.$el
+    }
+
+    return this.vm.$el.querySelector(`#${this.id}`)
  }

-  stopEvent() {
+  stopEvent(event: Event) {
+    if (typeof this.options.stopEvent === 'function') {
+      return this.options.stopEvent(event)
+    }
+
+    const target = (event.target as HTMLElement)
+    const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
+
+    // ignore all events from child nodes
+    if (!isInElement) {
+      return false
+    }
+
+    const { isEditable } = this.editor
+    const isDraggable = this.node.type.spec.draggable
+    const isCopyEvent = event.type === 'copy'
+    const isPasteEvent = event.type === 'paste'
+    const isCutEvent = event.type === 'cut'
+    const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
+
+    if (isDraggable && isDragEvent && !this.isDragging) {
+      event.preventDefault()
+      return false
+    }
+
+    // we have to store that dragging started
+    if (isDraggable && isEditable && !this.isDragging && event.type === 'mousedown') {
+      const dragHandle = target.closest('[data-drag-handle]')
+      const isValidDragHandle = dragHandle
+        && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
+
+      if (isValidDragHandle) {
+        this.isDragging = true
+        document.addEventListener('dragend', () => {
+          this.isDragging = false
+        }, { once: true })
+      }
+    }
+
+    // these events are handled by prosemirror
+    if (this.isDragging || isCopyEvent || isPasteEvent || isCutEvent) {
+      return false
+    }
+
    return true
  }

+  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    if (mutation.type === 'selection') {
+      if (this.node.isLeaf) {
+        return true
+      }
+
+      return false
+    }
+
+    if (!this.contentDOM) {
+      return true
+    }
+
+    const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
+      || this.contentDOM === mutation.target
+
+    return contentDOMHasChanged
+  }
+
+  destroy() {
+    this.vm.$destroy()
+  }
+
+  update(node: ProseMirrorNode, decorations: Decoration[]) {
+    if (typeof this.options.update === 'function') {
+      return this.options.update(node, decorations)
+    }
+
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (node === this.node && this.decorations === decorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+    this.updateComponentProps({ node, decorations })
+
+    return true
+  }
+
+  updateComponentProps(data: { [key: string]: any } = {}) {
+    if (!this.vm.$props) {
+      return
+    }
+
+    Object
+      .entries(data)
+      .forEach(([key, value]) => {
+        this.vm.$props[key] = value
+      })
+  }
+
+  updateAttributes(attributes: {}) {
+    if (!this.editor.view.editable) {
+      return
+    }
+
+    const { state } = this.editor.view
+    const pos = this.getPos()
+    const transaction = state.tr.setNodeMarkup(pos, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(transaction)
+  }
+
+  selectNode() {
+    this.updateComponentProps({
+      selected: true,
+    })
+  }
+
+  deselectNode() {
+    this.updateComponentProps({
+      selected: false,
+    })
+  }
+
 }

-export default function VueRenderer(component: Vue | VueConstructor) {
-  return (props: NodeViewRendererProps) => new VueNodeView(component, props) as NodeView
+export default function VueRenderer(component: Vue | VueConstructor, options?: Partial<VueRendererOptions>) {
+  return (props: NodeViewRendererProps) => new VueNodeView(component, props, options) as NodeView
 }
--- a/tests/cypress/integration/extensions/link.spec.ts
+++ b/tests/cypress/integration/extensions/link.spec.ts
@ -18,7 +18,6 @@ describe('link paste rules', () => {
    'http://thelongestdomainnameintheworldandthensomeandthensomemoreandmore.com/',
    'https://example.longtopleveldomain',
    'https://example-with-dashes.com',
-    'https://example-with-dashes.com',
  ]

  validUrls.forEach(url => {
--- a/yarn.lock
+++ b/yarn.lock
@ -23,7 +23,7 @@
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
  integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==

-"@babel/core@^7.0.0", "@babel/core@^7.11.0", "@babel/core@^7.12.7":
+"@babel/core@^7.0.0", "@babel/core@^7.11.0":
  version "7.12.7"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.7.tgz#bf55363c08c8352a37691f7216ec30090bf7e3bf"
  integrity sha512-tRKx9B53kJe8NCGGIxEQb2Bkr0riUIEuN7Sc1fxhs5H8lKlCWUvQCSNMVIB0Meva7hcbCRJ76de15KoLltdoqw==
@ -45,6 +45,28 @@
    semver "^5.4.1"
    source-map "^0.5.0"

+"@babel/core@^7.12.9":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
+  integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.5"
+    "@babel/parser" "^7.12.7"
+    "@babel/template" "^7.12.7"
+    "@babel/traverse" "^7.12.9"
+    "@babel/types" "^7.12.7"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.12.5":
  version "7.12.5"
  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de"
@ -926,6 +948,21 @@
    globals "^11.1.0"
    lodash "^4.17.19"

+"@babel/traverse@^7.12.9":
+  version "7.12.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f"
+  integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.12.7"
+    "@babel/types" "^7.12.7"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.0", "@babel/types@^7.12.1", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.4.4":
  version "7.12.7"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
@ -2352,61 +2389,61 @@
    "@types/unist" "*"
    "@types/vfile-message" "*"

-"@typescript-eslint/eslint-plugin@^4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.8.1.tgz#b362abe0ee478a6c6d06c14552a6497f0b480769"
-  integrity sha512-d7LeQ7dbUrIv5YVFNzGgaW3IQKMmnmKFneRWagRlGYOSfLJVaRbj/FrBNOBC1a3tVO+TgNq1GbHvRtg1kwL0FQ==
+"@typescript-eslint/eslint-plugin@^4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.8.2.tgz#cf9102ec800391caa574f589ffe0623cca1d9308"
+  integrity sha512-gQ06QLV5l1DtvYtqOyFLXD9PdcILYqlrJj2l+CGDlPtmgLUzc1GpqciJFIRvyfvgLALpnxYINFuw+n9AZhPBKQ==
  dependencies:
-    "@typescript-eslint/experimental-utils" "4.8.1"
-    "@typescript-eslint/scope-manager" "4.8.1"
+    "@typescript-eslint/experimental-utils" "4.8.2"
+    "@typescript-eslint/scope-manager" "4.8.2"
    debug "^4.1.1"
    functional-red-black-tree "^1.0.1"
    regexpp "^3.0.0"
    semver "^7.3.2"
    tsutils "^3.17.1"

-"@typescript-eslint/experimental-utils@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.8.1.tgz#27275c20fa4336df99ebcf6195f7d7aa7aa9f22d"
-  integrity sha512-WigyLn144R3+lGATXW4nNcDJ9JlTkG8YdBWHkDlN0lC3gUGtDi7Pe3h5GPvFKMcRz8KbZpm9FJV9NTW8CpRHpg==
+"@typescript-eslint/experimental-utils@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.8.2.tgz#8909a5732f19329cf5ef0c39766170476bff5e50"
+  integrity sha512-hpTw6o6IhBZEsQsjuw/4RWmceRyESfAiEzAEnXHKG1X7S5DXFaZ4IO1JO7CW1aQ604leQBzjZmuMI9QBCAJX8Q==
  dependencies:
    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.8.1"
-    "@typescript-eslint/types" "4.8.1"
-    "@typescript-eslint/typescript-estree" "4.8.1"
+    "@typescript-eslint/scope-manager" "4.8.2"
+    "@typescript-eslint/types" "4.8.2"
+    "@typescript-eslint/typescript-estree" "4.8.2"
    eslint-scope "^5.0.0"
    eslint-utils "^2.0.0"

-"@typescript-eslint/parser@^4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.8.1.tgz#4fe2fbdbb67485bafc4320b3ae91e34efe1219d1"
-  integrity sha512-QND8XSVetATHK9y2Ltc/XBl5Ro7Y62YuZKnPEwnNPB8E379fDsvzJ1dMJ46fg/VOmk0hXhatc+GXs5MaXuL5Uw==
+"@typescript-eslint/parser@^4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.8.2.tgz#78dccbe5124de2b8dea2d4c363dee9f769151ca8"
+  integrity sha512-u0leyJqmclYr3KcXOqd2fmx6SDGBO0MUNHHAjr0JS4Crbb3C3d8dwAdlazy133PLCcPn+aOUFiHn72wcuc5wYw==
  dependencies:
-    "@typescript-eslint/scope-manager" "4.8.1"
-    "@typescript-eslint/types" "4.8.1"
-    "@typescript-eslint/typescript-estree" "4.8.1"
+    "@typescript-eslint/scope-manager" "4.8.2"
+    "@typescript-eslint/types" "4.8.2"
+    "@typescript-eslint/typescript-estree" "4.8.2"
    debug "^4.1.1"

-"@typescript-eslint/scope-manager@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.8.1.tgz#e343c475f8f1d15801b546cb17d7f309b768fdce"
-  integrity sha512-r0iUOc41KFFbZdPAdCS4K1mXivnSZqXS5D9oW+iykQsRlTbQRfuFRSW20xKDdYiaCoH+SkSLeIF484g3kWzwOQ==
+"@typescript-eslint/scope-manager@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.8.2.tgz#a18388c63ae9c17adde519384f539392f2c4f0d9"
+  integrity sha512-qHQ8ODi7mMin4Sq2eh/6eu03uVzsf5TX+J43xRmiq8ujng7ViQSHNPLOHGw/Wr5dFEoxq/ubKhzClIIdQy5q3g==
  dependencies:
-    "@typescript-eslint/types" "4.8.1"
-    "@typescript-eslint/visitor-keys" "4.8.1"
+    "@typescript-eslint/types" "4.8.2"
+    "@typescript-eslint/visitor-keys" "4.8.2"

-"@typescript-eslint/types@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.8.1.tgz#23829c73c5fc6f4fcd5346a7780b274f72fee222"
-  integrity sha512-ave2a18x2Y25q5K05K/U3JQIe2Av4+TNi/2YuzyaXLAsDx6UZkz1boZ7nR/N6Wwae2PpudTZmHFXqu7faXfHmA==
+"@typescript-eslint/types@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.8.2.tgz#c862dd0e569d9478eb82d6aee662ea53f5661a36"
+  integrity sha512-z1/AVcVF8ju5ObaHe2fOpZYEQrwHyZ7PTOlmjd3EoFeX9sv7UekQhfrCmgUO7PruLNfSHrJGQvrW3Q7xQ8EoAw==

-"@typescript-eslint/typescript-estree@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.1.tgz#7307e3f2c9e95df7daa8dc0a34b8c43b7ec0dd32"
-  integrity sha512-bJ6Fn/6tW2g7WIkCWh3QRlaSU7CdUUK52shx36/J7T5oTQzANvi6raoTsbwGM11+7eBbeem8hCCKbyvAc0X3sQ==
+"@typescript-eslint/typescript-estree@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.8.2.tgz#eeec34707d8577600fb21661b5287226cc8b3bed"
+  integrity sha512-HToGNwI6fekH0dOw3XEVESUm71Onfam0AKin6f26S2FtUmO7o3cLlWgrIaT1q3vjB3wCTdww3Dx2iGq5wtUOCg==
  dependencies:
-    "@typescript-eslint/types" "4.8.1"
-    "@typescript-eslint/visitor-keys" "4.8.1"
+    "@typescript-eslint/types" "4.8.2"
+    "@typescript-eslint/visitor-keys" "4.8.2"
    debug "^4.1.1"
    globby "^11.0.1"
    is-glob "^4.0.1"
@ -2414,12 +2451,12 @@
    semver "^7.3.2"
    tsutils "^3.17.1"

-"@typescript-eslint/visitor-keys@4.8.1":
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.1.tgz#794f68ee292d1b2e3aa9690ebedfcb3a8c90e3c3"
-  integrity sha512-3nrwXFdEYALQh/zW8rFwP4QltqsanCDz4CwWMPiIZmwlk9GlvBeueEIbq05SEq4ganqM0g9nh02xXgv5XI3PeQ==
+"@typescript-eslint/visitor-keys@4.8.2":
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.8.2.tgz#62cd3fbbbf65f8eccfbe6f159eb1b84a243a3f77"
+  integrity sha512-Vg+/SJTMZJEKKGHW7YC21QxgKJrSbxoYYd3MEUGtW7zuytHuEcksewq0DUmo4eh/CTNrVJGSdIY9AtRb6riWFw==
  dependencies:
-    "@typescript-eslint/types" "4.8.1"
+    "@typescript-eslint/types" "4.8.2"
    eslint-visitor-keys "^2.0.0"

 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
@ -4897,10 +4934,10 @@ cyclist@^1.0.1:
  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=

-cypress@^5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.6.0.tgz#6781755c3ddfd644ce3179fcd7389176c0c82280"
-  integrity sha512-cs5vG3E2JLldAc16+5yQxaVRLLqMVya5RlrfPWkC72S5xrlHFdw7ovxPb61s4wYweROKTyH01WQc2PFzwwVvyQ==
+cypress@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-6.0.0.tgz#57050773c61e8fe1e5c9871cc034c616fcacded9"
+  integrity sha512-A/w9S15xGxX5UVeAQZacKBqaA0Uqlae9e5WMrehehAdFiLOZj08IgSVZOV8YqA9OH9Z0iBOnmsEkK3NNj43VrA==
  dependencies:
    "@cypress/listr-verbose-renderer" "^0.4.1"
    "@cypress/request" "^2.88.5"