{"_id":"@daniel2018/react-native-zss-rich-text-editor","_rev":"2-ce2ef54994c5f3e1bd6feaad36634f96","name":"@daniel2018/react-native-zss-rich-text-editor","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.0":{"name":"@daniel2018/react-native-zss-rich-text-editor","repository":{"type":"git","url":"git+https://github.com/wix/react-native-zss-rich-text-editor.git"},"version":"1.1.0","description":"React Native Wrapper for ZSSRichTextEditor","main":"index.js","license":"SEE LICENSE IN LICENSE","dependencies":{"react-native-webview-bridge":"0.40.1"},"peerDependencies":{"react":"*","react-native":">=0.31.0"},"bugs":{"url":"https://github.com/wix/react-native-zss-rich-text-editor/issues"},"homepage":"https://github.com/wix/react-native-zss-rich-text-editor#readme","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","gitHead":"9ecdf130199711c3f6c8b3f4df3615a54ec3cfa9","_id":"@daniel2018/react-native-zss-rich-text-editor@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"daniel2018","email":"yudingp@163.com"},"dist":{"integrity":"sha512-PivdeUd6dTvP11B8GKs2ZlpNM5U4NGqJelYuuHO/yGr80++1MRpEtq6n3yhPJCYTfQKom3ur8n1MFyieal5B3g==","shasum":"c0c065f5c28d2af0b319b5ac61d3a0c72083f965","tarball":"https://registry.npmjs.org/@daniel2018/react-native-zss-rich-text-editor/-/react-native-zss-rich-text-editor-1.1.0.tgz","fileCount":43,"unpackedSize":582793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9688CRA9TVsSAnZWagAAkM4P/jHOeGEW1EsWTfubmsLH\nhGXLWFm7g+A+CG1Gs0Tnz5ZOO6JwezilW9k+/DH/E7+j/gwG2DlF3jTYNVTL\nxivLE6NhCyepPJx4R60OggjG5qkrYpD3JaLbGxdYKUIFuu5UPZQiRvpW/fTw\nQ6Ul+AKauNeBxKGALF5kU3F6WZOPZbb/vS2jw5cnqCjF1ICGv0qEPrrmw7Q2\neGV0TdpMbFw0+XXGeZGt7RSUel8dZMFlgXDlJeke3Xbcvr0d2sklJ1IeJY77\nUL4jPawK+SaRgE0MQn4taVmqEOD8ggqH/9hTyyvKYZKhvbgFiSQ7K9kSUeMN\nxs+Zv/irAgTChv+jK+u6A8ZdP7foJJTY6kvQmubpOj+KXCoJIlLMR368JPqU\nc+1BswJnA+Lv9ZmrAFJpSQJQs3Nwtpuq0zTkiPPyo6QqATjqnfAkk1hWJyfE\n+V51CA2pvAm+/VUGnfWKuS2GDkQMyRgzQ+eaWZvagyf7HVsnwDB72ailXpk8\nDxf+ha+pgF+DFhirmK+gmJzXoedEwzdGHlOPKGGAfoyuXEKyNYDfO2tTU1x2\ny7uZtFAWrsk3t04to+PcxxaP/+0w1Isbrb5IZxMGOFc10+LkeW647HUKW1c9\nrgzAcNgYxLipkzDuLAIKqVlc7/Hwy7sAvi+xhlQz6EnpI8fy/xKLpGp+bnkL\n1BAT\r\n=SLOy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm8GTGDiBILiwCCU5tf0SL9uYC8hiZHLWrvWi+wbN4uAIgXbQ1q92Jys8ZMGFqu/iPbF4/hAvj8Bo0pHAxeUw8LAk="}]},"maintainers":[{"name":"daniel2018","email":"yudingp@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-zss-rich-text-editor_1.1.0_1542958907319_0.9085634025641718"},"_hasShrinkwrap":false},"1.2.0":{"name":"@daniel2018/react-native-zss-rich-text-editor","repository":{"type":"git","url":"git+https://github.com/wix/react-native-zss-rich-text-editor.git"},"version":"1.2.0","description":"React Native Wrapper for ZSSRichTextEditor","main":"index.js","license":"SEE LICENSE IN LICENSE","dependencies":{"react-native-webview-bridge":"0.40.1"},"peerDependencies":{"react":"*","react-native":">=0.31.0"},"bugs":{"url":"https://github.com/wix/react-native-zss-rich-text-editor/issues"},"homepage":"https://github.com/wix/react-native-zss-rich-text-editor#readme","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","gitHead":"81c11181b9793e60cf0cb7e68eb3b0d2a6a7ab9d","_id":"@daniel2018/react-native-zss-rich-text-editor@1.2.0","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"daniel2018","email":"yudingp@163.com"},"dist":{"integrity":"sha512-XV9/bNOdP6yqNbOPfAkahrPlOwvqDftnD6XME24eVdVaJjmSWfD5Gko+Kkq6KY1OY67XoXlX2VOPN3D7BHzRzg==","shasum":"7a2a42ed55bca8bcba4f69d55db1d2b23b22cdef","tarball":"https://registry.npmjs.org/@daniel2018/react-native-zss-rich-text-editor/-/react-native-zss-rich-text-editor-1.2.0.tgz","fileCount":43,"unpackedSize":585440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcIfRgCRA9TVsSAnZWagAA00EP/1IZErQrJL/zcsV2Z1nv\n5XDsIxZ2Qpw+gYP9pNuxqTEH74VdjeRe8OoV2JaPazuZ8pCOYEd/rhuOAfY7\n2l7eqK2TtV+e/lKtTDmPWPvog1m8bMEATNv3+oLENo+syY512Yvvy9gtBJcu\n++xqPl1PoiAQ2C9rS3sQZRbT0JfDWowF3ISEC4GMrSKeTHo9SLS1VcxH7yIA\nj/mbgxbuFkVWFYdi7toM/g3FhhBKsL86Pl7GrvxWNBbntC7NNbluJ+oTRnHs\nnEMKQvB5N7Drwn6NCpbfzPkPy/dcblEjtrIYJGGrvUVOsebRtGwM2Opza0pK\nL6+VzDfm0w42+R9CsAdWwwxTYRZKcdV4r7yfmQitqI1oOqfTl+T3EFc5gj6c\nSDHquvGp0ztD7LBw31U6XReoVaOROfPH4pA7F4ik28S6pIpMkXxizRaKaSPy\ngWRTp2R5JCEoYR9zz0kVx0gVdnp6283G+sTfWAPUkcrHS3q6dVp8kPoO8+ty\nnzce+95u+yFGRfjU4xJ6vB2arKjZBMLuZN4seECHHf7dplf2W0sbd91HzS+v\nHhy6sXaUE2VxqRttrJa7lX6TWeoJCF4SzxlVsXVG0IedeIEvxOWso/sxrVnW\nLhPa8bgHU7LI84r1W0OT7FVOSPiLycpPwHXBfFMIXtacOdfBmGkzwWsHTyGw\nnOww\r\n=NJ2e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDshRk5O6Z2J0zenZ42PG5G6rYnw/pQomt5ETg5FDzRgwIgTQK9/ySGCv9ApQvsQ2TPgeBNiyv+t9xaoHlN8zRcsdQ="}]},"maintainers":[{"name":"daniel2018","email":"yudingp@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-zss-rich-text-editor_1.2.0_1545729119700_0.21541070463234702"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-23T07:41:47.155Z","1.1.0":"2018-11-23T07:41:47.434Z","modified":"2022-04-05T02:40:34.661Z","1.2.0":"2018-12-25T09:11:59.907Z"},"maintainers":[{"name":"daniel2018","email":"yudingp@163.com"}],"description":"React Native Wrapper for ZSSRichTextEditor","homepage":"https://github.com/wix/react-native-zss-rich-text-editor#readme","repository":{"type":"git","url":"git+https://github.com/wix/react-native-zss-rich-text-editor.git"},"bugs":{"url":"https://github.com/wix/react-native-zss-rich-text-editor/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# React Native Rich Text Editor\n\nA fully functional Rich Text Editor for both Android and iOS, based off the [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project. \n\n## Installation\n\n```\nnpm i --save react-native-zss-rich-text-editor@https://github.com/arneson/react-native-zss-rich-text-editor#[version-tag]\n```\n\nOn Android, add the following to the end of your `android/app/build.gradle`\n\n```groovy\nproject.afterEvaluate {\n    apply from: '../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle';\n    copyEditorHtmlToAppAssets(file('../../node_modules/react-native-zss-rich-text-editor'))\n}\n```\n\nAlso, follow instructions [here](https://github.com/alinz/react-native-webview-bridge) to add the native `react-native-webview-bridge` dependency.\n\n\n## Usage\n\n`react-native-zss-rich-text-editor` exports two Components and one const dictionary:\n\n## `RichTextEditor`\n\nThe editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.\n\n`RichTextEditor` takes the following optional props:\n\n* `initialTitleHTML`\n\n\tHTML that will be rendered in the title section as soon as the component loads.\n\n* `initialContentHTML`\n\n\tHTML that will be rendered in the content section on load.\n\n* `titlePlaceholder`\n\n\tText that will be used as a placeholder when no text is present in the title section.\n\n* `contentPlaceholder`\n\t\n\tText that will be used as a placeholder when no text is present in the content section.\n\n* `editorInitializedCallback`\n\n\tA function that will be called when the editor has been initialized.\n\n* `customCSS`\n\n\tAny custom CSS styles that you want to inject to the editor.\n\n* `hiddenTitle`\n\t\n\tWhether the title should be displayed.\n\t\n* `enableOnChange`\n\n\tEnable the `CONTENT_CHANGE` event.\n\t\n* `footerHeight`\n\n\tHeight of the footer.\n\t\n* `contentInset`\n\n\tObject representing your content inset.\n\n\n`RichTextEditor` also has methods that can be used on its `ref` to  set styling at the current selection or cursor position:\n\n*  `setBold() `\n*  `setItalic()`\n*  `setUnderline() `\n*  `heading1() `\n*  `heading2() `\n*  `heading3() `\n*  `heading4() `\n*  `heading5() `\n*  `heading6() `\n*  `setParagraph() `\n*  `removeFormat() `\n*  `alignLeft() `\n*  `alignCenter() `\n*  `alignRight() `\n*  `alignFull() `\n*  `insertBulletsList() `\n*  `insertOrderedList() `\n*  `insertLink(url, title) `\n*  `updateLink(url, title) `\n*  `insertImage(attributes) `\n*  `setSubscript() `\n*  `setSuperscript()`\n*  `setStrikethrough() `\n*  `setHR() `\n*  `setIndent()`\n*  `setOutdent() `\n*  `setBackgroundColor(color) `\n*  `setTextColor(color) `\n\nThis method shows a dialog for setting a link title and url, that will be inserted at the current cursor location.\n\n* `showLinkDialog(optionalTitle = '', optionalUrl = '')` \n\nTo adjust content, placeholders or css, use these methods\n\n*  `setTitlePlaceholder(placeholder) `\n*  `setContentPlaceholder(placeholder)`\n*  `setCustomCSS(css) `\n*  `setTitleHTML(html)` \n*  `setContentHTML(html) `\n\nThese methods are used when adding content such as images or links that will intefere with the cursor position. `prepareInsert` saves  the current selection, and `restoreSelection` will replace it after the insertion is done. It is called implicitly by `insertImage` and `insertLink` so they should probably never be called directly.\n\n*  `prepareInsert() `\n*  `restoreSelection() `\n\nTo get the content or title HTML, use these **asynchronous** methods.\n\n*  `async getTitleHtml() `\n*  `async getTitleText()`\n*  `async getContentHtml() `\n*  `async getSelectedText() `\n\nTo focus or blur sections, use these methods\n\n* `focusTitle()`\n* `focusContent()` \n*  `blurTitleEditor() `\n*  `blurContentEditor() `\n\nTo know when the title or content are in focus, use the following methods.\n\n*  `setTitleFocusHandler(callbackHandler) `\n*  `setContentFocusHandler(callbackHandler) `\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)` \n\n### Example Usage:\n\n```javascript\n<RichTextEditor\n  ref={(r) => this.richtext = r}\n  initialTitleHTML={'Title!!'}\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![RichTextEditor](readme/editor.png)\n\n## `RichTextToolbar`\n\nThis is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichTextEditor` component.\n\nThe `RichTextToolbar` has one required property: \n\n* `getEditor()`\n\nWhich must provide a **function** that returns a `ref` to a `RichTextEditor` 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 `RichTextToolbar` 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  \t* `actions.setBold`\n  \t* `actions.setItalic`\n  \t* `actions.insertBulletsList`\n  \t* `actions.insertOrderedList`\n  \t* `actions.insertLink`\n \n* `onPressAddLink`\n* `onPressAddImage`\n\n\tFunctions called when the `addLink` or `addImage `actions are tapped. \n\t\n* `selectedButtonStyle`\n* `iconTint`\n* `selectedIconTint`\n* `unselectedButtonStyle`\n\n\tThese provide options for styling action buttons.\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\t\n\t\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* `avoidKeyboard` (Android only)\n\n\tWhether or not the toolbar should automatically move up as the keyboard is shown. This behavior is default on iOS. Default: `true`\n\t\n\n### Example Usage:\n\n```javascript\n<RichTextToolbar\n\tgetEditor={() => this.richtext}\n/>\n```\n\n![RichTextEditor](readme/toolbar.png)\n\n![RichTextEditor](readme/toolbar_selected.png)\n\n\n## `actions`\n\nThis is a set of consts of all supported actions. These will be passed in arrays to all callbacks registered with the editor using  the `registerToolbar()` method.\n\n\t{\n\t\tsetTitleHtml: 'SET_TITLE_HTML',\n\t  \tsetContentHtml: 'SET_CONTENT_HTML',\n\t  \tgetTitleHtml: 'GET_TITLE_HTML',\n\t  \tgetTitleText: 'GET_TITLE_TEXT',\n\t \tgetContentHtml: 'GET_CONTENT_HTML',\n\t  \tgetSelectedText: 'GET_SELECTED_TEXT',\n\t  \tblurTitleEditor: 'BLUR_TITLE_EDITOR',\n\t  \tblurContentEditor: 'BLUR_CONTENT_EDITOR',\n\t  \tfocusTitle: 'FOCUS_TITLE',\n\t  \tfocusContent: 'FOCUS_CONTENT',\n\t\t\n\t  \tsetBold: 'bold',\n\t  \tsetItalic: 'italic',\n\t  \tsetUnderline: 'underline',\n\t  \theading1: 'h1',\n\t  \theading2: 'h2',\n\t  \theading3: 'h3',\n\t  \theading4: 'h4',\n\t  \theading5: 'h5',\n\t  \theading6: 'h6',\n\t  \tsetParagraph: 'SET_PARAGRAPH',\n\t  \tremoveFormat: 'REMOVE_FORMAT',\n\t  \talignLeft: 'justifyLeft',\n\t  \talignCenter: 'justifyCenter',\n\t  \talignRight: 'justifyRight',\n\t  \talignFull: 'justifyFull',\n\t  \tinsertBulletsList: 'unorderedList',\n\t  \tinsertOrderedList: 'orderedList',\n\t  \tinsertLink: 'INST_LINK',\n\t  \tupdateLink: 'UPDATE_LINK',\n\t  \tinsertImage: 'INST_IMAGE',\n\t  \tsetSubscript: 'subscript',\n\t  \tsetSuperscript: 'superscript',\n\t  \tsetStrikethrough: 'strikeThrough',\n\t  \tsetHR: 'horizontalRule',\n\t  \tsetIndent: 'indent',\n\t  \tsetOutdent: 'outdent',\n\t  \tsetTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',\n\t  \tsetContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',\n\t  \tsetTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',\n\t  \tsetContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',\n\t  \tprepareInsert: 'PREPARE_INSERT',\n\t  \trestoreSelection: 'RESTORE_SELECTION',\n\t  \tsetCustomCSS: 'SET_CUSTOM_CSS',\n\t  \tsetTextColor: 'SET_TEXT_COLOR',\n\t  \tsetBackgroundColor: 'SET_BACKGROUND_COLOR',\n  \t}\n\n\n## Attribution\n\n`react-native-zss-rich-text-editor` is a wrapper around the amazing [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project. It also communicates with the editor using the awesome [react-native-webview-bridge](https://github.com/alinz/react-native-webview-bridge) project.\n","readmeFilename":"README.md"}