react-ckeditor5-component - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -59,3 +59,3 @@ "use strict";
       loaded: false,
-      type: 'classic',
+      type: _this.props.type,
       config: _this.props.config
@@ -97,10 +97,15 @@ };
       var _props = this.props,
+          type = _props.type,
           height = _props.height,
-          width = _props.width;
+          width = _props.width,
+          onChange = _props.onChange;
 
       if (instance) return false;
-      //Create Classic Editor
-      window.ClassicEditor.create(document.querySelector("#" + name), config).then(function (editor) {
-        console.log(editor);
-
+      //Create  Editor
+      var editor = void 0;
+      if (type === 'classic') editor = window.ClassicEditor;
+      if (type === 'inline') editor = window.InlineEditor;
+      if (type === 'balloon') editor = window.BalloonEditor;
+      if (type === 'decoupled') editor = window.DecoupledEditor;
+      editor.create(document.querySelector("#" + name), config).then(function (editor) {
         var target = document.getElementsByClassName("ck-content")[0];
@@ -110,2 +115,4 @@
         if (width) target.style.width = height;
+
+        editor.model.document.on('change', onChange);
         _this3.setState({ instance: editor });
@@ -119,3 +126,2 @@ }).catch(function (error) {
     value: function render() {
-      console.log(this.state);
       var _props2 = this.props,
@@ -139,3 +145,2 @@ name = _props2.name,
   name: 'CKEDITOR5',
-  loaded: false,
   type: 'classic',
@@ -151,3 +156,4 @@ config: {
   height: '',
-  className: ''
+  className: '',
+  onChange: function onChange() {}
 };
@@ -157,3 +163,2 @@
   name: _propTypes2.default.string,
-  loaded: _propTypes2.default.bool,
   type: _propTypes2.default.string,
@@ -164,10 +169,6 @@ config: _propTypes2.default.object,
   height: _propTypes2.default.string,
-  className: _propTypes2.default.string
-  // config: PropTypes.object,
-  // isScriptLoaded: PropTypes.bool,
-  // scriptUrl: PropTypes.string,
-  // activeClass: PropTypes.string,
-  // events: PropTypes.object
+  className: _propTypes2.default.string,
+  onChange: _propTypes2.default.func
 };
 
 exports.default = CKEDITOR5;

package.json

 {
   "name": "react-ckeditor5-component",
-  "version": "1.0.1",
-  "description": "",
+  "version": "1.0.2",
+  "description": "react-ckeditor5-component",
   "main": "dist/index.js",
@@ -21,2 +21,6 @@ "scripts": {
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vgb0332/react-ckeditor5-component"
+  },
   "devDependencies": {
@@ -23,0 +27,0 @@ "babel-core": "^6.26.3",

README.md

@@ -12,5 +12,23 @@ ## Install
 ### usage
+For some reason, cannot get github demo working properly, you can pull from the repo and run locally if want.
 
 ```html
+import React from 'react';
+import { render} from 'react-dom';
+import CKEDITOR5 from '../../src';
+const App = () => (
+  <div style={{border:'1px solid black'}}>
+    <CKEDITOR5
+      type="inline"
+      height="500px"
+      />
 
+    <p style={{borderTop: '1px solid black'}}>
+      border has been given to show there is a div component right below the editor.<br></br>
+    type is inline, and height has been given '500px'
+    </p>
+  </div>
+
+);
+render(<App />, document.getElementById("root"));
 ```
@@ -26,8 +44,26 @@
   </tr>
-<!--   <tr>
-    <td>1</td><td>Tom Preston-Werner</td><td>Awesome</td>
+  <tr>
+    <td>name</td><td>string</td><td>'CKEDITOR5'</td><td>NO</td><td>This will the 'id' of the dom element you would like to add editor on</td>
   </tr>
   <tr>
-    <td>2</td><td>Albert Einstein</td><td>Nearly as awesome</td>
-  </tr> -->
+    <td>type</td><td>string</td><td>'classic'</td><td>NO</td><td>type of the editor: classic, inline, ballon, decoupled</td>
+  </tr>
+  <tr>
+    <td>config</td><td>object</td><td></td><td>NO</td><td>CKEDITOR5 config object(Like from the API document)</td>
+  </tr>
+  <tr>
+    <td>content</td><td>any(either tags or string preferrably)</td><td></td><td>NO</td><td>default content to start with</td>
+  </tr>
+  <tr>
+    <td>width</td><td>string</td><td></td><td>NO</td><td>width of the editor(ex. '500px')</td>
+  </tr>
+  <tr>
+    <td>height</td><td>string</td><td></td><td>NO</td><td>height of the editor(ex. '500px')</td>
+  </tr>
+  <tr>
+    <td>className</td><td>string</td><td></td><td>NO</td><td> custom className to the editor if you want </td>
+  </tr>
+  <tr>
+    <td>onChange</td><td>function</td><td></td><td>NO</td><td> onChange event to retrieve data. The return value would be same as eidtor.getData() value from the regular ckeditor</td>
+  </tr>
 </table>
@@ -38,4 +74,1 @@
 Source code can be found on [github](https://github.com/vgb0332/react-ckeditor5-component), licenced under [MIT](http://opensource.org/licenses/mit-license.php).
-
-
-    

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9278

increased by25.62%

Lines of code

138

increased by0.73%

Number of lines in readme file

72

increased by84.62%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes