From 8dfaff890f44ec055b3eb0f321d59d79cf1cb853 Mon Sep 17 00:00:00 2001 From: yoution Date: Sun, 21 Feb 2021 14:29:07 +0800 Subject: [PATCH 1/3] feat: add tui.editor --- package.json | 1 + src/components/TuiEditor/TuiEditor.scss | 55 ++++++++++++++ src/components/TuiEditor/index.jsx | 74 +++++++++++++++++++ .../components/DescriptionField/index.jsx | 15 ++++ .../components/JobPickerRow/JobPickerRow.jsx | 21 +++--- .../components/JobPickerRow/JobPickerRow.scss | 5 ++ 6 files changed, 160 insertions(+), 11 deletions(-) create mode 100644 src/components/TuiEditor/TuiEditor.scss create mode 100644 src/components/TuiEditor/index.jsx create mode 100644 src/projects/detail/components/DescriptionField/index.jsx diff --git a/package.json b/package.json index 64c400265..f3274f439 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ }, "dependencies": { "@contentful/rich-text-react-renderer": "^13.4.0", + "@toast-ui/editor": "^2.5.1", "appirio-tech-react-components": "git+https://github.com/appirio-tech/react-components.git#feature/connectv2", "axios": "^0.19.2", "brace": "^0.11.1", diff --git a/src/components/TuiEditor/TuiEditor.scss b/src/components/TuiEditor/TuiEditor.scss new file mode 100644 index 000000000..972c6d25d --- /dev/null +++ b/src/components/TuiEditor/TuiEditor.scss @@ -0,0 +1,55 @@ +@import '~tc-ui/src/styles/tc-includes'; + +.editor { + background: red; + + > div { + h1 { + all: revert; + font-size: 24px; + } + } + + b, + i, + s, + hr, + blockquote, + ul, + li, + ol, + table, + thead, + tr, + th, + img, + a, + code, + pre { + all: revert; + } + + :global { + .te-heading-add ul { + list-style: none; + } + + .tui-editor-defaultUI .te-mode-switch-section { + display: none !important + } + + // hide uplodd file + .tui-editor-popup{ + box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26); + } + + .te-popup-add-image .te-tab button, .te-popup-add-image .te-file-type{ + display: none !important; + } + + .te-popup-add-image .te-url-type{ + display: block !important; + } + + } +} diff --git a/src/components/TuiEditor/index.jsx b/src/components/TuiEditor/index.jsx new file mode 100644 index 000000000..a7fb34040 --- /dev/null +++ b/src/components/TuiEditor/index.jsx @@ -0,0 +1,74 @@ +// wrap toast-ui editor with react and support react 15 +import React from 'react' +import Editor from '@toast-ui/editor' +import styles from './TuiEditor.scss' +import cn from 'classnames' +import 'codemirror/lib/codemirror.css' +import '@toast-ui/editor/dist/toastui-editor.css' + +export default class extends React.Component { + constructor(props) { + super(props) + this.onValueChange = this.onValueChange.bind(this) + } + + getRootElement() { + return this.refs.rootEl + } + + getInstance() { + return this.editorInst + } + + bindEventHandlers(props) { + Object.keys(props) + .filter(key => /^on[A-Z][a-zA-Z]+/.test(key)) + .forEach(key => { + const eventName = key[2].toLowerCase() + key.slice(3) + this.editorInst.off(eventName) + this.editorInst.on(eventName, props[key]) + }) + } + + componentDidMount() { + const props = { + ...this.props, + onChange: this.onValueChange + } + this.editorInst = new Editor({ + el: this.refs.rootEl, + ...props + }) + this.bindEventHandlers(props) + } + + onValueChange(){ + if (this.props.valueChange) { + this.props.valueChange(this.getInstance().getMarkdown()) + } + } + + shouldComponentUpdate(nextProps) { + const instance = this.getInstance() + const { height, previewStyle, className } = nextProps + + if (this.props.height !== height) { + instance.height(height) + } + + if (this.props.previewStyle !== previewStyle) { + instance.changePreviewStyle(previewStyle) + } + + if (this.props.className !== className) { + return true + } + this.bindEventHandlers(nextProps, this.props) + + return false + } + + render() { + return
+ } +} diff --git a/src/projects/detail/components/DescriptionField/index.jsx b/src/projects/detail/components/DescriptionField/index.jsx new file mode 100644 index 000000000..b2769d88a --- /dev/null +++ b/src/projects/detail/components/DescriptionField/index.jsx @@ -0,0 +1,15 @@ +import React from 'react' + +import Editor from '../../../../components/TuiEditor' + +const DescriptionField = (props) => ( + +) + +export default DescriptionField diff --git a/src/projects/detail/components/JobPickerRow/JobPickerRow.jsx b/src/projects/detail/components/JobPickerRow/JobPickerRow.jsx index 986ecb846..e38319c83 100644 --- a/src/projects/detail/components/JobPickerRow/JobPickerRow.jsx +++ b/src/projects/detail/components/JobPickerRow/JobPickerRow.jsx @@ -7,6 +7,7 @@ import IconAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg' import SkillsQuestion from '../SkillsQuestion/SkillsQuestionBase' import PositiveNumberInput from '../../../../components/PositiveNumberInput/PositiveNumberInput' import SelectDropdown from 'appirio-tech-react-components/components/SelectDropdown/SelectDropdown' +import DescriptionField from '../DescriptionField' import styles from './JobPickerRow.scss' @@ -73,8 +74,8 @@ class JobPickerRow extends React.PureComponent { this.props.onChange(this.props.rowIndex, 'role', evt) } - handleDescriptionChange(evt) { - this.props.onChange(this.props.rowIndex, 'description', evt.target.value) + handleDescriptionChange(value) { + this.props.onChange(this.props.rowIndex, 'description', value) } resetDuration() { @@ -229,20 +230,18 @@ class JobPickerRow extends React.PureComponent { />
) + const descriptionColumn = (
-
-