{"_id":"@bencryrus/react-native-cn-quill","name":"@bencryrus/react-native-cn-quill","dist-tags":{"latest":"0.7.17"},"versions":{"0.7.17":{"name":"@bencryrus/react-native-cn-quill","version":"0.7.17","description":"react-native quill richtext editor","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn","prepublish":"tsc","prepare":"bob build"},"keywords":["react-native","ios","android","rich-text","WYSIWYG editor","quill","editor"],"repository":{"type":"git","url":"git+https://github.com/imnapo/react-native-cn-quill.git"},"author":{"name":"Narbe HS","email":"imnapo@gmail.com","url":"https://github.com/imnapo"},"license":"MIT","bugs":{"url":"https://github.com/imnapo/react-native-cn-quill/issues"},"homepage":"https://github.com/imnapo/react-native-cn-quill#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^11.0.0","@react-native-community/eslint-config":"^2.0.0","@release-it/conventional-changelog":"^2.0.0","@types/jest":"^26.0.0","@types/react":"^16.9.19","@types/react-native":"0.62.13","commitlint":"^11.0.0","eslint":"^7.2.0","eslint-config-prettier":"^7.0.0","eslint-plugin-prettier":"^3.1.3","husky":"^4.2.5","jest":"^26.0.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"16.13.1","react-native":"0.63.4","react-native-builder-bob":"^0.18.1","react-native-webview":"^11.22.0","release-it":"^14.2.2","typescript":"^4.1.3"},"peerDependencies":{"react":"*","react-native":"*","react-native-webview":"^11.0.0"},"jest":{"preset":"react-native","modulePathIgnorePatterns":["<rootDir>/example/node_modules","<rootDir>/lib/"]},"husky":{"hooks":{"commit-msg":"commitlint -E HUSKY_GIT_PARAMS","pre-commit":"yarn lint && yarn typescript"}},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false,"endOfLine":"auto"}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"directories":{"example":"example"},"gitHead":"20538d697a065c1d00a16e7c39bde96c28bc82b9","_id":"@bencryrus/react-native-cn-quill@0.7.17","_nodeVersion":"17.3.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-bGDfZF+9kH54paBLbZhrCXCF57ljsmXjkN2g27KklxSoMLjwIw1/V7a2HclZFynZP3tMbrnawbgAs5/gdoyj3Q==","shasum":"317ae32959a4f7a42a5e0fc54a4ffdd697ede33e","tarball":"https://registry.npmjs.org/@bencryrus/react-native-cn-quill/-/react-native-cn-quill-0.7.17.tgz","fileCount":235,"unpackedSize":3425565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4++qGsHkjuNAl/rCpPT9abiheFlie/o5L+uBadvBQ7AiEAr+ub32+/IzH7VtX8sfT2zctwWVHRbLLv++o757KDO3M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjejjBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ5A/6AiB5QVgVNpoBIoMKd+P/LffJLL+CNdnyWxaDPXOm2QrrUTfi\r\nT155N1KkN+zrtl7MHRgwIDJNlsNzUAvz3uDqTpl0lvMb0LgIyCIlAF9n1FEZ\r\n/qrLYVx4c1tWdqfLKL1y9hXpDgXfouOXXFCjeFdVm0A6Mo/6+uzH5n/cClD7\r\nxYjPpv3q6kGB3Rcfvafq7vuIDdnnxVk1Ku8A1K/EWGEkd1w5mCY+ZI+F4lND\r\n75KV/BokXlUkQV27CZ39Fu8lTvBQRktSSVd5pPHwCkFwERFE/5MI5bokcbnb\r\nQY7PAzUoc8QL2QMayQPwpZ+Qy0Bq1L8RTlK8EW47brQr4vLeHEJrsFTgsad1\r\nHI9kV49ZcNGrXHjWZ/ggMnvrw5eny6A0gRSi7SS/A9wpenIv/PtmX9RZjH00\r\nx+1InF9bzBQEaLctn0aU2T1pW66qEgYiLcbu2KmcrGJx4f7GvTfPiosJiiCG\r\nevyH5omRb5on3U4o5C31VlScqHXTEesYza+l1HmXPI5jxLZSXCkG6HkDZ1Nh\r\nK3u5oGqfpBLGfXI1RL37M29GyqwMrFcXVfLeF+BiRtQXwAVG9imF3Vgmcbe2\r\noUAbGUHvaqNbxWdbHplbHzsyBExl09uCFfZpfqOQtHRvZ7nxxcJwehmZg7AS\r\nM/f6w5gqQxxYiD5tAMFlUfTlzzUiTEHFWjg=\r\n=eC9E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bencryrus","email":"bencryrus@hotmail.com"},"maintainers":[{"name":"bencryrus","email":"bencryrus@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-cn-quill_0.7.17_1668954304817_0.13162105959109027"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-20T14:25:04.771Z","0.7.17":"2022-11-20T14:25:05.061Z","modified":"2022-11-20T14:25:05.204Z"},"maintainers":[{"name":"bencryrus","email":"bencryrus@hotmail.com"}],"description":"react-native quill richtext editor","homepage":"https://github.com/imnapo/react-native-cn-quill#readme","keywords":["react-native","ios","android","rich-text","WYSIWYG editor","quill","editor"],"repository":{"type":"git","url":"git+https://github.com/imnapo/react-native-cn-quill.git"},"author":{"name":"Narbe HS","email":"imnapo@gmail.com","url":"https://github.com/imnapo"},"bugs":{"url":"https://github.com/imnapo/react-native-cn-quill/issues"},"license":"MIT","readme":"# react-native-cn-quill\n\nreact-native-cn-quill is a rich-text editor for react-native. We've created this library on top of Quill Api.\n\n<img src=\"./images/quill-editor.jpeg\" width=\"50%\">\n\n## Why Quill\n\nQuill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API. Read more [here](https://quilljs.com/guides/why-quill/).\n\n## Prerequisite\n\nThis package is using `react-native-webview`. Please follow [this document](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md) to install it.\n\n## Installation\n\n#### Install using npm:\n\n```sh\nnpm i react-native-cn-quill\n```\n\n#### Install using yarn:\n\n```\nyarn add react-native-cn-quill\n```\n\n## Usage\n\nHere is a simple overview of our components usage.\n\n```js\nimport React from 'react';\nimport { SafeAreaView, StyleSheet, StatusBar } from 'react-native';\nimport QuillEditor, { QuillToolbar } from 'react-native-cn-quill';\nexport default function App() {\n  const _editor = React.createRef();\n\n  return (\n    <SafeAreaView style={styles.root}>\n      <StatusBar style=\"auto\" />\n      <QuillEditor\n        style={styles.editor}\n        ref={_editor}\n        initialHtml=\"<h1>Quill Editor for react-native</h1>\"\n      />\n      <QuillToolbar editor={_editor} options=\"full\" theme=\"light\" />\n    </SafeAreaView>\n  );\n}\n\nconst styles = StyleSheet.create({\n  title: {\n    fontWeight: 'bold',\n    alignSelf: 'center',\n    paddingVertical: 10,\n  },\n  root: {\n    flex: 1,\n    marginTop: StatusBar.currentHeight || 0,\n    backgroundColor: '#eaeaea',\n  },\n  editor: {\n    flex: 1,\n    padding: 0,\n    borderColor: 'gray',\n    borderWidth: 1,\n    marginHorizontal: 30,\n    marginVertical: 5,\n    backgroundColor: 'white',\n  },\n});\n```\n\n# QuillEditor\n\nQuillEditor is the main component of this library. You may easily add it to your application. It is also a wrapper for Quill and provides most of it's functionalities.\n\n## QuillEditor Props\n\n### `style`\n\nStyles applied to the outermost component.\n\n| Type         | Required |\n| ------------ | -------- |\n| `view.style` | No       |\n\n---\n\n### `initialHtml`\n\nThe Initial html string to display in editor.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n---\n\n### `customStyles`\n\nList of custom css string to be added to HTML Head.\n| Type | Required |\n| ----------- | ----------- |\n| `string[]` | No |\n\n---\n\n### `defaultFontFamily`\n\nName of default font-family. you may use it only when you've added a custom font and it must be default font of the editor.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n---\n\n### `customFonts`\n\nList of custom fonts to be added to editor.\nFor now just base64 embed font-face can be used.\nFor more information check the example project.\nThis is sample data you may pass to this property: `[{name: 'Roboto', css: '@font-face {font-family: 'Roboto', src: url(base64);'}]`\n| Type | Required |\n| ----------- | ----------- |\n| `Array<{name, css}>` | No |\n\n---\n\n### `quill`\n\nYou may pass several options to customize quill to suit your needs .\n| Type | Required | description\n| ----------- | ----------- | ----------- |\n| `{ id, modules: { toolbar, clipboard? }, theme, placeholder }` | No | described below |\n\n#### `quill.id`\n\nHTML id of the container where the editor will be appended.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n#### `quill.placeholder`\n\nPlaceholder text to show when editor is empty.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n#### `quill.modules`\n\nlist of quill modules. (toolbar and clipboard implemented)\n\n- In order to enable quill's built in toolbar pass `true` or a simple array of format names to `quill.modules.toolbar`.\n- For clipboard module pass a clipboard object as string to `quill.modules.clipboard`. An array of matchers can be passed into Clipboard’s configuration options. These will be appended after Quill’s own default matchers. (from QuillJs docs)\n\n| Type                                                | Required |\n| --------------------------------------------------- | -------- |\n| `{toolbar: boolean \\| array, clipboard?: string; }` | No       |\n\nExample:\n\n```\n<QuillEditor\n  quill={{\n    modules: {\n              clipboard: `{\n                matchers: [\n                  ['B', customMatcherA],\n                  [Node.TEXT_NODE, customMatcherB]\n                ]\n              }`\n            },\n  }}\n/>\n```\n\n#### `quill.theme`\n\nSpecify Quill's officially suppoted themes. (custom theme hasn't implemented yet)\n| Type | Required |\n| ----------- | ----------- |\n| `'snow' \\| 'bubble'` | No |\n\n---\n\n### `import3rdParties`\n\nWe provide two ways to import required 3rd party scritps and styles. this option is only for the editor's own scripts and styles like quill's script and styles and it's not related to custom styles.\n| Type | Required |\n| ----------- | ----------- |\n| `'local' \\| 'cdn'` | No |\n\n---\n\n### `containerId`\n\nHTML element id of the container for the quill object.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n---\n\n### `loading`\n\nCustom text or component to display before webview loaded.\n| Type | Required |\n| ----------- | ----------- |\n| `string \\| React.ReactNode` | No |\n\n---\n\n### `customJS`\n\nThe users in the JS code will have access to the Quill object and thus can create, import and register with the Quill object.\n| Type | Required |\n| ----------- | ----------- |\n| `string` | No |\n\n#### Example from Quill js website : Extending Blots\n\nYou can also extend existing formats. Here is a quick ES6 implementation of a list item that does not permit formatting its contents. Code blocks are implemented in exactly this way.\n\n```\n<QuillEditor\n  customJS={`\n  var ListItem = Quill.import('formats/list/item');\n\n  class PlainListItem extends ListItem {\n    formatAt(index, length, name, value) {\n      if (name === 'list') {\n        // Allow changing or removing list format\n        super.formatAt(name, value);\n      }\n      // Otherwise ignore\n    }\n  }\n\n  Quill.register(PlainListItem, true);\n`}\n/>\n```\n\n---\n\n### `theme`\n\nYou may easily make your editor look good with the help of themes. you can pass color for `background`, `text` and `placeholder`.\n| Type | Required |\n| ----------- | ----------- |\n| `{ background: string; color: string; placeholder: string }` | No |\n\n---\n\n### `container`\n\nThe container component of `webview`. you may pass `false` to remove container or pass a custom component. Defaults to `true` which will wrap the `webview` inside a `view` component.\n| Type | Required |\n| ----------- | ----------- |\n| ` boolean \\| React.ComponentType` | No |\n\n---\n\n### `autoSize`\n\nAutomatically adjust size of the editor\n\n| Type       | Required | default |\n| ---------- | -------- | ------- |\n| ` boolean` | No       | false   |\n\n#### Example\n\nHere is a simplified example on how to setup the an autosizing container\n\n```jsx\n<QuillEditor\n  autoSize\n  container={true} // Make sure to enable the wrapping container (also custom container)\n  ref={_editor}\n  initialHtml=\"<h1>Quill Editor for react-native</h1>\"\n  style={\n    { minHeight: 100, maxHeight: 500 }, // Setting minHeight and maxHeight is optional\n  }\n/>\n\n```\n\n---\n\n### `webview`\n\nYou may specify custom props for `webview` component.\n| Type | Required |\n| ----------- | ----------- |\n| `WebViewProps` | No |\n\n---\n\n### `onSelectionChange`\n\nCalls when quill's selection changes.\n| Type | Required |\n| ----------- | ----------- |\n| `({ range: { index, lengthmber } , oldRange: { index, length }, source }) => void` | No |\n\n---\n\n### `onTextChange`\n\nCalls when when the contents of Quill have changed.\n| Type | Required |\n| ----------- | ----------- |\n| `({ delta, oldContents, source }) => void` | No |\n\n---\n\n### `onHtmlChange`\n\nCalls when when the contents of Quill have changed.\n| Type | Required |\n| ----------- | ----------- |\n| `({ html }) => void` | No |\n\n---\n\n### `onDimensionsChange`\n\nCalls when when the dimensions of Quill have changed.\n| Type | Required |\n| ----------- | ----------- |\n| `({ height, width }) => void` | No |\n\n---\n\n### `onEditorChange`\n\nCalls when the contents of Quill have changed or quill's selection have changed.\n| Type | Required |\n| ----------- | ----------- |\n| `({name , args}) => void` | No |\n\n---\n\n### `onDimensionsChange`\n\nCalls when the contents of Quill have changed or quill's selection have changed.\n| Type | Required |\n| ----------- | ----------- |\n| `({width , height}) => void` | No |\n\n---\n\n### `onFocus`\n\nThe `onfocus` event occurs when the editor gets focus.\n| Type | Required |\n| ----------- | ----------- |\n| `() => void` | No |\n\n---\n\n### `onBlur`\n\nThe `onBlur` event occurs when the editor loses focus.\n| Type | Required |\n| ----------- | ----------- |\n| `() => void` | No |\n\n---\n\n## Editor Methods\n\n### `focus()`\n\nFocuses the editor.\n\n---\n\n### `blur()`\n\nRemoves focus from the editor.\n\n---\n\n### `hasFocus(): Boolean`\n\nChecks if editor has focus.\n\n---\n\n### `disable()`\n\nMake the editor readonly.\n\n---\n\n### `enable(enabled: boolean = true)`\n\nMake the editor editable or readonly.\n\n---\n\n### `update()`\n\nChecks for user updates and fires events, if changes have occurred.\n\n---\n\n## Event Methods\n\n### `on(name: String, handler: Function)`\n\nAdds event handler.\n\n---\n\n## Content Methods\n\n### `deleteText(index: Number, length: Number)`\n\nDeletes text from the editor.\n\n---\n\n### `getContents(index?: Number, length?: Number) : Promise<Delta>`\n\ngets contents of the editor with formats.\n\n---\n\n### `getLength(): Promise<Number>`\n\ngets contents of the editor with formats.\n\n---\n\n### `getText(index?: Number = 0, length?: Number): Promise<String>`\n\ngets string contents of the editor.\n\n---\n\n### `insertEmbed(index: Number, type: String, value: any)`\n\nInsert embedded content into the editor.\n\n#### Example:\n\n```\n_editor.current.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');\n```\n\n---\n\n### `insertText(index: number, text: string, formats?: Record<string, any>)`\n\nInserts text into the editor,\n\n#### Example:\n\n```\n_editor.current.insertText(5, 'Quill', {\n  'color': '#ffff00',\n  'italic': true\n});\n```\n\n---\n\n### `setContents(delta: any)`\n\nOverwrites editor with given contents.\n\n#### Example:\n\n```\n_editor.current.setContents([\n  { insert: 'Hello ' },\n  { insert: 'World!', attributes: { bold: true } },\n  { insert: '\\n' }\n]);\n```\n\n---\n\n### `setText(text: string)`\n\nOverwrites editor with given text.\n\n#### Example:\n\n```\n_editor.current.setText('Hello\\n');\n```\n\n---\n\n### `updateContents(delta: any)`\n\nApplies Delta to editor contents.\n\n---\n\n### `getFormat(index: Range = current | number, length?: number = 0): Promise<{ [string]: any }>`\n\nGets format from selection\n\n#### Example:\n\n```\n_editor.current.getFormat({ index: 0, length: 5 });\n_editor.current.getFormat(5);\n\n```\n\n---\n\n### `getLeaf(index: Number): Promise<{ offset: number; text: string; length: number; index: number; attributes: Record<string, string> }>`\n\nReturns the leaf Blot at the specified index within the document.\nBut RN can't push node thought webview event, will return simple result about selection\nattributes gets from first main parent of leaf\n\n#### Example:\n\n```\nquill.setText('Hello Good World!');\nquill.formatText(6, 4, \"bold\", true);\n\nlet [leaf, offset] = quill.getLeaf(7);\n// leaf should be a Text Blot with value \"Good\"\n// offset should be 1, since the returned leaf started at index 6, with text \"Good\" and length 4\n\n```\n\n---\n\n## Formatting Methods\n\n### `format(name: String, value: any)`\n\nFormat text at user’s current selection.\n\n#### Example:\n\n```\n_editor.current.format('color', 'red');\n```\n\n---\n\n### `removeFormat(index: number, length: number): Promise<Delta>`\n\nRemoves all formatting and embeds within given range, returning a Delta representing the change.\n\n#### Example:\n\n```\nquill.setContents([\n  { insert: 'Hello', { bold: true } },\n  { insert: '\\n', { align: 'center' } },\n  { insert: { formula: 'x^2' } },\n  { insert: '\\n', { align: 'center' } },\n  { insert: 'World', { italic: true }},\n  { insert: '\\n', { align: 'center' } }\n]);\n\nquill.removeFormat(3, 7);\n// Editor contents are now\n// [\n//   { insert: 'Hel', { bold: true } },\n//   { insert: 'lo\\n\\nWo' },\n//   { insert: 'rld', { italic: true }},\n//   { insert: '\\n', { align: 'center' } }\n// ]\n```\n\n---\n\n### `formatText(index: Number, length: Number, formats: Record<string, unknown>, source: string = 'api'): Promise<Delta>`\n\nFormats text in the editor, returning a Delta representing the change.\n\n#### Example:\n\n```\nquill.setText('Hello\\nWorld!\\n');\n\nquill.formatText(0, 5, 'bold', true);      // bolds 'hello'\n\nquill.formatText(0, 5, {                   // unbolds 'hello' and set its color to blue\n  'bold': false,\n  'color': 'rgb(0, 0, 255)'\n});\n\nquill.formatText(5, 1, 'align', 'right');  // right aligns the 'hello' line\n```\n\n---\n\n## Selection Methods\n\n### `getBounds(index: Number, length: Number = 0)`\n\nRetrieves the pixel position and dimensions of a selection at a given location.\n\n#### Example:\n\n```\nconst data = await _editor.current.getBounds(7);\n//Ex. Returns { height: 15, width: 0, left: 27, top: 31 }\n```\n\n---\n\n### `getSelection(focus = false) : { index: Number, length: Number }`\n\nRetrieves the user’s selection range.\n\n#### Example:\n\n```\nvar range = await _editor.current.getSelection();\nif (range) {\n  if (range.length == 0) {\n    console.log('User cursor is at index', range.index);\n  } else {\n    var text = quill.getText(range.index, range.length);\n    console.log('User has highlighted: ', text);\n  }\n} else {\n  console.log('User cursor is not in editor');\n}\n```\n\n---\n\n### `setSelection(index: Number, length: Number = 0, source: String = 'api')`\n\nSets user selection to given range, which will also focus the editor. Providing null as the selection range will blur the editor. Source may be \"user\", \"api\", or \"silent\" [From Quill Js Docs](https://quilljs.com/docs/api/#setselection).\n\n#### Example:\n\n```\n_editor.current.setSelection(0, 5);\n```\n\n---\n\n## Clipboard Methods\n\n### `dangerouslyPasteHTML(index: number, html: string)`\n\nInserts content represented by HTML snippet into editor at a given index.\n\n#### Example:\n\n```\n_editor.current.dangerouslyPasteHTML(0, '<b>Hello World</b>');\n```\n\n---\n\nRead about these methods and their functionality on [Quill Api](https://quilljs.com/docs/api/)\n\n# QuillToolbar\n\nThe QuillToolbar component allow users to easily format Quill’s contents. QuillToolbar controls can be specified by a simple array of format names like `['bold', 'italic', 'underline', 'strike']` or by just passing 'basic' or 'full' string to options prop. we've tried to develop it just like [Quill Toolbar options](https://quilljs.com/docs/modules/toolbar/#container).\n\nIf you prefer to use quill's built-in toolbar follow [this](https://github.com/imnapo/react-native-cn-quill#quillmodules) instruction.\n\nThe QuillToolbar uses a series of icons to render controls. this controls by default applies and removes formatting, but you can easily extend or overwrite these with `custom` prop.\nFor example we may add the `image` and `clock` (user defined control that inserts current date to the editor) handlers just like this:\n\n## Custom Handlers Usage\n\n```\n...\n  const clockIcon = require('../assets/icons/clock.png');\n\n  customHandler = (name: string, value: any) => {\n    if (name === 'image') {\n      this._editor.current?.insertEmbed(\n        0,\n        'image',\n        'https://picsum.photos/200/300'\n      );\n    } else if (name === 'clock') {\n      this._editor.current?.insertText(0, `Today is ${this.getCurrentDate()}`, {\n        bold: true,\n        color: 'red',\n      });\n    } else {\n      console.log(`${name} clicked with value: ${value}`);\n    }\n  };\n\n  render() {\n    ...\n        <QuillToolbar\n          editor={this._editor}\n          options={['image', 'clock']}\n          theme=\"light\"\n          custom={{\n            handler: this.customHandler,\n            actions: ['image', 'clock'],\n            icons: {\n              clock: clockIcon,\n            },\n          }}\n        />\n        ...\n  }\n\n```\n\nTo see an example of how to fully implement this please check this [Link](https://github.com/imnapo/react-native-cn-quill/blob/master/example/src/App.tsx).\n\n## QuillToolbar Props\n\n### `styles`\n\ncustom styles to pass to the inner components.\n| Type | Required |\n| ----------- | ----------- |\n| `{ toolbar : { provider, root, toolset }, selection: { root, textToggle, ... }, separator, ... }` | No |\n\nFor Example :\n\n```\nconst customStyles = {\n  toolbar: {\n    provider: (provided) => ({\n      ...provided,\n      borderTopWidth: 0,\n    }),\n    root: (provided) => ({\n      ...provided,\n      backgroundColor: 'orange',\n      }),\n    },\n  };\n```\n\n---\n\n### `editor`\n\nReference of `QuillEditor` component.\n| Type | Required |\n| ----------- | ----------- |\n| `React.RefObject<QuillEditor>` | Yes |\n\n---\n\n### `theme`\n\nYou may easily make your toolbar look good with the help of themes. you can pass `dark`, `light` values or custom theme object with `size`,`color`,`background` and `overlay` props. ex. `{ size: 30, color: 'white', background: 'gray', overlay: 'rgba(0,0,0,.5')})`\n| Type | Required |\n| ----------- | ----------- |\n| `'dark' \\| 'light' \\| object` | No |\n\n---\n\n### `options`\n\nQuillToolbar controls can be specified by a simple array of format names like `['bold', 'italic', 'underline', 'strike']` or by just passing `basic` or `full`.\n| Type | Required |\n| ----------- | ----------- |\n| `'full' \\| 'basic' \\| array ` | Yes |\n\n---\n\n### `custom`\n\nYou can easily extend or overwrite functionality of `QuillToolbar` with `custom` prop.\n| Type | Required |\n| ----------- | ----------- |\n| `{ handler, actions, icons }` | No |\n\n#### `custom.handler`\n\n| Type                                 | Required |\n| ------------------------------------ | -------- |\n| `(name: string, value: any) => void` | No       |\n\n#### `custom.icons`\n\nYou may pass a dictionary of icons to overwrite or extend the default icons of toolbar. for example: `{ video: require('../assets/icons/video.png') }`\n| Type | Required |\n| ----------- | ----------- |\n| `Record<string, any>` | No |\n\n#### `custom.actions`\n\nyou may specify list of format names to be overwriten. for ex. `['video', 'image']`.\n| Type | Required |\n| ----------- | ----------- |\n| `string[]` | No |\n\n---\n\n### `container`\n\nThe container component of `QuillToolbar`. you may pass `false` to remove container or pass a custom component. Defaults to `avoiding-view` which will wrap the `webview` inside a `KeyboardAvoidingView` component.\n| Type | Required |\n| ----------- | ----------- |\n| `false \\| 'avoiding-view' \\| React.ComponentType` | No |\n\n---\n\n# Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n# License\n\nMIT\n","readmeFilename":"README.md"}