Skip to content

Commit e58d462

Browse files
rotemmizrotemmiz
committed
prepare for open source
1 parent 5ae7f18 commit e58d462

File tree

10 files changed

+294
-17
lines changed

10 files changed

+294
-17
lines changed

‎LICENSE

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
The Enhanced MIT License
2+
3+
Introduction
4+
5+
This license is exactly like the MIT License, with one exception –
6+
Any distribution of this source code or any modification thereof in source code format, must be done under the Enhanced MIT license and not under any other licenses, such as GPL.
7+
8+
The Reason
9+
10+
We believe MIT license has a bug since it allows others to use it against its nature. Our belief is that the MIT license is intended to make source code available to anyone who wants to use it without additional obligations, but we have found cases where someone takes a project licensed under MIT license, adds a few lines of source code to it, and then changes the licensing to a different, more restrictive license which is against the nature and the intent of the MIT license. By doing so, the source code released under the original MIT is no longer a true “free/open” source code, thus undermining the intention of the original creator of the source code.
11+
The concept of this Enhanced MIT license is simple and more robust – you can do what you want with this source code, exactly like any other MIT license, but if you release it again as open source (even if modified), you must release it under this Enhanced MIT license – to be clear, this is not a “viral” license, it only refers to the actual source code released under this license and not to other components interacting with it. If GPL is a viral license, this license can be described as a “robust” one as it prevents licensing changes that are against its nature and it defends its own licensing principles. The essence of the Enhanced MIT license is to prevent bullies from using open source code that is truly free and open under the MIT License and turning it into other viral and more restrictive licenses – such as GPL.
12+
13+
Q: Can I build an application with it, or DLL, or any other binary distribution, and not share the source code?
14+
A: Yes, exactly like in a regular MIT license
15+
16+
Q: Can I use the EMIT license in combination with other source codes under other licenses without being forced to change the license for the other source codes?
17+
A: Yes, this license does not require any change to other source codes, and it allows you to distribute it with other source code licensed under other licenses.
18+
19+
Q: Can I add code to this license and then change the license to something else, such as GPL? Or MIT?
20+
A: No, if you add/change the source code, the license must be kept as Enhanced MIT license.
21+
22+
Official Wording of The EMIT
23+
24+
The Enhanced MIT License (EMIT)
25+
Copyright (c) 2016 Wix.com
26+
27+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
28+
29+
1) the above copyright notice, this permission notice and the complete introduction section above shall be included in all copies or substantial portions of the Software.
30+
2) when the Software is distributed as source code, the licensee is prohibited to change the license of the Software to any “viral” copyleft-type license, such as, inter alia: GPL, LGPL, EPL, MPL, etc.
31+
32+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
33+
34+
******************

‎README.md

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
#React Native Rich Text Editor
2+
3+
A fully functional Rich Text Editor for both Android and iOS, based off the [ZSSRichTextEditor](https://github.com/nnhubbard/ZSSRichTextEditor/tree/master/ZSSRichTextEditor) project.
4+
5+
##Installation
6+
7+
`npm i --save react-native-zss-rich-text-editor`
8+
9+
On Android, add the following to the end of your `android/app/build.gradle`
10+
11+
```groovy
12+
project.afterEvaluate {
13+
apply from: '../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle';
14+
copyEditorHtmlToAppAssets(file('../../node_modules/react-native-zss-rich-text-editor'))
15+
}
16+
```
17+
18+
Also, follow instructions [here](https://github.com/alinz/react-native-webview-bridge) to add the native `react-native-webview-bridge-updated` dependency.
19+
20+
21+
##Usage
22+
23+
`react-native-zss-rich-text-editor` exports two Components and one const dictionary:
24+
25+
##`RichTextEditor`
26+
27+
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.
28+
29+
`RichTextEditor` takes the following optional props:
30+
31+
* `initialTitleHTML`
32+
33+
HTML that will be rendered in the title section as soon as the component loads.
34+
* `initialContentHTML`
35+
36+
HTML that will be rendered in the content section on load.
37+
* `titlePlaceholder`
38+
39+
Text that will be used as a placeholder when no text is present in the title section.
40+
* `contentPlaceholder `
41+
42+
Text that will be used as a placeholder when no text is present in the content section.
43+
* `customCSS `
44+
45+
Any custom CSS styles that you want to inject to the editor.
46+
* `editorInitializedCallback `
47+
48+
A function that will be called when the editor has been initialized.
49+
50+
51+
`RichTextEditor` also has methods that can be used on its `ref` to set styling at the current selection or cursor position:
52+
53+
* `setBold() `
54+
* `setItalic()`
55+
* `setUnderline() `
56+
* `heading1() `
57+
* `heading2() `
58+
* `heading3() `
59+
* `heading4() `
60+
* `heading5() `
61+
* `heading6() `
62+
* `setParagraph() `
63+
* `removeFormat() `
64+
* `alignLeft() `
65+
* `alignCenter() `
66+
* `alignRight() `
67+
* `alignFull() `
68+
* `insertBulletsList() `
69+
* `insertOrderedList() `
70+
* `insertLink(url, title) `
71+
* `updateLink(url, title) `
72+
* `insertImage(attributes) `
73+
* `setSubscript() `
74+
* `setSuperscript()`
75+
* `setStrikethrough() `
76+
* `setHR() `
77+
* `setIndent()`
78+
* `setOutdent() `
79+
* `setBackgroundColor(color) `
80+
* `setTextColor(color) `
81+
82+
This method shows a dialog for setting a link title and url, that will be inserted at the current cursor location.
83+
84+
* `showLinkDialog(optionalTitle = '', optionalUrl = '')`
85+
86+
To adjust content, placeholders or css, use these methods
87+
88+
* `setTitlePlaceholder(placeholder) `
89+
* `setContentPlaceholder(placeholder)`
90+
* `setCustomCSS(css) `
91+
* `setTitleHTML(html)`
92+
* `setContentHTML(html) `
93+
94+
These 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.
95+
96+
* `prepareInsert() `
97+
* `restoreSelection() `
98+
99+
To get the content or title HTML, use these **asynchronous** methods.
100+
101+
* `async getTitleHtml() `
102+
* `async getTitleText()`
103+
* `async getContentHtml() `
104+
* `async getSelectedText() `
105+
106+
To focus or blur sections, use these methods
107+
108+
* `focusTitle()`
109+
* `focusContent()`
110+
* `blurTitleEditor() `
111+
* `blurContentEditor() `
112+
113+
To know when the title or content are in focus, use the following methods.
114+
115+
* `setTitleFocusHandler(callbackHandler) `
116+
* `setContentFocusHandler(callbackHandler) `
117+
118+
This 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.
119+
120+
* `registerToolbar(listener)`
121+
122+
###Example Usage:
123+
124+
```javascript
125+
<RichTextEditor
126+
ref={(r) => this.richtext = r}
127+
initialTitleHTML={'Title!!'}
128+
initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
129+
editorInitializedCallback={() => this.onEditorInitialized()}
130+
/>
131+
```
132+
133+
![RichTextEditor](readme/editor.png)
134+
135+
##`RichTextToolbar`
136+
137+
This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichTextEditor` component.
138+
139+
The `RichTextToolbar` has one required property:
140+
141+
* `getEditor()`
142+
143+
Which must provide a **function** that returns a `ref` to a `RichTextEditor` component.
144+
145+
This 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`.
146+
147+
Other props supported by the `RichTextToolbar` component are:
148+
149+
* `actions`
150+
151+
An `array` of `actions` to be provided by this toolbar. The default actions are:
152+
* `actions.insertImage`
153+
* `actions.setBold`
154+
* `actions.setItalic`
155+
* `actions.insertBulletsList`
156+
* `actions.insertOrderedList`
157+
* `actions.insertLink`
158+
159+
* `onPressAddLink`
160+
* `onPressAddImage`
161+
162+
Functions called when the `addLink` or `addImage `actions are tapped.
163+
164+
* `selectedButtonStyle`
165+
* `iconTint`
166+
* `selectedIconTint`
167+
* `unselectedButtonStyle`
168+
169+
These provide options for styling action buttons.
170+
171+
* `renderAction`
172+
173+
Altenatively, you can provide a render function that will be used instead of the default, so you can fully control the tollbar design.
174+
175+
176+
* `iconMap`
177+
178+
`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.
179+
180+
181+
###Example Usage:
182+
183+
```javascript
184+
<RichTextToolbar
185+
getEditor={() => this.richtext}
186+
/>
187+
```
188+
189+
![RichTextEditor](readme/toolbar.png)
190+
191+
![RichTextEditor](readme/toolbar_selected.png)
192+
193+
194+
##`actions`
195+
196+
This 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.
197+
198+
{
199+
setTitleHtml: 'SET_TITLE_HTML',
200+
setContentHtml: 'SET_CONTENT_HTML',
201+
getTitleHtml: 'GET_TITLE_HTML',
202+
getTitleText: 'GET_TITLE_TEXT',
203+
getContentHtml: 'GET_CONTENT_HTML',
204+
getSelectedText: 'GET_SELECTED_TEXT',
205+
blurTitleEditor: 'BLUR_TITLE_EDITOR',
206+
blurContentEditor: 'BLUR_CONTENT_EDITOR',
207+
focusTitle: 'FOCUS_TITLE',
208+
focusContent: 'FOCUS_CONTENT',
209+
210+
setBold: 'bold',
211+
setItalic: 'italic',
212+
setUnderline: 'underline',
213+
heading1: 'h1',
214+
heading2: 'h2',
215+
heading3: 'h3',
216+
heading4: 'h4',
217+
heading5: 'h5',
218+
heading6: 'h6',
219+
setParagraph: 'SET_PARAGRAPH',
220+
removeFormat: 'REMOVE_FORMAT',
221+
alignLeft: 'justifyLeft',
222+
alignCenter: 'justifyCenter',
223+
alignRight: 'justifyRight',
224+
alignFull: 'justifyFull',
225+
insertBulletsList: 'unorderedList',
226+
insertOrderedList: 'orderedList',
227+
insertLink: 'INST_LINK',
228+
updateLink: 'UPDATE_LINK',
229+
insertImage: 'INST_IMAGE',
230+
setSubscript: 'subscript',
231+
setSuperscript: 'superscript',
232+
setStrikethrough: 'strikeThrough',
233+
setHR: 'horizontalRule',
234+
setIndent: 'indent',
235+
setOutdent: 'outdent',
236+
setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
237+
setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
238+
setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
239+
setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
240+
prepareInsert: 'PREPARE_INSERT',
241+
restoreSelection: 'RESTORE_SELECTION',
242+
setCustomCSS: 'SET_CUSTOM_CSS',
243+
setTextColor: 'SET_TEXT_COLOR',
244+
setBackgroundColor: 'SET_BACKGROUND_COLOR',
245+
}
246+
247+
248+
##Attribution
249+
250+
`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 (a tiny fork) of the awesome [react-native-webview-bridge](https://github.com/alinz/react-native-webview-bridge) project.

‎example/android/app/build.gradle

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,6 @@ task copyDownloadableDepsToLibs(type: Copy) {
140140
}
141141

142142
project.afterEvaluate {
143-
apply from: '../../node_modules/react-native-temp-rich-text-editor/htmlCopy.gradle';
144-
copyEditorHtmlToAppAssets(file('../../node_modules/react-native-temp-rich-text-editor'))
143+
apply from: '../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle';
144+
copyEditorHtmlToAppAssets(file('../../node_modules/react-native-zss-rich-text-editor'))
145145
}

‎example/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
View,
66
Platform
77
} from 'react-native';
8-
import {RichTextEditor, RichTextToolbar} from 'react-native-temp-rich-text-editor';
8+
import {RichTextEditor, RichTextToolbar} from 'react-native-zss-rich-text-editor';
99
import KeyboardSpacer from 'react-native-keyboard-spacer';
1010

1111
export default class RichTextExample extends Component {

‎example/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
"start": "react-native start"
77
},
88
"dependencies": {
9-
"react": "15.2.1",
10-
"react-native": "0.31.0",
11-
"react-native-temp-rich-text-editor": "*",
9+
"react": "*",
10+
"react-native": "*",
11+
"react-native-zss-rich-text-editor": "file:../",
1212
"react-native-keyboard-spacer": "^0.3.0"
1313
}
1414
}

‎package.json

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
{
2-
"name": "react-native-temp-rich-text-editor",
3-
"publishConfig": {
4-
"registry": "http://repo.dev.wix/artifactory/api/npm/npm-local/"
5-
},
2+
"name": "react-native-zss-rich-text-editor",
63
"repository": {
74
"type": "git",
8-
"url": "https://github.com/wix-private/react-native-ZSSRichTextEditor.git"
5+
"url": "https://github.com/wix/react-native-zss-rich-text-editor.git"
96
},
10-
"version": "0.1.13",
7+
"version": "1.0.0",
118
"description": "React Native Wrapper for ZSSRichTextEditor",
129
"main": "index.js",
13-
"license": "UNLICENSED",
10+
"license": "SEE LICENSE IN LICENSE",
1411
"dependencies": {
1512
"react-native-webview-bridge-updated": "^1.0.0"
1613
},

‎readme/editor.png

276 KB
Loading

‎readme/toolbar.png

32.8 KB
Loading

‎readme/toolbar_selected.png

43.5 KB
Loading

‎src/editor.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -891,10 +891,6 @@
891891
zss_editor.enabledEditingItems(e);
892892
});
893893

894-
$(window).on('scroll', function(e) {
895-
zss_editor.updateOffset();
896-
});
897-
898894
// Make sure that when we tap anywhere in the document we focus on the editor
899895
$(window).on('touchmove', function(e) {
900896
zss_editor.isDragging = true;

0 commit comments

Comments
 (0)