# Extensions

## Markdown Config

You can configure the markdown parsing rules by configuring the engine object, such as whether the chart available in table(available in the pro version)

```js
engine: {
    // Custom syntax
    customSyntax: {
        // 'SyntaxClass': SyntaxClass   
        // Force overwrite the built-in syntax parser in case of name conflict
        // 'SyntaxClass': {             
        //    syntax: SyntaxClass,      
        //    force: true,              
        //    before: 'HOOK_NAME',      
        //    after: 'HOOK_NAME'        
        // }
    }
}
```

- Key: `customSyntax`
- Description: Custom syntax configuration
- Type: ``{ [HOOK_NAME: string]: { [option: string]: any } | boolean }``
- Default: `{}`
- Options:
  - SyntaxClass   `<[String]> hook name`
    - syntax    `<[SyntaxBase]> hook constructor`
    - force     `<[Boolean]> whether overwrite hook with the same name`
    - before    `<[String]> hookName,execute before this hook`
    - after     `<[String]> hookName,execute after this hook`

## Custom Syntax

### Markdown.createSyntaxHook( HOOK_NAME, HOOK_TYPE, OPTIONS )

Create a custom syntax hook

| parameter      | type                              | description                                                                     |
| --------- | ---------------------------------- | ------------------------------------------------------------------------ |
| HOOK_NAME | string                             | Syntax hook ID, unique                                                   |
| HOOK_TYPE | Markdown.constants.HOOKS_TYPE_LIST | Syntax Hook type, only SEN (inline grammar) and PAR (paragraph grammar) can be selectedhook type, only Sen (inline syntax) and PAR (paragraph syntax) can be selected               |
| OPTIONS   | { Function }                       | Optional operation                                                            |

**options configuration**

| parameter      | type                              | description                                                                     |
| ----------------------------------------------------------------------- | -------- | ----------------------------------------------------------- |
| beforeMakeHtml (<br>str: string<br> ): string                           | Function | Lifecycle, returns the replaced string                                |
| makeHtml (<br>str: string,<br> sentenceMakeFunc: Function<br> ): string | Function | Lifecycle, returns the replaced string                                |
| afterMakeHtml (<br>str: string<br> ): string                            | Function | Lifecycle, returns the replaced string                                |
| rule ( ): { reg: RegExp }                                               | Function | Syntax hook matching rule, return an  reg member object containing regexp type |
| test (<br>str: string<br>): boolean                                     | Function | Syntax matching operation method. You can customize the matching method                          |

#### Basic Example

```Javascript
const CustomHook = Markdown.createSyntaxHook(
    'customHook',
    Markdown.constants.HOOKS_TYPE_LIST.PAR,
    {
        makeHtml(str) {
            console.log('hello custom hook');
            return str;
        },
        rule() {
            return { reg: new RegExp() };
        }
    }
);

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: CustomHook
        }
    }
});
```

#### Insert before or after the specified hook, only one parameter will take effect, and before takes precedence

```Javascript
new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                before: 'codeBlock',
                // after: 'codeBlock'
            }
        }
    }
});
```

#### Force overwrite of built-in syntax hook

```Javascript
new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                force: true
            }
        }
    }
});
```

## Custom Toolbar

Create a custom menu hook

| parameter      | type                              | description                                                                     |
| --------- | ---------------------------------- | ------------------------------------------------------------------------ |
| HOOK_NAME | string                             | Syntax hook ID, unique                                                   |
| OPTIONS   | { Object }                       | Custom menu configuration                                                       |

**options 配置**

| parameter      | type                              | description                                                                     |
| ----------------------------------------------------------------------- | -------- | ----------------------------------------------------------- |
| iconName                           | String | Icon class name                               |
| onClick (<br> selection: Function<br> ) | Function | Callback function when clicked                                |
| shortcutKeys   | Array | Shortcut key collection is used to register keyboard functions. When the matching shortcut key combination hits, the click function will also be called   |
| subMenuConfig (<br>name: String<br>iconName: String<Br>noIcon: Boolean<Br>onClick: Function ) | Function | Submenu collection |