From fb2a95749497ec12ed2d0066cd85eae1dbddc8bb Mon Sep 17 00:00:00 2001 From: Ant <49524080+antsstyle@users.noreply.github.com> Date: Fri, 10 Nov 2023 07:02:05 +0000 Subject: [PATCH 1/4] Emoji-Mart modifications --- .gitignore | 1 + .../emoji-mart/src/components/Emoji/Emoji.tsx | 16 +- .../src/components/Emoji/EmojiElement.jsx | 9 +- .../src/components/Emoji/EmojiProps.ts | 5 + .../src/components/Picker/Picker.tsx | 14 +- .../src/components/Picker/PickerProps.ts | 234 +++++++++--------- 6 files changed, 147 insertions(+), 132 deletions(-) diff --git a/.gitignore b/.gitignore index e9e5124cb..d56898684 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ coverage node_modules dist +nbproject \ No newline at end of file diff --git a/packages/emoji-mart/src/components/Emoji/Emoji.tsx b/packages/emoji-mart/src/components/Emoji/Emoji.tsx index 267ab0ef9..ac68ccadd 100644 --- a/packages/emoji-mart/src/components/Emoji/Emoji.tsx +++ b/packages/emoji-mart/src/components/Emoji/Emoji.tsx @@ -2,7 +2,7 @@ import { Data } from '../../config' import { SearchIndex } from '../../helpers' export default function Emoji(props) { - let { id, skin, emoji } = props + let { id, skin, emoji, imageURL, spritesheetURL, fallbackImageURL, fallbackSpritesheetURL } = props if (props.shortcodes) { const matches = props.shortcodes.match(SearchIndex.SHORTCODES_REGEX) @@ -24,15 +24,11 @@ export default function Emoji(props) { const imageSrc = emojiSkin.src || (props.set != 'native' && !props.spritesheet - ? typeof props.getImageURL === 'function' - ? props.getImageURL(props.set, emojiSkin.unified) - : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/64/${emojiSkin.unified}.png` - : undefined) - - const spritesheetSrc = - typeof props.getSpritesheetURL === 'function' - ? props.getSpritesheetURL(props.set) - : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/sheets-256/64.png` + ? (imageURL !== null) ? + ? imageURL.replace("emojiskin-unified", emojiSkin.unified) + : fallbackImageURL.replace("emojiskin-unified", emojiSkin.unified) : undefined) + + const spritesheetSrc = spritesheetURL !== null ? spritesheetURL: fallbackSpritesheetURL return ( diff --git a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx index 179596688..baa57c62d 100644 --- a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx +++ b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx @@ -14,14 +14,19 @@ export default class EmojiElement extends HTMLElement { async connectedCallback() { const props = getProps(this.props, EmojiProps, this) + // These aren't needed at this point; including them only bloats the resulting HTML + this.removeAttribute('imageurl') + this.removeAttribute('spritesheeturl') + this.removeAttribute('fallbackimageurl') + this.removeAttribute('fallbackspritesheeturl') props.element = this props.ref = (component) => { this.component = component } - + await init() if (this.disconnected) return - + render(, this) } } diff --git a/packages/emoji-mart/src/components/Emoji/EmojiProps.ts b/packages/emoji-mart/src/components/Emoji/EmojiProps.ts index 0f698d71b..fe455d986 100644 --- a/packages/emoji-mart/src/components/Emoji/EmojiProps.ts +++ b/packages/emoji-mart/src/components/Emoji/EmojiProps.ts @@ -20,4 +20,9 @@ export default { // Shared set: PickerProps.set, skin: PickerProps.skin, + // Added to ensure the Emoji object can access these parameters + imageURL: PickerProps.imageURL, + spritesheetURL: PickerProps.spritesheetURL, + fallbackImageURL: PickerProps.fallbackImageURL, + fallbackSpritesheetURL: PickerProps.fallbackSpritesheetURL, } diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx index cced465bd..525a402bd 100644 --- a/packages/emoji-mart/src/components/Picker/Picker.tsx +++ b/packages/emoji-mart/src/components/Picker/Picker.tsx @@ -692,7 +692,7 @@ export default class Picker extends Component { return (
@@ -718,7 +718,10 @@ export default class Picker extends Component { size={this.props.emojiButtonSize} skin={this.state.tempSkin || this.state.skin} spritesheet={true} - getSpritesheetURL={this.props.getSpritesheetURL} + imageURL={this.props.imageURL} + spritesheetURL={this.props.spritesheetURL} + fallbackImageURL={this.props.fallbackImageURL} + fallbackSpritesheetURL={this.props.fallbackSpritesheetURL} />
@@ -763,7 +766,7 @@ export default class Picker extends Component { data-keyboard={this.state.keyboard} title={this.props.previewPosition == 'none' ? emoji.name : undefined} type="button" - class="flex flex-center flex-middle" + class="flex flex-center flex-middle" tabindex="-1" onClick={(e) => this.handleEmojiClick({ e, emoji })} onMouseEnter={() => this.handleEmojiOver(pos)} @@ -793,7 +796,10 @@ export default class Picker extends Component { size={this.props.emojiSize} skin={skin} spritesheet={true} - getSpritesheetURL={this.props.getSpritesheetURL} + imageURL={this.props.imageURL} + spritesheetURL={this.props.spritesheetURL} + fallbackImageURL={this.props.fallbackImageURL} + fallbackSpritesheetURL={this.props.fallbackSpritesheetURL} /> diff --git a/packages/emoji-mart/src/components/Picker/PickerProps.ts b/packages/emoji-mart/src/components/Picker/PickerProps.ts index 5f1a9af77..f1bd51370 100644 --- a/packages/emoji-mart/src/components/Picker/PickerProps.ts +++ b/packages/emoji-mart/src/components/Picker/PickerProps.ts @@ -1,121 +1,123 @@ export default { - autoFocus: { - value: false, - }, - dynamicWidth: { - value: false, - }, - emojiButtonColors: { - value: null, - }, - emojiButtonRadius: { - value: '100%', - }, - emojiButtonSize: { - value: 36, - }, - emojiSize: { - value: 24, - }, - emojiVersion: { - value: 14, - choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14], - }, - exceptEmojis: { - value: [], - }, - icons: { - value: 'auto', - choices: ['auto', 'outline', 'solid'], - }, - locale: { - value: 'en', - choices: [ - 'en', - 'ar', - 'be', - 'cs', - 'de', - 'es', - 'fa', - 'fi', - 'fr', - 'hi', - 'it', - 'ja', - 'kr', - 'nl', - 'pl', - 'pt', - 'ru', - 'sa', - 'tr', - 'uk', - 'vi', - 'zh', - ], - }, - maxFrequentRows: { - value: 4, - }, - navPosition: { - value: 'top', - choices: ['top', 'bottom', 'none'], - }, - noCountryFlags: { - value: false, - }, - noResultsEmoji: { - value: null, - }, - perLine: { - value: 9, - }, - previewEmoji: { - value: null, - }, - previewPosition: { - value: 'bottom', - choices: ['top', 'bottom', 'none'], - }, - searchPosition: { - value: 'sticky', - choices: ['sticky', 'static', 'none'], - }, - set: { - value: 'native', - choices: ['native', 'apple', 'facebook', 'google', 'twitter'], - }, - skin: { - value: 1, - choices: [1, 2, 3, 4, 5, 6], - }, - skinTonePosition: { - value: 'preview', - choices: ['preview', 'search', 'none'], - }, - theme: { - value: 'auto', - choices: ['auto', 'light', 'dark'], - }, + autoFocus: { + value: false, + }, + dynamicWidth: { + value: false, + }, + emojiButtonColors: { + value: null, + }, + emojiButtonRadius: { + value: '100%', + }, + emojiButtonSize: { + value: 36, + }, + emojiSize: { + value: 24, + }, + emojiVersion: { + value: 14, + choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14], + }, + exceptEmojis: { + value: [], + }, + icons: { + value: 'auto', + choices: ['auto', 'outline', 'solid'], + }, + locale: { + value: 'en', + choices: [ + 'en', + 'ar', + 'be', + 'cs', + 'de', + 'es', + 'fa', + 'fi', + 'fr', + 'hi', + 'it', + 'ja', + 'kr', + 'nl', + 'pl', + 'pt', + 'ru', + 'sa', + 'tr', + 'uk', + 'vi', + 'zh', + ], + }, + maxFrequentRows: { + value: 4, + }, + navPosition: { + value: 'top', + choices: ['top', 'bottom', 'none'], + }, + noCountryFlags: { + value: false, + }, + noResultsEmoji: { + value: null, + }, + perLine: { + value: 9, + }, + previewEmoji: { + value: null, + }, + previewPosition: { + value: 'bottom', + choices: ['top', 'bottom', 'none'], + }, + searchPosition: { + value: 'sticky', + choices: ['sticky', 'static', 'none'], + }, + set: { + value: 'native', + choices: ['native', 'apple', 'facebook', 'google', 'twitter'], + }, + skin: { + value: 1, + choices: [1, 2, 3, 4, 5, 6], + }, + skinTonePosition: { + value: 'preview', + choices: ['preview', 'search', 'none'], + }, + theme: { + value: 'auto', + choices: ['auto', 'light', 'dark'], + }, - // Data - categories: null, - categoryIcons: null, - custom: null, - data: null, - i18n: null, + // Data + categories: null, + categoryIcons: null, + custom: null, + data: null, + i18n: null, + imageURL: null, + spritesheetURL: null, + fallbackImageURL: null, + fallbackSpritesheetURL: null, - // Callbacks - getImageURL: null, - getSpritesheetURL: null, - onAddCustomEmoji: null, - onClickOutside: null, - onEmojiSelect: null, + // Callbacks + onAddCustomEmoji: null, + onClickOutside: null, + onEmojiSelect: null, - // Deprecated - stickySearch: { - deprecated: true, - value: true, - }, + // Deprecated + stickySearch: { + deprecated: true, + value: true, + }, } From 42b3a02b99ee82c11b4e36cb9f767468fb851a29 Mon Sep 17 00:00:00 2001 From: Ant <49524080+antsstyle@users.noreply.github.com> Date: Fri, 10 Nov 2023 07:04:35 +0000 Subject: [PATCH 2/4] Minor whitespace error fix --- packages/emoji-mart/src/components/Picker/Picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx index 525a402bd..8059ce404 100644 --- a/packages/emoji-mart/src/components/Picker/Picker.tsx +++ b/packages/emoji-mart/src/components/Picker/Picker.tsx @@ -766,7 +766,7 @@ export default class Picker extends Component { data-keyboard={this.state.keyboard} title={this.props.previewPosition == 'none' ? emoji.name : undefined} type="button" - class="flex flex-center flex-middle" + class="flex flex-center flex-middle" tabindex="-1" onClick={(e) => this.handleEmojiClick({ e, emoji })} onMouseEnter={() => this.handleEmojiOver(pos)} From 7494efa9f25d4d400dbf44cdb633b6b415d01bef Mon Sep 17 00:00:00 2001 From: Ant <49524080+antsstyle@users.noreply.github.com> Date: Fri, 10 Nov 2023 07:08:22 +0000 Subject: [PATCH 3/4] Minor whitespace fix --- .../src/components/Picker/Picker.tsx | 2 +- .../src/components/Picker/PickerProps.ts | 236 +++++++++--------- 2 files changed, 119 insertions(+), 119 deletions(-) diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx index 8059ce404..ee625de44 100644 --- a/packages/emoji-mart/src/components/Picker/Picker.tsx +++ b/packages/emoji-mart/src/components/Picker/Picker.tsx @@ -692,7 +692,7 @@ export default class Picker extends Component { return (
diff --git a/packages/emoji-mart/src/components/Picker/PickerProps.ts b/packages/emoji-mart/src/components/Picker/PickerProps.ts index f1bd51370..d868d4665 100644 --- a/packages/emoji-mart/src/components/Picker/PickerProps.ts +++ b/packages/emoji-mart/src/components/Picker/PickerProps.ts @@ -1,123 +1,123 @@ export default { - autoFocus: { - value: false, - }, - dynamicWidth: { - value: false, - }, - emojiButtonColors: { - value: null, - }, - emojiButtonRadius: { - value: '100%', - }, - emojiButtonSize: { - value: 36, - }, - emojiSize: { - value: 24, - }, - emojiVersion: { - value: 14, - choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14], - }, - exceptEmojis: { - value: [], - }, - icons: { - value: 'auto', - choices: ['auto', 'outline', 'solid'], - }, - locale: { - value: 'en', - choices: [ - 'en', - 'ar', - 'be', - 'cs', - 'de', - 'es', - 'fa', - 'fi', - 'fr', - 'hi', - 'it', - 'ja', - 'kr', - 'nl', - 'pl', - 'pt', - 'ru', - 'sa', - 'tr', - 'uk', - 'vi', - 'zh', - ], - }, - maxFrequentRows: { - value: 4, - }, - navPosition: { - value: 'top', - choices: ['top', 'bottom', 'none'], - }, - noCountryFlags: { - value: false, - }, - noResultsEmoji: { - value: null, - }, - perLine: { - value: 9, - }, - previewEmoji: { - value: null, - }, - previewPosition: { - value: 'bottom', - choices: ['top', 'bottom', 'none'], - }, - searchPosition: { - value: 'sticky', - choices: ['sticky', 'static', 'none'], - }, - set: { - value: 'native', - choices: ['native', 'apple', 'facebook', 'google', 'twitter'], - }, - skin: { - value: 1, - choices: [1, 2, 3, 4, 5, 6], - }, - skinTonePosition: { - value: 'preview', - choices: ['preview', 'search', 'none'], - }, - theme: { - value: 'auto', - choices: ['auto', 'light', 'dark'], - }, + autoFocus: { + value: false, + }, + dynamicWidth: { + value: false, + }, + emojiButtonColors: { + value: null, + }, + emojiButtonRadius: { + value: '100%', + }, + emojiButtonSize: { + value: 36, + }, + emojiSize: { + value: 24, + }, + emojiVersion: { + value: 14, + choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14], + }, + exceptEmojis: { + value: [], + }, + icons: { + value: 'auto', + choices: ['auto', 'outline', 'solid'], + }, + locale: { + value: 'en', + choices: [ + 'en', + 'ar', + 'be', + 'cs', + 'de', + 'es', + 'fa', + 'fi', + 'fr', + 'hi', + 'it', + 'ja', + 'kr', + 'nl', + 'pl', + 'pt', + 'ru', + 'sa', + 'tr', + 'uk', + 'vi', + 'zh', + ], + }, + maxFrequentRows: { + value: 4, + }, + navPosition: { + value: 'top', + choices: ['top', 'bottom', 'none'], + }, + noCountryFlags: { + value: false, + }, + noResultsEmoji: { + value: null, + }, + perLine: { + value: 9, + }, + previewEmoji: { + value: null, + }, + previewPosition: { + value: 'bottom', + choices: ['top', 'bottom', 'none'], + }, + searchPosition: { + value: 'sticky', + choices: ['sticky', 'static', 'none'], + }, + set: { + value: 'native', + choices: ['native', 'apple', 'facebook', 'google', 'twitter'], + }, + skin: { + value: 1, + choices: [1, 2, 3, 4, 5, 6], + }, + skinTonePosition: { + value: 'preview', + choices: ['preview', 'search', 'none'], + }, + theme: { + value: 'auto', + choices: ['auto', 'light', 'dark'], + }, - // Data - categories: null, - categoryIcons: null, - custom: null, - data: null, - i18n: null, - imageURL: null, - spritesheetURL: null, - fallbackImageURL: null, - fallbackSpritesheetURL: null, + // Data + categories: null, + categoryIcons: null, + custom: null, + data: null, + i18n: null, + imageURL: null, + spritesheetURL: null, + fallbackImageURL: null, + fallbackSpritesheetURL: null, - // Callbacks - onAddCustomEmoji: null, - onClickOutside: null, - onEmojiSelect: null, + // Callbacks + onAddCustomEmoji: null, + onClickOutside: null, + onEmojiSelect: null, - // Deprecated - stickySearch: { - deprecated: true, - value: true, - }, + // Deprecated + stickySearch: { + deprecated: true, + value: true, + }, } From 796187988344915ea5f228af4151427dd05d5e6c Mon Sep 17 00:00:00 2001 From: Ant <49524080+antsstyle@users.noreply.github.com> Date: Fri, 10 Nov 2023 07:23:38 +0000 Subject: [PATCH 4/4] yarn prettier changes --- .../emoji-mart/src/components/Emoji/Emoji.tsx | 22 ++++++++++++++----- .../src/components/Emoji/EmojiElement.jsx | 4 ++-- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/emoji-mart/src/components/Emoji/Emoji.tsx b/packages/emoji-mart/src/components/Emoji/Emoji.tsx index ac68ccadd..2dc1be5b1 100644 --- a/packages/emoji-mart/src/components/Emoji/Emoji.tsx +++ b/packages/emoji-mart/src/components/Emoji/Emoji.tsx @@ -2,7 +2,15 @@ import { Data } from '../../config' import { SearchIndex } from '../../helpers' export default function Emoji(props) { - let { id, skin, emoji, imageURL, spritesheetURL, fallbackImageURL, fallbackSpritesheetURL } = props + let { + id, + skin, + emoji, + imageURL, + spritesheetURL, + fallbackImageURL, + fallbackSpritesheetURL, + } = props if (props.shortcodes) { const matches = props.shortcodes.match(SearchIndex.SHORTCODES_REGEX) @@ -24,11 +32,13 @@ export default function Emoji(props) { const imageSrc = emojiSkin.src || (props.set != 'native' && !props.spritesheet - ? (imageURL !== null) ? - ? imageURL.replace("emojiskin-unified", emojiSkin.unified) - : fallbackImageURL.replace("emojiskin-unified", emojiSkin.unified) : undefined) - - const spritesheetSrc = spritesheetURL !== null ? spritesheetURL: fallbackSpritesheetURL + ? imageURL !== null + ? imageURL.replace('emojiskin-unified', emojiSkin.unified) + : fallbackImageURL.replace('emojiskin-unified', emojiSkin.unified) + : undefined) + + const spritesheetSrc = + spritesheetURL !== null ? spritesheetURL : fallbackSpritesheetURL return ( diff --git a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx index baa57c62d..a707a1274 100644 --- a/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx +++ b/packages/emoji-mart/src/components/Emoji/EmojiElement.jsx @@ -23,10 +23,10 @@ export default class EmojiElement extends HTMLElement { props.ref = (component) => { this.component = component } - + await init() if (this.disconnected) return - + render(, this) } }