michelson / dante2

A complete rewrite of dante editor in draft-js
https://michelson.github.io/dante2/
Other
912 stars 121 forks source link

Issue with onChange callback #207

Closed harshchau closed 4 years ago

harshchau commented 4 years ago

I want to catch any edits in Dante2 and write them to console as described here

This is not working. I am not getting any output to the console.

My set up is: I used npm install --save Dante2@next to install and my JS source looks like

import Layout from '../components/MyLayout';
import Dante from "Dante2"

export default function Editor() {
    return (
      <div>
        <Layout>

        <Dante onChange={editor => { console.log('editor content: ', editor.emitSerializedOutput()) }}/>

        </Layout>
      </div>
    );
  }
mbm-michal commented 4 years ago

@dashersch I have:

<Dante
    data_storage={{
       save_handler: this.onSaveHandler,
    }}
/>

and then I use redux to save to state

onSaveHandler = (editorContext, content) => {
        const { id } = this.props;
        this.props.updateSectionContent({
            [id]: draftIncludeMarkdown(content),
        });
    };

hope that helps!

harshchau commented 4 years ago

Thanks @michelson I will try out your suggestion.

In the meantime, I saw in the logs that I was missing prism. Running npm install --save prismjs@1.x installed prism and now the method described in your documentation for onChange works as well

michelson commented 4 years ago

Good, also you can implement the data storage save_handler


 { 
   url: "/",
   save_handler: this.saveHandler
 }
}```
chfritz commented 4 years ago

I had the same issue (the onChange handler wasn't firing). I was able to get it to work by not following the install instructions but instead running:

npm install --save Dante2

without the @next. This installed version 0.5.0-rc9 instead of rc4. After that, as @dashersch already reported, I had to install prismjs as well (npm install --save prismjs).

Now the onChange handler is firing happily.

michelson commented 4 years ago

Hi , we are in -rc25 , you are missing a lot new things! try to update to the latest and tell us how it goes

Atte. Miguel Michelson Martinez www.vadb.org http://vadb.org

On Fri, Feb 28, 2020 at 4:19 PM Christian Fritz notifications@github.com wrote:

I had the issue (the onChange handler wasn't firing). I was able to get it to work by not following the install instructions but instead running:

npm install --save Dante2

without the @next. This installed version 0.5.0-rc9 instead of rc4. After that, as @dashersch https://github.com/dashersch already reported, I had to install prismjs as well (npm install --save prismjs).

Now the onChange handler is firing happily.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/michelson/dante2/issues/207?email_source=notifications&email_token=AAAC5SD552HWHYWJ3HSP3HDRFFPSJA5CNFSM4KZUWK4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENJ2JFI#issuecomment-592684181, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SEEDOY7AIAO676W2FLRFFPSJANCNFSM4KZUWK4A .

chfritz commented 4 years ago

:+1: you may want to update your documentation for how to install to use Dante2@latest, or just update your "next" dist-tag on npm.