diff --git a/.circleci/config.yml b/.circleci/config.yml index a32f2f31f..1187420eb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -136,7 +136,7 @@ workflows: - build-dev filters: branches: - only: ['feature/taas-jobs-2'] + only: ['hotfix/taas-job-editor-improvements'] - deployProd: context : org-global diff --git a/src/components/TuiEditor/TuiEditor.scss b/src/components/TuiEditor/TuiEditor.scss index e511d7545..7ac8ce2af 100644 --- a/src/components/TuiEditor/TuiEditor.scss +++ b/src/components/TuiEditor/TuiEditor.scss @@ -8,11 +8,11 @@ all: revert; font-size: 24px; } - } + } - b, + b, i, - s, + s, hr, blockquote, ul, @@ -33,7 +33,7 @@ // add style for heading list in headings selection popup, because 'all:revert' has been setted before .te-heading-add ul { list-style: none; - } + } // hide uplodd file .tui-editor-popup{ diff --git a/src/components/TuiEditor/index.jsx b/src/components/TuiEditor/index.jsx index bd23dc3c1..7e262ee50 100644 --- a/src/components/TuiEditor/index.jsx +++ b/src/components/TuiEditor/index.jsx @@ -1,5 +1,5 @@ /* - * TuiEditor + * TuiEditor * wrap toast-ui editor with react and support react 15 */ @@ -33,6 +33,12 @@ class TuiEditor extends React.Component { this.editorInst.off(eventName) this.editorInst.on(eventName, props[key]) }) + + // always add `https` to the links if link was added without `http` or `https` + this.editorInst.on('convertorAfterHtmlToMarkdownConverted', (inputMarkdown) => { + const outputMarkdown = inputMarkdown.replace(/\[([^\]]*)\]\((?!https?)([^)]+)\)/g, '[$1](https://$2)') + return outputMarkdown + }) } componentDidMount() { @@ -47,6 +53,17 @@ class TuiEditor extends React.Component { this.bindEventHandlers(props) } + componentWillUnmount() { + Object.keys(this.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.off('convertorAfterHtmlToMarkdownConverted') + } + handleValueChange(){ if (this.props.onChange) { this.props.onChange(this.getInstance().getMarkdown()) @@ -68,7 +85,11 @@ class TuiEditor extends React.Component { if (this.props.className !== className) { return true } - // this.bindEventHandlers(nextProps, this.props) + + // this looks like a bed idea to re-subscribe all the event on each re-render + // also, note, that we had to disable this.editorInst.off(eventName); + // otherwise popup for choosing Headings never closes + // this.bindEventHandlers(nextProps, this.props); return false } @@ -132,7 +153,7 @@ TuiEditor.propTypes = { // use default htmlSanitizer useDefaultHTMLSanitizer: PropTypes.bool, // toolbar items. - toolbarItems: PropTypes.arrayOf(PropTypes.object), + toolbarItems: PropTypes.arrayOf(PropTypes.oneOfType(PropTypes.object, PropTypes.string)), // Array of plugins. A plugin can be either a function or an array in the form of [function, options]. plugins: PropTypes.arrayOf(PropTypes.object), // Using extended Autolinks specified in GFM spec diff --git a/src/projects/detail/components/DescriptionField/DescriptionField.scss b/src/projects/detail/components/DescriptionField/DescriptionField.scss new file mode 100644 index 000000000..f83064c70 --- /dev/null +++ b/src/projects/detail/components/DescriptionField/DescriptionField.scss @@ -0,0 +1,18 @@ +@import '~tc-ui/src/styles/tc-includes'; + +.description-editor { + :global { + .tui-editor-contents { + code { + background-color: transparent; + color: inherit; + } + + pre { + background-color: transparent; + color: inherit; + padding: 0; + } + } + } +} diff --git a/src/projects/detail/components/DescriptionField/index.jsx b/src/projects/detail/components/DescriptionField/index.jsx index 4c076fcff..1dbc2ea86 100644 --- a/src/projects/detail/components/DescriptionField/index.jsx +++ b/src/projects/detail/components/DescriptionField/index.jsx @@ -6,10 +6,30 @@ import React from 'react' import PropTypes from 'prop-types' import TuiEditor from '../../../../components/TuiEditor' +import './DescriptionField.scss' const DescriptionField = (props) => (