Skip to content

Commit

Permalink
Merge pull request #11 from 10play/doc-p1
Browse files Browse the repository at this point in the history 
doc p1
  • Loading branch information
@GuySerfaty
GuySerfaty authored Feb 6, 2024
2 parents 5891c89 + 49881b8 commit 40a3cf1
Show file tree
Hide file tree
Showing 13 changed files with 94 additions and 24 deletions.
10 changes: 4 additions & 6 deletions example/src/Examples/Advanced/AdvancedRichText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ const Counter = ({ editor }: { editor: EditorInstance }) => {
export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
const editor = useNativeEditor({
autofocus: true,
DEV: true,
avoidIosKeyboard: true,
customSource: AdvancedEditor,
initialContent: `<p>This is a basic example of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s sdfdsf fd dsfd ssdfd dsfdsfdsfdsfd</p>`,
plugins: [
TenTapStartKit,
Expand All @@ -62,12 +65,7 @@ export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
<SafeAreaView style={exampleStyles.fullScreen} ref={TapRef}>
<View style={exampleStyles.fullScreen}>
<Counter editor={editor} />
<RichText
avoidIosKeyboard
editor={editor}
DEV
customSource={AdvancedEditor}
/>
<RichText editor={editor} />
</View>
</SafeAreaView>
);
Expand Down
5 changes: 4 additions & 1 deletion example/src/Examples/Basic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ const exampleStyles = StyleSheet.create({
export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
const editor = useNativeEditor({
autofocus: true,
DEV: true,
avoidIosKeyboard: true,
initialContent: `<p>This is a basic <a href="https://google.com">example</a> of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s</p>`,
plugins: [
CoreBridge,
Expand All @@ -51,13 +53,14 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
HighlightBridge,
],
});

const TapRef = useRef(null);
const [activeKeyboard, setActiveKeyboard] = React.useState<string>();

return (
<SafeAreaView style={exampleStyles.fullScreen} ref={TapRef}>
<View style={exampleStyles.fullScreen}>
<RichText avoidIosKeyboard editor={editor} DEV />
<RichText editor={editor} />
</View>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
Expand Down
1 change: 1 addition & 0 deletions example/src/Examples/Compose/Compose.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const Compose = ({
navigation,
}: NativeStackScreenProps<any, any, any>) => {
const editor = useNativeEditor({
avoidIosKeyboard: true,
initialContent: MAIL_INITIAL_CONTENT,
plugins: [
CoreBridge,
Expand Down
2 changes: 1 addition & 1 deletion example/src/Examples/Compose/ComposeRichText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const ComposeRichText = ({
return (
<>
<View style={composeStyles.compose}>
<RichText editor={editor} avoidIosKeyboard />
<RichText editor={editor} />
</View>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
Expand Down
4 changes: 3 additions & 1 deletion example/src/Examples/CustomKeyboardExample/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export const CustomKeyboardExample = ({}: NativeStackScreenProps<
any
>) => {
const editor = useNativeEditor({
avoidIosKeyboard: true,
DEV: true,
plugins: [TenTapStartKit],
});
const TapRef = useRef(null);
Expand Down Expand Up @@ -62,7 +64,7 @@ export const CustomKeyboardExample = ({}: NativeStackScreenProps<
return (
<SafeAreaView style={exampleStyles.fullScreen} ref={TapRef}>
<View style={exampleStyles.fullScreen}>
<RichText avoidIosKeyboard editor={editor} DEV />
<RichText editor={editor} />
</View>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
Expand Down
3 changes: 2 additions & 1 deletion example/src/Examples/EditorStickToKeyboardExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
>) => {
const editor = useNativeEditor({
autofocus: true,
DEV: true,
plugins: [TenTapStartKit, CoreBridge],
initialContent: '<p>Initial lovely message...</p>',
});
Expand Down Expand Up @@ -103,7 +104,7 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
style={exampleStyles.keyboardAvoidingView}
>
<View style={exampleStyles.editorWrapper}>
<RichText editor={editor} DEV />
<RichText editor={editor} />
<TouchableOpacity
style={exampleStyles.sendButton}
onPress={onSendMessage}
Expand Down
20 changes: 6 additions & 14 deletions src/RichText/RichText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ import type { EditorInstance } from '../types';

interface RichTextProps extends WebViewProps {
editor: EditorInstance;
avoidIosKeyboard?: boolean;
customSource?: string;
DEV?: boolean;
}

const styles = StyleSheet.create({
Expand All @@ -37,16 +34,11 @@ const DEV_SERVER_URL = 'http://localhost:3000';
// TODO: make it a prop
const TOOLBAR_HEIGHT = 44;

export const RichText = ({
DEV,
editor,
customSource,
avoidIosKeyboard,
}: RichTextProps) => {
export const RichText = ({ editor }: RichTextProps) => {
const { keyboardHeight: iosKeyboardHeight, isKeyboardUp } = useKeyboard();
const source: WebViewProps['source'] = DEV
? { uri: DEV_SERVER_URL }
: { html: customSource || editorHTML };
const source: WebViewProps['source'] = editor.DEV
? { uri: editor.DEV_SERVER_URL || DEV_SERVER_URL }
: { html: editor.customSource || editorHTML };

const onWebviewMessage = (event: WebViewMessageEvent) => {
const { data } = event.nativeEvent;
Expand Down Expand Up @@ -80,7 +72,7 @@ export const RichText = ({
// On iOS we want to control the scroll and not use the scrollview that comes with react-native-webview
// That's way we can get better exp on scroll and scroll to element when we need to
if (
avoidIosKeyboard &&
editor.avoidIosKeyboard &&
editor.webviewRef.current &&
Platform.OS === 'ios'
) {
Expand All @@ -98,7 +90,7 @@ export const RichText = ({
editor.updateScrollThresholdAndMargin(0);
}
}
}, [avoidIosKeyboard, editor, iosKeyboardHeight, isKeyboardUp]);
}, [editor.avoidIosKeyboard, editor, iosKeyboardHeight, isKeyboardUp]);

return (
<>
Expand Down
8 changes: 8 additions & 0 deletions src/RichText/useNativeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ export const useNativeEditor = (options?: {
plugins?: TenTapBridge<any, any, any>[];
initialContent?: string;
autofocus?: boolean;
avoidIosKeyboard?: boolean;
customSource?: string;
DEV?: boolean;
DEV_SERVER_URL?: string;
}): EditorInstance => {
const webviewRef = useRef<WebView>(null);
// Till we will implement default per plugin
Expand Down Expand Up @@ -58,6 +62,10 @@ export const useNativeEditor = (options?: {
plugins: options?.plugins,
initialContent: options?.initialContent,
autofocus: options?.autofocus,
avoidIosKeyboard: options?.avoidIosKeyboard,
customSource: options?.customSource,
DEV_SERVER_URL: options?.DEV_SERVER_URL,
DEV: options?.DEV,
webviewRef,
getEditorState,
_updateEditorState,
Expand Down
4 changes: 4 additions & 0 deletions src/types/EditorNativeState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export interface EditorNativeState {}
type Subscription<T> = (cb: (val: T) => void) => () => void;

export interface EditorInstance {
avoidIosKeyboard?: boolean;
customSource?: string;
DEV?: boolean;
DEV_SERVER_URL?: string;
autofocus: boolean;
focus: (pos?: 'start' | 'end' | 'all' | number | boolean | null) => void;
initialContent?: string;
Expand Down
36 changes: 36 additions & 0 deletions website/docs/api/EditorBridge.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
sidebar_position: 2
---

# EditorBridge

interface of all the interactions you can do with the editor on the react native side, can be extendable with BrideExtension, with tentapStarterkit enable (also when simple usage) the EditorBridge will have:

| name | type | description | BrideExtension |
| ------------------------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| focus | (pos?: 'start' \| 'end' \| 'all' \| number \| boolean \| null) => void | a function that will focus the editor and make sure to open keyboard | core |
| webviewRef | RefObject\<WebView\> | a ref for the webview that show the editor | core |
| getEditorState | () => BridgeState | a function that will return the most up to date BridgeState | core |
| getContent | () => Promise\<string\> | an async function that will return the content of the editor | core |
| setContent | (content: string) => void | a function that get html as string and set the editor content by that | core |
| setSelection | (from: number, to: number) => void | a function that get position and set the selection | core |
| updateScrollThresholdAndMargin | (offset: number) => void | a function that get offset in px and change [scrollThreshold](https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold) [scrollMargin](https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin) | core |
| toggleBlockquote | () => void | will toggle bold on the editor if possible | staterKit |
| toggleCodeBlock | () => void | will toggle code block on the editor if possible | staterKit |
| toggleItalic | () => void | will toggle italic on the editor if possible | staterKit |
| toggleStrikethrough | () => void | will toggle strikethrough on the editor if possible | staterKit |
| toggleBulletList | () => void | will toggle bullet list on the editor if possible | staterKit |
| toggleOrderedList | () => void | will toggle order list on the editor if possible | staterKit |
| toggleHeading | (level: number) => void | will get level and will toggle heading on the editor if possible | staterKit |
| lift | () => void | will lift p on the editor if possible | staterKit |
| sink | () => void | will sink p on the editor if possible | staterKit |
| undo | () => void | will undo the last history transaction if possible | staterKit |
| redo | () => void | will redo the last undo transaction if possible | staterKit |
| setColor | (color: string) => void | get color string and set it for the editor | color |
| setHighlight | (color: string) => void | get color string and set highlight for the editor | highlight |
| setImage | (src: string) => void | get image url string and set image | image |
| setLink | (link: string \| null) => void | get link url as string and set link, in case of null it will remove the link | link |
| toggleTaskList | () => void | will toggle task list on the editor if possible | tasklist |
| toggleUnderline | () => void | will toggle underline on the editor if possible | underline |

<!-- toggleUnderline: () => void; -->
7 changes: 7 additions & 0 deletions website/docs/api/_category_.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"label": "API",
"position": 3,
"link": {
"type": "generated-index"
}
}
17 changes: 17 additions & 0 deletions website/docs/api/useNativeEditor.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
sidebar_position: 1
---

# useNativeEditor

a react hook that will return [EditorBridge](./EditorBridge)

| name | type | default | description |
| ---------------- | ----------------- | ------------------------ | --------------------------------------------------------------------------------------------------------- |
| bridgeExtensions | BridgeExtension[] | undefind | A list of BridgeExtensions that will be add to the editor on the native side |
| initialContent | string | undefind | initial content that will be loaded first on the editor |
| autofocus | boolean | false | when true the editor will auto focus |
| avoidIosKeyboard | boolean | false | On iOS help to handle follow cursor when the editor is fullpage and the iOS keyboard hide the bottom part |
| customSource | string | SimpleEditorBundleString | prop that can help for advance usage, an HTML string that will replace the default simple editor |
| DEV | boolean | false | prop that can help for advance usage, when true editor will be loaded by DEV_SERVER_URL |
| DEV_SERVER_URL | string | http://localhost:3000 | prop that can help for advance usage, a url string that point to the editor dev server |
1 change: 1 addition & 0 deletions website/sidebars.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const sidebars: SidebarsConfig = {
tutorialSidebar: {
Introduction: ['intro'],
Setup: ['setup/installation'],
API: ['api/useNativeEditor', 'api/EditorBridge'],
examples: ['examples/basic'],
},
};
Expand Down

0 comments on commit 40a3cf1

Please sign in to comment.