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

prosemirror-dev-tools/toolkit not working #72

Open
schlagmichdoch opened this issue Jan 14, 2022 · 3 comments
Open

prosemirror-dev-tools/toolkit not working #72

schlagmichdoch opened this issue Jan 14, 2022 · 3 comments

Comments

@schlagmichdoch
Copy link

I tried to implement prosemirror-dev-tools / prosemirror-dev-toolkit in order to make debugging and testing the prosemirror editor much more efficient.
I was able to doge one error message by editing the Gruntfile but was left with another


  1. Install via npm
  2. Change humhub-prosemirror/Gruntfile.js the following line:
rollupPluginBuble(),

with these

rollupPluginBuble({
    objectAssign: "Object.assign",
    transforms: {
        modules: false,
        dangerousForOf: true,
    },
}),
  1. Wrap EditorView instance in applyDevTools method:
    from repository ReadMe:
import applyDevTools from "prosemirror-dev-tools";

const view = new EditorView /*...*/();

applyDevTools(view);

Done that in humhub-prosemirror/src/editor/index.js

  • Add import statement to line 9:
import { applyDevTools } from 'prosemirror-dev-toolkit'
  • Add following line after this.view declaration in line 107:
applyDevTools(this.view);
  1. run grunt rollup

Somehow afterwords the editor is not loaded properly and I get the following error messages:
grafik

Interestingly the error also occurs without applyDevTools(this.view); inserted. The import itself is enough.

Any idea how to make it work?

@schlagmichdoch
Copy link
Author

@ocavue
Copy link

ocavue commented May 16, 2022

This should be fixed in the latest version of prosemirror-dev-toolkit

@schlagmichdoch
Copy link
Author

If I do this:

import {applyDevTools} from "prosemirror-dev-tools";

const view = new EditorView /*...*/();

applyDevTools(this.view);

the original error messages are resolved now.

Apparently, the toolkit still is not working and throws the following error on the web console:

Uncaught TypeError: HTMLElement constructor: 'new' is required
    ProseMirrorDevToolkit http://127.0.0.1/assets/609e776a/humhub-editor.js?v=1684786792:16515

Screenshot 2023-05-22 222113

Luckily, since 6.1.2023 there is now a Chrome Extension available for prosemirror-dev-toolkit that does work with humhub. I'll keep this issue open though as it should also work when bundling via grunt

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

No branches or pull requests

3 participants