imnapo / react-native-cn-quill

Quill rich-text editor for react-native
MIT License
190 stars 75 forks source link

Cannot Modify Content #55

Closed arunim2405 closed 3 years ago

arunim2405 commented 3 years ago

I cannot Modify/ focus the editor and its content. The toolbar is rendering but I can't change any selected option (text color, justification etc.) My code is:

import QuillEditor, { QuillToolbar } from 'react-native-cn-quill';
import {View } from "react-native";
import React , {useRef} from 'react';

function Editor(props){
    const _editor = useRef(null);
    // React.useEffect(() => {
    //         if(_editor){

    //             console.log('focus?', _editor.current.hasFocus())
    //           _editor.current.enable(true)
    //           _editor.current.focus()

    //           _editor.current.setText('Hello\n');

    //          // _editor.current.focus()
    //         }
    // }, [_editor])
    return (
      <View style={{ backgroundColor: 'white', flex:1 }}>
            <QuillToolbar editor={_editor} options="full" theme="light" />
        <QuillEditor
            style={{
              flex: 1,
              minHeight:50,
              padding: 0,
              borderColor: 'gray',
              borderWidth: 1,
              marginHorizontal: 30,
              marginVertical: 5,
              backgroundColor: 'white',
              borderRadius:5
            }}
          //  ref={(ref)=>_editor.current=ref}
           ref={_editor}
            onFocus={()=>{
              console.log("huhi")
            }}
            onEditorChange={(editor)=>{
                console.log(editor)
            }}
            loading="loading"
            enable={true}
            initialHtml="<h1>Quill Editor for</h1>"
          />

      </View>
    )
}

  export default Editor

As you can see I tried changing the properties using the ref object but it didn't work. Any help would be appreciated thanks

arunim2405 commented 3 years ago

Update, downgraded to v0.7.1 and it started working

imnapo commented 3 years ago

Yeah It's not working in JavaScript projects with new updates. Typescript is ok.

imnapo commented 3 years ago

It's working in new release v0.7.7 . I'm closing this issue now, Feel free to reopen if the problem still exists

brightsider commented 1 year ago

Looks like it broken again:

    <QuillEditor
      ref={(ref) => {
        ref?.setText("TEST");
      }}

As result I get empty input