Dante
Dante copied to clipboard
Unable to add any multimedia. Getting TypeError: parent is null
Problem
Whenever selecting anything from the +
icon or by drag-dropping (like code snippet, GIF, etc.), I get an error.
My code (Compose.js
)
import React, { useState } from "react";
import DanteEditor from "dante3";
const Compose = () => {
const [contentText, setContentText] = useState("");
return (
<div style={{ paddingLeft: "100px" }}>
<DanteEditor onUpdate={(editor) => setContentText(editor.getHTML())} />
{contentText}
</div>
);
};
export default Compose;
Error
Uncaught TypeError: parent is null
scanFor dom.js:42
isEquivalentPosition dom.js:31
setSelection viewdesc.js:392
setSelection viewdesc.js:893
setSelection viewdesc.js:359
selectionToDOM selection.js:57
updateStateInner index.js:173
updateState index.js:114
dispatchTransaction Editor.ts:302
dispatch index.js:374
method CommandManager.ts:35
insertImage Dante.js:1312
handleFileInput Dante.js:1327
React 14
unstable_runWithPriority scheduler.development.js:468
React 15
js index.js:4
js main.chunk.js:721
Webpack 7
dom.js:42
My package.json
{
"name": "blog",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"dante3": "^1.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Though I can easily dismiss the error by clicking the X
at the corner, it still happens all the time, and I don't want my website to be buggy.

Additional Info
I have no idea what is causing the error. I just copied the example from the docs. Furthermore, I am using the latest react, and I installed Dante using NPM.
yes I'm aware of this error, unfortunately is a bug on the tiptap/core I'm in touch with the tiptap authors to see how could be fixed thanks for the detailed report!
btw, this error is raised when there is an empty content and you add a custom blocks (indeed the ones that are created with the + button) also seen when you turn some block into code block. That is what I currently know. the error should be silently fail on production build, but I know this is very annoying on development and has to be fixed
@michelson Hey, also would like to thank you for creating this awesome tool. Had some other issues. The documentation is sadly poor, and I can't understand most of what's written and how it's being used. For example, this code block from the posts/index
page
<State initial={{ data: "" }}>
{({ state, setState }) => (
<div>
<Dante onUpdate={(editor) => setState({ data: editor.getHTML() })} />
<div class="p-4 border-green-600 rounded-md border-2 overflow-auto">
{`${state.data}`}
</div>
</div>
)}
</State>
I can't understand what type of syntax is this, and where is the State
component being imported from. Could it be translated to normal .js file components (like the one in the issue). And also, could I set default color for editor, disable h1
style (since title field would be already there) and disable uploading local images (since I would have to implement backend for that as well). Can't figure out what the documentation is saying.
Thanks...
Hi , the <State> component is an integration of https://github.com/renatorib/react-powerplug used only for demo tests. I've updated the library and the issue that you reported seems to be fixed