The react-draft-wysiwyg from jpuri

I can't find an example subscript & superscript implementation on Draft.js

Add option to convert editor content to markdown.

Feature request: Embed

Hello, thanks for awesome repository! This is the most perfect react editor I've ever seen!

I'd really like to embed some cool stuffs in my post, such as YouTube or Codepen.
I will be happy if you implement this feature, and this repo will be perfect.

Options in dropdown overlapping

When options are in dropdown in multiple lines. Dropdown in first line when opened should not be behind dropdown in second line.

Cannot set bold/italics/underline without any text highlighted

Noticed this just playing around on the demo page. Firefox 49.

Expected behaviour: I click, and it toggles. Together, they should behave like checkboxes, not radio buttons.

Unlink should not get highlighted for mentions

Hi! When I click on "Image upload" button, then choose "URL" tab, then try to put a focus on "Enter url" input, it disappears and is replaced by "Drop the file or click to upload". Please, help. Thank you.

Support mentions

Mentions should get deleted on whole by single backspace.

1.0

----------------------------- STABILIZING -------------------------------

----------------------------- BUGS -------------------------------

---------------------------- NEW FEATURES ------------------------------

---------------------------- TESTING -----------------------------

[ x] Testing all old and new features

---------------------------- DOCUMENTATION -----------------------------

enhanced docs
[x ] adding content to readme about using the lib
fixing documentation scripts

Fix minification in npm deployable code

Formatting tools cannot format font size

Use of tab to increase list depth is broken

It should be possible to pass classname in toolbar options

Prefix classes

Quick suggestion, if you are going to use classes to assign styles then you should probably add some sort of unique or definable prefix to the class names. Right now you are opening yourself up to a lot of unintentional collisions if someone were to use this in an existing project. Currently it would be difficult for others to keep in mind what all class names you've taken off the table.

Add option to remove inline styles of a selection.

Issues when adding styles to blank editor content

Focus editor and add some styles (without adding any text) - generated HTML is wrong.

Support for videos upload / display.

Avoid 'undefined' class name

Be mindful of passing undefined values to className, because React interprets that as a class name of "undefined". When I inspect your editor, I see a lot of class="... undefined".

devDependencies ‘draftjs-to-markdown’ is duplicated

I suggest it can customize the configuration font, color, size, etc., as well as multi-language support

Improving test coverage

"convertFromHTML" not support tag "img" ? "draftToHtml" was not friendly to "img"?

Hello ~

Very thank you for your amazing writing component, thanks a lot!
But I found some problems in the process of use:

1："convertFromHTML" method does not support img tags！
Ex:
ContentState createFromBlockArray (convertFromHTML ('<p>123<img src="http://image.mmzhuli.com/e0bd1b1a-8a8c-4cec-b42e-1e9605594353?hjw=50&hjh=50"/><br/>1111</p> '))
2, in the process of submitted data,"draftToHtml" method seems more parsing out a symbol
Ex:

Thanks~ Really looking forward to receive your reply！

It should be possible for user to set size of embedded media.

How to use spellcheck?

The spellcheck does not work annymore in your samples.
I tried to include "spellcheck={true}".
But that made no difference.

Support emojis

Give user option to add custom images to toolbar options.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

I'm getting this warning.

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See DraftEditorContents > p > ... > DraftEditorBlock > div.

The problem is this <p> here https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/src/components/Editor/index.js#L151

Pull request coming soon.

Popups in toolbar should close when user clicks anywhere else on the page

Usage Example

Hey @jpuri ,
I liked the text editor of demo page and I wanted to use similar kind of rich-text -editor in my project. But there is no information on How to use component after installation.
Great if you can provide some guide for the same.

Thanks

Allow user to configure RTL

Loading HTML content into editor

Maybe is a basic question (actually I guess is not related with your current draft based editor), but I don't get at all how draftjs works. I've been trying to load some html using the demo as example and so far I've tried something like this:

import React from 'react'
import { Modal } from 'react-bootstrap'
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import { convertFromHTML, ContentState, convertToRaw } from 'draft-js';


export default class EditDescriptionModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {editorContent: this._getInitialHTML()};
  }

  _getInitialHTML() {
    const contentBlocks = convertFromHTML('<p>Hello world</p>');
    const contentState = ContentState.createFromBlockArray(contentBlocks);
    return convertToRaw(contentState);
  }

  onEditorChange(editorContent) {
    console.log(draftToHtml(editorContent))
    this.setState({ editorContent });
  };

  render(){
    const { editorContent } = this.state;
    return(
      <Modal  show={this.props.showModal} onHide={this.props.onClose}
              bsSize="large" >
        <form className="form-horizontal" >
          <Modal.Header closeButton>
            <Modal.Title>Edit description</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="demo-editorSection">
              <div className="demo-editorWrapper">
                <Editor
                  rawContentState={editorContent}
                  toolbarClassName="demo-toolbar"
                  wrapperClassName="demo-wrapper"
                  editorClassName="demo-editor"
                  onChange={this.onEditorChange.bind(this)}
                  toolbarAlwaysVisible
                />
              </div>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <button type="submit" className="btn btn-info">Submit</button>
            <button type="button" className="btn"
                    onClick={this.props.onClose}>Close</button>
          </Modal.Footer>
        </form>
      </Modal>
    )
  }
}

So is supposed it should display that <p>Hello world</p> as initial editor content passing to the rawContentState of the Editor component, but I think I'm wrong.
In any case, if I add some text to the editor, is correctly converted to HTML in the onEditorChange function. What I'm doing wrong here?.
BTW, kudos for the great work done

It should e possible for user to provide image size also.

> sign added when embed something.

I added youtube in your demo.

In front of iframe, > sign is added, and this blocks rest of HTML from rendering normally.

also, can I change that 315px to other number?

Clicking any option twice should remove the styling

Load Html and keep font-size and colors

Hello Jyoti.
I think your draft editor is great. I appreciate all your work!
You take the time to answer questions. What a service!

My question is about the possibility to load HTML into the editor.
It works fine. But things like font-size and colors are gone..

Think that you had some different font-sizes and font-colors in your
sampleEditorContent.js which is used in one of your samples here: initialContentState={sampleEditorContent}.
How could we keep/show them?

Mention dropdown should position itself intelligently in the editor.

This has been done.

Issue with link option in drop-down

For link option in dropdown add link modal should close when dropdown is closed.

Add option in editor for code formatting

As user types after link the new text should not be linkified.

Custom toolbar

Really promising project you have here! We've been looking to part ways with Summernote for a while now and this might just be it. Would you be open to having a way to configure the toolbar through props a bit like it's done in Summernote: http://summernote.org/deep-dive/#custom-toolbar-popover

Thanks!

Image, Embed problem

@jpuri Thanks for the great editor!
When I embed url or add image url, img and iframe src is not the url I typed but [object Event]
<img src="[object Event]" role="presentation">
<iframe width="100%" height="315px" src="[object Event]" frameborder="0" allowfullscreen=""></iframe>
I found out that it is due to here and here
I think the order should be changed into this
const src = this.state.imgSrc || imgSrc;
also
const link = this.state.embeddedLink || embeddedLink;
I'm not sure what do those imgSrc and embeddedLink do. As an eventHandler callback, do we need second parameter?

Behavior on pressing enter

Hi,

Whenever you press enter and the content is too big to show without scrolling, whenever enter is pressed the editor scrolls to the end of the text. This might be a little annoying when writing news like paragraph. Is there any idea on how to solve this problem?

Congrats on the awesome job.

At times toolbar behaves wierdly for option 'toolbarWhenFocused' set

Auto indenting

Hello. Some basic example?

Hello!

Based on what I've seen in the demos you provided, I like your implementation. I think it may be very good in production because of the practical way of grouping and arranging the design functions within it.

I want to test it in our projects.

But I think it might be helpful a basic usage guide, because I get this Warning: validateDOMNesting(...): < div> cannot appear as a descendant of < p>. See DraftEditorContents > p > ... > DraftEditorBlock > div.

Thank you for sharing your project.

Multiple toolbar modals open causes bugs

When you click on multiple toolbars it opens one without closing another (i think closing the other toolbars would be a nice and normal behaviour).

jpuri / react-draft-wysiwyg Goto Github PK

react-draft-wysiwyg's Introduction

React Draft Wysiwyg

Features

Installing

Getting started

Docs

Questions Discussions

Fund

Thanks

License

react-draft-wysiwyg's People

Contributors

Stargazers

Watchers

Forkers

react-draft-wysiwyg's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs