Comments (22)
Actually I did a working d&d with react-dnd in myproject. It's not problem to break draft-js, because we can not do any edit action when dragging a block. Only a small change to DraftEditorContents
to open a prop for reorder elements.
from draft-js.
@jan4984 亲,提供个示例可以否?就找到这么一个靠谱的方案
English version: Darling, could you please give me an example? This is the best solution ever I found. @bkniffler
from draft-js.
@kozhuhds @leejaen I'm busy in my project now. I will have some time one month later, I will publish a working demo then.
from draft-js.
@kozhuhds @leejaen please check the demo project.
from draft-js.
Okay, I'm currently playing around with HTML drag/drop.
Here is what I've come up with, quick and dirty
Here the script: https://gist.github.com/bkniffler/f50b3d58401556c5b0ae
Just put it into an example/drag-drop folder of draftJS.
A helper method on blocks to get the blocks range would be cool.
contentBlock.getRange();
// or something like that
ContentBlock.getRangeAsSelection();
// It would be an easy function, but helpful
function getRange(){
return new SelectionState({
anchorKey: blockKey,
anchorOffset: 0,
focusKey: blockKey,
focusOffset: block.getLength(),
});
}
Also helper functions for adding/removing blocks would be great.
For some reason, onDragOver, onDrop, onDragEnter are not fired if put on the Editor, thats why I bound the event to the wrapping div.
from draft-js.
Is there even a way to include images with the current editor?
from draft-js.
No, I'd really hope for a few more examples (inline toolbar, collaborative editing maybe?), but think images shouldn't be too much of a problem using custom components.
from draft-js.
See http://facebook.github.io/draft-js/docs/advanced-topics-block-components.html for an example of creating a media block component
from draft-js.
Correct, inline images can be rendered with custom block components.
I've experimented with drag&drop for photos with the Notes editor, but haven't shipped anything. I wasn't using regular HTML drag/drop since I was aiming for a design that animated blocks around my mouse movement, using rebound.js. (Absolute positioning for every block set via blockProps
, etc.) It worked, but it was a low-pri feature for us and I didn't pursue it further.
I'd love to see an example that uses the normal drag/drop events, and I'd be happy to help support it if changes are needed. I haven't implemented it myself, though.
from draft-js.
A helper method on blocks to get the blocks range would be cool.
Sounds useful. I think there are a few places within the repo (and in FB use cases) that would benefit. How about:
class SelectionState ... {
static function fromBlock(block: ContentBlock): SelectionState {
const blockKey = block.getKey();
// your implementation above, plus `isBackward: false`
}
...
}
To remove a block, you can use Modifier.removeRange
with the target set to the block you want to remove.
I'm going to give your drag/drop example a try now. :)
from draft-js.
Ok, I played around with this a bit. I think a couple of things would be useful additions to the API:
- A prop function on
Editor
to expose drops:
handleDrop?: (e: SyntheticDragEvent, target: SelectionState) => boolean
- A
Modifier
method that encapsulates moving an entire block within theContentState
. It requires a bit of moving, deleting, and block-type setting, and if block component drag/drop is going to be more widespread, a common method would probably be useful.
Here's a gist with some of the changes I made to try to get it working: https://gist.github.com/hellendag/6cd425613caabb7f238d
Right now it's copying the block for the drag rather than moving it entirely, so I'm sure I missed something.
I think this has potential to be a really useful example for the repo! Thanks for getting it started.
from draft-js.
I have been messing around with https://github.com/gaearon/react-dnd and draft, but so far I am finding it hard to understand what happens with block components under the hood
from draft-js.
@nelix I think react-dnd is not the right way to go (in this specific case), as it would require to change the way draft-js works.
@hellendag Thanks for the effort, I'll take a closer look at your changes later today to check out what to incorporate into the example and what to learn from it. Yesterday I've extended my code to work better and to get block resizing to work. I uploaded it a few moments ago on github and heroku, you can check it out here:
Heroku: http://draft-wysiwyg.herokuapp.com/
Github: https://github.com/bkniffler/draft-wysiwyg
The modifier method you talked about would be extremely helpful, along with a few more helpers like
- fromBlock you posted
- addBlock(type, selection, props) (maybe a bit like here https://github.com/bkniffler/draft-wysiwyg/blob/master/src/draft.js#L181), without the clutter of course
- removeBlock(key)
- selection helpers to get start or end of document (https://github.com/bkniffler/draft-wysiwyg/blob/master/src/draft.js#L200) or to get the exact cursor position
- setEntityData(index, key, value) on a block, a bit like here (https://github.com/bkniffler/draft-wysiwyg/blob/master/src/draft.js#L115) and getEntityData(..)
Currently it is not too easy to implement moving a block (add a copy of the block, deleting; though I'm having trouble completely removing it, so using this workaround https://github.com/bkniffler/draft-wysiwyg/blob/master/src/draft.js#L106).
from draft-js.
@hellendag I tried to run your code, but it will throw an error after drop
Uncaught Invariant Violation: Unknown node in selection range.
btw Do you have a slack channel or some other discussion platform?
from draft-js.
btw Do you have a slack channel or some other discussion platform?
Great suggestion! I've just created a Slack team for this: https://draftjs.slack.com
I tried to run your code, but it will throw an error after drop
Ha not surprised, I was hacking around with it and probably broke a few things. I'll play around with it a bit more.
from draft-js.
@hellendag Thanks for creating the slack, though I think you should enable email signup to make it easier to join in :)
from draft-js.
I'd love to join too.
from draft-js.
Ah sorry, I'm a Slack noob.
It looks like I can only enable certain domains for the Slack team, or invite by email, unless there's another option I'm missing. If so, it seems like the simplest thing for me to do right now is to keep invite-by-email and post details in the Readme to help people join. If you want to send me your email address at [email protected], I'll send you an invite.
from draft-js.
For slack you can use https://github.com/rauchg/slackin to automate the process
from draft-js.
@jan4984 cool! could you provide code examples or demo?
from draft-js.
Amazing job! 1000 Thanks!
from draft-js.
Friends, We are implementing drag and drop feature with draftjs akin to sortablejs drag/drop. Any inputs or suggestions regarding this will be appreciated. Thanks.
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.