fix: 🐛 should not throw error when emoji in code

✅ Closes: #1264

Author: Saul-Mirone

Diff for: e2e/package.json

@@ -31,6 +31,7 @@
     "@milkdown/ctx": "workspace:*",
     "@milkdown/plugin-automd": "workspace:*",
     "@milkdown/plugin-clipboard": "workspace:*",
+    "@milkdown/plugin-emoji": "workspace:*",
     "@milkdown/plugin-history": "workspace:*",
     "@milkdown/plugin-listener": "workspace:*",
     "@milkdown/plugin-math": "workspace:*",

Diff for: e2e/src/plugin-emoji/main.stories.ts

@@ -0,0 +1,63 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { Meta, StoryObj } from '@storybook/html'
+import { Editor, defaultValueCtx, rootCtx } from '@milkdown/core'
+import { nord } from '@milkdown/theme-nord'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { history } from '@milkdown/plugin-history'
+import { emoji } from '@milkdown/plugin-emoji'
+
+import '@milkdown/theme-nord/style.css'
+
+import '../style.css'
+
+interface Args {
+  enableInspector: boolean
+  defaultValue: string
+  instance: Editor
+}
+
+const meta: Meta<Args> = {
+  title: 'Emoji/Main',
+}
+
+export default meta
+
+type Story = StoryObj<Args>
+
+export const Empty: Story = {
+  render: (args) => {
+    const root = document.createElement('div')
+    const editor = Editor.make()
+      .enableInspector(args.enableInspector ?? false)
+      .config((ctx) => {
+        ctx.set(defaultValueCtx, args.defaultValue ?? '')
+        ctx.set(rootCtx, root)
+      })
+      .config(nord)
+      .use(commonmark)
+      .use(history)
+      .use(emoji)
+      .create()
+
+    editor.then((instance) => {
+      args.instance = instance
+    })
+
+    return root
+  },
+}
+
+const defaultValue = `
+# Milkdown
+
+🫥
+
+:+1:
+`
+
+export const WithDefaultValue: Story = {
+  ...Empty,
+  args: {
+    defaultValue: defaultValue.trim(),
+  },
+}

Diff for: e2e/src/preset-commonmark/commands.stories.ts

@@ -61,7 +61,7 @@ export const ToggleStrong: Story = {
 
     await expect(args.instance.action(getMarkdown())).toContain(`**${text}**`)
 
-    const strong = canvasElement.querySelector('strong')
+    const strong = canvasElement.querySelector('strong') ?? undefined
 
     await expect(strong).toHaveTextContent(text)
     await userEvent.pointer([{ target: strong, offset: 0, keys: '[MouseLeft>]' }, { offset: text.length }])
@@ -91,7 +91,7 @@ export const ToggleItalic: Story = {
 
     await expect(args.instance.action(getMarkdown())).toContain(`*${text}*`)
 
-    const em = canvasElement.querySelector('em')
+    const em = canvasElement.querySelector('em') ?? undefined
 
     await expect(em).toHaveTextContent(text)
     await userEvent.pointer([{ target: em, offset: 0, keys: '[MouseLeft>]' }, { offset: text.length }])

Diff for: e2e/src/style.css

@@ -20,3 +20,11 @@ input:focus {
   outline: none;
   box-shadow: none;
 }
+
+span[data-type='emoji'] {
+  @apply inline-block;
+}
+
+span[data-type='emoji'] .emoji {
+  @apply w-4;
+}

Diff for: packages/plugin-emoji/src/__internal__/remark-twemoji.ts

@@ -41,6 +41,10 @@ export const twemojiPlugin: RemarkPluginRaw<TwemojiOptions> = (twemojiOptions) =
       if (!isLiteral(node))
         return [node]
 
+      // Should not convert code block
+      if (node.type === 'code')
+        return [node]
+
       const value = node.value
       const output: Array<Node & { value: string }> = []
       let match