convert raw editor to Slate

This commit is contained in:
Shawn Erquhart 2017-07-08 23:23:14 -04:00
parent 719c105844
commit ae56ef6dda
6 changed files with 31 additions and 18 deletions

View File

@ -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 {

View File

@ -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;

View File

@ -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);
}

View File

@ -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>
);

View File

@ -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 {

View File

@ -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 {