Merge pull request #35 from FloAppsLtd/redactor-x

Added Redactor X support

AUTHORS.txt

@@ -3,6 +3,7 @@
 Dmitry Mukhin <[email protected]>
 Fabien Franzen <[email protected]>
 Jason Pirkey <[email protected]>
+Karel Vasicek <[email protected]>
 Tim Kleier <[email protected]>
 Timon van Spronsen <[email protected]>
 Andy Abgottspon <[email protected]>

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.0.0, 2023-09-15
+
+### Added
+
+* [Redactor X][redactor-home] support.
+
 ## 2.0.1, 2019-09-12
 
 ### Fixed

README.md

@@ -16,6 +16,7 @@ work with [Uploadcare Widget][uc-feature-widget].
 * [Requirements](#requirements)
 * [Install](#install)
 * [Usage](#usage)
+  * [Redactor X](#redactor-X)
   * [Redactor 3](#redactor-3)
   * [Redactor 2](#redactor-2)
 * [Configuration](#configuration)
@@ -33,7 +34,7 @@ Check out the basic demo for:
 
 ## Requirements
 
-Imperavi Redactor 2 or 3.
+Imperavi Redactor 2, 3 or X.
 
 ## Install
 
@@ -60,6 +61,18 @@ Add `uploadcare` to the list of your Redactor plugins.
 used to identify a target Uploadcare [project][uc-projects] your uploads will
 go to.
 
+### Redactor X
+
+```javascript
+RedactorX('#editor', {
+  plugins: ['uploadcare'],
+  uploadcare: {
+    buttonIconEnabled: true,
+    publicKey: 'YOUR_PUBLIC_KEY',
+  }
+})
+```
+
 ### Redactor 3
 
 ```javascript

package.json

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

rollup.config.js

@@ -22,9 +22,10 @@ const plugins = [
 const globals = {
   jQuery: 'window.jQuery',
   Redactor: 'window.Redactor',
+  RedactorX: 'window.RedactorX',
 }
 
-const external = ['jQuery', 'Redactor']
+const external = ['jQuery', 'Redactor', 'RedactorX']
 
 export default [
   {

src/checkRedactor.js

@@ -1,8 +1,9 @@
+import * as redactorX from './redactorX/index'
 import * as redactor3 from './redactor3/index'
 import * as redactor2 from './redactor2/index'
 
 export default function checkRedactor() {
-  if (!redactor3.getVersion() && !redactor2.getVersion()) {
+  if (!redactorX.getVersion() && !redactor3.getVersion() && !redactor2.getVersion()) {
     /* eslint-disable no-console */
     console.error('Uploadcare: Redactor not found.')
     /* eslint-enable no-console */

src/redactorX/addPlugin.js

@@ -0,0 +1,5 @@
+import $RX from 'RedactorX'
+
+export default function addPlugin(pluginBody) {
+  $RX.add('plugin', 'uploadcare', pluginBody)
+}

src/redactorX/broadcast.js

@@ -0,0 +1,3 @@
+export default function broadcast(eventName) {
+  this.app.broadcast(eventName, Array.prototype.slice.call(arguments))
+}

src/redactorX/getSelection.js

@@ -0,0 +1,3 @@
+export default function getSelection() {
+  return this.app.selection
+}

src/redactorX/getVersion.js

@@ -0,0 +1,7 @@
+import $RX from 'RedactorX'
+
+export default function getVersion() {
+  if (typeof $RX !== 'undefined') {
+    return 'X' + $RX.version
+  }
+}

src/redactorX/index.js

@@ -0,0 +1,7 @@
+export {default as broadcast} from './broadcast'
+export {default as init} from './init'
+export {default as insertHtml} from './insertHtml'
+export {default as getSelection} from './getSelection'
+export {default as start} from './start'
+export {default as getVersion} from './getVersion'
+export {default as addPlugin} from './addPlugin'

src/redactorX/init.js

@@ -0,0 +1,11 @@
+import loadWidget from '../common/loadWidget'
+import normalizeOptions from '../common/normalizeOptions'
+import applyIntegrationOption from '../common/applyIntegrationOption'
+
+export default function() {
+  this.redactorOpts = this.app.opts
+
+  normalizeOptions.call(this)
+  loadWidget.call(this)
+  applyIntegrationOption.call(this)
+}

src/redactorX/insertHtml.js

@@ -0,0 +1,25 @@
+import getFileUrl from '../common/getFileUrl'
+
+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 + '>' : ''
+
+    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>')
+  }
+}

src/redactorX/start.js

@@ -0,0 +1,18 @@
+export default function start() {
+  var buttonIcon = this.ucOpts.buttonIcon ? this.ucOpts.buttonIcon : 'rx-icon-file',
+    buttonBar = this.ucOpts.buttonBar ? this.ucOpts.buttonBar : 'toolbar',
+    buttonData = {
+      title: this.ucOpts.buttonLabel || 'Uploadcare',
+      command: 'uploadcare.show',
+    };
+
+  if (this.ucOpts.buttonBefore) {
+    buttonData.position = { before: this.ucOpts.buttonBefore }
+  }
+
+  if (this.ucOpts.buttonIconEnabled) {
+    buttonData.icon = (buttonIcon.indexOf('<svg') === -1) ? '<i class="' + buttonIcon + '"></i>' : buttonIcon;
+  }
+
+  this.app[buttonBar].add('uploadcare', buttonData)
+}

src/wrappers.js

@@ -1,6 +1,7 @@
+import * as redactorX from './redactorX/index'
 import * as redactor3 from './redactor3/index'
 import * as redactor2 from './redactor2/index'
 
-var wrappers = redactor3.getVersion() ? redactor3 : redactor2
+var wrappers = redactorX.getVersion() ? redactorX : (redactor3.getVersion() ? redactor3 : redactor2)
 
 export default wrappers