feat: add command.render options (#419).

core/README.md

@@ -162,6 +162,34 @@ const title3 = {
   },
 };
 
+const title2 = {
+  name: 'title3',
+  keyCommand: 'title3',
+  render: (command, disabled, executeCommand) => {
+    return (
+      <button 
+        aria-label="Insert title3"
+        disabled={disabled}
+        onClick={(evn) => {
+          evn.stopPropagation();
+          executeCommand(command, command.groupName)
+        }}
+      >
+        <svg width="12" height="12" viewBox="0 0 520 520">
+          <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
+        </svg>
+      </button>
+    )
+  },
+  execute: (state, api) => {
+    let modifyText = `## ${state.selectedText}\n`;
+    if (!state.selectedText) {
+      modifyText = `## `;
+    }
+    api.replaceSelection(modifyText);
+  },
+}
+
 export default function App() {
   const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
   return (
@@ -171,7 +199,7 @@ export default function App() {
         onChange={setValue}
         commands={[
           // Custom Toolbars
-          title3,
+          title3, title2,
           commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
             name: 'title',
             groupName: 'title',

core/src/commands/index.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
 import { italic } from './italic';
@@ -50,6 +51,12 @@ export interface ICommandBase<T> {
   position?: 'right';
   liProps?: React.LiHTMLAttributes<HTMLLIElement>;
   buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
+  render?: (
+    command: ICommand<T>,
+    disabled: boolean,
+    executeCommand: (command: ICommand<T>, name?: string) => void,
+    index: number,
+  ) => React.ReactElement;
   execute?: (
     state: TextState,
     api: TextAreaTextApi,

core/src/components/Toolbar/index.tsx

@@ -85,8 +85,10 @@ export function ToolbarItems(props: IToolbarProps) {
         const disabled = barPopup && preview && preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand);
         return (
           <li key={idx} {...item.liProps} className={activeBtn ? `active` : ''}>
-            {!item.buttonProps && item.icon}
-            {item.buttonProps &&
+            {item.render && typeof item.render === 'function' && item.render(item, !!disabled, handleClick, idx)}
+            {!item.render && !item.buttonProps && item.icon}
+            {!item.render &&
+              item.buttonProps &&
               React.createElement(
                 'button',
                 {

www/src/Markdown.tsx

@@ -29,7 +29,13 @@ const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...prop
     const code = data.data[metaId].value || '';
     const param = getURLParameters(meta);
     return (
-      <CodeLayout ref={$dom} toolbar={param.title || 'Example'} code={<pre {...rest} />} text={code}>
+      <CodeLayout
+        ref={$dom}
+        style={{ marginBottom: 10 }}
+        toolbar={param.title || 'Example'}
+        code={<pre {...rest} />}
+        text={code}
+      >
         <Child />
       </CodeLayout>
     );