convert raw editor to Slate
This commit is contained in:
parent
719c105844
commit
ae56ef6dda
@ -8,8 +8,8 @@
|
||||
|
||||
& input,
|
||||
& textarea,
|
||||
& select {
|
||||
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
& select,
|
||||
& div[contenteditable=true] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
@ -28,6 +28,12 @@
|
||||
border-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
|
||||
& input,
|
||||
& textarea,
|
||||
& select {
|
||||
font-family: var(--fontFamilyMono);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
|
@ -1,4 +1,6 @@
|
||||
:root {
|
||||
--fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--fontFamilyMono: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
--defaultColor: #333;
|
||||
--defaultColorLight: #fff;
|
||||
--backgroundColor: #fff;
|
||||
|
@ -12,8 +12,10 @@
|
||||
composes: editorControlBarSticky from "../VisualEditor/index.css";
|
||||
}
|
||||
|
||||
.textarea {
|
||||
.SlateEditor {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
overflow-x: auto;
|
||||
min-height: var(--richTextEditorMinHeight);
|
||||
font-family: var(--fontFamilyMono);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { Editor as SlateEditor, Plain as SlatePlain } from 'slate';
|
||||
import { markdownToHtml, htmlToMarkdown } from '../../unified';
|
||||
import Toolbar from '../Toolbar/Toolbar';
|
||||
import { Sticky } from '../../../../UI/Sticky/Sticky';
|
||||
@ -8,15 +8,20 @@ import styles from './index.css';
|
||||
export default class RawEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const value = htmlToMarkdown(this.props.value);
|
||||
this.state = {
|
||||
value: htmlToMarkdown(this.props.value) || '',
|
||||
editorState: SlatePlain.deserialize(value || ''),
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (e) => {
|
||||
const html = markdownToHtml(e.target.value);
|
||||
handleChange = editorState => {
|
||||
this.setState({ editorState });
|
||||
}
|
||||
|
||||
handleDocumentChange = (doc, editorState) => {
|
||||
const value = SlatePlain.serialize(editorState);
|
||||
const html = markdownToHtml(value);
|
||||
this.props.onChange(html);
|
||||
this.setState({ value: e.target.value });
|
||||
};
|
||||
|
||||
handleToggleMode = () => {
|
||||
@ -33,10 +38,11 @@ export default class RawEditor extends React.Component {
|
||||
>
|
||||
<Toolbar onToggleMode={this.handleToggleMode} disabled rawMode />
|
||||
</Sticky>
|
||||
<TextareaAutosize
|
||||
className={styles.textarea}
|
||||
value={this.state.value}
|
||||
<SlateEditor
|
||||
className={styles.SlateEditor}
|
||||
state={this.state.editorState}
|
||||
onChange={this.handleChange}
|
||||
onDocumentChange={this.handleDocumentChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -70,13 +70,10 @@
|
||||
|
||||
.slateEditor {
|
||||
position: relative;
|
||||
background-color: var(--controlBGColor);
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--borderRadius);
|
||||
overflow-x: auto;
|
||||
border: var(--textFieldBorder);
|
||||
min-height: var(--richTextEditorMinHeight);
|
||||
font-family: var(--fontFamily);
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
|
@ -13,7 +13,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-family: var(--fontFamily);
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
color: #7c8382;
|
||||
@ -22,7 +22,7 @@ body {
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-family: var(--fontFamily);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user