feat: Add toolbarsMode props.

Author: jaywcjlove

README.md

@@ -93,8 +93,9 @@ ReactDOM.render(
 ## Props
 
 - value (*string*) - the raw markdown that will be converted to html (**required**)
-- visble (*boolean*) - Shows a preview that will be converted to html.
-- toolbars (*array*) - Tool display settings.
+- `visble?:boolean` - Shows a preview that will be converted to html.
+- `toolbars?:array` - Tool display settings.
+- `toolbarsMode?:array` - Tool display settings.
 - onChange (*function(editor: IInstance, data: CodeMirror.EditorChange, value: string)*) - called when a change is made (**required**)
 
 > [Other Props Options](https://github.com/uiwjs/react-markdown-editor/blob/8de6abbf628b6d272d7da1c28e985fbbcba71b93/src/components/CodeMirror/index.tsx#L21-L60)

src/common/props.ts

@@ -7,3 +7,7 @@ export type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;
 export interface IProps {
   className?: string;
 }
+
+export interface IIconProps {
+  [key: string]: HTMLElement
+}

src/components/Icon/bar.tsx

@@ -6,6 +6,12 @@ export default {
       <path fill="currentColor" d="M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z" />
     </svg>
   ),
+  fullscreen: (
+    <svg width="16" height="16" viewBox="0 0 1024 1024">
+      <path fill="currentColor" d="M189.75 428.89a36.87 36.87 0 0 0 36.84-36.85V228.12h164a36.85 36.85 0 1 0 0-73.7H189.75a36.82 36.82 0 0 0-36.8 36.85v200.8a36.83 36.83 0 0 0 36.8 36.82zM834.26 595.06a36.82 36.82 0 0 0-36.8 36.84v164H633.41a36.85 36.85 0 0 0 0 73.7h200.85a36.87 36.87 0 0 0 36.84-36.85V631.9a36.86 36.86 0 0 0-36.84-36.84zM797.46 228.12v179.31a36.82 36.82 0 1 0 73.64 0V191.24a36.86 36.86 0 0 0-36.84-36.85H602.33a36.85 36.85 0 0 0 0 73.7zM421.62 795.9H226.54V616.56a36.82 36.82 0 1 0-73.64 0v216.19a36.83 36.83 0 0 0 36.85 36.85h231.87a36.85 36.85 0 0 0 0-73.7z" />
+      <path fill="currentColor" d="M306.5 307.94m32.95 0l345.1 0q32.95 0 32.95 32.95l0 342.22q0 32.95-32.95 32.95l-345.1 0q-32.95 0-32.95-32.95l0-342.22q0-32.95 32.95-32.95Z" />
+    </svg>
+  ),
   header: (
     <svg width="12" height="12" viewBox="0 0 512 512">
       <path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />

src/components/ToolBar/index.tsx

@@ -1,13 +1,9 @@
 import classnames from 'classnames';
 import * as React from "react";
-import { HTMLDivProps, IProps } from '../../common/props';
+import { IIconProps, IProps } from '../../common/props';
 import icon from '../Icon/bar';
 import './index.less';
 
-export interface IIconProps {
-  [key: string]: HTMLElement
-}
-
 export interface IToolBarProps extends IProps {
   prefixCls: string,
   toolbars: string[],
@@ -19,7 +15,7 @@ export default class ToolBar extends React.PureComponent<IToolBarProps, {}> {
   public static defaultProps: IToolBarProps = {
     onClick: () => null,
     prefixCls: 'md-editor',
-    toolbars: ['bold', 'italic', 'header', 'strike', 'underline', 'olist', 'ulist', 'todo', 'link', 'image', 'quote', 'preview'],
+    toolbars: ['bold', 'italic', 'header', 'strike', 'underline', 'olist', 'ulist', 'todo', 'link', 'image', 'quote'],
   };
   public render() {
     const { prefixCls, className, onClick, toolbars, ...htmlProps } = this.props;

src/components/ToolBarMode/index.less

@@ -0,0 +1,13 @@
+@editor-prefix:~"md-editor";
+
+:global {
+  .@{editor-prefix} {
+    &-toolbar-mode {
+      float: right;
+      padding-right: 5px;
+      .active {
+        color: #06c;
+      }
+    }
+  }
+}

src/components/ToolBarMode/index.tsx

@@ -0,0 +1,61 @@
+import classnames from 'classnames';
+import * as React from "react";
+import { IIconProps, IProps } from '../../common/props';
+import icon from '../Icon/bar';
+import './index.less';
+
+export interface IToolBarModeProps extends IProps {
+  prefixCls: string,
+  toolbarsMode: string[],
+  onClick: (type: string) => void,
+}
+
+export interface IToolBarModeState {
+  preview: boolean,
+  fullscreen: boolean,
+  [key: string]: any,
+}
+
+export default class ToolBarMode extends React.PureComponent<IToolBarModeProps, IToolBarModeState, {}> {
+  public static displayName = 'ToolBar';
+  public static defaultProps: IToolBarModeProps = {
+    onClick: () => null,
+    prefixCls: 'md-editor',
+    // toolbarsMode: ['preview', 'fullscreen'],
+    toolbarsMode: ['preview'],
+  };
+  constructor(props: IToolBarModeProps) {
+    super(props);
+    this.state = {
+      fullscreen: false,
+      preview: true,
+    }
+  }
+
+  public updateMode(key: string, value?: boolean) {
+    this.setState({ [key]: value });
+  }
+
+  public render() {
+    const { prefixCls, className, onClick, toolbarsMode, ...htmlProps } = this.props;
+    const { preview, fullscreen } = this.state;
+    return (
+      <div className={classnames(`${prefixCls}-toolbar`, `${prefixCls}-toolbar-mode`, className)} {...htmlProps}>
+        {toolbarsMode.map((name: string, key) => {
+          const Icon = (icon as unknown as IIconProps)[name];
+          return (
+            <button
+              key={key}
+              className={classnames({
+                active: (preview && name === 'preview') || fullscreen && name === 'fullscreen',
+              })}
+              onClick={onClick.bind(this, name)}
+            >
+              {Icon}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+}

src/index.tsx

@@ -5,6 +5,7 @@ import { IProps } from './common/props';
 import CodeMirror, { ICodeMirror } from './components/CodeMirror';
 import PreviewMarkdown from './components/PreviewMarkdown';
 import ToolBar from './components/ToolBar';
+import ToolBarMode from './components/ToolBarMode';
 import './index.less';
 
 export interface IMarkdownEditor extends IProps, ICodeMirror {
@@ -13,11 +14,12 @@ export interface IMarkdownEditor extends IProps, ICodeMirror {
   height?: number,
   visble?: boolean,
   toolbars?: string[],
+  toolbarsMode?: string[],
   options?: CodeMirror.EditorConfiguration,
 }
 
 interface IMarkdownEditorState {
-  preview: boolean;
+  fullscreen: boolean;
 }
 
 export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor, IMarkdownEditorState, {}> {
@@ -29,11 +31,13 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
     visble: true,
   };
   public preview!: PreviewMarkdown;
+  public toolbarsMode!: ToolBarMode;
   public CodeMirror!: CodeMirror;
   public render() {
-    const { prefixCls, className, toolbars, onChange, visble, ...codemirrorProps } = this.props;
+    const { prefixCls, className, toolbars, toolbarsMode, onChange, visble, ...codemirrorProps } = this.props;
     return (
       <div className={classnames(prefixCls, className)}>
+        <ToolBarMode ref={(mode: ToolBarMode) => this.toolbarsMode = mode} toolbarsMode={toolbarsMode} onClick={this.onClickMode} />
         <ToolBar toolbars={toolbars} onClick={this.onClick} />
         <div className={classnames(`${prefixCls}-content`)}>
           <CodeMirror
@@ -79,17 +83,33 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditor,
       onChange(editor, data, value);
     }
   }
+
   private previewMarkdown() {
     if (this.preview) {
       this.preview.state.visble ? this.preview.hide() : this.preview.show();
+      this.toolbarsMode.updateMode('preview', !this.preview.state.visble);
       this.CodeMirror.editor.setSize(this.preview.state.visble ? '100%' : '50%');
     }
   }
-  private onClick = (type: string) => {
+
+  private fullScreen() {
+    if (this.toolbarsMode) {
+      this.toolbarsMode.updateMode('fullscreen', !this.toolbarsMode.state.fullscreen);
+    }
+  }
+
+  private onClickMode = (type: string) => {
     if (type === 'preview') {
       this.previewMarkdown();
       return;
     }
+    if (type === 'fullscreen') {
+      this.fullScreen();
+      return;
+    }
+  }
+
+  private onClick = (type: string) => {
     const selection = this.CodeMirror.editor.getSelection();
     const pos = this.CodeMirror.editor.getCursor();
     let value = '';