globocom / megadraft Goto Github PK

Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility

Home Page: http://megadraft.io

License: MIT License

Makefile 0.19% JavaScript 87.90% HTML 0.76% Shell 0.30% SCSS 10.84%

react megadraft rich-text-editor contenteditable draft-js reactjs editor javascript wysiwyg wysiwyg-editor

megadraft's Introduction

Megadraft

Rich Text editor built on top of Facebook's draft.js

Discussion and Support

Join the #megadraft channel on the DraftJS Slack team!

Live Example & Documentation

Checkout our website with a live demo!

Developing

To run the development server and see the examples:

git clone https://github.com/globocom/megadraft.git
cd megadraft/
make setup
make run

Note: make sure you're using node <14

Then visit http://localhost:8080/#/ on your browser.

To run local tests:

make unit

To lint local source files:

make lint

To run tests and lint:

make test

Dependencies

Megadraft depends on Sass to build style assets.

Importing the default styles

Megadraft ships with a default styling available at this location in the installed package: node_modules/megadraft/dist/css/megadraft.css.

Documentation

Plugins

Check out the docs for information about plugin structure. To help in this process there is a Yeoman Megadraft Plugin Generator.

Contributing

Development of Megadraft happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving Megadraft.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Megadraft.

License

Megadraft is licensed under the MIT license.

Third Party

The Megadraft website uses a picture from Stocksnap.io by Tim Marshall licensed under CC0 license.

The Landing page uses a Megadeth picture by Ted Van Pelt licensed under CC-BY.

megadraft's People

Contributors

Stargazers

Watchers

Forkers

leandro-araujo fabriciolopes eddiewang pedrosnk mameneses wkw felipexakal rafalages raphamorim igroeg adai183 maycondionisio jbarget yeself interstelios njoshi22 poltak panter petry msathis cranesandcaff severs okjulian lgordey eujc21 nihaux conorcussell stefanopereira scorphus guilhermebruzzi hiepthai danielfalk bartektomas hermancaldara evandroflores moakap stefanoaraujo dotaeye mdarcemont gaku-sei sgfswen zugata wayfarerboy cameracker dontrelax mateuspontes stuartfeldt huitre orafaelfragoso amandaespinosa thanhtungdp dmpinheiro kongkx rwilsonjr zachwhitener teknologist rtancman ryuheiyokokawa elfakamal expressoman lightninglu10 trendingtechnology jbreckel leshikjanz dchristensen trytopics janjon rocketsciencenerd jonasblumer jn7163 revagomes denistsuman richardkevin frontendom thomfort jonathanalcantara leadrive realmacsoftware reactspain orlowang stefen krubrech haocse everwise anitavincent urblin markiing imagineagents macrozone kevinsperrine enterstudio saonam ukyiwin mgustin12 estermer khaldiamer strogo caiopmsoares digitalonboarding hilltool

megadraft's Issues

Atomic block remove button merging block data with the previous block

When the delete icon is clicked, the block metadata is merged with another block, not excluded.

key value is still null in function get(key) in DraftEntity.js

I created code like is described in http://globocom.github.io/megadraft/#/docs/plugins?_k=hbjwzp and it is not possible to created new video element because I have still problem: invariant.js:38 Uncaught Invariant Violation: Unknown DraftEntity key. and in code DraftEntity.js on line 68 is key value null.

Click on Link in Toolbar should allow to update the url

If you have selected a link and click on the link-button (or any custom entity-input), it will remove the link/entity.

It would be more flexible if you could edit the entity when clicking on the button and e.g. change the url. There, we could have a "remove" button that removes the entity.

I'll do eventually a PR for that, if there is no objection.

Create base media block

Make a base media block with media preview.

move each component to a single file
increase test coverage
rename MediaCaption (it has more than just the caption)
move caption and rights to the image component

image functionality not working

heya!

great module you got here!
On the demo site a few of the functions to adjust images don't seem to work for me:

crop
sizing
the 'edit' button

I'm on chrome 52 if that helps...

ability to add 'alt text' to an image

It would be good to have a field as well as 'caption' and 'rights holder' for 'alt text' to help accessibility

thoughts?
would you accept a PR?

Multiple editors cause overlap of toolbar.

Issue: When rendering multiple editors in a component, the tool bar overlaps when editing.

Replicate Issue: Render two MegaDrafEditor components in one layout:

import React from 'react';
import { MegadraftEditor } from 'megadraft';

const Header = (props) => (
  <MegaDraftEditor />
);
const Body = (props) => (
  <MegaDraftEditor />
)
export default class Testing extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    <div>
      <Header />
      <Body />
    </div>
  }
}

Website doesn't work

Using a rich text editor on mobile.

We're looking to add a draftjs implementation to our web app. We notice the native toolbar on devices (with copy, paste) really gets in the way a lot. Including with your implementation here.

Thoughts? Experiences?

Evaluate migration to React 0.15.3 and usage of React.PureComponent

Performance could be improved on most components using PureComponent:

facebook/react#7195

Crop

It should be possible to crop images on the editor.

Use pure-css toolbar item separator

fix empty editorState sidebar jump

Initially reported by @Nvveen on #66.

Responsive client for megadraft

Visual reference

Fix selection tooltip behavior

Use block metadata instead of entities

Support for block level metadata is on DraftJS' master, using it instead of entities should simplify Megadraft's code and will prevent problems with duplicated entities.

Here is the commit:
facebookarchive/draft-js@7fe617d

insertDataBlock is not possible to use

When I create import like: import {DraftJS, insertDataBlock} from "megadraft"; the insertDataBlock is not possible to use because it was not possible to use insertDataBlock in code and it was null.

Toolbar gets misaligned when applying a link

scss is not included in the distrubution

Hi there~~ Thanks for this fantastic editor!

It looks like the scss is not included in the distribution.

Some of the partials might be useful if I want to cherry pick only one part of the style.

I could also just use the css though.

Increase test coverage

We should cover most of the core functions with unit tests

Exporting to HTML

Has anyone had success with exporting the generated JSON to HTML?

I've tried the draft-js-import-html project, but it fails with the error

Uncaught Error: Unknown DraftEntity key.

Selection state on media block

Add visual feedback to media block selection.

Write docs about toolbar and key bindings customization

This could help on issues like: #61

Hiding sidebar when selectedBlock is not empty

Hello,

I think sidebar should be hidden when the selected block has text.
I can create a PR with this feature if it`s ok.

Thanks

Sidebar with Icons

Create a sidebar with media icons to add image/video.

can't remove empty line between two plugins

ways to reproduce:

goto http://globocom.github.io/megadraft/
add another image right after the first

you will see an empty line between the two plugins. setting the cursor there and hitting backspace will remove the previous plugin. You can't get rid of this line without deleting the inserted plugin

Cannot read property 'getCurrentContent' of null

I'm not advanced in react , just trying to build myself a blog and found that megadraft will do amazing job for me. I just tried to implement it following the Overview section, but it returns

Cannot read property 'getCurrentContent' of null

Not sure if this is bug or not :/
I'm using following dependencies: Webpack, React, React Router, React DOM and following code:
`
export default React.createClass({

getInitialState: function () {
    return {
        editorState: null,
    }
},
onChange(editorState) {
    this.setState({editorState: editorState});
},

render() {
    return (
            <Megadraft
                editorState={this.state.editorState}
                onChange={this.onChange}/>
    );
}
});`

Remove unused buttons from built-in components

Some buttons are not used and should be removed.

There's an issue reported by @Jbarget:

#70

Refactor the file names and imports

We need to standardize the names for the tooltip and sidebar and try to reuse some code between then.

Update draft-js to v0.6.0

https://github.com/facebook/draft-js/releases/tag/v0.6.0

sidebar does not receive readOnly in 0.4.0

property readOnly was not taken into account for the sidebar in this commit: 6dba14c

Sidebar therefore is always visible, even in readOnly mode

Add the svg files to the lib transpilation

Add link to tooltip bar

It should be possible to add links via the selection tooltip

Error feedback

Provide an error feedback on the validation

Media buttons

It should be possible to add media components using the side buttons.

drag and drop media

is there any talk of an enhancement allowing for drag and dropping of images and videos?

thanks!

We need docs!

There should be at least some basic documentation on how to run megadraft locally...

adding other commonly features

hi guys,
the toolbar of megadraft isn't very complete, i think it should be added other commonly features like underline, headings, ...
thanks

Editor will disable "readOnly" when a plugin receives "focus"

If the editor has readOnly=true, it can switch to readOnly=false when a plugin receives focus and you click afterwards somewhere in the editor.

E.g. if a plugin has a button or a link you can tab into the plugin to this button and then click on normal editor text.

I think if <MegadraftEditor /> has readOnly=true, it should never set its state.readOnly to false.

what you think?

E.g. an image could show a form on readOnly=false and render just as an <img /> tag on readOnly

Typing gets slow sometimes

We should find bottlenecks and try to improve typing experience.