78 lines
1.6 KiB
JavaScript
78 lines
1.6 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { State, Document, Editor } from 'slate';
|
|
import MarkdownSerializer from '../Editor/serializer';
|
|
import type { State as StateType } from '../Editor/types';
|
|
import schema from '../Editor/schema';
|
|
import styles from '../Editor/Editor.scss';
|
|
|
|
type Props = {
|
|
text: string,
|
|
className: string,
|
|
limit: number,
|
|
};
|
|
|
|
function filterDocumentState({ state, characterLimit, nodeLimit }) {
|
|
const { document } = state;
|
|
if (document.text.length <= characterLimit) {
|
|
return state;
|
|
}
|
|
|
|
let totalCharacters = 0;
|
|
let totalNodes = 0;
|
|
const nodes = document.nodes.filter(childNode => {
|
|
if (childNode.text.length + totalCharacters <= characterLimit) {
|
|
totalCharacters += childNode.text.length;
|
|
|
|
if (totalNodes++ <= nodeLimit) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
});
|
|
|
|
return State.create({
|
|
document: Document.create({
|
|
...document,
|
|
nodes: nodes,
|
|
}),
|
|
});
|
|
}
|
|
|
|
class Markdown extends React.Component {
|
|
props: Props;
|
|
|
|
state: {
|
|
state: StateType,
|
|
};
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
const state = MarkdownSerializer.deserialize(props.text);
|
|
const options = {
|
|
state,
|
|
characterLimit: props.limit,
|
|
nodeLimit: 5,
|
|
};
|
|
|
|
this.state = {
|
|
state: filterDocumentState(options),
|
|
};
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<span className={this.props.className}>
|
|
<Editor
|
|
className={styles.editor}
|
|
schema={schema}
|
|
state={this.state.state}
|
|
readOnly
|
|
/>
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Markdown;
|