Merge branch 'master' into onlink-handler

.editorconfig

@@ -15,7 +15,7 @@ charset = utf-8
 # 缩进使用 tab 或者 space
 indent_style = space
 # 缩进为 space 时，缩进的字符数
-indent_size = 4
+indent_size = 2
 # 缩进为 tab 时，缩进的宽度
 # tab_width = 4
 # 换行符的类型。lf, cr, crlf三种

.prettierrc.js

@@ -1,12 +1,8 @@
-const config = {
-    //  editorconfig
-    editorconfig: true,
-
-    bracketSpacing: false,
-    jsxBracketSameLine: true,
-    singleQuote: true,
-    trailingComma: 'all',
-    arrowParens: 'avoid',
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 120,
 };
-
-module.exports = config;

CHANGELOG.md

@@ -1,13 +1,30 @@
+# 1.9.0
 
-#1.8.8
+### PR
+- [Use rect to update offset_y when pasting](https://github.com/wxik/react-native-rich-editor/pull/301)
+- [added missing autoCorrect prop](https://github.com/wxik/react-native-rich-editor/pull/277)
+- [feat(ts): add sendAction method in definition file](https://github.com/wxik/react-native-rich-editor/pull/257)
+- [improve the getEditor prop to prevent crashes](https://github.com/wxik/react-native-rich-editor/pull/255)
+- [Fix insert links](https://github.com/wxik/react-native-rich-editor/pull/247)
+- [Updating the README with custom fonts usage](https://github.com/wxik/react-native-rich-editor/pull/241)
+- [Fix nested tags when using p separator](https://github.com/wxik/react-native-rich-editor/pull/244)
+- [feat: Add injectJavascript method](https://github.com/wxik/react-native-rich-editor/pull/307)
+- [feat(toolbar): get current color, font size and background color from editor](https://github.com/wxik/react-native-rich-editor/pull/260)
+
+# 1.8.9
+### Fix
+- [autofocus to initialFocus on iOS 16](https://github.com/wxik/react-native-rich-editor/issues/304#issuecomment-1493905015)
+
+
+# 1.8.8
 ### Added
 - Add `enterKeyHint` String value to set return key type - [returnKeyType](https://reactnative.dev/docs/textinput#returnkeytype)
 
-#1.8.7
+# 1.8.7
 ### Fix
 - Fix Non-rendering problems caused by transparency  [[issues](https://github.com/wxik/react-native-rich-editor/issues/132)]
 
-#1.8.6
+# 1.8.6
 ### Changed
 - Add `autoCorrect` props of default false
 ### PR
@@ -17,17 +34,17 @@
 ### Fix
 - Fix `blockquote` Enter new line
 
-#1.8.4 - 1.8.5
-###Fix
+# 1.8.4 - 1.8.5
+### Fix
 - Fix code wrapping
 - Fix `useContainer = false` scroll
 
-#1.8.2 - 1.8.3
+# 1.8.2 - 1.8.3
 ###Fix
 - Fix Some input methods appear on the screen in English  [#154](https://github.com/wxik/react-native-rich-editor/issues/154)
 - Fix The cursor positioning problem after getting the focus in the `ScrollView`
 
-#1.8.1
+# 1.8.1
 ### Fix
 - Fix the problem that `initialHeight` does not take effect
 - Fix the problem that the `height` does not decrease after the text content is reduced
@@ -37,7 +54,7 @@
 - The `height` setting will not be less than `initialHeight`
 
 
-#1.8.0
+# 1.8.0
 
 ### This version merges with netizens to provide PR, thank you very much
 
@@ -47,7 +64,7 @@
 - Add `onCursorPosition` Enter the position of the cursor
 - Add `caretColor` cursor/selection color
 
-#1.7.0
+# 1.7.0
 ### Added
 - Add h1,h2,h3,h4,h5,h6 State mapping
 - `setFontSize` Changes the font size for the selection or at the insertion point. This requires an integer from 1-7 as a value argument.
@@ -57,7 +74,7 @@
 - [Toolbar active/inactive](https://github.com/wxik/react-native-rich-editor/issues/141)
 - Adjust the format of `insertImage` to solve the bug that the picture cannot be deleted
 
-#1.6.5
+# 1.6.5
 ### Fix
 - Fix `pasteAsPlainText`
 

README.md

@@ -66,6 +66,7 @@ The editor component. Simply place this component in your view hierarchy to rece
     - `placeholderColor`: Editor placeholder text color
     - `contentCSSText`: editor content css text（initial valid）
     - `cssText`: editor global css text（initial valid）
+    - `initialCSSText`: injects CSS at the beginning of the inline stylesheet. Useful for incorporating custom fonts (see below).
 
 * `onChange`
     Callback after editor data modification
@@ -96,6 +97,9 @@ The editor component. Simply place this component in your view hierarchy to rece
 * `useContainer`
     A boolean value that determines if a View container is wrapped around the WebView. The default value is true. If you are using your own View to wrap this library around, set this value to false.
 
+* `styleWithCSS`
+    When true, style attribute of tags are modified. Otherwise dedicated tags are created. The default value is false 
+
 * `initialHeight`
     useContainer is false by inline view of initial height
 
@@ -156,6 +160,40 @@ This method registers a function that will get called whenver the cursor positio
 ```
 
 
+### Using Custom Fonts
+In order to use custom fonts, you need to use `initialCSSText` from the `editorStyle` prop.
+
+1. Upload your font files to https://transfonter.org and check the 'base64' option. When you download the zip file, there will be a stylesheet.css file there.
+2. Take your stylesheet.css file and create a `stylesheet.js` file.
+3. Create an export and paste the contents of the css file there. e.g.:
+```javascript
+const FontFamilyStylesheet = `
+@font-face {
+    font-family: 'Your Font Family';
+    src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
+    font-weight: normal;
+}
+`;
+
+export default FontFamilyStylesheet;
+```
+4. Where you've incorporated your `RichEditor` component, import the file and utilize it.
+```javascript
+import FontFamilyStylesheet from 'stylesheet.js';
+
+const fontFamily = 'Your_Font_Family';
+const initialCSSText = { initialCSSText: `${FontFamilyStylesheet}`, contentCSSText: `font-family: ${fontFamily}` }
+<RichEditor editorStyle={initialCSSText}/>
+```
+5. Reload the app. You should now be seeing your Rich Editor content in your custom font face!
+
+
+
+For more info on how `initialCSSText` works, check out the PR [here](https://github.com/wxik/react-native-rich-editor/pull/111).
+Also, credit to [this](https://github.com/wxik/react-native-rich-editor/issues/70#issuecomment-759441101) issue comment and [his fork](https://github.com/FloMueh/react-native-rich-editor) that describes how to use the base64 encoded font file.
+
+
+
 ## `RichToolbar`
 
 This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a `RichEditor` component.
@@ -261,29 +299,31 @@ import React from "react";
 import { Text, Platform, KeyboardAvoidingView, SafeAreaView, ScrollView } from "react-native";
 import {actions, RichEditor, RichToolbar} from "react-native-pell-rich-editor";
 
+
+const handleHead = ({tintColor}) => <Text style={{color: tintColor}}>H1</Text>
 const TempScreen = () => {
 	const richText = React.useRef();
 	return (
-        <SafeAreaView>
-            <ScrollView>
-                <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}	style={{ flex: 1 }}>
-                    <Text>Description:</Text>
-                    <RichEditor
-                        ref={richText}
-                        onChange={ descriptionText => {
-                            console.log("descriptionText:", descriptionText);
-                        }}
-                    />
-                </KeyboardAvoidingView>
-            </ScrollView>
-
-            <RichToolbar
-                editor={richText}
-                actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1, ]}
-                iconMap={{ [actions.heading1]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}
-            />
-        </SafeAreaView>
-    );
+    <SafeAreaView>
+      <ScrollView>
+        <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}	style={{ flex: 1 }}>
+          <Text>Description:</Text>
+          <RichEditor
+              ref={richText}
+              onChange={ descriptionText => {
+                  console.log("descriptionText:", descriptionText);
+              }}
+          />
+        </KeyboardAvoidingView>
+      </ScrollView>
+
+      <RichToolbar
+        editor={richText}
+        actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1 ]}
+        iconMap={{ [actions.heading1]: handleHead }}
+      />
+    </SafeAreaView>
+  );
 };
 
 export default TempScreen;

examples/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

examples/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-    root: true,
-    extends: '@react-native-community',
+  root: true,
+  extends: '@react-native-community',
 };

examples/.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -29,32 +30,34 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
-# CocoaPods
+# Ruby / CocoaPods
 /ios/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

examples/.node-version

@@ -0,0 +1 @@
+18

examples/.prettierrc.js

@@ -1,12 +1,8 @@
-const config = {
-    // editorconfig
-    editorconfig: true,
-
-    bracketSpacing: false,
-    jsxBracketSameLine: true,
-    singleQuote: true,
-    trailingComma: 'all',
-    arrowParens: 'avoid',
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 120,
 };
-
-module.exports = config;

examples/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby '>= 2.6.10'
+
+gem 'cocoapods', '>= 1.11.3'