First pass at new paste options

yabwe · Apr 5, 2015 · 8bbb0a5 · daviferreira · Apr 5, 2015 · 8bbb0a5
1 parent 6bc12ff
commit 8bbb0a5
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 23 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -86,6 +86,7 @@ module.exports = function (grunt) {
                 specs: ['spec/*.spec.js'],
                 helpers: 'spec/helpers/*.js',
                 vendor: [
+                    'node_modules/lodash/index.js',
                     'spec/vendor/jasmine-jsreporter.js',
                     'spec/vendor/jasmine-jsreporter-script.js'
                 ],

diff --git a/dist/css/medium-editor.css b/dist/css/medium-editor.css
@@ -7,7 +7,6 @@
   font-size: 0; }
 
 @-webkit-keyframes pop-upwards {
-
   0% {
     -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
             transform: matrix(0.97, 0, 0, 1, 0, 12);
@@ -193,7 +192,6 @@
           animation: medium-image-loading-animation 1s infinite ease-in-out; }
 
 @-webkit-keyframes medium-image-loading-animation {
-
   0% {
     -webkit-transform: scale(0);
             transform: scale(0); }

diff --git a/dist/js/medium-editor.js b/dist/js/medium-editor.js
@@ -407,7 +407,9 @@ var Util;
         var prop;
         dest = dest || {};
         for (prop in source) {
-            if (source.hasOwnProperty(prop) && (overwrite || dest.hasOwnProperty(prop) === false)) {
+            if (source.hasOwnProperty(prop) &&
+                source[prop] !== undefined &&
+                (overwrite || dest.hasOwnProperty(prop) === false)) {
                 dest[prop] = source[prop];
             }
         }
@@ -432,6 +434,10 @@ var Util;
 
         parentElements: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'],
 
+        extend: function extend(dest, source) {
+            return copyInto(dest, source, true);
+        },
+
         defaults: function defaults(dest, source) {
             return copyInto(dest, source);
         },
@@ -1520,9 +1526,26 @@ var PasteHandler;
     }
     /*jslint regexp: false*/
 
-    PasteHandler = function (instance) {
+    /* Paste Options:
+     *
+     * forcePlainText: Forces pasting as plain text. Default: true
+     * cleanPastedHtml: cleans pasted content from different sources, like google docs etc. Default: false
+     * cleanReplacements: custom pairs (2 element arrays) of RegExp and replacement text to use during paste when
+     *                    __forcePlainText__ or __cleanPastedHtml__ are `true` OR when calling `cleanPaste(text)`
+     *                    helper method. Default: []
+     * cleanAttrs: list of attributes to remove when ... default: ['class', 'style', 'dir']
+     * cleanTags: list of element tag names to remove... default: ['meta']
+     *
+     * ----- internal options needed from base -----
+     * disableReturn
+     * targetBlank
+     * contentWindow
+     * ownerDocument
+     */
+
+    PasteHandler = function (instance, options) {
         this.base = instance;
-        this.options = this.base.options;
+        this.options = options;
 
         if (this.options.forcePlainText || this.options.cleanPastedHTML) {
             this.base.subscribe('editablePaste', this.handlePaste.bind(this));
@@ -3199,6 +3222,24 @@ function MediumEditor(elements, options) {
         }
     }
 
+    function initPasteHandler() {
+        var pasteOptions = Util.extend({}, this.options.paste);
+
+        // Backwards compatability
+        pasteOptions = Util.extend(pasteOptions, {
+            forcePlainText: this.options.forcePlainText,
+            cleanPastedHtml: this.options.cleanPastedHtml,
+            cleanAttrs: this.options.cleanAttrs,
+            cleanTags: this.options.cleanTags,
+            disableReturn: this.options.disableReturn,
+            targetBlank: this.options.targetBlank,
+            contentWindow: this.options.contentWindow,
+            ownerDocument: this.options.ownerDocument
+        });
+
+        this.pasteHandler = new PasteHandler(this, pasteOptions);
+    }
+
     function initCommands() {
         var buttons = this.options.buttons,
             extensions = this.options.extensions,
@@ -3275,7 +3316,6 @@ function MediumEditor(elements, options) {
             buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
             buttonLabels: false,
             checkLinkFormat: false,
-            cleanPastedHTML: false,
             delay: 0,
             diffLeft: 0,
             diffTop: -10,
@@ -3292,7 +3332,6 @@ function MediumEditor(elements, options) {
             contentWindow: window,
             ownerDocument: document,
             firstHeader: 'h3',
-            forcePlainText: true,
             placeholder: 'Type your text',
             secondHeader: 'h4',
             targetBlank: false,
@@ -3302,7 +3341,14 @@ function MediumEditor(elements, options) {
             extensions: {},
             activeButtonClass: 'medium-editor-button-active',
             firstButtonClass: 'medium-editor-button-first',
-            lastButtonClass: 'medium-editor-button-last'
+            lastButtonClass: 'medium-editor-button-last',
+            paste: {
+                forcePlainText: true,
+                cleanPastedHTML: false,
+                cleanReplacements: [],
+                cleanAttrs: ['class', 'style', 'dir'],
+                cleanTags: ['meta']
+            }
         },
 
         // NOT DOCUMENTED - exposed for backwards compatability
@@ -3341,7 +3387,7 @@ function MediumEditor(elements, options) {
             initElements.call(this);
             attachHandlers.call(this);
 
-            this.pasteHandler = new PasteHandler(this);
+            initPasteHandler.call(this);
 
             if (!this.options.disablePlaceholders) {
                 this.placeholders = new Placeholders(this);

diff --git a/dist/js/medium-editor.min.js b/dist/js/medium-editor.min.js
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "grunt-template-jasmine-istanbul": "~0.3.3",
     "jshint-stylish": "^1.0.1",
     "load-grunt-tasks": "^3.1.0",
+    "lodash": "~3.6.0",
     "time-grunt": "^1.0.0"
   },
   "scripts": {

diff --git a/spec/init.spec.js b/spec/init.spec.js
@@ -1,5 +1,5 @@
 /*global MediumEditor, describe, it, expect, spyOn,
-         afterEach, beforeEach, tearDown*/
+         afterEach, beforeEach, tearDown, _ */
 
 describe('Initialization TestCase', function () {
     'use strict';
@@ -110,8 +110,6 @@ describe('Initialization TestCase', function () {
                 contentWindow: window,
                 ownerDocument: document,
                 firstHeader: 'h3',
-                forcePlainText: true,
-                cleanPastedHTML: false,
                 allowMultiParagraphSelection: true,
                 placeholder: 'Type your text',
                 secondHeader: 'h4',
@@ -126,10 +124,18 @@ describe('Initialization TestCase', function () {
                 extensions: {},
                 activeButtonClass: 'medium-editor-button-active',
                 firstButtonClass: 'medium-editor-button-first',
-                lastButtonClass: 'medium-editor-button-last'
+                lastButtonClass: 'medium-editor-button-last',
+                paste: {
+                    forcePlainText: true,
+                    cleanPastedHTML: false,
+                    cleanReplacements: [],
+                    cleanAttrs: ['class', 'style', 'dir'],
+                    cleanTags: ['meta']
+                }
             },
                 editor = new MediumEditor('.editor');
-            expect(editor.options).toEqual(defaultOptions);
+            expect(Object.keys(editor.options).length).toBe(Object.keys(defaultOptions).length);
+            expect(_.isEqual(editor.options, defaultOptions)).toBe(true);
         });
 
         it('should accept custom options values', function () {

diff --git a/src/js/core.js b/src/js/core.js
@@ -353,6 +353,24 @@ function MediumEditor(elements, options) {
         }
     }
 
+    function initPasteHandler() {
+        var pasteOptions = Util.extend({}, this.options.paste);
+
+        // Backwards compatability
+        pasteOptions = Util.extend(pasteOptions, {
+            forcePlainText: this.options.forcePlainText,
+            cleanPastedHtml: this.options.cleanPastedHtml,
+            cleanAttrs: this.options.cleanAttrs,
+            cleanTags: this.options.cleanTags,
+            disableReturn: this.options.disableReturn,
+            targetBlank: this.options.targetBlank,
+            contentWindow: this.options.contentWindow,
+            ownerDocument: this.options.ownerDocument
+        });
+
+        this.pasteHandler = new PasteHandler(this, pasteOptions);
+    }
+
     function initCommands() {
         var buttons = this.options.buttons,
             extensions = this.options.extensions,
@@ -429,7 +447,6 @@ function MediumEditor(elements, options) {
             buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
             buttonLabels: false,
             checkLinkFormat: false,
-            cleanPastedHTML: false,
             delay: 0,
             diffLeft: 0,
             diffTop: -10,
@@ -446,7 +463,6 @@ function MediumEditor(elements, options) {
             contentWindow: window,
             ownerDocument: document,
             firstHeader: 'h3',
-            forcePlainText: true,
             placeholder: 'Type your text',
             secondHeader: 'h4',
             targetBlank: false,
@@ -456,7 +472,14 @@ function MediumEditor(elements, options) {
             extensions: {},
             activeButtonClass: 'medium-editor-button-active',
             firstButtonClass: 'medium-editor-button-first',
-            lastButtonClass: 'medium-editor-button-last'
+            lastButtonClass: 'medium-editor-button-last',
+            paste: {
+                forcePlainText: true,
+                cleanPastedHTML: false,
+                cleanReplacements: [],
+                cleanAttrs: ['class', 'style', 'dir'],
+                cleanTags: ['meta']
+            }
         },
 
         // NOT DOCUMENTED - exposed for backwards compatability
@@ -495,7 +518,7 @@ function MediumEditor(elements, options) {
             initElements.call(this);
             attachHandlers.call(this);
 
-            this.pasteHandler = new PasteHandler(this);
+            initPasteHandler.call(this);
 
             if (!this.options.disablePlaceholders) {
                 this.placeholders = new Placeholders(this);

diff --git a/src/js/paste.js b/src/js/paste.js
@@ -47,9 +47,26 @@ var PasteHandler;
     }
     /*jslint regexp: false*/
 
-    PasteHandler = function (instance) {
+    /* Paste Options:
+     *
+     * forcePlainText: Forces pasting as plain text. Default: true
+     * cleanPastedHtml: cleans pasted content from different sources, like google docs etc. Default: false
+     * cleanReplacements: custom pairs (2 element arrays) of RegExp and replacement text to use during paste when
+     *                    __forcePlainText__ or __cleanPastedHtml__ are `true` OR when calling `cleanPaste(text)`
+     *                    helper method. Default: []
+     * cleanAttrs: list of attributes to remove when ... default: ['class', 'style', 'dir']
+     * cleanTags: list of element tag names to remove... default: ['meta']
+     *
+     * ----- internal options needed from base -----
+     * disableReturn
+     * targetBlank
+     * contentWindow
+     * ownerDocument
+     */
+
+    PasteHandler = function (instance, options) {
         this.base = instance;
-        this.options = this.base.options;
+        this.options = options;
 
         if (this.options.forcePlainText || this.options.cleanPastedHTML) {
             this.base.subscribe('editablePaste', this.handlePaste.bind(this));

diff --git a/src/js/util.js b/src/js/util.js
@@ -9,7 +9,9 @@ var Util;
         var prop;
         dest = dest || {};
         for (prop in source) {
-            if (source.hasOwnProperty(prop) && (overwrite || dest.hasOwnProperty(prop) === false)) {
+            if (source.hasOwnProperty(prop) &&
+                source[prop] !== undefined &&
+                (overwrite || dest.hasOwnProperty(prop) === false)) {
                 dest[prop] = source[prop];
             }
         }
@@ -34,6 +36,10 @@ var Util;
 
         parentElements: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre'],
 
+        extend: function extend(dest, source) {
+            return copyInto(dest, source, true);
+        },
+
         defaults: function defaults(dest, source) {
             return copyInto(dest, source);
         },