Merge pull request #1 from mzupek/master

Fixed PropTypes var names, added more styling prop support
lukefanning · Oct 13, 2021 · 575eaf1 · 575eaf1
2 parents 8857f98 + 831a742
commit 575eaf1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -24,14 +24,28 @@ import CKEditor5 from 'react-native-ckeditor5';
 
 Creating a CKEditor5 editor:
 
+```jsx harmony
+const colors = {
+  backgroundColor: '{your color code here}',
+  offContentBackgroundColor: '{your secondary color code here}',
+  color: '{font color code here}',
+  bg5: '{your toolbar button active and hover color}'
+}
+```
 
 ```jsx harmony
-<CKEditor
-  initialData={this.state.test}
-  onChange={value => this.setState({ test: value })}
-  editorConfig={{ toolbar: ['bold', 'italic', 'underline', 'bulletedList', 'numberedList', '|', 'undo', 'redo'] }}
-  onFocus={() => {}}
-  onBlur={() => {}}
-  fontFamily="Arial, Helvetica, sans-serif"
-/>
+     <CKEditor5
+        initialData={inputValue}
+        onChange={value => onTextChange(value)}
+        editorConfig={{ toolbar: ['bold', 'italic', 'underline', 'bulletedList', 'numberedList', '|', 'undo', 'redo'] }}
+        onFocus={() => {}}
+        onBlur={() => {}}
+        fontFamily={device.isIOS ? "-apple-system, 'Helvetica Neue', 'Lucida Grande'" : "'Roboto', sans-serif"}
+        style={{ backgroundColor: 'transparent' }}
+        height={utils.scaleByVertical(685)}
+        colors={colors}
+        toolbarBorderSize="0px"
+        editorFocusBorderSize="0px"
+        placeHolderText="Enter text here..."
+      />
 ```
diff --git a/index.js b/index.js
@@ -12,17 +12,21 @@ class CKEditor5 extends PureComponent {
     onError: PropTypes.func,
     renderError: PropTypes.func,
     renderLoading: PropTypes.func,
-    onChange: propTypes.func,
-    initialData: propTypes.string,
-    maxHeight: propTypes.number,
-    editorConfig: propTypes.object,
-    style: propTypes.object,
-    onFocus: propTypes.func,
-    onBlur: propTypes.func,
-    disableTooltips: propTypes.bool,
-    height: propTypes.number,
-    androidHardwareAccelerationDisabled: propTypes.bool,
-    fontFamily: propTypes.string,
+    onChange: PropTypes.func,
+    initialData: PropTypes.string,
+    maxHeight: PropTypes.number,
+    editorConfig: PropTypes.object,
+    style: PropTypes.object,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    disableTooltips: PropTypes.bool,
+    height: PropTypes.number,
+    androidHardwareAccelerationDisabled: PropTypes.bool,
+    fontFamily: PropTypes.string,
+    colors: PropTypes.object,
+    toolbarBorderSize: PropTypes.string,
+    editorFocusBorderSize: PropTypes.string,
+    placeHolderText: PropTypes.string
   }
 
   static defaultProps = {
@@ -69,7 +73,7 @@ class CKEditor5 extends PureComponent {
   render() {
     const {
       maxHeight, editorConfig, style, initialData, renderLoading, disableTooltips, height,
-      androidHardwareAccelerationDisabled, fontFamily,
+      androidHardwareAccelerationDisabled, fontFamily, colors, toolbarBorderSize, editorFocusBorderSize, placeHolderText
     } = this.props;
     return (
       <WebView
@@ -99,19 +103,38 @@ class CKEditor5 extends PureComponent {
                   height: ${height}px;
                   max-height: ${maxHeight || height}px;
               }
+              .ck.ck-editor__main>.ck-editor__editable {
+                background: ${colors.backgroundColor};
+                color: ${colors.white};
+                font-family: ${fontFamily || '-apple-system, "Helvetica Neue", "Lucida Grande"'};
+                border-style: none;
+              }
+              .ck .ck-toolbar {
+                background: ${colors.offContentBackground};
+                border: ${toolbarBorderSize};
+              }
+              .ck.ck-reset_all, .ck.ck-reset_all * {
+                color: ${colors.white}
+              }
+              .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
+                border: ${editorFocusBorderSize};
+              }
+              .ck-toolbar .ck-on .ck.ck-icon, .ck-toolbar .ck-on .ck.ck-icon * { 
+                color: ${colors.bg5} !important; 
+              }
+              .ck-toolbar .ck-button:hover .ck.ck-icon, .ck-toolbar .ck-button:hover .ck.ck-icon * {
+                color: ${colors.bg5}; 
+              }
               ${disableTooltips ? `
               .ck.ck-button .ck.ck-tooltip {
                   display: none;
               }
-              body {
-                font-family: ${fontFamily || 'Arial, Helvetica, sans-serif'};
-              }
               ` : ''}
             </style>
         </head>
 
         <body>
-        <textarea name="editor1" id="editor1"></textarea>
+        <textarea name="editor1" placeholder="${placeHolderText}" id="editor1"></textarea>
         <script>
         ClassicEditor
             .create( document.querySelector( '#editor1' ), ${JSON.stringify(editorConfig || {})} )

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-ckeditor5",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React Native CKEditor5 WebView wrapper",
   "main": "index.js",
   "scripts": {