From 11d702a6dde780bd92274e403c8c36d5287ab16e Mon Sep 17 00:00:00 2001 From: Kevin Aguiar Date: Sat, 18 Apr 2020 19:24:23 -0300 Subject: [PATCH] ADD: Better handling of content length --- build/rollup.config.es.js | 1 + docs/docs/changelog/index.md | 3 ++ docs/docs/twemoji-textarea-api/index.md | 2 +- package.json | 4 +- src/components/TwemojiTextarea.vue | 6 ++- yarn.lock | 53 ++++++++++++++++--------- 6 files changed, 47 insertions(+), 22 deletions(-) diff --git a/build/rollup.config.es.js b/build/rollup.config.es.js index ae3c93c1..5f5fd841 100644 --- a/build/rollup.config.es.js +++ b/build/rollup.config.es.js @@ -21,6 +21,7 @@ const config = Object.assign({}, base, { 'twemoji', '@popperjs/core', 'lodash.pick', + 'twitter-text', ], }); diff --git a/docs/docs/changelog/index.md b/docs/docs/changelog/index.md index febeff43..0ec3d6b3 100644 --- a/docs/docs/changelog/index.md +++ b/docs/docs/changelog/index.md @@ -4,6 +4,9 @@ title: 'Changelog' # Changelog +## 5.6.3 +- Content length calc now uses 'twitter-text' NPM package for better handling of emoji unicodes. + ## 5.6.2 - 'initialContent' prop added to TwemojiTextarea diff --git a/docs/docs/twemoji-textarea-api/index.md b/docs/docs/twemoji-textarea-api/index.md index ffab9ed8..50db6f62 100644 --- a/docs/docs/twemoji-textarea-api/index.md +++ b/docs/docs/twemoji-textarea-api/index.md @@ -70,7 +70,7 @@ This event fires everytime the textarea content is updated. Has one parameter wh ### actualContentLengthChanged - Parameter | Type : ``actualLength | number`` -This event fires everytime the textarea content is updated. Has one parameter which indicates the length of the content (which is in fact not a simple content.length) because some emoji unicode in Javascript are sometimes counted as more than 1 in length value. +This event fires everytime the textarea content is updated. Has one parameter which indicates the length of the content. The explanation for length is better detailed [here](https://developer.twitter.com/en/docs/basics/counting-characters), since this library uses the 'twitter-text' library. ```js actualContentLengthChanged(actualLength) { diff --git a/package.json b/package.json index 9add137b..868d53db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kevinfaguiar/vue-twemoji-picker", - "version": "5.6.2", + "version": "5.6.3", "main": "dist/vue-twemoji-picker.umd.min.js", "module": "dist/vue-twemoji-picker.esm.min.js", "unpkg": "dist/vue-twemoji-picker.min.js", @@ -42,6 +42,7 @@ "@popperjs/core": "^2.3.3", "lodash.pick": "^4.4.0", "twemoji": "^12.1.5", + "twitter-text": "^3.1.0", "vue-clickaway": "^2.2.2" }, "peerDependencies": { @@ -58,6 +59,7 @@ "@types/lodash.pick": "^4.4.6", "@types/node": "^13.13.0", "@types/twemoji": "^12.1.1", + "@types/twitter-text": "^2.0.0", "@types/vue-clickaway": "^2.2.0", "@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/parser": "^2.28.0", diff --git a/src/components/TwemojiTextarea.vue b/src/components/TwemojiTextarea.vue index 46f392cd..dbe8e363 100644 --- a/src/components/TwemojiTextarea.vue +++ b/src/components/TwemojiTextarea.vue @@ -117,6 +117,8 @@ import TwemojiProps from './TwemojiPicker/props'; import TwemojiPropWatchers from './TwemojiPicker/prop-watchers'; import { propsForMixin } from '../mixins/propsFor'; +import TwitterText from 'twitter-text'; + export default Vue.extend({ name: 'TwemojiTextarea', @@ -220,7 +222,9 @@ export default Vue.extend({ if (content.length !== 0 && content[content.length - 1] === '\n') { content = content.slice(0, -1); } - this.actualContentLength = [...content].length; + this.actualContentLength = TwitterText.parseTweet( + content || '' + ).weightedLength; this.twemojiPicker.$refs.popupEmoji.popperInstance.forceUpdate(); this.$emit('update:content', content); this.$emit('actualContentLengthChanged', this.actualContentLength); diff --git a/yarn.lock b/yarn.lock index 373a0148..8d870e77 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1071,6 +1071,13 @@ "@babel/helper-plugin-utils" "^7.8.3" "@babel/plugin-transform-typescript" "^7.9.0" +"@babel/runtime@^7.3.1", "@babel/runtime@^7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" + integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.8.4": version "7.8.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308" @@ -1078,13 +1085,6 @@ dependencies: regenerator-runtime "^0.13.2" -"@babel/runtime@^7.9.2": - version "7.9.2" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06" - integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q== - dependencies: - regenerator-runtime "^0.13.4" - "@babel/template@^7.4.0", "@babel/template@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8" @@ -1358,12 +1358,12 @@ "@types/yargs" "^15.0.0" chalk "^3.0.0" -"@kevinfaguiar/vue-twemoji-picker@5.5.5": - version "5.5.5" - resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.5.5.tgz#5c3207e79d5c8922627f3baa96af165c2e6179c4" - integrity sha512-xheDe4JwrUA3alZyMbwBBC5/e6sH1aWmPp+2/mhrmPFNoneX2FiQFyQ4W3RYp/J7JP0g4/X9T3iE78Elv6Glvg== +"@kevinfaguiar/vue-twemoji-picker@5.6.1": + version "5.6.1" + resolved "https://registry.yarnpkg.com/@kevinfaguiar/vue-twemoji-picker/-/vue-twemoji-picker-5.6.1.tgz#ad4442d08595ded86b37870bf40218c96b8b0194" + integrity sha512-b6oqAVvLFoNYPtJOLa/vLHLg/5XLPVOhTIwwYH23Pb3ANirgVtgsNFM5Zi5Kn1GX+/Oji+sTGiVfZtH9KnSUaA== dependencies: - "@popperjs/core" "^2.1.0" + "@popperjs/core" "^2.3.3" lodash.pick "^4.4.0" twemoji "^12.1.5" vue-clickaway "^2.2.2" @@ -1381,11 +1381,6 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== -"@popperjs/core@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.1.0.tgz#09a7a352a40508156e1256efdc015593feca28e0" - integrity sha512-ntN5t5spqhQv28cLfmmt1dYabsudzR5A7PU15gr/gzcT/gzqAOnYFQPaLPFraDa7ZCJG2eJ1JsO7pgXbYXGIrw== - "@popperjs/core@^2.3.3": version "2.3.3" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.3.3.tgz#8731722aeb7330e8fd9eb5d424be6b98dea7d6da" @@ -1659,6 +1654,11 @@ resolved "https://registry.yarnpkg.com/@types/twemoji/-/twemoji-12.1.1.tgz#34c5dcecff438b5be173889a6ee8ad51ba90445f" integrity sha512-dW1B1WHTfrWmEzXb/tp8xsZqQHAyMB9JwLwbBqkIQVzmNUI02R7lJqxUpKFM114ygNZHKA1r74oPugCAiYHt1A== +"@types/twitter-text@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@types/twitter-text/-/twitter-text-2.0.0.tgz#487cbe72aa15db64e6ac406df17804347bd716ee" + integrity sha512-bRlURk6hHRMSm37Wc5MPswV5ZWFAt2DYJ50ERoB5kzu6u+qGmzE83sRP5gA55uBW52uBnsBrorK7yEsPUYQWHQ== + "@types/vue-clickaway@^2.2.0": version "2.2.0" resolved "https://registry.yarnpkg.com/@types/vue-clickaway/-/vue-clickaway-2.2.0.tgz#a560c5280dac0dd0906b5b78249be0c859acffc6" @@ -4006,7 +4006,7 @@ core-js-compat@^3.6.2, core-js-compat@^3.6.4: browserslist "^4.8.3" semver "7.0.0" -core-js@^2.4.0: +core-js@^2.4.0, core-js@^2.5.0: version "2.6.11" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== @@ -10011,7 +10011,7 @@ punycode@1.3.2: resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0= -punycode@^1.2.4: +punycode@1.4.1, punycode@^1.2.4: version "1.4.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" integrity sha1-wNWmOycYgArY4esPpSachN1BhF4= @@ -11889,6 +11889,11 @@ twemoji-parser@12.1.3: resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-12.1.3.tgz#916c0153e77bd5f1011e7a99cbeacf52e43c9371" integrity sha512-ND4LZXF4X92/PFrzSgGkq6KPPg8swy/U0yRw1k/+izWRVmq1HYi3khPwV3XIB6FRudgVICAaBhJfW8e8G3HC7Q== +twemoji-parser@^11.0.2: + version "11.0.2" + resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-11.0.2.tgz#24e87c2008abe8544c962f193b88b331de32b446" + integrity sha512-5kO2XCcpAql6zjdLwRwJjYvAZyDy3+Uj7v1ipBzLthQmDL7Ce19bEqHr3ImSNeoSW2OA8u02XmARbXHaNO8GhA== + twemoji@^12.1.5: version "12.1.5" resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-12.1.5.tgz#a961fb65a1afcb1f729ad7e59391f9fe969820b9" @@ -11899,6 +11904,16 @@ twemoji@^12.1.5: twemoji-parser "12.1.3" universalify "^0.1.2" +twitter-text@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/twitter-text/-/twitter-text-3.1.0.tgz#798e932b289f506efe2a1f03fe917ba30627f125" + integrity sha512-nulfUi3FN6z0LUjYipJid+eiwXvOLb8Ass7Jy/6zsXmZK3URte043m8fL3FyDzrK+WLpyqhHuR/TcARTN/iuGQ== + dependencies: + "@babel/runtime" "^7.3.1" + core-js "^2.5.0" + punycode "1.4.1" + twemoji-parser "^11.0.2" + type-check@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"