From 8f15cca3e29c57d680d50e7315bae8532f0b4b07 Mon Sep 17 00:00:00 2001 From: Surinna Curtis Date: Mon, 26 Jun 2017 09:33:35 -0500 Subject: [PATCH] Bio length on client side mostly doesn't count metadata --- .../features/account/components/header.js | 52 +------------------ .../features/account/util/bio_metadata.js | 50 ++++++++++++++++++ app/javascript/packs/public.js | 4 +- 3 files changed, 54 insertions(+), 52 deletions(-) create mode 100644 app/javascript/mastodon/features/account/util/bio_metadata.js diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 6f802ceda9..75284bf6c7 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -7,6 +7,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import IconButton from '../../../components/icon_button'; import Avatar from '../../../components/avatar'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { processBio } from '../util/bio_metadata'; const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, @@ -14,57 +15,6 @@ const messages = defineMessages({ requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, }); -/* - THIS IS A MESS BECAUSE EFFING MASTODON AND ITS EFFING HTML BIOS - INSTEAD OF JUST STORING EVERYTHING IN PLAIN EFFING TEXT ! ! ! ! - BLANK LINES ALSO WON'T WORK BECAUSE RIGHT NOW MASTODON CONVERTS - THOSE INTO `

` ELEMENTS INSTEAD OF LEAVING IT AS `

` ! - TL:DR; THIS IS LARGELY A HACK. WITH BETTER BACKEND STUFF WE CAN - IMPROVE THIS BY BETTER PREDICTING HOW THE METADATA WILL BE SENT - WHILE MAINTAINING BASIC PLAIN-TEXT PROCESSING. THE OTHER OPTION - IS TO TURN ALL BIOS INTO PLAIN-TEXT VIA A TREE-WALKER, AND THEN - PROCESS THE YAML AND LINKS AND EVERYTHING OURSELVES. THIS WOULD - BE INCREDIBLY COMPLICATED, AND IT WOULD BE A MILLION TIMES LESS - DIFFICULT IF MASTODON JUST GAVE US PLAIN-TEXT BIOS (WHICH QUITE - FRANKLY MAKES THE MOST SENSE SINCE THAT'S WHAT USERS PROVIDE IN - SETTINGS) TO BEGIN WITH AND LEFT ALL PROCESSING TO THE FRONTEND - TO HANDLE ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! - ANYWAY I KNOW WHAT NEEDS TO BE DONE REGARDING BACKEND STUFF BUT - I'M NOT SMART ENOUGH TO FIGURE OUT HOW TO ACTUALLY IMPLEMENT IT - SO FEEL FREE TO @ ME IF YOU NEED MY IDEAS REGARDING THAT. UNTIL - THEN WE'LL JUST HAVE TO MAKE DO WITH THIS MESSY AND UNFORTUNATE - HACKING ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! - - with love, - @kibi@glitch.social <3 -*/ - -const NEW_LINE = /(?:^|\r?\n|)/g; -const YAML_OPENER = /---/; -const YAML_CLOSER = /(?:---|\.\.\.)/; -const YAML_STRING = /(?:"(?:[^"\n]){1,32}"|'(?:[^'\n]){1,32}'|(?:[^'":\n]){1,32})/g; -const YAML_LINE = new RegExp('\\s*' + YAML_STRING.source + '\\s*:\\s*' + YAML_STRING.source + '\\s*', 'g'); -const BIO_REGEX = new RegExp(NEW_LINE.source + '*' + YAML_OPENER.source + NEW_LINE.source + '+(?:' + YAML_LINE.source + NEW_LINE.source + '+){0,4}' + YAML_CLOSER.source + NEW_LINE.source + '*'); - -const processBio = (data) => { - let props = { text: data, metadata: [] }; - let yaml = data.match(BIO_REGEX); - if (!yaml) return props; - else yaml = yaml[0]; - let start = props.text.indexOf(yaml); - let end = start + yaml.length; - props.text = props.text.substr(0, start) + props.text.substr(end); - yaml = yaml.replace(NEW_LINE, '\n'); - let metadata = (yaml ? yaml.match(YAML_LINE) : []) || []; - for (let i = 0; i < metadata.length; i++) { - let result = metadata[i].match(YAML_STRING); - if (result[0][0] === '"' || result[0][0] === '\'') result[0] = result[0].substr(1, result[0].length - 2); - if (result[1][0] === '"' || result[1][0] === '\'') result[0] = result[1].substr(1, result[1].length - 2); - props.metadata.push(result); - } - return props; -}; - @injectIntl export default class Header extends ImmutablePureComponent { diff --git a/app/javascript/mastodon/features/account/util/bio_metadata.js b/app/javascript/mastodon/features/account/util/bio_metadata.js new file mode 100644 index 0000000000..d1ff023cce --- /dev/null +++ b/app/javascript/mastodon/features/account/util/bio_metadata.js @@ -0,0 +1,50 @@ +/* + THIS IS A MESS BECAUSE EFFING MASTODON AND ITS EFFING HTML BIOS + INSTEAD OF JUST STORING EVERYTHING IN PLAIN EFFING TEXT ! ! ! ! + BLANK LINES ALSO WON'T WORK BECAUSE RIGHT NOW MASTODON CONVERTS + THOSE INTO `

` ELEMENTS INSTEAD OF LEAVING IT AS `

` ! + TL:DR; THIS IS LARGELY A HACK. WITH BETTER BACKEND STUFF WE CAN + IMPROVE THIS BY BETTER PREDICTING HOW THE METADATA WILL BE SENT + WHILE MAINTAINING BASIC PLAIN-TEXT PROCESSING. THE OTHER OPTION + IS TO TURN ALL BIOS INTO PLAIN-TEXT VIA A TREE-WALKER, AND THEN + PROCESS THE YAML AND LINKS AND EVERYTHING OURSELVES. THIS WOULD + BE INCREDIBLY COMPLICATED, AND IT WOULD BE A MILLION TIMES LESS + DIFFICULT IF MASTODON JUST GAVE US PLAIN-TEXT BIOS (WHICH QUITE + FRANKLY MAKES THE MOST SENSE SINCE THAT'S WHAT USERS PROVIDE IN + SETTINGS) TO BEGIN WITH AND LEFT ALL PROCESSING TO THE FRONTEND + TO HANDLE ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! + ANYWAY I KNOW WHAT NEEDS TO BE DONE REGARDING BACKEND STUFF BUT + I'M NOT SMART ENOUGH TO FIGURE OUT HOW TO ACTUALLY IMPLEMENT IT + SO FEEL FREE TO @ ME IF YOU NEED MY IDEAS REGARDING THAT. UNTIL + THEN WE'LL JUST HAVE TO MAKE DO WITH THIS MESSY AND UNFORTUNATE + HACKING ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! + + with love, + @kibi@glitch.social <3 +*/ + +const NEW_LINE = /(?:^|\r?\n|)/g; +const YAML_OPENER = /---/; +const YAML_CLOSER = /(?:---|\.\.\.)/; +const YAML_STRING = /(?:"(?:[^"\n]){1,32}"|'(?:[^'\n]){1,32}'|(?:[^'":\n]){1,32})/g; +const YAML_LINE = new RegExp('\\s*' + YAML_STRING.source + '\\s*:\\s*' + YAML_STRING.source + '\\s*', 'g'); +const BIO_REGEX = new RegExp(NEW_LINE.source + '*' + YAML_OPENER.source + NEW_LINE.source + '+(?:' + YAML_LINE.source + NEW_LINE.source + '+){0,4}' + YAML_CLOSER.source + NEW_LINE.source + '*'); + +export function processBio(data) { + let props = { text: data, metadata: [] }; + let yaml = data.match(BIO_REGEX); + if (!yaml) return props; + else yaml = yaml[0]; + let start = props.text.indexOf(yaml); + let end = start + yaml.length; + props.text = props.text.substr(0, start) + props.text.substr(end); + yaml = yaml.replace(NEW_LINE, '\n'); + let metadata = (yaml ? yaml.match(YAML_LINE) : []) || []; + for (let i = 0; i < metadata.length; i++) { + let result = metadata[i].match(YAML_STRING); + if (result[0][0] === '"' || result[0][0] === '\'') result[0] = result[0].substr(1, result[0].length - 2); + if (result[1][0] === '"' || result[1][0] === '\'') result[0] = result[1].substr(1, result[1].length - 2); + props.metadata.push(result); + } + return props; +} \ No newline at end of file diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 150a606708..ae903cdd30 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -4,6 +4,7 @@ import { delegate } from 'rails-ujs'; import emojify from '../mastodon/emoji'; import { getLocale } from '../mastodon/locales'; import loadPolyfills from '../mastodon/load_polyfills'; +import { processBio } from '../mastodon/features/account/util/bio_metadata'; require.context('../images/', true); @@ -87,7 +88,8 @@ function main() { delegate(document, '.account_note', 'input', ({ target }) => { const noteCounter = document.querySelector('.note-counter'); if (noteCounter) { - noteCounter.textContent = 500 - length(target.value); + const noteWithoutMetadata = processBio(target.value).text; + noteCounter.textContent = 500 - length(noteWithoutMetadata); } }); }