Issue with place option not working in Meteor package

1

I started working on a prosemirror package for Meteor.js. My ultimate goal is to create a package that can be dropped in and get both editing and collab functionality out of the box.

First step towards this goal is really to just get Prosemirror working properly on the client side through the use of a Meteor1.3 package.

I’ve was able to get something basic working with the following set of options once the package was setup and a demo app created.

  let editor = new Prosemirror({
    place: document.body,
    menuBar: true,
    autoInput: true,
    tooltipMenu: {selectedBlockMenu: true},
    doc: "Placeholder content",
    docFormat: "html"
  });

That code can be seen here if useful: https://github.com/prosemeteor/prosemirror

Then I started working on improving the demo. One of the first orders of business was to place Prosemirror somewhere different. A couple attempts failed so I looked at the Prosemirror’s own demo code and tried to replicate that.

To the html file I added

<div class="full"></div>

and change the option

place: document.body,

to

place: document.querySelector(".full"),

That change alone causes Prosemirror not to instantiate properly. I’m assuming I’m missing something stupid or have a fundamental misunderstanding of how this is supposed to work.

I was thinking maybe a likely screw-up is in how I import/export. Right now the package that brings in Prosemirror imports/exports like this:

import { ProseMirror } from "prosemirror/dist/edit"
import "prosemirror/dist/inputrules/autoinput"
import "prosemirror/dist/menu/tooltipmenu"
import "prosemirror/dist/menu/menubar"

export const Prosemirror = ProseMirror;

and in my app:

import { Prosemirror } from 'meteor/prosemeteor:prosemirror'
2

Does the <div> exist already when you run the querySelector call?

3

Apologies… drafted this a long time ago but apparently forgot to hit reply:

Something stupid it is then. Had onCreated where onRendered was supposed to be… causing the <div> to not exist before the querySelector call.

The place option is working now and we are starting discussions on architecture.

The Meteor Development Group is working on free hosting for meteor package demos. As soon as that comes out I’ll work on getting a hosted demo up.

In the mean time the basic client side demo is working and we have started some discussions on full implementation. Would love to hear if you’ve had any brainstorms on what useful document and operation snapshotting would look like on the authority side. What data should be kept around to make re-syncing and/or reverting smooth from an editor perspective and/or if your standard history could be improved by keeping some compacted form of operations around.

4

Just use ready

Example (coffeescript):

Template.hello.onCreated ->
    $( document ).ready ->
      editor = new prosemirror.ProseMirror({
        menuBar: on,
        place: document.querySelector('.editor'),
        doc: "<h1>Hello world</h1><p>Edit me!</p>",
        docFormat: "html"
      })