improve rte pasting
This commit is contained in:
parent
54e77bd80c
commit
5cbc76da68
@ -83,7 +83,12 @@ export default class RawEditor extends React.Component {
|
|||||||
super(props);
|
super(props);
|
||||||
const plugins = registry.getEditorComponents();
|
const plugins = registry.getEditorComponents();
|
||||||
this.state = {
|
this.state = {
|
||||||
value: this.props.value,
|
value: unified()
|
||||||
|
.use(htmlToRehype, rehypeParseConfig)
|
||||||
|
.use(rehypeToRemark)
|
||||||
|
.use(remarkToMarkdown, remarkStringifyConfig)
|
||||||
|
.processSync(this.props.value)
|
||||||
|
.contents,
|
||||||
plugins,
|
plugins,
|
||||||
};
|
};
|
||||||
this.shortcuts = {
|
this.shortcuts = {
|
||||||
@ -97,13 +102,6 @@ export default class RawEditor extends React.Component {
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.updateHeight();
|
this.updateHeight();
|
||||||
this.element.addEventListener('paste', this.handlePaste, false);
|
this.element.addEventListener('paste', this.handlePaste, false);
|
||||||
const markdown = unified()
|
|
||||||
.use(htmlToRehype, rehypeParseConfig)
|
|
||||||
.use(rehypeToRemark)
|
|
||||||
.use(remarkToMarkdown, remarkStringifyConfig)
|
|
||||||
.processSync(this.state.value)
|
|
||||||
.contents;
|
|
||||||
this.setState({ value: markdown });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate() {
|
||||||
|
@ -247,6 +247,14 @@ export default class Editor extends Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handlePaste = (e, data, state) => {
|
||||||
|
if (data.type !== 'html' || data.isShift) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const fragment = serializer.deserialize(data.html).document;
|
||||||
|
return state.transform().insertFragment(fragment).apply();
|
||||||
|
}
|
||||||
|
|
||||||
handleDocumentChange = (doc, editorState) => {
|
handleDocumentChange = (doc, editorState) => {
|
||||||
const html = serializer.serialize(editorState);
|
const html = serializer.serialize(editorState);
|
||||||
this.props.onChange(html);
|
this.props.onChange(html);
|
||||||
@ -445,6 +453,7 @@ export default class Editor extends Component {
|
|||||||
onChange={editorState => this.setState({ editorState })}
|
onChange={editorState => this.setState({ editorState })}
|
||||||
onDocumentChange={this.handleDocumentChange}
|
onDocumentChange={this.handleDocumentChange}
|
||||||
onKeyDown={this.onKeyDown}
|
onKeyDown={this.onKeyDown}
|
||||||
|
onPaste={this.handlePaste}
|
||||||
ref={ref => this.ref = ref}
|
ref={ref => this.ref = ref}
|
||||||
spellCheck
|
spellCheck
|
||||||
/>
|
/>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
export const remarkParseConfig = { pedantic: true, footnotes: true, fences: true };
|
export const remarkParseConfig = { fences: true };
|
||||||
export const remarkStringifyConfig = { pedantic: true, fences: true };
|
export const remarkStringifyConfig = { fences: true };
|
||||||
export const rehypeParseConfig = { fragment: true };
|
export const rehypeParseConfig = { fragment: true };
|
||||||
export const rehypeStringifyConfig = {};
|
export const rehypeStringifyConfig = {};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user