add precommit hook for linting and automatic eslint fixes + update eslint packages (#2862)

* chore: add precommit hook for eslint fixes, fix linting issues
* chore: add eslint import sort plugin

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
         'html',
         'cypress',
         '@typescript-eslint',
+        'simple-import-sort',
       ],
       env: {
         'cypress/globals': true,
@@ -90,6 +91,8 @@ module.exports = {
         '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
       },
     },
   ],

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:fix

demos/preview/Demo.vue

@@ -87,6 +87,7 @@
 
 <script>
 import { getDebugJSON } from '@tiptap/core'
+
 import DemoFrame from './DemoFrame.vue'
 import Shiki from './Shiki.vue'
 

demos/preview/Shiki.vue

@@ -4,11 +4,12 @@
 </template>
 
 <script>
-import Worker from './shiki.worker?worker'
 // this import is a bugfix
 // otherwise the `onig.wasm` file is missing in the dist folder
 import 'shiki/dist/onig.wasm?url'
 
+import Worker from './shiki.worker?worker'
+
 export default {
   props: {
     code: {

demos/preview/index.js

@@ -1,11 +1,13 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import './style.css'
+
+import { demos } from '@demos'
+import iframeResize from 'iframe-resizer/js/iframeResizer'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import App from './index.vue'
+
 import Demo from './Demo.vue'
-import { demos } from '@demos'
+import App from './index.vue'
-import 'iframe-resizer/js/iframeResizer.contentWindow'
-import iframeResize from 'iframe-resizer/js/iframeResizer'
-import './style.css'
 
 const routes = demos
   .map(({ name, tabs }) => {

demos/preview/shiki.worker.js

@@ -1,15 +1,15 @@
 import * as shiki from 'shiki'
 import onigasm from 'shiki/dist/onig.wasm?url'
-import theme from 'shiki/themes/material-darker.json'
+import langCSS from 'shiki/languages/css.tmLanguage.json'
 import langHTML from 'shiki/languages/html.tmLanguage.json'
 import langJS from 'shiki/languages/javascript.tmLanguage.json'
 import langJSX from 'shiki/languages/jsx.tmLanguage.json'
-import langTS from 'shiki/languages/typescript.tmLanguage.json'
-import langTSX from 'shiki/languages/tsx.tmLanguage.json'
-import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
-import langVue from 'shiki/languages/vue.tmLanguage.json'
-import langCSS from 'shiki/languages/css.tmLanguage.json'
 import langSCSS from 'shiki/languages/scss.tmLanguage.json'
+import langTSX from 'shiki/languages/tsx.tmLanguage.json'
+import langTS from 'shiki/languages/typescript.tmLanguage.json'
+import langVue from 'shiki/languages/vue.tmLanguage.json'
+import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
+import theme from 'shiki/themes/material-darker.json'
 
 let highlighter = null
 

demos/setup/js.ts

@@ -1,7 +1,8 @@
 import 'iframe-resizer/js/iframeResizer.contentWindow'
-import { debug } from './helper'
 import './style.scss'
 
+import { debug } from './helper'
+
 export default function init(name: string, source: any) {
   // @ts-ignore
   window.source = source

demos/setup/react.ts

@@ -1,8 +1,10 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import './style.scss'
+
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import 'iframe-resizer/js/iframeResizer.contentWindow'
+
 import { debug, splitName } from './helper'
-import './style.scss'
 
 export default function init(name: string, source: any) {
   // @ts-ignore

demos/setup/vue.ts

@@ -1,8 +1,10 @@
-import { createApp } from 'vue'
 import 'iframe-resizer/js/iframeResizer.contentWindow'
-import { debug, splitName } from './helper'
 import './style.scss'
 
+import { createApp } from 'vue'
+
+import { debug, splitName } from './helper'
+
 export default function init(name: string, source: any) {
   // @ts-ignore
   window.source = source

demos/src/Examples/AutolinkValidation/React/index.jsx

@@ -1,10 +1,9 @@
 import './styles.scss'
 
-import React from 'react'
-
 import Link from '@tiptap/extension-link'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/AutolinkValidation/Vue/index.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/Book/React/index.jsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import { content } from '../content.js'
 import './styles.scss'
 
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import { content } from '../content.js'
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null

demos/src/Examples/Book/Vue/index.vue

@@ -68,8 +68,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { content } from '../content.js'
 
 export default {

demos/src/Examples/CSSModules/React/index.jsx

@@ -1,9 +1,8 @@
 import './styles.scss'
 
-import React from 'react'
-
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
 
 import styles from './index.module.css'
 

demos/src/Examples/CSSModules/Vue/index.vue

@@ -68,8 +68,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import styles from './index.module.css'
 
 export default {

demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 import './CodeBlockComponent.scss'
 
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
+import React from 'react'
+
 export default ({ node: { attrs: { language: defaultLanguage } }, updateAttributes, extension }) => (
   <NodeViewWrapper className="code-block">
     <select contentEditable={false} defaultValue={defaultLanguage} onChange={event => updateAttributes({ language: event.target.value })}>

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import CodeBlockComponent from './CodeBlockComponent'
-
-// load all highlight.js languages
-import lowlight from 'lowlight'
-
 // load specific languages only
 // import lowlight from 'lowlight/lib/core'
 // import javascript from 'highlight.js/lib/languages/javascript'
 // lowlight.registerLanguage('javascript', javascript)
 import './styles.scss'
 
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { EditorContent, ReactNodeViewRenderer, useEditor } from '@tiptap/react'
+// load all highlight.js languages
+import lowlight from 'lowlight'
+import React from 'react'
+
+import CodeBlockComponent from './CodeBlockComponent'
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null

demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -8,16 +8,16 @@
 </template>
 
 <script>
-import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
-import CodeBlockComponent from './CodeBlockComponent.vue'
-
 // load all highlight.js languages
 import lowlight from 'lowlight'
 
+import CodeBlockComponent from './CodeBlockComponent.vue'
+
 // load specific languages only
 // import lowlight from 'lowlight/lib/core'
 // import javascript from 'highlight.js/lib/languages/javascript'

demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx

@@ -1,7 +1,9 @@
-import React, { Fragment } from 'react'
-import MenuItem from './MenuItem'
 import './MenuBar.scss'
 
+import React, { Fragment } from 'react'
+
+import MenuItem from './MenuItem'
+
 export default ({ editor }) => {
   const items = [
     {

demos/src/Examples/CollaborativeEditing/React/MenuItem.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import './MenuItem.scss'
+
+import React from 'react'
 import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
 
 export default ({

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -1,18 +1,21 @@
-import React, {
+import './styles.scss'
-  useState, useCallback, useEffect,
+
-} from 'react'
+import { HocuspocusProvider } from '@hocuspocus/provider'
-import * as Y from 'yjs'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import TaskList from '@tiptap/extension-task-list'
-import TaskItem from '@tiptap/extension-task-item'
-import Highlight from '@tiptap/extension-highlight'
 import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import { HocuspocusProvider } from '@hocuspocus/provider'
+import Highlight from '@tiptap/extension-highlight'
+import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React, {
+  useCallback, useEffect,
+  useState,
+} from 'react'
+import * as Y from 'yjs'
+
 import MenuBar from './MenuBar'
-import './styles.scss'
 
 const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D']
 const rooms = ['rooms.30', 'rooms.31', 'rooms.32']

demos/src/Examples/CollaborativeEditing/Vue/index.vue

@@ -21,16 +21,17 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import { HocuspocusProvider } from '@hocuspocus/provider'
-import StarterKit from '@tiptap/starter-kit'
+import CharacterCount from '@tiptap/extension-character-count'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import TaskList from '@tiptap/extension-task-list'
-import TaskItem from '@tiptap/extension-task-item'
 import Highlight from '@tiptap/extension-highlight'
-import CharacterCount from '@tiptap/extension-character-count'
+import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import * as Y from 'yjs'
-import { HocuspocusProvider } from '@hocuspocus/provider'
+
 import MenuBar from './MenuBar.vue'
 
 const getRandomElement = list => {

demos/src/Examples/Community/React/MentionList.jsx

@@ -1,11 +1,12 @@
-import React, {
-  useState,
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-} from 'react'
 import './MentionList.scss'
 
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react'
+
 export const MentionList = forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
 

demos/src/Examples/Community/React/index.jsx

@@ -1,12 +1,14 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
+import CharacterCount from '@tiptap/extension-character-count'
 import Document from '@tiptap/extension-document'
+import Mention from '@tiptap/extension-mention'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CharacterCount from '@tiptap/extension-character-count'
+import { EditorContent, useEditor } from '@tiptap/react'
-import Mention from '@tiptap/extension-mention'
+import React from 'react'
+
 import suggestion from './suggestion'
-import './styles.scss'
 
 export default () => {
   const limit = 280

demos/src/Examples/Community/React/suggestion.js

@@ -1,6 +1,5 @@
-import tippy from 'tippy.js'
-
 import { ReactRenderer } from '@tiptap/react'
+import tippy from 'tippy.js'
 
 import { MentionList } from './MentionList'
 

demos/src/Examples/Community/Vue/index.vue

@@ -37,12 +37,13 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import CharacterCount from '@tiptap/extension-character-count'
 import Document from '@tiptap/extension-document'
+import Mention from '@tiptap/extension-mention'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CharacterCount from '@tiptap/extension-character-count'
+import { Editor, EditorContent } from '@tiptap/vue-3'
-import Mention from '@tiptap/extension-mention'
+
 import suggestion from './suggestion'
 
 export default {

demos/src/Examples/Community/Vue/suggestion.js

@@ -1,6 +1,5 @@
-import tippy from 'tippy.js'
-
 import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
 
 import MentionList from './MentionList.vue'
 

demos/src/Examples/CustomDocument/React/index.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
 import Document from '@tiptap/extension-document'
 import Placeholder from '@tiptap/extension-placeholder'
+import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import './styles.scss'
+import React from 'react'
 
 const CustomDocument = Document.extend({
   content: 'heading block*',

demos/src/Examples/CustomDocument/Vue/index.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Placeholder from '@tiptap/extension-placeholder'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 const CustomDocument = Document.extend({
   content: 'heading block*',

demos/src/Examples/Default/React/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import './styles.scss'
 
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null

demos/src/Examples/Default/Vue/index.vue

@@ -68,8 +68,8 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/Drawing/Vue/Component.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
-import { v4 as uuid } from 'uuid'
 import * as d3 from 'd3'
+import { v4 as uuid } from 'uuid'
 
 const getRandomElement = list => {
   return list[Math.floor(Math.random() * list.length)]

demos/src/Examples/Drawing/Vue/Paper.js

@@ -1,4 +1,5 @@
-import { VueNodeViewRenderer, Node, mergeAttributes } from '@tiptap/vue-3'
+import { mergeAttributes, Node, VueNodeViewRenderer } from '@tiptap/vue-3'
+
 import Component from './Component.vue'
 
 export default Node.create({

demos/src/Examples/Drawing/Vue/index.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import Paper from './Paper'
 
 export default {

demos/src/Examples/Formatting/React/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import TextAlign from '@tiptap/extension-text-align'
-import Highlight from '@tiptap/extension-highlight'
 import './styles.scss'
 
+import Highlight from '@tiptap/extension-highlight'
+import TextAlign from '@tiptap/extension-text-align'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
 const MenuBar = ({ editor }) => {
   if (!editor) {
     return null

demos/src/Examples/Formatting/Vue/index.vue

@@ -41,10 +41,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import TextAlign from '@tiptap/extension-text-align'
 import Highlight from '@tiptap/extension-highlight'
+import TextAlign from '@tiptap/extension-text-align'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/Images/React/index.jsx

@@ -1,13 +1,12 @@
 import './styles.scss'
 
-import React from 'react'
-
 import Document from '@tiptap/extension-document'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import Image from '@tiptap/extension-image'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/Images/Vue/index.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
+import Dropcursor from '@tiptap/extension-dropcursor'
+import Image from '@tiptap/extension-image'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import Image from '@tiptap/extension-image'
+import { Editor, EditorContent } from '@tiptap/vue-3'
-import Dropcursor from '@tiptap/extension-dropcursor'
 
 export default {
   components: {

demos/src/Examples/InteractivityComponent/React/Component.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { NodeViewWrapper } from '@tiptap/react'
+import React from 'react'
 
 export default props => {
   const increase = () => {

demos/src/Examples/InteractivityComponent/React/Extension.js

@@ -1,5 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 import { ReactNodeViewRenderer } from '@tiptap/react'
+
 import Component from './Component.jsx'
 
 export default Node.create({

demos/src/Examples/InteractivityComponent/React/index.jsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import ReactComponent from './Extension.js'
 import './styles.scss'
 
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import ReactComponent from './Extension.js'
+
 export default () => {
   const editor = useEditor({
     extensions: [

demos/src/Examples/InteractivityComponent/Vue/Component.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/InteractivityComponent/Vue/Extension.js

@@ -1,5 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
 import Component from './Component.vue'
 
 export default Node.create({

demos/src/Examples/InteractivityComponent/Vue/index.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import VueComponent from './Extension.js'
 
 export default {

demos/src/Examples/InteractivityComponentContent/React/Component.jsx

@@ -1,5 +1,5 @@
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
 import React from 'react'
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 
 export default () => {
   return (

demos/src/Examples/InteractivityComponentContent/React/Extension.js

@@ -1,5 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 import { ReactNodeViewRenderer } from '@tiptap/react'
+
 import Component from './Component.jsx'
 
 export default Node.create({

demos/src/Examples/InteractivityComponentContent/React/index.jsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import ReactComponent from './Extension.js'
 import './styles.scss'
 
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import ReactComponent from './Extension.js'
+
 export default () => {
   const editor = useEditor({
     extensions: [

demos/src/Examples/InteractivityComponentContent/Vue/Component.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/InteractivityComponentContent/Vue/Extension.js

@@ -1,5 +1,6 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
 import Component from './Component.vue'
 
 export default Node.create({

demos/src/Examples/InteractivityComponentContent/Vue/index.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import VueComponent from './Extension.js'
 
 export default {

demos/src/Examples/MarkdownShortcuts/React/index.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
-import StarterKit from '@tiptap/starter-kit'
 import Highlight from '@tiptap/extension-highlight'
 import Typography from '@tiptap/extension-typography'
-import './styles.scss'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/MarkdownShortcuts/Vue/index.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 import Highlight from '@tiptap/extension-highlight'
 import Typography from '@tiptap/extension-typography'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/Menus/React/index.jsx

@@ -1,12 +1,13 @@
-import React from 'react'
+import './styles.scss'
+
 import {
-  useEditor,
-  EditorContent,
   BubbleMenu,
+  EditorContent,
   FloatingMenu,
+  useEditor,
 } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import './styles.scss'
+import React from 'react'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/Menus/Vue/index.vue

@@ -37,13 +37,13 @@
 </template>
 
 <script>
+import StarterKit from '@tiptap/starter-kit'
 import {
+  BubbleMenu,
   Editor,
   EditorContent,
-  BubbleMenu,
   FloatingMenu,
 } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 
 export default {
   components: {

demos/src/Examples/Minimal/React/index.jsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import './styles.scss'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/Minimal/Vue/index.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Examples/Savvy/React/ColorHighlighter.ts

@@ -1,5 +1,6 @@
 import { Extension } from '@tiptap/core'
 import { Plugin } from 'prosemirror-state'
+
 import findColors from './findColors'
 
 export const ColorHighlighter = Extension.create({

demos/src/Examples/Savvy/React/findColors.ts

@@ -1,5 +1,5 @@
-import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Node } from 'prosemirror-model'
+import { Decoration, DecorationSet } from 'prosemirror-view'
 
 export default function (doc: Node): DecorationSet {
   const hexColor = /(#[0-9a-f]{3,6})\b/gi

demos/src/Examples/Savvy/React/index.jsx

@@ -1,13 +1,15 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
+import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import Code from '@tiptap/extension-code'
 import Typography from '@tiptap/extension-typography'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
+
 import { ColorHighlighter } from './ColorHighlighter'
 import { SmilieReplacer } from './SmilieReplacer'
-import './styles.scss'
 
 export default () => {
   const editor = useEditor({

demos/src/Examples/Savvy/Vue/ColorHighlighter.ts

@@ -1,5 +1,6 @@
 import { Extension } from '@tiptap/core'
 import { Plugin } from 'prosemirror-state'
+
 import findColors from './findColors'
 
 export const ColorHighlighter = Extension.create({

demos/src/Examples/Savvy/Vue/findColors.ts

@@ -1,5 +1,5 @@
-import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Node } from 'prosemirror-model'
+import { Decoration, DecorationSet } from 'prosemirror-view'
 
 export default function (doc: Node): DecorationSet {
   const hexColor = /(#[0-9a-f]{3,6})\b/ig

demos/src/Examples/Savvy/Vue/index.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import Code from '@tiptap/extension-code'
 import Typography from '@tiptap/extension-typography'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { ColorHighlighter } from './ColorHighlighter'
 import { SmilieReplacer } from './SmilieReplacer'
 

demos/src/Examples/Tables/React/index.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
-import StarterKit from '@tiptap/starter-kit'
 import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
-import './styles.scss'
+import TableRow from '@tiptap/extension-table-row'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
 
 const CustomTableCell = TableCell.extend({
   addAttributes() {

demos/src/Examples/Tables/Vue/index.vue

@@ -59,12 +59,12 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 const CustomTableCell = TableCell.extend({
   addAttributes() {

demos/src/Examples/Tasks/React/index.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
-import './styles.scss'
+import TaskList from '@tiptap/extension-task-list'
+import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
 
 const CustomDocument = Document.extend({
   content: 'taskList',

demos/src/Examples/Tasks/Vue/index.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 const CustomDocument = Document.extend({
   content: 'taskList',

demos/src/Experiments/All/Vue/index.vue

@@ -70,43 +70,42 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Blockquote from '@tiptap/extension-blockquote'
 import Bold from '@tiptap/extension-bold'
 import BulletList from '@tiptap/extension-bullet-list'
 import Code from '@tiptap/extension-code'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Color from '@tiptap/extension-color'
 import Document from '@tiptap/extension-document'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import Gapcursor from '@tiptap/extension-gapcursor'
 import HardBreak from '@tiptap/extension-hard-break'
 import Heading from '@tiptap/extension-heading'
+import Highlight from '@tiptap/extension-highlight'
 import History from '@tiptap/extension-history'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import Image from '@tiptap/extension-image'
 import Italic from '@tiptap/extension-italic'
+import Link from '@tiptap/extension-link'
 import ListItem from '@tiptap/extension-list-item'
+import Mention from '@tiptap/extension-mention'
 import OrderedList from '@tiptap/extension-ordered-list'
 import Paragraph from '@tiptap/extension-paragraph'
+import Placeholder from '@tiptap/extension-placeholder'
 import Strike from '@tiptap/extension-strike'
-import Text from '@tiptap/extension-text'
-import Underline from '@tiptap/extension-underline'
-import Superscript from '@tiptap/extension-superscript'
 import Subscript from '@tiptap/extension-subscript'
-import Link from '@tiptap/extension-link'
+import Superscript from '@tiptap/extension-superscript'
-import Mention from '@tiptap/extension-mention'
 import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
-import Image from '@tiptap/extension-image'
+import TableRow from '@tiptap/extension-table-row'
-import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
-import Placeholder from '@tiptap/extension-placeholder'
+import TaskList from '@tiptap/extension-task-list'
+import Text from '@tiptap/extension-text'
 import TextAlign from '@tiptap/extension-text-align'
 import TextStyle from '@tiptap/extension-text-style'
-import Color from '@tiptap/extension-color'
+import Underline from '@tiptap/extension-underline'
-import Highlight from '@tiptap/extension-highlight'
+import { Editor, EditorContent } from '@tiptap/vue-3'
-
 import lowlight from 'lowlight'
 
 export default {

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationPlugin.ts

@@ -1,5 +1,6 @@
-import * as Y from 'yjs'
 import { Plugin, PluginKey } from 'prosemirror-state'
+import * as Y from 'yjs'
+
 import { AnnotationState } from './AnnotationState'
 
 export const AnnotationPluginKey = new PluginKey('annotation')

demos/src/Experiments/CollaborationAnnotation/Vue/extension/AnnotationState.ts

@@ -1,10 +1,11 @@
-import * as Y from 'yjs'
 import { EditorState, Transaction } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
-import { ySyncPluginKey, relativePositionToAbsolutePosition, absolutePositionToRelativePosition } from 'y-prosemirror'
+import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, ySyncPluginKey } from 'y-prosemirror'
-import { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation'
+import * as Y from 'yjs'
-import { AnnotationPluginKey } from './AnnotationPlugin'
+
 import { AnnotationItem } from './AnnotationItem'
+import { AnnotationPluginKey } from './AnnotationPlugin'
+import { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation'
 
 export interface AnnotationStateOptions {
   HTMLAttributes: {
@@ -91,6 +92,7 @@ export class AnnotationState {
         return
       }
 
+      // eslint-disable-next-line
       console.log(`[${this.options.instance}] Decoration.inline()`, from, to, HTMLAttributes, { id, data: annotation.data })
 
       if (from === to) {
@@ -110,6 +112,7 @@ export class AnnotationState {
     const action = transaction.getMeta(AnnotationPluginKey) as AddAnnotationAction | UpdateAnnotationAction | DeleteAnnotationAction
 
     if (action && action.type) {
+      // eslint-disable-next-line
       console.log(`[${this.options.instance}] action: ${action.type}`)
 
       if (action.type === 'addAnnotation') {
@@ -136,6 +139,7 @@ export class AnnotationState {
     const ystate = ySyncPluginKey.getState(state)
 
     if (ystate.isChangeOrigin) {
+      // eslint-disable-next-line
       console.log(`[${this.options.instance}] isChangeOrigin: true → createDecorations`)
       this.createDecorations(state)
 
@@ -143,6 +147,7 @@ export class AnnotationState {
     }
 
     // Use ProseMirror to update positions
+    // eslint-disable-next-line
     console.log(`[${this.options.instance}] isChangeOrigin: false → ProseMirror mapping`)
     this.decorations = this.decorations.map(transaction.mapping, transaction.doc)
 

demos/src/Experiments/CollaborationAnnotation/Vue/extension/collaboration-annotation.ts

@@ -1,5 +1,6 @@
-import * as Y from 'yjs'
 import { Extension } from '@tiptap/core'
+import * as Y from 'yjs'
+
 import { AnnotationPlugin, AnnotationPluginKey } from './AnnotationPlugin'
 
 export interface AddAnnotationAction {
@@ -81,6 +82,7 @@ export const CollaborationAnnotation = Extension.create<AnnotationOptions>({
     const map = getMapFromOptions(this.options)
 
     map.observe(() => {
+      // eslint-disable-next-line
       console.log(`[${this.options.instance}] map updated  → createDecorations`)
 
       const transaction = this.editor.state.tr.setMeta(AnnotationPluginKey, {

demos/src/Experiments/CollaborationAnnotation/Vue/index.vue

@@ -32,14 +32,15 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import Bold from '@tiptap/extension-bold'
+import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import Collaboration from '@tiptap/extension-collaboration'
+import { Editor, EditorContent } from '@tiptap/vue-3'
-import Bold from '@tiptap/extension-bold'
-import Heading from '@tiptap/extension-heading'
 import * as Y from 'yjs'
+
 import CollaborationAnnotation from './extension'
 
 export default {

demos/src/Experiments/Commands/Vue/index.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import Commands from './commands'
 import suggestion from './suggestion'
 

demos/src/Experiments/Commands/Vue/suggestion.js

@@ -1,6 +1,5 @@
-import tippy from 'tippy.js'
-
 import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
 
 import CommandsList from './CommandsList.vue'
 

demos/src/Experiments/Embeds/Vue/index.vue

@@ -9,8 +9,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import Iframe from './iframe'
 
 export default {

demos/src/Experiments/ExtensionStorage/React/index.jsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
+
 import { CustomExtension } from './CustomExtension'
-import './styles.scss'
 
 export default () => {
   const editor = useEditor({

demos/src/Experiments/ExtensionStorage/Vue/index.vue

@@ -4,10 +4,11 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { CustomExtension } from './CustomExtension'
 
 export default {

demos/src/Experiments/Figure/Vue/figure.ts

@@ -1,8 +1,8 @@
 import {
+  findChildrenInRange,
+  mergeAttributes,
   Node,
   nodeInputRule,
-  mergeAttributes,
-  findChildrenInRange,
   Tracker,
 } from '@tiptap/core'
 

demos/src/Experiments/Figure/Vue/index.vue

@@ -23,9 +23,10 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { Figure } from './figure'
 
 export default {

demos/src/Experiments/GenericFigure/Vue/figcaption.ts

@@ -1,4 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 
 export const Figcaption = Node.create({
   name: 'figcaption',

demos/src/Experiments/GenericFigure/Vue/figure.ts

@@ -1,4 +1,4 @@
-import { Node, mergeAttributes } from '@tiptap/core'
+import { mergeAttributes, Node } from '@tiptap/core'
 import { Plugin } from 'prosemirror-state'
 
 export const Figure = Node.create({

demos/src/Experiments/GenericFigure/Vue/index.vue

@@ -17,15 +17,16 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import Table from '@tiptap/extension-table'
-import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
-import { Figure } from './figure'
+import TableRow from '@tiptap/extension-table-row'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { Figcaption } from './figcaption'
+import { Figure } from './figure'
 
 const ImageFigure = Figure.extend({
   name: 'capturedImage',

demos/src/Experiments/GlobalDragHandle/Vue/index.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import DragHandle from './DragHandle.js'
 
 export default {
@@ -37,6 +38,7 @@ export default {
         <pre>code</pre>
       `,
       onUpdate: () => {
+        // eslint-disable-next-line
         console.log(this.editor.getHTML())
       },
     })

demos/src/Experiments/Linter/Vue/extension/Linter.ts

@@ -1,7 +1,8 @@
 import { Extension } from '@tiptap/core'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
 import { Node as ProsemirrorNode } from 'prosemirror-model'
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
 import LinterPlugin, { Result as Issue } from './LinterPlugin'
 
 interface IconDivElement extends HTMLDivElement {
@@ -26,10 +27,12 @@ function runAllLinterPlugins(doc: ProsemirrorNode, plugins: Array<typeof LinterP
   }).flat()
 
   results.forEach(issue => {
-    decorations.push(Decoration.inline(issue.from, issue.to, {
+    decorations.push(
+      Decoration.inline(issue.from, issue.to, {
         class: 'problem',
       }),
-    Decoration.widget(issue.from, renderIcon(issue)))
+      Decoration.widget(issue.from, renderIcon(issue)),
+    )
   })
 
   return DecorationSet.create(doc, decorations)

demos/src/Experiments/Linter/Vue/extension/index.ts

@@ -4,5 +4,5 @@ export * from './Linter'
 export default Linter
 
 export { BadWords } from './plugins/BadWords'
-export { Punctuation } from './plugins/Punctuation'
 export { HeadingLevel } from './plugins/HeadingLevel'
+export { Punctuation } from './plugins/Punctuation'

demos/src/Experiments/Linter/Vue/extension/plugins/BadWords.ts

@@ -15,7 +15,8 @@ export class BadWords extends LinterPlugin {
       if (matches) {
         this.record(
           `Try not to say '${matches[0]}'`,
-          position + matches.index, position + matches.index + matches[0].length,
+          position + matches.index,
+          position + matches.index + matches[0].length,
         )
       }
     })

demos/src/Experiments/Linter/Vue/extension/plugins/HeadingLevel.ts

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view'
+
 import LinterPlugin, { Result as Issue } from '../LinterPlugin'
 
 export class HeadingLevel extends LinterPlugin {
@@ -17,9 +18,12 @@ export class HeadingLevel extends LinterPlugin {
         const { level } = node.attrs
 
         if (lastHeadLevel != null && level > lastHeadLevel + 1) {
-          this.record(`Heading too small (${level} under ${lastHeadLevel})`,
+          this.record(
-            position + 1, position + 1 + node.content.size,
+            `Heading too small (${level} under ${lastHeadLevel})`,
-            this.fixHeader(lastHeadLevel + 1))
+            position + 1,
+            position + 1 + node.content.size,
+            this.fixHeader(lastHeadLevel + 1),
+          )
         }
         lastHeadLevel = level
       }

demos/src/Experiments/Linter/Vue/extension/plugins/Punctuation.ts

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view'
+
 import LinterPlugin, { Result as Issue } from '../LinterPlugin'
 
 export class Punctuation extends LinterPlugin {
@@ -8,7 +9,8 @@ export class Punctuation extends LinterPlugin {
     return function ({ state, dispatch }: EditorView, issue: Issue) {
       dispatch(
         state.tr.replaceWith(
-          issue.from, issue.to,
+          issue.from,
+          issue.to,
           state.schema.text(replacement),
         ),
       )
@@ -30,7 +32,8 @@ export class Punctuation extends LinterPlugin {
       if (matches) {
         this.record(
           'Suspicious spacing around punctuation',
-          position + matches.index, position + matches.index + matches[0].length,
+          position + matches.index,
+          position + matches.index + matches[0].length,
           this.fix(`${matches[1]} `),
         )
       }

demos/src/Experiments/Linter/Vue/index.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
-import Text from '@tiptap/extension-text'
-import Paragraph from '@tiptap/extension-paragraph'
 import Heading from '@tiptap/extension-heading'
-import Linter, { BadWords, Punctuation, HeadingLevel } from './extension'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+import Linter, { BadWords, HeadingLevel, Punctuation } from './extension'
 
 export default {
   components: {

demos/src/Experiments/MultipleEditors/Vue/index.vue

@@ -28,16 +28,16 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import Bold from '@tiptap/extension-bold'
+import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Bold from '@tiptap/extension-bold'
-import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
-import Collaboration from '@tiptap/extension-collaboration'
+import TaskList from '@tiptap/extension-task-list'
-import * as Y from 'yjs'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import { yDocToProsemirrorJSON } from 'y-prosemirror'
+import * as Y from 'yjs'
 
 const ParagraphDocument = Document.extend({
   content: 'paragraph',

demos/src/Experiments/TrailingNode/Vue/index.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import { TrailingNode } from './trailing-node'
 
 export default {

demos/src/Experiments/TrailingNode/Vue/trailing-node.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core'
-import { PluginKey, Plugin } from 'prosemirror-state'
+import { Plugin, PluginKey } from 'prosemirror-state'
 
 // @ts-ignore
 function nodeEqualsType({ types, node }) {

demos/src/Extensions/BubbleMenu/React/index.jsx

@@ -1,8 +1,9 @@
-import React from 'react'
-import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
 import './styles.scss'
 
+import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
 export default () => {
   const editor = useEditor({
     extensions: [

demos/src/Extensions/BubbleMenu/Vue/index.vue

@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
+import { BubbleMenu, Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Extensions/CharacterCount/React/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
+import CharacterCount from '@tiptap/extension-character-count'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CharacterCount from '@tiptap/extension-character-count'
+import { EditorContent, useEditor } from '@tiptap/react'
-import './styles.scss'
+import React from 'react'
 
 const limit = 280
 

demos/src/Extensions/CharacterCount/Vue/index.vue

@@ -11,11 +11,11 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import CharacterCount from '@tiptap/extension-character-count'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import CharacterCount from '@tiptap/extension-character-count'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 export default {
   components: {

demos/src/Extensions/Collaboration/React/index.jsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
+import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Collaboration from '@tiptap/extension-collaboration'
 import Placeholder from '@tiptap/extension-placeholder'
-import * as Y from 'yjs'
+import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
 import { WebrtcProvider } from 'y-webrtc'
-import './styles.scss'
+import * as Y from 'yjs'
 
 const ydoc = new Y.Doc()
 

demos/src/Extensions/Collaboration/Vue/index.vue

@@ -3,14 +3,14 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
+import Collaboration from '@tiptap/extension-collaboration'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
-import Collaboration from '@tiptap/extension-collaboration'
 import Placeholder from '@tiptap/extension-placeholder'
-import * as Y from 'yjs'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 import { WebrtcProvider } from 'y-webrtc'
+import * as Y from 'yjs'
 
 export default {
   components: {

demos/src/Extensions/CollaborationCursor/React/index.jsx

@@ -1,14 +1,15 @@
-import React from 'react'
+import './styles.scss'
-import { useEditor, EditorContent } from '@tiptap/react'
+
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import * as Y from 'yjs'
+import Document from '@tiptap/extension-document'
-import { WebrtcProvider } from 'y-webrtc'
+import Paragraph from '@tiptap/extension-paragraph'
 import Placeholder from '@tiptap/extension-placeholder'
-import './styles.scss'
+import Text from '@tiptap/extension-text'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
+import { WebrtcProvider } from 'y-webrtc'
+import * as Y from 'yjs'
 
 const ydoc = new Y.Doc()
 const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)

demos/src/Extensions/CollaborationCursor/Vue/index.vue

@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import Document from '@tiptap/extension-document'
-import Paragraph from '@tiptap/extension-paragraph'
-import Text from '@tiptap/extension-text'
 import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
-import * as Y from 'yjs'
+import Document from '@tiptap/extension-document'
-import { WebrtcProvider } from 'y-webrtc'
+import Paragraph from '@tiptap/extension-paragraph'
 import Placeholder from '@tiptap/extension-placeholder'
+import Text from '@tiptap/extension-text'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { WebrtcProvider } from 'y-webrtc'
+import * as Y from 'yjs'
 
 export default {
   components: {