From 0218dc99c0ddee1d4d85939798bf049e652ccdd9 Mon Sep 17 00:00:00 2001 From: Guiqiang Zhang Date: Sun, 25 Oct 2020 20:26:38 +0800 Subject: [PATCH 1/6] fix for job descriptionn --- .../profile/work/tc-text-16-bold-active.svg | 3 + .../settings/profile/work/tc-text-16-bold.svg | 3 + .../profile/work/tc-text-16-italic-active.svg | 3 + .../profile/work/tc-text-16-italic.svg | 3 + .../work/tc-text-16-underline-active.svg | 6 + .../profile/work/tc-text-16-underline.svg | 6 + .../work/text-16px_list-bullet-active.svg | 12 + .../profile/work/text-16px_list-bullet.svg | 12 + .../work/text-16px_list-numbers-active.svg | 23 ++ .../profile/work/text-16px_list-numbers.svg | 23 ++ src/shared/components/Editor/index.jsx | 77 +++- .../Profile/Work/List/Item/_mixin.scss | 42 +++ .../Settings/Profile/Work/List/Item/index.jsx | 37 +- .../Profile/Work/List/Item/styles.scss | 49 +++ .../Settings/Profile/Work/Toolbar/index.jsx | 176 ++++++++++ .../Settings/Profile/Work/Toolbar/style.scss | 37 ++ .../Settings/Profile/Work/index.jsx | 332 +++++++++++++++++- .../Settings/Profile/Work/styles.scss | 195 +++++++++- src/shared/containers/Settings.jsx | 2 + src/shared/utils/settings.js | 18 +- 20 files changed, 1011 insertions(+), 48 deletions(-) create mode 100644 src/assets/images/settings/profile/work/tc-text-16-bold-active.svg create mode 100644 src/assets/images/settings/profile/work/tc-text-16-bold.svg create mode 100644 src/assets/images/settings/profile/work/tc-text-16-italic-active.svg create mode 100644 src/assets/images/settings/profile/work/tc-text-16-italic.svg create mode 100644 src/assets/images/settings/profile/work/tc-text-16-underline-active.svg create mode 100644 src/assets/images/settings/profile/work/tc-text-16-underline.svg create mode 100644 src/assets/images/settings/profile/work/text-16px_list-bullet-active.svg create mode 100644 src/assets/images/settings/profile/work/text-16px_list-bullet.svg create mode 100644 src/assets/images/settings/profile/work/text-16px_list-numbers-active.svg create mode 100644 src/assets/images/settings/profile/work/text-16px_list-numbers.svg create mode 100644 src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss create mode 100644 src/shared/components/Settings/Profile/Work/Toolbar/index.jsx create mode 100644 src/shared/components/Settings/Profile/Work/Toolbar/style.scss diff --git a/src/assets/images/settings/profile/work/tc-text-16-bold-active.svg b/src/assets/images/settings/profile/work/tc-text-16-bold-active.svg new file mode 100644 index 0000000000..3aa72fbbae --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-bold-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/settings/profile/work/tc-text-16-bold.svg b/src/assets/images/settings/profile/work/tc-text-16-bold.svg new file mode 100644 index 0000000000..133a76cf16 --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/settings/profile/work/tc-text-16-italic-active.svg b/src/assets/images/settings/profile/work/tc-text-16-italic-active.svg new file mode 100644 index 0000000000..4be060733d --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-italic-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/settings/profile/work/tc-text-16-italic.svg b/src/assets/images/settings/profile/work/tc-text-16-italic.svg new file mode 100644 index 0000000000..df5bb5e7be --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/settings/profile/work/tc-text-16-underline-active.svg b/src/assets/images/settings/profile/work/tc-text-16-underline-active.svg new file mode 100644 index 0000000000..9586af3aa8 --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-underline-active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/settings/profile/work/tc-text-16-underline.svg b/src/assets/images/settings/profile/work/tc-text-16-underline.svg new file mode 100644 index 0000000000..26d903b0fe --- /dev/null +++ b/src/assets/images/settings/profile/work/tc-text-16-underline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/images/settings/profile/work/text-16px_list-bullet-active.svg b/src/assets/images/settings/profile/work/text-16px_list-bullet-active.svg new file mode 100644 index 0000000000..568ce8ffb3 --- /dev/null +++ b/src/assets/images/settings/profile/work/text-16px_list-bullet-active.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + diff --git a/src/assets/images/settings/profile/work/text-16px_list-bullet.svg b/src/assets/images/settings/profile/work/text-16px_list-bullet.svg new file mode 100644 index 0000000000..df85bf388f --- /dev/null +++ b/src/assets/images/settings/profile/work/text-16px_list-bullet.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + diff --git a/src/assets/images/settings/profile/work/text-16px_list-numbers-active.svg b/src/assets/images/settings/profile/work/text-16px_list-numbers-active.svg new file mode 100644 index 0000000000..302f06e53f --- /dev/null +++ b/src/assets/images/settings/profile/work/text-16px_list-numbers-active.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/src/assets/images/settings/profile/work/text-16px_list-numbers.svg b/src/assets/images/settings/profile/work/text-16px_list-numbers.svg new file mode 100644 index 0000000000..9baebe060d --- /dev/null +++ b/src/assets/images/settings/profile/work/text-16px_list-numbers.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + diff --git a/src/shared/components/Editor/index.jsx b/src/shared/components/Editor/index.jsx index 40762b3513..58cc02b467 100644 --- a/src/shared/components/Editor/index.jsx +++ b/src/shared/components/Editor/index.jsx @@ -46,30 +46,27 @@ export default class EditorWrapper extends React.Component { this.customPlugin = createCustomPlugin({ editor: this, }); + + this.onBeforeInput = this.onBeforeInput.bind(this); + this.onPasteText = this.onPasteText.bind(this); } componentDidMount() { const { connector, initialContent } = this.props; connector.addEditor(this); - if (initialContent) { - let editorState = convertFromHTML(initialContent); - editorState = ContentState.createFromBlockArray( - editorState.contentBlocks, - editorState.entityMap, - ); - editorState = EditorState.createWithContent(editorState); - this.initialContent = editorState.getCurrentContent(); - setImmediate(() => this.setState({ editor: editorState })); - } + this.setInitialContent(initialContent); } - componentWillReceiveProps({ connector, id }) { - const { connector: prevConnector } = this.props; + componentWillReceiveProps({ connector, id, initialContent }) { + const { connector: prevConnector, initialContent: prevInitialContent } = this.props; this.id = id; if (connector !== prevConnector) { if (prevConnector) prevConnector.removeEditor(this); if (connector) connector.addEditor(this); } + if (initialContent !== prevInitialContent) { + this.setInitialContent(initialContent); + } } componentWillUnmount() { @@ -77,6 +74,41 @@ export default class EditorWrapper extends React.Component { connector.removeEditor(this); } + onBeforeInput() { // eslint-disable-line consistent-return + const { maxLength } = this.props; + const { editor: editorState } = this.state; + if (maxLength !== -1 && maxLength <= editorState.getCurrentContent().getPlainText('').length) { + return 'handled'; + } + } + + onPasteText(text) { // eslint-disable-line consistent-return + const { maxLength } = this.props; + const { editor: editorState } = this.state; + if (maxLength !== -1 && maxLength <= text.length + editorState.getCurrentContent().getPlainText('').length) { + return 'handled'; + } + } + + setInitialContent(content) { + if (content) { + let editorState = convertFromHTML(content); + if (editorState.contentBlocks) { + editorState = ContentState.createFromBlockArray( + editorState.contentBlocks, + editorState.entityMap, + ); + editorState = EditorState.createWithContent(editorState); + this.initialContent = editorState.getCurrentContent(); + setImmediate(() => this.setState({ editor: editorState })); + } + } else { + let { editor: editorState } = this.state; + editorState = EditorState.push(editorState, ContentState.createFromText('')); + this.setState({ editor: editorState }); + } + } + getHtml() { const { editor } = this.state; return editorStateToHTML(editor.getCurrentContent()); @@ -98,10 +130,9 @@ export default class EditorWrapper extends React.Component { * @param {String} type The new block style */ applyBlockStyle(type) { - const { editor } = this.state; - let editorState = editor; + let { editor: editorState } = this.state; editorState = RichUtils.toggleBlockType(editorState, type); - this.setState({ editorState }); // eslint-disable-line + this.setState({ editor: editorState }); // eslint-disable-line } /** @@ -231,13 +262,16 @@ export default class EditorWrapper extends React.Component { } render() { - const { connector, theme } = this.props; + const { connector, theme, placeholder } = this.props; const st = this.state; let containerStyles = style.container; if (st.editor.getSelection().getHasFocus()) { - containerStyles += ` ${style.focused}`; + containerStyles += ` ${style.focused} is-focused`; + } + if (st.editor.getCurrentContent().hasText() || /
    |