diff --git a/README.md b/README.md
index 25021e3d8..ac53f91f1 100644
--- a/README.md
+++ b/README.md
@@ -44,11 +44,27 @@ import 'bytemd/dist/index.css'
 
 ```svelte
 <script>
-  import { Editor, Viewer } from 'bytemd'
+  import { Editor, Viewer, builtInPlugins } from 'bytemd'
   import gfm from '@bytemd/plugin-gfm'
 
   let value
   const plugins = [
+    builtInPlugins.head(),
+    builtInPlugins.bold(),
+    builtInPlugins.italic(),
+    builtInPlugins.quote(),
+    builtInPlugins.link(),
+    builtInPlugins.code(),
+    builtInPlugins.codeBlock(),
+    builtInPlugins.ul(),
+    builtInPlugins.ol(),
+    builtInPlugins.hr(),
+    builtInPlugins.source(),
+    builtInPlugins.fullscreen(),
+    builtInPlugins.preview(),
+    builtInPlugins.write(),
+    builtInPlugins.help(),
+    builtInPlugins.toc(),
     gfm(),
     // Add more plugins here
   ]
@@ -67,9 +83,25 @@ import 'bytemd/dist/index.css'
 
 ```js
 import gfm from '@bytemd/plugin-gfm'
-import { Editor, Viewer } from '@bytemd/react'
+import { Editor, Viewer, builtInPlugins } from '@bytemd/react'
 
 const plugins = [
+  builtInPlugins.head(),
+  builtInPlugins.bold(),
+  builtInPlugins.italic(),
+  builtInPlugins.quote(),
+  builtInPlugins.link(),
+  builtInPlugins.code(),
+  builtInPlugins.codeBlock(),
+  builtInPlugins.ul(),
+  builtInPlugins.ol(),
+  builtInPlugins.hr(),
+  builtInPlugins.source(),
+  builtInPlugins.fullscreen(),
+  builtInPlugins.preview(),
+  builtInPlugins.write(),
+  builtInPlugins.help(),
+  builtInPlugins.toc(),
   gfm(),
   // Add more plugins here
 ]
@@ -98,9 +130,25 @@ const App = () => {
 
 <script>
 import gfm from '@bytemd/plugin-gfm'
-import { Editor, Viewer } from '@bytemd/vue'
+import { Editor, Viewer, builtInPlugins } from '@bytemd/vue'
 
 const plugins = [
+  builtInPlugins.head(),
+  builtInPlugins.bold(),
+  builtInPlugins.italic(),
+  builtInPlugins.quote(),
+  builtInPlugins.link(),
+  builtInPlugins.code(),
+  builtInPlugins.codeBlock(),
+  builtInPlugins.ul(),
+  builtInPlugins.ol(),
+  builtInPlugins.hr(),
+  builtInPlugins.source(),
+  builtInPlugins.fullscreen(),
+  builtInPlugins.preview(),
+  builtInPlugins.write(),
+  builtInPlugins.help(),
+  builtInPlugins.toc(),
   gfm(),
   // Add more plugins here
 ]
@@ -123,9 +171,25 @@ export default {
 
 ```js
 import gfm from '@bytemd/plugin-gfm'
-import { Editor, Viewer } from 'bytemd'
+import { Editor, Viewer, builtInPlugins } from 'bytemd'
 
 const plugins = [
+  builtInPlugins.head(),
+  builtInPlugins.bold(),
+  builtInPlugins.italic(),
+  builtInPlugins.quote(),
+  builtInPlugins.link(),
+  builtInPlugins.code(),
+  builtInPlugins.codeBlock(),
+  builtInPlugins.ul(),
+  builtInPlugins.ol(),
+  builtInPlugins.hr(),
+  builtInPlugins.source(),
+  builtInPlugins.fullscreen(),
+  builtInPlugins.preview(),
+  builtInPlugins.write(),
+  builtInPlugins.help(),
+  builtInPlugins.toc(),
   gfm(),
   // Add more plugins here
 ]
diff --git a/packages/bytemd/src/builtin-plugins.ts b/packages/bytemd/src/builtin-plugins.ts
new file mode 100644
index 000000000..f72bd409f
--- /dev/null
+++ b/packages/bytemd/src/builtin-plugins.ts
@@ -0,0 +1,553 @@
+import en from './locales/en.json'
+import { icons } from './icons'
+import type {
+  BytemdPlugin,
+  BytemdLocale,
+  BytemdEditorContext,
+  EditorProps,
+} from './types'
+import { ActionPosition } from './types'
+import selectFiles from 'select-files'
+
+export interface BytemdBuiltinPluginOptions {
+  locale?: Partial<BytemdLocale>
+  icon?: string
+  position?: ActionPosition
+}
+
+const getShortcutWithPrefix = (key: string, shift = false) => {
+  const shiftPrefix = shift ? 'Shift-' : ''
+  const CmdPrefix =
+    typeof navigator !== 'undefined' && /Mac/.test(navigator.platform)
+      ? 'Cmd-'
+      : 'Ctrl-'
+  return shiftPrefix + CmdPrefix + key
+}
+
+export async function handleImageUpload(
+  { editor, appendBlock, codemirror }: BytemdEditorContext,
+  uploadImages: NonNullable<EditorProps['uploadImages']>,
+  files: File[]
+) {
+  const images = await uploadImages(files)
+  const pos = appendBlock(
+    images
+      .map(({ url, alt, title }, i) => {
+        alt = alt ?? files[i].name
+        return `![${alt}](${url}${title ? ` "${title}"` : ''})`
+      })
+      .join('\n\n')
+  )
+  editor.setSelection(pos, codemirror.Pos(pos.line + images.length * 2 - 2))
+  editor.focus()
+}
+
+export interface HeadIconOptions {
+  icon?: {
+    h?: string
+    h1?: string
+    h2?: string
+    h3?: string
+    h4?: string
+    h5?: string
+    h6?: string
+  }
+}
+
+export function head({
+  locale: _locale,
+  icon,
+  position,
+}: Omit<BytemdBuiltinPluginOptions, 'icon'> &
+  HeadIconOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        icon: icon?.h ?? icons.H,
+        position: position ?? ActionPosition.LEFT,
+        handler: {
+          type: 'dropdown',
+          actions: [1, 2, 3, 4, 5, 6].map((level) => ({
+            title: locale[`h${level}` as keyof BytemdLocale],
+            icon: [
+              icon?.h1 ?? icons.H1,
+              icon?.h2 ?? icons.H2,
+              icon?.h3 ?? icons.H3,
+              icon?.h4 ?? icons.LevelFourTitle,
+              icon?.h5 ?? icons.LevelFiveTitle,
+              icon?.h6 ?? icons.LevelSixTitle,
+            ][level - 1],
+            cheatsheet:
+              level <= 3
+                ? `${'#'.repeat(level)} ${locale.headingText}`
+                : undefined,
+            handler: {
+              type: 'action',
+              click({ replaceLines, editor }) {
+                replaceLines((line) => {
+                  line = line.trim().replace(/^#*/, '').trim()
+                  line = '#'.repeat(level) + ' ' + line
+                  return line
+                })
+                editor.focus()
+              },
+            },
+          })),
+        },
+      },
+    ],
+  }
+}
+
+export function bold({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.bold,
+        icon: icon ?? icons.TextBold,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `**${locale.boldText}**`,
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('B'),
+          click({ wrapText, editor }) {
+            wrapText('**')
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function italic({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.italic,
+        icon: icon ?? icons.TextItalic,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `*${locale.italicText}*`,
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('I'),
+          click({ wrapText, editor }) {
+            wrapText('*')
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function quote({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.quote,
+        icon: icon ?? icons.Quote,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `> ${locale.quotedText}`,
+        handler: {
+          type: 'action',
+          click({ replaceLines, editor }) {
+            replaceLines((line) => '> ' + line)
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function link({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.link,
+        icon: icon ?? icons.LinkOne,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `[${locale.linkText}](url)`,
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('K'),
+          click({ editor, wrapText, codemirror }) {
+            wrapText('[', '](url)')
+            const cursor = editor.getCursor()
+            editor.setSelection(
+              codemirror.Pos(cursor.line, cursor.ch + 2),
+              codemirror.Pos(cursor.line, cursor.ch + 5)
+            )
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function image({
+  locale: _locale,
+  icon,
+  position,
+  uploadImages,
+}: BytemdBuiltinPluginOptions & {
+  uploadImages: EditorProps['uploadImages']
+}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.image,
+        icon: icon ?? icons.Pic,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `![${locale.imageAlt}](url "${locale.imageTitle}")`,
+        handler: uploadImages
+          ? {
+              type: 'action',
+              shortcut: getShortcutWithPrefix('I', true),
+              async click(ctx) {
+                const fileList = await selectFiles({
+                  accept: 'image/*',
+                  multiple: true,
+                })
+
+                if (fileList?.length) {
+                  await handleImageUpload(
+                    ctx,
+                    uploadImages,
+                    Array.from(fileList)
+                  )
+                }
+              },
+            }
+          : undefined,
+      },
+    ],
+  }
+}
+
+export function code({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.code,
+        icon: icon ?? icons.Code,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: '`' + locale.codeText + '`',
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('K', true),
+          click({ wrapText, editor }) {
+            wrapText('`')
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function codeBlock({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.codeBlock,
+        icon: icon ?? icons.CodeBrackets,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: '```' + locale.codeLang + '↵',
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('C', true),
+          click({ editor, appendBlock, codemirror }) {
+            const pos = appendBlock('```js\n```')
+            editor.setSelection(
+              codemirror.Pos(pos.line, 3),
+              codemirror.Pos(pos.line, 5)
+            )
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function ul({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.ul,
+        icon: icon ?? icons.ListTwo,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `- ${locale.ulItem}`,
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('U', true),
+          click({ replaceLines, editor }) {
+            replaceLines((line) => '- ' + line)
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function ol({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.ol,
+        icon: icon ?? icons.OrderedList,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: `1. ${locale.olItem}`,
+        handler: {
+          type: 'action',
+          shortcut: getShortcutWithPrefix('O', true),
+          click({ replaceLines, editor }) {
+            replaceLines((line, i) => `${i + 1}. ${line}`)
+            editor.focus()
+          },
+        },
+      },
+    ],
+  }
+}
+
+export function hr({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.hr,
+        icon: icon ?? icons.DividingLine,
+        position: position ?? ActionPosition.LEFT,
+        cheatsheet: '---',
+      },
+    ],
+  }
+}
+
+export function toc({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        position: position ?? ActionPosition.RIGHT,
+        create({ dispatch, sidebar }) {
+          const active = sidebar === 'toc'
+          return {
+            title: active ? locale.closeToc : locale.toc,
+            icon: icon ?? icons.AlignTextLeftOne,
+            handler: {
+              type: 'action',
+              click() {
+                dispatch('click', 'toc')
+              },
+            },
+            active,
+          }
+        },
+      },
+    ],
+  }
+}
+
+export function help({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        position: position ?? ActionPosition.RIGHT,
+        create({ dispatch, sidebar }) {
+          const active = sidebar === 'help'
+          return {
+            title: active ? locale.closeHelp : locale.help,
+            icon: icon ?? icons.Helpcenter,
+            handler: {
+              type: 'action',
+              click() {
+                dispatch('click', 'help')
+              },
+            },
+            active: active,
+          }
+        },
+      },
+    ],
+  }
+}
+
+export function write({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        position: position ?? ActionPosition.RIGHT,
+        create({ dispatch, activeTab, split }) {
+          const active = activeTab === 'write'
+          return {
+            title: active ? locale.exitWriteOnly : locale.writeOnly,
+            icon: icon ?? icons.LeftExpand,
+            handler: {
+              type: 'action',
+              click() {
+                dispatch('tab', 'write')
+              },
+            },
+            active: active,
+            hidden: !split,
+          }
+        },
+      },
+    ],
+  }
+}
+
+export function preview({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        position: position ?? ActionPosition.RIGHT,
+        create({ dispatch, activeTab, split }) {
+          const active = activeTab === 'preview'
+          return {
+            title: active ? locale.exitPreviewOnly : locale.previewOnly,
+            icon: icon ?? icons.RightExpand,
+            handler: {
+              type: 'action',
+              click() {
+                dispatch('tab', 'preview')
+              },
+            },
+            active: active,
+            hidden: !split,
+          }
+        },
+      },
+    ],
+  }
+}
+
+export interface FullscreenIconOptions {
+  icon?: {
+    on?: string
+    off?: string
+  }
+}
+
+export function fullscreen({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions & FullscreenIconOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        position: position ?? ActionPosition.RIGHT,
+        create({ dispatch, fullscreen }) {
+          return {
+            title: fullscreen ? locale.exitFullscreen : locale.fullscreen,
+            icon: fullscreen
+              ? icon?.on ?? icons.OffScreen
+              : icon?.off ?? icons.FullScreen,
+            handler: {
+              type: 'action',
+              click() {
+                dispatch('click', 'fullscreen')
+              },
+            },
+          }
+        },
+      },
+    ],
+  }
+}
+
+export function source({
+  locale: _locale,
+  icon,
+  position,
+}: BytemdBuiltinPluginOptions = {}): BytemdPlugin {
+  const locale = { ...en, ..._locale } as BytemdLocale
+  return {
+    actions: [
+      {
+        title: locale.source,
+        icon: icon ?? icons.GithubOne,
+        position: position ?? ActionPosition.RIGHT,
+        handler: {
+          type: 'action',
+          click() {
+            window.open('https://github.com/bytedance/bytemd')
+          },
+        },
+      },
+    ],
+  }
+}
diff --git a/packages/bytemd/src/editor.svelte b/packages/bytemd/src/editor.svelte
index 5077f270a..9e4d6e3b8 100644
--- a/packages/bytemd/src/editor.svelte
+++ b/packages/bytemd/src/editor.svelte
@@ -6,9 +6,9 @@
     createCodeMirror,
     createEditorUtils,
     findStartIndex,
-    getBuiltinActions,
-    handleImageUpload,
+    getActions,
   } from './editor'
+  import { handleImageUpload } from './builtin-plugins'
   import Help from './help.svelte'
   import { icons } from './icons'
   import Status from './status.svelte'
@@ -20,7 +20,7 @@
     EditorProps as Props,
   } from './types'
   import Viewer from './viewer.svelte'
-  import type { Editor, KeyMap } from 'codemirror'
+  import type { Editor } from 'codemirror'
   import type { Root, Element } from 'hast'
   import { debounce, throttle } from 'lodash-es'
   import { onMount, createEventDispatcher, onDestroy, tick } from 'svelte'
@@ -42,7 +42,7 @@
   $: mergedLocale = { ...en, ...locale }
   const dispatch = createEventDispatcher<{ change: { value: string } }>()
 
-  $: actions = getBuiltinActions(mergedLocale, plugins, uploadImages)
+  $: actions = getActions(plugins)
   $: split = mode === 'split' || (mode === 'auto' && containerWidth >= 800)
   $: ((_) => {
     // reset active tab
@@ -98,28 +98,14 @@
   })()
 
   let cbs: ReturnType<NonNullable<BytemdPlugin['editorEffect']>>[] = []
-  let keyMap: KeyMap = {}
 
   function on() {
     // console.log('on', plugins);
     cbs = plugins.map((p) => p.editorEffect?.(context))
-
-    keyMap = {}
-    // TODO: nested shortcuts
-    actions.leftActions.forEach(({ handler }) => {
-      if (handler?.type === 'action' && handler.shortcut) {
-        keyMap[handler.shortcut] = () => {
-          handler.click(context)
-        }
-      }
-    })
-    editor.addKeyMap(keyMap)
   }
   function off() {
     // console.log('off', plugins);
     cbs.forEach((cb) => cb && cb())
-
-    editor?.removeKeyMap(keyMap) // onDestroy runs at SSR, optional chaining here
   }
 
   let debouncedValue = value
@@ -349,9 +335,9 @@
     {activeTab}
     {sidebar}
     {fullscreen}
-    rightAfferentActions={actions.rightActions}
+    {editor}
+    {plugins}
     locale={mergedLocale}
-    actions={actions.leftActions}
     on:key={(e) => {
       editor.setOption('keyMap', e.detail)
       editor.focus()
diff --git a/packages/bytemd/src/editor.ts b/packages/bytemd/src/editor.ts
index 14a7934f9..5dd3bd48c 100644
--- a/packages/bytemd/src/editor.ts
+++ b/packages/bytemd/src/editor.ts
@@ -1,10 +1,7 @@
-import { icons } from './icons'
 import type {
   BytemdPlugin,
   BytemdAction,
-  EditorProps,
-  BytemdLocale,
-  BytemdEditorContext,
+  BytemdActionFactory,
 } from './types'
 import type { Editor, Position } from 'codemirror'
 import type CodeMirror from 'codemirror'
@@ -135,211 +132,9 @@ export function findStartIndex(num: number, nums: number[]) {
   return startIndex
 }
 
-const getShortcutWithPrefix = (key: string, shift = false) => {
-  const shiftPrefix = shift ? 'Shift-' : ''
-  const CmdPrefix =
-    typeof navigator !== 'undefined' && /Mac/.test(navigator.platform)
-      ? 'Cmd-'
-      : 'Ctrl-'
-  return shiftPrefix + CmdPrefix + key
-}
-
-export async function handleImageUpload(
-  { editor, appendBlock, codemirror }: BytemdEditorContext,
-  uploadImages: NonNullable<EditorProps['uploadImages']>,
-  files: File[]
-) {
-  const imgs = await uploadImages(files)
-  const pos = appendBlock(
-    imgs
-      .map(({ url, alt, title }, i) => {
-        alt = alt ?? files[i].name
-        return `![${alt}](${url}${title ? ` "${title}"` : ''})`
-      })
-      .join('\n\n')
-  )
-  editor.setSelection(pos, codemirror.Pos(pos.line + imgs.length * 2 - 2))
-  editor.focus()
-}
-
-export function getBuiltinActions(
-  locale: BytemdLocale,
-  plugins: BytemdPlugin[],
-  uploadImages: EditorProps['uploadImages']
-): { leftActions: BytemdAction[]; rightActions: BytemdAction[] } {
-  const leftActions: BytemdAction[] = [
-    {
-      icon: icons.H,
-      handler: {
-        type: 'dropdown',
-        actions: [1, 2, 3, 4, 5, 6].map((level) => ({
-          title: locale[`h${level}` as keyof BytemdLocale],
-          icon: [
-            icons.H1,
-            icons.H2,
-            icons.H3,
-            icons.LevelFourTitle,
-            icons.LevelFiveTitle,
-            icons.LevelSixTitle,
-          ][level - 1],
-          cheatsheet:
-            level <= 3
-              ? `${'#'.repeat(level)} ${locale.headingText}`
-              : undefined,
-          handler: {
-            type: 'action',
-            click({ replaceLines, editor }) {
-              replaceLines((line) => {
-                line = line.trim().replace(/^#*/, '').trim()
-                line = '#'.repeat(level) + ' ' + line
-                return line
-              })
-              editor.focus()
-            },
-          },
-        })),
-      },
-    },
-    {
-      title: locale.bold,
-      icon: icons.TextBold,
-      cheatsheet: `**${locale.boldText}**`,
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('B'),
-        click({ wrapText, editor }) {
-          wrapText('**')
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.italic,
-      icon: icons.TextItalic,
-      cheatsheet: `*${locale.italicText}*`,
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('I'),
-        click({ wrapText, editor }) {
-          wrapText('*')
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.quote,
-      icon: icons.Quote,
-      cheatsheet: `> ${locale.quotedText}`,
-      handler: {
-        type: 'action',
-        click({ replaceLines, editor }) {
-          replaceLines((line) => '> ' + line)
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.link,
-      icon: icons.LinkOne,
-      cheatsheet: `[${locale.linkText}](url)`,
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('K'),
-        click({ editor, wrapText, codemirror }) {
-          wrapText('[', '](url)')
-          const cursor = editor.getCursor()
-          editor.setSelection(
-            codemirror.Pos(cursor.line, cursor.ch + 2),
-            codemirror.Pos(cursor.line, cursor.ch + 5)
-          )
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.image,
-      icon: icons.Pic,
-      cheatsheet: `![${locale.imageAlt}](url "${locale.imageTitle}")`,
-      handler: uploadImages
-        ? {
-            type: 'action',
-            shortcut: getShortcutWithPrefix('I', true),
-            async click(ctx) {
-              const fileList = await selectFiles({
-                accept: 'image/*',
-                multiple: true,
-              })
-
-              if (fileList?.length) {
-                await handleImageUpload(ctx, uploadImages, Array.from(fileList))
-              }
-            },
-          }
-        : undefined,
-    },
-    {
-      title: locale.code,
-      icon: icons.Code,
-      cheatsheet: '`' + locale.codeText + '`',
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('K', true),
-        click({ wrapText, editor }) {
-          wrapText('`')
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.codeBlock,
-      icon: icons.CodeBrackets,
-      cheatsheet: '```' + locale.codeLang + '↵',
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('C', true),
-        click({ editor, appendBlock, codemirror }) {
-          const pos = appendBlock('```js\n```')
-          editor.setSelection(
-            codemirror.Pos(pos.line, 3),
-            codemirror.Pos(pos.line, 5)
-          )
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.ul,
-      icon: icons.ListTwo,
-      cheatsheet: `- ${locale.ulItem}`,
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('U', true),
-        click({ replaceLines, editor }) {
-          replaceLines((line) => '- ' + line)
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.ol,
-      icon: icons.OrderedList,
-      cheatsheet: `1. ${locale.olItem}`,
-      handler: {
-        type: 'action',
-        shortcut: getShortcutWithPrefix('O', true),
-        click({ replaceLines, editor }) {
-          replaceLines((line, i) => `${i + 1}. ${line}`)
-          editor.focus()
-        },
-      },
-    },
-    {
-      title: locale.hr,
-      icon: icons.DividingLine,
-      cheatsheet: '---',
-    },
-  ]
-  const rightActions: BytemdAction[] = []
+export function getActions(plugins: BytemdPlugin[]) {
+  const leftActions: Array<BytemdAction | BytemdActionFactory> = []
+  const rightActions: Array<BytemdAction | BytemdActionFactory> = []
   plugins.forEach(({ actions }) => {
     if (actions) {
       actions.forEach((action) => {
diff --git a/packages/bytemd/src/index.ts b/packages/bytemd/src/index.ts
index 6843a475a..ca09c1b98 100644
--- a/packages/bytemd/src/index.ts
+++ b/packages/bytemd/src/index.ts
@@ -4,3 +4,4 @@ export * from './types'
 export { default as Editor } from './editor.svelte'
 export { default as Viewer } from './viewer.svelte'
 export { getProcessor } from './utils'
+export * as builtInPlugins from './builtin-plugins'
diff --git a/packages/bytemd/src/toolbar.svelte b/packages/bytemd/src/toolbar.svelte
index 4037728fd..f87967ad8 100644
--- a/packages/bytemd/src/toolbar.svelte
+++ b/packages/bytemd/src/toolbar.svelte
@@ -1,9 +1,16 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import { icons } from './icons'
-  import type { BytemdEditorContext, BytemdAction, BytemdLocale } from './types'
-  import { createEventDispatcher, onMount } from 'svelte'
+  import { getActions } from './editor'
+  import type {
+    BytemdEditorContext,
+    BytemdAction,
+    BytemdLocale,
+    BytemdActionFactory,
+    EditorProps,
+  } from './types'
+  import type { Editor, KeyMap } from 'codemirror'
+  import { createEventDispatcher, onMount, tick } from 'svelte'
   import type { DelegateInstance } from 'tippy.js'
   import { delegate } from 'tippy.js'
 
@@ -16,88 +23,67 @@
   export let fullscreen: boolean
   export let sidebar: false | 'help' | 'toc'
   export let locale: BytemdLocale
-  export let actions: BytemdAction[]
-  export let rightAfferentActions: BytemdAction[]
+  export let editor: Editor
+  export let plugins: NonNullable<EditorProps['plugins']> = []
+  let keyMap: KeyMap = {}
 
-  interface RightAction extends BytemdAction {
-    active?: boolean
-    hidden?: boolean
+  function isActionFactory(
+    action: BytemdAction | BytemdActionFactory
+  ): action is BytemdActionFactory {
+    return typeof (action as BytemdActionFactory).create === 'function'
   }
 
-  $: tocActive = sidebar === 'toc'
-  $: helpActive = sidebar === 'help'
-  $: writeActive = activeTab === 'write'
-  $: previewActive = activeTab === 'preview'
+  $: actions = getActions(plugins)
+  $: leftActions = [
+    ...actions.leftActions.reduce<BytemdAction[]>((actions, action) => {
+      if (!isActionFactory(action)) {
+        actions.push(action)
+      } else {
+        actions.push({
+          ...action.create({ dispatch, sidebar, split, activeTab, fullscreen }),
+          position: action.position,
+        })
+      }
+      return actions
+    }, []),
+  ]
 
   $: rightActions = [
-    {
-      title: tocActive ? locale.closeToc : locale.toc,
-      icon: icons.AlignTextLeftOne,
-      handler: {
-        type: 'action',
-        click() {
-          dispatch('click', 'toc')
-        },
-      },
-      active: tocActive,
-    },
-    {
-      title: helpActive ? locale.closeHelp : locale.help,
-      icon: icons.Helpcenter,
-      handler: {
-        type: 'action',
-        click() {
-          dispatch('click', 'help')
-        },
-      },
-      active: helpActive,
-    },
-    {
-      title: writeActive ? locale.exitWriteOnly : locale.writeOnly,
-      icon: icons.LeftExpand,
-      handler: {
-        type: 'action',
-        click() {
-          dispatch('tab', 'write')
-        },
-      },
-      active: writeActive,
-      hidden: !split,
-    },
-    {
-      title: previewActive ? locale.exitPreviewOnly : locale.previewOnly,
-      icon: icons.RightExpand,
-      handler: {
-        type: 'action',
-        click() {
-          dispatch('tab', 'preview')
-        },
-      },
-      active: previewActive,
-      hidden: !split,
-    },
-    {
-      title: fullscreen ? locale.exitFullscreen : locale.fullscreen,
-      icon: fullscreen ? icons.OffScreen : icons.FullScreen,
-      handler: {
-        type: 'action',
-        click() {
-          dispatch('click', 'fullscreen')
-        },
-      },
-    },
-    {
-      title: locale.source,
-      icon: icons.GithubOne,
-      handler: {
-        type: 'action',
-        click() {
-          window.open('https://github.com/bytedance/bytemd')
-        },
-      },
-    },
-    ...rightAfferentActions,
-  ] as RightAction[]
+    ...actions.rightActions.reduce<BytemdAction[]>((actions, action) => {
+      if (!isActionFactory(action)) {
+        actions.push(action)
+      } else {
+        actions.push({
+          ...action.create({ dispatch, sidebar, split, activeTab, fullscreen }),
+          position: action.position,
+        })
+      }
+      return actions
+    }, []),
+  ]
+
+  function on() {
+    keyMap = {}
+    // TODO: nested shortcuts
+    ;[...leftActions, ...rightActions].forEach(({ handler }) => {
+      if (handler?.type === 'action' && handler.shortcut) {
+        keyMap[handler.shortcut] = () => {
+          handler.click(context)
+        }
+      }
+    })
+    editor.addKeyMap(keyMap)
+  }
+  function off() {
+    editor?.removeKeyMap(keyMap) // onDestroy runs at SSR, optional chaining here
+  }
+
+  $: if (editor && plugins) {
+    off()
+    tick().then(() => {
+      on()
+    })
+  }
 
   const tippyClass = 'bytemd-tippy'
   const tippyClassRight = 'bytemd-tippy-right'
@@ -123,7 +109,9 @@
       title: '',
       handler: {
         type: 'dropdown',
-        actions: e.classList.contains(tippyClassRight) ? rightActions : actions,
+        actions: e.classList.contains(tippyClassRight)
+          ? rightActions
+          : leftActions,
       },
     }
     paths?.forEach((index) => {
@@ -248,10 +236,11 @@
 >
   <div class="bytemd-toolbar-left">
     {#if split}
-      {#each actions as item, index}
-        {#if item.handler}
+      {#each leftActions as item, index}
+        {#if item.handler && !item.hidden}
           <div
             class={['bytemd-toolbar-icon', tippyClass].join(' ')}
+            class:bytemd-toolbar-icon-active={item.active}
             bytemd-tippy-path={index}
           >
             {@html item.icon}
@@ -282,7 +271,7 @@
 
   <div class="bytemd-toolbar-right">
     {#each rightActions as item, index}
-      {#if !item.hidden}
+      {#if item.handler && !item.hidden}
         <div
           class={['bytemd-toolbar-icon', tippyClass, tippyClassRight].join(' ')}
           class:bytemd-toolbar-icon-active={item.active}
diff --git a/packages/bytemd/src/types.ts b/packages/bytemd/src/types.ts
index f53da5ba1..f3e713bdd 100644
--- a/packages/bytemd/src/types.ts
+++ b/packages/bytemd/src/types.ts
@@ -4,6 +4,7 @@ import type CodeMirror from 'codemirror'
 import type { Schema } from 'hast-util-sanitize'
 import type { Image } from 'mdast'
 import type { Options } from 'remark-rehype'
+import type { createEventDispatcher } from 'svelte'
 import type { Processor } from 'unified'
 import type { VFile } from 'vfile'
 
@@ -111,6 +112,11 @@ type BytemdActionHandler =
       actions: BytemdAction[]
     }
 
+export enum ActionPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
 export interface BytemdAction {
   /**
    * Action title
@@ -121,7 +127,7 @@ export interface BytemdAction {
    *
    * Specifies that the action icon is in the toolbar position, which defaults to the left
    */
-  position?: 'left' | 'right'
+  position?: ActionPosition
   /**
    * Action icon (16x16), usually inline svg
    */
@@ -136,6 +142,23 @@ export interface BytemdAction {
    * Action handler
    */
   handler?: BytemdActionHandler
+  active?: boolean
+  hidden?: boolean
+}
+
+type Dispatch = ReturnType<typeof createEventDispatcher<Record<string, any>>>
+
+export interface ToolbarContext {
+  split: boolean
+  sidebar: string | boolean
+  activeTab: string | boolean
+  fullscreen: boolean
+  dispatch: Dispatch
+}
+
+export interface BytemdActionFactory {
+  position?: ActionPosition
+  create: (ctx: ToolbarContext) => BytemdAction
 }
 
 export interface BytemdPlugin {
@@ -154,7 +177,7 @@ export interface BytemdPlugin {
   /**
    * Register actions in toolbar, cheatsheet and shortcuts
    */
-  actions?: BytemdAction[]
+  actions?: Array<BytemdAction | BytemdActionFactory>
   /**
    * Side effect for the editor, triggers when plugin changes
    */
diff --git a/vitest.config.mjs b/vitest.config.mjs
index 4d8723921..47201abdf 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -9,6 +9,9 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: 'packages/bytemd/test/setup.ts',
+    alias: [
+      { find: /^svelte$/, replacement: "svelte/internal" } // FIXME: https://github.com/vitest-dev/vitest/issues/2834
+    ]
   },
   plugins: [
     svelte({