add precommit hook for linting and automatic eslint fixes + update es…

…lint 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 'iframe-resizer/js/iframeResizer.contentWindow'
-import iframeResize from 'iframe-resizer/js/iframeResizer'
-import './style.css'
+import App from './index.vue'
 
 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 langSCSS from 'shiki/languages/scss.tmLanguage.json'
 import langTSX from 'shiki/languages/tsx.tmLanguage.json'
-import langVueHTML from 'shiki/languages/vue-html.tmLanguage.json'
+import langTS from 'shiki/languages/typescript.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 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,8 +1,10 @@
-import React from 'react'
-import { useEditor, EditorContent } from '@tiptap/react'
+import './styles.scss'
+
+import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
 import { content } from '../content.js'
-import './styles.scss'
 
 const MenuBar = ({ editor }) => {
   if (!editor) {

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,19 +1,19 @@
-import React from 'react'
-import { useEditor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
+// 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 CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import CodeBlockComponent from './CodeBlockComponent'
-
+import { EditorContent, ReactNodeViewRenderer, useEditor } from '@tiptap/react'
 // load all highlight.js languages
 import lowlight from 'lowlight'
+import React from 'react'
 
-// 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 CodeBlockComponent from './CodeBlockComponent'
 
 const MenuBar = ({ editor }) => {
   if (!editor) {

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 CodeBlockComponent from './CodeBlockComponent.vue'
-
+import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 // 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,6 +1,8 @@
+import './MenuBar.scss'
+
 import React, { Fragment } from 'react'
+
 import MenuItem from './MenuItem'
-import './MenuBar.scss'
 
 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, {
-  useState, useCallback, useEffect,
-} from 'react'
-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 './styles.scss'
+
+import { HocuspocusProvider } from '@hocuspocus/provider'
 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 StarterKit from '@tiptap/starter-kit'
+import { HocuspocusProvider } from '@hocuspocus/provider'
+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,10 +1,11 @@
+import './MentionList.scss'
+
 import React, {
-  useState,
-  useEffect,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useState,
 } from 'react'
-import './MentionList.scss'
 
 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 { useEditor, EditorContent } from '@tiptap/react'
+import './styles.scss'
+
+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 Mention from '@tiptap/extension-mention'
+import { EditorContent, useEditor } from '@tiptap/react'
+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 Mention from '@tiptap/extension-mention'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
 import suggestion from './suggestion'
 
 export default {