Notes

import React, { Component, Fragment } from "react";
import { Card, Col, Button, Form } from "react-bootstrap";
import { connect } from "react-redux";
import { Editor } from "@tinymce/tinymce-react";
import DOMPurify from "dompurify";
import tinymce from "tinymce/tinymce";
// Theme
import "tinymce/themes/silver";
// Toolbar icons
import "tinymce/icons/default";
// Editor styles
import "tinymce/skins/ui/oxide/skin.min.css";

import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";

import { saveRichText, clearEditRichText } from "../../actions/actions";
import "./tinymce/RichText.css";

class RichText extends Component {
state = {
editorState: "",
error: "",
html: undefined,
focus: false,
maxChars: 10000,
};

static getDerivedStateFromProps(props, state) {
if (props.editText) {
props.clearEditRichText();
return { editorState: props.editText };
}
return null;
}

handleEditorChange = (e, editor) => {
let wordcount = undefined;
let charCount = 0;
let error = false;
if (editor) {
wordcount = editor.plugins.wordcount;
charCount = wordcount.body.getCharacterCount();
}
if (charCount > this.state.maxChars) {
error = true;
}
this.setState(
{
editorState: e,
error: error,
},
() => {
if (this.state.error) {
this.setState({
error:
this.state.editorState.length <= 0 ||
charCount > this.state.maxChars,
});
}
}
);
};

saveHandler = () => {
if (this.state.editorState && !this.state.error) {
const cleanHTML = DOMPurify.sanitize(this.state.editorState);
this.props.saveRichText(cleanHTML);
this.handleEditorChange("");
this.setState({ html: cleanHTML });
} else {
this.setState({ error: true });
}
};

clearHandler = () => {
this.handleEditorChange("");
};

activatefocus = () => {
this.setState({ focus: true });
};

deactivateFocus = () => {
this.setState({ focus: false });
};

handleChange = (editor) => {
console.log(editor);
};

contentStyles = `
p {
margin: 0;
}
`;

render() {
let wordcount = undefined;
let charCount = 0;
if (tinymce.activeEditor) {
wordcount = tinymce.activeEditor.plugins.wordcount;
charCount = wordcount.body.getCharacterCount();
}

return (
<Fragment>
<Col
sm={12}
md={12}
lg={{ span: 10, offset: 1 }}
xl={{ span: 8, offset: 2 }}
>
<Card>
<Card.Body>
<div
className={
this.state.error
? "isInvalid"
: this.state.focus
? "focused"
: ""
}
>
<Editor
value={this.state.editorState}
// apiKey="555ujed7ch399hd5b2scnn3ji4v0s6fjkb57o2zplugoxq8p"
tinymceScriptSrc={
"C:\Yusuf\Codebase\tiny-mce-test\public\tinymce\tinymce.min.js"
}
// tinymceScriptSrc={tinymce}
// initialValue={this.state.editorState}
init={{
setup: (editor) => {
editor.on("focusin", (e) => {
this.activatefocus();
});
editor.on("focusout", (e) => {
this.deactivateFocus();
});
},
// content_css: "tinymce.css",
height: 300,
menubar: false,
selector: "textarea",
// plugins: [
// "advlist autolink lists link image",
// "charmap print preview anchor help",
// "searchreplace visualblocks code",
// "insertdatetime media table paste wordcount",
// ],
plugins: "lists wordcount",
// toolbar:
// "undo redo | formatselect | bold italic |
// alignleft aligncenter alignright |
// bullist numlist outdent indent | help",
toolbar:
"fontsizeselect bold italic underline forecolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent",
statusbar: false,
toolbar_location: "bottom",
skin: "oxide",
// max_chars: 10,
// skin: false,
content_style: this.contentStyles,
toolbar_mode: "wrap",
mobile: {
toolbar_mode: "wrap",
},
// content_style: [contentCss, contentUiCss].join("n"),
}}
onEditorChange={this.handleEditorChange}
/>
</div>
<Form.Text muted>
{charCount}/10000 <b>Characters</b>
</Form.Text>
<Form.Text
className={this.state.error ? "errorMessage" : "hiddenText"}
>
Empty or exceeds maximum allowed characters
</Form.Text>
<Button
className=" buttons mt-2 mr-2 mb-2"
onClick={this.saveHandler}
>
Save
</Button>
<Button className="buttons m-2" onClick={this.clearHandler}>
Clear
</Button>
<hr />
<div>{this.state.html ? this.state.html : null}</div>
</Card.Body>
</Card>
</Col>
</Fragment>
);
}
}

const mapStateToProps = (state) => ({
htmlTexts: state.RichTextReducer.savedTextsAsHTML,
editText: state.RichTextReducer.editText,
});

const mapDispatchToProps = (dispatch) => ({
saveRichText: (params) => dispatch(saveRichText(params)),
clearEditRichText: () => dispatch(clearEditRichText()),
});

export default connect(mapStateToProps, mapDispatchToProps)(RichText);