use emoji-mart for remark-emoji

apps/app/src/services/renderer/remark-plugins/emoji.ts

@@ -0,0 +1,19 @@
+import emojiData from '@emoji-mart/data/sets/14/native.json';
+import type { Root } from 'mdast';
+import { findAndReplace } from 'mdast-util-find-and-replace';
+import type { Plugin } from 'unified';
+
+export const remarkPlugin: Plugin = () => {
+  return function(tree: Root) {
+    findAndReplace(tree, [
+
+      // Ref: https://github.com/remarkjs/remark-gemoji/blob/fb4d8a5021f02384e180c17f72f40d8dc698bd46/lib/index.js
+      /:(\+1|[-\w]+):/g,
+
+      function(_, $1: string) {
+        const emoji = emojiData.emojis[$1]?.skins[0].native;
+        return emoji ?? false;
+      },
+    ]);
+  };
+};

apps/app/src/services/renderer/renderer.tsx

@@ -6,7 +6,6 @@ import sanitize from 'rehype-sanitize';
 import slug from 'rehype-slug';
 import breaks from 'remark-breaks';
 import remarkDirective from 'remark-directive';
-import emoji from 'remark-emoji';
 import remarkFrontmatter from 'remark-frontmatter';
 import gfm from 'remark-gfm';
 import math from 'remark-math';
@@ -27,6 +26,7 @@ import * as addClass from './rehype-plugins/add-class';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
 import * as codeBlock from './remark-plugins/codeblock';
+import * as emoji from './remark-plugins/emoji';
 import { pukiwikiLikeLinker } from './remark-plugins/pukiwiki-like-linker';
 import * as xsvToTable from './remark-plugins/xsv-to-table';
 
@@ -97,7 +97,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
     remarkPlugins: [
       [toc, { maxDepth: 3, tight: true }],
       gfm,
-      emoji,
+      emoji.remarkPlugin,
       pukiwikiLikeLinker,
       growiDirective,
       remarkDirective,

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EmojiButton.tsx

@@ -3,7 +3,7 @@ import {
   type CSSProperties,
 } from 'react';
 
-import emojiData from '@emoji-mart/data';
+import emojiData from '@emoji-mart/data/sets/14/native.json';
 import Picker from '@emoji-mart/react';
 import { Modal } from 'reactstrap';
 

packages/editor/src/client/services-internal/extensions/emojiAutocompletionSettings.ts

@@ -1,6 +1,6 @@
 import { type CompletionContext, type Completion, autocompletion } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
-import emojiData from '@emoji-mart/data';
+import emojiData from '@emoji-mart/data/sets/14/native.json';
 
 
 const getEmojiDataArray = (): string[] => {