Video icon update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-cn-quill",
-  "version": "0.7.18",
+  "version": "0.7.20",
   "description": "react-native quill richtext editor",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -34,13 +34,13 @@
     "quill",
     "editor"
   ],
-  "repository": "https://github.com/imnapo/react-native-cn-quill",
+  "repository": "https://github.com/Meruem5/react-native-cn-quill",
   "author": "Narbe HS <imnapo@gmail.com> (https://github.com/imnapo)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/imnapo/react-native-cn-quill/issues"
+    "url": "https://github.com/Meruem5/react-native-cn-quill/issues"
   },
-  "homepage": "https://github.com/imnapo/react-native-cn-quill#readme",
+  "homepage": "https://github.com/Meruem5/react-native-cn-quill#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -59,6 +59,7 @@
     "jest": "^26.0.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
+    "prettier-linter-helpers": "^1.0.0",
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-builder-bob": "^0.18.1",

src/editor/quill-editor.tsx

@@ -59,6 +59,7 @@ export interface EditorProps {
   onBlur?: () => void;
   onFocus?: () => void;
   customJS?: string;
+  webViewTestID?: string;
 }
 
 export default class QuillEditor extends React.Component<
@@ -388,30 +389,36 @@ export default class QuillEditor extends React.Component<
     content: string,
     style: StyleProp<ViewStyle>,
     props: WebViewProps = {}
-  ) => (
-    <WebView
-      scrollEnabled={false}
-      nestedScrollEnabled={true}
-      hideKeyboardAccessoryView={true}
-      keyboardDisplayRequiresUserAction={false}
-      originWhitelist={['*']}
-      style={style}
-      onError={(syntheticEvent) => {
-        const { nativeEvent } = syntheticEvent;
-        console.warn('WebView error: ', nativeEvent);
-      }}
-      allowFileAccess={true}
-      domStorageEnabled={false}
-      automaticallyAdjustContentInsets={true}
-      bounces={false}
-      dataDetectorTypes="none"
-      {...props}
-      javaScriptEnabled={true}
-      source={{ html: content }}
-      ref={this._webview}
-      onMessage={this.onMessage}
-    />
-  );
+  ) => {
+    const { autoSize, webViewTestID } = this.props;
+
+    return (
+      <WebView
+        scrollEnabled={false}
+        nestedScrollEnabled={!autoSize}
+        hideKeyboardAccessoryView={true}
+        keyboardDisplayRequiresUserAction={false}
+        originWhitelist={['*']}
+        style={style}
+        onError={(syntheticEvent) => {
+          const { nativeEvent } = syntheticEvent;
+          console.warn('WebView error: ', nativeEvent);
+        }}
+        allowFileAccess={true}
+        domStorageEnabled={false}
+        automaticallyAdjustContentInsets={true}
+        bounces={false}
+        dataDetectorTypes="none"
+        showsVerticalScrollIndicator={!autoSize}
+        {...props}
+        testID={webViewTestID}
+        javaScriptEnabled={true}
+        source={{ html: content }}
+        ref={this._webview}
+        onMessage={this.onMessage}
+      />
+    );
+  };
 
   render() {
     const { webviewContent, height } = this.state;

src/toolbar/components/selection-bar.tsx

@@ -96,7 +96,7 @@ const useStyles = (theme: ToolbarTheme) =>
       padding: 2,
       position: 'absolute',
       top: 0,
-      backgroundColor: theme.overlay, //'=rgba(0,0,0,.1)',
+      backgroundColor: theme.overlay,
       width: '100%',
       flexDirection: 'row',
       justifyContent: 'space-between',

src/toolbar/components/toolbar-context.tsx

@@ -136,8 +136,8 @@ export class ToolbarProvider extends Component<ProviderProps, ProviderState> {
     const { open, options, name } = this.state;
     const defaultStyles = makeStyles(theme);
     const rootStyle = styles?.toolbar?.provider
-      ? styles?.toolbar?.provider(defaultStyles.root)
-      : defaultStyles.root;
+      ? styles?.toolbar?.provider(defaultStyles.provider)
+      : defaultStyles.provider;
     return (
       <ToolbarContext.Provider
         value={{
@@ -171,7 +171,7 @@ export class ToolbarProvider extends Component<ProviderProps, ProviderState> {
 
 const makeStyles = (theme: ToolbarTheme) =>
   StyleSheet.create({
-    root: {
+    provider: {
       borderTopWidth: 1,
       borderLeftWidth: 1,
       borderRightWidth: 1,

src/toolbar/quill-toolbar.tsx

@@ -32,6 +32,7 @@ interface QuillToolbarProps {
   styles?: CustomStyles;
   editor: React.RefObject<QuillEditor>;
   theme: ToolbarTheme | 'dark' | 'light';
+  separator?: boolean;
   custom?: ToolbarCustom;
   container?: false | 'avoiding-view' | React.ComponentType;
 }
@@ -46,6 +47,7 @@ interface ToolbarState {
 export class QuillToolbar extends Component<QuillToolbarProps, ToolbarState> {
   public static defaultProps = {
     theme: 'dark',
+    separator: false,
   };
 
   constructor(props: QuillToolbarProps) {
@@ -92,7 +94,7 @@ export class QuillToolbar extends Component<QuillToolbarProps, ToolbarState> {
   private prepareIconset = () => {
     const { options, custom } = this.props;
     let toolbarOptions: Array<Array<string | object> | string | object> = [];
-    if (options === 'full' || options === []) {
+    if (options === 'full') {
       toolbarOptions = fullOptions;
     } else if (options === 'basic') {
       toolbarOptions = basicOptions;
@@ -133,7 +135,7 @@ export class QuillToolbar extends Component<QuillToolbarProps, ToolbarState> {
   };
 
   renderToolbar = () => {
-    const { styles, custom } = this.props;
+    const { styles, custom, separator } = this.props;
     const { toolSets, theme, formats } = this.state;
     const defaultStyles = makeStyles(theme);
 
@@ -160,7 +162,7 @@ export class QuillToolbar extends Component<QuillToolbarProps, ToolbarState> {
                 object.length > 0 && (
                   <React.Fragment key={index}>
                     <ToolSet tools={object} />
-                    {toolSets.length > index && (
+                    {separator && toolSets.length > index && (
                       <ToolbarSeparator color={theme.color} />
                     )}
                   </React.Fragment>