From 0996c3b7b36c37c3b478985da6e968f54dc4835c Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Mon, 30 Mar 2020 20:16:10 +0200 Subject: [PATCH] FEATURE: allows multiple custom emoji groups (#9308) Note: DBHelper would fail with a sql syntax error on columns like "group". Co-authored-by: Jarek Radosz --- .../admin/controllers/admin-emojis.js | 83 ++++++++++++++----- .../javascripts/admin/templates/emojis.hbs | 68 +++++++++------ .../discourse/components/emoji-picker.js | 29 +++++-- .../discourse/components/emoji-uploader.js | 48 +++++++++-- .../discourse/initializers/enable-emoji.js | 2 +- .../templates/components/emoji-uploader.hbs | 59 ++++++++++--- .../discourse/templates/emoji-picker.hbr.erb | 36 ++++---- app/assets/javascripts/pretty-text/emoji.js | 14 ++-- .../stylesheets/common/admin/admin_base.scss | 1 + .../common/admin/admin_emojis.scss | 50 +++++++++++ .../stylesheets/common/admin/customize.scss | 2 +- app/assets/stylesheets/common/base/emoji.scss | 2 + app/assets/stylesheets/mobile/emoji.scss | 4 + app/controllers/admin/emojis_controller.rb | 5 +- app/models/custom_emoji.rb | 1 + app/models/emoji.rb | 18 ++-- app/serializers/emoji_serializer.rb | 2 +- config/locales/client.en.yml | 3 +- ...200116092259_add_group_to_custom_emojis.rb | 7 ++ lib/db_helper.rb | 22 ++--- lib/plugin/instance.rb | 25 ++++-- spec/components/plugin/instance_spec.rb | 26 ++++++ spec/requests/admin/emojis_controller_spec.rb | 40 ++++++--- test/javascripts/lib/pretty-text-test.js | 19 +++++ 24 files changed, 428 insertions(+), 138 deletions(-) create mode 100644 app/assets/stylesheets/common/admin/admin_emojis.scss create mode 100644 db/migrate/20200116092259_add_group_to_custom_emojis.rb diff --git a/app/assets/javascripts/admin/controllers/admin-emojis.js b/app/assets/javascripts/admin/controllers/admin-emojis.js index 6a1d295759c..1a496707032 100644 --- a/app/assets/javascripts/admin/controllers/admin-emojis.js +++ b/app/assets/javascripts/admin/controllers/admin-emojis.js @@ -1,37 +1,74 @@ import { sort } from "@ember/object/computed"; -import EmberObject from "@ember/object"; +import EmberObject, { action, computed } from "@ember/object"; import Controller from "@ember/controller"; import { ajax } from "discourse/lib/ajax"; + +const ALL_FILTER = "all"; + export default Controller.extend({ - sortedEmojis: sort("model", "emojiSorting"), + filter: null, + sorting: null, init() { this._super(...arguments); - this.emojiSorting = ["name"]; + this.setProperties({ + filter: ALL_FILTER, + sorting: ["group", "name"] + }); }, - actions: { - emojiUploaded(emoji) { - emoji.url += "?t=" + new Date().getTime(); - this.model.pushObject(EmberObject.create(emoji)); - }, + sortedEmojis: sort("filteredEmojis.[]", "sorting"), - destroy(emoji) { - return bootbox.confirm( - I18n.t("admin.emoji.delete_confirm", { name: emoji.get("name") }), - I18n.t("no_value"), - I18n.t("yes_value"), - destroy => { - if (destroy) { - return ajax("/admin/customize/emojis/" + emoji.get("name"), { - type: "DELETE" - }).then(() => { - this.model.removeObject(emoji); - }); - } - } - ); + emojiGroups: computed("model", { + get() { + return this.model.mapBy("group").uniq(); } + }), + + sortingGroups: computed("emojiGroups.[]", { + get() { + return [ALL_FILTER].concat(this.emojiGroups); + } + }), + + filteredEmojis: computed("model.[]", "filter", { + get() { + if (!this.filter || this.filter === ALL_FILTER) { + return this.model; + } else { + return this.model.filterBy("group", this.filter); + } + } + }), + + @action + filterGroups(value) { + this.set("filter", value); + }, + + @action + emojiUploaded(emoji, group) { + emoji.url += "?t=" + new Date().getTime(); + emoji.group = group; + this.model.pushObject(EmberObject.create(emoji)); + }, + + @action + destroyEmoji(emoji) { + return bootbox.confirm( + I18n.t("admin.emoji.delete_confirm", { name: emoji.get("name") }), + I18n.t("no_value"), + I18n.t("yes_value"), + destroy => { + if (destroy) { + return ajax("/admin/customize/emojis/" + emoji.get("name"), { + type: "DELETE" + }).then(() => { + this.model.removeObject(emoji); + }); + } + } + ); } }); diff --git a/app/assets/javascripts/admin/templates/emojis.hbs b/app/assets/javascripts/admin/templates/emojis.hbs index 5f9de8104ca..f2547b96780 100644 --- a/app/assets/javascripts/admin/templates/emojis.hbs +++ b/app/assets/javascripts/admin/templates/emojis.hbs @@ -1,35 +1,49 @@ -
-

{{i18n 'admin.emoji.title'}}

+
+

{{i18n 'admin.emoji.title'}}

-

{{i18n 'admin.emoji.help'}}

+

{{i18n "admin.emoji.help"}}

-

{{emoji-uploader done=(action "emojiUploaded")}}

+ {{emoji-uploader + emojiGroups=emojiGroups + done=(action "emojiUploaded") + }} + +
{{#if sortedEmojis}} -
- - +
+ + + + + + + + + + {{#each sortedEmojis as |e|}} - - - + + + + - - - {{#each sortedEmojis as |e|}} - - - - - - {{/each}} - -
{{i18n "admin.emoji.image"}}{{i18n "admin.emoji.name"}} + {{combo-box + value=filter + content=sortingGroups + nameProperty=null + valueProperty=null + onChange=(action "filterGroups") + }} +
{{i18n "admin.emoji.image"}}{{i18n "admin.emoji.name"}}:{{e.name}}:{{e.group}} + {{d-button + action=(action "destroyEmoji" e) + class="btn-danger" + icon="far-trash-alt" + }} +
:{{e.name}}: - {{d-button - action=(action "destroy" e) - class="btn-danger pull-right" - icon="far-trash-alt"}} -
-
+ {{/each}} + + {{/if}}
diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js b/app/assets/javascripts/discourse/components/emoji-picker.js index 2696ca1358e..ef56c4182a8 100644 --- a/app/assets/javascripts/discourse/components/emoji-picker.js +++ b/app/assets/javascripts/discourse/components/emoji-picker.js @@ -14,9 +14,26 @@ import ENV, { INPUT_DELAY } from "discourse-common/config/environment"; const { run } = Ember; const PER_ROW = 11; -const customEmojis = _.keys(extendedEmojiList()).map(code => { - return { code, src: emojiUrlFor(code) }; -}); +function customEmojis() { + const list = extendedEmojiList(); + const emojis = Object.keys(list) + .map(code => { + const { group } = list[code]; + return { + code, + src: emojiUrlFor(code), + group, + key: `emoji_picker.${group || "default"}` + }; + }) + .reduce((acc, curr) => { + if (!acc[curr.group]) acc[curr.group] = []; + acc[curr.group].push(curr); + return acc; + }, {}); + + return Object.values(emojis); +} export default Component.extend({ automaticPositioning: true, @@ -35,7 +52,9 @@ export default Component.extend({ }, show() { - const template = findRawTemplate("emoji-picker")({ customEmojis }); + const template = findRawTemplate("emoji-picker")({ + customEmojis: customEmojis() + }); this.$picker.html(template); this.$filter = this.$picker.find(".filter"); @@ -579,7 +598,7 @@ export default Component.extend({ this.$picker.width() - this.$picker.find(".categories-column").width() - this.$picker.find(".diversity-picker").width() - - 32; + 60; this.$picker.find(".info").css("max-width", infoMaxWidth); }, diff --git a/app/assets/javascripts/discourse/components/emoji-uploader.js b/app/assets/javascripts/discourse/components/emoji-uploader.js index 77e2d5e9ffa..9693811c157 100644 --- a/app/assets/javascripts/discourse/components/emoji-uploader.js +++ b/app/assets/javascripts/discourse/components/emoji-uploader.js @@ -1,23 +1,53 @@ import { notEmpty, not } from "@ember/object/computed"; +import { action } from "@ember/object"; import Component from "@ember/component"; import discourseComputed from "discourse-common/utils/decorators"; import UploadMixin from "discourse/mixins/upload"; +const DEFAULT_GROUP = "default"; + export default Component.extend(UploadMixin, { type: "emoji", uploadUrl: "/admin/customize/emojis", hasName: notEmpty("name"), + hasGroup: notEmpty("group"), addDisabled: not("hasName"), + group: "default", + emojiGroups: null, + newEmojiGroups: null, + tagName: null, - uploadOptions() { - return { - sequentialUploads: true - }; + didReceiveAttrs() { + this._super(...arguments); + + this.set("newEmojiGroups", this.emojiGroups); }, - @discourseComputed("hasName", "name") - data(hasName, name) { - return hasName ? { name } : {}; + uploadOptions() { + return { sequentialUploads: true }; + }, + + @action + createEmojiGroup(group) { + this.setProperties({ + newEmojiGroups: this.emojiGroups.concat([group]).uniq(), + group + }); + }, + + @discourseComputed("hasName", "name", "hasGroup", "group") + data(hasName, name, hasGroup, group) { + const payload = {}; + + if (hasName) { + payload.name = name; + } + + if (hasGroup && group !== DEFAULT_GROUP) { + payload.group = group; + } + + return payload; }, validateUploadedFilesOptions() { @@ -25,7 +55,7 @@ export default Component.extend(UploadMixin, { }, uploadDone(upload) { - this.set("name", null); - this.done(upload); + this.done(upload, this.group); + this.setProperties({ name: null, group: DEFAULT_GROUP }); } }); diff --git a/app/assets/javascripts/discourse/initializers/enable-emoji.js b/app/assets/javascripts/discourse/initializers/enable-emoji.js index 71bf416025b..a6e3e6d03ad 100644 --- a/app/assets/javascripts/discourse/initializers/enable-emoji.js +++ b/app/assets/javascripts/discourse/initializers/enable-emoji.js @@ -24,7 +24,7 @@ export default { }); (PreloadStore.get("customEmoji") || []).forEach(emoji => - registerEmoji(emoji.name, emoji.url) + registerEmoji(emoji.name, emoji.url, emoji.group) ); } }; diff --git a/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs b/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs index 153fe696a68..186ee15afe2 100644 --- a/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs +++ b/app/assets/javascripts/discourse/templates/components/emoji-uploader.hbs @@ -1,11 +1,48 @@ -{{text-field name="name" placeholderKey="admin.emoji.name" value=name}} - - +{{#conditional-loading-section isLoading=uploading}} +
+
+ + {{i18n "admin.emoji.name"}} + +
+ {{input + name="name" + placeholderKey="admin.emoji.name" + value=(readonly name) + input=(action (mut name) value="target.value") + }} +
+
+
+ + {{i18n "admin.emoji.group"}} + +
+ {{combo-box + name="group" + value=group + content=newEmojiGroups + onChange=(action "createEmojiGroup") + valueProperty=null + nameProperty=null + options=(hash + allowAny=true + ) + }} +
+
+
+
+ +
+
+
+{{/conditional-loading-section}} diff --git a/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb b/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb index dd04f149d36..5a333521653 100644 --- a/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb +++ b/app/assets/javascripts/discourse/templates/emoji-picker.hbr.erb @@ -9,10 +9,12 @@
<% end %> - <% if !Emoji.custom.blank? %> -
- -
+ <% Emoji.custom.group_by { |emoji| emoji.group }.each do |group, emojis| %> + <% if emojis.present? %> +
+ +
+ <% end %> <% end %> @@ -49,18 +51,22 @@ <% end %> - {{#if customEmojis.length}} -
-
- {{i18n 'emoji_picker.custom'}} + {{#each customEmojis as |emojis|}} + {{#if emojis.length}} +
+
+ + {{i18n emojis.firstObject.key}} + +
+
+ {{#each emojis as |emoji|}} + + {{/each}} +
-
- {{#each customEmojis as |emoji|}} - - {{/each}} -
-
- {{/if}} + {{/if}} + {{/each}}
diff --git a/app/assets/javascripts/pretty-text/emoji.js b/app/assets/javascripts/pretty-text/emoji.js index fa7754da596..6346cd93b12 100644 --- a/app/assets/javascripts/pretty-text/emoji.js +++ b/app/assets/javascripts/pretty-text/emoji.js @@ -10,9 +10,9 @@ import { IMAGE_VERSION } from "pretty-text/emoji/version"; const extendedEmoji = {}; -export function registerEmoji(code, url) { +export function registerEmoji(code, url, group) { code = code.toLowerCase(); - extendedEmoji[code] = url; + extendedEmoji[code] = { url, group }; } export function extendedEmojiList() { @@ -92,7 +92,7 @@ function isReplacableInlineEmoji(string, index, inlineEmoji) { } export function performEmojiUnescape(string, opts) { - if (!string || typeof string !== "string") { + if (!string) { return; } @@ -126,6 +126,8 @@ export function performEmojiUnescape(string, opts) { } alt='${emojiVal}' class='${classes}'>` : m; }); + + return string; } export function performEmojiEscape(string, opts) { @@ -143,6 +145,8 @@ export function performEmojiEscape(string, opts) { return m; }); + + return string; } export function isCustomEmoji(code, opts) { @@ -157,11 +161,11 @@ export function buildEmojiUrl(code, opts) { let url; code = String(code).toLowerCase(); if (extendedEmoji.hasOwnProperty(code)) { - url = extendedEmoji[code]; + url = extendedEmoji[code].url; } if (opts && opts.customEmoji && opts.customEmoji[code]) { - url = opts.customEmoji[code]; + url = opts.customEmoji[code].url || opts.customEmoji[code]; } const noToneMatch = code.match(/([^:]+):?/); diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 61f73bc2b25..afdc9a7e3be 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -979,3 +979,4 @@ a.inline-editable-field { @import "common/admin/admin_report_table"; @import "common/admin/admin_report_inline_table"; @import "common/admin/admin_intro"; +@import "common/admin/admin_emojis"; diff --git a/app/assets/stylesheets/common/admin/admin_emojis.scss b/app/assets/stylesheets/common/admin/admin_emojis.scss new file mode 100644 index 00000000000..c6cf4c2fbda --- /dev/null +++ b/app/assets/stylesheets/common/admin/admin_emojis.scss @@ -0,0 +1,50 @@ +.admin-emojis { + #custom_emoji { + .select-kit { + width: 220px; + } + } +} + +.emoji-uploader { + display: flex; + align-items: flex-end; + + input, + .select-kit { + width: 220px; + margin: 0 1em 0 0; + } + + .upload-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } +} + +.mobile-view { + .admin-emojis { + .emoji-uploader { + flex-direction: column; + + .fields { + input, + .select-kit { + width: 100%; + } + } + + .upload-container { + margin: 1em 0 0 0; + } + } + + #custom_emoji { + .select-kit { + display: none; + } + } + } +} diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index 86c1cb94425..d887275e94b 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/app/assets/stylesheets/common/admin/customize.scss @@ -556,7 +556,7 @@ } #custom_emoji { - width: 27%; + width: 100%; } .modal-body .inputs .branch { diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss index d7a29b8dc66..b4c2098104b 100644 --- a/app/assets/stylesheets/common/base/emoji.scss +++ b/app/assets/stylesheets/common/base/emoji.scss @@ -45,6 +45,8 @@ sup img.emoji { justify-content: space-between; border-right: 1px solid $primary-low; min-width: 36px; + overflow-y: auto; + padding: 0.5em; } .emoji-picker .category-icon { diff --git a/app/assets/stylesheets/mobile/emoji.scss b/app/assets/stylesheets/mobile/emoji.scss index 233c32bd056..d130186a7e7 100644 --- a/app/assets/stylesheets/mobile/emoji.scss +++ b/app/assets/stylesheets/mobile/emoji.scss @@ -6,3 +6,7 @@ .emoji-picker .category-icon { margin: 2px; } + +.emoji-picker .categories-column { + padding: 0; +} diff --git a/app/controllers/admin/emojis_controller.rb b/app/controllers/admin/emojis_controller.rb index cc747777780..72e1c308011 100644 --- a/app/controllers/admin/emojis_controller.rb +++ b/app/controllers/admin/emojis_controller.rb @@ -9,6 +9,7 @@ class Admin::EmojisController < Admin::AdminController def create file = params[:file] || params[:files].first name = params[:name] || File.basename(file.original_filename, ".*") + group = params[:group] ? params[:group].downcase : nil hijack do # fix the name @@ -26,11 +27,11 @@ class Admin::EmojisController < Admin::AdminController data = if upload.persisted? - custom_emoji = CustomEmoji.new(name: name, upload: upload) + custom_emoji = CustomEmoji.new(name: name, upload: upload, group: group) if custom_emoji.save Emoji.clear_cache - { name: custom_emoji.name, url: custom_emoji.upload.url } + { name: custom_emoji.name, url: custom_emoji.upload.url, group: group } else good = false failed_json.merge(errors: custom_emoji.errors.full_messages) diff --git a/app/models/custom_emoji.rb b/app/models/custom_emoji.rb index 8a9d3c9236a..118615c98e7 100644 --- a/app/models/custom_emoji.rb +++ b/app/models/custom_emoji.rb @@ -14,6 +14,7 @@ end # id :integer not null, primary key # name :string not null # upload_id :integer not null +# group :string # created_at :datetime not null # updated_at :datetime not null # diff --git a/app/models/emoji.rb b/app/models/emoji.rb index 5b8774c2c0d..e57fc3b81a4 100644 --- a/app/models/emoji.rb +++ b/app/models/emoji.rb @@ -6,9 +6,11 @@ class Emoji FITZPATRICK_SCALE ||= [ "1f3fb", "1f3fc", "1f3fd", "1f3fe", "1f3ff" ] + DEFAULT_GROUP ||= "default" + include ActiveModel::SerializerSupport - attr_accessor :name, :url, :tonable + attr_accessor :name, :url, :tonable, :group def self.all Discourse.cache.fetch(cache_key("all_emojis")) { standard | custom } @@ -104,15 +106,19 @@ class Emoji result << Emoji.new.tap do |e| e.name = emoji.name e.url = emoji.upload&.url + e.group = emoji.group || DEFAULT_GROUP end end end - Plugin::CustomEmoji.emojis.each do |name, url| - result << Emoji.new.tap do |e| - e.name = name - url = (Discourse.base_uri + url) if url[/^\/[^\/]/] - e.url = url + Plugin::CustomEmoji.emojis.each do |group, emojis| + emojis.each do |name, url| + result << Emoji.new.tap do |e| + e.name = name + url = (Discourse.base_uri + url) if url[/^\/[^\/]/] + e.url = url + e.group = group || DEFAULT_GROUP + end end end diff --git a/app/serializers/emoji_serializer.rb b/app/serializers/emoji_serializer.rb index 2e45b034151..d0d440e24dc 100644 --- a/app/serializers/emoji_serializer.rb +++ b/app/serializers/emoji_serializer.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true class EmojiSerializer < ApplicationSerializer - attributes :name, :url + attributes :name, :url, :group end diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index f3ea234cb83..c60d83b608e 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1651,7 +1651,6 @@ en: objects: Objects symbols: Symbols flags: Flags - custom: Custom emojis recent: Recently used default_tone: No skin tone light_tone: Light skin tone @@ -1659,6 +1658,7 @@ en: medium_tone: Medium skin tone medium_dark_tone: Medium dark skin tone dark_tone: Dark skin tone + default: Custom emojis shared_drafts: title: "Shared Drafts" @@ -4556,6 +4556,7 @@ en: help: "Add new emoji that will be available to everyone. (PROTIP: drag & drop multiple files at once)" add: "Add New Emoji" name: "Name" + group: "Group" image: "Image" delete_confirm: "Are you sure you want to delete the :%{name}: emoji?" diff --git a/db/migrate/20200116092259_add_group_to_custom_emojis.rb b/db/migrate/20200116092259_add_group_to_custom_emojis.rb new file mode 100644 index 00000000000..ddc80c984af --- /dev/null +++ b/db/migrate/20200116092259_add_group_to_custom_emojis.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +class AddGroupToCustomEmojis < ActiveRecord::Migration[6.0] + def change + add_column :custom_emojis, :group, :string, null: true, limit: 20 + end +end diff --git a/lib/db_helper.rb b/lib/db_helper.rb index ede8cf0de22..86f14ebc8b2 100644 --- a/lib/db_helper.rb +++ b/lib/db_helper.rb @@ -29,17 +29,17 @@ class DbHelper text_columns.each do |table, columns| set = columns.map do |column| - replace = "REPLACE(#{column[:name]}, :from, :to)" + replace = "REPLACE(\"#{column[:name]}\", :from, :to)" replace = truncate(replace, table, column) - "#{column[:name]} = #{replace}" + "\"#{column[:name]}\" = #{replace}" end.join(", ") where = columns.map do |column| - "#{column[:name]} IS NOT NULL AND #{column[:name]} LIKE :like" + "\"#{column[:name]}\" IS NOT NULL AND \"#{column[:name]}\" LIKE :like" end.join(" OR ") rows = DB.exec(<<~SQL, from: from, to: to, like: like) - UPDATE #{table} + UPDATE \"#{table}\" SET #{set} WHERE #{where} SQL @@ -55,17 +55,17 @@ class DbHelper text_columns.each do |table, columns| set = columns.map do |column| - replace = "REGEXP_REPLACE(#{column[:name]}, :pattern, :replacement, :flags)" + replace = "REGEXP_REPLACE(\"#{column[:name]}\", :pattern, :replacement, :flags)" replace = truncate(replace, table, column) - "#{column[:name]} = #{replace}" + "\"#{column[:name]}\" = #{replace}" end.join(", ") where = columns.map do |column| - "#{column[:name]} IS NOT NULL AND #{column[:name]} #{match} :pattern" + "\"#{column[:name]}\" IS NOT NULL AND \"#{column[:name]}\" #{match} :pattern" end.join(" OR ") rows = DB.exec(<<~SQL, pattern: pattern, replacement: replacement, flags: flags, match: match) - UPDATE #{table} + UPDATE \"#{table}\" SET #{set} WHERE #{where} SQL @@ -84,9 +84,9 @@ class DbHelper next if excluded_tables.include?(r.table_name) rows = DB.query(<<~SQL, like: like) - SELECT #{r.column_name} - FROM #{r.table_name} - WHERE #{r.column_name} LIKE :like + SELECT \"#{r.column_name}\" + FROM \"#{r.table_name}\" + WHERE \""#{r.column_name}"\" LIKE :like SQL if rows.size > 0 diff --git a/lib/plugin/instance.rb b/lib/plugin/instance.rb index 06070d5f02d..2510e6c4998 100644 --- a/lib/plugin/instance.rb +++ b/lib/plugin/instance.rb @@ -6,21 +6,29 @@ require_dependency 'plugin/metadata' require_dependency 'auth' class Plugin::CustomEmoji + CACHE_KEY ||= "plugin-emoji" def self.cache_key - @@cache_key ||= "plugin-emoji" + @@cache_key ||= CACHE_KEY end def self.emojis @@emojis ||= {} end - def self.register(name, url) - @@cache_key = Digest::SHA1.hexdigest(cache_key + name)[0..10] - emojis[name] = url + def self.clear_cache + @@cache_key = CACHE_KEY + @@emojis = {} end - def self.unregister(name) - emojis.delete(name) + def self.register(name, url, group = Emoji::DEFAULT_GROUP) + @@cache_key = Digest::SHA1.hexdigest(cache_key + name + group)[0..10] + new_group = emojis[group] || {} + new_group[name] = url + emojis[group] = new_group + end + + def self.unregister(name, group = Emoji::DEFAULT_GROUP) + emojis[group].delete(name) end def self.translations @@ -471,8 +479,9 @@ class Plugin::Instance DiscoursePluginRegistry.register_seed_path_builder(&block) end - def register_emoji(name, url) - Plugin::CustomEmoji.register(name, url) + def register_emoji(name, url, group = Emoji::DEFAULT_GROUP) + Plugin::CustomEmoji.register(name, url, group) + Emoji.clear_cache end def translate_emoji(from, to) diff --git a/spec/components/plugin/instance_spec.rb b/spec/components/plugin/instance_spec.rb index bd33bb4847b..6453339706c 100644 --- a/spec/components/plugin/instance_spec.rb +++ b/spec/components/plugin/instance_spec.rb @@ -538,4 +538,30 @@ describe Plugin::Instance do expect(Reviewable.types).to match_array(current_list << new_element) end end + + describe '#register_emoji' do + before do + Plugin::CustomEmoji.clear_cache + end + + it 'allows to register an emoji' do + Plugin::Instance.new.register_emoji("foo", "/foo/bar.png") + + custom_emoji = Emoji.custom.first + + expect(custom_emoji.name).to eq("foo") + expect(custom_emoji.url).to eq("/foo/bar.png") + expect(custom_emoji.group).to eq(Emoji::DEFAULT_GROUP) + end + + it 'allows to register an emoji with a group' do + Plugin::Instance.new.register_emoji("bar", "/baz/bar.png", "baz") + + custom_emoji = Emoji.custom.first + + expect(custom_emoji.name).to eq("bar") + expect(custom_emoji.url).to eq("/baz/bar.png") + expect(custom_emoji.group).to eq("baz") + end + end end diff --git a/spec/requests/admin/emojis_controller_spec.rb b/spec/requests/admin/emojis_controller_spec.rb index a0f6d8cec83..5ab52b34471 100644 --- a/spec/requests/admin/emojis_controller_spec.rb +++ b/spec/requests/admin/emojis_controller_spec.rb @@ -59,22 +59,38 @@ RSpec.describe Admin::EmojisController do it 'should allow an admin to add a custom emoji' do Emoji.expects(:clear_cache) - post "/admin/customize/emojis.json", params: { - name: 'test', - file: fixture_file_upload("#{Rails.root}/spec/fixtures/images/logo.png") - } + post "/admin/customize/emojis.json", params: { + name: 'test', + file: fixture_file_upload("#{Rails.root}/spec/fixtures/images/logo.png") + } - custom_emoji = CustomEmoji.last - upload = custom_emoji.upload + custom_emoji = CustomEmoji.last + upload = custom_emoji.upload - expect(upload.original_filename).to eq('logo.png') + expect(upload.original_filename).to eq('logo.png') - data = JSON.parse(response.body) + data = JSON.parse(response.body) + expect(response.status).to eq(200) + expect(data["errors"]).to eq(nil) + expect(data["name"]).to eq(custom_emoji.name) + expect(data["url"]).to eq(upload.url) + expect(custom_emoji.group).to eq(nil) + end - expect(response.status).to eq(200) - expect(data["errors"]).to eq(nil) - expect(data["name"]).to eq(custom_emoji.name) - expect(data["url"]).to eq(upload.url) + it 'should allow an admin to add a custom emoji with a custom group' do + Emoji.expects(:clear_cache) + + post "/admin/customize/emojis.json", params: { + name: 'test', + group: 'Foo', + file: fixture_file_upload("#{Rails.root}/spec/fixtures/images/logo.png") + } + + custom_emoji = CustomEmoji.last + + data = JSON.parse(response.body) + expect(response.status).to eq(200) + expect(custom_emoji.group).to eq("foo") end end diff --git a/test/javascripts/lib/pretty-text-test.js b/test/javascripts/lib/pretty-text-test.js index 7c75034529d..522356e6de4 100644 --- a/test/javascripts/lib/pretty-text-test.js +++ b/test/javascripts/lib/pretty-text-test.js @@ -8,6 +8,7 @@ import { deleteCachedInlineOnebox } from "pretty-text/inline-oneboxer"; import { extractDataAttribute } from "pretty-text/engines/discourse-markdown-it"; +import { registerEmoji } from "pretty-text/emoji"; QUnit.module("lib:pretty-text"); @@ -1519,6 +1520,24 @@ QUnit.test("emoji - emojiSet", assert => { ); }); +QUnit.test("emoji - registerEmoji", assert => { + registerEmoji("foo", "/foo.png"); + + assert.cookedOptions( + ":foo:", + {}, + `

:foo:

` + ); + + registerEmoji("bar", "/bar.png", "baz"); + + assert.cookedOptions( + ":bar:", + {}, + `

:bar:

` + ); +}); + QUnit.test("extractDataAttribute", assert => { assert.deepEqual(extractDataAttribute("foo="), ["data-foo", ""]); assert.deepEqual(extractDataAttribute("foo=bar"), ["data-foo", "bar"]);