Merge pull request #19 from 10play/guy353/rnr-13-break-starterkit

Guy353/rnr 13 break starterkit

example/src/Examples/Advanced/AdvancedRichText.tsx

@@ -2,17 +2,11 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React, { useRef } from 'react';
 import { SafeAreaView, View, StyleSheet, Text } from 'react-native';
 import {
-  ColorBridge,
-  HighlightBridge,
-  ImageBridge,
-  LinkBridge,
   RichText,
-  TaskListBridge,
-  TenTapStartKit,
-  UnderlineBridge,
   useEditorBridge,
   useBridgeState,
   type EditorBridge,
+  TenTapStartKit,
 } from '@10play/tentap-editor';
 
 // @ts-ignore
@@ -48,16 +42,7 @@ export const Advanced = ({}: NativeStackScreenProps<any, any, any>) => {
     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>`,
-    bridgeExtensions: [
-      TenTapStartKit,
-      UnderlineBridge,
-      ImageBridge,
-      TaskListBridge,
-      LinkBridge,
-      ColorBridge,
-      HighlightBridge,
-      CounterBridge,
-    ],
+    bridgeExtensions: [...TenTapStartKit, CounterBridge],
   });
   const TapRef = useRef(null);
 

example/src/Examples/Advanced/Editor/AdvancedEditor.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EditorContent } from '@tiptap/react';
-import { useTenTap } from 'tentap/web';
+import { useTenTap } from '@10play/tentap-editor/web';
 import Document from '@tiptap/extension-document';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';

example/src/Examples/Advanced/Editor/vite.config.ts

@@ -13,11 +13,11 @@ export default defineConfig({
   resolve: {
     alias: [
       {
-        find: '@10play/tentap-editor',
+        find: '@10play/tentap-editor/web',
         replacement: resolve(__dirname, '../../../../../src/webEditorUtils'),
       },
       {
-        find: '@10play/tentap-editor/web',
+        find: '@10play/tentap-editor',
         replacement: resolve(__dirname, '../../../../../src/webEditorUtils'),
       },
     ],

example/src/Examples/Basic.tsx

@@ -7,20 +7,7 @@ import {
   Platform,
   StyleSheet,
 } from 'react-native';
-import {
-  ColorBridge,
-  CoreBridge,
-  HighlightBridge,
-  ImageBridge,
-  LinkBridge,
-  PlaceholderBridge,
-  RichText,
-  TaskListBridge,
-  TenTapStartKit,
-  Toolbar,
-  UnderlineBridge,
-  useEditorBridge,
-} from '@10play/tentap-editor';
+import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';
 import { ColorKeyboard } from '../../../src/RichText/Keyboard/ColorKeyboard';
 import { CustomKeyboard } from '../../../src/RichText/Keyboard';
 
@@ -35,12 +22,13 @@ const exampleStyles = StyleSheet.create({
   },
 });
 
-const customFont = `
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
-* {
-  font-family: 'Roboto', sans-serif;
-}
-`;
+// todo: add example with custom font
+// const customFont = `
+// @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+// * {
+//   font-family: 'Roboto', sans-serif;
+// }
+// `;
 
 const 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>`;
 
@@ -50,20 +38,6 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
     DEV: true,
     avoidIosKeyboard: true,
     initialContent,
-    bridgeExtensions: [
-      // Here we define all the plugins that we want to use
-      CoreBridge.configureCSS(customFont), // If we want to add custom css - we can configure it here on the core bridge
-      TenTapStartKit,
-      UnderlineBridge,
-      ImageBridge,
-      TaskListBridge,
-      PlaceholderBridge.configureExtension({
-        placeholder: 'Type something...',
-      }),
-      LinkBridge.configureExtension({ openOnClick: false }),
-      ColorBridge,
-      HighlightBridge,
-    ],
   });
 
   const rootRef = useRef(null);

example/src/Examples/Compose/Compose.tsx

@@ -9,17 +9,7 @@ import {
   TextInput,
   Alert,
 } from 'react-native';
-import {
-  ColorBridge,
-  CoreBridge,
-  HighlightBridge,
-  ImageBridge,
-  LinkBridge,
-  TaskListBridge,
-  TenTapStartKit,
-  UnderlineBridge,
-  useEditorBridge,
-} from '@10play/tentap-editor';
+import { useEditorBridge } from '@10play/tentap-editor';
 import { Icon } from '../Icon';
 import { ComposeRichText } from './ComposeRichText';
 
@@ -28,17 +18,8 @@ export const Compose = ({
 }: NativeStackScreenProps<any, any, any>) => {
   const editor = useEditorBridge({
     avoidIosKeyboard: true,
+    DEV: true,
     initialContent: MAIL_INITIAL_CONTENT,
-    bridgeExtensions: [
-      CoreBridge,
-      TenTapStartKit,
-      UnderlineBridge,
-      ImageBridge,
-      TaskListBridge,
-      LinkBridge.configureExtension({ openOnClick: false }),
-      ColorBridge,
-      HighlightBridge,
-    ],
   });
 
   const onSendClick = async () => {

example/src/Examples/CustomKeyboardExample/index.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 import {
   RichText,
-  TenTapStartKit,
   Toolbar,
   useEditorBridge,
   type ToolbarItem,
@@ -36,8 +35,8 @@ export const CustomKeyboardExample = ({}: NativeStackScreenProps<
 >) => {
   const editor = useEditorBridge({
     avoidIosKeyboard: true,
+    autofocus: true,
     DEV: true,
-    bridgeExtensions: [TenTapStartKit],
   });
   const TapRef = useRef(null);
   const [activeKeyboard, setActiveKeyboard] = React.useState<string>();

example/src/Examples/EditorStickToKeyboardExample.tsx

@@ -10,13 +10,7 @@ import {
   Text,
   ScrollView,
 } from 'react-native';
-import {
-  RichText,
-  TenTapStartKit,
-  Toolbar,
-  useEditorBridge,
-  CoreBridge,
-} from '@10play/tentap-editor';
+import { RichText, Toolbar, useEditorBridge } from '@10play/tentap-editor';
 import { CustomKeyboard } from '../../../src/RichText/Keyboard';
 import { ColorKeyboard } from '../../../src/RichText/Keyboard/ColorKeyboard';
 import WebView from 'react-native-webview';
@@ -62,7 +56,6 @@ export const EditorStickToKeyboardExample = ({}: NativeStackScreenProps<
   const editor = useEditorBridge({
     autofocus: true,
     DEV: true,
-    bridgeExtensions: [TenTapStartKit, CoreBridge],
     initialContent: '<p>Initial lovely message...</p>',
   });
   const MessagesScrollViewRef = useRef<ScrollView>(null);

package.json

@@ -188,11 +188,24 @@
     "jsSrcsDir": "src"
   },
   "dependencies": {
+    "@tiptap/extension-blockquote": "^2.2.1",
+    "@tiptap/extension-bold": "^2.2.1",
+    "@tiptap/extension-bullet-list": "^2.2.1",
+    "@tiptap/extension-code": "^2.2.1",
+    "@tiptap/extension-code-block": "^2.2.1",
     "@tiptap/extension-color": "^2.1.16",
+    "@tiptap/extension-document": "^2.2.1",
+    "@tiptap/extension-heading": "^2.2.1",
     "@tiptap/extension-highlight": "^2.1.16",
+    "@tiptap/extension-history": "^2.2.1",
+    "@tiptap/extension-horizontal-rule": "^2.2.1",
     "@tiptap/extension-image": "^2.2.1",
+    "@tiptap/extension-italic": "^2.2.1",
     "@tiptap/extension-link": "^2.1.16",
+    "@tiptap/extension-list-item": "^2.2.1",
+    "@tiptap/extension-ordered-list": "^2.2.1",
     "@tiptap/extension-placeholder": "^2.2.1",
+    "@tiptap/extension-strike": "^2.2.1",
     "@tiptap/extension-task-item": "^2.1.16",
     "@tiptap/extension-task-list": "^2.1.16",
     "@tiptap/extension-text-style": "^2.1.16",

src/RichText/Toolbar/actions.ts

@@ -91,15 +91,15 @@ export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
       ({ editor }) =>
       () =>
         editor.toggleBlockquote(),
-    active: ({ editorState }) => editorState.isQuoteActive,
+    active: ({ editorState }) => editorState.isBlockquoteActive,
     disabled: ({ editorState }) => !editorState.canToggleBlockquote,
     image: () => Images.quote,
   },
   {
     onPress:
       ({ editor }) =>
       () =>
-        editor.toggleCodeBlock(),
+        editor.toggleCode(),
     active: ({ editorState }) => editorState.isCodeActive,
     disabled: ({ editorState }) => !editorState.canToggleCode,
     image: () => Images.code,
@@ -144,9 +144,9 @@ export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
     onPress:
       ({ editor }) =>
       () =>
-        editor.toggleStrikethrough(),
-    active: ({ editorState }) => editorState.isStrikethroughActive,
-    disabled: ({ editorState }) => !editorState.canToggleStrikethrough,
+        editor.toggleStrike(),
+    active: ({ editorState }) => editorState.isStrikeActive,
+    disabled: ({ editorState }) => !editorState.canToggleStrike,
     image: () => Images.strikethrough,
   },
   {

src/RichText/useEditorBridge.tsx

@@ -8,6 +8,7 @@ import { type EditorNativeState } from '../types/EditorNativeState';
 import { EditorHelper } from './EditorHelper';
 import type { EditorBridge } from '../types';
 import type BridgeExtension from '../bridges/base';
+import { TenTapStartKit } from '../bridges/StarterKit';
 
 type Subscription<T> = (cb: (val: T) => void) => () => void;
 
@@ -20,6 +21,7 @@ export const useEditorBridge = (options?: {
   DEV?: boolean;
   DEV_SERVER_URL?: string;
 }): EditorBridge => {
+  const bridgeExtensions = options?.bridgeExtensions || TenTapStartKit;
   const webviewRef = useRef<WebView>(null);
   // Till we will implement default per bridgeExtension
   const editorStateRef = useRef<EditorNativeState | {}>({});
@@ -59,7 +61,7 @@ export const useEditorBridge = (options?: {
   };
 
   const editorBridge = {
-    bridgeExtensions: options?.bridgeExtensions,
+    bridgeExtensions: bridgeExtensions,
     initialContent: options?.initialContent,
     autofocus: options?.autofocus,
     avoidIosKeyboard: options?.avoidIosKeyboard,
@@ -72,23 +74,24 @@ export const useEditorBridge = (options?: {
     _subscribeToEditorStateUpdate,
   };
 
-  const editorInstanceExtendByPlugins = (
-    options?.bridgeExtensions || []
-  ).reduce((acc, cur) => {
-    if (!cur.extendEditorInstance) return acc;
-    return Object.assign(
-      acc,
-      cur.extendEditorInstance(
-        sendAction,
+  const editorInstanceExtendByPlugins = (bridgeExtensions || []).reduce(
+    (acc, cur) => {
+      if (!cur.extendEditorInstance) return acc;
+      return Object.assign(
+        acc,
+        cur.extendEditorInstance(
+          sendAction,
+          webviewRef,
+          editorStateRef,
+          _updateEditorState
+        ),
         webviewRef,
-        editorStateRef,
+        editorStateRef.current,
         _updateEditorState
-      ),
-      webviewRef,
-      editorStateRef.current,
-      _updateEditorState
-    );
-  }, editorBridge) as EditorBridge;
+      );
+    },
+    editorBridge
+  ) as EditorBridge;
 
   EditorHelper.setEditorLastInstance(editorInstanceExtendByPlugins);