brijeshb42 / medium-draft Goto Github PK
View Code? Open in Web Editor NEW๐ A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.
Home Page: https://bitwiser.in/medium-draft/
License: MIT License
๐ A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.
Home Page: https://bitwiser.in/medium-draft/
License: MIT License
In the demo i see that the Link command(with the symbol #) has a tooltip mentioning 'strikethrough', which is clearly not true.
Anyway i really need the link and the strikethrough commands, any idea on how to get the latter?
When i add a link to any piece of text i don't see any style effects applied on that text. The link is saved correctly btw.
And more, is it possible to set the target
attribute of the link?
Hey,
I'm the creator of http://draft-wysiwyg.herokuapp.com/
I love your medium-like draft editor, especially the keyboard-centric focus. Did you consider making medium-drafts features plugins for https://github.com/draft-js-plugins/draft-js-plugins ?
It would modularize your efforts and allow to plugin things like drag and drop or image resizing without re-implementing these.
As the title says, I'd like to display a chain icon, instead of the hashtag for the inline-toolbar
Is this possible?
Apparently the component is not updated to the latest version of React.
Specifically in the new version React.PropTypes
has been moved to its own package.
This triggers the following exception:
Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead
The issue here is that 'undefined' is not a type in JSON, and it's not something that Firebase can store.
When I try and save Editor state to firebase I get the following error message
Uncaught Error: Firebase.push failed: first argument contains undefined in property 'somePath.articles.editorState._immutable._map._root.entries.0.1._map._root.entries.0.1._map.__ownerID'
Hey there!
I just found the project, and the demo is awesome. Really. Congrats! (:
I've almost successfully implemented it, but the editor and side toolbar renders like this:
It applies the inline style and blocks if I press the buttons, but shouldn't it just show up when text selecting?
I've tried looking for a style that might be breaking it, but couldn't find anything.
Any clues what might be happening here?
Thanks!
Hi
First off, awesome library - saves A TON of work.
However I've run into a problem. I persisting data to my DB as described in the wiki using
convertToRaw(this.state.editorState.getCurrentContent());
and then initializing it using
createEditorState(rawContent)
This works fine, unless there is any anchor tags in the content, in which case createEditorState
's convertFromRaw
enters an infinite loop
UPDATE:
Probably catching the error yields:
Unknown DraftEntity key.
at invariant (eval at <anonymous> (http://localhost:3000/site.js:596:2), <anonymous>:38:15)
at Object.get (eval at <anonymous> (http://localhost:3000/site.js:11838:2), <anonymous>:71:27)
at eval (eval at <anonymous> (http://localhost:3000/site.js:12474:2), <anonymous>:53:30)
at Array.forEach (native)
at convertFromDraftStateToRaw (eval at <anonymous> (http://localhost:3000/site.js:12474:2), <anonymous>:52:14)
at Composer.handleChange (eval at 2247 (http://localhost:3000/1.bf94ea2aa48f3cb3c814.hot-update.js:6:2), <anonymous>:224:42)
at Composer.proxiedMethod (eval at <anonymous> (http://localhost:3000/site.js:2241:2), <anonymous>:44:30)
at MediumDraftEditor._this.onChange (eval at <anonymous> (http://localhost:3000/site.js:14256:2), <anonymous>:86:19)
at MediumDraftEditor.setLink (eval at <anonymous> (http://localhost:3000/site.js:14256:2), <anonymous>:146:12)
at Toolbar.onKeyDown (eval at <anonymous> (http://localhost:3000/site.js:13608:2), <anonymous>:136:20)
Any ideas?
Is there a solution for getting rid of the the empty paragraph blocks above and below an image in the editor? What's the best way to deal with them?
<div class="md-block md-block-paragraph" data-block="true" data-editor="66e9a" data-offset-key="2vr7c-0-0"><div data-offset-key="2vr7c-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="2vr7c-0-0"><br data-text="true"></span></div></div>
I use a Ajax call to get the last data from the back end, the data flows to the component correctly.
What i also see is that the onChange
event is called multiple times as the component data is populated.
I wonder if this is the expecting behavior, because with all the other components i use the onChange
method is not triggered unless the user attempts to modify the component's value.
I started using React about a week ago and am still adjusting to common patterns and conventions. You'll have to excuse me if this is completely obvious but editorState doesn't return any text content so far as I can tell...
When I hover over a link, it shows the url for it in the pop-up. How do I open the link in a new browser tab?
Do I have to toggle the edit state to off? How do I do that? Sorry, I'm new to Draft-js
First thing Awesome stuff.
Would be nice if that can support Latex.
Everytime I choose a type of list (UL or OL) from the tooltip options, I get
warning.js:36 Warning: Component's children should not be mutated.
in ol
in div (created by DraftEditorContents)
in DraftEditorContents (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in div (created by DraftEditor)
in DraftEditor (created by MediumDraftEditor)
in div (created by MediumDraftEditor)
in div (created by MediumDraftEditor)
in MediumDraftEditor (created by CreateRecall)
in div (created by CreateRecall)
in CreateRecall (created by Playground)
in div (created by Playground)
in Playground (created by Relay(Playground))
in Relay(Playground) (created by RouterContext)
in StaticContainer (created by RouteContainer)
in RouteContainer (created by RouterContext)
in RouterContext (created by Router)
in StaticContainer (created by RelayReadyStateRenderer)
in RelayReadyStateRenderer (created by IsomorphicRenderer)
in IsomorphicRenderer (created by IsomorphicRelayRouterContext)
in IsomorphicRelayRouterContext (created by Router)
in ScrollBehaviorContext (created by Router)
in Router
in Provider
in AppContainer
Cool project, thanks for this.
Could you make the MIT license clearer adding LICENSE file or mentioned it in the README?
Thanks
It seems that this library has provided an export function, but not an import function. draft-convert
supports both. I'm attempting to implement the reverse (import), but I'm new to this library and draft-convert, so it's somewhat challenging. Do you have any plans to implement convertFromHTML
?
Hi,
I am getting an error when I am trying to add picture:
addbutton.js:146 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
I think when checking for prevent default, it would be nice to check for event itself too.
Also do you have any call to print it out as a html content for saving in db?
I have manipulated your examples code as little as possible but for these two cases, when drag and dropping an image and when embedding a video from the sidebuttons, and empty block is created by default before the img block. I can't delete it from the editor without deleting the image/video.
My handleDropped code looks like:
handleDroppedFiles(selection, files) {
const file = files[0];
if (file.type.indexOf('image/') === 0) {
// const src = URL.createObjectURL(file);
const formData = new FormData();
formData.append('image', file, file.name);
imageUpload(formData).then(path => {
const src = path.path;
this.onChange(addNewBlockAt(
this.state.editorState,
selection.getAnchorKey(),
Block.IMAGE, {
src,
}
));
return HANDLED;
});
}
return NOT_HANDLED;
}
This is how it looks now, I just create a formData to be able to add it to the body when making a POST request (imageUpload is basically the request) and then I get the path where the file is stored and putting in the Block.IMAGE, as it was before
I don't add any blocks or anything, I drag the image into the empty editor and this is the resulting dom:
<div class="md-block md-block-paragraph" data-block="true" data-editor="34ndg" data-offset-key="cct11-0-0">...</div>
<figure class="md-block md-block-image" data-block="true" data-editor="34ndg" data-offset-key="1j3bh-0-0">...</figure>
For the video embed I literally copy your examples EmbedSideButton.jsx and AtomicEmbedComponent.jsx.
Adding an image from the SideButton doesn't have this issue.
Any ideas? How could I debug this? Let me know if you need more code samples!
Thanks!
Hey!
Thanks for this library first of all!
Seems it generates random ids for some elements and therefore discards server-side rendered code:
warning.js?85a7:36 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) er" id="placeholder-5s0dv" data-reactid=
(server) er" id="placeholder-evdvv" data-reactid=
This is the place react complaining about in client side html:
<div class="DraftEditor-root" data-reactid="148">
<div class="public-DraftEditorPlaceholder-root" data-reactid="149">
<div class="public-DraftEditorPlaceholder-inner" id="placeholder-5s0dv" data-reactid="150">Write your story...</div>
</div>
<div class="DraftEditor-editorContainer" data-reactid="151">
<div aria-describedby="placeholder-5s0dv" class="public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="true" style="outline:none;white-space:pre-wrap;word-wrap:break-word;" data-reactid="152">
<div data-contents="true" data-reactid="153">
<div class="md-block md-block-paragraph" data-block="true" data-editor="5s0dv" data-offset-key="f9aiq-0-0" data-reactid="154">
<div data-offset-key="f9aiq-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-reactid="155"><span data-offset-key="f9aiq-0-0" data-reactid="156"><br data-text="true" data-reactid="157"></span></div>
</div>
</div>
</div>
</div>
I can dig into it some more to find exact place where this is happening, but i think it will be way easier for someone who knows this code. Please, let me know what do you, guys, think about this
Hi, i want to add a clolor-picker component to toolbar, but I don't know how to add, can you give a suggest?
I have saw the drafts's example, that must set customStyleMap
, but I have many many colors ,so I don't know how to add color-picker function.
thanks.
does have plan to add resizable or alignment plugin to image?
Hi! I love your work and I am using it in my project. One problem though, the font-family is set and hardcoded in the index.css
file. Meaning I have to go through the file and change every font-family
statement. Is there anyway we can include the SASS or LESS file so we can add some variables for the font?
Like:
$font-sans-serif: Helvetica, sans-serif;
$font-serif: Georgia, serif;
Thank you!
Hi, I'm working with medium-draft, I'm using axios
, and js aws sdk
to upload files to s3
My first step is to get a signed URL and put my object file, at this point, all works well.
My challenge at this times is put the returned URL to my editor state, I tried differents ways to add it, and I can't figure why it's not working.
I read the medium-draft app, and the example app also and I only found one way to set the state, but it depends on a data context which involves the URL and SRC as attributes of data, That's right? image.js
So I created an anonymous function to get the context of this
and data object
at the same level, and I didn't get errors, the problem is I can't display the image over the editor.
The onChange functions looks like
onChange(e) {
const file = e.target.files[0];
if (file.type.indexOf('image/') === 0) {
api
.get(`/getSignedUrl?folder=news&filename=${file.name}&filetype=${file.type}`)
.then(response => {
const signedUrl = response.data.url
const options = {
headers: {
'Content-Type': file.type
}
}
// put file to aws
return axios.put(signedUrl, file, options)
})
.then(response => {
// second step render the s3 url into the editor
if (response.status === 200) {
response.data = {
url: response.request.responseURL.split("?")[0],
src: response.request.responseURL.split("?")[0]
}
// anonymous function to get the data context, otherwise it fails with the error
// ReferenceError: data is not defined
const withData = data => {
if (data.url) {
const src = response.request.responseURL.split("?")[0]
this.props.setEditorState(addNewBlock(
this.props.getEditorState(),
Block.IMAGE, {
src,
}
));
}
}
console.log('data', response.data)
// Object {url: "https://s3.amazonaws.com/xideral.co/news/xideral.png", src: "https://s3.amazonaws.com/xideral.co/news/xideral.png"}
return withData(response)
}
})
.catch(e => console.log('Error Uploading in blog', e))
}
this.props.close();
}
What must have src, when you don't generate it as a blob file? like const src = URL.createObjectURL(file);
? what kind of object is expecting Block.Image
instead of src blob.
I'm storing the content of the editor into my database as a JSON object, and I saw it had a missing blog data
node.
Inspecting the demo app I saw the blocks object, has a node data
, and it contains the src
attribute with the URL
to know what image will render at this point right?
And using the example from the README, (I only upload the image first #40) I don't get the data
node.
My editor state converted to raw looks like
My doubt is, How can get the data
node?, The issue is without this node when I restore my editor it doesn't know what image needs to be render.
Sir,
to upload the file I also need to pass authentication token so how should I pass any value to CustomImageComponent.
please guide me.
Why are you using strings as your ref for medium-draft in your example?
Isn't that legacy? Anyway, it doesn't work and this.refs is just an empty object.
How do I get this to work with the modern ref={(c) => this._input = c}
Hi
Is it possible to disable the link mouse/popover when the editor is readOnly?
Hi
for some reason i had to reinstall all the node modules i'm using, to do that i use npm
.
The version installed for medium-draft
was 0.3.13
and apparently it did not work(seemed like the onChange
event never fires).
After some investigation i went back to the version 0.3.12
and everything started working again.
What i wonder is how stable is that version, i don't even seem that tag on the releases.
Hi,
If you use editor inside a form, the AddButton on the bottom for adding images behaves as submit button. Which means when I want to add image it submits the whole form. So it's my polite request, if possible, to change button in AddButton to type="button" so the button doesn't behave as a submit button.
I find it funny when i selected the image but when i hit delete, it erase the caption instead of whole image block.
However, no issue when hit "Backspace".
thanks.
Hi
I'd like to supply my own stylemap to the editor like so
import { Block, Inline } from '../constants';
const emailStyleMap = {
[Block.H1]: {
fontWeight: 300,
...
},
};
I pass this as a prop on the editor, but it does not get applied.
Any ideas?
I'm trying to load the editor with previously saved data (convertToRaw) but am getting the following error: VM123741:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
Note that I used the following to save to mongodb: convertToRaw(this.state.instructions.getCurrentContent())
Easily remedied by giving it a dummy function, but would be nice if that isn't required.
<Editor editorEnabled={false} editorState={editorState} onChange={()=>{}} />
So far we can add links, but not remove it. Seems like a bug.
There are a few issues we've come across when trying to use this component on mobile devices.
So we're thinking of disabling it outright for mobile devices. Is there a prop or something similar we can do to disable the tooltip?
Any other thoughts or suggestions? It looks like medium.com for instance doesn't allow rich text editing on mobile devices. You need to use the desktop or download their native app (which extends the native toolbar and keyboard).
I'm searching for a way to display icon instead of text in toolbar. I just noticed that these lines were just commented out. I found it working pretty well after I uncommented these lines. Is there any problem to these lines?
Thanks.
Is there any plan to support image and video picker via media manager dialog in the future?
Hey there! I cloned the git repository but failed to build because react is not included in the package dependencies. I think its best to not have the react module installed globally
Cheers!
Hello,
The readme suggests passing data into the editor to initialize it:
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
How should we convert html into that data ?
Since you say you use draft-convert
for export I figure that should work for import.
draft-convert docs:
let html = "<p class="md-block-unstyled">something something</p>";
// this gives a ContentState
const rawState = convertFromHTML(html);
// nope
createEditorState(rawState);
This is obviously not the type of object you are looking for. (Errors below)
I have also tried passing that ContentState directly to medium-draft <Editor editorState={rawState} />
errors:
QueryManager.js:227 Error in observer.next
TypeError: Cannot read property 'map' of undefined
at convertFromRawToDraftState (convertFromRawToDraftState.js:48)
at createEditorState (content.js:27)
at new TextEditor (TextEditor.js:99)
at eval (createClassProxy.js:98)
at instantiate (createClassProxy.js:106)
at new TextEditor (eval at proxyClass (createClassProxy.js:NaN), <anonymous>:4:17)
at eval (ReactCompositeComponent.js:295)
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:294)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
function convertFromRawToDraftState(rawState) {
var blocks = rawState.blocks;
rawState has ._map but no .blocks
ContentState
_map: Map
blockMap: (...)
length: (...)
selectionAfter: (...)
selectionBefore: (...)
__proto__: Record
Unable to add attachment in case of editor is not empty after "editorState -> raw -> editorState" conversion
This might be a bit trivial, but I noticed in the demo that the checkboxes weren't working on Firefox when I was testing it. I really like Medium-Draft and I was thinking of having my team integrate it into our platform, so I wanted to give you guys a heads up.
Thanks.
I integrated medium-draft in my Meteor project and I really love it, thanks (yes I know, it's not really an issue... ;) ).
We're wanting to add colour inline styles to the toolbar.
I've been reading the docs and going through the code, but I'm not completely clear how to create a custom style.. with I assume customStyleMap
.
Ideally it would be great to add something like react-color.
Do we use customrenderer somehow?
Appreciate your guidance.
hi,
I'm trying to get a placeholder on my Editor with no success, what i did coming, from the draft js docs, is adding a placeholder
property to the Editor component, unfortunately it doesn't work.
I use plugin draft-js-import-html https://github.com/sstur/draft-js-import-html
but I cannot get tag , cannot get Image content
This could be outputted to markdown using html2markdown libraries. Some content may may need to be output as pure html.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.