Skip to content

react-sortable-tree not working with react-froala-wysiwyg #242

Open
@andershansander

Description

@andershansander

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 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions