@remirror/react-node-view - npm Package Compare versions

Comparing version 0.7.4 to 0.7.5

CHANGELOG.md

 # @remirror/react-node-view
 
+## 0.7.5
+
+### Patch Changes
+
+- Updated dependencies [24f83413]
+  - @remirror/core-types@0.8.0
+  - @remirror/core-helpers@0.7.5
+  - @remirror/core-utils@0.7.5
+
 ## 0.7.4
@@ -4,0 +13,0 @@

lib/dist/react-node-view.cjs.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
@@ -16,48 +14,36 @@ var core = require('@emotion/core');
 
-var ReactNodeView =
-/*#__PURE__*/
-function () {
-  _createClass(ReactNodeView, [{
-    key: "dom",
+class ReactNodeView {
+  /**
+   * The outer element exposed to the editor.
+   */
 
-    /**
-     * The outer element exposed to the editor.
-     */
+  /**
+   * Provides readonly access to the dom element
+   */
+  get dom() {
+    return this.domRef;
+  }
+  /**
+   * The ProsemirrorNode that this nodeView is responsible for rendering.
+   */
 
-    /**
-     * Provides readonly access to the dom element
-     */
-    get: function get() {
-      return this.domRef;
-    }
-    /**
-     * The ProsemirrorNode that this nodeView is responsible for rendering.
-     */
 
-  }]);
-
-  function ReactNodeView(_ref) {
-    var _this = this;
-
-    var Component = _ref.Component,
-        getPosition = _ref.getPosition,
-        _node = _ref.node,
-        portalContainer = _ref.portalContainer,
-        view = _ref.view,
-        options = _ref.options;
-
-    _classCallCheck(this, ReactNodeView);
-
+  constructor({
+    Component,
+    getPosition,
+    node: _node,
+    portalContainer,
+    view,
+    options
+  }) {
     _defineProperty(this, "contentDOMWrapper", null);
 
-    _defineProperty(this, "getPosition", function () {
-      return 0;
-    });
+    _defineProperty(this, "getPosition", () => 0);
 
     _defineProperty(this, "selected", false);
 
-    _defineProperty(this, "handleRef", function (node) {
+    _defineProperty(this, "handleRef", node => {
       var _this$contentDOMWrapp;
 
-      var contentDOM = (_this$contentDOMWrapp = _this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : _this.contentDOM; // move the contentDOM node inside the inner reference after rendering
+      const contentDOM = (_this$contentDOMWrapp = this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : this.contentDOM; // move the contentDOM node inside the inner reference after rendering
 
@@ -90,231 +76,206 @@ if (node && contentDOM && !node.contains(contentDOM)) {
 
-  _createClass(ReactNodeView, [{
-    key: "init",
-    value: function init() {
-      var _this$getContentDOM,
-          _this2 = this;
+  init() {
+    var _this$getContentDOM;
 
-      this.domRef = this.createDomRef();
-      this.setDomAttrs(this.node, this.domRef);
+    this.domRef = this.createDomRef();
+    this.setDomAttrs(this.node, this.domRef);
+    const {
+      dom: contentDOMWrapper,
+      contentDOM
+    } = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
+      dom: undefined,
+      contentDOM: undefined
+    };
 
-      var _ref2 = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
-        dom: undefined,
-        contentDOM: undefined
-      },
-          contentDOMWrapper = _ref2.dom,
-          contentDOM = _ref2.contentDOM;
+    if (contentDOMWrapper) {
+      this.domRef.appendChild(contentDOMWrapper);
+      this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
+      this.contentDOMWrapper = contentDOMWrapper;
+    }
 
-      if (contentDOMWrapper) {
-        this.domRef.appendChild(contentDOMWrapper);
-        this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
-        this.contentDOMWrapper = contentDOMWrapper;
-      }
+    this.domRef.classList.add("".concat(coreConstants.EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return this;
+  }
 
-      this.domRef.classList.add("".concat(coreConstants.EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
-      this.renderReactComponent(function () {
-        return _this2.render(_this2.handleRef);
-      });
-      return this;
+  renderReactComponent(render = () => this.render(this.handleRef)) {
+    if (!this.domRef) {
+      return;
     }
-  }, {
-    key: "renderReactComponent",
-    value: function renderReactComponent() {
-      var _this3 = this;
 
-      var render = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return _this3.render(_this3.handleRef);
-      };
+    this.portalContainer.render({
+      render,
+      container: this.domRef
+    });
+  }
+  /**
+   * Create a dom ref
+   */
 
-      if (!this.domRef) {
-        return;
-      }
 
-      this.portalContainer.render({
-        render: render,
-        container: this.domRef
-      });
-    }
-    /**
-     * Create a dom ref
-     */
+  createDomRef() {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-  }, {
-    key: "createDomRef",
-    value: function createDomRef() {
-      var toDOM = this.node.type.spec.toDOM;
+    if (toDOM) {
+      const domSpec = toDOM(this.node);
 
-      if (toDOM) {
-        var domSpec = toDOM(this.node);
+      if (coreHelpers.isString(domSpec)) {
+        return document.createElement(domSpec);
+      }
 
-        if (coreHelpers.isString(domSpec)) {
-          return document.createElement(domSpec);
+      if (coreUtils.isDOMNode(domSpec)) {
+        if (!coreUtils.isElementDOMNode(domSpec)) {
+          throw new Error('Invalid HTML Element provided in the DOM Spec');
         }
 
-        if (coreUtils.isDOMNode(domSpec)) {
-          if (!coreUtils.isElementDOMNode(domSpec)) {
-            throw new Error('Invalid HTML Element provided in the DOM Spec');
-          }
+        return domSpec;
+      } // Use the outer element string to render the dom node
 
-          return domSpec;
-        } // Use the outer element string to render the dom node
 
+      return document.createElement(domSpec[0]);
+    }
 
-        return document.createElement(domSpec[0]);
-      }
+    return this.node.isInline ? document.createElement('span') : document.createElement('div');
+  }
+  /**
+   * Override this method in order to return a content dom which allow
+   */
 
-      return this.node.isInline ? document.createElement('span') : document.createElement('div');
-    }
-    /**
-     * Override this method in order to return a content dom which allow
-     */
 
-  }, {
-    key: "getContentDOM",
-    value: function getContentDOM() {
-      return undefined;
-    }
-  }, {
-    key: "render",
-    value: function render(forwardRef) {
-      var Component = this.Component,
-          getPosition = this.getPosition,
-          node = this.node,
-          options = this.options,
-          view = this.view,
-          selected = this.selected;
-      return core.jsx(Component, {
-        selected: selected,
-        view: view,
-        getPosition: getPosition,
-        node: node,
-        forwardRef: forwardRef,
-        options: options
-      });
-    }
-  }, {
-    key: "update",
-    value: function update(node, _) {
-      var _this4 = this;
+  getContentDOM() {
+    return undefined;
+  }
 
-      var validUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-        return true;
-      };
-      // see https://github.com/ProseMirror/prosemirror/issues/648
-      var isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
+  render(forwardRef) {
+    const {
+      Component,
+      getPosition,
+      node,
+      options,
+      view,
+      selected
+    } = this;
+    return core.jsx(Component, {
+      selected: selected,
+      view: view,
+      getPosition: getPosition,
+      node: node,
+      forwardRef: forwardRef,
+      options: options
+    });
+  }
 
-      if (!isValidUpdate) {
-        return false;
-      }
+  update(node, _, validUpdate = () => true) {
+    // see https://github.com/ProseMirror/prosemirror/issues/648
+    const isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
 
-      if (this.domRef && !this.node.sameMarkup(node)) {
-        this.setDomAttrs(node, this.domRef);
-      }
+    if (!isValidUpdate) {
+      return false;
+    }
 
-      this.node = node;
-      this.renderReactComponent(function () {
-        return _this4.render(_this4.handleRef);
-      });
-      return true;
+    if (this.domRef && !this.node.sameMarkup(node)) {
+      this.setDomAttrs(node, this.domRef);
     }
-    /**
-     * Copies the attributes from a ProseMirror Node to a DOM node.
-     *
-     * @param node The Prosemirror Node from which to source the attributes
-     */
 
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var toDOM = this.node.type.spec.toDOM;
+    this.node = node;
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return true;
+  }
+  /**
+   * Copies the attributes from a ProseMirror Node to a DOM node.
+   *
+   * @param node The Prosemirror Node from which to source the attributes
+   */
 
-      if (toDOM) {
-        var domSpec = toDOM(node);
 
-        if (coreHelpers.isString(domSpec) || coreUtils.isDOMNode(domSpec)) {
-          return;
-        }
+  setDomAttrs(node, element) {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-        var attrs = domSpec[1];
+    if (toDOM) {
+      const domSpec = toDOM(node);
 
-        if (coreHelpers.isPlainObject(attrs)) {
-          coreHelpers.keys(attrs).forEach(function (attr) {
-            element.setAttribute(attr, String(attrs[attr]));
-          });
-          return;
-        }
+      if (coreHelpers.isString(domSpec) || coreUtils.isDOMNode(domSpec)) {
+        return;
       }
 
-      coreHelpers.keys(node.attrs).forEach(function (attr) {
-        element.setAttribute(attr, node.attrs[attr]);
-      });
-    }
-    /**
-     * Marks the node as being selected
-     */
+      const attrs = domSpec[1];
 
-  }, {
-    key: "selectNode",
-    value: function selectNode() {
-      this.selected = true;
-
-      if (this.domRef) {
-        this.domRef.classList.add(coreConstants.SELECTED_NODE_CLASS_NAME);
+      if (coreHelpers.isPlainObject(attrs)) {
+        coreHelpers.keys(attrs).forEach(attr => {
+          element.setAttribute(attr, String(attrs[attr]));
+        });
+        return;
       }
+    }
 
-      this.renderReactComponent();
-    } // Remove selected node marking from this node.
+    coreHelpers.keys(node.attrs).forEach(attr => {
+      element.setAttribute(attr, node.attrs[attr]);
+    });
+  }
+  /**
+   * Marks the node as being selected
+   */
 
-  }, {
-    key: "deselectNode",
-    value: function deselectNode() {
-      this.selected = false;
 
-      if (this.domRef) {
-        this.domRef.classList.remove(coreConstants.SELECTED_NODE_CLASS_NAME);
-      }
+  selectNode() {
+    this.selected = true;
 
-      this.renderReactComponent();
+    if (this.domRef) {
+      this.domRef.classList.add(coreConstants.SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * This is called whenever the node is being destroyed.
-     */
 
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (!this.domRef) {
-        return;
-      }
+    this.renderReactComponent();
+  } // Remove selected node marking from this node.
 
-      this.portalContainer.remove(this.domRef);
-      this.domRef = undefined;
-      this.contentDOM = undefined;
+
+  deselectNode() {
+    this.selected = false;
+
+    if (this.domRef) {
+      this.domRef.classList.remove(coreConstants.SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * A shorthand method for creating the ReactNodeView
-     */
 
-  }], [{
-    key: "createNodeView",
-    value: function createNodeView(_ref3) {
-      var Component = _ref3.Component,
-          portalContainer = _ref3.portalContainer,
-          options = _ref3.options;
-      return function (node, view, getPosition) {
-        return new ReactNodeView({
-          node: node,
-          view: view,
-          getPosition: getPosition,
-          portalContainer: portalContainer,
-          Component: Component,
-          options: options
-        }).init();
-      };
+    this.renderReactComponent();
+  }
+  /**
+   * This is called whenever the node is being destroyed.
+   */
+
+
+  destroy() {
+    if (!this.domRef) {
+      return;
     }
-  }]);
 
-  return ReactNodeView;
-}();
+    this.portalContainer.remove(this.domRef);
+    this.domRef = undefined;
+    this.contentDOM = undefined;
+  }
+  /**
+   * A shorthand method for creating the ReactNodeView
+   */
 
+
+  static createNodeView({
+    Component,
+    portalContainer,
+    options
+  }) {
+    return (node, view, getPosition) => new ReactNodeView({
+      node: node,
+      view,
+      getPosition,
+      portalContainer,
+      Component,
+      options
+    }).init();
+  }
+
+}
+
 exports.ReactNodeView = ReactNodeView;
 //# sourceMappingURL=react-node-view.cjs.js.map

lib/dist/react-node-view.esm.js

@@ -1,3 +0,1 @@
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -9,48 +7,36 @@ import { jsx } from '@emotion/core';
 
-var ReactNodeView =
-/*#__PURE__*/
-function () {
-  _createClass(ReactNodeView, [{
-    key: "dom",
+class ReactNodeView {
+  /**
+   * The outer element exposed to the editor.
+   */
 
-    /**
-     * The outer element exposed to the editor.
-     */
+  /**
+   * Provides readonly access to the dom element
+   */
+  get dom() {
+    return this.domRef;
+  }
+  /**
+   * The ProsemirrorNode that this nodeView is responsible for rendering.
+   */
 
-    /**
-     * Provides readonly access to the dom element
-     */
-    get: function get() {
-      return this.domRef;
-    }
-    /**
-     * The ProsemirrorNode that this nodeView is responsible for rendering.
-     */
 
-  }]);
-
-  function ReactNodeView(_ref) {
-    var _this = this;
-
-    var Component = _ref.Component,
-        getPosition = _ref.getPosition,
-        _node = _ref.node,
-        portalContainer = _ref.portalContainer,
-        view = _ref.view,
-        options = _ref.options;
-
-    _classCallCheck(this, ReactNodeView);
-
+  constructor({
+    Component,
+    getPosition,
+    node: _node,
+    portalContainer,
+    view,
+    options
+  }) {
     _defineProperty(this, "contentDOMWrapper", null);
 
-    _defineProperty(this, "getPosition", function () {
-      return 0;
-    });
+    _defineProperty(this, "getPosition", () => 0);
 
     _defineProperty(this, "selected", false);
 
-    _defineProperty(this, "handleRef", function (node) {
+    _defineProperty(this, "handleRef", node => {
       var _this$contentDOMWrapp;
 
-      var contentDOM = (_this$contentDOMWrapp = _this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : _this.contentDOM; // move the contentDOM node inside the inner reference after rendering
+      const contentDOM = (_this$contentDOMWrapp = this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : this.contentDOM; // move the contentDOM node inside the inner reference after rendering
 
@@ -83,231 +69,206 @@ if (node && contentDOM && !node.contains(contentDOM)) {
 
-  _createClass(ReactNodeView, [{
-    key: "init",
-    value: function init() {
-      var _this$getContentDOM,
-          _this2 = this;
+  init() {
+    var _this$getContentDOM;
 
-      this.domRef = this.createDomRef();
-      this.setDomAttrs(this.node, this.domRef);
+    this.domRef = this.createDomRef();
+    this.setDomAttrs(this.node, this.domRef);
+    const {
+      dom: contentDOMWrapper,
+      contentDOM
+    } = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
+      dom: undefined,
+      contentDOM: undefined
+    };
 
-      var _ref2 = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
-        dom: undefined,
-        contentDOM: undefined
-      },
-          contentDOMWrapper = _ref2.dom,
-          contentDOM = _ref2.contentDOM;
+    if (contentDOMWrapper) {
+      this.domRef.appendChild(contentDOMWrapper);
+      this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
+      this.contentDOMWrapper = contentDOMWrapper;
+    }
 
-      if (contentDOMWrapper) {
-        this.domRef.appendChild(contentDOMWrapper);
-        this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
-        this.contentDOMWrapper = contentDOMWrapper;
-      }
+    this.domRef.classList.add("".concat(EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return this;
+  }
 
-      this.domRef.classList.add("".concat(EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
-      this.renderReactComponent(function () {
-        return _this2.render(_this2.handleRef);
-      });
-      return this;
+  renderReactComponent(render = () => this.render(this.handleRef)) {
+    if (!this.domRef) {
+      return;
     }
-  }, {
-    key: "renderReactComponent",
-    value: function renderReactComponent() {
-      var _this3 = this;
 
-      var render = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return _this3.render(_this3.handleRef);
-      };
+    this.portalContainer.render({
+      render,
+      container: this.domRef
+    });
+  }
+  /**
+   * Create a dom ref
+   */
 
-      if (!this.domRef) {
-        return;
-      }
 
-      this.portalContainer.render({
-        render: render,
-        container: this.domRef
-      });
-    }
-    /**
-     * Create a dom ref
-     */
+  createDomRef() {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-  }, {
-    key: "createDomRef",
-    value: function createDomRef() {
-      var toDOM = this.node.type.spec.toDOM;
+    if (toDOM) {
+      const domSpec = toDOM(this.node);
 
-      if (toDOM) {
-        var domSpec = toDOM(this.node);
+      if (isString(domSpec)) {
+        return document.createElement(domSpec);
+      }
 
-        if (isString(domSpec)) {
-          return document.createElement(domSpec);
+      if (isDOMNode(domSpec)) {
+        if (!isElementDOMNode(domSpec)) {
+          throw new Error('Invalid HTML Element provided in the DOM Spec');
         }
 
-        if (isDOMNode(domSpec)) {
-          if (!isElementDOMNode(domSpec)) {
-            throw new Error('Invalid HTML Element provided in the DOM Spec');
-          }
+        return domSpec;
+      } // Use the outer element string to render the dom node
 
-          return domSpec;
-        } // Use the outer element string to render the dom node
 
+      return document.createElement(domSpec[0]);
+    }
 
-        return document.createElement(domSpec[0]);
-      }
+    return this.node.isInline ? document.createElement('span') : document.createElement('div');
+  }
+  /**
+   * Override this method in order to return a content dom which allow
+   */
 
-      return this.node.isInline ? document.createElement('span') : document.createElement('div');
-    }
-    /**
-     * Override this method in order to return a content dom which allow
-     */
 
-  }, {
-    key: "getContentDOM",
-    value: function getContentDOM() {
-      return undefined;
-    }
-  }, {
-    key: "render",
-    value: function render(forwardRef) {
-      var Component = this.Component,
-          getPosition = this.getPosition,
-          node = this.node,
-          options = this.options,
-          view = this.view,
-          selected = this.selected;
-      return jsx(Component, {
-        selected: selected,
-        view: view,
-        getPosition: getPosition,
-        node: node,
-        forwardRef: forwardRef,
-        options: options
-      });
-    }
-  }, {
-    key: "update",
-    value: function update(node, _) {
-      var _this4 = this;
+  getContentDOM() {
+    return undefined;
+  }
 
-      var validUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-        return true;
-      };
-      // see https://github.com/ProseMirror/prosemirror/issues/648
-      var isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
+  render(forwardRef) {
+    const {
+      Component,
+      getPosition,
+      node,
+      options,
+      view,
+      selected
+    } = this;
+    return jsx(Component, {
+      selected: selected,
+      view: view,
+      getPosition: getPosition,
+      node: node,
+      forwardRef: forwardRef,
+      options: options
+    });
+  }
 
-      if (!isValidUpdate) {
-        return false;
-      }
+  update(node, _, validUpdate = () => true) {
+    // see https://github.com/ProseMirror/prosemirror/issues/648
+    const isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
 
-      if (this.domRef && !this.node.sameMarkup(node)) {
-        this.setDomAttrs(node, this.domRef);
-      }
+    if (!isValidUpdate) {
+      return false;
+    }
 
-      this.node = node;
-      this.renderReactComponent(function () {
-        return _this4.render(_this4.handleRef);
-      });
-      return true;
+    if (this.domRef && !this.node.sameMarkup(node)) {
+      this.setDomAttrs(node, this.domRef);
     }
-    /**
-     * Copies the attributes from a ProseMirror Node to a DOM node.
-     *
-     * @param node The Prosemirror Node from which to source the attributes
-     */
 
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var toDOM = this.node.type.spec.toDOM;
+    this.node = node;
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return true;
+  }
+  /**
+   * Copies the attributes from a ProseMirror Node to a DOM node.
+   *
+   * @param node The Prosemirror Node from which to source the attributes
+   */
 
-      if (toDOM) {
-        var domSpec = toDOM(node);
 
-        if (isString(domSpec) || isDOMNode(domSpec)) {
-          return;
-        }
+  setDomAttrs(node, element) {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-        var attrs = domSpec[1];
+    if (toDOM) {
+      const domSpec = toDOM(node);
 
-        if (isPlainObject(attrs)) {
-          keys(attrs).forEach(function (attr) {
-            element.setAttribute(attr, String(attrs[attr]));
-          });
-          return;
-        }
+      if (isString(domSpec) || isDOMNode(domSpec)) {
+        return;
       }
 
-      keys(node.attrs).forEach(function (attr) {
-        element.setAttribute(attr, node.attrs[attr]);
-      });
-    }
-    /**
-     * Marks the node as being selected
-     */
+      const attrs = domSpec[1];
 
-  }, {
-    key: "selectNode",
-    value: function selectNode() {
-      this.selected = true;
-
-      if (this.domRef) {
-        this.domRef.classList.add(SELECTED_NODE_CLASS_NAME);
+      if (isPlainObject(attrs)) {
+        keys(attrs).forEach(attr => {
+          element.setAttribute(attr, String(attrs[attr]));
+        });
+        return;
       }
+    }
 
-      this.renderReactComponent();
-    } // Remove selected node marking from this node.
+    keys(node.attrs).forEach(attr => {
+      element.setAttribute(attr, node.attrs[attr]);
+    });
+  }
+  /**
+   * Marks the node as being selected
+   */
 
-  }, {
-    key: "deselectNode",
-    value: function deselectNode() {
-      this.selected = false;
 
-      if (this.domRef) {
-        this.domRef.classList.remove(SELECTED_NODE_CLASS_NAME);
-      }
+  selectNode() {
+    this.selected = true;
 
-      this.renderReactComponent();
+    if (this.domRef) {
+      this.domRef.classList.add(SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * This is called whenever the node is being destroyed.
-     */
 
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (!this.domRef) {
-        return;
-      }
+    this.renderReactComponent();
+  } // Remove selected node marking from this node.
 
-      this.portalContainer.remove(this.domRef);
-      this.domRef = undefined;
-      this.contentDOM = undefined;
+
+  deselectNode() {
+    this.selected = false;
+
+    if (this.domRef) {
+      this.domRef.classList.remove(SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * A shorthand method for creating the ReactNodeView
-     */
 
-  }], [{
-    key: "createNodeView",
-    value: function createNodeView(_ref3) {
-      var Component = _ref3.Component,
-          portalContainer = _ref3.portalContainer,
-          options = _ref3.options;
-      return function (node, view, getPosition) {
-        return new ReactNodeView({
-          node: node,
-          view: view,
-          getPosition: getPosition,
-          portalContainer: portalContainer,
-          Component: Component,
-          options: options
-        }).init();
-      };
+    this.renderReactComponent();
+  }
+  /**
+   * This is called whenever the node is being destroyed.
+   */
+
+
+  destroy() {
+    if (!this.domRef) {
+      return;
     }
-  }]);
 
-  return ReactNodeView;
-}();
+    this.portalContainer.remove(this.domRef);
+    this.domRef = undefined;
+    this.contentDOM = undefined;
+  }
+  /**
+   * A shorthand method for creating the ReactNodeView
+   */
 
+
+  static createNodeView({
+    Component,
+    portalContainer,
+    options
+  }) {
+    return (node, view, getPosition) => new ReactNodeView({
+      node: node,
+      view,
+      getPosition,
+      portalContainer,
+      Component,
+      options
+    }).init();
+  }
+
+}
+
 export { ReactNodeView };
 //# sourceMappingURL=react-node-view.esm.js.map

lib/react-node-view.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
@@ -16,48 +14,36 @@ var core = require('@emotion/core');
 
-var ReactNodeView =
-/*#__PURE__*/
-function () {
-  _createClass(ReactNodeView, [{
-    key: "dom",
+class ReactNodeView {
+  /**
+   * The outer element exposed to the editor.
+   */
 
-    /**
-     * The outer element exposed to the editor.
-     */
+  /**
+   * Provides readonly access to the dom element
+   */
+  get dom() {
+    return this.domRef;
+  }
+  /**
+   * The ProsemirrorNode that this nodeView is responsible for rendering.
+   */
 
-    /**
-     * Provides readonly access to the dom element
-     */
-    get: function get() {
-      return this.domRef;
-    }
-    /**
-     * The ProsemirrorNode that this nodeView is responsible for rendering.
-     */
 
-  }]);
-
-  function ReactNodeView(_ref) {
-    var _this = this;
-
-    var Component = _ref.Component,
-        getPosition = _ref.getPosition,
-        _node = _ref.node,
-        portalContainer = _ref.portalContainer,
-        view = _ref.view,
-        options = _ref.options;
-
-    _classCallCheck(this, ReactNodeView);
-
+  constructor({
+    Component,
+    getPosition,
+    node: _node,
+    portalContainer,
+    view,
+    options
+  }) {
     _defineProperty(this, "contentDOMWrapper", null);
 
-    _defineProperty(this, "getPosition", function () {
-      return 0;
-    });
+    _defineProperty(this, "getPosition", () => 0);
 
     _defineProperty(this, "selected", false);
 
-    _defineProperty(this, "handleRef", function (node) {
+    _defineProperty(this, "handleRef", node => {
       var _this$contentDOMWrapp;
 
-      var contentDOM = (_this$contentDOMWrapp = _this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : _this.contentDOM; // move the contentDOM node inside the inner reference after rendering
+      const contentDOM = (_this$contentDOMWrapp = this.contentDOMWrapper) !== null && _this$contentDOMWrapp !== void 0 ? _this$contentDOMWrapp : this.contentDOM; // move the contentDOM node inside the inner reference after rendering
 
@@ -90,231 +76,206 @@ if (node && contentDOM && !node.contains(contentDOM)) {
 
-  _createClass(ReactNodeView, [{
-    key: "init",
-    value: function init() {
-      var _this$getContentDOM,
-          _this2 = this;
+  init() {
+    var _this$getContentDOM;
 
-      this.domRef = this.createDomRef();
-      this.setDomAttrs(this.node, this.domRef);
+    this.domRef = this.createDomRef();
+    this.setDomAttrs(this.node, this.domRef);
+    const {
+      dom: contentDOMWrapper,
+      contentDOM
+    } = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
+      dom: undefined,
+      contentDOM: undefined
+    };
 
-      var _ref2 = (_this$getContentDOM = this.getContentDOM()) !== null && _this$getContentDOM !== void 0 ? _this$getContentDOM : {
-        dom: undefined,
-        contentDOM: undefined
-      },
-          contentDOMWrapper = _ref2.dom,
-          contentDOM = _ref2.contentDOM;
+    if (contentDOMWrapper) {
+      this.domRef.appendChild(contentDOMWrapper);
+      this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
+      this.contentDOMWrapper = contentDOMWrapper;
+    }
 
-      if (contentDOMWrapper) {
-        this.domRef.appendChild(contentDOMWrapper);
-        this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
-        this.contentDOMWrapper = contentDOMWrapper;
-      }
+    this.domRef.classList.add("".concat(coreConstants.EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return this;
+  }
 
-      this.domRef.classList.add("".concat(coreConstants.EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"));
-      this.renderReactComponent(function () {
-        return _this2.render(_this2.handleRef);
-      });
-      return this;
+  renderReactComponent(render = () => this.render(this.handleRef)) {
+    if (!this.domRef) {
+      return;
     }
-  }, {
-    key: "renderReactComponent",
-    value: function renderReactComponent() {
-      var _this3 = this;
 
-      var render = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
-        return _this3.render(_this3.handleRef);
-      };
+    this.portalContainer.render({
+      render,
+      container: this.domRef
+    });
+  }
+  /**
+   * Create a dom ref
+   */
 
-      if (!this.domRef) {
-        return;
-      }
 
-      this.portalContainer.render({
-        render: render,
-        container: this.domRef
-      });
-    }
-    /**
-     * Create a dom ref
-     */
+  createDomRef() {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-  }, {
-    key: "createDomRef",
-    value: function createDomRef() {
-      var toDOM = this.node.type.spec.toDOM;
+    if (toDOM) {
+      const domSpec = toDOM(this.node);
 
-      if (toDOM) {
-        var domSpec = toDOM(this.node);
+      if (coreHelpers.isString(domSpec)) {
+        return document.createElement(domSpec);
+      }
 
-        if (coreHelpers.isString(domSpec)) {
-          return document.createElement(domSpec);
+      if (coreUtils.isDOMNode(domSpec)) {
+        if (!coreUtils.isElementDOMNode(domSpec)) {
+          throw new Error('Invalid HTML Element provided in the DOM Spec');
         }
 
-        if (coreUtils.isDOMNode(domSpec)) {
-          if (!coreUtils.isElementDOMNode(domSpec)) {
-            throw new Error('Invalid HTML Element provided in the DOM Spec');
-          }
+        return domSpec;
+      } // Use the outer element string to render the dom node
 
-          return domSpec;
-        } // Use the outer element string to render the dom node
 
+      return document.createElement(domSpec[0]);
+    }
 
-        return document.createElement(domSpec[0]);
-      }
+    return this.node.isInline ? document.createElement('span') : document.createElement('div');
+  }
+  /**
+   * Override this method in order to return a content dom which allow
+   */
 
-      return this.node.isInline ? document.createElement('span') : document.createElement('div');
-    }
-    /**
-     * Override this method in order to return a content dom which allow
-     */
 
-  }, {
-    key: "getContentDOM",
-    value: function getContentDOM() {
-      return undefined;
-    }
-  }, {
-    key: "render",
-    value: function render(forwardRef) {
-      var Component = this.Component,
-          getPosition = this.getPosition,
-          node = this.node,
-          options = this.options,
-          view = this.view,
-          selected = this.selected;
-      return core.jsx(Component, {
-        selected: selected,
-        view: view,
-        getPosition: getPosition,
-        node: node,
-        forwardRef: forwardRef,
-        options: options
-      });
-    }
-  }, {
-    key: "update",
-    value: function update(node, _) {
-      var _this4 = this;
+  getContentDOM() {
+    return undefined;
+  }
 
-      var validUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-        return true;
-      };
-      // see https://github.com/ProseMirror/prosemirror/issues/648
-      var isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
+  render(forwardRef) {
+    const {
+      Component,
+      getPosition,
+      node,
+      options,
+      view,
+      selected
+    } = this;
+    return core.jsx(Component, {
+      selected: selected,
+      view: view,
+      getPosition: getPosition,
+      node: node,
+      forwardRef: forwardRef,
+      options: options
+    });
+  }
 
-      if (!isValidUpdate) {
-        return false;
-      }
+  update(node, _, validUpdate = () => true) {
+    // see https://github.com/ProseMirror/prosemirror/issues/648
+    const isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
 
-      if (this.domRef && !this.node.sameMarkup(node)) {
-        this.setDomAttrs(node, this.domRef);
-      }
+    if (!isValidUpdate) {
+      return false;
+    }
 
-      this.node = node;
-      this.renderReactComponent(function () {
-        return _this4.render(_this4.handleRef);
-      });
-      return true;
+    if (this.domRef && !this.node.sameMarkup(node)) {
+      this.setDomAttrs(node, this.domRef);
     }
-    /**
-     * Copies the attributes from a ProseMirror Node to a DOM node.
-     *
-     * @param node The Prosemirror Node from which to source the attributes
-     */
 
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var toDOM = this.node.type.spec.toDOM;
+    this.node = node;
+    this.renderReactComponent(() => this.render(this.handleRef));
+    return true;
+  }
+  /**
+   * Copies the attributes from a ProseMirror Node to a DOM node.
+   *
+   * @param node The Prosemirror Node from which to source the attributes
+   */
 
-      if (toDOM) {
-        var domSpec = toDOM(node);
 
-        if (coreHelpers.isString(domSpec) || coreUtils.isDOMNode(domSpec)) {
-          return;
-        }
+  setDomAttrs(node, element) {
+    const {
+      toDOM
+    } = this.node.type.spec;
 
-        var attrs = domSpec[1];
+    if (toDOM) {
+      const domSpec = toDOM(node);
 
-        if (coreHelpers.isPlainObject(attrs)) {
-          coreHelpers.keys(attrs).forEach(function (attr) {
-            element.setAttribute(attr, String(attrs[attr]));
-          });
-          return;
-        }
+      if (coreHelpers.isString(domSpec) || coreUtils.isDOMNode(domSpec)) {
+        return;
       }
 
-      coreHelpers.keys(node.attrs).forEach(function (attr) {
-        element.setAttribute(attr, node.attrs[attr]);
-      });
-    }
-    /**
-     * Marks the node as being selected
-     */
+      const attrs = domSpec[1];
 
-  }, {
-    key: "selectNode",
-    value: function selectNode() {
-      this.selected = true;
-
-      if (this.domRef) {
-        this.domRef.classList.add(coreConstants.SELECTED_NODE_CLASS_NAME);
+      if (coreHelpers.isPlainObject(attrs)) {
+        coreHelpers.keys(attrs).forEach(attr => {
+          element.setAttribute(attr, String(attrs[attr]));
+        });
+        return;
       }
+    }
 
-      this.renderReactComponent();
-    } // Remove selected node marking from this node.
+    coreHelpers.keys(node.attrs).forEach(attr => {
+      element.setAttribute(attr, node.attrs[attr]);
+    });
+  }
+  /**
+   * Marks the node as being selected
+   */
 
-  }, {
-    key: "deselectNode",
-    value: function deselectNode() {
-      this.selected = false;
 
-      if (this.domRef) {
-        this.domRef.classList.remove(coreConstants.SELECTED_NODE_CLASS_NAME);
-      }
+  selectNode() {
+    this.selected = true;
 
-      this.renderReactComponent();
+    if (this.domRef) {
+      this.domRef.classList.add(coreConstants.SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * This is called whenever the node is being destroyed.
-     */
 
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (!this.domRef) {
-        return;
-      }
+    this.renderReactComponent();
+  } // Remove selected node marking from this node.
 
-      this.portalContainer.remove(this.domRef);
-      this.domRef = undefined;
-      this.contentDOM = undefined;
+
+  deselectNode() {
+    this.selected = false;
+
+    if (this.domRef) {
+      this.domRef.classList.remove(coreConstants.SELECTED_NODE_CLASS_NAME);
     }
-    /**
-     * A shorthand method for creating the ReactNodeView
-     */
 
-  }], [{
-    key: "createNodeView",
-    value: function createNodeView(_ref3) {
-      var Component = _ref3.Component,
-          portalContainer = _ref3.portalContainer,
-          options = _ref3.options;
-      return function (node, view, getPosition) {
-        return new ReactNodeView({
-          node: node,
-          view: view,
-          getPosition: getPosition,
-          portalContainer: portalContainer,
-          Component: Component,
-          options: options
-        }).init();
-      };
+    this.renderReactComponent();
+  }
+  /**
+   * This is called whenever the node is being destroyed.
+   */
+
+
+  destroy() {
+    if (!this.domRef) {
+      return;
     }
-  }]);
 
-  return ReactNodeView;
-}();
+    this.portalContainer.remove(this.domRef);
+    this.domRef = undefined;
+    this.contentDOM = undefined;
+  }
+  /**
+   * A shorthand method for creating the ReactNodeView
+   */
 
+
+  static createNodeView({
+    Component,
+    portalContainer,
+    options
+  }) {
+    return (node, view, getPosition) => new ReactNodeView({
+      node: node,
+      view,
+      getPosition,
+      portalContainer,
+      Component,
+      options
+    }).init();
+  }
+
+}
+
 exports.ReactNodeView = ReactNodeView;
 //# sourceMappingURL=react-node-view.js.map

package.json

@@ -8,3 +8,3 @@ {
   "repository": "https://github.com/remirror/remirror/tree/master/@remirror/react-node-view",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "main": "lib/index.js",
@@ -21,5 +21,5 @@ "module": "lib/dist/react-node-view.esm.js",
     "@remirror/core-constants": "^0.7.4",
-    "@remirror/core-helpers": "^0.7.4",
-    "@remirror/core-types": "^0.7.4",
-    "@remirror/core-utils": "^0.7.4",
+    "@remirror/core-helpers": "^0.7.5",
+    "@remirror/core-types": "^0.8.0",
+    "@remirror/core-utils": "^0.7.5",
     "@remirror/react-portals": "^0.7.4"
@@ -26,0 +26,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

82047

decreased by-7.97%

Lines of code

1116

decreased by-9.93%

Dependency changes

• - Removed@remirror/core-types@0.7.4(transitive)

• Updated@remirror/core-helpers@^0.7.5

• Updated@remirror/core-types@^0.8.0

• Updated@remirror/core-utils@^0.7.5