margox / braft-convert Goto Github PK

JavaScript 98.07% HTML 1.93%

braft-convert's Introduction

braft-convert

与braft-editor搭配使用的数据转换工具

使用方法

# use yarn
yarn add braft-convert
# use npm
npm install --save braft-convert

import { convertRawToHTML, convertHTMLToRaw } from 'braft-convert'

const draftRawData = '{"blocks":[{"key":"9hu83","text":"Hello World!","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"BOLD"},{"offset":6,"length":5,"style":"COLOR-F32784"}],"entityRanges":[],"data":{}}],"entityMap":{}}'
const htmlString = '<p>Hello <strong><span style="color:#f32784">World</span></strong>!</p>'

convertRawToHTML(JSON.parse(draftRawData))
// <p>Hello <strong><span style="color:#f32784">World</span></strong>!</p>

JSON.stringify(convertHTMLToRaw(htmlString))
// {"blocks":[{"key":"8v6eh","text":"Hello World!","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":6,"length":5,"style":"BOLD"},{"offset":6,"length":5,"style":"COLOR-F32784"}],"entityRanges":[],"data":{}}],"entityMap":{}}

braft-convert's People

Contributors

Stargazers

Watchers

braft-convert's Issues

Custom block types from blockRenderMap do not translate into `toHTML` conversion.

First off, THANK YOU. This project is amazing and I really like everything you've built, @margox.

I have a small problem.
I have been playing with the editor and trying to render some custom blocks. For example:
I am using ContentUtils.toggleSelectionBlockType and inserting custom block <column-1>.
on the Braft Preview it works great!

However, when saving this HTML to the database, converting custom elements is trickier. I get
convertToHTML: missing HTML definition for block with type "column-1". I want to save HTML String to database ( I know i should use RAW, but right now I need HTML string).

I looked at HubSpot's DraftConvert, and there is options to pass to do something like:

    const convertedHTML = editorState.converToHTML({
      blockToHTML: block => {
        if (block.type.split('-')[0] === 'column') {
          return <div style={{ columnCount: block.type.split('-')[1] }} />;
        }
      },
    })(editorState.getCurrentContent());

however, when i tried to use it, all custom braft styling is now missing! What is your recommendation to convert custom HTML blocks?

toHTML() used with converts={{blockExportFn, blockImportFn}}

Hi,
When I use blockExportFn to export unstyled blocks as divs, the function toHTML() is ignoring styling of alignment and indent. I see that there is specific implementation for these cases in blockToHTML (draft-convert). But for some reason it doesnt happen. Would be happy to understand better (There are no much docs except for https://braft.margox.cn/demos/block page)

Please try to align (center/right) or indent text in the following Sandbox reproduction:
https://codesandbox.io/s/braft-convert-trial-365mw

Thanks

peerDependencies react 17 Unmet peer dependencies

"peerDependencies": {
"react": "^16.0.0"
}
when i user react 17 or 18
Unmet peer dependencies

braft-convert 转换粗体/超链会导致空格丢失

Reproduction link

Steps to reproduce

详情请见重现链接。
复制一段内容下来，将原版和转换后再转回来的内容展示在网页中。
发现braft-convert转换的空格丢失。

convertRawToHTML(convertHTMLToRaw(htmlString));

What is expected?

期望转换后的内容和原版一致。

What is actually happening?

转换后空格丢失

Environment	Info
braft-convert	2.3.0
React	16.8

Backwards Arguments for convertEditorStateToHTML

Ran into a small issue because there isn't a lot of documentation with blockExportFn and styleExportFn:

These two export Fn's expect editorState as 1st or 2nd argument! It is not uniform!

blockExportFn: (editorState, block) => { }; 
styleExportFn: (style, editorState) => { };