62 | );
63 | };
64 |
65 | EditorController.propTypes = {
66 | editorState: PropTypes.object,
67 | onToggleBlockType: PropTypes.func,
68 | onToggleInlineStyle: PropTypes.func
69 | };
70 |
71 | export default EditorController;
72 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/ReactNativeDraftjsExampleTests/ReactNativeDraftjsExampleTests.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
5 | * LICENSE file in the root directory of this source tree.
6 | */
7 |
8 | #import
9 | #import
10 |
11 | #import
12 | #import
13 |
14 | #define TIMEOUT_SECONDS 600
15 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
16 |
17 | @interface ReactNativeDraftjsExampleTests : XCTestCase
18 |
19 | @end
20 |
21 | @implementation ReactNativeDraftjsExampleTests
22 |
23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
24 | {
25 | if (test(view)) {
26 | return YES;
27 | }
28 | for (UIView *subview in [view subviews]) {
29 | if ([self findSubviewInView:subview matching:test]) {
30 | return YES;
31 | }
32 | }
33 | return NO;
34 | }
35 |
36 | - (void)testRendersWelcomeScreen
37 | {
38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
40 | BOOL foundElement = NO;
41 |
42 | __block NSString *redboxError = nil;
43 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
44 | if (level >= RCTLogLevelError) {
45 | redboxError = message;
46 | }
47 | });
48 |
49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
52 |
53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
55 | return YES;
56 | }
57 | return NO;
58 | }];
59 | }
60 |
61 | RCTSetLogFunction(RCTDefaultLogFunction);
62 |
63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
65 | }
66 |
67 |
68 | @end
69 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/Podfile:
--------------------------------------------------------------------------------
1 | platform :ios, '9.0'
2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
3 |
4 | target 'ReactNativeDraftjsExample' do
5 | # Pods for ReactNativeDraftjsExample
6 | pod 'React', :path => '../node_modules/react-native/'
7 | pod 'React-Core', :path => '../node_modules/react-native/React'
8 | pod 'React-DevSupport', :path => '../node_modules/react-native/React'
9 | pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
10 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
11 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
12 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
13 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
14 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
15 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
16 | pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
17 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
18 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
19 | pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
20 |
21 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
22 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
23 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
24 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
25 | pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
26 |
27 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
28 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
29 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
30 |
31 | target 'ReactNativeDraftjsExampleTests' do
32 | inherit! :search_paths
33 | # Pods for testing
34 | end
35 |
36 | use_native_modules!
37 | end
38 |
39 | target 'ReactNativeDraftjsExample-tvOS' do
40 | # Pods for ReactNativeDraftjsExample-tvOS
41 |
42 | target 'ReactNativeDraftjsExample-tvOSTests' do
43 | inherit! :search_paths
44 | # Pods for testing
45 | end
46 |
47 | end
48 |
--------------------------------------------------------------------------------
/draftjs-web/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/draftjs-web/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `npm run build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem http://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
34 |
35 | @rem Find java.exe
36 | if defined JAVA_HOME goto findJavaFromJavaHome
37 |
38 | set JAVA_EXE=java.exe
39 | %JAVA_EXE% -version >NUL 2>&1
40 | if "%ERRORLEVEL%" == "0" goto init
41 |
42 | echo.
43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
44 | echo.
45 | echo Please set the JAVA_HOME variable in your environment to match the
46 | echo location of your Java installation.
47 |
48 | goto fail
49 |
50 | :findJavaFromJavaHome
51 | set JAVA_HOME=%JAVA_HOME:"=%
52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
53 |
54 | if exist "%JAVA_EXE%" goto init
55 |
56 | echo.
57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
58 | echo.
59 | echo Please set the JAVA_HOME variable in your environment to match the
60 | echo location of your Java installation.
61 |
62 | goto fail
63 |
64 | :init
65 | @rem Get command-line arguments, handling Windows variants
66 |
67 | if not "%OS%" == "Windows_NT" goto win9xME_args
68 |
69 | :win9xME_args
70 | @rem Slurp the command line arguments.
71 | set CMD_LINE_ARGS=
72 | set _SKIP=2
73 |
74 | :win9xME_args_slurp
75 | if "x%~1" == "x" goto execute
76 |
77 | set CMD_LINE_ARGS=%*
78 |
79 | :execute
80 | @rem Setup the command line
81 |
82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
83 |
84 | @rem Execute Gradle
85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
86 |
87 | :end
88 | @rem End local scope for the variables with windows NT shell
89 | if "%ERRORLEVEL%"=="0" goto mainEnd
90 |
91 | :fail
92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
93 | rem the _cmd.exe /c_ return code!
94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
95 | exit /b 1
96 |
97 | :mainEnd
98 | if "%OS%"=="Windows_NT" endlocal
99 |
100 | :omega
101 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | ; We fork some components by platform
3 | .*/*[.]android.js
4 |
5 | ; Ignore "BUCK" generated dirs
6 | /\.buckd/
7 |
8 | ; Ignore unexpected extra "@providesModule"
9 | .*/node_modules/.*/node_modules/fbjs/.*
10 |
11 | ; Ignore duplicate module providers
12 | ; For RN Apps installed via npm, "Libraries" folder is inside
13 | ; "node_modules/react-native" but in the source repo it is in the root
14 | node_modules/react-native/Libraries/react-native/React.js
15 |
16 | ; Ignore polyfills
17 | node_modules/react-native/Libraries/polyfills/.*
18 |
19 | ; These should not be required directly
20 | ; require from fbjs/lib instead: require('fbjs/lib/warning')
21 | node_modules/warning/.*
22 |
23 | ; Flow doesn't support platforms
24 | .*/Libraries/Utilities/HMRLoadingView.js
25 |
26 | [untyped]
27 | .*/node_modules/@react-native-community/cli/.*/.*
28 |
29 | [include]
30 |
31 | [libs]
32 | node_modules/react-native/Libraries/react-native/react-native-interface.js
33 | node_modules/react-native/flow/
34 |
35 | [options]
36 | emoji=true
37 |
38 | esproposal.optional_chaining=enable
39 | esproposal.nullish_coalescing=enable
40 |
41 | module.file_ext=.js
42 | module.file_ext=.json
43 | module.file_ext=.ios.js
44 |
45 | module.system=haste
46 | module.system.haste.use_name_reducers=true
47 | # get basename
48 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
49 | # strip .js or .js.flow suffix
50 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
51 | # strip .ios suffix
52 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
53 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
54 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
55 | module.system.haste.paths.blacklist=.*/__tests__/.*
56 | module.system.haste.paths.blacklist=.*/__mocks__/.*
57 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.*
58 | module.system.haste.paths.whitelist=/node_modules/react-native/RNTester/.*
59 | module.system.haste.paths.whitelist=/node_modules/react-native/IntegrationTests/.*
60 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/react-native/react-native-implementation.js
61 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.*
62 |
63 | munge_underscores=true
64 |
65 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
66 |
67 | suppress_type=$FlowIssue
68 | suppress_type=$FlowFixMe
69 | suppress_type=$FlowFixMeProps
70 | suppress_type=$FlowFixMeState
71 |
72 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
73 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
74 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
75 |
76 | [lints]
77 | sketchy-null-number=warn
78 | sketchy-null-mixed=warn
79 | sketchy-number=warn
80 | untyped-type-import=warn
81 | nonstrict-import=warn
82 | deprecated-type=warn
83 | unsafe-getters-setters=warn
84 | inexact-spread=warn
85 | unnecessary-invariant=warn
86 | signature-verification-failure=warn
87 | deprecated-utility=error
88 |
89 | [strict]
90 | deprecated-type
91 | nonstrict-import
92 | sketchy-null
93 | unclear-type
94 | unsafe-getters-setters
95 | untyped-import
96 | untyped-type-import
97 |
98 | [version]
99 | ^0.98.0
100 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { ViewPropTypes, Platform } from "react-native";
3 | import WebView from "react-native-webview";
4 | import PropTypes from "prop-types";
5 |
6 | const draftJsHtml = require("./draftjs-html-source/draftjs-source.html");
7 |
8 | class RNDraftView extends Component {
9 | static propTypes = {
10 | style: ViewPropTypes.style,
11 | onStyleChanged: PropTypes.func,
12 | onBlockTypeChanged: PropTypes.func,
13 | defaultValue: PropTypes.string,
14 | placeholder: PropTypes.string,
15 | styleSheet: PropTypes.string,
16 | styleMap: PropTypes.object,
17 | blockRenderMap: PropTypes.object,
18 | onEditorReady: PropTypes.func
19 | };
20 |
21 | _webViewRef = React.createRef();
22 |
23 | state = {
24 | editorState: ""
25 | };
26 |
27 | executeScript = (functionName, parameter) => {
28 | this._webViewRef.current &&
29 | this._webViewRef.current.injectJavaScript(
30 | `window.${functionName}(${parameter ? `'${parameter}'` : ""});true;`
31 | );
32 | };
33 |
34 | setBlockType = blockType => {
35 | this.executeScript("toggleBlockType", blockType);
36 | };
37 |
38 | setStyle = style => {
39 | this.executeScript("toggleInlineStyle", style);
40 | };
41 |
42 | getEditorState = () => {
43 | return this.state.editorState;
44 | };
45 |
46 | _onMessage = event => {
47 | const {
48 | onStyleChanged = () => null,
49 | onBlockTypeChanged = () => null
50 | } = this.props;
51 | const { data } = event.nativeEvent;
52 | const { blockType, styles, editorState, isMounted } = JSON.parse(data);
53 | onStyleChanged(styles ? styles.split(",") : []);
54 | if (blockType) onBlockTypeChanged(blockType);
55 | if (editorState)
56 | this.setState({ editorState: editorState.replace(/(\r\n|\n|\r)/gm, "") });
57 | if (isMounted) this.widgetMounted();
58 | };
59 |
60 | widgetMounted = () => {
61 | const {
62 | placeholder,
63 | defaultValue,
64 | styleSheet,
65 | styleMap,
66 | blockRenderMap,
67 | onEditorReady = () => null
68 | } = this.props;
69 | if (defaultValue) {
70 | this.executeScript("setDefaultValue", defaultValue);
71 | }
72 | if (placeholder) {
73 | this.executeScript("setEditorPlaceholder", placeholder);
74 | }
75 | if (styleSheet) {
76 | this.executeScript("setEditorStyleSheet", styleSheet);
77 | }
78 | if (styleMap) {
79 | try {
80 | this.executeScript("setEditorStyleMap", JSON.stringify(styleMap));
81 | } catch (e) {
82 | console.error(e);
83 | }
84 | }
85 | if (blockRenderMap) {
86 | try {
87 | this.executeScript(
88 | "setEditorBlockRenderMap",
89 | JSON.stringify(blockRenderMap)
90 | );
91 | } catch (e) {
92 | console.error(e);
93 | }
94 | }
95 | onEditorReady();
96 | };
97 |
98 | focus = () => {
99 | this.executeScript("focusTextEditor");
100 | };
101 |
102 | blur = () => {
103 | this.executeScript("blurTextEditor");
104 | };
105 |
106 | render() {
107 | const { style = { flex: 1 } } = this.props;
108 | return (
109 |
122 | );
123 | }
124 | }
125 |
126 | export default RNDraftView;
127 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/ReactNativeDraftjsExample/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/App.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Sample React Native App
3 | * https://github.com/facebook/react-native
4 | *
5 | * @format
6 | * @flow
7 | */
8 |
9 | import React, { useState, useEffect } from "react";
10 | import {
11 | SafeAreaView,
12 | StyleSheet,
13 | TouchableOpacity,
14 | View,
15 | Text,
16 | Platform
17 | } from "react-native";
18 | import KeyboardSpacer from "react-native-keyboard-spacer";
19 | import RNDraftView from "react-native-draftjs-editor";
20 |
21 | const ControlButton = ({ text, action, isActive }) => {
22 | return (
23 |
30 | {text}
31 |
32 | );
33 | };
34 |
35 | const EditorToolBar = ({
36 | activeStyles,
37 | blockType,
38 | toggleStyle,
39 | toggleBlockType
40 | }) => {
41 | return (
42 |
43 | toggleStyle("BOLD")}
47 | />
48 | toggleStyle("ITALIC")}
52 | />
53 | toggleBlockType("header-one")}
57 | />
58 | toggleBlockType("unordered-list-item")}
62 | />
63 | toggleBlockType("ordered-list-item")}
67 | />
68 | toggleStyle("STRIKETHROUGH")}
72 | />
73 |
74 | );
75 | };
76 |
77 | const styleMap = {
78 | STRIKETHROUGH: {
79 | textDecoration: "line-through"
80 | }
81 | };
82 |
83 | const App = () => {
84 | const _draftRef = React.createRef();
85 | const [activeStyles, setActiveStyles] = useState([]);
86 | const [blockType, setActiveBlockType] = useState("unstyled");
87 | const [editorState, setEditorState] = useState("");
88 |
89 | const defaultValue =
90 | "
A Full fledged Text Editor
This editor is built with Draft.js. Hence should be suitable for most projects. However, Draft.js Isn’t fully compatible with mobile yet. So you might face some issues.
This is a simple implementation
It contains Text formatting and Some blocks formatting
Each for it’s own purpose
You can also do
Custom style map
Own css styles
Custom block styling
You are welcome to try it!
";
91 |
92 | const editorLoaded = () => {
93 | _draftRef.current && _draftRef.current.focus();
94 | };
95 |
96 | const toggleStyle = style => {
97 | _draftRef.current && _draftRef.current.setStyle(style);
98 | };
99 |
100 | const toggleBlockType = blockType => {
101 | _draftRef.current && _draftRef.current.setBlockType(blockType);
102 | };
103 |
104 | useEffect(() => {
105 | /**
106 | * Get the current editor state in HTML.
107 | * Usually keep it in the submit or next action to get output after user has typed.
108 | */
109 | setEditorState(_draftRef.current ? _draftRef.current.getEditorState() : "");
110 | }, [_draftRef]);
111 | console.log(editorState);
112 |
113 | return (
114 |
115 |
125 |
131 | {Platform.OS === "ios" ? : null}
132 |
133 | );
134 | };
135 |
136 | const styles = StyleSheet.create({
137 | containerStyle: {
138 | flex: 1,
139 | marginTop: 36
140 | },
141 | toolbarContainer: {
142 | height: 56,
143 | flexDirection: "row",
144 | backgroundColor: "silver",
145 | alignItems: "center",
146 | justifyContent: "space-around"
147 | },
148 | controlButtonContainer: {
149 | padding: 8,
150 | borderRadius: 2
151 | }
152 | });
153 |
154 | export default App;
155 |
--------------------------------------------------------------------------------
/draftjs-web/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, createRef, useEffect } from "react";
2 | import {
3 | Editor,
4 | EditorState,
5 | RichUtils,
6 | getDefaultKeyBinding,
7 | DefaultDraftBlockRenderMap
8 | } from "draft-js";
9 | import { stateFromHTML } from "draft-js-import-html";
10 | import { stateToHTML } from "draft-js-export-html";
11 | import { Map } from "immutable";
12 | import EditorController from "./Components/EditorController/EditorController";
13 |
14 | /**
15 | * For testing the post messages
16 | * in web
17 | */
18 | // window.ReactNativeWebView ={};
19 | // window.ReactNativeWebView.postMessage = value => console.log(value);
20 |
21 | function App() {
22 | const _draftEditorRef = createRef();
23 | const [editorState, setEditorState] = useState(EditorState.createEmpty());
24 | const [placeholder, setPlaceholder] = useState("");
25 | const [editorStyle, setEditorStyle] = useState("");
26 | const [styleMap, setStyleMap] = useState({});
27 | const [blockRenderMap, setBlockRenderMap] = useState(Map({}));
28 | const [isMounted, setMountStatus] = useState(false);
29 |
30 | useEffect(() => {
31 | if (!isMounted) {
32 | setMountStatus(true);
33 | /**
34 | * componentDidMount action goes here...
35 | */
36 | if (window.ReactNativeWebView) {
37 | window.ReactNativeWebView.postMessage(
38 | JSON.stringify({
39 | isMounted: true
40 | })
41 | );
42 | }
43 | }
44 | }, [isMounted]);
45 |
46 | const handleKeyCommand = (command, editorState) => {
47 | const newState = RichUtils.handleKeyCommand(editorState, command);
48 | if (newState) {
49 | setEditorState(newState);
50 | return true;
51 | }
52 | return false;
53 | };
54 |
55 | const mapKeyToEditorCommand = e => {
56 | switch (e.keyCode) {
57 | case 9: // TAB
58 | const newEditorState = RichUtils.onTab(
59 | e,
60 | editorState,
61 | 4 /* maxDepth */
62 | );
63 | if (newEditorState !== editorState) {
64 | setEditorState(newEditorState);
65 | }
66 | return;
67 | default:
68 | return getDefaultKeyBinding(e);
69 | }
70 | };
71 |
72 | const toggleBlockType = blockType => {
73 | setEditorState(RichUtils.toggleBlockType(editorState, blockType));
74 | };
75 |
76 | const toggleInlineStyle = inlineStyle => {
77 | setEditorState(RichUtils.toggleInlineStyle(editorState, inlineStyle));
78 | };
79 |
80 | const setDefaultValue = html => {
81 | try {
82 | if (html) {
83 | setEditorState(EditorState.createWithContent(stateFromHTML(html)));
84 | }
85 | } catch (e) {
86 | console.error(e);
87 | }
88 | };
89 |
90 | const setEditorPlaceholder = placeholder => {
91 | setPlaceholder(placeholder);
92 | };
93 |
94 | const setEditorStyleSheet = styleSheet => {
95 | setEditorStyle(styleSheet);
96 | };
97 |
98 | const setEditorStyleMap = editorStyleMap => {
99 | setStyleMap(editorStyleMap);
100 | };
101 |
102 | const focusTextEditor = () => {
103 | _draftEditorRef.current && _draftEditorRef.current.focus();
104 | };
105 |
106 | const blurTextEditor = () => {
107 | _draftEditorRef.current && _draftEditorRef.current.blur();
108 | };
109 |
110 | const setEditorBlockRenderMap = renderMapString => {
111 | try {
112 | setBlockRenderMap(Map(JSON.parse(renderMapString)));
113 | } catch (e) {
114 | setBlockRenderMap(Map({}));
115 | console.error(e);
116 | }
117 | };
118 |
119 | window.toggleBlockType = toggleBlockType;
120 | window.toggleInlineStyle = toggleInlineStyle;
121 | window.setDefaultValue = setDefaultValue;
122 | window.setEditorPlaceholder = setEditorPlaceholder;
123 | window.setEditorStyleSheet = setEditorStyleSheet;
124 | window.setEditorStyleMap = setEditorStyleMap;
125 | window.focusTextEditor = focusTextEditor;
126 | window.blurTextEditor = blurTextEditor;
127 | window.setEditorBlockRenderMap = setEditorBlockRenderMap;
128 |
129 | if (window.ReactNativeWebView) {
130 | window.ReactNativeWebView.postMessage(
131 | JSON.stringify({
132 | editorState: stateToHTML(editorState.getCurrentContent())
133 | })
134 | );
135 | }
136 |
137 | const customBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
138 |
139 | return (
140 | <>
141 |
144 |
154 |
159 |
160 | );
161 | }
162 |
163 | export default App;
164 |
--------------------------------------------------------------------------------
/draftjs-web/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/ReactNativeDraftjsExample.xcodeproj/xcshareddata/xcschemes/ReactNativeDraftjsExample.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/ReactNativeDraftjsExample.xcodeproj/xcshareddata/xcschemes/ReactNativeDraftjsExample-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # http://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 | # Determine the Java command to use to start the JVM.
86 | if [ -n "$JAVA_HOME" ] ; then
87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
88 | # IBM's JDK on AIX uses strange locations for the executables
89 | JAVACMD="$JAVA_HOME/jre/sh/java"
90 | else
91 | JAVACMD="$JAVA_HOME/bin/java"
92 | fi
93 | if [ ! -x "$JAVACMD" ] ; then
94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
95 |
96 | Please set the JAVA_HOME variable in your environment to match the
97 | location of your Java installation."
98 | fi
99 | else
100 | JAVACMD="java"
101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
102 |
103 | Please set the JAVA_HOME variable in your environment to match the
104 | location of your Java installation."
105 | fi
106 |
107 | # Increase the maximum file descriptors if we can.
108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
109 | MAX_FD_LIMIT=`ulimit -H -n`
110 | if [ $? -eq 0 ] ; then
111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
112 | MAX_FD="$MAX_FD_LIMIT"
113 | fi
114 | ulimit -n $MAX_FD
115 | if [ $? -ne 0 ] ; then
116 | warn "Could not set maximum file descriptor limit: $MAX_FD"
117 | fi
118 | else
119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
120 | fi
121 | fi
122 |
123 | # For Darwin, add options to specify how the application appears in the dock
124 | if $darwin; then
125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
126 | fi
127 |
128 | # For Cygwin, switch paths to Windows format before running java
129 | if $cygwin ; then
130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
132 | JAVACMD=`cygpath --unix "$JAVACMD"`
133 |
134 | # We build the pattern for arguments to be converted via cygpath
135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
136 | SEP=""
137 | for dir in $ROOTDIRSRAW ; do
138 | ROOTDIRS="$ROOTDIRS$SEP$dir"
139 | SEP="|"
140 | done
141 | OURCYGPATTERN="(^($ROOTDIRS))"
142 | # Add a user-defined pattern to the cygpath arguments
143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
145 | fi
146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
147 | i=0
148 | for arg in "$@" ; do
149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
151 |
152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
154 | else
155 | eval `echo args$i`="\"$arg\""
156 | fi
157 | i=$((i+1))
158 | done
159 | case $i in
160 | (0) set -- ;;
161 | (1) set -- "$args0" ;;
162 | (2) set -- "$args0" "$args1" ;;
163 | (3) set -- "$args0" "$args1" "$args2" ;;
164 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
165 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
166 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
167 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
168 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
169 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
170 | esac
171 | fi
172 |
173 | # Escape application args
174 | save () {
175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
176 | echo " "
177 | }
178 | APP_ARGS=$(save "$@")
179 |
180 | # Collect all arguments for the java command, following the shell quoting and substitution rules
181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
182 |
183 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
184 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
185 | cd "$(dirname "$0")"
186 | fi
187 |
188 | exec "$JAVACMD" "$@"
189 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/ios/Podfile.lock:
--------------------------------------------------------------------------------
1 | PODS:
2 | - boost-for-react-native (1.63.0)
3 | - DoubleConversion (1.1.6)
4 | - Folly (2018.10.22.00):
5 | - boost-for-react-native
6 | - DoubleConversion
7 | - Folly/Default (= 2018.10.22.00)
8 | - glog
9 | - Folly/Default (2018.10.22.00):
10 | - boost-for-react-native
11 | - DoubleConversion
12 | - glog
13 | - glog (0.3.5)
14 | - React (0.60.3):
15 | - React-Core (= 0.60.3)
16 | - React-DevSupport (= 0.60.3)
17 | - React-RCTActionSheet (= 0.60.3)
18 | - React-RCTAnimation (= 0.60.3)
19 | - React-RCTBlob (= 0.60.3)
20 | - React-RCTImage (= 0.60.3)
21 | - React-RCTLinking (= 0.60.3)
22 | - React-RCTNetwork (= 0.60.3)
23 | - React-RCTSettings (= 0.60.3)
24 | - React-RCTText (= 0.60.3)
25 | - React-RCTVibration (= 0.60.3)
26 | - React-RCTWebSocket (= 0.60.3)
27 | - React-Core (0.60.3):
28 | - Folly (= 2018.10.22.00)
29 | - React-cxxreact (= 0.60.3)
30 | - React-jsiexecutor (= 0.60.3)
31 | - yoga (= 0.60.3.React)
32 | - React-cxxreact (0.60.3):
33 | - boost-for-react-native (= 1.63.0)
34 | - DoubleConversion
35 | - Folly (= 2018.10.22.00)
36 | - glog
37 | - React-jsinspector (= 0.60.3)
38 | - React-DevSupport (0.60.3):
39 | - React-Core (= 0.60.3)
40 | - React-RCTWebSocket (= 0.60.3)
41 | - React-fishhook (0.60.3)
42 | - React-jsi (0.60.3):
43 | - boost-for-react-native (= 1.63.0)
44 | - DoubleConversion
45 | - Folly (= 2018.10.22.00)
46 | - glog
47 | - React-jsi/Default (= 0.60.3)
48 | - React-jsi/Default (0.60.3):
49 | - boost-for-react-native (= 1.63.0)
50 | - DoubleConversion
51 | - Folly (= 2018.10.22.00)
52 | - glog
53 | - React-jsiexecutor (0.60.3):
54 | - DoubleConversion
55 | - Folly (= 2018.10.22.00)
56 | - glog
57 | - React-cxxreact (= 0.60.3)
58 | - React-jsi (= 0.60.3)
59 | - React-jsinspector (0.60.3)
60 | - react-native-webview (6.3.1):
61 | - React
62 | - React-RCTActionSheet (0.60.3):
63 | - React-Core (= 0.60.3)
64 | - React-RCTAnimation (0.60.3):
65 | - React-Core (= 0.60.3)
66 | - React-RCTBlob (0.60.3):
67 | - React-Core (= 0.60.3)
68 | - React-RCTNetwork (= 0.60.3)
69 | - React-RCTWebSocket (= 0.60.3)
70 | - React-RCTImage (0.60.3):
71 | - React-Core (= 0.60.3)
72 | - React-RCTNetwork (= 0.60.3)
73 | - React-RCTLinking (0.60.3):
74 | - React-Core (= 0.60.3)
75 | - React-RCTNetwork (0.60.3):
76 | - React-Core (= 0.60.3)
77 | - React-RCTSettings (0.60.3):
78 | - React-Core (= 0.60.3)
79 | - React-RCTText (0.60.3):
80 | - React-Core (= 0.60.3)
81 | - React-RCTVibration (0.60.3):
82 | - React-Core (= 0.60.3)
83 | - React-RCTWebSocket (0.60.3):
84 | - React-Core (= 0.60.3)
85 | - React-fishhook (= 0.60.3)
86 | - yoga (0.60.3.React)
87 |
88 | DEPENDENCIES:
89 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
90 | - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
91 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
92 | - React (from `../node_modules/react-native/`)
93 | - React-Core (from `../node_modules/react-native/React`)
94 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
95 | - React-DevSupport (from `../node_modules/react-native/React`)
96 | - React-fishhook (from `../node_modules/react-native/Libraries/fishhook`)
97 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
98 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
99 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
100 | - react-native-webview (from `../node_modules/react-native-webview`)
101 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
102 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
103 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
104 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
105 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
106 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
107 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
108 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
109 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
110 | - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
111 | - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
112 |
113 | SPEC REPOS:
114 | https://github.com/cocoapods/specs.git:
115 | - boost-for-react-native
116 |
117 | EXTERNAL SOURCES:
118 | DoubleConversion:
119 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
120 | Folly:
121 | :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
122 | glog:
123 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
124 | React:
125 | :path: "../node_modules/react-native/"
126 | React-Core:
127 | :path: "../node_modules/react-native/React"
128 | React-cxxreact:
129 | :path: "../node_modules/react-native/ReactCommon/cxxreact"
130 | React-DevSupport:
131 | :path: "../node_modules/react-native/React"
132 | React-fishhook:
133 | :path: "../node_modules/react-native/Libraries/fishhook"
134 | React-jsi:
135 | :path: "../node_modules/react-native/ReactCommon/jsi"
136 | React-jsiexecutor:
137 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
138 | React-jsinspector:
139 | :path: "../node_modules/react-native/ReactCommon/jsinspector"
140 | react-native-webview:
141 | :path: "../node_modules/react-native-webview"
142 | React-RCTActionSheet:
143 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
144 | React-RCTAnimation:
145 | :path: "../node_modules/react-native/Libraries/NativeAnimation"
146 | React-RCTBlob:
147 | :path: "../node_modules/react-native/Libraries/Blob"
148 | React-RCTImage:
149 | :path: "../node_modules/react-native/Libraries/Image"
150 | React-RCTLinking:
151 | :path: "../node_modules/react-native/Libraries/LinkingIOS"
152 | React-RCTNetwork:
153 | :path: "../node_modules/react-native/Libraries/Network"
154 | React-RCTSettings:
155 | :path: "../node_modules/react-native/Libraries/Settings"
156 | React-RCTText:
157 | :path: "../node_modules/react-native/Libraries/Text"
158 | React-RCTVibration:
159 | :path: "../node_modules/react-native/Libraries/Vibration"
160 | React-RCTWebSocket:
161 | :path: "../node_modules/react-native/Libraries/WebSocket"
162 | yoga:
163 | :path: "../node_modules/react-native/ReactCommon/yoga"
164 |
165 | SPEC CHECKSUMS:
166 | boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
167 | DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
168 | Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
169 | glog: 1f3da668190260b06b429bb211bfbee5cd790c28
170 | React: ac23e9cc8d2d4cfe9b536b5cc0c32d19b9937bcf
171 | React-Core: 84de3cf80e31f0267c5ce0b5b482d59ce30a8a57
172 | React-cxxreact: a802a1c6b14f3de66ba032460b424c17ececd1e2
173 | React-DevSupport: ae72c4fc86c03197f007bb24404077c85f6dabc1
174 | React-fishhook: 12bd79b4461280f441937dea83f11d9fb660edfc
175 | React-jsi: c2b6e57836bcae2677a036384111dc2c58e94369
176 | React-jsiexecutor: d9023c5c199114d2b6f38ec861a4d923c73d0735
177 | React-jsinspector: 817b64f3c8a807f09d78620f4f505868d89b26f3
178 | react-native-webview: 830d41c90141f3e997ddb271fa93c19f3a619ccc
179 | React-RCTActionSheet: 9c42321fd5652515d706dd722c5a10b1970d7ec8
180 | React-RCTAnimation: fabb087dde8964c9a835a7fabd0e7e5701787913
181 | React-RCTBlob: 93f34281d9c9c9e216b25824309eed9fe22a5d41
182 | React-RCTImage: b09f30159b048eb9a0f859f8f9b0878f3311e8eb
183 | React-RCTLinking: 9dba672b3d5aadab59e93f9ab8c65e5e24b9fb73
184 | React-RCTNetwork: 4b2f706819f08b6fa15c47909985f96b80859832
185 | React-RCTSettings: 59c0eedc36b9aa9dd21cdbb5ab9591ba04132b1f
186 | React-RCTText: b026f8350c2cbe0daeb9880dd9c6e018fce0daf7
187 | React-RCTVibration: 5d9ed4a968e9d42880ddcc7c29bee3417c745408
188 | React-RCTWebSocket: 69d8565d66043f244b4129f3d7154c5689fb7d3e
189 | yoga: 843fe25849b56131275bf3e5da2c468e96f68aff
190 |
191 | PODFILE CHECKSUM: 8203dd79fcdee54742cf255207a9f604a9f99cc8
192 |
193 | COCOAPODS: 1.6.1
194 |
--------------------------------------------------------------------------------
/ReactNativeDraftjsExample/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation
19 | * entryFile: "index.android.js",
20 | *
21 | * // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
22 | * bundleCommand: "ram-bundle",
23 | *
24 | * // whether to bundle JS and assets in debug mode
25 | * bundleInDebug: false,
26 | *
27 | * // whether to bundle JS and assets in release mode
28 | * bundleInRelease: true,
29 | *
30 | * // whether to bundle JS and assets in another build variant (if configured).
31 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
32 | * // The configuration property can be in the following formats
33 | * // 'bundleIn${productFlavor}${buildType}'
34 | * // 'bundleIn${buildType}'
35 | * // bundleInFreeDebug: true,
36 | * // bundleInPaidRelease: true,
37 | * // bundleInBeta: true,
38 | *
39 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
40 | * // for example: to disable dev mode in the staging build type (if configured)
41 | * devDisabledInStaging: true,
42 | * // The configuration property can be in the following formats
43 | * // 'devDisabledIn${productFlavor}${buildType}'
44 | * // 'devDisabledIn${buildType}'
45 | *
46 | * // the root of your project, i.e. where "package.json" lives
47 | * root: "../../",
48 | *
49 | * // where to put the JS bundle asset in debug mode
50 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
51 | *
52 | * // where to put the JS bundle asset in release mode
53 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
54 | *
55 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
56 | * // require('./image.png')), in debug mode
57 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
58 | *
59 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
60 | * // require('./image.png')), in release mode
61 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
62 | *
63 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
64 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
65 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
66 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
67 | * // for example, you might want to remove it from here.
68 | * inputExcludes: ["android/**", "ios/**"],
69 | *
70 | * // override which node gets called and with what additional arguments
71 | * nodeExecutableAndArgs: ["node"],
72 | *
73 | * // supply additional arguments to the packager
74 | * extraPackagerArgs: []
75 | * ]
76 | */
77 |
78 | project.ext.react = [
79 | entryFile: "index.js",
80 | enableHermes: false, // clean and rebuild if changing
81 | ]
82 |
83 | apply from: "../../node_modules/react-native/react.gradle"
84 |
85 | /**
86 | * Set this to true to create two separate APKs instead of one:
87 | * - An APK that only works on ARM devices
88 | * - An APK that only works on x86 devices
89 | * The advantage is the size of the APK is reduced by about 4MB.
90 | * Upload all the APKs to the Play Store and people will download
91 | * the correct one based on the CPU architecture of their device.
92 | */
93 | def enableSeparateBuildPerCPUArchitecture = false
94 |
95 | /**
96 | * Run Proguard to shrink the Java bytecode in release builds.
97 | */
98 | def enableProguardInReleaseBuilds = false
99 |
100 | /**
101 | * The preferred build flavor of JavaScriptCore.
102 | *
103 | * For example, to use the international variant, you can use:
104 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
105 | *
106 | * The international variant includes ICU i18n library and necessary data
107 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
108 | * give correct results when using with locales other than en-US. Note that
109 | * this variant is about 6MiB larger per architecture than default.
110 | */
111 | def jscFlavor = 'org.webkit:android-jsc:+'
112 |
113 | /**
114 | * Whether to enable the Hermes VM.
115 | *
116 | * This should be set on project.ext.react and mirrored here. If it is not set
117 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
118 | * and the benefits of using Hermes will therefore be sharply reduced.
119 | */
120 | def enableHermes = project.ext.react.get("enableHermes", false);
121 |
122 | android {
123 | compileSdkVersion rootProject.ext.compileSdkVersion
124 |
125 | compileOptions {
126 | sourceCompatibility JavaVersion.VERSION_1_8
127 | targetCompatibility JavaVersion.VERSION_1_8
128 | }
129 |
130 | defaultConfig {
131 | applicationId "com.reactnativedraftjsexample"
132 | minSdkVersion rootProject.ext.minSdkVersion
133 | targetSdkVersion rootProject.ext.targetSdkVersion
134 | versionCode 1
135 | versionName "1.0"
136 | }
137 | splits {
138 | abi {
139 | reset()
140 | enable enableSeparateBuildPerCPUArchitecture
141 | universalApk false // If true, also generate a universal APK
142 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
143 | }
144 | }
145 | signingConfigs {
146 | debug {
147 | storeFile file('debug.keystore')
148 | storePassword 'android'
149 | keyAlias 'androiddebugkey'
150 | keyPassword 'android'
151 | }
152 | }
153 | buildTypes {
154 | debug {
155 | signingConfig signingConfigs.debug
156 | }
157 | release {
158 | // Caution! In production, you need to generate your own keystore file.
159 | // see https://facebook.github.io/react-native/docs/signed-apk-android.
160 | signingConfig signingConfigs.debug
161 | minifyEnabled enableProguardInReleaseBuilds
162 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
163 | }
164 | }
165 | // applicationVariants are e.g. debug, release
166 | applicationVariants.all { variant ->
167 | variant.outputs.each { output ->
168 | // For each separate APK per architecture, set a unique version code as described here:
169 | // https://developer.android.com/studio/build/configure-apk-splits.html
170 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
171 | def abi = output.getFilter(OutputFile.ABI)
172 | if (abi != null) { // null for the universal-debug, universal-release variants
173 | output.versionCodeOverride =
174 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
175 | }
176 |
177 | }
178 | }
179 |
180 | packagingOptions {
181 | pickFirst '**/armeabi-v7a/libc++_shared.so'
182 | pickFirst '**/x86/libc++_shared.so'
183 | pickFirst '**/arm64-v8a/libc++_shared.so'
184 | pickFirst '**/x86_64/libc++_shared.so'
185 | pickFirst '**/x86/libjsc.so'
186 | pickFirst '**/armeabi-v7a/libjsc.so'
187 | }
188 | }
189 |
190 | dependencies {
191 | implementation fileTree(dir: "libs", include: ["*.jar"])
192 | implementation "com.facebook.react:react-native:+" // From node_modules
193 |
194 | if (enableHermes) {
195 | def hermesPath = "../../node_modules/hermesvm/android/";
196 | debugImplementation files(hermesPath + "hermes-debug.aar")
197 | releaseImplementation files(hermesPath + "hermes-release.aar")
198 | } else {
199 | implementation jscFlavor
200 | }
201 | }
202 |
203 | // Run this once to be able to run the application with BUCK
204 | // puts all compile dependencies into folder libs for BUCK to use
205 | task copyDownloadableDepsToLibs(type: Copy) {
206 | from configurations.compile
207 | into 'libs'
208 | }
209 |
210 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
211 | project.afterEvaluate {
212 | apply from: '../../node_modules/react-native-draftjs-editor/copyHtml.gradle';
213 | copyEditorHtmlToAppAssets(file('../../node_modules/react-native-draftjs-editor'))
214 | }
215 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Build file of the drafjs web editor
2 | # draftjs-html-source/
3 |
4 | # OSX
5 | #
6 | .DS_Store
7 |
8 | # Xcode
9 | #
10 | build/
11 | *.pbxuser
12 | !default.pbxuser
13 | *.mode1v3
14 | !default.mode1v3
15 | *.mode2v3
16 | !default.mode2v3
17 | *.perspectivev3
18 | !default.perspectivev3
19 | xcuserdata
20 | *.xccheckout
21 | *.moved-aside
22 | DerivedData
23 | *.hmap
24 | *.ipa
25 | *.xcuserstate
26 | project.xcworkspace
27 |
28 | # Android/IntelliJ
29 | #
30 | build/
31 | .idea
32 | .gradle
33 | local.properties
34 | *.iml
35 |
36 | # node.js
37 | #
38 | node_modules/
39 | npm-debug.log
40 | yarn-error.log
41 |
42 | # BUCK
43 | buck-out/
44 | \.buckd/
45 |
46 | # fastlane
47 | #
48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
49 | # screenshots whenever they are needed.
50 | # For more information about the recommended setup visit:
51 | # https://docs.fastlane.tools/best-practices/source-control/
52 |
53 | */fastlane/report.xml
54 | */fastlane/Preview.html
55 | */fastlane/screenshots
56 |
57 | # Bundle artifact
58 | *.jsbundle
59 |
60 | # Ignore archives
61 | *.zip
62 |
63 | # Ignore env
64 | .env
65 | # Ignore changelog
66 | changeLog.txt
67 |
68 |
69 | # Created by https://www.gitignore.io/api/visualstudiocode,xcode,eclipse,android,intellij,cocoapods,androidstudio,fastlane,node
70 | # Edit at https://www.gitignore.io/?templates=visualstudiocode,xcode,eclipse,android,intellij,cocoapods,androidstudio,fastlane,node
71 |
72 | ### Android ###
73 | # Built application files
74 | *.apk
75 | *.ap_
76 | *.aab
77 |
78 | # Files for the ART/Dalvik VM
79 | *.dex
80 |
81 | # Java class files
82 | *.class
83 |
84 | # Generated files
85 | bin/
86 | gen/
87 | out/
88 | release/
89 |
90 | # Gradle files
91 | .gradle/
92 | build/
93 |
94 | # Local configuration file (sdk path, etc)
95 | local.properties
96 |
97 | # Proguard folder generated by Eclipse
98 | proguard/
99 |
100 | # Log Files
101 | *.log
102 |
103 | # Android Studio Navigation editor temp files
104 | .navigation/
105 |
106 | # Android Studio captures folder
107 | captures/
108 |
109 | # IntelliJ
110 | *.iml
111 | .idea/workspace.xml
112 | .idea/tasks.xml
113 | .idea/gradle.xml
114 | .idea/assetWizardSettings.xml
115 | .idea/dictionaries
116 | .idea/libraries
117 | # Android Studio 3 in .gitignore file.
118 | .idea/caches
119 | .idea/modules.xml
120 | # Comment next line if keeping position of elements in Navigation Editor is relevant for you
121 | .idea/navEditor.xml
122 |
123 | # Keystore files
124 | # Uncomment the following lines if you do not want to check your keystore files in.
125 | #*.jks
126 | #*.keystore
127 |
128 | # External native build folder generated in Android Studio 2.2 and later
129 | .externalNativeBuild
130 |
131 | # Google Services (e.g. APIs or Firebase)
132 | # google-services.json
133 |
134 | # Freeline
135 | freeline.py
136 | freeline/
137 | freeline_project_description.json
138 |
139 | # fastlane
140 | fastlane/report.xml
141 | fastlane/Preview.html
142 | fastlane/screenshots
143 | fastlane/test_output
144 | fastlane/readme.md
145 |
146 | # Version control
147 | vcs.xml
148 |
149 | # lint
150 | lint/intermediates/
151 | lint/generated/
152 | lint/outputs/
153 | lint/tmp/
154 | # lint/reports/
155 |
156 | ### Android Patch ###
157 | gen-external-apklibs
158 | output.json
159 |
160 | ### CocoaPods ###
161 | ## CocoaPods GitIgnore Template
162 |
163 | # CocoaPods - Only use to conserve bandwidth / Save time on Pushing
164 | # - Also handy if you have a large number of dependant pods
165 | # - AS PER https://guides.cocoapods.org/using/using-cocoapods.html NEVER IGNORE THE LOCK FILE
166 | Pods/
167 |
168 | ### Eclipse ###
169 | .metadata
170 | tmp/
171 | *.tmp
172 | *.bak
173 | *.swp
174 | *~.nib
175 | .settings/
176 | .loadpath
177 | .recommenders
178 |
179 | # External tool builders
180 | .externalToolBuilders/
181 |
182 | # Locally stored "Eclipse launch configurations"
183 | *.launch
184 |
185 | # PyDev specific (Python IDE for Eclipse)
186 | *.pydevproject
187 |
188 | # CDT-specific (C/C++ Development Tooling)
189 | .cproject
190 |
191 | # CDT- autotools
192 | .autotools
193 |
194 | # Java annotation processor (APT)
195 | .factorypath
196 |
197 | # PDT-specific (PHP Development Tools)
198 | .buildpath
199 |
200 | # sbteclipse plugin
201 | .target
202 |
203 | # Tern plugin
204 | .tern-project
205 |
206 | # TeXlipse plugin
207 | .texlipse
208 |
209 | # STS (Spring Tool Suite)
210 | .springBeans
211 |
212 | # Code Recommenders
213 | .recommenders/
214 |
215 | # Annotation Processing
216 | .apt_generated/
217 |
218 | # Scala IDE specific (Scala & Java development for Eclipse)
219 | .cache-main
220 | .scala_dependencies
221 | .worksheet
222 |
223 | ### Eclipse Patch ###
224 | # Eclipse Core
225 | .project
226 |
227 | # JDT-specific (Eclipse Java Development Tools)
228 | .classpath
229 |
230 | # Annotation Processing
231 | .apt_generated
232 |
233 | .sts4-cache/
234 |
235 | ### fastlane ###
236 | # fastlane - A streamlined workflow tool for Cocoa deployment
237 | #
238 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
239 | # screenshots whenever they are needed.
240 | # For more information about the recommended setup visit:
241 | # https://docs.fastlane.tools/best-practices/source-control/#source-control
242 |
243 | # fastlane specific
244 |
245 | # deliver temporary files
246 |
247 | # snapshot generated screenshots
248 | fastlane/screenshots/**/*.png
249 | fastlane/screenshots/screenshots.html
250 |
251 | # scan temporary files
252 |
253 | ### Intellij ###
254 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
255 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
256 |
257 | # User-specific stuff
258 | .idea/**/workspace.xml
259 | .idea/**/tasks.xml
260 | .idea/**/usage.statistics.xml
261 | .idea/**/dictionaries
262 | .idea/**/shelf
263 |
264 | # Generated files
265 | .idea/**/contentModel.xml
266 |
267 | # Sensitive or high-churn files
268 | .idea/**/dataSources/
269 | .idea/**/dataSources.ids
270 | .idea/**/dataSources.local.xml
271 | .idea/**/sqlDataSources.xml
272 | .idea/**/dynamic.xml
273 | .idea/**/uiDesigner.xml
274 | .idea/**/dbnavigator.xml
275 |
276 | # Gradle
277 | .idea/**/gradle.xml
278 | .idea/**/libraries
279 |
280 | # Gradle and Maven with auto-import
281 | # When using Gradle or Maven with auto-import, you should exclude module files,
282 | # since they will be recreated, and may cause churn. Uncomment if using
283 | # auto-import.
284 | # .idea/modules.xml
285 | # .idea/*.iml
286 | # .idea/modules
287 | # *.iml
288 | # *.ipr
289 |
290 | # CMake
291 | cmake-build-*/
292 |
293 | # Mongo Explorer plugin
294 | .idea/**/mongoSettings.xml
295 |
296 | # File-based project format
297 | *.iws
298 |
299 | # IntelliJ
300 |
301 | # mpeltonen/sbt-idea plugin
302 | .idea_modules/
303 |
304 | # JIRA plugin
305 | atlassian-ide-plugin.xml
306 |
307 | # Cursive Clojure plugin
308 | .idea/replstate.xml
309 |
310 | # Crashlytics plugin (for Android Studio and IntelliJ)
311 | com_crashlytics_export_strings.xml
312 | crashlytics.properties
313 | crashlytics-build.properties
314 | fabric.properties
315 |
316 | # Editor-based Rest Client
317 | .idea/httpRequests
318 |
319 | # Android studio 3.1+ serialized cache file
320 | .idea/caches/build_file_checksums.ser
321 |
322 | ### Intellij Patch ###
323 | # Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
324 |
325 | # *.iml
326 | # modules.xml
327 | # .idea/misc.xml
328 | # *.ipr
329 |
330 | # Sonarlint plugin
331 | .idea/sonarlint
332 |
333 | ### Node ###
334 | # Logs
335 | logs
336 | npm-debug.log*
337 | yarn-debug.log*
338 | yarn-error.log*
339 | lerna-debug.log*
340 |
341 | # Diagnostic reports (https://nodejs.org/api/report.html)
342 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
343 |
344 | # Runtime data
345 | pids
346 | *.pid
347 | *.seed
348 | *.pid.lock
349 |
350 | # Directory for instrumented libs generated by jscoverage/JSCover
351 | lib-cov
352 |
353 | # Coverage directory used by tools like istanbul
354 | coverage
355 | *.lcov
356 |
357 | # nyc test coverage
358 | .nyc_output
359 |
360 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
361 | .grunt
362 |
363 | # Bower dependency directory (https://bower.io/)
364 | bower_components
365 |
366 | # node-waf configuration
367 | .lock-wscript
368 |
369 | # Compiled binary addons (https://nodejs.org/api/addons.html)
370 | build/Release
371 |
372 | # Dependency directories
373 | node_modules/
374 | jspm_packages/
375 |
376 | # TypeScript v1 declaration files
377 | typings/
378 |
379 | # TypeScript cache
380 | *.tsbuildinfo
381 |
382 | # Optional npm cache directory
383 | .npm
384 |
385 | # Optional eslint cache
386 | .eslintcache
387 |
388 | # Optional REPL history
389 | .node_repl_history
390 |
391 | # Output of 'npm pack'
392 | *.tgz
393 |
394 | # Yarn Integrity file
395 | .yarn-integrity
396 |
397 | # dotenv environment variables file
398 | .env
399 | .env.test
400 |
401 | # parcel-bundler cache (https://parceljs.org/)
402 | .cache
403 |
404 | # next.js build output
405 | .next
406 |
407 | # nuxt.js build output
408 | .nuxt
409 |
410 | # vuepress build output
411 | .vuepress/dist
412 |
413 | # Serverless directories
414 | .serverless/
415 |
416 | # FuseBox cache
417 | .fusebox/
418 |
419 | # DynamoDB Local files
420 | .dynamodb/
421 |
422 | ### VisualStudioCode ###
423 | .vscode/*
424 | !.vscode/settings.json
425 | !.vscode/tasks.json
426 | !.vscode/launch.json
427 | !.vscode/extensions.json
428 |
429 | ### VisualStudioCode Patch ###
430 | # Ignore all local history of files
431 | .history
432 |
433 | ### Xcode ###
434 | # Xcode
435 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
436 |
437 | ## User settings
438 | xcuserdata/
439 |
440 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9)
441 | *.xcscmblueprint
442 | *.xccheckout
443 |
444 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4)
445 | DerivedData/
446 | *.moved-aside
447 | *.pbxuser
448 | !default.pbxuser
449 | *.mode1v3
450 | !default.mode1v3
451 | *.mode2v3
452 | !default.mode2v3
453 | *.perspectivev3
454 | !default.perspectivev3
455 |
456 | ## Xcode Patch
457 | *.xcodeproj/*
458 | !*.xcodeproj/project.pbxproj
459 | !*.xcodeproj/xcshareddata/
460 | !*.xcworkspace/contents.xcworkspacedata
461 | /*.gcno
462 |
463 | ### Xcode Patch ###
464 | **/xcshareddata/WorkspaceSettings.xcsettings
465 |
466 | ### AndroidStudio ###
467 | # Covers files to be ignored for android development using Android Studio.
468 |
469 | # Built application files
470 |
471 | # Files for the ART/Dalvik VM
472 |
473 | # Java class files
474 |
475 | # Generated files
476 |
477 | # Gradle files
478 | .gradle
479 |
480 | # Signing files
481 | .signing/
482 |
483 | # Local configuration file (sdk path, etc)
484 |
485 | # Proguard folder generated by Eclipse
486 |
487 | # Log Files
488 |
489 | # Android Studio
490 | /*/build/
491 | /*/local.properties
492 | /*/out
493 | /*/*/build
494 | /*/*/production
495 | *.ipr
496 | *~
497 |
498 | # Android Patch
499 |
500 | # External native build folder generated in Android Studio 2.2 and later
501 |
502 | # NDK
503 | obj/
504 |
505 | # IntelliJ IDEA
506 | /out/
507 |
508 | # User-specific configurations
509 | .idea/caches/
510 | .idea/libraries/
511 | .idea/shelf/
512 | .idea/.name
513 | .idea/compiler.xml
514 | .idea/copyright/profiles_settings.xml
515 | .idea/encodings.xml
516 | .idea/misc.xml
517 | .idea/scopes/scope_settings.xml
518 | .idea/vcs.xml
519 | .idea/jsLibraryMappings.xml
520 | .idea/datasources.xml
521 | .idea/dataSources.ids
522 | .idea/sqlDataSources.xml
523 | .idea/dynamic.xml
524 | .idea/uiDesigner.xml
525 |
526 | # OS-specific files
527 | .DS_Store
528 | .DS_Store?
529 | ._*
530 | .Spotlight-V100
531 | .Trashes
532 | ehthumbs.db
533 | Thumbs.db
534 |
535 | # Legacy Eclipse project files
536 |
537 | # Mobile Tools for Java (J2ME)
538 | .mtj.tmp/
539 |
540 | # Package Files #
541 | *.war
542 | *.ear
543 |
544 | # virtual machine crash logs (Reference: http://www.java.com/en/download/help/error_hotspot.xml)
545 | hs_err_pid*
546 |
547 | ## Plugin-specific files:
548 |
549 | # mpeltonen/sbt-idea plugin
550 |
551 | # JIRA plugin
552 |
553 | # Mongo Explorer plugin
554 | .idea/mongoSettings.xml
555 |
556 | # Crashlytics plugin (for Android Studio and IntelliJ)
557 |
558 | ### AndroidStudio Patch ###
559 |
560 | !/gradle/wrapper/gradle-wrapper.jar
561 |
562 | # End of https://www.gitignore.io/api/visualstudiocode,xcode,eclipse,android,intellij,cocoapods,androidstudio,fastlane,node
563 |
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # React Native Draft.js Editor
2 |
3 | A full fledged React Native Rich Text editor based on [Draft.js](https://draftjs.org/)!!
4 |
5 | ## Not actively maintained
6 |
7 | This project is not actively maintained (there's an implementation for TypeScript & Expo Support but not published). If you need any help, reach out to me on [Twitter](https://twitter.com/dani_akash_).
8 |
9 | ### Installation
10 |
11 | #### React Native Webview
12 | This project requires the latest version of [React Native Webview](https://github.com/react-native-community/react-native-webview) to be installed and linked to work properly.
13 |
14 | Install using npm:
15 |
16 | ```sh
17 | npm i react-native-draftjs-editor
18 | ```
19 |
20 | Install using yarn:
21 |
22 | ```sh
23 | yarn add react-native-draftjs-editor
24 | ```
25 |
26 | ### For Android alone
27 |
28 | After installation, add the following lines to the end of your `android/app/build.gradle` file
29 |
30 | ```gradle
31 | project.afterEvaluate {
32 | apply from: '../../node_modules/react-native-draftjs-editor/copyHtml.gradle';
33 | copyEditorHtmlToAppAssets(file('../../node_modules/react-native-draftjs-editor'))
34 | }
35 | ```
36 |
37 | _iOS installation does not require any additional steps._
38 |
39 | # API
40 |
41 | # RNDraftView
42 |
43 | ### Props
44 |
45 | | Name | Type | Description |
46 | | ------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
47 | | defaultValue | String | The default value with which the editor should be populated. Should be an HTML string generated from draft.js using [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html). |
48 | | onEditorReady | Function | A callback function that will be called when the editor has loaded and is ready to use. Ensure this function is called before you apply any instance methods. |
49 | | style | [React Native View Style](https://facebook.github.io/react-native/docs/style) | Use this to style the View Component that is wrapping the rich text editor. |
50 | | placeholder | String | A placeholder string for the text editor. |
51 | | ref | React Ref Object | Pass a ref here to access the instance methods. |
52 | | onStyleChanged | Function | Will call a function with an Array of styles [] in the current editor's context. Use this to keep track of the applied styles in the editor. |
53 | | onBlockTypeChanged | Function | will call a function with a block type in the current editor's context. Use this to keep track of the applied block types in the editor. |
54 | | styleMap | Object | A custom style map you can pass to add custom styling of elements in your text editor. Refer [Draft.js](https://draftjs.org/docs/advanced-topics-inline-styles#mapping-a-style-string-to-css) Docs |
55 | | styleSheet | String | A CSS string which you can pass to style the HTML in which the rich text editor is running. This can be used if you want to change fonts and background colors of the editor etc. |
56 |
57 | `styleMap` and `styleSheet` are parsed as strings and are sent over to the webview. To prevent the string parsing from failing, please do not use single quotes `'` within the `styleMap` object's keys and values or inside the `styleSheet` string.
58 |
59 | ### Instance methods
60 |
61 | | Name | Params | Description |
62 | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
63 | | focus | - | shift focus to the rich text editor |
64 | | blur | - | removes focus from the rich text editor |
65 | | setStyle | `BOLD`, `ITALIC`, `UNDERLINE` and `CODE` | call this instance method to apply a style to the selected/active text. Call this again with the same style to remove it. |
66 | | setBlockType | Supports the default block types supported by draft.js [editor](https://github.com/facebook/draft-js/blob/master/src/component/utils/DraftStyleDefault.css) | Call this instance method to apply and call it again to remove the style. |
67 | | getEditorState | - | Returns the current editor state as a HTML string exported using [draft-js-export-html](https://www.npmjs.com/package/draft-js-export-html). |
68 |
69 | ## Sample Usage
70 |
71 | ```jsx
72 | import React, { useState, useEffect } from "react";
73 | import {
74 | SafeAreaView,
75 | StyleSheet,
76 | TouchableOpacity,
77 | View,
78 | Text,
79 | Platform
80 | } from "react-native";
81 | import KeyboardSpacer from "react-native-keyboard-spacer";
82 | import RNDraftView from "react-native-draftjs-editor";
83 |
84 | const ControlButton = ({ text, action, isActive }) => {
85 | return (
86 |
93 | {text}
94 |
95 | );
96 | };
97 |
98 | const EditorToolBar = ({
99 | activeStyles,
100 | blockType,
101 | toggleStyle,
102 | toggleBlockType
103 | }) => {
104 | return (
105 |
106 | toggleStyle("BOLD")}
110 | />
111 | toggleStyle("ITALIC")}
115 | />
116 | toggleBlockType("header-one")}
120 | />
121 | toggleBlockType("unordered-list-item")}
125 | />
126 | toggleBlockType("ordered-list-item")}
130 | />
131 | toggleStyle("STRIKETHROUGH")}
135 | />
136 |
137 | );
138 | };
139 |
140 | const styleMap = {
141 | STRIKETHROUGH: {
142 | textDecoration: "line-through"
143 | }
144 | };
145 |
146 | const App = () => {
147 | const _draftRef = React.createRef();
148 | const [activeStyles, setActiveStyles] = useState([]);
149 | const [blockType, setActiveBlockType] = useState("unstyled");
150 | const [editorState, setEditorState] = useState("");
151 |
152 | const defaultValue =
153 | "
A Full fledged Text Editor
This editor is built with Draft.js. Hence should be suitable for most projects. However, Draft.js Isn’t fully compatible with mobile yet. So you might face some issues.
This is a simple implementation
It contains Text formatting and Some blocks formatting