prosemirror-menu 0.17.0 → 0.20.0

package/README.md

@@ -29,42 +29,25 @@ is the place to report issues.
 When using this module, you should make sure its `style/menu.css` file
 is loaded into your page.
 
-### class MenuBarEditorView
+### menuBar
 
-A wrapper around
-[`EditorView`](http://prosemirror.net/ref.html#view.EditorView) that
-adds a menubar above the editor.
+`menuBar(options) → Plugin`
 
-Supports the following additional props:
+A function that returns a plugin that causes an
+[`EditorView`](http://prosemirror.net/ref.html#view.EditorView) to
+show a menubar above the content.
 
- - **`floatingMenu`**`: ?bool`\
+Supports the following options:
+
+ - **`floating`**`: ?bool`\
    Determines whether the menu floats, i.e. whether it sticks to the
    top of the viewport when the editor is partially scrolled out of
    view.
 
- - **`menuContent`**`: \[\[MenuElement]]`\
+ - **`content`**`: \[\[MenuElement]]`\
    Provides the content of the menu, as a nested array to be passed to
    `renderGrouped`.
 
-And has these properties and methods:
-
- - **`wrapper`**`: dom.Node`\
-   The wrapping DOM element around the editor and the menu. Will get
-   the CSS class `ProseMirror-menubar-wrapper`.
-
- - **`editor`**`: EditorView`\
-   The wrapped editor view. _Don't_ directly call `update` or
-   `updateState` on this, always go through the wrapping view.
-
- - **`props`**`: EditorProps`\
-   The current props of this view.
-
- - **`update`**`(props: EditorProps)`\
-   Update the view's props.
-
- - **`updateState`**`(state: EditorState)`\
-   Update only the state of the editor.
-
 ### interface MenuElement
 
 The types defined in this module aren't the only thing you can display
@@ -94,14 +77,14 @@ An icon or label that, when clicked, executes a command.
 
 The configuration object passed to the `MenuItem` constructor.
 
-* `run(EditorState, fn(Action), EditorView)`\
+* `run(EditorState, fn(Action), EditorView, dom.Event)`\
   The function to execute when the menu item is activated.
 
 * `select(EditorState) → bool`\
   Optional function that is used to determine whether the item is
   appropriate at the moment.
 
-* `onDeselect: ?string`\
+* `onDeselected: ?string`\
   Determines what happens when `select`
   returns false. The default is to hide the item, you can set this to
   `"disable"` to instead render the item with a disabled style.

package/dist/index.js

@@ -1,9 +1,9 @@
 ;var assign;
-((assign = require("./menu"), exports.MenuItem = assign.MenuItem, exports.Dropdown = assign.Dropdown, exports.DropdownSubmenu = assign.DropdownSubmenu, exports.renderGrouped = assign.renderGrouped, exports.icons = assign.icons, exports.joinUpItem = assign.joinUpItem, exports.liftItem = assign.liftItem, exports.selectParentNodeItem = assign.selectParentNodeItem, exports.undoItem = assign.undoItem, exports.redoItem = assign.redoItem, exports.wrapItem = assign.wrapItem, exports.blockTypeItem = assign.blockTypeItem))
-exports.MenuBarEditorView = require("./menubar").MenuBarEditorView
+((assign = require("./menu"), exports.MenuItem = assign.MenuItem, exports.Dropdown = assign.Dropdown, exports.DropdownSubmenu = assign.DropdownSubmenu, exports.renderGrouped = assign.renderGrouped, exports.icons = assign.icons, exports.joinUpItem = assign.joinUpItem, exports.liftItem = assign.liftItem, exports.selectParentNodeItem = assign.selectParentNodeItem, exports.undoItem = assign.undoItem, exports.redoItem = assign.redoItem, exports.wrapItem = assign.wrapItem, exports.blockTypeItem = assign.blockTypeItem, assign))
+exports.menuBar = require("./menubar").menuBar
 
 // !! This module defines a number of building blocks for ProseMirror
-// menus, along with a [menu bar](#menu.MenuBarEditorView) implementation.
+// menus, along with a [menu bar](#menu.menuBar) implementation.
 
 // MenuElement:: interface
 // The types defined in this module aren't the only thing you can

package/dist/menu.js

@@ -51,27 +51,27 @@ MenuItem.prototype.render = function render (view) {
   if (spec.css) { dom.style.cssText += spec.css }
   if (!disabled) { dom.addEventListener(spec.execEvent || "mousedown", function (e) {
     e.preventDefault()
-    spec.run(view.state, view.dispatch, view)
+    spec.run(view.state, view.dispatch, view, e)
   }) }
   return dom
 };
 exports.MenuItem = MenuItem
 
 function translate(view, text) {
-  return view.props.translate ? view.props.translate(text) : text
+  return view._props.translate ? view._props.translate(text) : text
 }
 
 // MenuItemSpec:: interface
 // The configuration object passed to the `MenuItem` constructor.
 //
-//   run:: (EditorState, (Transaction), EditorView)
+//   run:: (EditorState, (Transaction), EditorView, dom.Event)
 //   The function to execute when the menu item is activated.
 //
 //   select:: ?(EditorState) → bool
 //   Optional function that is used to determine whether the item is
 //   appropriate at the moment.
 //
-//   onDeselect:: ?string
+//   onDeselected:: ?string
 //   Determines what happens when [`select`](#menu.MenuItemSpec.select)
 //   returns false. The default is to hide the item, you can set this to
 //   `"disable"` to instead render the item with a disabled style.

package/dist/menubar.js

@@ -1,57 +1,59 @@
 var crel = require("crel")
-var ref = require("prosemirror-view");
-var EditorView = ref.EditorView;
+var ref = require("prosemirror-state");
+var Plugin = ref.Plugin;
 
 var ref$1 = require("./menu");
 var renderGrouped = ref$1.renderGrouped;
 
 var prefix = "ProseMirror-menubar"
 
-// ::- A wrapper around
-// [`EditorView`](http://prosemirror.net/ref.html#view.EditorView)
-// that adds a menubar above the editor.
+// :: (Object)
+// A plugin that will place a menu bar above the editor. Note that
+// this involves wrapping the editor in an additional `<div>`.
 //
-// Supports the following additional props:
+//   options::-
+//   Supports the following options:
 //
-// - **`floatingMenu`**`: ?bool` determines whether the menu floats,
-//   i.e. whether it sticks to the top of the viewport when the editor
-//   is partially scrolled out of view.
+//     content:: [[MenuElement]]
+//     Provides the content of the menu, as a nested array to be
+//     passed to `renderGrouped`.
 //
-// - **`menuContent`**`: [[MenuElement]]` provides the content of the
-//   menu, as a nested array to be passed to `renderGrouped`.
-var MenuBarEditorView = function MenuBarEditorView(place, props) {
+//     floating:: ?bool
+//     Determines whether the menu floats, i.e. whether it sticks to
+//     the top of the viewport when the editor is partially scrolled
+//     out of view.
+function menuBar(options) {
+  return new Plugin({
+    view: function view(editorView) { return new MenuBarView(editorView, options) }
+  })
+}
+exports.menuBar = menuBar
+
+var MenuBarView = function MenuBarView(editorView, options) {
   var this$1 = this;
 
-  // :: dom.Node The wrapping DOM element around the editor and the
-  // menu. Will get the CSS class `ProseMirror-menubar-wrapper`.
+  this.editorView = editorView
+  this.options = options
+
   this.wrapper = crel("div", {class: prefix + "-wrapper"})
-  if (place && place.appendChild) { place.appendChild(this.wrapper) }
-  else if (place) { place(this.wrapper) }
-  if (!props.dispatchTransaction)
-    { props.dispatchTransaction = function (tr) { return this$1.updateState(this$1.editor.state.apply(tr)); } }
-  // :: EditorView The wrapped editor view. _Don't_ directly call
-  // `update` or `updateState` on this, always go through the
-  // wrapping view.
-  this.editor = new EditorView(this.wrapper, props)
-
-  this.menu = crel("div", {class: prefix})
+  this.menu = this.wrapper.appendChild(crel("div", {class: prefix}))
   this.menu.className = prefix
   this.spacer = null
 
-  this.wrapper.insertBefore(this.menu, this.wrapper.firstChild)
+  editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom)
+  this.wrapper.appendChild(editorView.dom)
 
   this.maxHeight = 0
   this.widthForMaxHeight = 0
   this.floating = false
 
-  // :: EditorProps The current props of this view.
-  this.props = props
-  this.updateMenu()
+  this.update()
 
-  if (this.editor.someProp("floatingMenu")) {
+  if (options.floating) {
     this.updateFloat()
     this.scrollFunc = function () {
-      if (!this$1.editor.root.contains(this$1.wrapper))
+      var root = this$1.editorView.root
+      if (!(root.body || root).contains(this$1.wrapper))
         { window.removeEventListener("scroll", this$1.scrollFunc) }
       else
         { this$1.updateFloat() }
@@ -60,22 +62,9 @@ var MenuBarEditorView = function MenuBarEditorView(place, props) {
   }
 };
 
-// :: (EditorProps) Update the view's props.
-MenuBarEditorView.prototype.update = function update (props) {
-  this.props = props
-  this.editor.update(props)
-  this.updateMenu()
-};
-
-// :: (EditorState) Update only the state of the editor.
-MenuBarEditorView.prototype.updateState = function updateState (state) {
-  this.editor.updateState(state)
-  this.updateMenu()
-};
-
-MenuBarEditorView.prototype.updateMenu = function updateMenu () {
+MenuBarView.prototype.update = function update () {
   this.menu.textContent = ""
-  this.menu.appendChild(renderGrouped(this.editor, this.editor.someProp("menuContent")))
+  this.menu.appendChild(renderGrouped(this.editorView, this.options.content))
 
   if (this.floating) {
     this.updateScrollCursor()
@@ -91,9 +80,8 @@ MenuBarEditorView.prototype.updateMenu = function updateMenu () {
   }
 };
 
-
-MenuBarEditorView.prototype.updateScrollCursor = function updateScrollCursor () {
-  var selection = this.editor.root.getSelection()
+MenuBarView.prototype.updateScrollCursor = function updateScrollCursor () {
+  var selection = this.editorView.root.getSelection()
   if (!selection.focusNode) { return }
   var rects = selection.getRangeAt(0).getClientRects()
   var selRect = rects[selectionIsInverted(selection) ? 0 : rects.length - 1]
@@ -105,7 +93,7 @@ MenuBarEditorView.prototype.updateScrollCursor = function updateScrollCursor ()
   }
 };
 
-MenuBarEditorView.prototype.updateFloat = function updateFloat () {
+MenuBarView.prototype.updateFloat = function updateFloat () {
   var parent = this.wrapper, editorRect = parent.getBoundingClientRect()
   if (this.floating) {
     if (editorRect.top >= 0 || editorRect.bottom < this.menu.offsetHeight + 10) {
@@ -132,12 +120,10 @@ MenuBarEditorView.prototype.updateFloat = function updateFloat () {
   }
 };
 
-// :: ()
-// Destroy the editor instance.
-MenuBarEditorView.prototype.destroy = function destroy () {
-  this.editor.destroy()
+MenuBarView.prototype.destroy = function destroy () {
+  if (this.wrapper.parentNode)
+    { this.wrapper.parentNode.replaceChild(this.editorView.dom, this.wrapper) }
 };
-exports.MenuBarEditorView = MenuBarEditorView
 
 // Not precise, but close enough
 function selectionIsInverted(selection) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-menu",
-  "version": "0.17.0",
+  "version": "0.20.0",
   "description": "Simple menu elements for ProseMirror",
   "main": "dist/index.js",
   "style": "style/menu.css",
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "crel": "^3.0.0",
-    "prosemirror-view": "^0.17.0",
-    "prosemirror-commands": "^0.17.0",
-    "prosemirror-history": "^0.17.0"
+    "prosemirror-state": "^0.20.0",
+    "prosemirror-commands": "^0.20.0",
+    "prosemirror-history": "^0.20.0"
   },
   "devDependencies": {
     "buble": "^0.15.1",

package/src/README.md

@@ -3,6 +3,7 @@
 @MenuItemSpec
 @Dropdown
 @DropdownSubmenu
+@menuBar
 
 This module exports the following pre-built items or item
 constructors:

package/src/index.js

@@ -3,10 +3,10 @@
    liftItem: exports.liftItem, selectParentNodeItem: exports.selectParentNodeItem,
    undoItem: exports.undoItem, redoItem: exports.redoItem, wrapItem: exports.wrapItem,
    blockTypeItem: exports.blockTypeItem} = require("./menu"))
-exports.MenuBarEditorView = require("./menubar").MenuBarEditorView
+exports.menuBar = require("./menubar").menuBar
 
 // !! This module defines a number of building blocks for ProseMirror
-// menus, along with a [menu bar](#menu.MenuBarEditorView) implementation.
+// menus, along with a [menu bar](#menu.menuBar) implementation.
 
 // MenuElement:: interface
 // The types defined in this module aren't the only thing you can

package/src/menu.js

@@ -45,7 +45,7 @@ class MenuItem {
     if (spec.css) dom.style.cssText += spec.css
     if (!disabled) dom.addEventListener(spec.execEvent || "mousedown", e => {
       e.preventDefault()
-      spec.run(view.state, view.dispatch, view)
+      spec.run(view.state, view.dispatch, view, e)
     })
     return dom
   }
@@ -53,20 +53,20 @@ class MenuItem {
 exports.MenuItem = MenuItem
 
 function translate(view, text) {
-  return view.props.translate ? view.props.translate(text) : text
+  return view._props.translate ? view._props.translate(text) : text
 }
 
 // MenuItemSpec:: interface
 // The configuration object passed to the `MenuItem` constructor.
 //
-//   run:: (EditorState, (Transaction), EditorView)
+//   run:: (EditorState, (Transaction), EditorView, dom.Event)
 //   The function to execute when the menu item is activated.
 //
 //   select:: ?(EditorState) → bool
 //   Optional function that is used to determine whether the item is
 //   appropriate at the moment.
 //
-//   onDeselect:: ?string
+//   onDeselected:: ?string
 //   Determines what happens when [`select`](#menu.MenuItemSpec.select)
 //   returns false. The default is to hide the item, you can set this to
 //   `"disable"` to instead render the item with a disabled style.

package/src/menubar.js

@@ -1,54 +1,56 @@
 const crel = require("crel")
-const {EditorView} = require("prosemirror-view")
+const {Plugin} = require("prosemirror-state")
 
 const {renderGrouped} = require("./menu")
 
 const prefix = "ProseMirror-menubar"
 
-// ::- A wrapper around
-// [`EditorView`](http://prosemirror.net/ref.html#view.EditorView)
-// that adds a menubar above the editor.
+// :: (Object)
+// A plugin that will place a menu bar above the editor. Note that
+// this involves wrapping the editor in an additional `<div>`.
 //
-// Supports the following additional props:
+//   options::-
+//   Supports the following options:
 //
-// - **`floatingMenu`**`: ?bool` determines whether the menu floats,
-//   i.e. whether it sticks to the top of the viewport when the editor
-//   is partially scrolled out of view.
+//     content:: [[MenuElement]]
+//     Provides the content of the menu, as a nested array to be
+//     passed to `renderGrouped`.
 //
-// - **`menuContent`**`: [[MenuElement]]` provides the content of the
-//   menu, as a nested array to be passed to `renderGrouped`.
-class MenuBarEditorView {
-  constructor(place, props) {
-    // :: dom.Node The wrapping DOM element around the editor and the
-    // menu. Will get the CSS class `ProseMirror-menubar-wrapper`.
+//     floating:: ?bool
+//     Determines whether the menu floats, i.e. whether it sticks to
+//     the top of the viewport when the editor is partially scrolled
+//     out of view.
+function menuBar(options) {
+  return new Plugin({
+    view(editorView) { return new MenuBarView(editorView, options) }
+  })
+}
+exports.menuBar = menuBar
+
+class MenuBarView {
+  constructor(editorView, options) {
+    this.editorView = editorView
+    this.options = options
+
     this.wrapper = crel("div", {class: prefix + "-wrapper"})
-    if (place && place.appendChild) place.appendChild(this.wrapper)
-    else if (place) place(this.wrapper)
-    if (!props.dispatchTransaction)
-      props.dispatchTransaction = tr => this.updateState(this.editor.state.apply(tr))
-    // :: EditorView The wrapped editor view. _Don't_ directly call
-    // `update` or `updateState` on this, always go through the
-    // wrapping view.
-    this.editor = new EditorView(this.wrapper, props)
-
-    this.menu = crel("div", {class: prefix})
+    this.menu = this.wrapper.appendChild(crel("div", {class: prefix}))
     this.menu.className = prefix
     this.spacer = null
 
-    this.wrapper.insertBefore(this.menu, this.wrapper.firstChild)
+    editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom)
+    this.wrapper.appendChild(editorView.dom)
 
     this.maxHeight = 0
     this.widthForMaxHeight = 0
     this.floating = false
 
-    // :: EditorProps The current props of this view.
-    this.props = props
-    this.updateMenu()
+    this.update()
 
-    if (this.editor.someProp("floatingMenu")) {
+    if (options.floating) {
       this.updateFloat()
       this.scrollFunc = () => {
-        if (!this.editor.root.contains(this.wrapper))
+        let root = this.editorView.root
+        if (!(root.body || root).contains(this.wrapper))
           window.removeEventListener("scroll", this.scrollFunc)
         else
           this.updateFloat()
@@ -57,22 +59,9 @@ class MenuBarEditorView {
     }
   }
 
-  // :: (EditorProps) Update the view's props.
-  update(props) {
-    this.props = props
-    this.editor.update(props)
-    this.updateMenu()
-  }
-
-  // :: (EditorState) Update only the state of the editor.
-  updateState(state) {
-    this.editor.updateState(state)
-    this.updateMenu()
-  }
-
-  updateMenu() {
+  update() {
     this.menu.textContent = ""
-    this.menu.appendChild(renderGrouped(this.editor, this.editor.someProp("menuContent")))
+    this.menu.appendChild(renderGrouped(this.editorView, this.options.content))
 
     if (this.floating) {
       this.updateScrollCursor()
@@ -88,9 +77,8 @@ class MenuBarEditorView {
     }
   }
 
-
   updateScrollCursor() {
-    let selection = this.editor.root.getSelection()
+    let selection = this.editorView.root.getSelection()
     if (!selection.focusNode) return
     let rects = selection.getRangeAt(0).getClientRects()
     let selRect = rects[selectionIsInverted(selection) ? 0 : rects.length - 1]
@@ -129,13 +117,11 @@ class MenuBarEditorView {
     }
   }
 
-  // :: ()
-  // Destroy the editor instance.
   destroy() {
-    this.editor.destroy()
+    if (this.wrapper.parentNode)
+      this.wrapper.parentNode.replaceChild(this.editorView.dom, this.wrapper)
   }
 }
-exports.MenuBarEditorView = MenuBarEditorView
 
 // Not precise, but close enough
 function selectionIsInverted(selection) {

package/style/menu.css

@@ -31,10 +31,12 @@
 .ProseMirror-menu-dropdown {
   vertical-align: 1px;
   cursor: pointer;
+  position: relative;
+  padding-right: 15px;
 }
 
 .ProseMirror-menu-dropdown-wrap {
-  padding: 1px 14px 1px 4px;
+  padding: 1px 0 1px 4px;
   display: inline-block;
   position: relative;
 }
@@ -46,7 +48,7 @@
   border-top: 4px solid currentColor;
   opacity: .6;
   position: absolute;
-  right: 2px;
+  right: 4px;
   top: calc(50% - 2px);
 }
 
@@ -137,6 +139,10 @@
   cursor: pointer;
 }
 
+.ProseMirror-menu-disabled.ProseMirror-icon {
+  cursor: default;
+}
+
 .ProseMirror-icon svg {
   fill: currentColor;
   height: 1em;