Usage with React about dante2 HOT 17 CLOSED

check latest version along with this example, https://github.com/michelson/dante2-tests on how to properly dante es6 modules and implement a custom React component as a wrapper to initialise the editor without using the Dante class

from dante2.

this works without problems

yarn add Dante2

then import it

import "./node_modules/Dante2/docs/dante-vendors.js"
import "./node_modules/Dante2/app/styles/dante.scss"
import "./node_modules/Dante2/docs/dante.js"

const editor = new window.Dante()

from dante2.

you can see it working here: https://asd.reimertz.co

from dante2.

@levbrie Oh wait, I see what you are saying.

I assume you're asking for this kind of functionality?

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Editor } from 'Dante2'
import { homePost } from '../data/postData'

class Home extends Component {
  render() {
    return (
      <div>
        <Editor content={homePost} editable={false} />
      </div>
    )
  }
}

export default connect()(Home)

from dante2.

Hi @levbrie , the example that @reimertz shows is the correct way to use the Dante component, please tell us how it goes this solution for you

@reimertz nice implementation on asd.reimertz.co!

from dante2.

@michelson thanks! Really love your work on Dante2, it's super legit!
Any plans if the editor will get mobile support soon?

from dante2.

@reimertz and @michelson Thanks for the super-fast replies.

@reimertz your 3rd comment is exactly what I was hoping for - something like:

import {Editor} from 'Dante2';

and the ability to use it as a react component:

<Editor content={homePost} editable={isEditable} />

@reimertz I'm assuming when you say 'the example that @reimertz shows is the correct way' you mean the first way with const editor = new window.Dante();. If there is a react component, please do let me know. If not, would love to see it added - would be great to use it directly in react.

@reimertz agreed, really nice implementation, and @michelson awesome, awesome work - so polished. Thanks for taking the time and building such a great editor.

from dante2.

Yup, that works (the global window import method), although I don't think the documentation for Dante2 explicitly mentions the need to call editor.render() - I ended up finding this by inspecting your Documentation example.

from dante2.

Hi, I will update the readme in order to reflect the basic usage (.render)
@levbrie, I guess the mobile support will be inherited from draft-js, are you looking for some mobile feature in particular ?

best!

from dante2.

@michelson it just seems to be semi-broken on mobile due how mobile safari handles text selection. I wonder if there is a way to disable a selection event to propagate.

from dante2.

from dante2.

@michelson Thanks for putting together dante2-tests. It's exactly what I was looking for. Unfortunately, it doesn't look like it works anymore.

Looking at the code some more, may I suggest that you place the default config code into the DanteEditor react component? That way, the Dante class becomes a very small wrapper around react component making the two interfaces the same.

from dante2.

dante2-test seems to be a very good example to show the opportunities with dante2, only problem I cant get it to work.

There are a number of imports not used, I think this import is wrong "'Dante2/src/model/index.js" (src is lib?) And my webpack installation gets some heavy errors on the Video referenced code among others (but that is probably my incompetence?)

But it would be great with a working dant2-test :-)

Thanks :-)
Regards
Gunnar

from dante2.

Hi @gberth , I've updated the code on dante2-tests , now is working. please take a look

cheers

from dante2.

from dante2.

from dante2.

HI,

I was able to successfully use Dante2 in react. However I want to change the editable state dynamically. I tried changing config.read_only & setting editable. Neither work. Anybody got it workin properly.
This is how I do it,
<DanteEditor editable={isEditable} content={this.props.content} config={opt} />
I checked and all variables changes accordingly and render method fires for changes as well. Just that Dante doesn't switch to read only mode.

from dante2.