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

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 Mention from '@tiptap/extension-mention'
+import Superscript from '@tiptap/extension-superscript'
 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 TaskList from '@tiptap/extension-task-list'
+import TableRow from '@tiptap/extension-table-row'
 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 Highlight from '@tiptap/extension-highlight'
-
+import Underline from '@tiptap/extension-underline'
+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 { AddAnnotationAction, DeleteAnnotationAction, UpdateAnnotationAction } from './collaboration-annotation'
-import { AnnotationPluginKey } from './AnnotationPlugin'
+import { absolutePositionToRelativePosition, relativePositionToAbsolutePosition, ySyncPluginKey } from 'y-prosemirror'
+import * as Y from 'yjs'
+
 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 Bold from '@tiptap/extension-bold'
-import Heading from '@tiptap/extension-heading'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 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 { useEditor, EditorContent } from '@tiptap/react'
+import './styles.scss'
+
 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, {
-      class: 'problem',
-    }),
-    Decoration.widget(issue.from, renderIcon(issue)))
+    decorations.push(
+      Decoration.inline(issue.from, issue.to, {
+        class: 'problem',
+      }),
+      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})`,
-            position + 1, position + 1 + node.content.size,
-            this.fixHeader(lastHeadLevel + 1))
+          this.record(
+            `Heading too small (${level} under ${lastHeadLevel})`,
+            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 * as Y from 'yjs'
+import TaskList from '@tiptap/extension-task-list'
+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 }) {