From 85110e3f5df5207b6c11832fd629ad416c12aacb Mon Sep 17 00:00:00 2001 From: Amir Angel <36531255+17Amir17@users.noreply.github.com> Date: Wed, 4 Dec 2024 14:35:01 +0200 Subject: [PATCH 1/9] fix: partially working bridgless --- example76/App.tsx | 99 +++++++++++++++++++++++++++++++++++--- example76/ios/Podfile.lock | 6 +-- ios/TenTapViewImpl.mm | 36 ++++++++++---- 3 files changed, 120 insertions(+), 21 deletions(-) diff --git a/example76/App.tsx b/example76/App.tsx index 9b4e115..b4d8d27 100644 --- a/example76/App.tsx +++ b/example76/App.tsx @@ -1,31 +1,114 @@ -import React from 'react'; +import type {NativeStackScreenProps} from '@react-navigation/native-stack'; +import React, {useRef} from 'react'; import { SafeAreaView, + View, KeyboardAvoidingView, Platform, StyleSheet, } from 'react-native'; -import {RichText, Toolbar, useEditorBridge} from '@10play/tentap-editor'; +import { + RichText, + Toolbar, + useEditorBridge, + ColorKeyboard, + CustomKeyboard, + DEFAULT_TOOLBAR_ITEMS, + useKeyboard, + type EditorBridge, + useBridgeState, + TenTapStartKit, + CoreBridge, + Images, +} from '@10play/tentap-editor'; -export const App = () => { +export const WithKeyboard = ({}: NativeStackScreenProps) => { const editor = useEditorBridge({ autofocus: true, avoidIosKeyboard: true, initialContent, + bridgeExtensions: [ + ...TenTapStartKit, + CoreBridge.configureCSS(` + * { + font-family: 'Rubik', sans-serif; + } + `), + ], }); + const rootRef = useRef(null); + const [activeKeyboard, setActiveKeyboard] = React.useState(); + return ( - - + + + + - + + ); }; +interface ToolbarWithColorProps { + editor: EditorBridge; + activeKeyboard: string | undefined; + setActiveKeyboard: (id: string | undefined) => void; +} +const ToolbarWithColor = ({ + editor, + activeKeyboard, + setActiveKeyboard, +}: ToolbarWithColorProps) => { + // Get updates of editor state + const editorState = useBridgeState(editor); + + const {isKeyboardUp: isNativeKeyboardUp} = useKeyboard(); + const customKeyboardOpen = activeKeyboard !== undefined; + const isKeyboardUp = isNativeKeyboardUp || customKeyboardOpen; + + // Here we make sure not to hide the keyboard if our custom keyboard is visible + const hideToolbar = + !isKeyboardUp || (!editorState.isFocused && !customKeyboardOpen); + + return ( +