feat: 🎸 migrate image block to vue (#1803)

Author: Saul-Mirone

Diff for: .oxlintrc.json

@@ -1,7 +1,7 @@
 {
   "plugins": ["import", "typescript", "unicorn", "promise"],
   "rules": {
-    "no-console": "error",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
     "for-direction": "error",
     "require-yield": "error",
     "use-isnan": "error",

Diff for: packages/components/package.json

@@ -103,17 +103,17 @@
     "@codemirror/view": "^6"
   },
   "dependencies": {
+    "@atomico/hooks": "^4.1.2",
+    "@floating-ui/dom": "^1.5.1",
     "@milkdown/core": "workspace:*",
     "@milkdown/ctx": "workspace:*",
+    "@milkdown/exception": "workspace:*",
     "@milkdown/plugin-tooltip": "workspace:*",
     "@milkdown/preset-commonmark": "workspace:*",
     "@milkdown/preset-gfm": "workspace:*",
     "@milkdown/prose": "workspace:*",
     "@milkdown/transformer": "workspace:*",
     "@milkdown/utils": "workspace:*",
-    "@atomico/hooks": "^4.1.2",
-    "@floating-ui/dom": "^1.5.1",
-    "@milkdown/exception": "workspace:*",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.throttle": "^4.1.9",
     "atomico": "^1.75.1",
@@ -122,7 +122,8 @@
     "lodash.throttle": "^4.1.1",
     "nanoid": "^5.0.9",
     "tslib": "^2.8.1",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
     "@codemirror/language": "^6.10.1",

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

@@ -0,0 +1,33 @@
+import clsx from 'clsx'
+import { h } from 'vue'
+
+h
+
+type IconProps = {
+  icon: string | null
+  class?: string
+}
+
+export function Icon({ icon, class: className }: IconProps) {
+  return (
+    <span
+      class={clsx('milkdown-icon', className)}
+      ref={(el) => {
+        if (el && icon) {
+          ;(el as HTMLElement).innerHTML = icon
+        }
+      }}
+    />
+  )
+}
+
+Icon.props = {
+  icon: {
+    type: String,
+    required: false,
+  },
+  class: {
+    type: String,
+    required: false,
+  },
+}

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

@@ -1,12 +1,11 @@
 import { $ctx } from '@milkdown/utils'
-import { html } from 'atomico'
 import { withMeta } from '../__internal__/meta'
 
 export interface ImageBlockConfig {
-  imageIcon: () => ReturnType<typeof html> | string | HTMLElement
-  captionIcon: () => ReturnType<typeof html> | string | HTMLElement
-  uploadButton: () => ReturnType<typeof html> | string | HTMLElement
-  confirmButton: () => ReturnType<typeof html> | string | HTMLElement
+  imageIcon: () => string | null
+  captionIcon: () => string | null
+  uploadButton: () => string | null
+  confirmButton: () => string | null
   uploadPlaceholderText: string
   captionPlaceholderText: string
   onUpload: (file: File) => Promise<string>
@@ -16,8 +15,8 @@ export interface ImageBlockConfig {
 export const defaultImageBlockConfig: ImageBlockConfig = {
   imageIcon: () => '🌌',
   captionIcon: () => '💬',
-  uploadButton: () => html`Upload file`,
-  confirmButton: () => html`Confirm ⏎`,
+  uploadButton: () => 'Upload file',
+  confirmButton: () => 'Confirm ⏎',
   uploadPlaceholderText: 'or paste the image link ...',
   captionPlaceholderText: 'Image caption',
   onUpload: (file) => Promise.resolve(URL.createObjectURL(file)),

Diff for: packages/components/src/image-block/view/component.ts

@@ -0,0 +1,65 @@
+import { h, Fragment, type Ref, defineComponent } from 'vue'
+import type { ImageBlockConfig } from '../../config'
+import { ImageViewer } from './image-viewer'
+import { ImageInput } from './image-input'
+
+h
+Fragment
+
+type Attrs = {
+  src: string
+  caption: string
+  ratio: number
+}
+
+export type MilkdownImageBlockProps = {
+  selected: Ref<boolean | undefined>
+  readonly: Ref<boolean | undefined>
+  setAttr: <T extends keyof Attrs>(attr: T, value: Attrs[T]) => void
+  config: ImageBlockConfig
+} & {
+  [P in keyof Attrs]: Ref<Attrs[P] | undefined>
+}
+
+export const MilkdownImageBlock = defineComponent<MilkdownImageBlockProps>({
+  props: {
+    src: {
+      type: Object,
+      required: true,
+    },
+    caption: {
+      type: Object,
+      required: true,
+    },
+    ratio: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    setAttr: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { src } = props
+
+    return () => {
+      if (!src.value?.length) {
+        return <ImageInput {...props} />
+      }
+      return <ImageViewer {...props} />
+    }
+  },
+})