インターネット接続がない環境では、Emoji Mart の絵文字が表示できない。

[yasumichi]

Environment

Host

item	version
OS
GROWI	7.0.2
node.js	20.12.2
npm	10.5.0
yarn	1.22.22
Using Docker	no
Using [growi-docker-compose][growi-docker-compose]	no

Client

item	version
OS	Windows10
browser	Firefox Developer 126.0b7

How to reproduce? (再現手順)

1. ルーター等でインターネットの接続を切断
2. GROWIを Edit モードに
3. Emoji Mart を表示

What happens? (症状)

下のスクリーンショットのように絵文字が表示できない。

何か選択して挿入した場合、プレビューには表示可能。

それぞれの絵文字のスタイルは以下のように絶対 URL となっている。

background-image: url("https://unpkg.com/emoji-datasource-apple@5.0.1/img/apple/sheets-256/64.png")

What is the expected result? (期待される動作)

• Emoji Mart を表示した際に絵文字が表示されること
• background-image の URL が設置した GROWI のリソースを指すこと

Note

• 部品の仕様上、対応可能か分かりませんが、一応、報告しておきます。

[yasumichi]

部品としては、panta82/emoji-mart: Emoji picker 👊🏼with keyboard accessibility を使われていると思うので emoji-mart/src/utils/shared-default-props.js at master · panta82/emoji-mart で定義されている

const EmojiDefaultProps = {
  ...
  backgroundImageFn: (set, sheetSize) =>
    `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
}

の backgroundImageFn を上書きできれば、修正できそうな気はします。