feat: add toolbar items for plugin

Author: pd4d10

packages/bytemd/src/Editor.svelte

@@ -67,7 +67,7 @@
 </style>
 
 <div class="bytemd" style={containerStyle}>
-  <Toolbar {cm} {fileHandler} />
+  <Toolbar {cm} {fileHandler} {plugins} />
   <div class="bytemd-body">
     <textarea bind:this={textarea} />
     <div class="bytemd-viewer" bind:this={viewer}>

packages/bytemd/src/Toolbar.svelte

@@ -2,6 +2,7 @@
   import { handleDec, handleBlockquote, handleLink, handleImage, handleTable } from './utils.js'
   export let cm;
   export let fileHandler;
+  export let plugins;
   let fileInput;
 </script>
 
@@ -16,16 +17,17 @@
     border: 1px solid transparent;
     margin-left: 6px;
   }
-  span path {
-    fill: #777;
-  }
   span:hover {
     border: 1px solid #aaa;
   }
-  svg {
+  span :global(svg) {
     display: block;
     width: 24px;
     height: 24px;
+    fill: #777;
+  }
+  span :global(path) {
+    fill: #777;
   }
   input {
     display: none;
@@ -41,4 +43,11 @@
   <span on:click={() => fileInput.click()}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg></span>
   <input bind:this={fileInput} type="file" accept="image/png, image/jpeg" on:change={(e) => handleImage(cm, e, fileHandler)} />
   <span on:click={() => handleTable(cm)}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/></svg></span>
+  {#each plugins as plugin}
+    {#if plugin.toolbarItems}
+      {#each plugin.toolbarItems as item}
+        <span on:click={() => item.onClick(cm)}><svelte:component this={item.component} {...item.props} /></span>
+      {/each}
+    {/if}
+  {/each}
 </div>

packages/bytemd/src/index.d.ts

@@ -1,22 +1,29 @@
 import { SvelteComponent } from 'svelte';
 import { HastNode } from '../helpers';
+import * as cm from 'codemirror';
 
-export interface Plugin {
+type Props = Record<string, unknown>;
+
+export interface Plugin<P extends Props = Props> {
   /**
    * Transformers for unified to be applied
    */
   transformer?: any; // TODO:
   /**
    * Specify how to render this node
+   *
+   * If `undefined` returned then go to the next plugin
    */
   render(
     node: HastNode,
-  ):
-    | {
-        component: typeof SvelteComponent;
-        props?: Record<string, unknown>;
-      }
-    | undefined;
+  ): { component: typeof SvelteComponent; props?: P } | undefined;
+  /**
+   * Components which should be added to toolbar
+   */
+  toolbarItems?: {
+    component: typeof SvelteComponent;
+    onClick(cm: cm.Editor): void;
+  }[];
 }
 
 // TODO: https://github.com/sveltejs/svelte/pull/4577

packages/plugin-media/src/AudioIcon.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/></svg>

packages/plugin-media/src/VideoIcon.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z"/></svg>

packages/plugin-media/src/index.ts

@@ -1,15 +1,40 @@
 import { Plugin } from 'bytemd';
 import Audio from './Audio.svelte';
 import Video from './Video.svelte';
+import AudioIcon from './AudioIcon.svelte';
+import VideoIcon from './VideoIcon.svelte';
+
+type ClickHandler = Exclude<Plugin['toolbarItems'], undefined>[0]['onClick'];
 
 export interface PluginOptions {
-  videoAttrs?: Partial<HTMLVideoElement>;
-  audioAttrs?: Partial<HTMLAudioElement>;
+  video?: {
+    defaultAttrs?: Partial<HTMLVideoElement>;
+    onClickIcon?: ClickHandler;
+  };
+  audio?: {
+    defaultAttrs?: Partial<HTMLAudioElement>;
+    onClickIcon?: ClickHandler;
+  };
+}
+
+function getClickHandler(type: string): ClickHandler {
+  return cm => {
+    const pos = cm.getCursor('from');
+    cm.replaceRange(`<${type} src=""></${type}>`, pos);
+    cm.setCursor({ line: pos.line, ch: pos.ch + 12 });
+    cm.focus();
+  };
 }
 
 export default function media({
-  videoAttrs = { controls: true },
-  audioAttrs = { controls: true },
+  video: {
+    defaultAttrs: videoAttrs = { controls: true },
+    onClickIcon: onClickVideo = getClickHandler('video'),
+  } = {},
+  audio: {
+    defaultAttrs: audioAttrs = { controls: true },
+    onClickIcon: onClickAudio = getClickHandler('audio'),
+  } = {},
 }: PluginOptions = {}): Plugin {
   return {
     render(node) {
@@ -33,5 +58,15 @@ export default function media({
         }
       }
     },
+    toolbarItems: [
+      {
+        component: AudioIcon,
+        onClick: onClickAudio,
+      },
+      {
+        component: VideoIcon,
+        onClick: onClickVideo,
+      },
+    ],
   };
 }