diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index 1b0e286ed..917b3b5cc 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -21,12 +21,11 @@ import { length } from 'stringz'; import { countableText } from '../util/counter'; import Icon from 'mastodon/components/icon'; import snarkdown from 'snarkdown'; - +import DOMPurify from 'dompurify'; // import elephantUIPlane from '../../../images/elephant_ui_plane.svg'; // import { mascot } from '../../initial_state'; - const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; const messages = defineMessages({ @@ -39,35 +38,38 @@ const messages = defineMessages({ export default @injectIntl class ComposeForm extends ImmutablePureComponent { + textMarkdownConverted = ''; + static contextTypes = { router: PropTypes.object, }; static propTypes = { - intl : PropTypes.object.isRequired, - text : PropTypes.string.isRequired, - suggestions : ImmutablePropTypes.list, - spoiler : PropTypes.bool, - privacy : PropTypes.string, - spoilerText : PropTypes.string, - focusDate : PropTypes.instanceOf(Date), - caretPosition : PropTypes.number, - maxTootCharsLimit : PropTypes.number, - preselectDate : PropTypes.instanceOf(Date), - isSubmitting : PropTypes.bool, - isChangingUpload : PropTypes.bool, - isUploading : PropTypes.bool, - onChange : PropTypes.func.isRequired, - onSubmit : PropTypes.func.isRequired, - onClearSuggestions : PropTypes.func.isRequired, - onFetchSuggestions : PropTypes.func.isRequired, - onSuggestionSelected: PropTypes.func.isRequired, - onChangeSpoilerText : PropTypes.func.isRequired, - onPaste : PropTypes.func.isRequired, - onPickEmoji : PropTypes.func.isRequired, - showSearch : PropTypes.bool, - anyMedia : PropTypes.bool, - singleColumn : PropTypes.bool, + intl : PropTypes.object.isRequired, + text : PropTypes.string.isRequired, + textMarkdownConverted: PropTypes.string, + suggestions : ImmutablePropTypes.list, + spoiler : PropTypes.bool, + privacy : PropTypes.string, + spoilerText : PropTypes.string, + focusDate : PropTypes.instanceOf(Date), + caretPosition : PropTypes.number, + maxTootCharsLimit : PropTypes.number, + preselectDate : PropTypes.instanceOf(Date), + isSubmitting : PropTypes.bool, + isChangingUpload : PropTypes.bool, + isUploading : PropTypes.bool, + onChange : PropTypes.func.isRequired, + onSubmit : PropTypes.func.isRequired, + onClearSuggestions : PropTypes.func.isRequired, + onFetchSuggestions : PropTypes.func.isRequired, + onSuggestionSelected : PropTypes.func.isRequired, + onChangeSpoilerText : PropTypes.func.isRequired, + onPaste : PropTypes.func.isRequired, + onPickEmoji : PropTypes.func.isRequired, + showSearch : PropTypes.bool, + anyMedia : PropTypes.bool, + singleColumn : PropTypes.bool, }; static defaultProps = { @@ -80,14 +82,18 @@ class ComposeForm extends ImmutablePureComponent { }; handleKeyDown = (e) => { + let markdownConverted = this.convertMarkdown(this.props.text); + console.log('markdownConverted', markdownConverted); + this.render(); if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { this.handleSubmit(); } + }; getFulltextForCharacterCounting = () => { - return [this.props.spoiler? this.props.spoilerText: '', countableText(this.props.text)].join(''); - } + return [this.props.spoiler ? this.props.spoilerText : '', countableText(this.props.text)].join(''); + }; canSubmit = () => { const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props; @@ -95,7 +101,7 @@ class ComposeForm extends ImmutablePureComponent { const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0; return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia)); - } + }; handleSubmit = () => { if (this.props.text !== this.autosuggestTextarea.textarea.value) { @@ -193,13 +199,39 @@ class ComposeForm extends ImmutablePureComponent { this.props.onPickEmoji(position, data, needsSpace); }; - convertMarkdown(){ - let md = '_this_ is **easy** to `use`.'; - let html = snarkdown(md); - console.log(html); + convertMarkdown(markdownInput) { + let md = `# title ouane +* aaaaaa +* bbbbbb +* cccccc +aaaaa + +## title deux +deuuuux + +### title trois + +_this_ is **easy** to \` use\`. + +* aaaaaa +* bbbbbb +* cccccc + +un lien vers [[www.wikipedia.org]] +[un lien vers cipherbliss.com](https://cipherbliss.com) + `; + let html = ''; + if (!markdownInput) { + html = snarkdown(md); + } else { + html = snarkdown(markdownInput); + html = DOMPurify.sanitize(markdownInput); + } + this.textMarkdownConverted = html; + return html; }; - render () { + render() { const { intl, onPaste, showSearch } = this.props; const disabled = this.props.isSubmitting; let publishText = ''; @@ -210,7 +242,6 @@ class ComposeForm extends ImmutablePureComponent { } else { publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); } - this.convertMarkdown(); return (