Merge pull request #36 from FloAppsLtd/redactor-x

Author: rsedykh

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 3.1.0, 2023-10-24
+
+### Changed
+
+* Changed logic how image is inserted to Redactor X content
+
 ## 3.0.0, 2023-09-15
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uploadcare-redactor",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "widgetVersion": "3.x",
   "description": "File Uploader by Uploadcare. The plugin for Imperavi Redactor to work with Uploadcare Widget.",
   "main": "./src/uploadcare.js",

src/redactorX/insertHtml.js

@@ -4,22 +4,23 @@ export default function insertHtml(plugin, fileInfo) {
   var fileUrl = getFileUrl(fileInfo)
 
   if (fileInfo.isImage) {
-    var openTag = plugin.ucOpts.imageTag ? '<' + plugin.ucOpts.imageTag + '>' : ''
-    var closeTag = plugin.ucOpts.imageTag ? '</' + plugin.ucOpts.imageTag + '>' : ''
+    var $image = plugin.dom('<img>')
+          .attr('src', fileUrl)
+          .attr('alt', fileInfo.name)
+          .attr('data-image', fileInfo.uuid);
 
-    plugin.app.insertion.insertHtml(
-      openTag +
-      '<img src="' +
-      fileUrl +
-      '" alt="' +
-      fileInfo.name +
-      '" data-image="' +
-      fileInfo.uuid +
-      '" />' +
-      closeTag
-    )
-  }
-  else {
-    plugin.app.insertion.insertHtml('<a href="' + fileUrl + '" data-file="' + fileInfo.uuid + '">' + fileInfo.name + '</a>')
+    if (plugin.ucOpts.imageTag) {
+      var $source = plugin.dom('<' + plugin.ucOpts.imageTag + '>');
+      $source.append($image);
+    } else {
+      var $source = $image;
+    }
+
+    var instance = plugin.app.create('block.image', $source);
+    plugin.app.block.add({ instance: instance, type: 'image' });
+
+    plugin.app.broadcast('image.upload', { instance: instance, data: {src: fileUrl, id: fileInfo.uuid, name: fileInfo.name, width: fileInfo.crop.width, height: fileInfo.crop.height}});
+  } else {
+    plugin.app.insertion.insertHtml('<a href="' + fileUrl + '" data-file="' + fileInfo.uuid + '">' + fileInfo.name + '</a>');
   }
 }