Updating example + readme

abanobmikaeel · Sep 30, 2023 · d6f4d3b · d6f4d3b
1 parent 5cfbf5f
commit d6f4d3b
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -10,8 +10,96 @@ npm install react-native-ckeditor-custom
 
 ## Usage
 
-```js
-import { multiply } from 'react-native-ckeditor-custom';
+```jsx
+import * as React from 'react';
+
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import CKEditor5 from 'react-native-ckeditor-custom';
+
+export default function App() {
+  const initalData = `<p>Test</p>`;
+  const height = 200; // Example height in pixels
+  const maxHeight = 400; // Example max height in pixels, or set it to null if not needed
+  // const colors = {};
+  const fontFamily = 'Arial, sans-serif'; // Example font family
+  const toolbarBorderSize = '1px solid #ccc'; // Example toolbar border size and color
+  const editorFocusBorderSize = '2px solid #007bff'; // Example editor focus border size and color
+  const disableTooltips = false; // Set to true to disable tooltips, false otherwise
+  const placeHolderText = 'Enter your text here'; // Example placeholder text
+  const editorConfig = {
+    // Additional editor configuration options if needed (provide an empty object or set to null if not needed)
+  };
+  const style = {
+    backgroundColor: 'black',
+  };
+
+  const onChange = (e: any) => {
+    // console.log('onChange', e);
+  };
+
+  const onError = (e: any) => {
+    // console.log('onError', e);
+  };
+
+  const onFocus = (e: any) => {
+    console.log('onFocus', e);
+  };
+
+  const onBlur = (e: any) => {
+    // console.log('onChange', e);
+  };
+
+  const onLoadEnd = (e: any) => {
+    // console.log('onLoadEnd', e);
+  };
+
+  const renderError = () => {
+    return <Text>An error ocurred while rendering CKEDITOR5 editor</Text>;
+  };
+
+  const renderLoading = () => {
+    return <ActivityIndicator></ActivityIndicator>;
+  };
+  return (
+    <View style={styles.container}>
+      <CKEditor5
+        onChange={onChange}
+        onError={onError}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onLoadEnd={onLoadEnd}
+        renderError={renderError}
+        renderLoading={renderLoading}
+        initialData={initalData}
+        maxHeight={maxHeight}
+        editorConfig={editorConfig}
+        style={style}
+        disableTooltips={disableTooltips}
+        height={height}
+        androidHardwareAccelerationDisabled={false}
+        fontFamily={fontFamily}
+        colors={{}}
+        toolbarBorderSize={toolbarBorderSize}
+        editorFocusBorderSize={editorFocusBorderSize}
+        placeHolderText={placeHolderText}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'black',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});
 
 // ...
 

diff --git a/example/package.json b/example/package.json
@@ -12,15 +12,15 @@
     "expo": "~49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.5",
     "react-dom": "18.2.0",
+    "react-native": "0.72.5",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
-}
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,18 +1,75 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-ckeditor-custom';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import CKEditor5 from 'react-native-ckeditor-custom';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
+  const initalData = `<p>Test</p>`;
+  const height = 200; // Example height in pixels
+  const maxHeight = 400; // Example max height in pixels, or set it to null if not needed
+  // const colors = {};
+  const fontFamily = 'Arial, sans-serif'; // Example font family
+  const toolbarBorderSize = '1px solid #ccc'; // Example toolbar border size and color
+  const editorFocusBorderSize = '2px solid #007bff'; // Example editor focus border size and color
+  const disableTooltips = false; // Set to true to disable tooltips, false otherwise
+  const placeHolderText = 'Enter your text here'; // Example placeholder text
+  const editorConfig = {
+    // Additional editor configuration options if needed (provide an empty object or set to null if not needed)
+  };
+  const style = {
+    backgroundColor: 'black',
+  };
 
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+  const onChange = (e: any) => {
+    // console.log('onChange', e);
+  };
 
+  const onError = (e: any) => {
+    // console.log('onError', e);
+  };
+
+  const onFocus = (e: any) => {
+    console.log('onFocus', e);
+  };
+
+  const onBlur = (e: any) => {
+    // console.log('onChange', e);
+  };
+
+  const onLoadEnd = (e: any) => {
+    // console.log('onLoadEnd', e);
+  };
+
+  const renderError = () => {
+    return <Text>An error ocurred while rendering CKEDITOR5 editor</Text>;
+  };
+
+  const renderLoading = () => {
+    return <ActivityIndicator></ActivityIndicator>;
+  };
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <CKEditor5
+        onChange={onChange}
+        onError={onError}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onLoadEnd={onLoadEnd}
+        renderError={renderError}
+        renderLoading={renderLoading}
+        initialData={initalData}
+        maxHeight={maxHeight}
+        editorConfig={editorConfig}
+        style={style}
+        disableTooltips={disableTooltips}
+        height={height}
+        androidHardwareAccelerationDisabled={false}
+        fontFamily={fontFamily}
+        colors={{}}
+        toolbarBorderSize={toolbarBorderSize}
+        editorFocusBorderSize={editorFocusBorderSize}
+        placeHolderText={placeHolderText}
+      />
     </View>
   );
 }
@@ -22,6 +79,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'black',
   },
   box: {
     width: 60,