diff --git a/package.json b/package.json index b5e6e40c..2954ae97 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,8 @@ "description": "React Native Wrapper for ZSSRichTextEditor", "main": "index.js", "license": "SEE LICENSE IN LICENSE", - "dependencies": { - "react-native-webview-bridge-updated": "^1.0.0" - }, "peerDependencies": { "react": "*", - "react-native": ">=0.31.0" + "react-native": "*" } } diff --git a/src/RichTextEditor.js b/src/RichTextEditor.js index 26199ba3..85c1c14a 100644 --- a/src/RichTextEditor.js +++ b/src/RichTextEditor.js @@ -1,14 +1,7 @@ import React, {Component, PropTypes} from 'react'; -import WebViewBridge from 'react-native-webview-bridge-updated'; -import {InjectedMessageHandler} from './WebviewMessageHandler'; +import {handleAction} from './WebviewMessageHandler'; import {actions, messages} from './const'; -import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard, Dimensions} from 'react-native'; - -const injectScript = ` - (function () { - ${InjectedMessageHandler} - }()); -`; +import {Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, Platform, PixelRatio, Keyboard, Dimensions, WebView} from 'react-native'; const PlatformIOS = Platform.OS === 'ios'; @@ -35,7 +28,7 @@ export default class RichTextEditor extends Component { super(props); this._sendAction = this._sendAction.bind(this); this.registerToolbar = this.registerToolbar.bind(this); - this.onBridgeMessage = this.onBridgeMessage.bind(this); + this.onMessage = this.onMessage.bind(this); this._onKeyboardWillShow = this._onKeyboardWillShow.bind(this); this._onKeyboardWillHide = this._onKeyboardWillHide.bind(this); this.state = { @@ -93,9 +86,9 @@ export default class RichTextEditor extends Component { this.setEditorHeight(editorAvailableHeight); } - onBridgeMessage(str){ + onMessage(event){ try { - const message = JSON.parse(str); + const message = JSON.parse(event.nativeEvent.data); switch (message.type) { case messages.TITLE_HTML_RESPONSE: @@ -166,7 +159,7 @@ export default class RichTextEditor extends Component { console.log('FROM ZSS', message.data); break; case messages.SCROLL: - this.webviewBridge.setNativeProps({contentOffset: {y: message.data}}); + this.webView.setNativeProps({contentOffset: {y: message.data}}); break; case messages.TITLE_FOCUSED: this.titleFocusHandler && this.titleFocusHandler(); @@ -293,13 +286,12 @@ export default class RichTextEditor extends Component { const pageSource = PlatformIOS ? require('./editor.html') : { uri: 'file:///android_asset/editor.html' }; return ( - {this.webviewBridge = r}} - onBridgeMessage={(message) => this.onBridgeMessage(message)} - injectedJavaScript={injectScript} + ref={(r) => {this.webView = r}} + onMessage={(message) => this.onMessage(message)} source={pageSource} onLoad={() => this.init()} /> @@ -324,7 +316,7 @@ export default class RichTextEditor extends Component { _sendAction(action, data) { let jsonString = JSON.stringify({type: action, data}); jsonString = this.escapeJSONString(jsonString); - this.webviewBridge.sendToBridge(jsonString); + this.webView.injectJavaScript(handleAction({type: action, data})); } //------------------------------------------------------------------------------- diff --git a/src/WebviewMessageHandler.js b/src/WebviewMessageHandler.js index 05a66ea6..5f4ec489 100644 --- a/src/WebviewMessageHandler.js +++ b/src/WebviewMessageHandler.js @@ -1,176 +1,124 @@ import {actions, messages} from './const'; -export const InjectedMessageHandler = ` - if (WebViewBridge) { - WebViewBridge.onMessage = function (message) { - - const action = JSON.parse(message); - - switch(action.type) { - case '${actions.enableOnChange}': - zss_editor.enableOnChange(); - break; - case '${actions.setTitleHtml}': - zss_editor.setTitleHTML(action.data); - break; - case '${actions.toggleTitle}': - zss_editor.toggleTitle(action.data); - break; - case '${actions.hideTitle}': - zss_editor.hideTitle(action.data); - break; - case '${actions.showTitle}': - zss_editor.showTitle(action.data); - break; - case '${actions.setContentHtml}': - zss_editor.setContentHTML(action.data); - break; - case '${actions.blurTitleEditor}': - zss_editor.blurTitleEditor(); - break; - case '${actions.blurContentEditor}': - zss_editor.blurContentEditor(); - break; - case '${actions.setBold}': - zss_editor.setBold(); - break; - case '${actions.setItalic}': - zss_editor.setItalic(); - break; - case '${actions.setUnderline}': - zss_editor.setUnderline(); - break; - case '${actions.heading1}': - zss_editor.setHeading('h1'); - break; - case '${actions.heading2}': - zss_editor.setHeading('h2'); - break; - case '${actions.heading3}': - zss_editor.setHeading('h3'); - break; - case '${actions.heading4}': - zss_editor.setHeading('h4'); - break; - case '${actions.heading5}': - zss_editor.setHeading('h5'); - break; - case '${actions.heading6}': - zss_editor.setHeading('h6'); - break; - case '${actions.setParagraph}': - zss_editor.setParagraph(); - break; - case '${actions.removeFormat}': - zss_editor.removeFormating(); - break; - case '${actions.alignLeft}': - zss_editor.setJustifyLeft(); - break; - case '${actions.alignCenter}': - zss_editor.setJustifyCenter(); - break; - case '${actions.alignRight}': - zss_editor.setJustifyRight(); - break; - case '${actions.alignFull}': - zss_editor.setJustifyFull(); - break; - case '${actions.insertBulletsList}': - zss_editor.setUnorderedList(); - break; - case '${actions.insertOrderedList}': - zss_editor.setOrderedList(); - break; - case '${actions.insertLink}': - zss_editor.insertLink(action.data.url, action.data.title); - break; - case '${actions.updateLink}': - zss_editor.updateLink(action.data.url, action.data.title); - break; - case '${actions.insertImage}': - zss_editor.insertImage(action.data); - break; - case '${actions.setSubscript}': - zss_editor.setSubscript(); - break; - case '${actions.setSuperscript}': - zss_editor.setSuperscript(); - break; - case '${actions.setStrikethrough}': - zss_editor.setStrikeThrough(); - break; - case '${actions.setHR}': - zss_editor.setHorizontalRule(); - break; - case '${actions.setIndent}': - zss_editor.setIndent(); - break; - case '${actions.setOutdent}': - zss_editor.setOutdent(); - break; - case '${actions.setTitlePlaceholder}': - zss_editor.setTitlePlaceholder(action.data); - break; - case '${actions.setContentPlaceholder}': - zss_editor.setContentPlaceholder(action.data); - break; - case '${actions.getTitleHtml}': - var html = zss_editor.getTitleHTML(); - WebViewBridge.send(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html})); - break; - case '${actions.getTitleText}': - var html = zss_editor.getTitleText(); - WebViewBridge.send(JSON.stringify({type: '${messages.TITLE_TEXT_RESPONSE}', data: html})); - break; - case '${actions.getContentHtml}': - var html = zss_editor.getContentHTML(); - WebViewBridge.send(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html})); - break; - case '${actions.setTitleFocusHandler}': - zss_editor.setTitleFocusHandler(); - break; - case '${actions.setContentFocusHandler}': - zss_editor.setContentFocusHandler(); - break; - case '${actions.getSelectedText}': - var selectedText = getSelection().toString(); - WebViewBridge.send(JSON.stringify({type: '${messages.SELECTED_TEXT_RESPONSE}', data: selectedText})); - break; - case '${actions.focusContent}': - zss_editor.focusContent(); - break; - case '${actions.focusTitle}': - zss_editor.focusTitle(); - break; - case '${actions.prepareInsert}': - zss_editor.prepareInsert(); - break; - case '${actions.restoreSelection}': - zss_editor.restorerange(); - break; - case '${actions.setCustomCSS}': - zss_editor.setCustomCSS(action.data); - break; - case '${actions.setTextColor}': - zss_editor.setTextColor(action.data); - break; - case '${actions.setBackgroundColor}': - zss_editor.setBackgroundColor(action.data); - break; - case '${actions.init}': - zss_editor.init(); - break; - case '${actions.setEditorHeight}': - zss_editor.setEditorHeight(action.data); - break; - case '${actions.setFooterHeight}': - zss_editor.setFooterHeight(action.data); - break; - case '${actions.setPlatform}': - zss_editor.setPlatform(action.data); - break; - } - }; +export function handleAction (action) { + switch(action.type) { + case actions.enableOnChange: + return 'zss_editor.enableOnChange();'; + case actions.setTitleHtml: + return `zss_editor.setTitleHTML('${action.data}');`; + case actions.toggleTitle: + return `zss_editor.toggleTitle('${action.data}');`; + case actions.hideTitle: + return `zss_editor.hideTitle('${action.data}');`; + case actions.showTitle: + return `zss_editor.showTitle('${action.data}');`; + case actions.setContentHtml: + return `zss_editor.setContentHTML('${action.data}');`; + case actions.blurTitleEditor: + return 'zss_editor.blurTitleEditor();'; + case actions.blurContentEditor: + return 'zss_editor.blurContentEditor();'; + case actions.setBold: + return 'zss_editor.setBold();'; + case actions.setItalic: + return 'zss_editor.setItalic();'; + case actions.setUnderline: + return 'zss_editor.setUnderline();'; + case actions.heading1: + return 'zss_editor.setHeading("h1");'; + case actions.heading2: + return 'zss_editor.setHeading("h2");'; + case actions.heading3: + return 'zss_editor.setHeading("h3");'; + case actions.heading4: + return 'zss_editor.setHeading("h4");'; + case actions.heading5: + return 'zss_editor.setHeading("h5");'; + case actions.heading6: + return 'zss_editor.setHeading("h6");'; + case actions.setParagraph: + return 'zss_editor.setParagraph();'; + case actions.removeFormat: + return 'zss_editor.removeFormating();'; + case actions.alignLeft: + return 'zss_editor.setJustifyLeft();'; + case actions.alignCenter: + return 'zss_editor.setJustifyCenter();'; + case actions.alignRight: + return 'zss_editor.setJustifyRight();'; + case actions.alignFull: + return 'zss_editor.setJustifyFull();'; + case actions.insertBulletsList: + return 'zss_editor.setUnorderedList();'; + case actions.insertOrderedList: + return 'zss_editor.setOrderedList();'; + case actions.insertLink: + return `zss_editor.insertLink('${action.data.url}', '${action.data.title}');`; + case actions.updateLink: + return `zss_editor.updateLink('${action.data.url}', '${action.data.title}');`; + case actions.insertImage: + return `zss_editor.insertImage('${action.data}');`; + case actions.setSubscript: + return 'zss_editor.setSubscript();'; + case actions.setSuperscript: + return 'zss_editor.setSuperscript();'; + case actions.setStrikethrough: + return 'zss_editor.setStrikeThrough();'; + case actions.setHR: + return 'zss_editor.setHorizontalRule();'; + case actions.setIndent: + return 'zss_editor.setIndent();'; + case actions.setOutdent: + return 'zss_editor.setOutdent();'; + case actions.setTitlePlaceholder: + return `zss_editor.setTitlePlaceholder('${action.data}');`; + case actions.setContentPlaceholder: + return `zss_editor.setContentPlaceholder('${action.data}');`; + case actions.getTitleHtml: + return ` + var html = zss_editor.getTitleHTML(); + postMessage(JSON.stringify({type: '${messages.TITLE_HTML_RESPONSE}', data: html})); + `; + case actions.getTitleText: + return ` + var html = zss_editor.getTitleText(); + postMessage(JSON.stringify({type: '${messages.TITLE_TEXT_RESPONSE}', data: html})); + `; + case actions.getContentHtml: + return ` + var html = zss_editor.getContentHTML(); + postMessage(JSON.stringify({type: '${messages.CONTENT_HTML_RESPONSE}', data: html})); + `; + case actions.setTitleFocusHandler: + return 'zss_editor.setTitleFocusHandler();'; + case actions.setContentFocusHandler: + return 'zss_editor.setContentFocusHandler();'; + case actions.getSelectedText: + return ` + var selectedText = getSelection().toString(); + postMessage(JSON.stringify({type: '${messages.SELECTED_TEXT_RESPONSE}', data: selectedText})); + `; + case actions.focusContent: + return 'zss_editor.focusContent();'; + case actions.focusTitle: + return 'zss_editor.focusTitle();'; + case actions.prepareInsert: + return 'zss_editor.prepareInsert();'; + case actions.restoreSelection: + return 'zss_editor.restorerange();'; + case actions.setCustomCSS: + return `zss_editor.setCustomCSS('${action.data}');`; + case actions.setTextColor: + return `zss_editor.setTextColor('${action.data}');`; + case actions.setBackgroundColor: + return `zss_editor.setBackgroundColor('${action.data}');`; + case actions.init: + return 'zss_editor.init();'; + case actions.setEditorHeight: + return `zss_editor.setEditorHeight('${action.data}');`; + case actions.setFooterHeight: + return `zss_editor.setFooterHeight('${action.data}');`; + case actions.setPlatform: + return `zss_editor.setPlatform('${action.data}');`; } -`; +} diff --git a/src/editor.html b/src/editor.html index 1b30f937..64242a1d 100644 --- a/src/editor.html +++ b/src/editor.html @@ -853,7 +853,7 @@ title: anchor.text(), url: anchor.attr('href') }; - WebViewBridge.send(JSON.stringify({type: 'LINK_TOUCHED', data: link})) + postMessage(JSON.stringify({type: 'LINK_TOUCHED', data: link})) }); } @@ -874,7 +874,6 @@ } zss_editor.init = function() { - disableLineBreakIfNecessary('zss_editor_title'); disableLineBreakIfNecessary('zss_editor_content'); @@ -920,7 +919,7 @@ zss_editor.focusTitle(); setTimeout(function() { - WebViewBridge.send(JSON.stringify({type: 'ZSS_INITIALIZED'})) + postMessage(JSON.stringify({type: 'ZSS_INITIALIZED'})) }, 20); }//end @@ -932,7 +931,7 @@ }); if (selectedTextChangeMessage !== zss_editor.previousSelectedTextChangeMessage) { - WebViewBridge.send(selectedTextChangeMessage); + postMessage(selectedTextChangeMessage); zss_editor.previousSelectedTextChangeMessage = selectedTextChangeMessage; } } @@ -987,13 +986,13 @@ // This will show up in the XCode console as we are able to push this into an NSLog. zss_editor.debug = function(msg) { - WebViewBridge.send(JSON.stringify({type: 'LOG', data: msg})); + postMessage(JSON.stringify({type: 'LOG', data: msg})); } zss_editor.setScrollPosition = function() { var position = window.pageYOffset; - WebViewBridge.send(JSON.stringify({type: 'SCROLL', data: position})); + postMessage(JSON.stringify({type: 'SCROLL', data: position})); } function setPlaceholder(editorId, placeholder) { @@ -1378,7 +1377,7 @@ zss_editor.enableOnChange = function() { $('#zss_editor_content').on('input', function(){ - WebViewBridge.send(JSON.stringify({ + postMessage(JSON.stringify({ type: 'CONTENT_CHANGE', data: {content: getHtml("zss_editor_content")} })) @@ -1566,7 +1565,7 @@ }); if (selectionChangeMessage !== zss_editor.previousSelectionChangeMessage) { - WebViewBridge.send(selectionChangeMessage); + postMessage(selectionChangeMessage); zss_editor.previousSelectionChangeMessage = selectionChangeMessage; } } @@ -1625,13 +1624,13 @@ zss_editor.setTitleFocusHandler = function() { addFocusEvent('zss_editor_title', function() { - WebViewBridge.send(JSON.stringify({type: 'TITLE_FOCUSED'})) + postMessage(JSON.stringify({type: 'TITLE_FOCUSED'})) }); } zss_editor.setContentFocusHandler = function() { addFocusEvent('zss_editor_content', function() { - WebViewBridge.send(JSON.stringify({type: 'CONTENT_FOCUSED'})) + postMessage(JSON.stringify({type: 'CONTENT_FOCUSED'})) }); }