ld-x / last-draft Goto Github PK
View Code? Open in Web Editor NEW:pen: a Draft.js editor
:pen: a Draft.js editor
Steps to reproduce:
Would like to be able to use last-draft image upload for more robust image handling. Would be nice at the very least to support other attributes on image tags like srcset, alt and title. In addition, it'd be great to be able to do alignment and stuff as well but i think the 3 in the title are important.
Here is a gif of two uploads launched at the same time (each is waiting 10 seconds for completion)
Once the first one is finished, the placeholder block of the second is destroyed. But once the promise is resolved the image block is created perfectly for the second image. However, the first image block seems to change to the placeholder type (you can notice the opacity modification)
After use it according to readme mentioned, I got some errors:
Module not found: 'draft-convert'
Module not found: 'draft-js-dnd-plugin'
I saw draft-convert
is peerDependencies, so I add it to my project; but how about draft-js-dnd-plugin
?
If I upload an image A.jpg and wait for the image to be uploaded the block is created.
But if I try to reupload it once again it doesn't work and there is no error displayed.
If I upload another image B.jpg it works and then I can reupload A.jpg if I want.
In a way, it's kind of a great feature to prevent people from uploading the same image twice but I think it should at least display a message.
Steps to reproduce:
seems as if plugins to not get/handle readOnly?
(same problem exists on megadraft: globocom/megadraft#82)
Loved the work!
Was just wondering if there is any way to add code block? This package has everything I need. if there is support for code block I can easily migrate to this.
Mention plugin from Draft.js plugins
it would be nice if we could find a way to have only color.js for colors in the color picker and editor because for now if color.js(editor) != color.js(ld-color-picker)
you will get no/wrong colors because of how draft works.
inside the plugin system is there a way access the styleMap? if so we could pull out the colors there and generator what is need for the color picker.
Hey this looks like it would be great, but it doesn't seem to let me disable the default image plugin.
I would think I could do plugins={[]}
for example, to disable all plugins, but the image
plugin remains... Looking at the code, this is because the plugins
prop only allows you to push new plugins onto the array, not set it.
https://github.com/vacenz/last-draft/blob/master/src/components/Editor.js#L154
Is there some constraint I don't understand that will not let us provide our own list?
bundle.js:7779 Uncaught TypeError: Cannot read property '__reactInternalInstance$rc1tkywex4htm05izkv7h9f6r' of null(โฆ)getClosestInstanceFromNode @ bundle.js:7779findParent @ bundle.js:126246handleTopLevelImpl @ bundle.js:126275perform @ bundle.js:27598batchedUpdates @ bundle.js:53331batchedUpdates @ bundle.js:9615dispatchEvent @ bundle.js:126355
http://localhost:3000/example/styles/plugins.css Failed to load resource: the server responded with a status of 404 (Not Found)
@codeKonami I just put in a small update to the logic for linkify here which means that links are only matched when they have a url schema.
This now works well in my editor I am using last draft for, but I think that is because on the server we are transforming valid links to an <a>
tag. It looks like there is no entity support for draft-js-export-html so I am not sure what the best approach for this is? Using draft-convert convertToHTML would work well for this, but I have found it to be very slow compared to draft-js-export-html.
The other update was to links in the toolbar, ensuring they save with the schema. It fixes the issue where it was saving invalid links e.g. g.co
where we really want to save https://g.co
Looks like every div tag from and to HTML is getting converted to a <p>
tag. Nested divs looks end up looking like <p><br></p>
this. Making for some really strange looking formatting.
When I upload an image and edit the caption, I'd naturally use the enter key to go the next block but it doesn't do anything.
Thanks for this great editor!
You can see more clearly the bugs on the gif attached. There are two bugs.
First, after uploading an image, a block is created after the block image but the sidebar doesn't follow.
Secondly, after creating a new empty block, the sidebar comes down but a click on it doesn't display the toolbar at the right position it seems stuck on the block above the image. Some text needs to be entered to position correctly the toolbar.
Awesome job on last-draft! It's really great. Would love it if it were possible to choose multiple headings in the blocks array, as opposed to just h2 - seems like the only interface to extending last-draft right now is through plugins, and that would probably be overkill for users who just want to include h1, h3, h4, h5, and/or h6 tags.
I want to disable unicorns plugin :)
There doesn't seem to be a way to set the initial state to empty - am I missing something here? Is this perhaps something that requires using a draft-js method I don't know about?
with initial raw content as in the example such as:
const raw = {
'entityMap': {},
'blocks': [{
"key": "ag6qs",
"text": "Start typing",
"type": "quote",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}]
};
everything works fine, but with:
const raw = {
'entityMap': {},
'blocks': []
};
I get:
ContentState.js?72c3:119
Uncaught (in promise) TypeError: Cannot read property 'getKey' of undefined
Hey @StevenIseki I put in a PR yesterday to fix the iframe issue... I saw you merged it (thanks!) but then made a series of subsequent changes which somehow brings me back to square one - still have problems with iframes in the editor.
The iframes ARE saving (which is an improvement) but now they just plain don't show up in the editor anymore (they were at the time of my code getting merged - for now I am pointing to my forked branch since that is working with iframe insertion, but v1.3.0 is not).
The demo pages are empty.
Can I decide which plugin to use in v3?
I want to remove some plugins from default plugins that I don't need.
https://github.com/vacenz/last-draft/blob/v3/src/components/Editor.js#L146
https://github.com/vacenz/last-draft/blob/v3/src/components/Editor.js#L82
But as the code shows, it seems there is no way to add some custom plugins or enable/disable some plugins.
Is it already possible to somehoe disable the video or / and image plugin? From reading the code, it seams they always get appended.
Wouldn't you think it's better to give the user the freedom to decide if they are needed?
I see you've created your own custom plugins as examples - does this mean that last-draft won't work with draft-js-plugins? If not, could you give some clarification as to why and what kind of work needs to be done to either modify such plugins or create our own? If they are meant to work with last-draft out of the box, perhaps it would be a good thing to mention in the documentation - that would be a big selling point I think.
Need to exit the autocomplete for mentions and emoji key binding, if
Otherwise the async function might send way too much data.
Hey,
I noticed you tried to remove the new option line in the convert.js
https://github.com/vacenz/last-draft/blob/master/src/utils/convert.js#L118
If you would I can look into changing this solution to not use the new Option
Hello, thanks for the great editor.
I try to integrate your editor into my project. However, the package failed to build.
The error is:
Module not found: Error: Cannot resolve 'file' or 'directory' ./Blockquote in /node_modules/last-draft/lib/components/Buttons
However, in the npm(yarn) package, inside the above folder, there is this file:
BlockQuote.js
as in your git repo:
Blockquote.js
(Notice the capitalized Q, this only fail to build on Linux, it is working fine in mac)
Hi @StevenIseki,
Could you please put the copyright holder and license inside each Megadraft's file? For the files you have modified, you can add a new copyright notice with your name.
Cheers!
Hi, I'm trying out the V3 Editor
component but am having trouble getting started.
proxyConsole.js:56 Warning: React.createElement: type is invalid
-- expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to
export your component from the file it's defined in. Check the render
method of `AlignmentTool`
render
methodThere's nothing too fancy going on. The editorState
prop is an instance of regular DraftJS' EditorState
. The plugin is draft-js-mention-plugin
<Editor
editorState={this.state.bodyState}
onChange={this.updateBodyState}
placeholder="some placeholder text..."
plugins={plugins}
/>
"dependencies": {
"draft-js": "^0.10.1",
"draft-js-mention-plugin": "^2.0.0-rc2",
"draft-js-plugins-editor": "^2.0.0-rc2",
"last-draft": "^3.0.0",
"react": "^15.5.4"
}
any insight on this issue?
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.