Dante icon indicating copy to clipboard operation
Dante copied to clipboard

Unable to add any multimedia. Getting TypeError: parent is null

Open SnazzyCoder opened this issue 3 years ago • 4 comments

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.

Error Screenshot

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.

SnazzyCoder avatar Jun 01 '21 07:06 SnazzyCoder

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!

michelson avatar Jun 02 '21 04:06 michelson

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 avatar Jun 02 '21 04:06 michelson

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

SnazzyCoder avatar Jun 02 '21 09:06 SnazzyCoder

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

michelson avatar Jun 05 '21 01:06 michelson