Merge pull request #1192 from matrix-org/t3chguy/markdown_allow_u

Allow underline through MD and in RTE (MD) using <u> which works with CM

src/Markdown.js

@@ -17,7 +17,7 @@ limitations under the License.
 import commonmark from 'commonmark';
 import escape from 'lodash/escape';
 
-const ALLOWED_HTML_TAGS = ['del'];
+const ALLOWED_HTML_TAGS = ['del', 'u'];
 
 // These types of node are definitely text
 const TEXT_NODES = ['text', 'softbreak', 'linebreak', 'paragraph', 'document'];

src/components/views/rooms/MessageComposer.js

@@ -21,7 +21,6 @@ import Modal from '../../../Modal';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import Autocomplete from './Autocomplete';
-import classNames from 'classnames';
 import UserSettingsStore from '../../../UserSettingsStore';
 
 
@@ -408,14 +407,10 @@ export default class MessageComposer extends React.Component {
                 const active = style.includes(name) || blockType === name;
                 const suffix = active ? '-o-n' : '';
                 const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
-                const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
-                const className = classNames("mx_MessageComposer_format_button", {
-                    mx_MessageComposer_format_button_disabled: disabled,
-                    mx_filterFlipColor: true,
-                });
+                const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
                 return <img className={className}
                             title={ _t(name) }
-                            onMouseDown={disabled ? null : onFormatButtonClicked}
+                            onMouseDown={onFormatButtonClicked}
                             key={name}
                             src={`img/button-text-${name}${suffix}.svg`}
                             height="17" />;

src/components/views/rooms/MessageComposerInput.js

@@ -420,7 +420,7 @@ export default class MessageComposerInput extends React.Component {
             const modifyFn = {
                 'bold': (text) => `**${text}**`,
                 'italic': (text) => `*${text}*`,
-                'underline': (text) => `_${text}_`, // there's actually no valid underline in Markdown, but *shrug*
+                'underline': (text) => `<u>${text}</u>`,
                 'strike': (text) => `<del>${text}</del>`,
                 'code-block': (text) => `\`\`\`\n${text}\n\`\`\`\n`,
                 'blockquote': (text) => text.split('\n').map((line) => `> ${line}\n`).join('') + '\n',
@@ -431,7 +431,7 @@ export default class MessageComposerInput extends React.Component {
             const selectionAfterOffset = {
                 'bold': -2,
                 'italic': -1,
-                'underline': -1,
+                'underline': -4,
                 'strike': -6,
                 'code-block': -5,
                 'blockquote': -2,