From 20a3221c4be9aa32e202df94989982b3017e44e7 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Fri, 12 Jun 2020 12:01:54 -0400 Subject: [PATCH 1/5] Rich Text Editor (WIP) --- app/javascript/gabsocial/actions/compose.js | 13 +-- .../gabsocial/actions/importer/normalizer.js | 65 ++++++++++++-- app/javascript/gabsocial/actions/statuses.js | 1 + .../components/autosuggest_textbox.js | 15 ++-- .../gabsocial/components/composer.js | 40 +++++---- .../compose/components/compose_form.js | 20 ++--- app/javascript/styles/global.css | 20 ++++- app/lib/formatter.rb | 88 ------------------- app/serializers/rest/status_serializer.rb | 6 +- package.json | 2 + yarn.lock | 13 +++ 11 files changed, 144 insertions(+), 139 deletions(-) diff --git a/app/javascript/gabsocial/actions/compose.js b/app/javascript/gabsocial/actions/compose.js index f476da49..0aecfcaa 100644 --- a/app/javascript/gabsocial/actions/compose.js +++ b/app/javascript/gabsocial/actions/compose.js @@ -263,7 +263,7 @@ export function submitCompose(group, replyToId = null, router, isStandalone) { if (!me) return; let status = getState().getIn(['compose', 'text'], ''); - const markdown = getState().getIn(['compose', 'markdown'], ''); + let markdown = getState().getIn(['compose', 'markdown'], ''); const media = getState().getIn(['compose', 'media_attachments']); // : hack : @@ -276,10 +276,13 @@ export function submitCompose(group, replyToId = null, router, isStandalone) { } return hasProtocol ? match : `http://${match}` }) - // markdown = statusMarkdown.replace(urlRegex, (match) =>{ - // const hasProtocol = match.startsWith('https://') || match.startsWith('http://') - // return hasProtocol ? match : `http://${match}` - // }) + markdown = markdown.replace(urlRegex, (match) =>{ + const hasProtocol = match.startsWith('https://') || match.startsWith('http://') + if (!hasProtocol) { + if (status.indexOf(`@${match}`) > -1) return match + } + return hasProtocol ? match : `http://${match}` + }) const inReplyToId = getState().getIn(['compose', 'in_reply_to'], null) || replyToId diff --git a/app/javascript/gabsocial/actions/importer/normalizer.js b/app/javascript/gabsocial/actions/importer/normalizer.js index eaa4ca17..ac17d6b6 100644 --- a/app/javascript/gabsocial/actions/importer/normalizer.js +++ b/app/javascript/gabsocial/actions/importer/normalizer.js @@ -1,9 +1,12 @@ -import escapeTextContentForBrowser from 'escape-html'; -import emojify from '../../components/emoji/emoji'; -import { unescapeHTML } from '../../utils/html'; -import { expandSpoilers } from '../../initial_state'; +import escapeTextContentForBrowser from 'escape-html' +import { markdownToDraft } from 'markdown-draft-js' +import { Remarkable } from 'remarkable' +import * as entities from 'entities' +import emojify from '../../components/emoji/emoji' +import { unescapeHTML } from '../../utils/html' +import { expandSpoilers } from '../../initial_state' -const domParser = new DOMParser(); +const domParser = new DOMParser() const makeEmojiMap = record => record.emojis.reduce((obj, emoji) => { obj[`:${emoji.shortcode}:`] = emoji; @@ -63,8 +66,40 @@ export function normalizeStatus(status, normalOldStatus) { const spoilerText = normalStatus.spoiler_text || ''; const searchContent = [spoilerText, status.content].join('\n\n').replace(//g, '\n').replace(/<\/p>

/g, '\n\n'); const emojiMap = makeEmojiMap(normalStatus); - const theContent = !!normalStatus.rich_content ? normalStatus.rich_content : normalStatus.content; + + let theContent + if (!!normalStatus.rich_content) { + theContent = normalStatus.rich_content + // let rawObject = markdownToDraft(theContent, { + // preserveNewlines: true, + // remarkablePreset: 'commonmark', + // remarkableOptions: { + // enable: { + // inline: ['del', 'ins'], + // } + // } + // }); + const md = new Remarkable({ + html: false, + breaks: true, + }) + let html = md.render(theContent) + html = entities.decodeHTML(html) + + theContent = html + + console.log("html:", html) + console.log("theContent:", theContent) + console.log("status:", status) + console.log("normalStatus:", normalStatus) + // console.log("rawObject:", rawObject) + } else { + theContent = normalStatus.content + } + // let theContent = !!normalStatus.rich_content ? normalStatus.rich_content : normalStatus.content; + + normalStatus.search_index = domParser.parseFromString(searchContent, 'text/html').documentElement.textContent; normalStatus.contentHtml = emojify(theContent, emojiMap, false, true); normalStatus.spoilerHtml = emojify(escapeTextContentForBrowser(spoilerText), emojiMap); @@ -86,3 +121,21 @@ export function normalizePoll(poll) { return normalPoll; } + + +//

attention!

+//

#test @bob #nice https://bob.com http://techcrunch.com strike it

+//

https://twitter.com

+//

@bobitalic

+// 

jonincode

+ +// # attention! +// #test @bob #nice https://bob.com http://techcrunch.com ~~strike it~~ + +// ~~https://twitter.com~~ + +// _@bobitalic_ + +// ``` +// jonincode +// ``` \ No newline at end of file diff --git a/app/javascript/gabsocial/actions/statuses.js b/app/javascript/gabsocial/actions/statuses.js index d22b6df1..60af0990 100644 --- a/app/javascript/gabsocial/actions/statuses.js +++ b/app/javascript/gabsocial/actions/statuses.js @@ -109,6 +109,7 @@ export function fetchStatus(id) { }).then(() => { dispatch(fetchStatusSuccess(skipLoading)); }, () => api(getState).get(`/api/v1/statuses/${id}`).then(response => { + console.log("response.data:", response.data) dispatch(importFetchedStatus(response.data)); dispatch(fetchStatusSuccess(skipLoading)); })).catch(error => { diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js index 80a92e99..40e945a6 100644 --- a/app/javascript/gabsocial/components/autosuggest_textbox.js +++ b/app/javascript/gabsocial/components/autosuggest_textbox.js @@ -53,11 +53,12 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { tokenStart: 0, } - onChange = (e, value, selectionStart, markdown) => { + onChange = (e, value, markdown, selectionStart) => { if (!isObject(e)) { e = { target: { value, + markdown, selectionStart, }, } @@ -65,8 +66,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens); - // console.log('onChange', e.target.value, e.target, this.textbox, tokenStart, token) - if (token !== null && this.state.lastToken !== token) { this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart }); this.props.onSuggestionsFetchRequested(token); @@ -75,7 +74,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { this.props.onSuggestionsClearRequested(); } - this.props.onChange(e, markdown); + this.props.onChange(e); } onKeyDown = (e) => { @@ -259,7 +258,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { return (
-