diff --git a/extensions/emoji/.gitignore b/extensions/emoji/.gitignore index a4f3b125e..43eeee7fe 100644 --- a/extensions/emoji/.gitignore +++ b/extensions/emoji/.gitignore @@ -2,3 +2,5 @@ composer.phar .DS_Store Thumbs.db +bower_components +node_modules \ No newline at end of file diff --git a/extensions/emoji/bootstrap.php b/extensions/emoji/bootstrap.php index 022dcd3d6..f632a04d5 100644 --- a/extensions/emoji/bootstrap.php +++ b/extensions/emoji/bootstrap.php @@ -9,6 +9,10 @@ * file that was distributed with this source code. */ -require __DIR__.'/vendor/autoload.php'; +use Flarum\Emoji\Listener; +use Illuminate\Contracts\Events\Dispatcher; -return 'Flarum\Emoji\Extension'; +return function (Dispatcher $events) { + $events->subscribe(Listener\AddClientAssets::class); + $events->subscribe(Listener\FormatEmoticons::class); +}; \ No newline at end of file diff --git a/extensions/emoji/composer.json b/extensions/emoji/composer.json index 83896c549..58160ee38 100644 --- a/extensions/emoji/composer.json +++ b/extensions/emoji/composer.json @@ -1,10 +1,33 @@ { + "name": "flarum/emoji", + "description": "Convert text and unicode emoji into Twemoji.", + "type": "flarum-extension", + "license": "MIT", + "authors": [ + { + "name": "Toby Zerner", + "email": "toby.zerner@gmail.com" + } + ], + "support": { + "issues": "https://github.com/flarum/core/issues", + "source": "https://github.com/flarum/emoji" + }, + "require": { + "flarum/core": "^0.1.0-beta.3" + }, "autoload": { "psr-4": { "Flarum\\Emoji\\": "src/" } }, - "scripts": { - "style": "phpcs --standard=PSR2 -np src" + "extra": { + "flarum-extension": { + "title": "Emoji", + "icon": { + "image": "icon.svg", + "backgroundColor": "#FECC4D" + } + } } } diff --git a/extensions/emoji/flarum.json b/extensions/emoji/flarum.json deleted file mode 100644 index 5caede69b..000000000 --- a/extensions/emoji/flarum.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "emoji", - "title": "Emoji", - "description": "Convert text and unicode emoji into Twemoji.", - "keywords": ["discussions"], - "version": "0.1.0-beta.2", - "author": { - "name": "Toby Zerner", - "email": "toby@flarum.org", - "homepage": "http://tobyzerner.com" - }, - "license": "MIT", - "require": { - "flarum": ">=0.1.0-beta.2" - }, - "support": { - "source": "https://github.com/flarum/emoji", - "issues": "https://github.com/flarum/core/issues" - }, - "icon": { - "name": "smile-o", - "backgroundColor": "#FFC700", - "color": "#000" - } -} diff --git a/extensions/emoji/icon.svg b/extensions/emoji/icon.svg new file mode 100644 index 000000000..9c38390ed --- /dev/null +++ b/extensions/emoji/icon.svg @@ -0,0 +1 @@ +image/svg+xml diff --git a/extensions/emoji/js/.gitignore b/extensions/emoji/js/.gitignore deleted file mode 100644 index 372e20a51..000000000 --- a/extensions/emoji/js/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -bower_components -node_modules -dist diff --git a/extensions/emoji/js/forum/Gulpfile.js b/extensions/emoji/js/forum/Gulpfile.js index dc2bde879..50ad53f3e 100644 --- a/extensions/emoji/js/forum/Gulpfile.js +++ b/extensions/emoji/js/forum/Gulpfile.js @@ -2,7 +2,7 @@ var gulp = require('flarum-gulp'); gulp({ modules: { - 'emoji': 'src/**/*.js' + 'flarum/emoji': 'src/**/*.js' }, files: [ 'bower_components/twemoji/index.js' diff --git a/extensions/emoji/js/forum/bower.json b/extensions/emoji/js/forum/bower.json index 12710063f..36cb5a6c6 100644 --- a/extensions/emoji/js/forum/bower.json +++ b/extensions/emoji/js/forum/bower.json @@ -1,6 +1,6 @@ { "name": "flarum-emoji", "devDependencies": { - "twemoji": "https://raw.githubusercontent.com/twitter/twemoji/gh-pages/twemoji.min.js" + "twemoji": "https://raw.githubusercontent.com/twitter/twemoji/gh-pages/twemoji.js" } } diff --git a/extensions/emoji/js/forum/dist/extension.js b/extensions/emoji/js/forum/dist/extension.js new file mode 100644 index 000000000..10dafb5d4 --- /dev/null +++ b/extensions/emoji/js/forum/dist/extension.js @@ -0,0 +1,625 @@ +/*jslint indent: 2, browser: true, bitwise: true, plusplus: true */ +var twemoji = (function ( + /*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//* + https://github.com/twitter/twemoji/blob/gh-pages/LICENSE + */ + + // WARNING: this file is generated automatically via + // `node twemoji-generator.js` + // please update its `createTwemoji` function + // at the bottom of the same file instead. + +) { + 'use strict'; + + /*jshint maxparams:4 */ + + var + // the exported module object + twemoji = { + + + ///////////////////////// + // properties // + ///////////////////////// + + // default assets url, by default will be Twitter Inc. CDN + base: (location.protocol === 'https:' ? 'https:' : 'http:') + + '//twemoji.maxcdn.com/', + + // default assets file extensions, by default '.png' + ext: '.png', + + // default assets/folder size, by default "36x36" + // available via Twitter CDN: 16, 36, 72 + size: '36x36', + + // default class name, by default 'emoji' + className: 'emoji', + + // basic utilities / helpers to convert code points + // to JavaScript surrogates and vice versa + convert: { + + /** + * Given an HEX codepoint, returns UTF16 surrogate pairs. + * + * @param string generic codepoint, i.e. '1F4A9' + * @return string codepoint transformed into utf16 surrogates pair, + * i.e. \uD83D\uDCA9 + * + * @example + * twemoji.convert.fromCodePoint('1f1e8'); + * // "\ud83c\udde8" + * + * '1f1e8-1f1f3'.split('-').map(twemoji.convert.fromCodePoint).join('') + * // "\ud83c\udde8\ud83c\uddf3" + */ + fromCodePoint: fromCodePoint, + + /** + * Given UTF16 surrogate pairs, returns the equivalent HEX codepoint. + * + * @param string generic utf16 surrogates pair, i.e. \uD83D\uDCA9 + * @param string optional separator for double code points, default='-' + * @return string utf16 transformed into codepoint, i.e. '1F4A9' + * + * @example + * twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3'); + * // "1f1e8-1f1f3" + * + * twemoji.convert.toCodePoint('\ud83c\udde8\ud83c\uddf3', '~'); + * // "1f1e8~1f1f3" + */ + toCodePoint: toCodePoint + }, + + + ///////////////////////// + // methods // + ///////////////////////// + + /** + * User first: used to remove missing images + * preserving the original text intent when + * a fallback for network problems is desired. + * Automatically added to Image nodes via DOM + * It could be recycled for string operations via: + * $('img.emoji').on('error', twemoji.onerror) + */ + onerror: function onerror() { + if (this.parentNode) { + this.parentNode.replaceChild(createText(this.alt), this); + } + }, + + /** + * Main method/logic to generate either tags or HTMLImage nodes. + * "emojify" a generic text or DOM Element. + * + * @overloads + * + * String replacement for `innerHTML` or server side operations + * twemoji.parse(string); + * twemoji.parse(string, Function); + * twemoji.parse(string, Object); + * + * HTMLElement tree parsing for safer operations over existing DOM + * twemoji.parse(HTMLElement); + * twemoji.parse(HTMLElement, Function); + * twemoji.parse(HTMLElement, Object); + * + * @param string|HTMLElement the source to parse and enrich with emoji. + * + * string replace emoji matches with tags. + * Mainly used to inject emoji via `innerHTML` + * It does **not** parse the string or validate it, + * it simply replaces found emoji with a tag. + * NOTE: be sure this won't affect security. + * + * HTMLElement walk through the DOM tree and find emoji + * that are inside **text node only** (nodeType === 3) + * Mainly used to put emoji in already generated DOM + * without compromising surrounding nodes and + * **avoiding** the usage of `innerHTML`. + * NOTE: Using DOM elements instead of strings should + * improve security without compromising too much + * performance compared with a less safe `innerHTML`. + * + * @param Function|Object [optional] + * either the callback that will be invoked or an object + * with all properties to use per each found emoji. + * + * Function if specified, this will be invoked per each emoji + * that has been found through the RegExp except + * those follwed by the invariant \uFE0E ("as text"). + * Once invoked, parameters will be: + * + * codePoint:string the lower case HEX code point + * i.e. "1f4a9" + * + * options:Object all info for this parsing operation + * + * variant:char the optional \uFE0F ("as image") + * variant, in case this info + * is anyhow meaningful. + * By default this is ignored. + * + * If such callback will return a falsy value instead + * of a valid `src` to use for the image, nothing will + * actually change for that specific emoji. + * + * + * Object if specified, an object containing the following properties + * + * callback Function the callback to invoke per each found emoji. + * base string the base url, by default twemoji.base + * ext string the image extension, by default twemoji.ext + * size string the assets size, by default twemoji.size + * + * @example + * + * twemoji.parse("I \u2764\uFE0F emoji!"); + * // I ❤️ emoji! + * + * + * twemoji.parse("I \u2764\uFE0F emoji!", function(icon, options, variant) { + * return '/assets/' + icon + '.gif'; + * }); + * // I ❤️ emoji! + * + * + * twemoji.parse("I \u2764\uFE0F emoji!", { + * size: 72, + * callback: function(icon, options, variant) { + * return '/assets/' + options.size + '/' + icon + options.ext; + * } + * }); + * // I ❤️ emoji! + * + */ + parse: parse, + + /** + * Given a string, invokes the callback argument + * per each emoji found in such string. + * This is the most raw version used by + * the .parse(string) method itself. + * + * @param string generic string to parse + * @param Function a generic callback that will be + * invoked to replace the content. + * This calback wil receive standard + * String.prototype.replace(str, callback) + * arguments such: + * callback( + * match, // the emoji match + * icon, // the emoji text (same as text) + * variant // either '\uFE0E' or '\uFE0F', if present + * ); + * + * and others commonly received via replace. + * + * NOTE: When the variant \uFE0E is found, remember this is an explicit intent + * from the user: the emoji should **not** be replaced with an image. + * In \uFE0F case one, it's the opposite, it should be graphic. + * This utility convetion is that only \uFE0E are not translated into images. + */ + replace: replace, + + /** + * Simplify string tests against emoji. + * + * @param string some text that might contain emoji + * @return boolean true if any emoji was found, false otherwise. + * + * @example + * + * if (twemoji.test(someContent)) { + * console.log("emoji All The Things!"); + * } + */ + test: test + }, + + // used to escape HTML special chars in attributes + escaper = { + '&': '&', + '<': '<', + '>': '>', + "'": ''', + '"': '"' + }, + + // RegExp based on emoji's official Unicode standards + // http://www.unicode.org/Public/UNIDATA/EmojiSources.txt + re = /((?:\ud83c\udde8\ud83c\uddf3|\ud83c\uddfa\ud83c\uddf8|\ud83c\uddf7\ud83c\uddfa|\ud83c\uddf0\ud83c\uddf7|\ud83c\uddef\ud83c\uddf5|\ud83c\uddee\ud83c\uddf9|\ud83c\uddec\ud83c\udde7|\ud83c\uddeb\ud83c\uddf7|\ud83c\uddea\ud83c\uddf8|\ud83c\udde9\ud83c\uddea|\u0039\ufe0f?\u20e3|\u0038\ufe0f?\u20e3|\u0037\ufe0f?\u20e3|\u0036\ufe0f?\u20e3|\u0035\ufe0f?\u20e3|\u0034\ufe0f?\u20e3|\u0033\ufe0f?\u20e3|\u0032\ufe0f?\u20e3|\u0031\ufe0f?\u20e3|\u0030\ufe0f?\u20e3|\u0023\ufe0f?\u20e3|\ud83d\udeb3|\ud83d\udeb1|\ud83d\udeb0|\ud83d\udeaf|\ud83d\udeae|\ud83d\udea6|\ud83d\udea3|\ud83d\udea1|\ud83d\udea0|\ud83d\ude9f|\ud83d\ude9e|\ud83d\ude9d|\ud83d\ude9c|\ud83d\ude9b|\ud83d\ude98|\ud83d\ude96|\ud83d\ude94|\ud83d\ude90|\ud83d\ude8e|\ud83d\ude8d|\ud83d\ude8b|\ud83d\ude8a|\ud83d\ude88|\ud83d\ude86|\ud83d\ude82|\ud83d\ude81|\ud83d\ude36|\ud83d\ude34|\ud83d\ude2f|\ud83d\ude2e|\ud83d\ude2c|\ud83d\ude27|\ud83d\ude26|\ud83d\ude1f|\ud83d\ude1b|\ud83d\ude19|\ud83d\ude17|\ud83d\ude15|\ud83d\ude11|\ud83d\ude10|\ud83d\ude0e|\ud83d\ude08|\ud83d\ude07|\ud83d\ude00|\ud83d\udd67|\ud83d\udd66|\ud83d\udd65|\ud83d\udd64|\ud83d\udd63|\ud83d\udd62|\ud83d\udd61|\ud83d\udd60|\ud83d\udd5f|\ud83d\udd5e|\ud83d\udd5d|\ud83d\udd5c|\ud83d\udd2d|\ud83d\udd2c|\ud83d\udd15|\ud83d\udd09|\ud83d\udd08|\ud83d\udd07|\ud83d\udd06|\ud83d\udd05|\ud83d\udd04|\ud83d\udd02|\ud83d\udd01|\ud83d\udd00|\ud83d\udcf5|\ud83d\udcef|\ud83d\udced|\ud83d\udcec|\ud83d\udcb7|\ud83d\udcb6|\ud83d\udcad|\ud83d\udc6d|\ud83d\udc6c|\ud83d\udc65|\ud83d\udc2a|\ud83d\udc16|\ud83d\udc15|\ud83d\udc13|\ud83d\udc10|\ud83d\udc0f|\ud83d\udc0b|\ud83d\udc0a|\ud83d\udc09|\ud83d\udc08|\ud83d\udc07|\ud83d\udc06|\ud83d\udc05|\ud83d\udc04|\ud83d\udc03|\ud83d\udc02|\ud83d\udc01|\ud83d\udc00|\ud83c\udfe4|\ud83c\udfc9|\ud83c\udfc7|\ud83c\udf7c|\ud83c\udf50|\ud83c\udf4b|\ud83c\udf33|\ud83c\udf32|\ud83c\udf1e|\ud83c\udf1d|\ud83c\udf1c|\ud83c\udf1a|\ud83c\udf18|\ud83c\udccf|\ud83c\udd70|\ud83c\udd71|\ud83c\udd7e|\ud83c\udd8e|\ud83c\udd91|\ud83c\udd92|\ud83c\udd93|\ud83c\udd94|\ud83c\udd95|\ud83c\udd96|\ud83c\udd97|\ud83c\udd98|\ud83c\udd99|\ud83c\udd9a|\ud83d\udc77|\ud83d\udec5|\ud83d\udec4|\ud83d\udec3|\ud83d\udec2|\ud83d\udec1|\ud83d\udebf|\ud83d\udeb8|\ud83d\udeb7|\ud83d\udeb5|\ud83c\ude01|\ud83c\ude02|\ud83c\ude32|\ud83c\ude33|\ud83c\ude34|\ud83c\ude35|\ud83c\ude36|\ud83c\ude37|\ud83c\ude38|\ud83c\ude39|\ud83c\ude3a|\ud83c\ude50|\ud83c\ude51|\ud83c\udf00|\ud83c\udf01|\ud83c\udf02|\ud83c\udf03|\ud83c\udf04|\ud83c\udf05|\ud83c\udf06|\ud83c\udf07|\ud83c\udf08|\ud83c\udf09|\ud83c\udf0a|\ud83c\udf0b|\ud83c\udf0c|\ud83c\udf0f|\ud83c\udf11|\ud83c\udf13|\ud83c\udf14|\ud83c\udf15|\ud83c\udf19|\ud83c\udf1b|\ud83c\udf1f|\ud83c\udf20|\ud83c\udf30|\ud83c\udf31|\ud83c\udf34|\ud83c\udf35|\ud83c\udf37|\ud83c\udf38|\ud83c\udf39|\ud83c\udf3a|\ud83c\udf3b|\ud83c\udf3c|\ud83c\udf3d|\ud83c\udf3e|\ud83c\udf3f|\ud83c\udf40|\ud83c\udf41|\ud83c\udf42|\ud83c\udf43|\ud83c\udf44|\ud83c\udf45|\ud83c\udf46|\ud83c\udf47|\ud83c\udf48|\ud83c\udf49|\ud83c\udf4a|\ud83c\udf4c|\ud83c\udf4d|\ud83c\udf4e|\ud83c\udf4f|\ud83c\udf51|\ud83c\udf52|\ud83c\udf53|\ud83c\udf54|\ud83c\udf55|\ud83c\udf56|\ud83c\udf57|\ud83c\udf58|\ud83c\udf59|\ud83c\udf5a|\ud83c\udf5b|\ud83c\udf5c|\ud83c\udf5d|\ud83c\udf5e|\ud83c\udf5f|\ud83c\udf60|\ud83c\udf61|\ud83c\udf62|\ud83c\udf63|\ud83c\udf64|\ud83c\udf65|\ud83c\udf66|\ud83c\udf67|\ud83c\udf68|\ud83c\udf69|\ud83c\udf6a|\ud83c\udf6b|\ud83c\udf6c|\ud83c\udf6d|\ud83c\udf6e|\ud83c\udf6f|\ud83c\udf70|\ud83c\udf71|\ud83c\udf72|\ud83c\udf73|\ud83c\udf74|\ud83c\udf75|\ud83c\udf76|\ud83c\udf77|\ud83c\udf78|\ud83c\udf79|\ud83c\udf7a|\ud83c\udf7b|\ud83c\udf80|\ud83c\udf81|\ud83c\udf82|\ud83c\udf83|\ud83c\udf84|\ud83c\udf85|\ud83c\udf86|\ud83c\udf87|\ud83c\udf88|\ud83c\udf89|\ud83c\udf8a|\ud83c\udf8b|\ud83c\udf8c|\ud83c\udf8d|\ud83c\udf8e|\ud83c\udf8f|\ud83c\udf90|\ud83c\udf91|\ud83c\udf92|\ud83c\udf93|\ud83c\udfa0|\ud83c\udfa1|\ud83c\udfa2|\ud83c\udfa3|\ud83c\udfa4|\ud83c\udfa5|\ud83c\udfa6|\ud83c\udfa7|\ud83c\udfa8|\ud83c\udfa9|\ud83c\udfaa|\ud83c\udfab|\ud83c\udfac|\ud83c\udfad|\ud83c\udfae|\ud83c\udfaf|\ud83c\udfb0|\ud83c\udfb1|\ud83c\udfb2|\ud83c\udfb3|\ud83c\udfb4|\ud83c\udfb5|\ud83c\udfb6|\ud83c\udfb7|\ud83c\udfb8|\ud83c\udfb9|\ud83c\udfba|\ud83c\udfbb|\ud83c\udfbc|\ud83c\udfbd|\ud83c\udfbe|\ud83c\udfbf|\ud83c\udfc0|\ud83c\udfc1|\ud83c\udfc2|\ud83c\udfc3|\ud83c\udfc4|\ud83c\udfc6|\ud83c\udfc8|\ud83c\udfca|\ud83c\udfe0|\ud83c\udfe1|\ud83c\udfe2|\ud83c\udfe3|\ud83c\udfe5|\ud83c\udfe6|\ud83c\udfe7|\ud83c\udfe8|\ud83c\udfe9|\ud83c\udfea|\ud83c\udfeb|\ud83c\udfec|\ud83c\udfed|\ud83c\udfee|\ud83c\udfef|\ud83c\udff0|\ud83d\udc0c|\ud83d\udc0d|\ud83d\udc0e|\ud83d\udc11|\ud83d\udc12|\ud83d\udc14|\ud83d\udc17|\ud83d\udc18|\ud83d\udc19|\ud83d\udc1a|\ud83d\udc1b|\ud83d\udc1c|\ud83d\udc1d|\ud83d\udc1e|\ud83d\udc1f|\ud83d\udc20|\ud83d\udc21|\ud83d\udc22|\ud83d\udc23|\ud83d\udc24|\ud83d\udc25|\ud83d\udc26|\ud83d\udc27|\ud83d\udc28|\ud83d\udc29|\ud83d\udc2b|\ud83d\udc2c|\ud83d\udc2d|\ud83d\udc2e|\ud83d\udc2f|\ud83d\udc30|\ud83d\udc31|\ud83d\udc32|\ud83d\udc33|\ud83d\udc34|\ud83d\udc35|\ud83d\udc36|\ud83d\udc37|\ud83d\udc38|\ud83d\udc39|\ud83d\udc3a|\ud83d\udc3b|\ud83d\udc3c|\ud83d\udc3d|\ud83d\udc3e|\ud83d\udc40|\ud83d\udc42|\ud83d\udc43|\ud83d\udc44|\ud83d\udc45|\ud83d\udc46|\ud83d\udc47|\ud83d\udc48|\ud83d\udc49|\ud83d\udc4a|\ud83d\udc4b|\ud83d\udc4c|\ud83d\udc4d|\ud83d\udc4e|\ud83d\udc4f|\ud83d\udc50|\ud83d\udc51|\ud83d\udc52|\ud83d\udc53|\ud83d\udc54|\ud83d\udc55|\ud83d\udc56|\ud83d\udc57|\ud83d\udc58|\ud83d\udc59|\ud83d\udc5a|\ud83d\udc5b|\ud83d\udc5c|\ud83d\udc5d|\ud83d\udc5e|\ud83d\udc5f|\ud83d\udc60|\ud83d\udc61|\ud83d\udc62|\ud83d\udc63|\ud83d\udc64|\ud83d\udc66|\ud83d\udc67|\ud83d\udc68|\ud83d\udc69|\ud83d\udc6a|\ud83d\udc6b|\ud83d\udc6e|\ud83d\udc6f|\ud83d\udc70|\ud83d\udc71|\ud83d\udc72|\ud83d\udc73|\ud83d\udc74|\ud83d\udc75|\ud83d\udc76|\ud83d\udeb4|\ud83d\udc78|\ud83d\udc79|\ud83d\udc7a|\ud83d\udc7b|\ud83d\udc7c|\ud83d\udc7d|\ud83d\udc7e|\ud83d\udc7f|\ud83d\udc80|\ud83d\udc81|\ud83d\udc82|\ud83d\udc83|\ud83d\udc84|\ud83d\udc85|\ud83d\udc86|\ud83d\udc87|\ud83d\udc88|\ud83d\udc89|\ud83d\udc8a|\ud83d\udc8b|\ud83d\udc8c|\ud83d\udc8d|\ud83d\udc8e|\ud83d\udc8f|\ud83d\udc90|\ud83d\udc91|\ud83d\udc92|\ud83d\udc93|\ud83d\udc94|\ud83d\udc95|\ud83d\udc96|\ud83d\udc97|\ud83d\udc98|\ud83d\udc99|\ud83d\udc9a|\ud83d\udc9b|\ud83d\udc9c|\ud83d\udc9d|\ud83d\udc9e|\ud83d\udc9f|\ud83d\udca0|\ud83d\udca1|\ud83d\udca2|\ud83d\udca3|\ud83d\udca4|\ud83d\udca5|\ud83d\udca6|\ud83d\udca7|\ud83d\udca8|\ud83d\udca9|\ud83d\udcaa|\ud83d\udcab|\ud83d\udcac|\ud83d\udcae|\ud83d\udcaf|\ud83d\udcb0|\ud83d\udcb1|\ud83d\udcb2|\ud83d\udcb3|\ud83d\udcb4|\ud83d\udcb5|\ud83d\udcb8|\ud83d\udcb9|\ud83d\udcba|\ud83d\udcbb|\ud83d\udcbc|\ud83d\udcbd|\ud83d\udcbe|\ud83d\udcbf|\ud83d\udcc0|\ud83d\udcc1|\ud83d\udcc2|\ud83d\udcc3|\ud83d\udcc4|\ud83d\udcc5|\ud83d\udcc6|\ud83d\udcc7|\ud83d\udcc8|\ud83d\udcc9|\ud83d\udcca|\ud83d\udccb|\ud83d\udccc|\ud83d\udccd|\ud83d\udcce|\ud83d\udccf|\ud83d\udcd0|\ud83d\udcd1|\ud83d\udcd2|\ud83d\udcd3|\ud83d\udcd4|\ud83d\udcd5|\ud83d\udcd6|\ud83d\udcd7|\ud83d\udcd8|\ud83d\udcd9|\ud83d\udcda|\ud83d\udcdb|\ud83d\udcdc|\ud83d\udcdd|\ud83d\udcde|\ud83d\udcdf|\ud83d\udce0|\ud83d\udce1|\ud83d\udce2|\ud83d\udce3|\ud83d\udce4|\ud83d\udce5|\ud83d\udce6|\ud83d\udce7|\ud83d\udce8|\ud83d\udce9|\ud83d\udcea|\ud83d\udceb|\ud83d\udcee|\ud83d\udcf0|\ud83d\udcf1|\ud83d\udcf2|\ud83d\udcf3|\ud83d\udcf4|\ud83d\udcf6|\ud83d\udcf7|\ud83d\udcf9|\ud83d\udcfa|\ud83d\udcfb|\ud83d\udcfc|\ud83d\udd03|\ud83d\udd0a|\ud83d\udd0b|\ud83d\udd0c|\ud83d\udd0d|\ud83d\udd0e|\ud83d\udd0f|\ud83d\udd10|\ud83d\udd11|\ud83d\udd12|\ud83d\udd13|\ud83d\udd14|\ud83d\udd16|\ud83d\udd17|\ud83d\udd18|\ud83d\udd19|\ud83d\udd1a|\ud83d\udd1b|\ud83d\udd1c|\ud83d\udd1d|\ud83d\udd1e|\ud83d\udd1f|\ud83d\udd20|\ud83d\udd21|\ud83d\udd22|\ud83d\udd23|\ud83d\udd24|\ud83d\udd25|\ud83d\udd26|\ud83d\udd27|\ud83d\udd28|\ud83d\udd29|\ud83d\udd2a|\ud83d\udd2b|\ud83d\udd2e|\ud83d\udd2f|\ud83d\udd30|\ud83d\udd31|\ud83d\udd32|\ud83d\udd33|\ud83d\udd34|\ud83d\udd35|\ud83d\udd36|\ud83d\udd37|\ud83d\udd38|\ud83d\udd39|\ud83d\udd3a|\ud83d\udd3b|\ud83d\udd3c|\ud83d\udd3d|\ud83d\udd50|\ud83d\udd51|\ud83d\udd52|\ud83d\udd53|\ud83d\udd54|\ud83d\udd55|\ud83d\udd56|\ud83d\udd57|\ud83d\udd58|\ud83d\udd59|\ud83d\udd5a|\ud83d\udd5b|\ud83d\uddfb|\ud83d\uddfc|\ud83d\uddfd|\ud83d\uddfe|\ud83d\uddff|\ud83d\ude01|\ud83d\ude02|\ud83d\ude03|\ud83d\ude04|\ud83d\ude05|\ud83d\ude06|\ud83d\ude09|\ud83d\ude0a|\ud83d\ude0b|\ud83d\ude0c|\ud83d\ude0d|\ud83d\ude0f|\ud83d\ude12|\ud83d\ude13|\ud83d\ude14|\ud83d\ude16|\ud83d\ude18|\ud83d\ude1a|\ud83d\ude1c|\ud83d\ude1d|\ud83d\ude1e|\ud83d\ude20|\ud83d\ude21|\ud83d\ude22|\ud83d\ude23|\ud83d\ude24|\ud83d\ude25|\ud83d\ude28|\ud83d\ude29|\ud83d\ude2a|\ud83d\ude2b|\ud83d\ude2d|\ud83d\ude30|\ud83d\ude31|\ud83d\ude32|\ud83d\ude33|\ud83d\ude35|\ud83d\ude37|\ud83d\ude38|\ud83d\ude39|\ud83d\ude3a|\ud83d\ude3b|\ud83d\ude3c|\ud83d\ude3d|\ud83d\ude3e|\ud83d\ude3f|\ud83d\ude40|\ud83d\ude45|\ud83d\ude46|\ud83d\ude47|\ud83d\ude48|\ud83d\ude49|\ud83d\ude4a|\ud83d\ude4b|\ud83d\ude4c|\ud83d\ude4d|\ud83d\ude4e|\ud83d\ude4f|\ud83d\ude80|\ud83d\ude83|\ud83d\ude84|\ud83d\ude85|\ud83d\ude87|\ud83d\ude89|\ud83d\ude8c|\ud83d\ude8f|\ud83d\ude91|\ud83d\ude92|\ud83d\ude93|\ud83d\ude95|\ud83d\ude97|\ud83d\ude99|\ud83d\ude9a|\ud83d\udea2|\ud83d\udea4|\ud83d\udea5|\ud83d\udea7|\ud83d\udea8|\ud83d\udea9|\ud83d\udeaa|\ud83d\udeab|\ud83d\udeac|\ud83d\udead|\ud83d\udeb2|\ud83d\udeb6|\ud83d\udeb9|\ud83d\udeba|\ud83d\udebb|\ud83d\udebc|\ud83d\udebd|\ud83d\udebe|\ud83d\udec0|\ud83c\udde6|\ud83c\udde7|\ud83c\udde8|\ud83c\udde9|\ud83c\uddea|\ud83c\uddeb|\ud83c\uddec|\ud83c\udded|\ud83c\uddee|\ud83c\uddef|\ud83c\uddf0|\ud83c\uddf1|\ud83c\uddf2|\ud83c\uddf3|\ud83c\uddf4|\ud83c\uddf5|\ud83c\uddf6|\ud83c\uddf7|\ud83c\uddf8|\ud83c\uddf9|\ud83c\uddfa|\ud83c\uddfb|\ud83c\uddfc|\ud83c\uddfd|\ud83c\uddfe|\ud83c\uddff|\ud83c\udf0d|\ud83c\udf0e|\ud83c\udf10|\ud83c\udf12|\ud83c\udf16|\ud83c\udf17|\ue50a|\u3030|\u27b0|\u2797|\u2796|\u2795|\u2755|\u2754|\u2753|\u274e|\u274c|\u2728|\u270b|\u270a|\u2705|\u26ce|\u23f3|\u23f0|\u23ec|\u23eb|\u23ea|\u23e9|\u2122|\u27bf|\u00a9|\u00ae)|(?:(?:\ud83c\udc04|\ud83c\udd7f|\ud83c\ude1a|\ud83c\ude2f|\u3299|\u303d|\u2b55|\u2b50|\u2b1c|\u2b1b|\u2b07|\u2b06|\u2b05|\u2935|\u2934|\u27a1|\u2764|\u2757|\u2747|\u2744|\u2734|\u2733|\u2716|\u2714|\u2712|\u270f|\u270c|\u2709|\u2708|\u2702|\u26fd|\u26fa|\u26f5|\u26f3|\u26f2|\u26ea|\u26d4|\u26c5|\u26c4|\u26be|\u26bd|\u26ab|\u26aa|\u26a1|\u26a0|\u2693|\u267f|\u267b|\u3297|\u2666|\u2665|\u2663|\u2660|\u2653|\u2652|\u2651|\u2650|\u264f|\u264e|\u264d|\u264c|\u264b|\u264a|\u2649|\u2648|\u263a|\u261d|\u2615|\u2614|\u2611|\u260e|\u2601|\u2600|\u25fe|\u25fd|\u25fc|\u25fb|\u25c0|\u25b6|\u25ab|\u25aa|\u24c2|\u231b|\u231a|\u21aa|\u21a9|\u2199|\u2198|\u2197|\u2196|\u2195|\u2194|\u2139|\u2049|\u203c|\u2668)([\uFE0E\uFE0F]?)))/g, + + // used to find HTML special chars in attributes + rescaper = /[&<>'"]/g, + + // nodes with type 1 which should **not** be parsed (including lower case svg) + shouldntBeParsed = /IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|SELECT|STYLE|TEXTAREA|[a-z]/, + + // just a private shortcut + fromCharCode = String.fromCharCode; + + return twemoji; + + + ///////////////////////// + // private functions // + // declaration // + ///////////////////////// + + /** + * Shortcut to create text nodes + * @param string text used to create DOM text node + * @return Node a DOM node with that text + */ + function createText(text) { + return document.createTextNode(text); + } + + /** + * Utility function to escape html attribute text + * @param string text use in HTML attribute + * @return string text encoded to use in HTML attribute + */ + function escapeHTML(s) { + return s.replace(rescaper, replacer); + } + + /** + * Default callback used to generate emoji src + * based on Twitter CDN + * @param string the emoji codepoint string + * @param string the default size to use, i.e. "36x36" + * @param string optional "\uFE0F" variant char, ignored by default + * @return string the image source to use + */ + function defaultImageSrcGenerator(icon, options) { + return ''.concat(options.base, options.size, '/', icon, options.ext); + } + + /** + * Given a generic DOM nodeType 1, walk through all children + * and store every nodeType 3 (#text) found in the tree. + * @param Element a DOM Element with probably some text in it + * @param Array the list of previously discovered text nodes + * @return Array same list with new discovered nodes, if any + */ + function grabAllTextNodes(node, allText) { + var + childNodes = node.childNodes, + length = childNodes.length, + subnode, + nodeType; + while (length--) { + subnode = childNodes[length]; + nodeType = subnode.nodeType; + // parse emoji only in text nodes + if (nodeType === 3) { + // collect them to process emoji later + allText.push(subnode); + } + // ignore all nodes that are not type 1 or that + // should not be parsed as script, style, and others + else if (nodeType === 1 && !shouldntBeParsed.test(subnode.nodeName)) { + grabAllTextNodes(subnode, allText); + } + } + return allText; + } + + /** + * Used to both remove the possible variant + * and to convert utf16 into code points + * @param string the emoji surrogate pair + * @param string the optional variant char, if any + */ + function grabTheRightIcon(icon, variant) { + // if variant is present as \uFE0F + return toCodePoint( + variant === '\uFE0F' ? + // the icon should not contain it + icon.slice(0, -1) : + // fix non standard OSX behavior + (icon.length === 3 && icon.charAt(1) === '\uFE0F' ? + icon.charAt(0) + icon.charAt(2) : icon) + ); + } + + /** + * DOM version of the same logic / parser: + * emojify all found sub-text nodes placing images node instead. + * @param Element generic DOM node with some text in some child node + * @param Object options containing info about how to parse + * + * .callback Function the callback to invoke per each found emoji. + * .base string the base url, by default twemoji.base + * .ext string the image extension, by default twemoji.ext + * .size string the assets size, by default twemoji.size + * + * @return Element same generic node with emoji in place, if any. + */ + function parseNode(node, options) { + var + allText = grabAllTextNodes(node, []), + length = allText.length, + attrib, + attrname, + modified, + fragment, + subnode, + text, + match, + i, + index, + img, + alt, + icon, + variant, + src; + while (length--) { + modified = false; + fragment = document.createDocumentFragment(); + subnode = allText[length]; + text = subnode.nodeValue; + i = 0; + while ((match = re.exec(text))) { + index = match.index; + if (index !== i) { + fragment.appendChild( + createText(text.slice(i, index)) + ); + } + alt = match[0]; + icon = match[1]; + variant = match[2]; + i = index + alt.length; + if (variant !== '\uFE0E') { + src = options.callback( + grabTheRightIcon(icon, variant), + options, + variant + ); + if (src) { + img = new Image(); + img.onerror = twemoji.onerror; + img.setAttribute('draggable', 'false'); + attrib = options.attributes(icon, variant); + for (attrname in attrib) { + if ( + attrib.hasOwnProperty(attrname) && + // don't allow any handlers to be set + don't allow overrides + attrname.indexOf('on') !== 0 && + !img.hasAttribute(attrname) + ) { + img.setAttribute(attrname, attrib[attrname]); + } + } + img.className = options.className; + img.alt = alt; + img.src = src; + modified = true; + fragment.appendChild(img); + } + } + if (!img) fragment.appendChild(createText(alt)); + img = null; + } + // is there actually anything to replace in here ? + if (modified) { + // any text left to be added ? + if (i < text.length) { + fragment.appendChild( + createText(text.slice(i)) + ); + } + // replace the text node only, leave intact + // anything else surrounding such text + subnode.parentNode.replaceChild(fragment, subnode); + } + } + return node; + } + + /** + * String/HTML version of the same logic / parser: + * emojify a generic text placing images tags instead of surrogates pair. + * @param string generic string with possibly some emoji in it + * @param Object options containing info about how to parse + * + * .callback Function the callback to invoke per each found emoji. + * .base string the base url, by default twemoji.base + * .ext string the image extension, by default twemoji.ext + * .size string the assets size, by default twemoji.size + * + * @return the string with replacing all found and parsed emoji + */ + function parseString(str, options) { + return replace(str, function (match, icon, variant) { + var + ret = match, + attrib, + attrname, + src; + // verify the variant is not the FE0E one + // this variant means "emoji as text" and should not + // require any action/replacement + // http://unicode.org/Public/UNIDATA/StandardizedVariants.html + if (variant !== '\uFE0E') { + src = options.callback( + grabTheRightIcon(icon, variant), + options, + variant + ); + if (src) { + // recycle the match string replacing the emoji + // with its image counter part + ret = ''); + } + } + return ret; + }); + } + + /** + * Function used to actually replace HTML special chars + * @param string HTML special char + * @return string encoded HTML special char + */ + function replacer(m) { + return escaper[m]; + } + + /** + * Default options.attribute callback + * @return null + */ + function returnNull() { + return null; + } + + /** + * Given a generic value, creates its squared counterpart if it's a number. + * As example, number 36 will return '36x36'. + * @param any a generic value. + * @return any a string representing asset size, i.e. "36x36" + * only in case the value was a number. + * Returns initial value otherwise. + */ + function toSizeSquaredAsset(value) { + return typeof value === 'number' ? + value + 'x' + value : + value; + } + + + ///////////////////////// + // exported functions // + // declaration // + ///////////////////////// + + function fromCodePoint(codepoint) { + var code = typeof codepoint === 'string' ? + parseInt(codepoint, 16) : codepoint; + if (code < 0x10000) { + return fromCharCode(code); + } + code -= 0x10000; + return fromCharCode( + 0xD800 + (code >> 10), + 0xDC00 + (code & 0x3FF) + ); + } + + function parse(what, how) { + if (!how || typeof how === 'function') { + how = {callback: how}; + } + // if first argument is string, inject html tags + // otherwise use the DOM tree and parse text nodes only + return (typeof what === 'string' ? parseString : parseNode)(what, { + callback: how.callback || defaultImageSrcGenerator, + attributes: typeof how.attributes === 'function' ? how.attributes : returnNull, + base: typeof how.base === 'string' ? how.base : twemoji.base, + ext: how.ext || twemoji.ext, + size: how.folder || toSizeSquaredAsset(how.size || twemoji.size), + className: how.className || twemoji.className + }); + } + + function replace(text, callback) { + return String(text).replace(re, callback); + } + + function test(text) { + // IE6 needs a reset before too + re.lastIndex = 0; + var result = re.test(text); + re.lastIndex = 0; + return result; + } + + function toCodePoint(unicodeSurrogates, sep) { + var + r = [], + c = 0, + p = 0, + i = 0; + while (i < unicodeSurrogates.length) { + c = unicodeSurrogates.charCodeAt(i++); + if (p) { + r.push((0x10000 + ((p - 0xD800) << 10) + (c - 0xDC00)).toString(16)); + p = 0; + } else if (0xD800 <= c && c <= 0xDBFF) { + p = c; + } else { + r.push(c.toString(16)); + } + } + return r.join(sep || '-'); + } + +}());;System.register('flarum/emoji/main', ['flarum/extend', 'flarum/app', 'flarum/models/Post'], function (_export) { + /*global twemoji, s9e*/ + + 'use strict'; + + var override, app, Post; + return { + setters: [function (_flarumExtend) { + override = _flarumExtend.override; + }, function (_flarumApp) { + app = _flarumApp['default']; + }, function (_flarumModelsPost) { + Post = _flarumModelsPost['default']; + }], + execute: function () { + + app.initializers.add('flarum-emoji', function () { + override(Post.prototype, 'contentHtml', function (original) { + var contentHtml = original(); + + if (this.oldContentHtml !== contentHtml) { + this.emojifiedContentHtml = twemoji.parse(contentHtml); + this.oldContentHtml = contentHtml; + } + + return this.emojifiedContentHtml; + }); + + override(s9e.TextFormatter, 'preview', function (original, text, element) { + original(text, element); + + twemoji.parse(element); + }); + }); + } + }; +}); \ No newline at end of file diff --git a/extensions/emoji/js/forum/src/main.js b/extensions/emoji/js/forum/src/main.js index 26ce757fc..354587d49 100644 --- a/extensions/emoji/js/forum/src/main.js +++ b/extensions/emoji/js/forum/src/main.js @@ -4,7 +4,7 @@ import { override } from 'flarum/extend'; import app from 'flarum/app'; import Post from 'flarum/models/Post'; -app.initializers.add('emoji', () => { +app.initializers.add('flarum-emoji', () => { override(Post.prototype, 'contentHtml', function(original) { const contentHtml = original(); diff --git a/extensions/emoji/locale/en.yml b/extensions/emoji/locale/en.yml deleted file mode 100644 index 55f519f92..000000000 --- a/extensions/emoji/locale/en.yml +++ /dev/null @@ -1,2 +0,0 @@ -emoji: - diff --git a/extensions/emoji/scripts/compile.sh b/extensions/emoji/scripts/compile.sh new file mode 100755 index 000000000..b0d8e8bd3 --- /dev/null +++ b/extensions/emoji/scripts/compile.sh @@ -0,0 +1,27 @@ +#!/usr/bin/env bash + +# This script compiles the extension so that it can be used in a Flarum +# installation. It should be run from the root directory of the extension. + +base=$PWD + +cd "${base}/js" + +if [ -f bower.json ]; then + bower install +fi + +for app in forum admin; do + cd "${base}/js" + + if [ -d $app ]; then + cd $app + + if [ -f bower.json ]; then + bower install + fi + + npm install + gulp --production + fi +done diff --git a/extensions/emoji/src/Listener/AddClientAssets.php b/extensions/emoji/src/Listener/AddClientAssets.php new file mode 100644 index 000000000..5b01282ac --- /dev/null +++ b/extensions/emoji/src/Listener/AddClientAssets.php @@ -0,0 +1,39 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace Flarum\Emoji\Listener; + +use Flarum\Event\ConfigureClientView; +use Illuminate\Contracts\Events\Dispatcher; + +class AddClientAssets +{ + /** + * @param Dispatcher $events + */ + public function subscribe(Dispatcher $events) + { + $events->listen(ConfigureClientView::class, [$this, 'addAssets']); + } + + /** + * @param ConfigureClientView $event + */ + public function addAssets(ConfigureClientView $event) + { + if ($event->isForum()) { + $event->addAssets([ + __DIR__ . '/../../js/forum/dist/extension.js', + __DIR__ . '/../../less/forum/extension.less' + ]); + $event->addBootstrapper('flarum/emoji/main'); + } + } +} diff --git a/extensions/emoji/src/Listeners/AddEmoticons.php b/extensions/emoji/src/Listener/FormatEmoticons.php similarity index 77% rename from extensions/emoji/src/Listeners/AddEmoticons.php rename to extensions/emoji/src/Listener/FormatEmoticons.php index bc17178d1..d4e0d0cc1 100644 --- a/extensions/emoji/src/Listeners/AddEmoticons.php +++ b/extensions/emoji/src/Listener/FormatEmoticons.php @@ -8,19 +8,25 @@ * file that was distributed with this source code. */ -namespace Flarum\Emoji\Listeners; +namespace Flarum\Emoji\Listener; -use Flarum\Events\FormatterConfigurator; +use Flarum\Event\ConfigureFormatter; use Illuminate\Contracts\Events\Dispatcher; -class AddEmoticons +class FormatEmoticons { + /** + * @param Dispatcher $events + */ public function subscribe(Dispatcher $events) { - $events->listen(FormatterConfigurator::class, [$this, 'addEmoticons']); + $events->listen(ConfigureFormatter::class, [$this, 'addEmoticons']); } - public function addEmoticons(FormatterConfigurator $event) + /** + * @param ConfigureFormatter $event + */ + public function addEmoticons(ConfigureFormatter $event) { $event->configurator->Emoticons->add(':)', '😄'); $event->configurator->Emoticons->add(':D', '😃'); diff --git a/extensions/emoji/src/Listeners/AddClientAssets.php b/extensions/emoji/src/Listeners/AddClientAssets.php deleted file mode 100644 index 9f733af91..000000000 --- a/extensions/emoji/src/Listeners/AddClientAssets.php +++ /dev/null @@ -1,39 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace Flarum\Emoji\Listeners; - -use Flarum\Events\RegisterLocales; -use Flarum\Events\BuildClientView; -use Illuminate\Contracts\Events\Dispatcher; - -class AddClientAssets -{ - public function subscribe(Dispatcher $events) - { - $events->listen(RegisterLocales::class, [$this, 'addLocale']); - $events->listen(BuildClientView::class, [$this, 'addAssets']); - } - - public function addLocale(RegisterLocales $event) - { - $event->addTranslations('en', __DIR__.'/../../locale/en.yml'); - } - - public function addAssets(BuildClientView $event) - { - $event->forumAssets([ - __DIR__.'/../../js/forum/dist/extension.js', - __DIR__.'/../../less/forum/extension.less' - ]); - - $event->forumBootstrapper('emoji/main'); - } -}