first commit

media/plg_editors_tinymce/js/plugins/dragdrop/plugin.js

@@ -0,0 +1,178 @@
+/**
+ * File reader helper
+ *
+ * @param {*} file the file
+ * @param {*} callback function to callback
+ *
+ * @TODO replace it with await new Response(file)
+ */
+function readFile(file, callback) {
+  // Create a new file reader instance
+  const reader = new FileReader();
+
+  // Add the on load callback
+  reader.onload = event => {
+    const {
+      result
+    } = event.target;
+    const splitIndex = result.indexOf('base64') + 7;
+    const content = result.slice(splitIndex, result.length);
+
+    // Upload the file
+    callback(file.name, content);
+  };
+  reader.readAsDataURL(file);
+}
+window.tinymce.PluginManager.add('jdragndrop', editor => {
+  const registerOption = editor.options.register;
+  registerOption('uploadUri', {
+    processor: 'string'
+  });
+  registerOption('comMediaAdapter', {
+    processor: 'string'
+  });
+  registerOption('parentUploadFolder', {
+    processor: 'string'
+  });
+  registerOption('csrfToken', {
+    processor: 'string'
+  });
+
+  // Reset the drop area border
+  const dragleaveCallback = e => {
+    if (!e.dataTransfer.types.includes('Files')) return;
+    e.stopPropagation();
+    e.preventDefault();
+    editor.contentAreaContainer.style.borderWidth = '0';
+  };
+  window.tinyMCE.DOM.bind(document, 'dragleave', dragleaveCallback);
+
+  // Remove listener when editor are removed
+  editor.on('remove', () => window.tinyMCE.DOM.unbind(document, 'dragleave', dragleaveCallback));
+
+  // Fix for Chrome
+  editor.on('dragenter', e => {
+    if (!e.dataTransfer.types.includes('Files')) return;
+    e.stopPropagation();
+  });
+
+  // Notify user when file is over the drop area
+  editor.on('dragover', e => {
+    if (!e.dataTransfer.types.includes('Files')) return;
+    e.preventDefault();
+    editor.contentAreaContainer.style.borderStyle = 'dashed';
+    editor.contentAreaContainer.style.borderWidth = '5px';
+  });
+  async function uploadFile(name, content) {
+    const settings = editor.options.get;
+    Joomla.request({
+      url: `${settings('uploadUri')}&path=${settings('comMediaAdapter')}${settings('parentUploadFolder')}`,
+      method: 'POST',
+      data: JSON.stringify({
+        [settings('csrfToken')]: 1,
+        name,
+        content,
+        parent: settings('parentUploadFolder')
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      onSuccess: resp => {
+        let response;
+        try {
+          response = JSON.parse(resp);
+        } catch (e) {
+          editor.windowManager.alert(`${Joomla.Text._('ERROR')}: {${e}}`);
+        }
+        if (response.data && response.data.path) {
+          const responseData = response.data;
+          let urlPath;
+          const paths = Joomla.getOptions('system.paths');
+          const {
+            rootFull
+          } = paths;
+          const parts = response.data.url.split(rootFull);
+          if (parts.length > 1) {
+            // For local adapters use relative paths
+            urlPath = `${parts[1]}`;
+          } else if (responseData.url) {
+            // Absolute path for different domain
+            urlPath = responseData.url;
+          }
+          const dialogClose = function dialogClose(api) {
+            const dialogData = api.getData();
+            const altEmpty = dialogData.altEmpty ? ' alt=""' : '';
+            const altValue = dialogData.altText ? ` alt="${dialogData.altText}"` : altEmpty;
+            const lazyValue = dialogData.isLazy ? ' loading="lazy"' : '';
+            const width = dialogData.isLazy ? ` width="${responseData.width}"` : '';
+            const height = dialogData.isLazy ? ` height="${responseData.height}"` : '';
+            editor.execCommand('mceInsertContent', false, `<img src="${urlPath}"${altValue}${lazyValue}${width}${height}/>`);
+          };
+          editor.windowManager.open({
+            title: Joomla.Text._('PLG_TINY_DND_ADDITIONALDATA'),
+            body: {
+              type: 'panel',
+              items: [{
+                type: 'input',
+                name: 'altText',
+                label: Joomla.Text._('PLG_TINY_DND_ALTTEXT')
+              }, {
+                type: 'checkbox',
+                name: 'altEmpty',
+                label: Joomla.Text._('PLG_TINY_DND_EMPTY_ALT')
+              }, {
+                type: 'checkbox',
+                name: 'isLazy',
+                label: Joomla.Text._('PLG_TINY_DND_LAZYLOADED')
+              }]
+            },
+            buttons: [{
+              type: 'cancel',
+              text: 'Cancel'
+            }, {
+              type: 'submit',
+              name: 'submitButton',
+              text: 'Save',
+              primary: true
+            }],
+            initialData: {
+              altText: '',
+              isLazy: true,
+              altEmpty: false
+            },
+            onSubmit: api => {
+              dialogClose(api);
+              api.close();
+            },
+            onCancel: api => dialogClose(api)
+          });
+        }
+      },
+      onError: xhr => editor.windowManager.alert(`Error: ${xhr.statusText}`)
+    });
+  }
+
+  // Logic for the dropped file
+  editor.on('drop', e => {
+    if (!e.dataTransfer.types.includes('Files')) return;
+    e.preventDefault();
+
+    // Read and upload files
+    if (e.dataTransfer.files.length > 0) {
+      Array.from(e.dataTransfer.files).forEach(file => {
+        // Only images allowed
+        if (file.name.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)) {
+          // Upload the file(s)
+          readFile(file, uploadFile);
+        }
+      });
+    }
+    editor.contentAreaContainer.style.borderWidth = '0';
+  });
+  return {
+    getMetadata: () => ({
+      name: 'Drag and Drop (Joomla)',
+      url: 'https://www.joomla.org/'
+    })
+  };
+});

media/plg_editors_tinymce/js/plugins/dragdrop/plugin.min.js

@@ -0,0 +1 @@
+function readFile(e,t){const a=new FileReader;a.onload=a=>{const{result:n}=a.target,o=n.indexOf("base64")+7,r=n.slice(o,n.length);t(e.name,r)},a.readAsDataURL(e)}window.tinymce.PluginManager.add("jdragndrop",(e=>{const t=e.options.register;t("uploadUri",{processor:"string"}),t("comMediaAdapter",{processor:"string"}),t("parentUploadFolder",{processor:"string"}),t("csrfToken",{processor:"string"});const a=t=>{t.dataTransfer.types.includes("Files")&&(t.stopPropagation(),t.preventDefault(),e.contentAreaContainer.style.borderWidth="0")};async function n(t,a){const n=e.options.get;Joomla.request({url:`${n("uploadUri")}&path=${n("comMediaAdapter")}${n("parentUploadFolder")}`,method:"POST",data:JSON.stringify({[n("csrfToken")]:1,name:t,content:a,parent:n("parentUploadFolder")}),headers:{"Content-Type":"application/json"},onSuccess:t=>{let a;try{a=JSON.parse(t)}catch(t){e.windowManager.alert(`${Joomla.Text._("ERROR")}: {${t}}`)}if(a.data&&a.data.path){const t=a.data;let n;const o=Joomla.getOptions("system.paths"),{rootFull:r}=o,s=a.data.url.split(r);s.length>1?n=`${s[1]}`:t.url&&(n=t.url);const l=function(a){const o=a.getData(),r=o.altEmpty?' alt=""':"",s=o.altText?` alt="${o.altText}"`:r,l=o.isLazy?' loading="lazy"':"",i=o.isLazy?` width="${t.width}"`:"",d=o.isLazy?` height="${t.height}"`:"";e.execCommand("mceInsertContent",!1,`<img src="${n}"${s}${l}${i}${d}/>`)};e.windowManager.open({title:Joomla.Text._("PLG_TINY_DND_ADDITIONALDATA"),body:{type:"panel",items:[{type:"input",name:"altText",label:Joomla.Text._("PLG_TINY_DND_ALTTEXT")},{type:"checkbox",name:"altEmpty",label:Joomla.Text._("PLG_TINY_DND_EMPTY_ALT")},{type:"checkbox",name:"isLazy",label:Joomla.Text._("PLG_TINY_DND_LAZYLOADED")}]},buttons:[{type:"cancel",text:"Cancel"},{type:"submit",name:"submitButton",text:"Save",primary:!0}],initialData:{altText:"",isLazy:!0,altEmpty:!1},onSubmit:e=>{l(e),e.close()},onCancel:e=>l(e)})}},onError:t=>e.windowManager.alert(`Error: ${t.statusText}`)})}return window.tinyMCE.DOM.bind(document,"dragleave",a),e.on("remove",(()=>window.tinyMCE.DOM.unbind(document,"dragleave",a))),e.on("dragenter",(e=>{e.dataTransfer.types.includes("Files")&&e.stopPropagation()})),e.on("dragover",(t=>{t.dataTransfer.types.includes("Files")&&(t.preventDefault(),e.contentAreaContainer.style.borderStyle="dashed",e.contentAreaContainer.style.borderWidth="5px")})),e.on("drop",(t=>{t.dataTransfer.types.includes("Files")&&(t.preventDefault(),t.dataTransfer.files.length>0&&Array.from(t.dataTransfer.files).forEach((e=>{e.name.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/)&&readFile(e,n)})),e.contentAreaContainer.style.borderWidth="0")})),{getMetadata:()=>({name:"Drag and Drop (Joomla)",url:"https://www.joomla.org/"})}}));