kattappa - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

lib/blocks/embeds/facebook.js

@@ -139,3 +139,3 @@ 'use strict';
   url: '',
-  regex: /https?:\/\/www\.facebook\.com\/(.*)\/(videos|posts|photos)\/.*/gi,
+  regex: /https?:\/\/www\.facebook\.com\/(?:.*)\/(videos|posts|photos)\/(\d+).*/gi,
   scriptUrl: '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3'
@@ -142,0 +142,0 @@ };

lib/blocks/h2.js

@@ -72,3 +72,3 @@ 'use strict';
   Empty: function Empty() {
-    return '';
+    return '<p><br></p>';
   },
@@ -75,0 +75,0 @@ maximumBlocks: 0,

lib/blocks/image.js

@@ -23,4 +23,2 @@ 'use strict';
 
-require('isomorphic-fetch');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,0 +25,0 @@

lib/blocks/ol.js

@@ -129,3 +129,3 @@ 'use strict';
     return [{
-      content: '',
+      content: '<p><br></p>',
       key: (0, _utils.uuid)()
@@ -132,0 +132,0 @@ }];

lib/blocks/quote.js

@@ -97,3 +97,3 @@ 'use strict';
     return {
-      content: '',
+      content: '<p><br></p>',
       credit: ''
@@ -100,0 +100,0 @@ };

lib/blocks/text.js

@@ -95,3 +95,3 @@ 'use strict';
   Empty: function Empty() {
-    return '';
+    return '<p><br></p>';
   },
@@ -98,0 +98,0 @@ maximumBlocks: 0,

lib/blocks/ul.js

@@ -56,3 +56,3 @@ 'use strict';
     return [{
-      content: '',
+      content: '<p><br></p>',
       key: (0, _utils.uuid)()
@@ -59,0 +59,0 @@ }];

lib/components/medium.js

@@ -104,3 +104,3 @@ 'use strict';
 
-      if (this.state.content === "") {
+      if (this.state.content === '' || this.state.content === '<p><br></p>') {
         setTimeout(this.placeCaretAtEnd, 0);
@@ -107,0 +107,0 @@ }

package.json

 {
   "name": "kattappa",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A block based rich text editor with support of Images, embeds( Youtube, Instagram, Vine, Vimeo etc)",
@@ -9,3 +9,3 @@ "main": "./lib/index.js",
     "build": "NODE_ENV=production ./node_modules/.bin/webpack",
-    "npm": "./node_modules/.bin/babel ./src -d lib --ignore 'script.js'",
+    "npm": "./node_modules/.bin/babel ./src -d lib --ignore 'demo.js'",
     "dev": "./node_modules/.bin/webpack-dev-server --host 0.0.0.0 --port 8080 --devtool eval --content-base dist/ --progress --colors --hot"
@@ -31,4 +31,2 @@ },
   "dependencies": {
-    "es6-promise": "^3.0.2",
-    "isomorphic-fetch": "^2.1.1",
     "medium-editor": "^5.17.0",
@@ -35,0 +33,0 @@ "react": "^0.14.6",

README.md

@@ -1,4 +0,4 @@
-*Note: This project is highly under development as it is being integrated into our CMS and the APIs are not consistent and can change at anytime. New features are added (or something is removed) based on the requirements of the CMS.*
+>Note: This project is highly under development as it is being integrated into our CMS and the APIs are not consistent and can change at anytime. New features are added (or something is removed) based on the requirements of the CMS.
 
-## Kattappa
+## Kattappa [demo](http://bitwiser.in/kattappa/)
 
@@ -9,4 +9,3 @@ A block based Rich Text editor.
 * [ReactJS](http://facebook.github.io/react/) for its UI.
-* [Quill](http://quilljs.com) for rich text editing support.
-* [fetch](https://github.com/github/fetch) for ajax calls to server (used when image files are required to be uploaded).
+* [medium-editor](https://github.com/yabwe/medium-editor) for rich text editing support.
 
@@ -18,13 +17,2 @@ ### Installation
 
-* To directly use in browser:
-    * `bower install kattappa`.
-    * CSS:
-        * `<link rel="stylesheet" type="text/css" href="bower_components/quill/dist/quill.base.css">`
-        * `<link rel="stylesheet" type="text/css" href="bower_components/quill/dist/quill.snow.css">`
-        * `<link rel="stylesheet" type="text/css" href="kattappa.css">`. (Used for basic styling of the blocks. You can extend these to be what you want.)
-    * Javascript:
-        * `<script type="text/javascript" src="bower_components/react/react-with-addons.min.js"></script>`
-        * `<script type="text/javascript" src="bower_components/quill/dist/quill.min.js"></script>`
-        * `<script src="bower_components/fetch/fetch.js"></script>`
-        * `<script type="text/javascript" src="kattappa.js"></script>`
 
@@ -34,123 +22,5 @@ * Or Download the latest release [here](https://github.com/brijeshb42/kattappa/releases/latest).
 ### Usage
-It is available in the `window` global as `Kattappa`.
-* Html:
-    * `<div id="editor-ui"></div>`
 
-* Script:
-    * First create an `editor` instance.
-    * Then mount it to the desired DOM node.
+See [usage](https://github.com/brijeshb42/kattappa/blob/es6/src/demo.js);
 
-```javascript
-var editor = React.createElement(Kattappa.Editor);
-React.render(editor, document.getElementById('editor-ui'));
-```
-
-To get the content of the blocks, you can access the `getBlocks()` method of the editor by adding a `ref` to the editor instance and then call its `getBlocks` method.
-
-```javascript
-var App = React.createClass({
-    getBlocks: function() {
-        console.log(this.refs.editor.getBlocks());
-    },
-
-    render: function() {
-        return (
-            <div>
-                <button onClick={this.getBlocks}>GET</button>
-                <Kattappa.Editor ref="editor" />
-            </div>
-        );
-    }
-});
-
-React.render(<App />, document.getElementById('editor-ui'));
-```
-
-If you already have a list of blocks (that may have been previously saved on the server):
-
-* You can first fetch the block list from the server.
-* Pass the function that returns the `blocks` fetched.
-* Make sure each block has a `key` key. This is used by React and facilitates easy manipulation of position (up, down or remove block).
-* If the blocks don't have a `key`, you can just generate keys for each of them in the browser using the utility function provided `Kattappa.uuid()`.
-* The `key` functionality applies to each of the items in `UL` or `OL` also.
-
-```javascript
-
-var blockUrl = "/blocks.json";
-
-var App = React.createClass({
-    getInitialState: function() {
-      return {
-        loading: true,
-        blocks: []
-      };
-    },
-
-    componentDidMount: function() {
-      var self = this;
-      fetch("/blocks.json")
-      .then(function(resp) {
-        return resp.json();
-      })
-      .then(function(json) {
-        var b = [];
-        for(var i=0; i< json.length; i++) {
-          json[i].key = Kattappa.uuid();
-          b.push(json[i]);
-        }
-        console.log(b);
-        self.setState({
-          loading: false,
-          blocks: b
-        });
-      })
-    },
-
-    setBlocks: function() {
-      return this.state.blocks;
-    },
-
-    save: function() {
-      console.log(this.refs.kattappa.getBlocks());
-    },
-
-    render: function() {
-      console.log(this.setBlocks())
-      if(this.state.loading) {
-        return <div>Loading...</div>;
-      }
-      return (
-        <div>
-          <button onClick={this.save}>Save</button>
-          <Kattappa.Editor
-            ref="kattappa"
-            getBlocks={this.setBlocks} />
-        </div>
-      );
-    }
-});
-var app = React.createElement(App);
-React.render(app, document.getElementById("editor-ui"));
-```
-
-#### Image upload
-* By default, the image block just renders the image using `createObjectURL`.
-* If you want the image to also be uploaded to the server, you can do this:
-    * Provide a `prop`, `UploadUrl` with the URL to your server's upload endpoint, to the **Editor** instance.
-        * ```<Kattappa.Editor UploadUrl="/upload_image" />```
-    * If `UploadUrl` is provided, the `Image` block will send a POST request to the url with `image` key having the selected image file and it expects a `json` reponse from the server of the following format:
-```json
-{
-    "type": "success",
-    "message": "http://absoluteurl.to/the/uploaded/image.jpg"
-}
-```
-#### Goodies
-* `Kattappa` supports the following embeds out of the box:
-    * Instagram
-    * Youtube
-    * Vimeo
-    * Vine
-
-
 * Current Blocks:
@@ -168,2 +38,3 @@ - [x] Text
         - [x] Vine
+        - [x] Facebook
 
@@ -170,0 +41,0 @@ * Extra features:

No alert changes

Improved metrics

Dependency count

3

decreased by-40%

Worsened metrics

Total package byte prevSize

100571

decreased by-7.92%

Number of package files

31

decreased by-3.12%

Lines of code

2229

decreased by-4.42%

Number of lines in readme file

48

decreased by-72.88%

Dependency changes

• - Removedes6-promise@^3.0.2

• - Removedisomorphic-fetch@^2.1.1

• - Removedencoding@0.1.13(transitive)

• - Removedes6-promise@3.3.1(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)