prosemirror / prosemirror-menu Goto Github PK
View Code? Open in Web Editor NEWSimple menu elements for ProseMirror
Home Page: https://prosemirror.net
License: MIT License
Simple menu elements for ProseMirror
Home Page: https://prosemirror.net
License: MIT License
Getting this error
/node_modules/prosemirror-menu/dist/index.js:542 Uncaught (in promise) TypeError: Cannot read property 'replaceChild' of null
at new MenuBarView (/node_modules/prosemirror-menu/dist/index.js:542)
at Object.view (/node_modules/prosemirror-menu/dist/index.js:527)
at EditorView.updatePluginViews (/node_modules/prosemirror-view/dist/index.js:4481)
at new EditorView (/node_modules/prosemirror-view/dist/index.js:4344)
Hello,
I've noticed that you made a commit to fix that but isn't reflected on the npm package.
11d8596
Could you publish the package to npm with the fix ?
Thanks
My test code:
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser, Mark } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { addListNodes } from "prosemirror-schema-list";
import { exampleSetup } from "prosemirror-example-setup";
class MarkEditor {
#schema: Schema;
#root: HTMLElement;
#view: EditorView;
constructor() {
this.#schema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks,
});
this.#root = document.createElement("div");
this.#view = new EditorView(this.#root, {
state: EditorState.create({
doc: DOMParser.fromSchema(this.#schema).parse(document.querySelector("#content")!),
plugins: exampleSetup({ schema: this.#schema })
}),
});
}
mount(container: HTMLElement) {
container.appendChild(this.#root);
}
}
const editor = new MarkEditor();
editor.mount(document.querySelector("#app")!);
Getting this error:
index.js:17 Uncaught TypeError: Cannot read properties of null (reading 'createElement')
at getIcon (index.js:17:20)
at MenuItem.render (index.js:80:27)
at renderGrouped (index.js:285:44)
at new MenuBarView (index.js:493:31)
at Object.view (index.js:475:35)
at EditorView.updatePluginViews (index.js:5255:55)
at new EditorView (index.js:5087:14)
at new MarkEditor (main.ts:21:18)
at main.ts:34:16
And my package.json is:
{
"name": "markeditor",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^5.0.2",
"vite": "^4.4.5"
},
"dependencies": {
"prosemirror-example-setup": "^1.2.2",
"prosemirror-model": "^1.19.3",
"prosemirror-schema-basic": "^1.2.2",
"prosemirror-schema-list": "^1.3.0",
"prosemirror-state": "^1.4.3",
"prosemirror-view": "^1.31.7"
}
}
Following this example I can get ProseMirror to work fine in Light DOM, but not in Shadow DOM. Here is my code (my HTML file does nothing but embed a test-element
):
import {LitElement, html, css} from 'lit-element';
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { addListNodes } from "prosemirror-schema-list";
import { exampleSetup } from "prosemirror-example-setup";
customElements.define('test-element', class extends LitElement {
static get styles() {
return [css`
@import 'https://prosemirror.net/css/editor.css';
`];
}
render() {
return html`
<div id="editor"></div>
`;
}
firstUpdated() {
// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks
})
window.view = new EditorView(this.shadowRoot.querySelector("#editor"), {
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema).parse(this.shadowRoot.querySelector("#editor")),
plugins: exampleSetup({schema: mySchema})
})
})
}
});
This is an example of how it looks:
I installed them from NPM, which got the following versions:
"prosemirror-example-setup": "^1.1.2",
"prosemirror-model": "^1.13.3",
"prosemirror-schema-basic": "^1.1.2",
"prosemirror-schema-list": "^1.1.4",
"prosemirror-state": "^1.3.4",
"prosemirror-view": "^1.18.0"
The documentation for the Fragment
class (from the prosemirror-model
core module) does not contain information about the content
property.
I suppose that an automated tool is used to create the documentation from the comments in the source code and in the source code there is no any comment about the content:
export class Fragment {
constructor(content, size) {
this.content = content <========== :: content comment is missing =====
// :: number
// The size of the fragment, which is the total of the size of its
// content nodes.
this.size = size || 0
Best regards
I was using Prosemirror with Bootstrap. However, due to some styles conflict, after refreshing the window, the toolbar of menu expands vertically. When I looked up in the source code, it appears that DOM sets the minHeight property of menubar dynamically according to some logic that depends on maxHeight.
The class
, css
, and execEvent
parameters to MenuItem
are all described as optional, but aren't marked as such (i.e. by using ?
). This causes errors when using generated types in TypeScript.
The extracted types are otherwise working very well!
Since merging #16, if you have an editor in a scrollable parent with a scrollable top-level document, it is very easy to make the bar appear in an incorrect place. The way updateFloat
now takes a scrollParent
argument doesn't seem to work very well.
(Tested on firefox, by wrapping an editor in a 400px high overflow: auto div.)
cc @cjbest
Here's the short video:
It seems like the error is happening in this peace of code:
prosemirror-menu/src/menubar.js
Line 52 in 109cd68
this.scrollFunc = function () {
if (!this$1.editor.root.contains(this$1.wrapper))
{ window.removeEventListener("scroll", this$1.scrollFunc) }
else
{ this$1.updateFloat() }
}
And it's not the thing IE expects
It would be great if the menu buttons were tabbable straight out of the box which you'll get for free if they're <button>s
#Hello,
We're in the process of trying to style the prosemirror menu effectively, and we've encountered a couple small usability issues with menu 0.17.x
We want to add multple classes to our MenuItem without having to do anything too drastic. I found that I couldn't easy do that with the current implementation of classes being added via classList.add. Array of strings or string with spaces would not work. I patched that by just appending to the element's className property.
We want to be able to add a class property to the parent 'Prosemirror-menuitem' span also, for styling purposes. I couldn't find a way with the current implementation. My solution was to add a new spec property called 'menuItemClass' that I append to the parent span's class in renderGrouped.
I don't know if what I've done fits into your framework or not, but I've submitted my minor pull request with my basic changes #4
I'd appreciate if you could comment on how I can get around this or if prosemirror can accommodate my use cases.
Thanks
Could you please add class to the DropdownSubmenu options so the following will add the class to the "Table" menu item, it's possible to do this for Dropdown and MenuItem but not DropdownSubmenu
new DropdownSubmenu(cut([
r.insertTable
]), {label: "Table",class: "menu-createtableselection"})
Hello! I've just started using the TypeScript annotations for this module, which were auto-generated from the getdocs-style documentation, and I was having problems using undoItem
and redoItem
. I think this is because both of these symbols are defined as follows:
// :: (Object) โ MenuItem
However, in reality it seems they aren't actually functions that return MenuItem
s, but rather that they are MenuItem
s themselves. Aside from being confusing to readers--the README has similar documentation, I'm not sure if it's auto-generated from getdocs too--it also trips up the auto-generated TypeScript annotations, which requires me to use a type assertion to override it (e.g. undoItem as any as MenuItem
).
In any case, if this is indeed a mistake in the docs, and not some kind of noobish mistake I've made myself, I'm happy to submit a PR to fix things on this end, just let me know!
Thanks again for making this module, and ProseMirror in general.
When I add {..., execEvent: "click"} it is not working. I checked the source and realized that execEvent
described in spec doc but not processed at all. There is just a hardcoded "mousedown" event.
The docs above indicate that defining either a label, an icon, or a render method should be sufficient for a MenuItem. And yet after upgrading from 0.21 to 0.24 all our renderable menu items are now resulting in an error:
I didn't see anything in the changelog indicating this new behavior, but I'm surprised nobody has reported it before. Is this a regression?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.