{"_id":"42-react-native-pell-rich-editor","_rev":"1-fa42fdeb9eac8c3270afb88a1ba51aaa","name":"42-react-native-pell-rich-editor","dist-tags":{"latest":"1.8.9"},"versions":{"1.8.8":{"name":"42-react-native-pell-rich-editor","description":"React Native Rich Editor","version":"1.8.8","main":"src/index.js","license":"MIT","private":false,"author":{"name":"pds","email":"xz87060361@126.com"},"repository":{"type":"git","url":"git+https://github.com/xz870603611/42-react-native-pell-rich-editor.git"},"dependencies":{},"devDependencies":{"@types/react-native":"*"},"peerDependencies":{"react-native":">=0.50.0","react-native-webview":">=7.5.2"},"gitHead":"b19cadaf89b2a9f8a3717aa75dde4457fc37a9b1","bugs":{"url":"https://github.com/xz870603611/42-react-native-pell-rich-editor/issues"},"homepage":"https://github.com/xz870603611/42-react-native-pell-rich-editor#readme","_id":"42-react-native-pell-rich-editor@1.8.8","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-omvhjDwQ5y9VIrnKTVpBr7r/y0RhTHmg4/r9w95UpPdx8yAy0/N5V8QxdVh0iec/jSsJMSt9f9wEQz29UVSiNA==","shasum":"b07c4517b2d3bb24fb2abdeeda7c0a3595649a9f","tarball":"https://registry.npmjs.org/42-react-native-pell-rich-editor/-/42-react-native-pell-rich-editor-1.8.8.tgz","fileCount":93,"unpackedSize":322491,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiLG8eSwFhbxivYiY6QYHR9DEGJ/p3MJXsWXFKPuPwVAIhANCo/TsThA17ZvoM1ihWZY1ucDg7w349Rp/gejs+z4V+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSXUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfnQ//Vc/lsee7LXE+DDiVr27zUbFYLLgBBSPeF9EAStO21AnLLLZQ\r\nOrt+KAKe5Z+nETVFH8XK/BU/+mLUgEzXnn/F9M7fzJ/XScwP3xQUQy+uKVCd\r\ns1Wz8bfWwf1QW6s/dEOgvkyH2olwDk6tbPRbI8JJbMYZC3W9OY9yOAhkLxS+\r\nc+fcxBQZi5plqmugebgZS0oGKEkZZZoWujlagQJE19oVxVELTAJL5DT/8Flo\r\n9eQIOxfTfZt+KEaqGlGWy1ch2eXMTtJ/mk0s7g67d0f4J47/5dVJJn4CMzGE\r\nO7GiuynPqINvn/bNYrOilMFQZcNGUJ+oRKoUETDJIWq9FZuONTDhcH1mqUB/\r\nb06RtV9cCcGyodSFxLrPUZ/PxDWaQdoVLqoGVKa8xJWdisVxI/1Lr0hVnTAd\r\n76cbxHn89S49TOb7HZtMyMR4q39PlVMISZBY5KX+CI2Q2Sptd4/RmZ7ggwfj\r\nrx/5CiZ42LA+kcJPIiXOEw8cDIybwhUzrqhN8flvlTIzlzhT3CYF49SrE6YV\r\nW5jfiV82vgEFX5E3YaHRuflblUMeGMge/pgbAHV7ze0ZYUjAMet+IY9L0tpv\r\nDhdz2aM90A5u1xhw0e0mGjSPX5j77hTkdzxRqeeq9PjN9bYamSRFbAFFekTA\r\nIwxd3EDj3zzNZyx9+InHo40rO5NO8GITcQU=\r\n=9QDG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"xz87060361","email":"xz87060361@126.com"},"directories":{},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/42-react-native-pell-rich-editor_1.8.8_1673340372305_0.3547499214283265"},"_hasShrinkwrap":false},"1.8.9":{"name":"42-react-native-pell-rich-editor","description":"React Native Rich Editor","version":"1.8.9","main":"src/index.js","license":"MIT","private":false,"author":{"name":"pds","email":"xz87060361@126.com"},"repository":{"type":"git","url":"git+https://github.com/xz870603611/42-react-native-pell-rich-editor.git"},"dependencies":{},"devDependencies":{"@types/react-native":"*"},"peerDependencies":{"react-native":">=0.50.0","react-native-webview":">=7.5.2"},"gitHead":"fefa58473e963fc36feec137d5434c428c398335","bugs":{"url":"https://github.com/xz870603611/42-react-native-pell-rich-editor/issues"},"homepage":"https://github.com/xz870603611/42-react-native-pell-rich-editor#readme","_id":"42-react-native-pell-rich-editor@1.8.9","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-WEV0ArSxBljz8DfBgmGXBZEA/LOZg+TcOx5j1YSTdSX2QwZeAsEKlOWOyjM/7JSlwlBtbsDE1wxbxib+T7RaKQ==","shasum":"750732e85658caf5c96683256039f073f3f61c1a","tarball":"https://registry.npmjs.org/42-react-native-pell-rich-editor/-/42-react-native-pell-rich-editor-1.8.9.tgz","fileCount":93,"unpackedSize":322454,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCChHKtCpBTNy1FhnkZ+kVbCuTqghYC2n94s7lxTXgaiAIhAJKJL6HUoeb48cvooeaVTwfjmK4JgE10ErLwGCtgAs+y"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwUlvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3TQ//bl4JLzisalcg26VOjHjaaVJM+civ9WtiZulM+hzSZt2RmZVb\r\npYU1LjYQ4CbR0cdULONHOMtWldXIuzRYuNlpQMbnLoSZNgkOHf0UBlQTaF5l\r\njxYWPM28qvnFj7s9JotKK2pSBgzNpV1AZGkdiNIGwkaalNM3EOUNZFB/NRn5\r\npi4ShqmT+soC1XgQ8PWUL0QIhge+GnwbYe8cYTE3vvAlAcCJ4L+7q5xp6az0\r\n+E3zZ/JXhyJAMh1LveIA7tpRe3RXyM0MHCHv5vfPb647dOhtWVyiCJXneONR\r\nCJFWKkz0RsEf1HFwCF9X7urtq+gUPzqHVzfk42/hSgjhCYo9z7qAynGQ5j6N\r\ng87685BZ63q/grKRk0IQEuKcUEs6tWPfv8XYwoXPs34U1B048mc2YzFkU3/j\r\ntWSvO/YZJu7/ZX/z3E9tfrzryrMV4LEAnqOOA8MXlpTOV7jlUiz93i1x5eDB\r\nkV+fdmDyLWsL38FSZXzRdOCNViw5jgR8rty0Dj4XXuN7dBZGnTj+15GLvRev\r\nbV0l+zoQLUEO/emNyZrLVw88IMYYGdfZL2mfkrNY6WZguGTkfME043wdBnSs\r\npNoNbiNPaCcziXg7N1Ey2OoyGxGC+mXweMnJYyUUDIFvkNTEZHh4tdcOZqsJ\r\nhi1mQ0RHmZ1EIrGMUNb7VbPdeGRRKeYsOWs=\r\n=1xC+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"xz87060361","email":"xz87060361@126.com"},"directories":{},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/42-react-native-pell-rich-editor_1.8.9_1673611631036_0.724380756533304"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-10T08:46:12.304Z","1.8.8":"2023-01-10T08:46:12.492Z","modified":"2023-01-13T12:07:11.336Z","1.8.9":"2023-01-13T12:07:11.200Z"},"maintainers":[{"name":"xz87060361","email":"xz87060361@126.com"}],"description":"React Native Rich Editor","homepage":"https://github.com/xz870603611/42-react-native-pell-rich-editor#readme","repository":{"type":"git","url":"git+https://github.com/xz870603611/42-react-native-pell-rich-editor.git"},"author":{"name":"pds","email":"xz87060361@126.com"},"bugs":{"url":"https://github.com/xz870603611/42-react-native-pell-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"}