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/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 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,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, {
-  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,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 { 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 {

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 { useEditor, EditorContent } from '@tiptap/react'
+import './styles.scss'
+
 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 { v4 as uuid } from 'uuid'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
 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 Dropcursor from '@tiptap/extension-dropcursor'
+import { Editor, EditorContent } from '@tiptap/vue-3'
 
 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 { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
+import './styles.scss'
+
 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 { 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 './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 { useEditor, EditorContent } from '@tiptap/react'
+import './styles.scss'
+
+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 { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
+import './styles.scss'
+
 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 { 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 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',