fix: keep image attrs consistant with mdast

Author: pd4d10

examples/svelte-rollup/package.json

@@ -16,7 +16,7 @@
     "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.32.3"
+    "svelte": "^3.34.0"
   },
   "dependencies": {
     "sirv-cli": "^1.0.11"

examples/svelte-ssr/package.json

@@ -30,7 +30,7 @@
     "npm-run-all": "^4.1.5",
     "sapper": "^0.27.16",
     "style-loader": "^1.3.0",
-    "svelte": "^3.32.3",
+    "svelte": "^3.34.0",
     "svelte-loader": "^2.13.6",
     "webpack": "^4.46.0"
   }

examples/svelte/package.json

@@ -23,7 +23,7 @@
     "katex": "^0.12.0",
     "normalize.css": "^8.0.1",
     "style-loader": "^0.23.1",
-    "svelte": "^3.32.3",
+    "svelte": "^3.34.0",
     "svelte-loader": "2.13.6",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",

package.json

@@ -45,7 +45,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.2.0",
     "rollup-plugin-vue": "^5.1.9",
-    "svelte": "^3.32.3",
+    "svelte": "^3.34.0",
     "svelte-jester": "^1.3.0",
     "svelte-preprocess": "^4.6.9",
     "svgo": "^2.1.0",

packages/bytemd/package.json

@@ -25,11 +25,12 @@
     "lib"
   ],
   "dependencies": {
-    "@popperjs/core": "^2.8.3",
+    "@popperjs/core": "^2.8.4",
     "@types/classnames": "^2.2.11",
     "@types/codemirror": "^0.0.108",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
+    "@types/mdast": "^3.0.3",
     "classnames": "^2.2.6",
     "codemirror-ssr": "^0.0.6",
     "hast-util-sanitize": "^3.0.2",
@@ -41,8 +42,8 @@
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
     "select-files": "^1.0.1",
-    "tippy.js": "^6.3.0",
-    "unified": "^9.2.0",
+    "tippy.js": "^6.3.1",
+    "unified": "^9.2.1",
     "vfile": "^4.2.1"
   }
 }

packages/bytemd/src/editor.svelte

@@ -277,9 +277,9 @@
       const imgs = await uploadImages(files);
       context.appendBlock(
         imgs
-          .map(({ src, alt, title }, i) => {
+          .map(({ url, alt, title }, i) => {
             alt = alt ?? files[i].name;
-            return `![${alt}](${src}${title ? ` "${title}"` : ''})`;
+            return `![${alt}](${url}${title ? ` "${title}"` : ''})`;
           })
           .join('\n\n')
       );

packages/bytemd/src/editor.ts

@@ -186,9 +186,9 @@ export function getBuiltinActions(
             const imgs = await uploadImages(files);
             const { line, ch } = appendBlock(
               imgs
-                .map(({ src, alt, title }, i) => {
+                .map(({ url, alt, title }, i) => {
                   alt = alt ?? files[i].name;
-                  return `![${alt}](${src}${title ? ` "${title}"` : ''})`;
+                  return `![${alt}](${url}${title ? ` "${title}"` : ''})`;
                 })
                 .join('\n\n')
             );

packages/bytemd/src/types.ts

@@ -4,6 +4,7 @@ import type { VFile } from 'vfile';
 import type { Editor, EditorConfiguration } from 'codemirror';
 import type { EditorUtils } from './editor';
 import type { BytemdLocale } from './locales/en-US';
+import type { Image } from 'mdast';
 
 export interface BytemdEditorContext extends EditorUtils {
   /**
@@ -124,13 +125,7 @@ export interface EditorProps extends ViewerProps {
    */
   uploadImages?: (
     files: File[]
-  ) => Promise<
-    {
-      src: string;
-      alt?: string;
-      title?: string;
-    }[]
-  >;
+  ) => Promise<Pick<Image, 'url' | 'alt' | 'title'>[]>;
 }
 
 export interface ViewerProps {