diff --git a/changelog.d/fix-emojis-breaking-bio.fix b/changelog.d/fix-emojis-breaking-bio.fix new file mode 100644 index 000000000..62a607d8a --- /dev/null +++ b/changelog.d/fix-emojis-breaking-bio.fix @@ -0,0 +1 @@ +Fix emojis breaking user bio/description editing diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 376eb74bf..2530392bc 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -278,10 +278,10 @@ const PostStatusForm = { }) }, emoji() { - return useEmojiStore().standardEmojiList || [] + return useEmojiStore().standardEmojiList }, customEmoji() { - return useEmojiStore().customEmoji || [] + return useEmojiStore().customEmoji }, statusLength() { return this.newStatus.status.length diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js index 2f18fe9a5..af2f60ac4 100644 --- a/src/modules/default_config_state.js +++ b/src/modules/default_config_state.js @@ -8,6 +8,7 @@ export const staticOrApiConfigDefault = { theme: 'pleroma-dark', palette: null, style: null, + themeChecksum: undefined, defaultAvatar: '/images/avi.png', defaultBanner: '/images/banner.png', background: '/static/aurora_borealis.jpg', diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 495070b0d..5c0a7326b 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -3,8 +3,10 @@ import { chunk, throttle } from 'lodash' import { getCssRules } from '../theme_data/css_utils.js' import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js' +import sum from 'hash-sum' import { defaultState } from 'src/modules/default_config_state.js' +import { useSyncConfigStore } from 'src/stores/sync_config.js' // On platforms where this is not supported, it will return undefined // Otherwise it will return an array @@ -77,7 +79,7 @@ export const adoptStyleSheets = throttle(() => { const EAGER_STYLE_ID = 'pleroma-eager-styles' const LAZY_STYLE_ID = 'pleroma-lazy-styles' -export const generateTheme = (inputRuleset, callbacks, debug) => { +const generateTheme = (inputRuleset, callbacks, debug) => { const { onNewRule = () => { /* no-op */ @@ -134,9 +136,12 @@ export const generateTheme = (inputRuleset, callbacks, debug) => { export const tryLoadCache = async () => { console.info('Trying to load compiled theme data from cache') const cache = await localforage.getItem('pleromafe-theme-cache') + console.log(cache.checksum) if (!cache) return null try { - if (cache.engineChecksum === getEngineChecksum()) { + if (cache.engineChecksum === getEngineChecksum() && + cache.checksum !== undefined && + cache.checksum === useSyncConfigStore().mergedConfig.themeChecksum) { const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10) const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20) @@ -149,7 +154,7 @@ export const tryLoadCache = async () => { console.info(`Loaded theme from cache`) return true } else { - console.warn("Engine checksum doesn't match, cache not usable, clearing") + console.warn("Checksums don't match, cache not usable, clearing") localStorage.removeItem('pleroma-fe-theme-cache') } } catch (e) { @@ -195,10 +200,14 @@ export const applyTheme = ( onLazyFinished() { lazyStyles.ready = true adoptStyleSheets() + const data = [eagerStyles.rules, lazyStyles.rules] + const checksum = sum(data) const cache = { + checksum, engineChecksum: getEngineChecksum(), - data: [eagerStyles.rules, lazyStyles.rules], + data, } + useSyncConfigStore().setSimplePrefAndSave({ path: 'themeChecksum', value: checksum }) onFinish(cache) localforage.setItem('pleromafe-theme-cache', cache) console.info('Theme cache stored') diff --git a/src/stores/emoji.js b/src/stores/emoji.js index 5c284064b..0673862e9 100644 --- a/src/stores/emoji.js +++ b/src/stores/emoji.js @@ -115,19 +115,23 @@ export const useEmojiStore = defineStore('emoji', { }, {}) }, standardEmojiList(state) { - return SORTED_EMOJI_GROUP_IDS.map((groupId) => - (this.emoji[groupId] || []).map((k) => - injectAnnotations(k, this.unicodeEmojiAnnotations), - ), - ).reduce((a, b) => a.concat(b), []) + return ( + SORTED_EMOJI_GROUP_IDS.map((groupId) => + (this.emoji[groupId] || []).map((k) => + injectAnnotations(k, this.unicodeEmojiAnnotations), + ), + ).reduce((a, b) => a.concat(b), []) ?? [] + ) }, standardEmojiGroupList(state) { - return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({ - id: groupId, - emojis: (this.emoji[groupId] || []).map((k) => - injectAnnotations(k, this.unicodeEmojiAnnotations), - ), - })) + return ( + SORTED_EMOJI_GROUP_IDS.map((groupId) => ({ + id: groupId, + emojis: (this.emoji[groupId] || []).map((k) => + injectAnnotations(k, this.unicodeEmojiAnnotations), + ), + })) ?? [] + ) }, }, actions: {