react-sortable-tree not working with react-froala-wysiwyg
See original GitHub issueHi!
When using react-sortable-tree with another drag-n-drop component like react-froala-wysiwyg the tree work as expected but the drag-n-drop in react-froala-wysiwyg is blocked.
Here are the steps to create a project with the issue:
npm install -g react-create-app react-create-app sortable_tree_and_froala cd sortable_tree_and_froala npm install --save react-sortable-tree react-froala-wysiwyg
Replace the index.js content with this:
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import Tree from 'react-sortable-tree'
import FroalaEditor from 'react-froala-wysiwyg';
import 'font-awesome/css/font-awesome.css';
import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import $ from 'jquery';
window.$ = $;
const App = () => (
<div>
<Tree />
<FroalaEditor treeData={{}}/>
</div>
);
render(<App />, document.getElementById('root'));
Now if you run “npm start” and insert an image in the Froala editor it cannot be dragged and dropped to another location in the editor window.
I understand if interoperability issues are not really something you look into so feel free to close this issue if that is the case.
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
react-froala-wysiwyg not working with react-sortable-tree #64
Hi! When using react-froala-wysiwyg with another drag-n-drop component like react-sortable-tree the tree work as expected but the ...
Read more >react-sortable-tree not working with react-froala-wysiwyg
Hi! When using react-sortable-tree with another drag-n-drop component like react-froala-wysiwyg the tree work as expected but the drag-n-drop in ...
Read more >React component for Froala WYSIWYG HTML Rich Text Editor
Pass properties to the wrapping DOM element ; a, ; button, ; img, ; input. Do not use them in FroalaEditor component. To...
Read more >react-froala-wysiwyg - npm
React component for Froala WYSIWYG HTML rich text editor. ... Start using react-froala-wysiwyg in your project by running `npm i ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
https://github.com/fritz-c/react-sortable-tree#if-it-doesnt-work-with-other-components-that-use-react-dnd Try the method explained there. react-dnd only allows for one dnd context at a time, so you’ll also need to see if the froala editor allows you to get their component without the dnd context wrapping it.
Hi I have posted another issue https://github.com/frontend-collective/react-sortable-tree/issues/757, whereby I need the tree to recieve a drop event from another framework that uses JQuerys’ draggable plugin and was trying to work out how to do this.
This thread had a similar topic.
I you could point the way that would be fantastic.