Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix extra styles type #75

Merged
merged 2 commits into from
Nov 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
declare module 'draftjs-md-converter' {
import { RawDraftContentState } from 'draft-js';
declare module "draftjs-md-converter" {
import type { Syntax as ASTNodeTypes } from "@textlint/markdown-to-ast";
import type { RawDraftContentState } from "draft-js";
export function draftjsToMd(
raw: RawDraftContentState,
extraMarkdownDict?: { [key: string]: string }
): string;
export function mdToDraftjs(
mdString: string,
extraStyles?: { [key: string]: string }
extraStyles?: {
inlineStyles?: {
[key in ASTNodeTypes]?: {
type: string;
symbol: string;
[key: string]: string;
};
};
blockStyles?: {
[key: string]: string;
};
}
): RawDraftContentState;
}
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"babel-eslint": "^10.1.0",
"chai": "^3.5.0",
"dirty-chai": "^1.2.2",
"esbuild": "0.8.36",
"eslint": "^3.9.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-config-prettier": "^2.9.0",
Expand All @@ -58,11 +59,10 @@
"husky": "4.2.1",
"lint-staged": "^7.0.4",
"mocha": "^2.4.5",
"esbuild": "0.8.36",
"prettier": "1.19.1"
},
"dependencies": {
"@textlint/markdown-to-ast": "6.1.6"
"@textlint/markdown-to-ast": "12.0.2"
},
"husky": {
"hooks": {
Expand Down
81 changes: 70 additions & 11 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ npm install draftjs-md-converter

The following inline styles are supported:

* bold
* italic
* H1 - H6
- bold
- italic
- H1 - H6

The following block styles are supported:

* ordered list
* unordered list
* block quote
- ordered list
- unordered list
- block quote

The following media types are supported:

* images
* videos (with draft-js-video-plugin, parsing can be done using remark-shortcodes)
- images
- videos (with draft-js-video-plugin, parsing can be done using remark-shortcodes)

## Usage

Expand All @@ -43,6 +43,65 @@ The following media types are supported:

Use [convertToRaw](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html) from the `draft-js library` to convert the resulting RawDraftContentState into a draft-js ContentState.

### Custom inline styles and block styles

The default supported inline styles:

```js
{
Strong: {
type: 'BOLD',
symbol: '__'
},
Emphasis: {
type: 'ITALIC',
symbol: '*'
}
}
```

The default supported block styles:

```js
{
List: 'unordered-list-item',
Header1: 'header-one',
Header2: 'header-two',
Header3: 'header-three',
Header4: 'header-four',
Header5: 'header-five',
Header6: 'header-six',
CodeBlock: 'code-block',
BlockQuote: 'blockquote'
}
```

Inline styles and block styles can be extended or overridden by passing a custom styles object as a second optional argument to `mdToDraftjs`, e.g.

```js
const markdown = "Some `markdown` with ~~deleted~~ text";

const myCustomStyles = {
inlineStyles: {
Delete: {
type: "STRIKETHROUGH",
symbol: "~~",
},
Code: {
type: "CODE",
symbol: "`",
},
},
blockStyles: {
CustomBlock: "custom-block",
},
};

const content = mdToDraftjs(markdown, myCustomStyles);
```

The keys to the `inlineStyles` object should be valid [AST node types](https://github.com/textlint/textlint/blob/master/docs/txtnode.md).

### Converting from Draft.js to Markdown

### `draftjsToMd(rawData: RawDraftContentState): String`
Expand All @@ -64,13 +123,13 @@ The inline styles can be extended or overridden by passing a custom dictionary o

```js
const myMdDict = {
BOLD: '**',
STRIKETHROUGH: '~~'
BOLD: "**",
STRIKETHROUGH: "~~",
};
const markdown = draftjsToMd(blocks, myMdDict);
```

__NOTE: at this point you cannot override block styles!__
**NOTE: at this point you cannot override block styles!**

## Example

Expand Down
Loading