https://github.com/thundernet8/draftjs-to-html-fork
🙇 draftjs raw content to html convertor with code highlight support
https://github.com/thundernet8/draftjs-to-html-fork
Last synced: about 1 month ago
JSON representation
🙇 draftjs raw content to html convertor with code highlight support
- Host: GitHub
- URL: https://github.com/thundernet8/draftjs-to-html-fork
- Owner: thundernet8
- License: mit
- Created: 2017-10-19T17:33:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-26T14:59:49.000Z (over 8 years ago)
- Last Synced: 2025-02-12T13:13:14.814Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# draftjs-to-html-fork
draftjs raw content to html convertor with code highlight handling support.
# Note
This is a fork and modified verision of draftjs-to-html package, the very most change is add code highlight support.
The `code` block will wrapped with `
` and `
`. And the source code text will treated by prismjs library. What more you should do is to choose a code highlight stylesheet file as you like from [prismjs](http://prismjs.com/). The [highlightStyleSample.css](highlightStyleSample.css) is one of them.
## Installation
`npm install draftjs-to-html-fork`
## Usage
```
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html-fork';
const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(
contentState,
hashtagConfig,
directional,
customEntityTransform
);
```
The function parameters are:
1. **contentState**: Its instance of [RawDraftContentState](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content)
2. **hashConfig**: Its configuration object for hashtag, its required only if hashtags are used. If the object is not defined hashtags will be output as simple text in the markdown.
```
hashConfig = {
trigger: '#',
separator: ' ',
}
```
Here trigger is character that marks starting of hashtag (default '#') and separator is character that separates characters (default ' '). These fields in hastag object are optional.
3. **directional**: Boolean, if directional is true text is aligned according to bidi algorithm. This is also optional.
4. **customEntityTransform**: Its function to render custom defined entities by user, its also optional.
**editorState** is instance of DraftJS [EditorState](https://draftjs.org/docs/api-reference-editor-state.html#content).
## Supported conversions
Following is the list of conversions it supports:
1. Convert block types to corresponding HTML tags:
|| Block Type | HTML Tag |
| -------- | -------- | -------- |
| 1 | header-one | h1 |
| 2 | header-two | h2 |
| 3 | header-three | h3 |
| 4 | header-four | h4 |
| 5 | header-five | h5 |
| 6 | header-six | h6 |
| 7 | unordered-list-item | ul |
| 8 | ordered-list-item | ol |
| 9 | blockquote | blockquote |
| 10 | code | pre |
| 11 | unstyled | p |
It performs these additional changes to text of blocks:
- replace blank space in beginning and end of block with `Â `
- replace `\n` with `
`
- replace `<` with `<`
- replace `>` with `>`
2. Converts ordered and unordered list blocks with depths to nested structure of `
- ,
- `.
3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: `, , ,
, , `.4. Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
``. (The inline styles in JSON object should start with strings `color` or `font-size` like `color-red`, `color-green` or `fontsize-12`, `fontsize-20`).5. Converts entity range of type link to anchor tag using entity data url for href, target for target: `text`. Default target is `_self`.
6. Converts entity range of type mention to anchor tag using entity data url for href and value for data-value, it also adds class to it: `text`.
7. Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also: `
`.
8. Converts embedded links to iFrames, using width, height and src from entity data. ``
9. Converts hashtags to anchor tag: `#tag`.
9. `customEntityTransform` can be used for transformation of a custom entity block to html. If present its call to generate html for entity. It can take 2 parameter:
1. `entity` ( object with { type, mutalibity, data})
2. `text` text present in the block.10. Adding style property to block tag for block level styles like text-align: `
text
`.11. RTL, if directional function parameter is true, generated blocks have property `dir = "auto"` thus they get aligned according to bidi algorithm.
## License
MIT.
- ` and `