Launched Dabble, a novel-writing application!

jacwright · October 4, 2017, 8:15pm

I launched Dabble—my novel-writing application—last week. It requires an account, but I put up a demo version today so I could share with you all (most of whom probably don’t want to create an account, or write a novel).

https://www.dabblewriter.com/demo/

I’m not using ProseMirror to its fullest yet. Each editable bit of text is its own instance even if it looks like it could be one instance. I’ll be working on making heavier use of custom schemas in the future.

Some highlights, I am using my own plugins for:

placeholders
spaces plugin to allow only 1 space (I think this may have issues on FF)
a custom popup menu when you highlight text
navigation plugin that will take you to the next/previous PM instance when using the arrow keys
customized history that breaks history on periods and arrow-keys

Thanks for all the great help and tools! Especially @marijn of course.

marijn · October 4, 2017, 8:41pm

Very nice! I love how clean the interface feels. If you want me to retweet some announcement from @prosemirror let me know.

(I noticed one tiny issue – your tooltips are centered oddly if the selection goes across lines, often floating somewhere on the side of the top selected line. In cases like that, I’ve made sure it centered on the top line part of the selection, which I think looks better.)

jacwright · October 4, 2017, 8:47pm

A retweet would be great. I suppose the launch tweet would work https://twitter.com/dabblewriter/status/913155636090818562 or you could create your own tweet with the demo link if you’d rather since that would be more interesting for prosemirror followers.

The menu is centering on the containing block node (paragraph) so when you have a couple short lines it does look very funny. I ought to put a bit more work into getting the position of just the text from that first line. Thanks for checking it out!

burlesona · October 8, 2017, 8:54pm

Looks great @jacwright!

jacwright · October 9, 2017, 9:32pm

Thanks! I appreciate it.

Keats · October 11, 2017, 2:53am

Look & feel very nice!

The page is consistenly waaaaay slower to load the app on Chrome 61 ([Load] Took 11550 ms to load the app) than Firefox 55 ([Load] Took 2535 ms to load the app) because Firefox serves it cached and somehow Chrome doesn’t. It also misses Cloudfront cache in every request (x-cache:Miss from cloudfront) so something is probably missing there.

Looks like the files are not minified and gzip is not enabled either, that should go a long way to make the download of the JS files faster.

jacwright · October 11, 2017, 3:22am

Thanks. I’ll look into it.

supersonicecho · February 8, 2018, 10:49pm

I’m impressed!

Quick question, how did you handle only popping up the bubble toolbar when the user mouses up?

jacwright · February 9, 2018, 5:12am

I made my editor repo public just now to share with you all.

I track mouse down and mouse up for the menu. See

github.com

dabblewriter/dabble-editor/blob/master/src/plugins/menu.js

// import { wrapItem, blockTypeItem, Dropdown, DropdownSubmenu, joinUpItem, liftItem,
//        selectParentNodeItem, undoItem, redoItem, icons, MenuItem } from 'prosemirror-menu';
import { Plugin, Selection, NodeSelection } from 'prosemirror-state';
import { toggleMark, setBlockType } from 'prosemirror-commands';


class Menu {

  constructor(view) {
    this.view = view;
    this.blurred = false;
    this.onClose = null;
    this.element = createMenu(this);
    if (!this.element.items.children.length) {
      // Don't do anything if the menu is empty
      this.update = () => {};
      return;
    }
    let dom = view.dom;
    let doc = dom.ownerDocument;

This file has been truncated. show original

Other things that may be of interest: I customized undo to break at places I felt were more intuitive. I try to make keyboard navigation work well between PM editors. I have placeholders that use CSS ::before styling to add. I keep spaces to 1 like Medium. And I make the first letter in a chapter large and bold (not in the demo).

Hope this may help others.

supersonicecho · February 9, 2018, 5:23am

Awesome!

Thanks for sharing.