Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
SnazzyCoder opened this issue Jun 1, 2021 · 4 comments
Open

Comments

@SnazzyCoder
Copy link

SnazzyCoder commented Jun 1, 2021

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.

@michelson
Copy link
Owner

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
Copy link
Owner

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

@SnazzyCoder
Copy link
Author

SnazzyCoder commented Jun 2, 2021

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

@michelson
Copy link
Owner

Hi , the 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants