Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On Windows, Toolbar doesn't work #370

Open
LyDawei opened this issue Oct 22, 2024 · 0 comments
Open

On Windows, Toolbar doesn't work #370

LyDawei opened this issue Oct 22, 2024 · 0 comments

Comments

@LyDawei
Copy link

LyDawei commented Oct 22, 2024

On RN Windows, the toolbar doesn't work. Can I please get some assistance for this? Thanks.

Expected:

  • Using toolbar to set Bold/Italicize/Underline/Strikethrough and other functions should work

Actual:

  • Toolbar functionality doesn't work.
  • RTF works if you use hotkeys, ie. Ctrl + B for bold, or Ctrl + I for italicize.

Current setup:

  • Latest Expo with custom client
  • Install package and put it on the screen as:
import React, { useRef } from 'react';
import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, Text, View } from 'react-native';
import { actions, RichEditor, RichToolbar } from 'react-native-pell-rich-editor';


export default function Sandbox() {

  const richText = useRef(null);
  const handleHead = ({ tintColor }) => <Text style={{ color: tintColor }}>H1</Text>

  return <SafeAreaView>
    <RichToolbar
      editor={richText}
      // actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.insertBulletsList,
      //   actions.insertOrderedList,
      //   actions.insertImage, actions.heading1]}
      actions={[
        actions.undo,
        actions.redo,
        actions.setBold,
        actions.setItalic,
        actions.setUnderline,
        actions.setStrikethrough,
        actions.insertImage,
        actions.alignLeft,
        actions.alignCenter,
        actions.alignRight,
        actions.blockquote,
        actions.insertBulletsList,
        actions.insertOrderedList
      ]} // default defaultActions
      onPressAddImage={()=>{console.log('click')}}

    />
    <ScrollView>
      <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={{ flex: 1 }}>
        <Text>Description: test</Text>
        <RichEditor
          useWebView2
          pasteAsPlainText
          useContainer={false}
          autoCapitalize='off'
          autoCorrect={false}
          style={{ height: 400 }}
          ref={richText}
          onChange={descriptionText => {
            console.log("descriptionText:", descriptionText);
          }}
          onMessage={(message) => { console.log('message', message) }}
        />
      </KeyboardAvoidingView>
    </ScrollView>


  </SafeAreaView>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant