Hello, Forge folks!
I’m trying to use the react-sortable-tree package GitHub - frontend-collective/react-sortable-tree: Drag-and-drop sortable component for nested data and hierarchies for one of my tests with Forge. but it looks like it doesn’t load the SVG images correctly. I just created a forge app with jira:globalPage
module and then content of App.js
like this
import React, {useEffect, useState} from 'react';
import {invoke} from '@forge/bridge';
import SortableTree from "react-sortable-tree";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
invoke('getText', {example: 'my-invoke-variable'}).then(setData);
}, []);
const treeData = [
{title: 'Chicken', children: [{title: 'Egg'}]},
{title: 'Fish', children: [{title: 'fingerline'}]},
]
return (
<div>
<div>
{data ? data : 'Loading...'}
</div>
<div style={{ height: 400 }}>
<SortableTree
treeData={treeData}
/>
</div>
</div>
);
}
export default App;
Expected result should look like this
but it looks like this
I added these permissions to manifest to see if it helps
permissions:
content:
styles:
- 'unsafe-inline'
scripts:
- 'unsafe-hashes'
- 'unsafe-eval'
- 'unsafe-inline'
but it doesn’t.
Do you have any comments?