feat(editor): migrate code block to vue (#1806)

* feat(editor): migrate code block to vue

* fix: test

* chore: fix

* chore: fix

Author: Saul-Mirone

Diff for: e2e/shim.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="cypress" />
 /// <reference types="vite/client" />
 
 import type { Editor } from '@milkdown/core'

Diff for: e2e/tests/crepe/latex.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { focusEditor, getMarkdown } from 'tests/misc'
+import { focusEditor, getMarkdown } from '../misc'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/crepe/')
@@ -10,7 +10,7 @@ test('latex block preview toggle', async ({ page }) => {
   await page.keyboard.type('$$')
   await page.keyboard.press('Enter')
 
-  const codeBlock = page.locator('milkdown-code-block')
+  const codeBlock = page.locator('.milkdown-code-block')
   const codemirror = codeBlock.locator('.codemirror-host')
   const preview = codeBlock.locator('.preview')
   const codeTools = codeBlock.locator('.tools')

Diff for: e2e/tests/crepe/listener.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { focusEditor } from 'tests/misc'
+import { focusEditor } from '../misc'
 
 test('listen change before editor is created', async ({ page }) => {
   await page.addInitScript(() => {

Diff for: packages/components/src/__internal__/components/icon.tsx

@@ -14,7 +14,7 @@ export function Icon({ icon, class: className }: IconProps) {
       class={clsx('milkdown-icon', className)}
       ref={(el) => {
         if (el && icon) {
-          ;(el as HTMLElement).innerHTML = icon
+          ;(el as HTMLElement).innerHTML = icon.trim()
         }
       }}
     />

Diff for: packages/components/src/code-block/config.ts

@@ -1,27 +1,23 @@
 import { $ctx } from '@milkdown/utils'
 import type { Extension } from '@codemirror/state'
 import type { LanguageDescription } from '@codemirror/language'
-import { html } from 'atomico'
 import { withMeta } from '../__internal__/meta'
 
 export interface CodeBlockConfig {
   extensions: Extension[]
   languages: LanguageDescription[]
-  expandIcon: () => ReturnType<typeof html> | string
-  searchIcon: () => ReturnType<typeof html> | string
-  clearSearchIcon: () => ReturnType<typeof html> | string
+  expandIcon: () => string
+  searchIcon: () => string
+  clearSearchIcon: () => string
   searchPlaceholder: string
   noResultText: string
-  renderLanguage: (
-    language: string,
-    selected: boolean
-  ) => ReturnType<typeof html>
+  renderLanguage: (language: string, selected: boolean) => string
   renderPreview: (
     language: string,
     content: string
   ) => null | string | HTMLElement
-  previewToggleButton: (previewOnlyMode: boolean) => ReturnType<typeof html>
-  previewLabel: () => ReturnType<typeof html>
+  previewToggleButton: (previewOnlyMode: boolean) => string
+  previewLabel: () => string
 }
 
 export const defaultConfig: CodeBlockConfig = {
@@ -32,7 +28,7 @@ export const defaultConfig: CodeBlockConfig = {
   clearSearchIcon: () => '⌫',
   searchPlaceholder: 'Search language',
   noResultText: 'No result',
-  renderLanguage: (language) => html`${language}`,
+  renderLanguage: (language) => language,
   renderPreview: () => null,
   previewToggleButton: (previewOnlyMode) => (previewOnlyMode ? 'Edit' : 'Hide'),
   previewLabel: () => 'Preview',