style: import sorts

README.md

@@ -66,8 +66,8 @@ import 'bytemd/dist/index.css'
 ### React
 
 ```js
-import { Editor, Viewer } from '@bytemd/react'
 import gfm from '@bytemd/plugin-gfm'
+import { Editor, Viewer } from '@bytemd/react'
 
 const plugins = [
   gfm(),
@@ -97,8 +97,8 @@ const App = () => {
 </template>
 
 <script>
-import { Editor, Viewer } from '@bytemd/vue'
 import gfm from '@bytemd/plugin-gfm'
+import { Editor, Viewer } from '@bytemd/vue'
 
 const plugins = [
   gfm(),
@@ -122,8 +122,8 @@ export default {
 ### Vanilla JS
 
 ```js
-import { Editor, Viewer } from 'bytemd'
 import gfm from '@bytemd/plugin-gfm'
+import { Editor, Viewer } from 'bytemd'
 
 const plugins = [
   gfm(),

examples/react-nextjs/pages/index.tsx

@@ -1,8 +1,8 @@
+import styles from '../styles/Home.module.css'
+import pluginGfm from '@bytemd/plugin-gfm'
+import { Editor } from '@bytemd/react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import { Editor } from '@bytemd/react'
-import pluginGfm from '@bytemd/plugin-gfm'
-import styles from '../styles/Home.module.css'
 import { useMemo, useState } from 'react'
 
 const Home: NextPage = () => {

examples/react/src/App.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
 import App from './App'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
 
 test('renders learn react link', () => {
   render(<App />)

examples/react/src/App.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from 'react'
-import { Editor } from '@bytemd/react'
+import './App.css'
 import pluginGfm from '@bytemd/plugin-gfm'
+import { Editor } from '@bytemd/react'
 import 'bytemd/dist/index.css'
-import './App.css'
+import React, { useMemo, useState } from 'react'
 
 function App() {
   const [value, setValue] = useState('')

examples/react/src/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 ReactDOM.render(
   <React.StrictMode>

examples/vue/src/main.ts

@@ -1,5 +1,5 @@
-import Vue from 'vue'
 import App from './App.vue'
+import Vue from 'vue'
 
 Vue.config.productionTip = false
 

examples/vue3/src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
 import App from './App.vue'
+import { createApp } from 'vue'
 
 createApp(App).mount('#app')

examples/vue3/vite.config.ts

@@ -1,7 +1,6 @@
+import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'url'
-
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({

package.json

@@ -22,6 +22,7 @@
     "@sveltejs/vite-plugin-svelte": "1.0.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "^3.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
     "@types/fs-extra": "^9.0.13",
     "@types/lodash-es": "^4.17.6",
     "@types/resolve": "^1.20.2",

packages/bytemd/src/editor.svelte

@@ -1,32 +1,30 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { Root, Element } from 'hast'
-  import type { VFile } from 'vfile'
-  import type { Editor, KeyMap } from 'codemirror'
-  import type {
-    BytemdEditorContext,
-    BytemdPlugin,
-    EditorProps as Props,
-  } from './types'
-
-  import { onMount, createEventDispatcher, onDestroy, tick } from 'svelte'
-  import { debounce, throttle } from 'lodash-es'
+  import en from '../locales/en.json'
   import {
     createCodeMirror,
     createEditorUtils,
     findStartIndex,
     getBuiltinActions,
     handleImageUpload,
   } from './editor'
-  import * as icons from '@icon-park/svg'
-
+  import Help from './help.svelte'
+  import Status from './status.svelte'
+  import Toc from './toc.svelte'
   import Toolbar from './toolbar.svelte'
+  import type {
+    BytemdEditorContext,
+    BytemdPlugin,
+    EditorProps as Props,
+  } from './types'
   import Viewer from './viewer.svelte'
-  import Toc from './toc.svelte'
-  import Status from './status.svelte'
-  import Help from './help.svelte'
-  import en from '../locales/en.json'
+  import * as icons from '@icon-park/svg'
+  import type { Editor, KeyMap } from 'codemirror'
+  import type { Root, Element } from 'hast'
+  import { debounce, throttle } from 'lodash-es'
+  import { onMount, createEventDispatcher, onDestroy, tick } from 'svelte'
+  import type { VFile } from 'vfile'
 
   export let value: Props['value'] = ''
   export let plugins: NonNullable<Props['plugins']> = []

packages/bytemd/src/editor.ts

@@ -1,24 +1,23 @@
-import type { Editor, Position } from 'codemirror'
-import type CodeMirror from 'codemirror'
 import type {
   BytemdPlugin,
   BytemdAction,
   EditorProps,
   BytemdLocale,
   BytemdEditorContext,
 } from './types'
-
+import * as icons from '@icon-park/svg'
+import type { Editor, Position } from 'codemirror'
+import type CodeMirror from 'codemirror'
 import factory from 'codemirror-ssr'
 import usePlaceholder from 'codemirror-ssr/addon/display/placeholder.js'
+import useContinuelist from 'codemirror-ssr/addon/edit/continuelist.js'
 import useOverlay from 'codemirror-ssr/addon/mode/overlay.js'
-import useXml from 'codemirror-ssr/mode/xml/xml.js'
-import useMarkdown from 'codemirror-ssr/mode/markdown/markdown.js'
 import useGfm from 'codemirror-ssr/mode/gfm/gfm.js'
-import useYaml from 'codemirror-ssr/mode/yaml/yaml.js'
+import useMarkdown from 'codemirror-ssr/mode/markdown/markdown.js'
+import useXml from 'codemirror-ssr/mode/xml/xml.js'
 import useYamlFrontmatter from 'codemirror-ssr/mode/yaml-frontmatter/yaml-frontmatter.js'
-import useContinuelist from 'codemirror-ssr/addon/edit/continuelist.js'
+import useYaml from 'codemirror-ssr/mode/yaml/yaml.js'
 import selectFiles from 'select-files'
-import * as icons from '@icon-park/svg'
 
 export function createCodeMirror() {
   const codemirror = factory()

packages/bytemd/src/status.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { BytemdLocale } from './types'
-
   import { createEventDispatcher } from 'svelte'
   // @ts-ignore
   import wordCount from 'word-count'

packages/bytemd/src/toc.svelte

@@ -1,9 +1,8 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { Root, Element } from 'hast'
   import type { BytemdLocale } from './types'
-
+  import type { Root, Element } from 'hast'
   import { createEventDispatcher } from 'svelte'
   import { visit } from 'unist-util-visit'
 

packages/bytemd/src/toolbar.svelte

@@ -1,12 +1,11 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { DelegateInstance } from 'tippy.js'
   import type { BytemdEditorContext, BytemdAction, BytemdLocale } from './types'
-
+  import * as icons from '@icon-park/svg'
   import { createEventDispatcher, onMount } from 'svelte'
+  import type { DelegateInstance } from 'tippy.js'
   import { delegate } from 'tippy.js'
-  import * as icons from '@icon-park/svg'
 
   const dispatch = createEventDispatcher()
   let toolbar: HTMLElement

packages/bytemd/src/types.ts

@@ -1,11 +1,12 @@
-import type { Processor } from 'unified'
-import type { Schema } from 'hast-util-sanitize'
-import type { VFile } from 'vfile'
+import type { EditorUtils } from './editor'
 import type { Editor, EditorConfiguration } from 'codemirror'
 import type CodeMirror from 'codemirror'
-import type { EditorUtils } from './editor'
+import type { Schema } from 'hast-util-sanitize'
 import type { Image } from 'mdast'
 import type { Options } from 'remark-rehype'
+import type { Processor } from 'unified'
+import type { VFile } from 'vfile'
+
 export interface BytemdLocale {
   write: string
   preview: string

packages/bytemd/src/utils.ts

@@ -1,13 +1,13 @@
-import { unified } from 'unified'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
+import type { ViewerProps } from './types'
+import { defaultSchema } from 'hast-util-sanitize'
+import type { Schema } from 'hast-util-sanitize'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
 import rehypeStringify from 'rehype-stringify'
-import { defaultSchema } from 'hast-util-sanitize'
-import type { Schema } from 'hast-util-sanitize'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { unified } from 'unified'
 import type { Processor } from 'unified'
-import type { ViewerProps } from './types'
 
 const schemaStr = JSON.stringify(defaultSchema)
 

packages/bytemd/src/viewer.svelte

@@ -1,19 +1,18 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { Root } from 'hast'
-  import type { VFile } from 'vfile'
-  import type { Plugin } from 'unified'
   import type { BytemdPlugin, ViewerProps as Props } from './types'
-
+  import { getProcessor } from './utils'
+  import type { Root } from 'hast'
   import {
     tick,
     onDestroy,
     onMount,
     createEventDispatcher,
     afterUpdate,
   } from 'svelte'
-  import { getProcessor } from './utils'
+  import type { Plugin } from 'unified'
+  import type { VFile } from 'vfile'
 
   const dispatch = createEventDispatcher<{
     hast: { hast: Root; file: VFile }

packages/bytemd/test/editor.test.ts

@@ -1,7 +1,6 @@
 /// <reference types="tsdv/vitest/globals" />
-
-import '@testing-library/jest-dom'
 import { Editor } from '../src'
+import '@testing-library/jest-dom'
 import {
   render,
   cleanup,

packages/bytemd/test/viewer.test.ts

@@ -1,7 +1,6 @@
 /// <reference types="tsdv/vitest/globals" />
-
-import '@testing-library/jest-dom'
 import { Viewer } from '../src'
+import '@testing-library/jest-dom'
 import { render, act } from '@testing-library/svelte'
 
 function stripComment(str: string) {

packages/bytemd/tsdv.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'tsdv'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { getAlias, sveltePreprocessor } from '../../scripts/build.mjs'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'tsdv'
 
 // nullish coalescing in es2020
 export default defineConfig({

packages/plugin-breaks/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to support breaks
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import breaks from '@bytemd/plugin-breaks'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-frontmatter/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to parse frontmatter
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import frontmatter from '@bytemd/plugin-frontmatter'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-frontmatter/src/index.ts

@@ -1,6 +1,6 @@
 import type { BytemdPlugin } from 'bytemd'
-import remarkFrontmatter from 'remark-frontmatter'
 import { load } from 'js-yaml'
+import remarkFrontmatter from 'remark-frontmatter'
 
 export interface BytemdPluginFrontmatterOptions {
   onError?(err: any): void

packages/plugin-gemoji/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to support Gemoji shortcodes
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import gemoji from '@bytemd/plugin-gemoji'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-gfm/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to support GFM (autolink literals, strikethrough, tables, tasklist
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import gfm from '@bytemd/plugin-gfm'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-gfm/src/index.ts

@@ -1,7 +1,7 @@
-import type { BytemdPlugin } from 'bytemd'
 import en from './locales/en.json'
-import remarkGfm, { Options } from 'remark-gfm'
 import * as icons from '@icon-park/svg'
+import type { BytemdPlugin } from 'bytemd'
+import remarkGfm, { Options } from 'remark-gfm'
 
 type Locale = {
   strike: string

packages/plugin-highlight-ssr/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to highlight code blocks (SSR compatible)
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import highlight from '@bytemd/plugin-highlight-ssr'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-highlight/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to highlight code blocks
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import highlight from '@bytemd/plugin-highlight'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,

packages/plugin-math-ssr/README.md

@@ -7,8 +7,8 @@ ByteMD plugin to support math formula (SSR compatible)
 ## Usage
 
 ```js
-import { Editor } from 'bytemd'
 import math from '@bytemd/plugin-math-ssr'
+import { Editor } from 'bytemd'
 
 new Editor({
   target: document.body,