ui: milkdown: paste image

packages/ui-default/components/editor/index.ts

@@ -1,11 +1,8 @@
 import _ from 'lodash';
-import Notification from 'vj/components/notification';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import type { Node } from 'prosemirror-model';
 import { nanoid } from 'nanoid';
-import i18n from 'vj/utils/i18n';
 import request from 'vj/utils/request';
-import tpl from 'vj/utils/tpl';
 
 interface MonacoOptions {
   language?: string;
@@ -183,14 +180,16 @@ export default class VjEditor extends DOMAttachedObject {
       }
       const nodes: Node[] = await Promise.all(
         images.map(async (image) => {
-          console.log(image);
+          const filename = `${nanoid()}.${image.name.split('.').pop()}`;
-          // TODO
+          const data = new FormData();
-          return null;
+          data.append('filename', filename);
-          const src = await YourUploadAPI(image);
+          data.append('file', image);
-          const alt = image.name;
+          data.append('operation', 'upload_file');
+          if (isProblemEdit) data.append('type', 'additional_file');
+          await request.postFile(isProblemEdit ? './files' : '/file', data);
           return schema.nodes.image.createAndFill({
-            src,
+            src: `${isProblemPage ? 'file://' : `/file/${UserContext._id}/`}${filename}`,
-            alt,
+            alt: filename,
           }) as Node;
         }),
       );
@@ -217,7 +216,7 @@ export default class VjEditor extends DOMAttachedObject {
           this.options?.onChange?.(markdown);
           this.lock = false;
         });
-        ctx.get(listenerCtx).updated((c) => {
+        ctx.get(listenerCtx).updated(() => {
           this.height = $(ele).height();
         });
       });

packages/ui-default/components/monaco/index.ts

@@ -69,17 +69,15 @@ const pagename = document.documentElement.getAttribute('data-page');
 const isProblemPage = ['problem_create', 'problem_edit'].includes(pagename);
 const isProblemEdit = pagename === 'problem_edit';
 function handlePasteEvent(editor: monaco.editor.IStandaloneCodeEditor) {
-  window.addEventListener('paste', (ev: ClipboardEvent) => {
+  function handlePaste(file: DataTransferItem | File) {
-    if (!editor.hasTextFocus()) return;
     const selection = editor.getSelection();
-    const { items } = ev.clipboardData;
     let wrapper = ['', ''];
     let ext;
-    const matches = items[0].type.match(/^image\/(png|jpg|jpeg|gif)$/i);
+    const matches = file.type.match(/^image\/(png|jpg|jpeg|gif)$/i);
     if (matches) {
       wrapper = ['![image](', ')'];
       [, ext] = matches;
-    } else if (items[0].type === 'application/x-zip-compressed') {
+    } else if (file.type === 'application/x-zip-compressed') {
       wrapper = ['[file](', ')'];
       ext = 'zip';
     }
@@ -87,7 +85,7 @@ function handlePasteEvent(editor: monaco.editor.IStandaloneCodeEditor) {
     const filename = `${nanoid()}.${ext}`;
     const data = new FormData();
     data.append('filename', filename);
-    data.append('file', items[0].getAsFile());
+    data.append('file', ('getAsFile' in file) ? file.getAsFile() : file);
     data.append('operation', 'upload_file');
     if (isProblemEdit) data.append('type', 'additional_file');
     let range: monaco.Range = null;
@@ -128,6 +126,11 @@ function handlePasteEvent(editor: monaco.editor.IStandaloneCodeEditor) {
         console.error(e);
         updateText(`${i18n('Upload Failed')}: ${e.message}`);
       });
+  }
+  window.addEventListener('paste', (ev: ClipboardEvent) => {
+    if (!editor.hasTextFocus()) return;
+    const { items } = ev.clipboardData;
+    handlePaste(items[0]);
   });
 }
 

packages/ui-default/templates/components/form.html

@@ -184,7 +184,7 @@
 {% endmacro %}
 
 {% macro form_textarea(args) %}
-{{ form_begin({columns:10}|assign(args)) }}
+{{ form_begin({columns:12}|assign(args)) }}
 {{ textarea(args) }}
 {{ form_end(args) }}
 {% endmacro %}