Add document & Add Codemirror type.

Author: jaywcjlove

README.md

@@ -4,6 +4,8 @@
   </a>
 </p>
 
+<!--dividing-->
+
 <p align="center">
   <a href="https://github.com/uiwjs/react-markdown-editor/issues">
     <img src="https://img.shields.io/github/issues/uiwjs/react-markdown-editor.svg">
@@ -22,8 +24,6 @@
   </a>
 </p>
 
-<!--dividing-->
-
 <p align="center">
   A markdown editor with preview, implemented with React.js and TypeScript.
 </p>

package-lock.json

@@ -70,8 +70,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.3",
+    "@types/highlight.js": "^9.12.3",
     "classnames": "^2.2.6",
     "codemirror": "^5.45.0",
+    "highlight.js": "^9.15.6",
     "react-markdown": "^4.0.6"
   }
 }

package.json

@@ -1,4 +1,44 @@
 
 export interface IReactCodeMirrorState {
   codeMirrorOptions: object,
-}
+}
+
+
+export interface IEventDict {
+  [key: string]: string;
+}
+
+
+export interface ISetScrollOptions {
+  x?: number | null;
+  y?: number | null;
+}
+
+
+export interface ISetSelectionOptions {
+  anchor: CodeMirror.Position;
+  head: CodeMirror.Position;
+}
+
+export interface IGetSelectionOptions {
+  ranges: ISetSelectionOptions[];
+  origin: string;
+  update: (ranges: ISetSelectionOptions[]) => void;
+}
+
+/* <tshacks>: laundry list of incorrect typings in @types/codemirror */
+export interface IDoc extends CodeMirror.Doc {
+  setCursor: (pos: CodeMirror.Position, ch?: number, options?: {}) => void;
+  setSelections: (ranges: ISetSelectionOptions[]) => void;
+}
+
+export interface IInstance extends CodeMirror.Editor, IDoc {
+  options: CodeMirror.EditorConfiguration
+}
+
+export interface IDefineModeOptions {
+  fn: () => CodeMirror.Mode<any>;
+  name: string;
+}
+
+export type DomEvent = (editor: IInstance, event: Event) => void;

src/common/codemirror.ts

@@ -1,20 +1,69 @@
-import CodeMirror, { Doc, DocConstructor, Editor, EditorConfiguration, EditorFromTextArea } from 'codemirror';
+import CodeMirror from 'codemirror';
 import 'codemirror/mode/markdown/markdown';
 import React, { Component } from 'react';
-import { IReactCodeMirrorState } from '../../common/codemirror';
-import { HTMLDivProps, IProps } from '../../common/props';
+import { DomEvent, IDefineModeOptions, IEventDict, IGetSelectionOptions, IInstance, ISetScrollOptions, ISetSelectionOptions } from '../../common/codemirror';
+import { IProps } from '../../common/props';
 import './codemirror.less';
 import './index.less';
 
-export interface IReactCodeMirrorProps extends IProps, HTMLDivProps {
+declare let global: any;
+declare let require: any;
+
+const SERVER_RENDERED = (typeof navigator === 'undefined' || global.PREVENT_CODEMIRROR_RENDER === true);
+
+let cm: any;
+if (!SERVER_RENDERED) {
+  // tslint:disable-next-line: no-var-requires
+  cm = require('codemirror');
+}
+
+export interface ICodeMirror extends IProps {
   value?: string,
-  options: EditorConfiguration,
   width?: number | string,
   height?: number | string,
+  className?: string;
+  cursor?: CodeMirror.Position;
+  defineMode?: IDefineModeOptions;
+  editorDidConfigure?: (editor: IInstance) => void;
+  editorDidMount?: (editor: IInstance, value: string, cb: () => void) => void;
+  editorWillMount?: () => void;
+  editorWillUnmount?: (lib: any) => void;
+  onClear?: (from: CodeMirror.Position, to: CodeMirror.Position) => void;
+  onBlur?: DomEvent;
+  onChange?: (editor: IInstance, data: CodeMirror.EditorChange, value: string) => void;
+  onContextMenu?: DomEvent;
+  onCopy?: DomEvent;
+  onCursor?: (editor: IInstance, data: CodeMirror.Position) => void;
+  onCut?: DomEvent;
+  onCursorActivity?: (editor: IInstance) => void;
+  onDblClick?: DomEvent;
+  onDragEnter?: DomEvent;
+  onDragLeave?: DomEvent;
+  onDragOver?: DomEvent
+  onDragStart?: DomEvent;
+  onDrop?: DomEvent;
+  onFocus?: DomEvent
+  onGutterClick?: (editor: IInstance, lineNumber: number, gutter: string, event: Event) => void;
+  onKeyDown?: DomEvent;
+  onKeyPress?: DomEvent;
+  onKeyUp?: DomEvent;
+  onMouseDown?: DomEvent;
+  onPaste?: DomEvent;
+  onRenderLine?: (editor: IInstance, line: CodeMirror.LineHandle, element: HTMLElement) => void;
+  onScroll?: (editor: IInstance, data: CodeMirror.ScrollInfo) => void;
+  onSelection?: (editor: IInstance, data: IGetSelectionOptions) => void;
+  onTouchStart?: DomEvent;
+  onUpdate?: (editor: IInstance) => void;
+  onViewportChange?: (editor: IInstance, start: number, end: number) => void;
+  options?: CodeMirror.EditorConfiguration
+  selection?: { ranges: ISetSelectionOptions[], focus?: boolean };
+  scroll?: ISetScrollOptions;
+  [key: string]: any,
 }
 
-export default class ReactCodeMirror extends Component<IReactCodeMirrorProps, IReactCodeMirrorState> {
-  public static defaultProps: IReactCodeMirrorProps = {
+
+export default class ReactCodeMirror extends Component<ICodeMirror> {
+  public static defaultProps: ICodeMirror = {
     height: '100%',
     options: {
       lineNumbers: true,
@@ -25,49 +74,79 @@ export default class ReactCodeMirror extends Component<IReactCodeMirrorProps, IR
     width: '100%',
   }
   public textarea!: HTMLTextAreaElement;
-  // public editor!: CodeMirror.Editor<Doc>;
-  // public editor!: Doc | Editor | EditorFromTextArea;
   public editor!: any;
-  // public editor!: CodeMirror.Editor | EditorFromTextArea;
-  // public editor!: Doc | EditorFromTextArea;
-  // public editor!: Doc | EditorFromTextArea;
   // public editor!: Doc | Editor | EditorFromTextArea | Editor;
-  public constructor(props: Readonly<IReactCodeMirrorProps>) {
+  public constructor(props: Readonly<ICodeMirror>) {
     super(props);
   }
   public render() {
     return (
-      <textarea ref={(instance: HTMLTextAreaElement) => { this.textarea = instance; }} />
-    )
+      <textarea ref={(instance: HTMLTextAreaElement) => this.textarea = instance} />
+    );
+  }
+
+  public componentWillMount() {
+    if (SERVER_RENDERED) {
+      return;
+    }
+
+    if (this.props.editorWillMount) {
+      this.props.editorWillMount();
+    }
   }
 
   public componentDidMount() {
+    if (SERVER_RENDERED) {
+      return;
+    }
     this.renderCodeMirror(this.props);
   }
 
-  public async componentWillReceiveProps(nextPros: IReactCodeMirrorProps) {
+  public async componentWillReceiveProps(nextPros: ICodeMirror) {
     this.renderCodeMirror(nextPros);
   }
 
-  private async renderCodeMirror(props: IReactCodeMirrorProps) {
+  // 将props中所有的事件处理函数映射并保存
+  public getEventHandleFromProps(): IEventDict {
+    const propNames = Object.keys(this.props);
+    const eventHandle = propNames.filter((prop) => {
+      return /^on+/.test(prop);
+    });
+
+    const eventDict: IEventDict = {};
+    eventHandle.forEach((ele) => {
+      eventDict[ele] = ele.replace(/^on[A-Z]/g, s => s.slice(2).toLowerCase()) as string;
+    });
+
+    return eventDict;
+  }
+
+  private renderCodeMirror(props: ICodeMirror) {
     const { value, width, height, options } = props;
+
+    if (this.props.defineMode) {
+      if (this.props.defineMode.name && this.props.defineMode.fn) {
+        cm.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
+      }
+    }
+    
     const editorOption = { tabSize: 2, lineNumbers: true, ...options, mode: 'markdown' }
     // 生成codemirror实例
-    this.editor = CodeMirror.fromTextArea(this.textarea, editorOption);
+    this.editor = cm.fromTextArea(this.textarea, editorOption) as CodeMirror.EditorFromTextArea;
     // 获取CodeMirror用于获取其中的一些常量
-    // this.codemirror = CodeMirror;
     // 事件处理映射
-    // const eventDict = this.getEventHandleFromProps();
-    // Object.keys(eventDict).forEach((event: string) => {
-    //   this.editor.on(eventDict[event], this.props[event]);
-    // });
+    const eventDict = this.getEventHandleFromProps();
+    Object.keys(eventDict).forEach((event: string) => {
+      const handle = this.props[event];
+      this.editor.on(eventDict[event], handle);
+    });
 
-    // 初始化值
+    // Init value
     this.editor.setValue(value || '');
     this.editor.setOption(name, editorOption.mode);
 
     if (width || height) {
-      // 设置尺寸
+      // Setting size
       this.editor.setSize(width, height);
     }
   }

src/components/CodeMirror/index.tsx

@@ -1,12 +1,12 @@
 import classnames from 'classnames';
 import * as React from "react";
-import { HTMLDivProps, IProps } from './common/props';
-import CodeMirror from './components/CodeMirror';
+import { IProps } from './common/props';
+import CodeMirror, { ICodeMirror } from './components/CodeMirror';
 import ToolBar from './components/ToolBar';
 import './index.less';
 
-export interface IMarkdownEditorProps extends IProps, HTMLDivProps {
-  prefixCls: string,
+export interface IMarkdownEditorProps extends IProps, ICodeMirror {
+  prefixCls?: string,
   value?: string,
   height?: number,
   toolbars?: string[],
@@ -28,11 +28,15 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditorP
   // };
   public CodeMirror!: CodeMirror;
   public render() {
-    const { prefixCls, className, toolbars, ...codemirrorProps } = this.props;
+    const { prefixCls, className, toolbars, onChange, ...codemirrorProps } = this.props;
     return (
       <div className={classnames(prefixCls, className)}>
         <ToolBar toolbars={toolbars} onClick={this.onClick} />
-        <CodeMirror ref={this.getInstance} {...codemirrorProps} />
+        <CodeMirror
+          ref={this.getInstance}
+          {...codemirrorProps}
+          onChange={this.onChange}
+        />
       </div>
     );
   }
@@ -41,6 +45,10 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditorP
       this.CodeMirror = editor;
     }
   }
+  private onChange = () => {
+    // private onChange = (editor: CodeMirror, editorChange: CodeMirror.EditorChange) => {
+    // console.log('test', editor, editorChange);
+  }
   private onClick = (type: string) => {
     const selection = this.CodeMirror.editor.getSelection();
     const pos = this.CodeMirror.editor.getCursor();
@@ -56,6 +64,7 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditorP
     }
     if (type === 'header') {
       value = selection ? `# ${selection}` : '# ';
+      pos.ch = selection ? pos.ch : pos.ch + 2;
     }
     if (type === 'strike') {
       value = selection ? `~~${selection}~~` : '~~~~';
@@ -67,21 +76,25 @@ export default class MarkdownEditor extends React.PureComponent<IMarkdownEditorP
     }
     if (type === 'olist') {
       value = selection ? `- ${selection}` : '- ';
+      pos.ch = selection ? pos.ch : pos.ch + 2;
     }
     if (type === 'ulist') {
       value = selection ? `1. ${selection}` : '1. ';
+      pos.ch = selection ? pos.ch : pos.ch + 3;
     }
     if (type === 'todo') {
       value = selection ? `- [ ] ${selection}` : '- [ ] ';
+      pos.ch = selection ? pos.ch : pos.ch + 6;
     }
     if (type === 'link') {
-      value = selection ? `[${selection}](连接地址 "${selection}")` : '[连接说明](连接地址 "连接标题")';
+      value = '[连接说明](连接地址 "连接标题")';
     }
     if (type === 'image') {
       value = selection ? `${selection} ![](图片地址 "图片描述")` : '![图片描述](图片地址 "图片描述")\n';
     }
     if (type === 'quote') {
       value = selection ? `> ${selection}` : '> ';
+      pos.ch = selection ? pos.ch : pos.ch + 2;
     }
     this.CodeMirror.editor.replaceSelection(value);
     this.CodeMirror.editor.focus();

src/index.tsx

@@ -4,9 +4,14 @@
 
 .editor {
   width: 980px;
+  padding: 0 10px;
   margin: 0 auto 0 auto;
 }
 
+.doc {
+  padding: 20px 0 0 0;
+}
+
 .logo {
   svg {
     width: auto;

website/App.less

@@ -4,6 +4,7 @@ import MarkdownEditor from '../src';
 import styles from './App.less';
 import Footer from './components/Footer';
 import GithubCorner from './components/GithubCorner';
+import ReactMarkdown from './components/Markdown';
 import Logo from './Logo';
 
 export default class App extends React.Component {
@@ -25,6 +26,7 @@ export default class App extends React.Component {
             value={DocumentStrSource}
           />
         </div>
+        <ReactMarkdown source={DocumentStrSource} className={styles.doc} />
         <Footer name="Kenny Wong" href="" year={2019}/>
       </div>
     );