1
1
import { htmlEscape } from 'escape-goat' ;
2
2
import { POST } from '../../modules/fetch.js' ;
3
3
import { imageInfo } from '../../utils/image.js' ;
4
- import { getPastedContent , replaceTextareaSelection } from '../../utils/dom.js' ;
4
+ import { replaceTextareaSelection } from '../../utils/dom.js' ;
5
5
import { isUrl } from '../../utils/url.js' ;
6
+ import { extname } from '../../utils.js' ;
7
+ import { triggerEditorContentChanged } from './EditorMarkdown.js' ;
8
+ import { getComboMarkdownEditor } from './ComboMarkdownEditor.js' ;
6
9
7
10
async function uploadFile ( file , uploadUrl ) {
8
11
const formData = new FormData ( ) ;
@@ -12,10 +15,6 @@ async function uploadFile(file, uploadUrl) {
12
15
return await res . json ( ) ;
13
16
}
14
17
15
- export function triggerEditorContentChanged ( target ) {
16
- target . dispatchEvent ( new CustomEvent ( 'ce-editor-content-changed' , { bubbles : true } ) ) ;
17
- }
18
-
19
18
class TextareaEditor {
20
19
constructor ( editor ) {
21
20
this . editor = editor ;
@@ -82,23 +81,21 @@ class CodeMirrorEditor {
82
81
}
83
82
}
84
83
84
+ // FIXME: handle non-image files
85
85
async function handleClipboardImages ( editor , dropzone , images , e ) {
86
86
const uploadUrl = dropzone . getAttribute ( 'data-upload-url' ) ;
87
87
const filesContainer = dropzone . querySelector ( '.files' ) ;
88
88
89
- if ( ! dropzone || ! uploadUrl || ! filesContainer || ! images . length ) return ;
90
-
91
89
e . preventDefault ( ) ;
92
90
e . stopPropagation ( ) ;
93
91
94
92
for ( const img of images ) {
95
93
const name = img . name . slice ( 0 , img . name . lastIndexOf ( '.' ) ) ;
96
-
94
+ const { width , dppx } = await imageInfo ( img ) ;
97
95
const placeholder = `` ;
98
- editor . insertPlaceholder ( placeholder ) ;
99
96
97
+ editor . insertPlaceholder ( placeholder ) ;
100
98
const { uuid} = await uploadFile ( img , uploadUrl ) ;
101
- const { width, dppx} = await imageInfo ( img ) ;
102
99
103
100
let text ;
104
101
if ( width > 0 && dppx > 1 ) {
@@ -139,6 +136,18 @@ function handleClipboardText(textarea, e, {text, isShiftDown}) {
139
136
// else, let the browser handle it
140
137
}
141
138
139
+ // extract text and images from "paste" event
140
+ function getPastedContent ( e ) {
141
+ const images = [ ] ;
142
+ for ( const item of e . clipboardData ?. items ?? [ ] ) {
143
+ if ( item . type ?. startsWith ( 'image/' ) ) {
144
+ images . push ( item . getAsFile ( ) ) ;
145
+ }
146
+ }
147
+ const text = e . clipboardData ?. getData ?. ( 'text' ) ?? '' ;
148
+ return { text, images} ;
149
+ }
150
+
142
151
export function initEasyMDEPaste ( easyMDE , dropzone ) {
143
152
easyMDE . codemirror . on ( 'paste' , ( _ , e ) => {
144
153
const { images} = getPastedContent ( e ) ;
@@ -164,4 +173,17 @@ export function initTextareaPaste(textarea, dropzone) {
164
173
handleClipboardText ( textarea , e , { text, isShiftDown} ) ;
165
174
}
166
175
} ) ;
176
+ textarea . addEventListener ( 'drop' , ( e ) => {
177
+ const acceptedFiles = getComboMarkdownEditor ( textarea ) . dropzone . getAttribute ( 'data-accepts' ) ;
178
+ const files = [ ] ;
179
+ for ( const item of e . dataTransfer ?. items ?? [ ] ) {
180
+ if ( item ?. kind !== 'file' ) continue ;
181
+ const file = item . getAsFile ( ) ;
182
+ if ( acceptedFiles . includes ( extname ( file . name ) ) ) {
183
+ files . push ( file ) ;
184
+ }
185
+ }
186
+ // FIXME: handle upload files
187
+ handleClipboardImages ( new TextareaEditor ( textarea ) , dropzone , files , e ) ;
188
+ } ) ;
167
189
}
0 commit comments