diff --git a/README.md b/README.md
index a78c0c5..e45e7a4 100644
--- a/README.md
+++ b/README.md
@@ -51,9 +51,7 @@ export const Basic = () => {
return (
-
-
-
+
);
};
diff --git a/example/src/Examples/CustomKeyboardExample/index.tsx b/example/src/Examples/CustomKeyboardExample.tsx
similarity index 97%
rename from example/src/Examples/CustomKeyboardExample/index.tsx
rename to example/src/Examples/CustomKeyboardExample.tsx
index 252c5a1..3a6aa85 100644
--- a/example/src/Examples/CustomKeyboardExample/index.tsx
+++ b/example/src/Examples/CustomKeyboardExample.tsx
@@ -20,9 +20,9 @@ import {
ImageBridge,
EditorHelper,
CustomKeyboardExtension,
+ Images,
} from '@10play/tentap-editor';
-import { CustomKeyboard } from '../../../../src/RichText/Keyboard/CustomKeyboardBase';
-import { Images } from '../../../../src/assets';
+import { CustomKeyboard } from '../../../src/RichText/Keyboard/CustomKeyboardBase';
const keyboardStyles = StyleSheet.create({
keyboardContainer: {
diff --git a/example/src/Examples/CustomKeyboardExample/StickerKeyboard.tsx b/example/src/Examples/CustomKeyboardExample/StickerKeyboard.tsx
deleted file mode 100644
index b36657d..0000000
--- a/example/src/Examples/CustomKeyboardExample/StickerKeyboard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { CustomKeyboardExtension, EditorHelper } from '@10play/tentap-editor';
-import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
-
-const keyboardStyles = StyleSheet.create({
- keyboardContainer: {
- alignItems: 'center',
- justifyContent: 'center',
- flex: 1,
- width: '100%',
- height: '100%',
- },
-});
-
-const stickersTop = [
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707657614/7c1d68c9-126c-4967-a6a4-7252e998802d.png',
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707657441/skel_uv9mo1.png',
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707657821/ecee86ed-6291-412c-9570-2b561314d723.png',
-];
-const stickersBottom = [
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707658182/53b06114-544c-4048-869f-fedbc6d51bb9.png',
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707658198/75fe11eb-1d93-45e4-bb97-d8e26dbe4335.png',
- 'https://res.cloudinary.com/dkofpy6k6/image/upload/c_fill,g_auto,h_100,w_100/v1707658214/c6cadcf3-785c-49ec-b34d-c6d8ea544153.png',
-];
-
-const StickerRow = ({ stickers }: { stickers: string[] }) => {
- return (
-
- {stickers.map((sticker, index) => (
- EditorHelper.editorLastInstance?.setImage(sticker)}
- >
-
-
- ))}
-
- );
-};
-
-const StickerKeyboardComp = () => {
- return (
-
-
-
-
- );
-};
-
-export const StickerKeyboard = new CustomKeyboardExtension(
- 'keyboard.sticker',
- StickerKeyboardComp
-);
diff --git a/website/docs/api/BridgeExtensions.md b/website/docs/api/BridgeExtensions.md
index e6b1dbf..a67b6d5 100644
--- a/website/docs/api/BridgeExtensions.md
+++ b/website/docs/api/BridgeExtensions.md
@@ -1,97 +1,99 @@
---
-sidebar_position: 8
+sidebar_position: 6
---
# Built-in BridgeExtensions
-tentap is coming with multiple bridges extensions out of the box, in this page we will show all of them and show how they can be configured by use `BridgeExtension.configureExtension`:
+tentap comes with multiple bridges extensions out of the box, in this page we will show all of them and show their relevant configurations, which can be configured with `BridgeExtension.configureExtension`:
### CoreExtension
-use `@tiptap/extension-document` `@tiptap/extension-paragraph` `@tiptap/extension-text`
+uses `@tiptap/extension-document` `@tiptap/extension-paragraph` `@tiptap/extension-text`
-This bridge extension is including fundamentals logic that needed to interact with the editor
+This bridge extension includes fundamental logic that is needed to interact with the editor
### BlockquoteBridge
-use `@tiptap/extension-blockquote`
+uses `@tiptap/extension-blockquote`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/blockquote#settings
### CodeBridge
-use `@tiptap/extension-code`
+uses `@tiptap/extension-code`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/code#settings
### ItalicBridge
-use `@tiptap/extension-italic`
+uses `@tiptap/extension-italic`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/italic#settings
### BoldBridge
-use `@tiptap/extension-bold`
+uses `@tiptap/extension-bold`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/bold#settings
### StrikeBridge
-use `@tiptap/extension-strike`
+uses `@tiptap/extension-strike`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/strike#settings
### BulletListBridge
-use `@tiptap/extension-bullet-list` `@tiptap/extension-list-item`
+uses `@tiptap/extension-bullet-list` `@tiptap/extension-list-item`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/bullet-list#settings
### OrderedListBridge
-use `@tiptap/extension-ordered-list` `@tiptap/extension-list-item`
+uses `@tiptap/extension-ordered-list` `@tiptap/extension-list-item`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/ordered-list#settings
### HeadingBridge
-use `@tiptap/extension-heading`
+uses `@tiptap/extension-heading`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/heading#settings
### ListItemBridge
-Basically you can use only OrderedListBridge/BulletListBridge for lists, use ListItemBridge in case you want to control lift/sink of lists
-use `@tiptap/extension-list-item`
+You can use only OrderedListBridge/BulletListBridge for lists, use ListItemBridge in case you want to control lift/sink of lists
+uses `@tiptap/extension-list-item`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/list-item#settings
### HistoryBridge
-use `@tiptap/extension-history`
+uses `@tiptap/extension-history`
relevant configuration: https://tiptap.dev/docs/editor/api/extensions/history#settings
### ColorBridge
-use `@tiptap/extension-color` `@tiptap/extension-text-style`
+uses `@tiptap/extension-color` `@tiptap/extension-text-style`
+no relevant configuration
### HighlightBridge
-use `@tiptap/extension-highlight` `@tiptap/extension-text-style`
+uses `@tiptap/extension-highlight` `@tiptap/extension-text-style`
+no relevant configuration
### ImageBridge
-use `@tiptap/extension-image`
+uses `@tiptap/extension-image`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/image#settings
### LinkBridge
-use `@tiptap/extension-link`
+uses `@tiptap/extension-link`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/link#settings
### TaskListBridge
-use `@tiptap/extension-task-list` `@tiptap/extension-list-item`
+uses `@tiptap/extension-task-list` `@tiptap/extension-list-item`
relevant configuration: https://tiptap.dev/docs/editor/api/nodes/task-list#settings
### UnderlineBridge
-use `@tiptap/extension-underline`
+uses `@tiptap/extension-underline`
relevant configuration: https://tiptap.dev/docs/editor/api/marks/underline#settings
### PlaceholderBridge
-use `@tiptap/extension-placeholder`
+uses `@tiptap/extension-placeholder`
relevant configuration: https://tiptap.dev/docs/editor/api/extensions/placeholder#settings
diff --git a/website/docs/api/BridgeState.md b/website/docs/api/BridgeState.md
index bc50a11..7684454 100644
--- a/website/docs/api/BridgeState.md
+++ b/website/docs/api/BridgeState.md
@@ -1,174 +1,174 @@
---
-sidebar_position: 2
+sidebar_position: 3
---
# BridgeState
-The BridgeState is the last state of the editor webview on the native side, it's extendable by BridgeExtensions and can use by [useBridgeState](#usebridgestate)
+The BridgeState is the latest state of the editor webview on the native side, it's extendable by BridgeExtensions and is generally used with [useBridgeState](#usebridgestate)
-The list above is the interface of BridgeState in case you use TenTapStarterkit or using all the BridgeExtensions the lib export, on each prop we specify what bridgeExtension add it
+The list above is the interface of BridgeState in case you use `TenTapStarterkit` or using all the BridgeExtensions the lib exports, on each prop we specify what bridgeExtension adds it
### BridgeState properties
#### selection
`{ from: number; to: number }`
-
The selection on the editor-web
extend by [CoreBridge](./BridgeExtensions#coreextension)
+
The selection on the editor-web
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### isFocused
`boolean`
-
true when the editor is focused
extend by [CoreBridge](./BridgeExtensions#coreextension)
+
true when the editor is focused
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### isReady
`boolean`
-
true when the editor fully loaded
extend by [CoreBridge](./BridgeExtensions#coreextension)
+
true when the editor is fully loaded
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### isBlockquoteActive
`boolean`
-
true when the cursor is where blockquote is active
extend by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
+
true when the cursor is where blockquote is active
extended by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
#### canToggleBlockquote
`boolean`
-
true when it's possible to apply toggle on blockquote
extend by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
+
true when it's possible to toggle blockquote
extended by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
#### isCodeActive
`boolean`
-
true when the cursor is where code is active
extend by [CodeBridge](./BridgeExtensions#codebridge)
+
true when the cursor is where code is active
extended by [CodeBridge](./BridgeExtensions#codebridge)
#### canToggleCode
`boolean`
-
true when it's possible to apply toggle on code
extend by [CodeBridge](./BridgeExtensions#codebridge)
+
true when it's possible to toggle code
extended by [CodeBridge](./BridgeExtensions#codebridge)
#### isBoldActive
`boolean`
-
true when the cursor is where bold is active
extend by [BoldBridge](./BridgeExtensions#boldbridge)
+
true when the cursor is where bold is active
extended by [BoldBridge](./BridgeExtensions#boldbridge)
#### canToggleBold
`boolean`
-
true when it's possible to apply toggle on bold
extend by [BoldBridge](./BridgeExtensions#boldbridge)
+
true when it's possible to toggle bold
extended by [BoldBridge](./BridgeExtensions#boldbridge)
#### isItalicActive
`boolean`
-
true when the cursor is where italic is active
extend by [ItalicBridge](./BridgeExtensions#italicbridge)
+
true when the cursor is where italic is active
extended by [ItalicBridge](./BridgeExtensions#italicbridge)
#### canToggleItalic
`boolean`
-
true when it's possible to apply toggle on italic
extend by [ItalicBridge](./BridgeExtensions#italicbridge)
+
true when it's possible to toggle italic
extended by [ItalicBridge](./BridgeExtensions#italicbridge)
#### isUnderlineActive
`boolean`
-
true when the cursor is where underline is active
extend by [ItalicBridge](./BridgeExtensions#italicbridge)
+
true when the cursor is where underline is active
extended by [UnderlineBridge](./BridgeExtensions#underlinebridge)
#### canToggleUnderline
`boolean`
-
true when it's possible to apply underline on italic
extend by [ItalicBridge](./BridgeExtensions#italicbridge)
+
true when it's possible to toggle underline
extended by [UnderlineBridge](./BridgeExtensions#underlinebridge)
#### isStrikeActive
`boolean`
-
true when the cursor is where Strike is active
extend by [StrikeBridge](./BridgeExtensions#strikebridge)
+
true when the cursor is where Strike is active
extended by [StrikeBridge](./BridgeExtensions#strikebridge)
#### canToggleStrike
`boolean`
-
true when it's possible to apply toggle on Strike
extend by [StrikeBridge](./BridgeExtensions#strikebridge)
+
true when it's possible to toggle Strike
extended by [StrikeBridge](./BridgeExtensions#strikebridge)
#### isBulletListActive
`boolean`
-
true when the cursor is where bullet list is active
extend by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
+
true when the cursor is where bullet list is active
extended by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
#### canToggleBulletList
`boolean`
-
true when it's possible to apply toggle on bullet list
extend by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
+
true when it's possible to toggle bullet list
extended by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
#### isOrderedListActive
`boolean`
-
true when the cursor is where ordered list is active
extend by [OrderedListBridge](./BridgeExtensions#orderedlistbridge)
+
true when the cursor is where ordered list is active
extended by [OrderedListBridge](./BridgeExtensions#orderedlistbridge)
#### canToggleOrderedList
`boolean`
-
true when it's possible to apply toggle on ordered list
extend by [OrderedListBridge](./BridgeExtensions#orderedlistbridge)
+
true when it's possible to toggle ordered list
extended by [OrderedListBridge](./BridgeExtensions#orderedlistbridge)
#### isTaskListActive
`boolean`
-
true when the cursor is where task list is active
extend by [TaskListBridge](./BridgeExtensions#tasklistbridge)
+
true when the cursor is where task list is active
extended by [TaskListBridge](./BridgeExtensions#tasklistbridge)
#### canToggleTaskList
`boolean`
-
true when it's possible to apply toggle on task list
extend by [TaskListBridge](./BridgeExtensions#tasklistbridge)
+
true when it's possible to toggle task list
extended by [TaskListBridge](./BridgeExtensions#tasklistbridge)
#### headingLevel
`number | undefined`
-
undefined when no heading apply, number of the heading level
extend by [HeadingBridge](./BridgeExtensions#headingbridge)
+
undefined when no heading is applied, number of the heading level
extended by [HeadingBridge](./BridgeExtensions#headingbridge)
#### canToggleHeading
`boolean`
-
true when it's possible to apply toggle on heading
extend by [HeadingBridge](./BridgeExtensions#headingbridge)
+
true when it's possible to toggle heading
extended by [HeadingBridge](./BridgeExtensions#headingbridge)
#### canLift
`boolean`
-
true when it's possible to apply lift on list item
extend by [HeadingBridge](./BridgeExtensions#headingbridge)
+
true when it's possible to lift list item
extended by [ListItemBridge](./BridgeExtensions#listitembridge)
#### canSink
`boolean`
-
true when it's possible to apply sink on list item
extend by [HeadingBridge](./BridgeExtensions#headingbridge)
+
true when it's possible to sink a list item
extended by [ListItemBridge](./BridgeExtensions#listitembridge)
#### canUndo
`boolean`
-
true when it's possible to apply undo on the doc history stack
extend by [HistoryBridge](./BridgeExtensions#historybridge)
+
true when it's possible to undo the doc history stack
extended by [HistoryBridge](./BridgeExtensions#historybridge)
#### canRedo
`boolean`
-
true when it's possible to apply redo on the doc history stack
extend by [HistoryBridge](./BridgeExtensions#historybridge)
+
true when it's possible to redo the doc history stack
extended by [HistoryBridge](./BridgeExtensions#historybridge)
#### activeColor
`string | undefined`
-
undefined when no heading apply, string of the color that active on the selection position
extend by [ColorBridge](./BridgeExtensions#colorbridge)
+
undefined when no color is applied, string of the color that is active on the selection
extended by [ColorBridge](./BridgeExtensions#colorbridge)
#### activeHighlight
`string | undefined`
-
undefined when no heading apply, string of the highlight that active on the selection position
extend by [HighlightBridge](./BridgeExtensions#highlightbridge)
+
undefined when no highlight is applied, string of the highlight that active on the selection
extended by [HighlightBridge](./BridgeExtensions#highlightbridge)
#### isLinkActive
`boolean`
-
true when the cursor is where a link
extend by [LinkBridge](./BridgeExtensions#linkbridge)
+
true when the link is in the selection
extended by [LinkBridge](./BridgeExtensions#linkbridge)
#### canSetLink
`boolean`
-
true when it's possible to add link, for example when there is no selection it not possible
extend by [LinkBridge](./BridgeExtensions#linkbridge)
+
true when it's possible to add link, for example when there is no selection it not possible
extended by [LinkBridge](./BridgeExtensions#linkbridge)
#### activeLink
`string | undefined`
-
undefined when no heading apply, string of the link that active on the selection position
extend by [LinkBridge](./BridgeExtensions#linkbridge)
+
undefined when there is no link, string of the link that active on the selection position
extended by [LinkBridge](./BridgeExtensions#linkbridge)
### useBridgeState
diff --git a/website/docs/api/RichText.md b/website/docs/api/Components.md
similarity index 73%
rename from website/docs/api/RichText.md
rename to website/docs/api/Components.md
index ae23283..163cf13 100644
--- a/website/docs/api/RichText.md
+++ b/website/docs/api/Components.md
@@ -1,12 +1,12 @@
---
-sidebar_position: 3
+sidebar_position: 4
---
-# React components
+# Components
## RichText
-a react component that will render the webview editor, help to locate the editor wherever you wold like, inside a view that stick to your keyboard for example see [chat example](https://10play.dev)
+a components that wraps the webview that renders the editor
props:
@@ -14,6 +14,8 @@ props:
| ------ | -------------- | ------- | ----------------------------------------------------------------------- |
| editor | `EditorBridge` | | The bridge instance that created with [useEditorBridge](./EditorBridge) |
+you can also override any of the regular [WebView props](https://github.com/react-native-webview/react-native-webview/blob/HEAD/docs/Reference.md) although this is not recommended
+
## Toolbar
A react component of a basic Toolbar that include these features:
@@ -48,11 +50,15 @@ props:
| name | type | default | description |
| ------ | --------------- | --------------------- | ----------------------------------------------------------------------- |
| editor | `EditorBridge` | | The bridge instance that created with [useEditorBridge](./EditorBridge) |
-| hidden | `boolean` | | a prop for control if toolbar shown |
-| items | `ToolbarItem[]` | DEFAULT_TOOLBAR_ITEMS | array of ToolbarItem that will be shown on the toolbar |
+| hidden | `boolean` | | a prop to control if toolbar shown |
+| items | `ToolbarItem[]` | DEFAULT_TOOLBAR_ITEMS | array of ToolbarItem's that will be shown on the toolbar |
+
+See how we add a custom toolbar item in the [color keyboard example](../examples/colorKeyboard.md)
### ToolbarItem
+The item rendered by the toolbar component
+
```ts
export interface ToolbarItem {
onPress: ({ editor, editorState }: ArgsToolbarCB) => () => void;
diff --git a/website/docs/api/CustomKeyboardUtils.md b/website/docs/api/CustomKeyboardUtils.md
index b6fd342..c6db516 100644
--- a/website/docs/api/CustomKeyboardUtils.md
+++ b/website/docs/api/CustomKeyboardUtils.md
@@ -5,7 +5,7 @@ sidebar_position: 5
# Custom Keyboard Utils
We believe that custom keyboard can be a game changer when it comes to editing experience, that's why we decided that this ability should be part of this lib, in this page we will show the APIs of the custom keyboard utils.
-For examples and better guide please see: [Create custom keyboard](../examples/customKeyboard) or [Using the ColorKeyboard](../examples/colorKeyboard)
+For examples please see: [Create custom keyboard](../examples/customKeyboard) or [Using the ColorKeyboard](../examples/colorKeyboard)
### CustomKeyboard
@@ -19,31 +19,33 @@ Important for iOS where ref of some View is needed for keyboard manipulation
#### keyboards
`CustomKeyboardExtension[]`
-list of CustomKeyboardExtension
+list of [CustomKeyboardExtension's](#customkeyboardextension)
#### setActiveKeyboardID
`(id: string | undefined) => void`
-Needed so the keyboard will be able to close itself
+a function that changes or unsets the active keyboard
#### activeKeyboardID
`string`
-The active custom keyboard id
+the active custom keyboard id
#### editor
`EditorBridge`
-Needed so when you close custom keyboard we can focus the editor again
+the editors `EditorBridge` instance
#### rootBackground - `IOS ONLY`
-The background of the RCTRootView used to render the custom keyboard
+The background of the `RCTRootView` used to render the custom keyboard
This is helpful when you are using a custom theme
### CustomKeyboardExtension
-A js class that will register new app with the customkeyboard id - it's important to understand that it will be a septate app so state management and other will not work on the custom component as you expected,
+A class that will register a new component with the customkeyboard id
+
+> It's important to note that the custom keyboard component does not work as a regular react component in your app, and is rendered on IOS in a separate RCTRootView.
#### id
@@ -53,4 +55,4 @@ a unique key for the custom keyboard
#### comp
`ComponentType`
-The custom keyboard react native view
+The custom keyboard component
diff --git a/website/docs/api/EditorBridge.md b/website/docs/api/EditorBridge.md
index ebc8ecb..a91a3e0 100644
--- a/website/docs/api/EditorBridge.md
+++ b/website/docs/api/EditorBridge.md
@@ -4,113 +4,135 @@ 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:
+An Interface of all the commands you can do with the editor on the react native side, can be extended with a [BrideExtension](./BridgeExtensions.md). With all of the bridges included in `tentapStarterKit` the EditorBridge will have:
#### focus
`(pos?: 'start' \| 'end' \| 'all' \| number \| boolean \| null) => void`
-a function that will focus the editor and make sure to open keyboard
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a function that will focus the editor and open the keyboard
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### blur
-a function that will blur the editor and close the keyboard
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a function that will blur the editor and close the keyboard
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### webviewRef
`RefObject\`
-a ref for the webview that show the editor
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a ref for the webview that renders the editor
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### getEditorState
`() => BridgeState`
-a function that will return the most up to date BridgeState
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a function that will return the most up to date BridgeState
extended by [CoreBridge](./BridgeExtensions#coreextension)
-#### getContent
+#### getHTML
`() => Promise\`
-an async function that will return the content of the editor
extend by [CoreBridge](./BridgeExtensions#coreextension)
+an async function that will return the content of the editor in html format
extended by [CoreBridge](./BridgeExtensions#coreextension)
+
+#### getText
+
+`() => Promise\`
+an async function that will return the content of the editor in text format
extended by [CoreBridge](./BridgeExtensions#coreextension)
+
+#### getJSON
+
+`() => Promise\`
+an async function that will return the content of the editor in json format
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### setContent
`(content: string) => void`
-a function that get html as string and set the editor content by that
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a function that get's html as string and set set's it as the editors content
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### setSelection
`(from: number, to: number) => void`
-a function that get position and set the selection
extend by [CoreBridge](./BridgeExtensions#coreextension)
+sets the selection of the editor
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### 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)
extend by [CoreBridge](./BridgeExtensions#coreextension)
+a function that gets offset in px and changes [scrollThreshold](https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold) [scrollMargin](https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin)
extended by [CoreBridge](./BridgeExtensions#coreextension)
#### toggleBlockquote
-`() => void`
will toggle bold on the editor if possible
extend by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
+`() => void`
will toggle bold on the editor if possible
extended by [BlockquoteBridge](./BridgeExtensions#blockquotebridge)
#### toggleCode
-`() => void`
will toggle code block on the editor if possible
extend by [CodeBridge](./BridgeExtensions#codebridge)
+`() => void`
will toggle code block on the editor if possible
extended by [CodeBridge](./BridgeExtensions#codebridge)
#### toggleItalic
-`() => void`
will toggle italic on the editor if possible
extend by [ItalicBridge](./BridgeExtensions#italicbridge)
+`() => void`
will toggle italic on the editor if possible
extended by [ItalicBridge](./BridgeExtensions#italicbridge)
#### toggleStrikethrough
-`() => void`
will toggle strikethrough on the editor if possible
extend by [StrikeBridge](./BridgeExtensions#strikebridge)
+`() => void`
will toggle strikethrough on the editor if possible
extended by [StrikeBridge](./BridgeExtensions#strikebridge)
#### toggleBulletList
-`() => void`
will toggle bullet list on the editor if possible
extend by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
+`() => void`
will toggle bullet list on the editor if possible
extended by [BulletListBridge](./BridgeExtensions#bulletlistbridge)
#### toggleOrderedList
-`() => void`
will toggle order list on the editor if possible
extend by [OrderListBridge](./BridgeExtensions#orderedlistbridge)
+`() => void`
will toggle order list on the editor if possible
extended by [OrderedListBridge](./BridgeExtensions#orderedlistbridge)
#### toggleHeading
-`(level: number) => void`
will get level and will toggle heading on the editor if possible
extend by [HeadingBridge](./BridgeExtensions#headingbridge)
+`(level: number) => void`
gets level and and toggles heading on the editor if possible
extended by [HeadingBridge](./BridgeExtensions#headingbridge)
#### lift
-`() => void`
will lift p on the editor if possible
extend by [ListItemBridge](./BridgeExtensions#listitembridge)
+`() => void`
will lift p on the editor if possible
extended by [ListItemBridge](./BridgeExtensions#listitembridge)
#### sink
-`() => void`
will sink p on the editor if possible
extend by [ListItemBridge](./BridgeExtensions#listitembridge)
+`() => void`
will sink p on the editor if possible
extended by [ListItemBridge](./BridgeExtensions#listitembridge)
#### undo
-`() => void`
will undo the last history transaction if possible
extend by [HistoryBridge](./BridgeExtensions#historybridge)
+`() => void`
will undo the last history transaction if possible
extended by [HistoryBridge](./BridgeExtensions#historybridge)
#### redo
-`() => void`
will redo the last undo transaction if possible
extend by [HistoryBridge](./BridgeExtensions#historybridge)
+`() => void`
will redo the last undo transaction if possible
extended by [HistoryBridge](./BridgeExtensions#historybridge)
#### setColor
-`(color: string) => void`
get color string and set it for the editor
extend by [ColorBridge](./BridgeExtensions#colorbridge)
+`(color: string) => void`
sets text color
extended by [ColorBridge](./BridgeExtensions#colorbridge)
+
+#### unsetColor
+
+`() => void`
un-sets text color
extended by [ColorBridge](./BridgeExtensions#colorbridge)
#### setHighlight
-`(color: string) => void`
get color string and set highlight for the editor
extend by [HighlightBridge](./BridgeExtensions#highlightbridge)
+`(color: string) => void`
sets text highlight
extended by [HighlightBridge](./BridgeExtensions#highlightbridge)
+
+#### toggleHighlight
+
+`(color: string) => void`
toggles text highlight
extended by [HighlightBridge](./BridgeExtensions#highlightbridge)
+
+#### unsetHighlight
+
+`(color: string) => void`
un-sets text highlight
extended by [HighlightBridge](./BridgeExtensions#highlightbridge)
#### setImage
-`(src: string) => void`
get image url string and set image
extend by [ImageBridge](./BridgeExtensions#imagebridge)
+`(src: string) => void`
gets image url string and sets image
extended by [ImageBridge](./BridgeExtensions#imagebridge)
#### setLink
-`(link: string \| null) => void`
get link url as string and set link, in case of null it will remove the link
extend by [LinkBridge](./BridgeExtensions#linkbridge)
+`(link: string \| null) => void`
gets link url as string and sets link, in case of null it will remove the link
extended by [LinkBridge](./BridgeExtensions#linkbridge)
#### toggleTaskList
-`() => void`
will toggle task list on the editor if possible
extend by [TaskListBridge](./BridgeExtensions#tasklistbridge)
+`() => void`
will toggle task list on the editor if possible
extended by [TaskListBridge](./BridgeExtensions#tasklistbridge)
#### toggleUnderline
-`() => void`
will toggle underline on the editor if possible
extend by [UnderlineBridge](./BridgeExtensions#underlinebridge)
+`() => void`
will toggle underline on the editor if possible
extended by [UnderlineBridge](./BridgeExtensions#underlinebridge)
diff --git a/website/docs/api/useEditorBridge.md b/website/docs/api/useEditorBridge.md
index d08bafc..e309ddc 100644
--- a/website/docs/api/useEditorBridge.md
+++ b/website/docs/api/useEditorBridge.md
@@ -10,7 +10,7 @@ a react hook that will return [EditorBridge](./EditorBridge)
`BridgeExtension[]`
default: `undefined`
-A list of BridgeExtensions that will be add to the editor on the native side
+A list of BridgeExtensions that will be added to the editor on the native side
#### initialContent
@@ -24,32 +24,32 @@ initial content that will be loaded first on the editor
default: `false`
when true the editor will auto focus
-#### avoidIosKeyboard
+#### avoidIosKeyboard `IOS ONLY`
`boolean`
default: `false`
-On iOS help to handle follow cursor when the editor is fullpage and the iOS keyboard hide the bottom part
+This helps us keep the cursor right above the keyboard when the editor is full-screen and the virtual keyboard hides the bottom portion of the editor.
#### theme
-`EditorTheme`
-default: `defaultEditorTheme` (light theme)
-this prop can be used to customize the libs components see the [theme example](../examples/customTheme.md)
+`EditorTheme`
+default: `defaultEditorTheme` (light theme)
+this prop can be used to customize default styles, see [theme example](../examples/customTheme.md)
#### customSource
`string`
default: `SimpleEditorBundleString`
-prop that can help for advance usage, an HTML string that will replace the default simple editor
+used in advance setup, an HTML string that will replace the default simple editor
#### DEV
`boolean`
default: `false`
-prop that can help for advance usage, when true editor will be loaded by DEV_SERVER_URL
+prop used in advance setup, when true the webview will load DEV_SERVER_URL instead of the html string
#### DEV_SERVER_URL
`string`
default: `http://localhost:3000`
-prop that can help for advance usage, a url string that point to the editor dev server
+prop used in advanced setup, a url string that points to the editor dev server
diff --git a/website/docs/api/useEditorContent.md b/website/docs/api/useEditorContent.md
index 552c40a..4a4aa54 100644
--- a/website/docs/api/useEditorContent.md
+++ b/website/docs/api/useEditorContent.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 1
+sidebar_position: 7
---
# useEditorContent
@@ -8,8 +8,7 @@ The useEditorContent hook is designed to efficiently retrieve the content. It mo
#### editor
-`EditorBridge` (required)
-A list of BridgeExtensions that will be add to the editor on the native side
+`EditorBridge` (required)
### options
@@ -33,7 +32,7 @@ useEffect(() => {
}, [content]);
```
-Internally `useEditorContent` get the content by calling `editor.getHTML` (or text/json depending on the `type` option). To reduce
+Internally `useEditorContent` will get the content by calling `editor.getHTML` (or text/json depending on the `type` option). To reduce
traffic it is called within a `debounce` with a default interval of `10`ms. This can be modified changing the `debounceInterval` option.
In addition we can also get the content as text or as a json.
diff --git a/website/docs/examples/basic.md b/website/docs/examples/basic.md
index d909ab8..232c4fe 100644
--- a/website/docs/examples/basic.md
+++ b/website/docs/examples/basic.md
@@ -8,8 +8,8 @@ In this example we will be creating a basic editor that contains all of the pre-
## Creating The Editor Bridge
-The first thing we want to do is create our [EditorBridge](../api/EditorBridge.md) add link to editor bridge.
-To do this we will use the `useEditorBridge` hook in our component. This by default will contain the `TenTapStartKit` (#TODO show link)
+The first thing we want to do is create our [EditorBridge](../api/EditorBridge.md).
+To do this we will use the `useEditorBridge` hook. This by default will contain the `TenTapStartKit` which includes all of [the following bridge extensions](../api/BridgeExtensions.md).
Now we have added all of the pre-built bridgeExtensions provided by tentap, and our editor will support all of these bridgeExtensions features
```tsx
@@ -38,10 +38,20 @@ The RichText component receives the EditorBridge we created before
## Adding a Keyboard Aware Toolbar
-Our RichText is pretty empty without a toolbar, so let's add it
+Our RichText is pretty empty without a toolbar, so let's add one
We need wrap the entire the toolbar and keyboard in a `KeyboardAvoidingView` to display the toolbar right above the keyboard
```tsx
+const exampleStyles = StyleSheet.create({
+ keyboardAvoidingView: {
+ position: 'absolute',
+ width: '100%',
+ bottom: 0,
+ },
+});
+
+...
+
```
+> The exact configuration of your KeyboardAvoidingView will differ depending on how you build you app, and you might need to alter the `keyboardVerticalOffset` prop. For an example of this case check out [this example](./navHeader.md)
+
## Full Example
```tsx
-import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import React from 'react';
import {
SafeAreaView,
diff --git a/website/docs/examples/colorKeyboard.md b/website/docs/examples/colorKeyboard.md
index 8471f27..0ba3ba0 100644
--- a/website/docs/examples/colorKeyboard.md
+++ b/website/docs/examples/colorKeyboard.md
@@ -11,7 +11,7 @@ In this example we will add the ColorKeyboard, and a custom button to toggle it
First we need to add two things
1. A ref on the components container (used on ios for opening the custom keyboard)
-2. A current keyboard state (used inside the toolbar to show and hide the color keyboard)
+2. A state of the current active keyboard id (used inside the toolbar to show and hide the color keyboard)
```tsx
const rootRef = useRef(null);
@@ -94,3 +94,11 @@ const ToolbarWithColor = ({
```
Then all that is left to replace `Toolbar` with our new `ToolbarWithColor` and we're done!
+
+```tsx
+
+```
diff --git a/website/docs/examples/configureExtensions.md b/website/docs/examples/configureExtensions.md
index db34b42..534759e 100644
--- a/website/docs/examples/configureExtensions.md
+++ b/website/docs/examples/configureExtensions.md
@@ -2,14 +2,15 @@
sidebar_position: 3
---
-# Configure Extensions
+# Configuring Extensions
In this example we will configure some extensions. Each bridge comes with the `configureExtension` function, that configures it's underline tiptap extension.
+For full list of available configurations for each bridge please see [BridgeExtensions](../api/BridgeExtensions.md).
## Configuring Placeholder and Link
-First we can check which options are available to extend on the tiptap docs.
-In our case let's extent the placeholder to show custom text, and the link extension to not open links when clicking them
+First we can check which options are available to extend on the tiptap docs. Links to them are available [here](../api/BridgeExtensions.md)
+In our case let's extend the placeholder to show custom text, and the link extension to not open links when clicking them
```tsx
const editor = useEditorBridge({
diff --git a/website/docs/examples/customCss.md b/website/docs/examples/customCss.md
index 25ffeb4..cbdfa77 100644
--- a/website/docs/examples/customCss.md
+++ b/website/docs/examples/customCss.md
@@ -8,7 +8,7 @@ In this example we will be adding custom css and fonts
## Adding/Overriding CSS
-Each bridge, has gives us the option to `configureCSS`. Some bridges come with css already configured in them, when we can override by configuring.
+Each bridge, gives us the option to `configureCSS`. Some bridges come with css already configured in them, when we can override by configuring.
Let's give an example by overriding the CodeBridge.
First let's define the css
@@ -43,6 +43,8 @@ const editor = useEditorBridge({
});
```
+> NOTE calling configureCSS more than once will override the previous css.
+
## Adding Custom Fonts
Let's add a custom font to our Editor (we can also add custom css)
diff --git a/website/docs/examples/customKeyboard.md b/website/docs/examples/customKeyboard.md
index 7c51f42..ce954f1 100644
--- a/website/docs/examples/customKeyboard.md
+++ b/website/docs/examples/customKeyboard.md
@@ -1,19 +1,19 @@
---
-sidebar_position: 4
+sidebar_position: 6
---
# Custom Keyboard
-In this example we will show how to create and add a custom keyboard to your editor,
+In this example we will create and add a custom sticker keyboard 👯♀️
+Im going to show parts of the code we have on the [Full solution](#full-solution) and go into small chunks of the code.
-in this example we will build a sticker keyboard 👯♀️
-
-Im going to show parts of the code we have on the [Full solution](#full-solution) and to drill down on each
-
+
+
+