feat: add hideToolbar props (#188).

Author: jaywcjlove

README.md

@@ -222,6 +222,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   /** Shows a preview that will be converted to html. */
   visible?: boolean;
   visibleEditor?: boolean;
+  /** Option to hide the tool bar. */
+  hideToolbar?: boolean;
   /** Tool display settings. */
   toolbars?: IToolBarProps['toolbars'];
   /** Tool display settings. */

src/index.tsx

@@ -26,6 +26,8 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
   /** Shows a preview that will be converted to html. */
   visible?: boolean;
   visibleEditor?: boolean;
+  /** Option to hide the tool bar. */
+  hideToolbar?: boolean;
   /** Tool display settings. */
   toolbars?: IToolBarProps['toolbars'];
   /** Tool display settings. */
@@ -61,6 +63,7 @@ function MarkdownEditor(
     toolbarsMode = getModeCommands(),
     visible = true,
     visibleEditor = true,
+    hideToolbar = true,
     previewProps = {},
     extensions = [],
     ...codemirrorProps
@@ -90,10 +93,12 @@ function MarkdownEditor(
   };
   return (
     <div className={`${prefixCls || ''} wmde-markdown-var ${className || ''}`} ref={container}>
-      <div>
-        <ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
-        <ToolBar {...toolBarProps} toolbars={toolbars} />
-      </div>
+      {hideToolbar && (
+        <div>
+          <ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
+          <ToolBar {...toolBarProps} toolbars={toolbars} />
+        </div>
+      )}
       <div className={`${prefixCls}-content`} style={{ height: codemirrorProps.height }}>
         <div className={`${prefixCls}-content-editor`} ref={containerEditor}>
           {visibleEditor && (

website/App.tsx

@@ -14,6 +14,7 @@ let count = 1;
 export default function App() {
   const [visible, setVisible] = useState(true);
   const [mdstr, setMdstr] = useState<string>(DocumentStrSource);
+  const [hideToolbar, setHideToolbar] = useState(true);
   return (
     <div className={styles.warpper}>
       <dark-mode light="Light" dark="Dart" style={{ position: 'fixed' }}></dark-mode>
@@ -22,7 +23,7 @@ export default function App() {
         <Logo style={{ fill: 'currentColor' }} />
       </div>
       <div className={styles.editor}>
-        <MarkdownEditor visible={visible} height="500px" value={mdstr} />
+        <MarkdownEditor visible={visible} height="500px" value={mdstr} hideToolbar={hideToolbar} />
         <div style={{ marginTop: 10, display: 'flex', gap: '10px' }}>
           <button
             onClick={() => {
@@ -32,6 +33,10 @@ export default function App() {
           >
             Modify Markdown
           </button>
+          <label>
+            <input type="checkbox" checked={hideToolbar} onChange={(evn) => setHideToolbar(evn.target.checked)} />
+            hideToolbar
+          </label>
           <button onClick={() => setVisible(!visible)}>{visible ? 'Show' : 'Hide'}</button>
           <span>v{VERSION}</span>
         </div>