sstur / react-rte Goto Github PK

It would be great to get a hardened stateToMarkdown and markdownToState into the community as a separate library, decoupled from any particular editor. What about open-sourcing those parts separately from react-rte?

react-rte needs draft-js 0.7.0. But...

npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.
npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.
npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.
npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.
npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.
npm WARN [email protected] requires a peer of draft-js@^0.5.0 but none was installed.

Great component, BTW. Thanks!

Thanks for the great work! ^______^

I get errors (v0.1.13) when I try to import react-rte using browserify:

events.js:154
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./Button.css' 
from '/../my-project-path/node_modules/react-rte/dist'

Is there a way to exclude webpack loaders in dist build? (I even found module.hot mentions in dist.js source code).

I downgraded to v.0.1.10 and errors are gone (however Editor has no styles at all). I suppose something went wrong with #10

Have you figured out how to do text align? I've been struggling to implement that. Your repo is the most complete example I've found. Curious how you're solving left right center and justify.

It looks like the text of the option elements inside of the Block Type dropdown is set to transparent, which has the affect of making the text invisible (at least in Chrome 49).

I'm curious about including markdown image syntax ![](), noticed the demo doesn't have it yet.

Awesome project. I knew someone would do the commonmark/markdown <---> draftjs soon, very glad you made this so seamless. 💃

After trying node versions 5.10, 4.2, 0.12, I cannot run react-rte locally.

steps to reproduce

npm i
npm run build-demo <- outdated (does not work) and i saw that all the builds were happening anyways
npm i -g serv
serv

I hacked my way to a solution by modifying the webpack config and creating a server.js file like in https://github.com/gaearon/react-hot-boilerplate.

Is there something simple I'm missing? Thanks for the awesome work though!

How to use this component with formsy-react? Here is how I tried it.

...
class FormsyRichTextEditor extends React.Component {

  state = {
    value: RichTextEditor.createEmptyValue()
  };

  static propTypes = {
     ...
  }

  __handleChange__ = (value) => {
    this.setState({ value });
    this.props.setValue(value.toString('markdown'));
  }

  render() {
    let className = ' ';
    className += this.props.showRequired() ? 'required' : '';
    className += this.props.showError() ? 'error' : '';

    let errorMessage = this.props.getErrorMessage();

    return (
      <div className={'text-left form-group' + className }>
        <label htmlFor={this.props.id}>{this.props.title}</label>
        <RichTextEditor
          id={this.props.id}
          name={this.props.name}
          value={this.state.value}
          onChange={this.__handleChange__} />
        <span className='error-message'>{errorMessage}</span>
      </div>
    );
  }
}

export default HOC(FormsyRichTextEditor);

I get the following issue

Warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

Some digging into the issue shows people creating rte are facing this issue and there is a way to suppress this warning. Is there any way to suppress it with react-rte?
Really unsure as to what this warning means and why it is there?

It seems that react-rte is 100% reliant on webpack to work, which is a bit unfortunate since a fair number of people use other solutions for bundling.

Here's the stack trace if you try to use it with browserify/babelify

Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./IconButton.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Finished building JS. buildJS: 496.802ms Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./ButtonWrap.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./Button.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./InputPopover.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./ButtonGroup.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./Dropdown.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./EditorToolbar.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../node_modules/raw-loader/index.js!./Draft.global.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist' Error2: Cannot find module '!!./../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./RichTextEditor.css' from '/home/cvoege/mimirhq/lms/node_modules/react-rte/dist'

Is there a way that I can add target="blank" to all tags before calling toString('html')? It would be cool if there was an easy way to modify tags being outputted.

Looks like it hasn't been updated in a couple releases.
https://github.com/sstur/react-rte/blob/master/CHANGELOG.md

Hey, good work on this!.

Are you working on this?

All code and quoted blocks are lost when importing markdown. As an example, in the demo at https://react-rte.org/demo:

• Set the mode radio button to Markdown
• Type some text and mark it as a quote or code in the RTE top editor. MD in bottom textarea looks OK.
• Type anything in the MD textarea, which updates the RTE editor, and all quotes and code blocks are lost (quotes become unstyled text, code block content just plain disappears altogether)

Is localization suppport possible? I was thinking about passing an array of label strings for the tooltips and Header dropdown:

Example for German:

const labels: {
  bold: 'Fett',
  italic: 'Kursiv',
  strikethrough: 'Durchgestrichen',
  monospace: 'Monospace',
  ul: 'Liste',
  ol: 'Aufzählung',
  bockquote: 'Zitat',
  link: 'Link',
  removeLink: 'Link entfernen',
  normal: 'Normal',
  headingLarge: 'Überschrift groß',
  headingMedium: 'Überschrift mittel',
  headingSmall: 'Überschrift klein',
  codeBlock: 'Code Block',
  undo: 'Rückgängig',
  redo: 'Wiederherstellen'
};

return <RichTextEditor labels={labels} {...props} />;

I was wondering if React-RTE supported onBlur?

passing in my onBlur function as a prop doesn't seem to work, and I was hoping to run a save function onBlur. Any ideas?

Thanks!

Hi there,

I'm trying to bring onboard react-rte, but I'm having difficulties. I see the editor perfectly rendered on my screen, but the textbox is not recognizing my inputs. My onChange function is getting triggered, though. Would anyone be able to point out what I did wrong?

My changes are:

1. My component's getInitialState returns:
   format: "markdown", value: Editor.createEmptyValue()
2. An onChange function:
   _onChange: function(value) { this.setState({value: value}); }
3. Rendering it:
   <Editor value={this.state.value} onChange={this._onChange} placeholder="My name is Rain" />

The onChange function is triggering, so it's detecting my text input, but it doesn't display any of my text input. I get the feeling the problem is in my onChange function, but I could use some guidance in how to fix it.

Note - I am not using flow. I see that the demo is, and is importing an EditorValue type, that is used in the demo's onChange function. I'm hoping that isn't necessary.

Thanks!

Are there any plans for adding a table support?

Hi ! Must it need react 0.15.X? We need to support IE8 in the project.

Seems like the upgrade to 0.6.0 draft-js broke the package, since the export/import-ers uses 0.5.0 as the draft-js peer dependency.

Would be great to see this lib have emoji support - any suggestions as to how this might be implemented?

The standard way to disable a form element is by using the disabled property. I think you have readOnly .. Consider using <RichTextEditor disabled={loading} /> to make this consistent.

Something like:

• https://github.com/theadam/react-inform/blob/master/README.md#api
• https://github.com/christianalfoni/formsy-react/blob/master/API.md

From my limited knowledge, I could get this started with:

RichTextEditor

Main editor component, with draft-js <Editor> and custom toolbar.

Properties

• value: used to populate the initial content of the editor; if no previous value is available, should be populated with RichTextEditor.createEmptyValue()
• onChange: function that will be passed the value of the editor whenever it is changed. The value object passed to this function has a toString method which accepts a string of either 'html' or 'markdown'

Example usage:

import RichTextEditor from 'react-rte';

class MyCustomEditor extends Component {

  static propTypes = {
    onChange: PropTypes.func.isRequired
  };

  state = {
    value: RichTextEditor.createEmptyValue()
  }

  handleChange = value => {
    this.setState({ value });
    // send the changes up to the parent component as an HTML string
    this.props.onChange(value.toString('html'));
  };

  render () {
    return (
      <RichTextEditor
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

I am attempting to make make use of flexbox in order to build a full screen-ish modal that allows the editing experience to happen in a popup, but also allows the RTE instance to fill a flex column. Unfortunately, I am not finding a good way to, through the modular css, be able to inject the necessary css in order to achieve the result I am looking for.

(Currently, it appears .public-DraftEditor-content is hardcoded to 110px. But aside from that, it appears I need to modify styles__richTextEditor___2Dl6A RichTextEditor__root___2QXK- which I can't see a way to do.)

Prototype of what I am trying to achieve: https://jsfiddle.net/av0v2540/

Since there is a build process at place that puts a _[hash] in css names, I can't depend on overriding the css inline as it will change from release to release. What I need to make it achieve the above is the ability to use display: flex along with various flex: 1, flex: 2, and flex-direction: column directives. Any insight how I can achieve this with react-rte is appreciated.

Thanks in advance.

It would be nice if value prop is just a string and format is provided via props. This would make it easier to combine react-rte with libraries like redux-form.

<RichTextEditor
    value={'<p>some text</p>'}
    format={'html'}
    onChange={() => { // do something }}
 />

So I started working on this and managed to get it loaded into my app, but I keep getting the duplicate versions of React error:
mui/material-ui#2818
https://gist.github.com/jimfb/4faa6cbfb1ef476bd105

I'm importing it using babel + webpack, so I think it has to do with the way webpack loads dependencies, but I'm not sure. Ideally, it would be great if react-rte had a distribution build available after npm install react-rte that includes draft-js, immutable.js, but not react/react-dom.

On every wysiwyg I know, if you have a bulleted list and do enter (add an empty bullet) and enter again it will remove the empty bullet and break out of the list.

In react-rte, it keeps adding more bullets.

In this commit, the build-demo script was removed from the package.json file.

Adding the line "build-demo": "webpack", to the package.json file solved the issue for me. Perhaps the readme should be updated or the script should be added back.

Is there a way to edit the URL in a link? I think I would expect that when:

1. I position the cursor within an existing link text in the editor (or select an existing link text).
2. I click the link button in the toolbar.

Then

1. The textbox in the link widget would be populated with the existing link.
2. Editing the contents of the link textbox and clicking the submit button would update the link text.

Using a <form> in our toolbar can cause invalid nesting when editor is placed into a parent <form>.

I noticed in the demo that while creating a link in the editor produces an href, complete with the default stylings, it isn't clickable.

I was wondering if this was intentional or a bug?

This will avoid naming collisions and unintentional cascading effects and a bunch of related problems.

Hi, I am using Meteor 1.3 with React. I installed react-rte and everything works wonderfully. Great job with this RTE!

However, I am having this annoying error being logged to my server's console:

Unable to resolve some modules:

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./Button.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js(web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./ButtonWrap.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./IconButton.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./ButtonGroup.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./InputPopover.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./Dropdown.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./EditorToolbar.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../node_modules/raw-loader/index.js!./Draft.global.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

"!!./../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./RichTextEditor.css" in ~/MeteorProject/node_modules/react-rte/dist/react-rte.js (web.browser)

If you notice problems related to these missing modules, consider running:

  meteor npm install --save !!.

I tried npm install css-loader both locally and globally to no avail.

I repeat, It works, but I would love to make this error go away. Any ideas?

Howdy!

I'm reading your repo since I'm running into the storage conundrum where I have services that need to consume what draft has produced. Originally I thought about just storing the JSON object representation of it and then pulling that back out but some of these services don't want to have a conversion step for working with the data.

Consequently, I've been looking at deserializing/serializing it and started writing a basic importer exporter. Which is when I stumbled upon how yours is working. Honestly, I'd just use this component but we need to be able to make ours a little more flexible and support lots of different entities for mentions, tagging, etc.

I really like how your stateFromHTML/element works. I was thinking this almost makes sense to pull outside of rte since it's not rte specific and it could be expanded to support plenty of other types by the community. For instance, xml. Some of your TODOs already mention moving pieces into their own modules, but I'm assuming that's referring to modules inside this repo.

Any thoughts on making a separate dependency for that? I'd be happy to volunteer time to working on it as your approach is the best I've seen in looking around the last couple of days. Someone else had started a repo called DraftExporter but yours is far more robust.

Thanks for your time!

Allow 3rd-party plugins to be installed/incorporated with the editor, similar to draft-js-plugins-editor. Ideally would be compatible with all draft-js-plugins.

I would say an initial goal should be to just support the emoji plugin, since that solves #21.

.editor :global(.public-DraftEditor-content) {
  height: 110px;
  overflow: auto;
}

as it is the height which is set to 110px, but not min-height, is it too low or not grow-able?
any suggested way to modify this outside your module?
sorry if with bad English grammer.

The were a bunch of dependencies that could not be met. I did an npm update and got the same result.

$ npm install --save react-rte
npm ERR! Darwin 15.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "--save" "react-rte"
npm ERR! node v0.10.36
npm ERR! npm  v2.3.0
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-rc
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.8
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.1

I'm looking around, and I don't see any additional documentation besides the project's README, so I'm having issues figuring out how to integrate this.

I have so many integration questions like:
How do I set options, such as disabling certain buttons?
How do I set up the onChange function? Currently, the editor isn't behaving like a contentEditable div. It's not editable?
etc

Is anyone able to point me to additional documentation, or an example that isn't as long as demo.js (38,000 lines @_@....)

Thanks for any assistance you folks can offer!

The continuous integration should run lint and flow and tests.

If you set bold/italic/etc, type some text and then press enter to start a new paragraph, the style should be back to normal in the new block.

Thanks to @codesoda for noticing this bug.

If you set readOnly={true} the text input is disabled, toolbar controls are only styled disabled but still clickable. Best would be to hide toolbar completely if readOnly is set, what do you think?

Thanks for writing this.

In an isomorphic app, this library fails when rendering on server with

                var $ = window.jQuery || window.Zepto;
                              ^
                TypeError: Cannot read property 'jQuery' of undefined

The current Markdown parser is based on chjj/marked but it has been modified a lot (to parse to a synthetic DOM rather than a string). However, the more tests I write, the more markdown parsing bugs I'm noticing, so I am considering a move to wooorm/remark.

When the cursor is in a link entity, clicking the link button should pre-fill with the current href value.

This happens when loading in the editor. It doesn't show up. Not sure if this is a problem due to draftjs itself or due to react-rte. Only happens on IE 11 like I said. Can't stand IE....

I use server-side-rendering with react and webpack based on react-webpack-node.
Does react-rte use jquery? Or, is it draft-js that use jquery?
I don't use jquery in my project but after I installed react-rte,
console shows me an error message that

var $ = window.jQuery || window.Zepto;
              ^
TypeError: cannot find property 'jQuery' of undefined

So, I think this is because nodejs server doesn't know window object...
Is there possible solution for this??

tab and shift+tab should increase and decrease indent respectively.

We should include a targeted set of CSS reset styles to avoid cascading effects from other stylesheets on the page that do things like p { line-height: 50px }

I know you merged #58 #53 , but did you published them to NPM?

When using Twitter Bootstrap, I noticed one conflict with .blockquote, which breaks the button layout:

My suggestion is to namespace all of the icon classes, maybe with just icon- (e.g. icon-blockquote).

I'm having trouble figuring out how to load a soft newline. When I type in the editor:

Hi
there

It spits out the html <p>Hi<br/>\nthere</p>. In my case, I'm exporting this html and saving it in a database. When they come back to the editor, I call createValueFromString to repopulate the text but the newline is gone... we get <p>Hi<br/> there</p>, instead. The newline is now a space.

I tracked this down to the collapseWhitespace function in draft-js-import-element. I assume there's a good reason to strip out the whitespace so I'm not sure the best way to go about fixing this is.

You can easily repro the issue by appending this block to EditorDemo.js:

<div className="row">
  <RichTextEditor
     value={RichTextEditor.createValueFromString(value.toString(format), format)}
     placeholder="Tell a story"
   />
</div>

Then fire up the demo page, and type some text with a soft newline (Shift-Enter) in the top editor.