From 1c92266b642e918483c89a6adfb3131e77c4bf06 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 30 Aug 2020 20:54:33 +0800
Subject: [PATCH] fix: Fixed Error when specifying 100% to height. #47

---
 src/MDEditor.tsx                 |  2 +-
 src/components/Toolbar/index.tsx | 65 +++++++++++++++-----------------
 website/App.tsx                  |  2 +-
 3 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/MDEditor.tsx b/src/MDEditor.tsx
index c3e26ef43..bb931fcdc 100644
--- a/src/MDEditor.tsx
+++ b/src/MDEditor.tsx
@@ -162,7 +162,7 @@ export default class MDEditor extends React.PureComponent<MDEditorProps, MDEdito
         />
         <div
           className={`${prefixCls}-content`}
-          style={{ height: this.state.fullscreen ? 'calc(100% - 29px)' : (this.state.height as number) - 29 }}
+          style={{ height: this.state.fullscreen ? 'calc(100% - 29px)' : `calc(${this.state.height} - 29px` }}
         >
           {/(edit|live)/.test(this.state.preview as string) && (
             <TextArea
diff --git a/src/components/Toolbar/index.tsx b/src/components/Toolbar/index.tsx
index 4b80ef52b..9e8ab3b1f 100644
--- a/src/components/Toolbar/index.tsx
+++ b/src/components/Toolbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { IProps } from '../../utils';
 import { ICommand } from '../../commands';
@@ -6,44 +6,39 @@ import './index.less';
 
 export interface IToolbarProps extends IProps {
   onCommand?: (command: ICommand) => void;
-  commands: ICommand[];
+  commands?: ICommand[];
   active?: {
     [key: string]: any,
   },
 }
 
-export default class Toolbar extends Component<IToolbarProps> {
-  public static defaultProps: IToolbarProps = {
-    commands: [],
-  }
-  handleClick = (command: ICommand) => {
-    const { onCommand } = this.props;
+export default function Toolbar(props: IToolbarProps = {}) {
+  const { prefixCls, commands = [], active } = props;
+  function handleClick(command: ICommand) {
+    const { onCommand } = props;
     onCommand && onCommand(command);
   }
-  render() {
-    const { prefixCls, commands, active } = this.props;
-    return (
-      <div className={`${prefixCls}-toolbar`}>
-        <ul>
-          {commands.map((item, idx) => {
-            if (item.keyCommand === 'divider') {
-              return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />
-            }
-            const activeBtn = active && (item.value ? active[item.keyCommand] && active[item.keyCommand] === item.value : active[item.keyCommand]); 
-            return (
-              <li key={idx} {...item.liProps} className={classnames({ active: activeBtn })}>
-                {!item.buttonProps && item.icon}
-                {item.buttonProps && React.createElement('button', {
-                  type: 'button',
-                  disabled: active && active.preview && active.preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand),
-                  "data-name": item.name, ...item.buttonProps,
-                  onClick: this.handleClick.bind(this, item)
-                }, item.icon)}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-}
\ No newline at end of file
+  return (
+    <div className={`${prefixCls}-toolbar`}>
+      <ul>
+        {commands.map((item, idx) => {
+          if (item.keyCommand === 'divider') {
+            return <li key={idx} {...item.liProps} className={`${prefixCls}-toolbar-divider`} />
+          }
+          const activeBtn = active && (item.value ? active[item.keyCommand] && active[item.keyCommand] === item.value : active[item.keyCommand]); 
+          return (
+            <li key={idx} {...item.liProps} className={classnames({ active: activeBtn })}>
+              {!item.buttonProps && item.icon}
+              {item.buttonProps && React.createElement('button', {
+                type: 'button',
+                disabled: active && active.preview && active.preview === 'preview' && !/(preview|fullscreen)/.test(item.keyCommand),
+                "data-name": item.name, ...item.buttonProps,
+                onClick: handleClick.bind(item)
+              }, item.icon)}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/website/App.tsx b/website/App.tsx
index 947438624..27e666fed 100644
--- a/website/App.tsx
+++ b/website/App.tsx
@@ -121,7 +121,7 @@ export default function App() {
               }
               return children;
             },
-            code: ({ children, language, value }) => {
+            code: ({ language, value }) => {
               if (language && language.toLocaleLowerCase() === 'katex') {
                 const html = katex.renderToString(value, {
                   throwOnError: false