{"_id":"@badhanganesh/react-native-pell-rich-editor","_rev":"1-a8a37b804bb064d0dc674f016df54900","name":"@badhanganesh/react-native-pell-rich-editor","dist-tags":{"latest":"1.8.10"},"versions":{"1.8.9":{"name":"@badhanganesh/react-native-pell-rich-editor","description":"React Native Rich Editor","version":"1.8.9","main":"src/index.js","license":"MIT","private":false,"author":{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"},"repository":{"type":"git","url":"git+https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor.git"},"dependencies":{},"devDependencies":{"@types/react-native":"*"},"peerDependencies":{"react-native":">=0.50.0","react-native-webview":">=7.5.2"},"gitHead":"56effb1688d5e3f610674af48a81b03bfffe412c","bugs":{"url":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor/issues"},"homepage":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor#readme","_id":"@badhanganesh/react-native-pell-rich-editor@1.8.9","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-BApQXxJqbvnkqHBsKH1Iyv+JCiJbCwPEQJgO2ld23pHRMQpUesjz95xmhGnunT627E/zEQsLFj5munjTdL6rfg==","shasum":"ad4f8c52834ad66b7ffa86a2d416cc3cc945c207","tarball":"https://registry.npmjs.org/@badhanganesh/react-native-pell-rich-editor/-/react-native-pell-rich-editor-1.8.9.tgz","fileCount":94,"unpackedSize":321600,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAR5YrYJjoMK8+LMd/RywiT0zvFmnYAcRXIkOuwJlIh9AiEAzM46hkYa7bESdqs85amjHsBSx/vl+c74cccEz84CTvw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi81NZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+VA/+MgKp9n0n4Zvg3F1njePLKb7ZGLuiGupdjsUPuwEEZ+85OTzT\r\n0TwI/5zlpGalodyfOHgIWYNKzSc4CfMxFtBd7/f84E9UfOjG45iVbFGSSSWZ\r\n3qhlUWoL2BTZ0Bx3BQ2Ovnq9PqvrotldM8GjYntcux1vFrndooEeu+WHwlY1\r\nu3vVVR3NkDF0AsUwCwTlUnzFoz3tRby+dABwcVJvjPlxb/EuokrBUPNE1K0I\r\nafT8G21R7+8WayRpT3yeSGQ53/0Tgo5jWcxsogRXC8ESUN0Pi9sUCJPxYss5\r\nI6mbcnO0uxMQJfdXaGFzV8rm5h7JZiHWQAL7tODucKIYShkcF9M8uo9ef9FD\r\nFFkuVFLSN4Wv0DxLqXv0QaS3v3a5GaZXLs4sK+j34lvVM+6O99qvQZAdMV6G\r\n8pFDvmAP5QiZLlzkm7BiWdCrUeOinr66nK50DEMwE5ZsnCxGwNvl6+rqWTjL\r\nM1SxTBMz9TGHRVrzXe+nTWXQFyMR0LnsIXkUfaDizmpIxX2kZ2holvHizFLn\r\nca9UGiREfNIsKh8jmhoS+FAjcp57FJBnGMN6KYFzAS41RGTHKFSy0RCKdETX\r\n3LBXjA1CWcb1FrWGFxW+rSXHBi9NSm9zxeA86SHBkaOpRZwhwxn8D2yVFuAd\r\n1/BY2oP94arHASHkyZIGTHZyzjnKiXyZY5Q=\r\n=TMKW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"},"directories":{},"maintainers":[{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-pell-rich-editor_1.8.9_1660113752876_0.12592616437933923"},"_hasShrinkwrap":false},"1.8.10":{"name":"@badhanganesh/react-native-pell-rich-editor","description":"React Native Rich Editor","version":"1.8.10","main":"src/index.js","license":"MIT","private":false,"author":{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"},"repository":{"type":"git","url":"git+https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor.git"},"dependencies":{},"devDependencies":{"@types/react-native":"*"},"peerDependencies":{"react-native":">=0.50.0","react-native-webview":">=7.5.2"},"gitHead":"42da29cbc6b9f9c6490cc6aa6ce38b87f58bbfd1","bugs":{"url":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor/issues"},"homepage":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor#readme","_id":"@badhanganesh/react-native-pell-rich-editor@1.8.10","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-N+/GQWDUnERJVM8UQvWpRS7d38aZXPmuhFQn3g0sRtp/yNfQLmJB/G4EiBbFMLH2Oc1RcMp2Y4Zw4GTn9LaEtg==","shasum":"0fd8ef740ffbffa8327cd4c8ce0e7ab3723ad988","tarball":"https://registry.npmjs.org/@badhanganesh/react-native-pell-rich-editor/-/react-native-pell-rich-editor-1.8.10.tgz","fileCount":94,"unpackedSize":323177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6ttWgyiTjKTzb3gQAh/0zALlWzB0VQHzawuehoEhB4AIgXaHDAO+OMfMVoN0S7UsM/z2St0aD8D8r2M1+sotdl2A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82omACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ8w/+O4ke97I9pPS5BUh+5byz6z0SrmHpjmtn7l0kEjdBKZu97y2x\r\n9Op1ciwHyBCsRYY1exFQpdenMcDlFTzIf0o42HWRecG+6BjBN3CTDnqaMYi5\r\nycGB8DmSKZLvXV8gqrVS2ppbiSOmfdRxi+JeNlwdUo1vC/h2j/VGdQGIp0pc\r\n49Gl/qf53JCJd0M+xLcaBQObvdGoZtcXdrthqN9XTyMsJr34caroplO7VOG1\r\nGLmcJ0GdTXVpltJTSxPzonmfaXETsA8tp7ej3Yv6ZHiHCs8Ufv9UI77LLSr2\r\nxVqPKDnhMnAriC6cUv+2aS9ubb39EsShL3QrzGpNYAOAvt/wXTQ12dc5cQ+p\r\nKSng+53H3EqK5ygUTFfAuBnScUNQ7IIERd9iWJiw/IYnjfPbQ1TDY0S8dhR8\r\nQmUzH0P5DY5i2XtXTQx2H7CMc3iTI5crWxphCm/7vdzEInZ8wEd3c1lBHwz5\r\nQd1cdp2CEjwK4pUdY7Xe3rhh2sJjBkRsFLQDheSZqrShVFLERhFZyJUoZMP0\r\nzcqV5yMzb2DklBHeE5MqrVcyd5PY/JqX7xsRcZa5WJaKED9nmxy37qoU1W2H\r\n5ayVqY5ZiwpIxfgdL3C5DVBtDmg2t2wm04NGm/+kWSU/GSaJNIKKoJBqha/c\r\nrwYXVgu2F7cXWFucM89xST3eq8SotB/5rjU=\r\n=drKn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"},"directories":{},"maintainers":[{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-pell-rich-editor_1.8.10_1660119590614_0.08989534354255069"},"_hasShrinkwrap":false}},"time":{"created":"2022-08-10T06:42:32.806Z","1.8.9":"2022-08-10T06:42:33.134Z","modified":"2022-08-10T08:19:50.995Z","1.8.10":"2022-08-10T08:19:50.930Z"},"maintainers":[{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"}],"description":"React Native Rich Editor","homepage":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor#readme","repository":{"type":"git","url":"git+https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor.git"},"author":{"name":"badhanganesh","email":"ganesh_randy@yahoo.com"},"bugs":{"url":"https://github.com/BadhanGanesh-HappyFox/react-native-rich-editor/issues"},"license":"MIT","readme":"# React Native Rich Text Editor\n\n\n[![NPM](https://img.shields.io/npm/v/react-native-pell-rich-editor.svg)](https://www.npmjs.com/package/react-native-pell-rich-editor)\n\n------\n\n\n> A fully functional Rich Text Editor for both Android and iOS (macOS and windows)?\n\n> If you want to use **flutter**, you can check [here](https://github.com/wxik/flutter-rich-editor) to add **flutter_rich_editor**\n\n```\nyarn add react-native-pell-rich-editor\nor\nnpm i react-native-pell-rich-editor\n```\n\nAlso, follow instructions [here](https://github.com/react-native-community/react-native-webview) to add the native `react-native-webview` dependency.\n\n* [Online Preview](https://wxik.github.io/react-native-rich-editor/web) （Some functions）\n* [Example](./examples) Hooks Rewrite\n\n![](readme/editor.jpg)\n\n---\n## Scroll problem\n###`usecontainer = {true}` Need to be placed in ScrolView and add a callback method `oncursorPosition` to handle scroll bar positioning, refer to Examples\n```this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});```\n\n---\n\n## `RichEditor`\nThe editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.\n\n`RichEditor` takes the following optional props:\n\n* `placeholder`\n\n    Wrap the editor content placeholder\n\n* `initialContentHTML`\n\n    HTML that will be rendered in the content section on load.\n\n* `initialFocus`\n* Boolean value to Initial content request focus. The default value is `false`.\n\n* `disabled`\n* Boolean value to disable editor. The default value is `false`.\n\n* `enterKeyHint`\n* String value to set return key type - [returnKeyType](https://reactnative.dev/docs/textinput#returnkeytype)\n\n* `editorInitializedCallback `\n\n    A function that will be called when the editor has been initialized.\n\n* `editorStyle`\n\n    Styling for container or for Rich Editor more dark or light settings. Object containing the following options:\n\n    - `backgroundColor`: Editor background color\n    - `color`: Editor text color\n    - `caretColor` cursor/selection color\n    - `placeholderColor`: Editor placeholder text color\n    - `contentCSSText`: editor content css text（initial valid）\n    - `cssText`: editor global css text（initial valid）\n\n* `onChange`\n    Callback after editor data modification\n\n* `onHeightChange`\n    Callback after height change\n\n* `onMessage`\n    Callback outside postMessage internal type processing\n    ```html\n    <img src=\"\" onclick=\"_.sendEvent('ImgClick')\" contenteditable=\"false\"/>\n    ```\n\n* `command`\n  Execute JS in the editor\n   ```js\n    // $ = document\n    this.richText.current?.commandDOM('$.execCommand('insertHTML', false, \"<br/>\")');\n    ```\n\n* `commandDOM`\n  Manipulate the DOM in the editor\n   ```js\n    // $ = document.querySelector\n    this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);\n    ```\n\n* `useContainer`\n    A boolean value that determines if a View container is wrapped around the WebView. The default value is true. If you are using your own View to wrap this library around, set this value to false.\n\n* `initialHeight`\n    useContainer is false by inline view of initial height\n\n* `pasteAsPlainText`\n    A boolean value (false as default) that determines if the clipboard paste will keep its format or it will be done as plain text\n\n* `onPaste`\n  Callback clipboard paste value\n\n* `onKeyUp`\n  Callback Keyup event (Android 229 bug)\n\n* `onKeyDown`\n  Callback Keydown event (Android 229 bug)\n\n* `onInput`\n  Callback input value\n\n* `onFocus`\n  Callback editor focus\n\n* `onBlur`\n  Callback editor blur\n\n* `onCursorPosition`\n  Callback Enter the position of the cursor\n  ```this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});```\n\n`RichEditor` also has methods that can be used on its `ref` to  set:\n\n*  `setContentHTML(html: string)`\n*  `insertImage(url: string, style?: string) `\n*  `insertLink(title: string, url: string) `\n*  `insertText(text: string)`\n*  `insertHTML(html: string)`\n*  `insertVideo(url: string, style?: string)`\n*  `setContentFocusHandler(handler: Function)`\n*  `blurContentEditor()`\n*  `focusContentEditor()`\n\nThis method registers a function that will get called whenver the cursor position changes or a change is made to the styling of the editor at the cursor's position., The callback will be called with an array of `actions` that are active at the cusor position, allowing a toolbar to respond to changes.\n\n*  `registerToolbar(listener: Function)`\n\n\n\n### Example Usage:\n\n```javascript\n<RichEditor\n  ref={(r) => this.richtext = r}\n  initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}\n  editorInitializedCallback={() => this.onEditorInitialized()}\n/>\n```\n\n\n## `RichToolbar`\n\nThis is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichEditor` component.\n\nThe `RichToolbar` has one required property:\n\n* `getEditor()`\n\nWhich must provide a **function** that returns a `ref` to a `RichEditor` component.\n\nThis is because the `ref` is not created until after the first render, before which the toolbar is rendered. This means that any `ref` passed directly will inevitably be passed as `undefined`.\n\nOther props supported by the `RichToolbar` component are:\n\n* `actions`\n\n\tAn `array` of `actions` to be provided by this toolbar. The default actions are:\n\t* `actions.insertImage`\n    * `actions.setBold`\n    * `actions.setItalic`\n    * `actions.insertBulletsList`\n    * `actions.insertOrderedList`\n    * `actions.insertLink`\n    * `actions.keyboard`\n    * `actions.setStrikethrough`\n    * `actions.setUnderline`\n    * `actions.removeFormat`\n    * `actions.insertVideo`\n    * `actions.checkboxList`\n    * `actions.undo`\n    * `actions.redo`\n\n\n* `onPressAddImage`\n    Functions called when the `addImage` actions are tapped.\n\n* `onInsertLink`\n    Logic for what happens when you press on the add insert link button\n\n* `disabled`\n* Boolean value to disable editor. The default value is `false`.\n\n\n* `iconTint`\n* `unselectedButtonStyle`\n* `selectedIconTint`\n* `selectedButtonStyle`\n* `disabledIconTint`\n* `disabledButtonStyle`\n\n    These provide options for styling action buttons.\n\n* `iconSize`\n\n    Defines the size of the icon in pixels. Default is 50.\n\n* `renderAction`\n\n\tAltenatively, you can provide a render function that will be used instead of the default, so you can fully control the tollbar design.\n\n\n* `iconMap`\n\n\t`RichTextToolbar` comes with default icons for the default actions it renders. To override those, or to add icons for non-default actions, provide them in a dictionary to this prop.\n\n\n### Example Usage:\n\n```javascript\nconst richText = React.createRef() || useRef();\n<RichToolbar editor={that.richText}/>\n```\n\n#### With Custom Action:\n\nTo define your own custom action:\n\n-   Send your action name as string in the `actions` array.\n-   Include an icon for it with the `iconMap`\n-   Add a function prop with the same action name to be called on tap\n\n```javascript\n<RichToolbar\n    editor={that.richText}\n\tactions={[\n\t\tactions.setBold,\n\t\tactions.setItalic,\n\t\tactions.insertBulletsList,\n\t\tactions.insertOrderedList,\n\t\tactions.insertImage,\n\t\t'customAction',\n\t]}\n\ticonMap={{\n\t\tcustomAction: customIcon,\n\t}}\n\tcustomAction={this.handleCustomAction}\n/>\n```\n\n#### A Complete Example Using a Functional Component\n```javascript\nimport React from \"react\";\nimport { Text, Platform, KeyboardAvoidingView, SafeAreaView, ScrollView } from \"react-native\";\nimport {actions, RichEditor, RichToolbar} from \"react-native-pell-rich-editor\";\n\nconst TempScreen = () => {\n\tconst richText = React.useRef();\n\treturn (\n        <SafeAreaView>\n            <ScrollView>\n                <KeyboardAvoidingView behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\tstyle={{ flex: 1 }}>\n                    <Text>Description:</Text>\n                    <RichEditor\n                        ref={richText}\n                        onChange={ descriptionText => {\n                            console.log(\"descriptionText:\", descriptionText);\n                        }}\n                    />\n                </KeyboardAvoidingView>\n            </ScrollView>\n\n            <RichToolbar\n                editor={richText}\n                actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1, ]}\n                iconMap={{ [actions.heading1]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}\n            />\n        </SafeAreaView>\n    );\n};\n\nexport default TempScreen;\n```\n\n---\n### Thank you very much for the support of [JetBrains](https://jb.gg/OpenSource)\n![https://jb.gg/OpenSource](readme/jetbrains.png)\n\n","readmeFilename":"README.md"}