kattappa - npm Package Compare versions

Comparing version 0.5.5 to 0.6.0

lib/blocks/h2.js

@@ -45,2 +45,3 @@ 'use strict';
     value: function captureReturn() {
+      this.options = (0, _editoroptions2.default)();
       this.props.addBlock("text", this.props.position);
@@ -56,3 +57,3 @@ }
         //showToolbar={false}
-        , { options: _editoroptions2.default,
+        , { options: this.options,
           content: this.props.content,
@@ -59,0 +60,0 @@ captureReturn: this.captureReturn,

lib/blocks/quote.js

@@ -41,2 +41,3 @@ 'use strict';
 
+    _this.options = (0, _editoroptions2.default)();
     _this.onContentChanged = _this.onContentChanged.bind(_this);
@@ -76,4 +77,4 @@ _this.onCreditChange = _this.onCreditChange.bind(_this);
         _react2.default.createElement(_medium2.default, {
+          options: this.options,
           content: this.props.content.content,
-          options: _editoroptions2.default,
           onContentChanged: this.onContentChanged }),
@@ -80,0 +81,0 @@ _react2.default.createElement('input', {

lib/blocks/text.js

@@ -37,2 +37,3 @@ 'use strict';
 
+    _this.options = (0, _editoroptions2.default)();
     _this.captureReturn = _this.captureReturn.bind(_this);
@@ -82,3 +83,3 @@ _this.onContentChanged = _this.onContentChanged.bind(_this);
           content: this.props.content,
-          options: _editoroptions2.default,
+          options: this.options,
           onContentChanged: this.onContentChanged })
@@ -85,0 +86,0 @@ );

lib/components/listitem.js

@@ -37,2 +37,3 @@ 'use strict';
 
+    _this.options = (0, _editoroptions2.default)();
     _this.captureReturn = _this.captureReturn.bind(_this);
@@ -64,3 +65,3 @@ _this.onContentChanged = _this.onContentChanged.bind(_this);
         enterCapture: true,
-        options: _editoroptions2.default,
+        options: this.options,
         onContentChanged: this.onContentChanged });
@@ -67,0 +68,0 @@ }

lib/components/medium.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _editoroptions = require('../utils/editoroptions');
+
+var _editoroptions2 = _interopRequireDefault(_editoroptions);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,25 +38,2 @@
 
-var options = {
-  toolbar: {
-    buttons: ['bold', 'italic', 'underline', 'anchor', 'strikethrough']
-  },
-  autoLink: false,
-  imageDragging: false,
-  placeholder: {
-    text: 'Write your story...',
-    hideOnClick: false
-  },
-  paste: {
-    forcePlainText: true,
-    cleanPastedHTML: true,
-    cleanReplacements: [[/<!--[^>]*-->/gi, '']],
-    cleanAttrs: ['class', 'dir', 'style'],
-    cleanTags: ['label', 'meta', 'aside', 'span']
-  },
-  disableExtraSpaces: true,
-  extensions: {
-    imageDragging: {}
-  }
-};
-
 var MediumComponent = function (_React$Component) {
@@ -67,3 +48,3 @@ _inherits(MediumComponent, _React$Component);
     _this2.state = {
-      content: _this2.props.content
+      content: props.content
     };
@@ -77,2 +58,3 @@
     _this2.captureReturn = _this2.captureReturn.bind(_this2);
+    _this2.handleBeforeInput = _this2.handleBeforeInput.bind(_this2);
     return _this2;
@@ -91,6 +73,8 @@ }
       var options = this.props.options;
-      options.cleanTags = ['meta', 'span'];
+      console.log(options);
       this.medium = new _mediumEditor2.default(dom, options);
-      window.medium = this.medium;
+      // this.medium.setContent(this.state.content);
 
+      this.medium.subscribe('editableKeydown', this.handleBeforeInput);
+
       if (this.props.enterCapture) {
@@ -118,2 +102,3 @@ this.medium.subscribe('editableKeyup', this.captureReturn);
       this.dom = null;
+      this.medium = null;
     }
@@ -135,2 +120,31 @@ }, {
   }, {
+    key: 'handleBeforeInput',
+    value: function handleBeforeInput(e) {
+      if (e.ctrlKey || e.metaKey || e.altKey || e.keyCode !== 222) {
+        return;
+      };
+      e.preventDefault();
+      var sel = _mediumEditor2.default.selection.getSelectionRange(this.medium.options.ownerDocument);
+      if (sel.collapsed && sel.startOffset === sel.endOffset) {
+        var pastable = '';
+        var nodeText = sel.startContainer.textContent.replace(/\u00a0/g, " ");
+        if (sel.startContainer.textContent === '' || sel.startOffset === 0 || nodeText[sel.startOffset - 1] === ' ') {
+          if (e.shiftKey) {
+            pastable = '“';
+          } else {
+            pastable = '‘';
+          }
+        } else if (nodeText[sel.startOffset - 1] !== ' ') {
+          if (e.shiftKey) {
+            pastable = '”';
+          } else {
+            pastable = '’';
+          }
+        } else {
+          pastable = '‘';
+        }
+        this.medium.pasteHTML(pastable);
+      }
+    }
+  }, {
     key: 'change',
@@ -189,4 +203,4 @@ value: function change(text) {
 MediumComponent.defaultProps = {
-  options: options,
+  options: (0, _editoroptions2.default)(),
   enterCapture: false
 };

lib/utils/editoroptions.js

@@ -6,22 +6,168 @@ 'use strict';
 });
-exports.default = {
-  toolbar: {
-    buttons: ['bold', 'italic', 'underline', 'anchor', 'strikethrough']
-  },
-  autoLink: false,
-  imageDragging: false,
-  placeholder: {
-    text: 'Write your story...'
-  },
-  paste: {
-    forcePlainText: true,
-    cleanPastedHTML: true,
-    cleanReplacements: [[/<!--[^>]*-->/gi, '']],
-    cleanAttrs: ['class', 'dir', 'style', 'name', 'id'],
-    cleanTags: ['label', 'meta', 'aside', 'span']
-  },
-  disableExtraSpaces: false,
-  extensions: {
-    imageDragging: {}
+exports.CustomPasteHandler = undefined;
+
+var _MediumEditor$extensi;
+
+var _mediumEditor = require('medium-editor');
+
+var _mediumEditor2 = _interopRequireDefault(_mediumEditor);
+
+var _htmlJanitor = require('html-janitor');
+
+var _htmlJanitor2 = _interopRequireDefault(_htmlJanitor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var janitorConfig = {
+  tags: {
+    p: {},
+    a: {
+      href: true,
+      target: true
+    },
+    strong: {},
+    b: {},
+    em: {},
+    i: {},
+    u: {},
+    br: {},
+    strike: {},
+    h2: {},
+    h3: {},
+    h4: {},
+    h5: {},
+    h6: {},
+    ul: {},
+    li: {}
   }
-};
+};
+
+var janitor = new _htmlJanitor2.default(janitorConfig);
+
+function dumbToSmartQuotes(str) {
+  str = str.replace(/([a-zA-Z0-9.,?!;:\'\"])\"/g, '$1”');
+  str = str.replace(/\"/g, '“');
+  str = str.replace(/=“(.*?)”/g, '="$1"');
+
+  str = str.replace(/([a-zA-Z0-9.,?!;:\"\'])\'/gi, '$1’');
+  str = str.replace(/\'/g, '‘');
+  str = str.replace(/=‘(.*?)’/g, "='$1'");
+  return str;
+}
+
+function getClipboardContent(event, win, doc) {
+  var dataTransfer = event.clipboardData || win.clipboardData || doc.dataTransfer,
+      data = {};
+
+  if (!dataTransfer) {
+    return data;
+  }
+
+  // Use old WebKit/IE API
+  if (dataTransfer.getData) {
+    var legacyText = dataTransfer.getData('Text');
+    if (legacyText && legacyText.length > 0) {
+      data['text/plain'] = legacyText;
+    }
+  }
+
+  if (dataTransfer.types) {
+    for (var i = 0; i < dataTransfer.types.length; i++) {
+      var contentType = dataTransfer.types[i];
+      data[contentType] = dataTransfer.getData(contentType);
+    }
+  }
+
+  return data;
+}
+
+var CustomPasteHandler = exports.CustomPasteHandler = _mediumEditor2.default.extensions.paste.extend((_MediumEditor$extensi = {
+  cleanPastedHTML: true,
+  forcePlainText: true
+}, _defineProperty(_MediumEditor$extensi, 'cleanPastedHTML', true), _defineProperty(_MediumEditor$extensi, 'cleanReplacements', [[/<!--[^>]*-->/gi, '']]), _defineProperty(_MediumEditor$extensi, 'cleanAttrs', ['class', 'dir', 'style', 'name', 'id']), _defineProperty(_MediumEditor$extensi, 'cleanTags', ['label', 'meta', 'aside', 'h1', 'span', 'code', 'pre', 'img', 'code']), _defineProperty(_MediumEditor$extensi, 'handlePaste', function handlePaste(event) {
+  event.preventDefault();
+  var html = '';
+  var data = getClipboardContent(event, this.window, this.document);
+  var pastedHTML = data['text/html'];
+  var pastedPlain = data['text/plain'];
+  console.log(pastedHTML);
+  if (!pastedHTML) {
+    _mediumEditor2.default.extensions.paste.prototype.handlePaste.apply(this, arguments);
+    return;
+  } else {
+    html = dumbToSmartQuotes(janitor.clean(pastedHTML));
+  }
+  if (html) {
+    this.pasteHTML(html);
+  }
+}), _defineProperty(_MediumEditor$extensi, 'handlePasteBinPaste', function handlePasteBinPaste(event) {
+  event.preventDefault();
+  this.removePasteBin();
+  var html = '';
+  var data = getClipboardContent(event, this.window, this.document);
+  var pastedHTML = data['text/html'];
+  var pastedPlain = data['text/plain'];
+  if (!pastedHTML) {
+    _mediumEditor2.default.extensions.paste.prototype.handlePaste.apply(this, arguments);
+    return;
+  } else {
+    html = dumbToSmartQuotes(janitor.clean(pastedHTML));
+  }
+  if (html) {
+    this.pasteHTML(html);
+  }
+}), _MediumEditor$extensi));
+
+// export const AutoList = MediumEditor.Extension.extend({
+//   name: 'autolist',
+//   init: function(){
+//     this.subscribe('editableKeypress', this.onKeypress.bind(this));
+//   },
+//   onKeypress: function (keyPressEvent) {
+//    if (MediumEditor.util.isKey(keyPressEvent, [MediumEditor.util.keyCode.SPACE])) {
+//       var list_start = this.base.getSelectedParentElement().textContent;
+//       console.log(list_start);
+//       console.log(this.base.getExtensionByName('orderedlist'));
+//       if (list_start == "1."){
+//         console.log(this.base.getSelectedParentElement());
+//         this.base.execAction('insertorderedlist');
+//         this.base.getSelectedParentElement().textContent = this.base.getSelectedParentElement().textContent.slice(2).trim();
+//       }
+//       else if( list_start == "*"){
+//         this.base.execAction('insertunorderedlist');
+//         this.base.getSelectedParentElement().textContent = this.base.getSelectedParentElement().textContent.slice(1).trim();
+//       }
+//     }
+//   },
+// });
+
+
+var getConfig = function getConfig() {
+  return {
+    toolbar: {
+      buttons: ['bold', 'italic', 'underline', 'anchor', 'strikethrough']
+    },
+    autoLink: false,
+    imageDragging: false,
+    placeholder: {
+      text: 'Write your story...'
+    },
+    paste: {
+      forcePlainText: true,
+      cleanPastedHTML: true,
+      cleanReplacements: [[/<!--[^>]*-->/gi, '']],
+      cleanAttrs: ['class', 'dir', 'style', 'name', 'id'],
+      cleanTags: ['label', 'meta', 'aside', 'span']
+    },
+    disableExtraSpaces: false,
+    extensions: {
+      imageDragging: {},
+      paste: new CustomPasteHandler()
+    }
+  };
+};
+
+// autolist: new AutoList(),
+exports.default = getConfig;

package.json

 {
   "name": "kattappa",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "A block based rich text editor with support of Images, embeds( Youtube, Instagram, Vine, Vimeo etc)",
   "main": "./lib/index.js",
   "scripts": {
+    "prepublish": "npm run npm",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,3 +31,4 @@ "build": "NODE_ENV=production ./node_modules/.bin/webpack",
   "dependencies": {
-    "medium-editor": "^5.17.0",
+    "html-janitor": "^2.0.2",
+    "medium-editor": "^5.22.1",
     "react": "^0.14.6",
@@ -33,0 +35,0 @@ "react-dom": "^0.14.6"

No alert changes

Improved metrics

Total package byte prevSize

106565

increased by5.75%

Lines of code

2367

increased by6.38%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedhtml-janitor@^2.0.2

• + Addedhtml-janitor@2.0.4(transitive)

• Updatedmedium-editor@^5.22.1