feat: supports actions position (#219)

Author: nice-hang

packages/bytemd/src/editor.svelte

@@ -7,6 +7,7 @@
     createEditorUtils,
     findStartIndex,
     getBuiltinActions,
+    getBuiltinRightActions,
     handleImageUpload,
   } from './editor'
   import Help from './help.svelte'
@@ -106,7 +107,7 @@
 
     keyMap = {}
     // TODO: nested shortcuts
-    actions.forEach(({ handler }) => {
+    actions.leftActions.forEach(({ handler }) => {
       if (handler?.type === 'action' && handler.shortcut) {
         keyMap[handler.shortcut] = () => {
           handler.click(context)
@@ -349,8 +350,9 @@
     {activeTab}
     {sidebar}
     {fullscreen}
+    rightAfferentActions={actions.rightActions}
     locale={mergedLocale}
-    {actions}
+    actions={actions.leftActions}
     on:key={(e) => {
       editor.setOption('keyMap', e.detail)
       editor.focus()
@@ -408,7 +410,11 @@
       >
         {@html icons.Close({})}
       </div>
-      <Help locale={mergedLocale} {actions} visible={sidebar === 'help'} />
+      <Help
+        locale={mergedLocale}
+        actions={actions.leftActions}
+        visible={sidebar === 'help'}
+      />
       <Toc
         {hast}
         locale={mergedLocale}

packages/bytemd/src/editor.ts

@@ -166,8 +166,8 @@ export function getBuiltinActions(
   locale: BytemdLocale,
   plugins: BytemdPlugin[],
   uploadImages: EditorProps['uploadImages']
-): BytemdAction[] {
-  const items: BytemdAction[] = [
+): { leftActions: BytemdAction[]; rightActions: BytemdAction[] } {
+  const leftActions: BytemdAction[] = [
     {
       icon: icons.H({}),
       handler: {
@@ -339,9 +339,18 @@ export function getBuiltinActions(
       cheatsheet: '---',
     },
   ]
-
+  const rightActions: BytemdAction[] = []
   plugins.forEach(({ actions }) => {
-    if (actions) items.push(...actions)
+    if (actions) {
+      actions.forEach((action) => {
+        if (!action.position || action.position !== 'right')
+          leftActions.push(action)
+        else rightActions.push(action)
+      })
+    }
   })
-  return items
+  return {
+    leftActions,
+    rightActions,
+  }
 }

packages/bytemd/src/toolbar.svelte

@@ -17,6 +17,7 @@
   export let sidebar: false | 'help' | 'toc'
   export let locale: BytemdLocale
   export let actions: BytemdAction[]
+  export let rightAfferentActions: BytemdAction[]
 
   interface RightAction extends BytemdAction {
     active?: boolean
@@ -131,6 +132,7 @@
         },
       },
     },
+    ...rightAfferentActions
   ] as RightAction[]
 
   const tippyClass = 'bytemd-tippy'

packages/bytemd/src/types.ts

@@ -116,6 +116,12 @@ export interface BytemdAction {
    * Action title
    */
   title?: string
+  /**
+   * Action icon position
+   *
+   * Specifies that the action icon is in the toolbar position, which defaults to the left
+   */
+  position?: 'left' | 'right'
   /**
    * Action icon (16x16), usually inline svg
    */