Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@remirror/react-utils

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remirror/react-utils - npm Package Compare versions

Comparing version 0.4.2-ci.1564567834.5 to 0.4.2-ci.1569229282.9

@@ -10,25 +10,5 @@ 'use strict';

var core = require('@emotion/core');
var core$1 = require('@remirror/core');
var coreHelpers = require('@remirror/core-helpers');
var react = require('react');
var react__default = _interopDefault(react);
var emotion = require('emotion');
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
/**
* These are the props passed to the render function provided when setting up
* your editor.
*/
(function (RemirrorElementType) {
RemirrorElementType["Extension"] = "extension";
RemirrorElementType["SSR"] = "ssr";
RemirrorElementType["EditorProvider"] = "editor-provider";
RemirrorElementType["ManagedEditorProvider"] = "managed-editor-provider";
RemirrorElementType["Editor"] = "editor";
RemirrorElementType["Manager"] = "manager";
RemirrorElementType["ManagerProvider"] = "manager-provider";
RemirrorElementType["ContextProvider"] = "context-provider";
})(exports.RemirrorElementType || (exports.RemirrorElementType = {}));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

@@ -43,4 +23,15 @@

(function (RemirrorType) {
RemirrorType["Extension"] = "extension";
RemirrorType["SSR"] = "ssr";
RemirrorType["EditorProvider"] = "editor-provider";
RemirrorType["ManagedEditorProvider"] = "managed-editor-provider";
RemirrorType["Editor"] = "editor";
RemirrorType["Manager"] = "manager";
RemirrorType["ManagerProvider"] = "manager-provider";
RemirrorType["ContextProvider"] = "context-provider";
})(exports.RemirrorType || (exports.RemirrorType = {}));
var isValidElement = function isValidElement(value) {
return core$1.isObject(value) && react.isValidElement(value);
return coreHelpers.isObject(value) && react.isValidElement(value);
};

@@ -54,3 +45,3 @@ /**

var isReactDOMElement = function isReactDOMElement(value) {
return isValidElement(value) && core$1.isString(value.type);
return isValidElement(value) && coreHelpers.isString(value.type);
};

@@ -64,3 +55,3 @@ /**

var isReactFragment = function isReactFragment(value) {
return core$1.isObject(value) && isValidElement(value) && value.type === react.Fragment;
return coreHelpers.isObject(value) && isValidElement(value) && value.type === react.Fragment;
};

@@ -108,3 +99,3 @@ /**

var isRemirrorElement = function isRemirrorElement(value) {
return core$1.bool(core$1.isObject(value) && isValidElement(value) && value.type.$$remirrorType);
return coreHelpers.bool(coreHelpers.isObject(value) && isValidElement(value) && value.type.$$remirrorType);
};

@@ -127,3 +118,3 @@

var isRemirrorContextProvider = isRemirrorElementOfType(exports.RemirrorElementType.ContextProvider);
var isRemirrorContextProvider = isRemirrorElementOfType(exports.RemirrorType.ContextProvider);
/**

@@ -136,3 +127,3 @@ * Checks if this is a RemirrorExtension type. These are used to configure the extensions that determine

var isRemirrorExtension = isRemirrorElementOfType(exports.RemirrorElementType.Extension);
var isRemirrorExtension = isRemirrorElementOfType(exports.RemirrorType.Extension);
/**

@@ -144,3 +135,3 @@ * Finds if this is a RemirrorProvider (which provides the RemirrorInjectedProps into the context);

var isRemirrorProvider = isRemirrorElementOfType(exports.RemirrorElementType.EditorProvider);
var isRemirrorProvider = isRemirrorElementOfType(exports.RemirrorType.EditorProvider);
/**

@@ -153,3 +144,3 @@ * Checks if this is a ManagedRemirrorProvider which pulls in the manager from the context and places it's children

var isManagedRemirrorProvider = isRemirrorElementOfType(exports.RemirrorElementType.ManagedEditorProvider);
var isManagedRemirrorProvider = isRemirrorElementOfType(exports.RemirrorType.ManagedEditorProvider);
/**

@@ -171,3 +162,3 @@ * Clones an element while also enabling the css prop on jsx elements at the same time.

var children = core$1.uniqueArray([].concat(_toConsumableArray(core$1.isArray(props.children) ? props.children : props.children ? [props.children] : []), _toConsumableArray(core$1.isArray(rest) ? rest : rest ? [rest] : [])));
var children = coreHelpers.uniqueArray([].concat(_toConsumableArray(coreHelpers.isArray(props.children) ? props.children : props.children ? [props.children] : []), _toConsumableArray(coreHelpers.isArray(rest) ? rest : rest ? [rest] : [])));
return core.jsx.apply(void 0, [element.type, _objectSpread({

@@ -189,3 +180,3 @@ key: element.key,

var propIsFunction = function propIsFunction(prop) {
if (!core$1.isFunction(prop)) {
if (!coreHelpers.isFunction(prop)) {
throw new Error('The child argument to the Remirror component must be a function.');

@@ -200,3 +191,3 @@ }

* @remarks
* This is useful for enabling the library user to switch of emotion for core react elements.
* This is useful for enabling the library user to switch off emotion for core react elements.
*/

@@ -209,4 +200,3 @@

* A css function that just returns the string.
* This is typically used for css syntax highlighting of plain strings in editors
* Can be used as a replacement for emotion when emotion has been disabled but we still want the
* This is typically used for css syntax highlighting of plain strings in editors.
*/

@@ -249,461 +239,7 @@

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultPositioner = {
initialPosition: {
top: -9999,
left: -9999,
right: 99999,
bottom: 99999
},
hasChanged: function hasChanged(_ref) {
var oldState = _ref.oldState,
newState = _ref.newState;
return !(oldState && oldState.doc.eq(newState.doc) && oldState.selection.eq(newState.selection));
},
isActive: function isActive(_ref2) {
var newState = _ref2.newState;
var isActive = !core$1.selectionEmpty(newState);
return isActive;
},
getPosition: function getPosition(_ref3) {
var element = _ref3.element,
view = _ref3.view,
newState = _ref3.newState;
return core$1.absoluteCoordinates({
view: view,
element: element,
coords: view.coordsAtPos(newState.selection.$anchor.pos)
});
}
};
/**
* Render a menu which floats to the right at the beginning of an empty paragraph
*/
var floatingPositioner = _objectSpread$1({}, defaultPositioner, {
isActive: function isActive(_ref4) {
var newState = _ref4.newState;
return core$1.selectionEmpty(newState) && core$1.isEmptyParagraphNode(newState.selection.$anchor.parent);
},
getPosition: function getPosition(_ref5) {
var view = _ref5.view,
element = _ref5.element,
newState = _ref5.newState;
var editorRect = element.offsetParent.getBoundingClientRect();
var cursorRect = view.coordsAtPos(newState.selection.$anchor.pos);
var top = cursorRect.top - editorRect.top;
return _objectSpread$1({}, floatingPositioner.initialPosition, {
top: top
});
}
});
/**
* Render a bubble menu which becomes active whenever a selection is made.
*
* The relevant positions are `bottom` and `left` which can be used to absolutely positioned your PositionerComponent
* `top` and `right` aren't used and always equal the default off screen position
*/
var bubblePositioner = _objectSpread$1({}, defaultPositioner, {
getPosition: function getPosition(_ref6) {
var view = _ref6.view,
element = _ref6.element,
newState = _ref6.newState;
var _newState$selection = newState.selection,
from = _newState$selection.from,
to = _newState$selection.to; // These are in screen coordinates
var start = view.coordsAtPos(from);
var end = view.coordsAtPos(to); // The box in which the tooltip is positioned, to use as base
var parentBox = element.offsetParent.getBoundingClientRect();
var elementBox = element.getBoundingClientRect();
var left = (start.left + end.left) / 2 - parentBox.left;
return _objectSpread$1({}, bubblePositioner.initialPosition, {
left: Math.min(parentBox.width - elementBox.width / 2, Math.max(left, elementBox.width / 2)),
bottom: Math.trunc(parentBox.bottom - start.top)
});
}
});
var getNodeType = function getNodeType(_ref7) {
var state = _ref7.state,
type = _ref7.type;
return core$1.isString(type) ? state.schema.nodes[type] : type;
};
/**
* Creates a positioner for the provided node.
*
* TODO this currently is just a placeholder and doesn't actually work.
*/
var createNodeTypePositioner = function createNodeTypePositioner(nodeType) {
return _objectSpread$1({}, defaultPositioner, {
isActive: function isActive(_ref8) {
var state = _ref8.newState;
var type = getNodeType({
state: state,
type: nodeType
});
return core$1.isNodeActive({
state: state,
type: type
});
},
getPosition: function getPosition(_ref9) {
var newState = _ref9.newState,
view = _ref9.view;
core$1.findElementAtPosition(newState.selection.from, view);
return core$1.absoluteCoordinates({
view: view,
element: core$1.findElementAtPosition(newState.selection.from, view),
coords: view.coordsAtPos(newState.selection.$anchor.pos)
});
}
});
};
/**
* A mimic of the css method except that this one does nothing but return an empty string.
*
* @remark
* Used to switch off emotion css injection
*/
var cssNoOp$1 = function cssNoOp() {
return '';
};
var ReactNodeView =
/*#__PURE__*/
function () {
_createClass(ReactNodeView, [{
key: "css",
/**
* The outer element exposed to the editor.
*/
/**
* The CSS transformation property depending on whether the emotion is being used or not.
*/
get: function get() {
return (
/*#__PURE__*/
this.withoutEmotion ? cssNoOp$1 : emotion.css
);
}
/**
* Provides readonly access to the dom element
*/
}, {
key: "dom",
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,
_ref$style = _ref.style,
style = _ref$style === void 0 ? [] : _ref$style,
view = _ref.view,
_ref$withoutEmotion = _ref.withoutEmotion,
withoutEmotion = _ref$withoutEmotion === void 0 ? false : _ref$withoutEmotion,
options = _ref.options;
_classCallCheck(this, ReactNodeView);
_defineProperty(this, "contentDOMWrapper", null);
_defineProperty(this, "selected", false);
_defineProperty(this, "handleRef", function (node) {
var contentDOM = _this.contentDOMWrapper || _this.contentDOM; // move the contentDOM node inside the inner reference after rendering
if (node && contentDOM && !node.contains(contentDOM)) {
node.appendChild(contentDOM);
}
});
this.node = _node;
this.view = view;
this.getPosition = getPosition;
this.portalContainer = portalContainer;
this.Component = Component;
this.style = style;
this.withoutEmotion = withoutEmotion;
this.options = options;
}
/**
* This method exists to move initialization logic out of the constructor,
* so the object can be initialized properly before calling render first time.
*
* Example:
* Instance properties get added to an object only after super call in
* constructor, which leads to some methods being undefined during the
* first render.
*/
_createClass(ReactNodeView, [{
key: "init",
value: function init() {
var _this2 = this;
this.domRef = this.createDomRef();
this.setDomAttrs(this.node, this.domRef);
var _ref2 = this.getContentDOM() || {
dom: undefined,
contentDOM: undefined
},
contentDOMWrapper = _ref2.dom,
contentDOM = _ref2.contentDOM;
if (this.domRef && contentDOMWrapper) {
this.domRef.appendChild(contentDOMWrapper);
this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
this.contentDOMWrapper = contentDOMWrapper || contentDOM;
} // Add a fixed class and a dynamic class to this node (allows for custom styles being added in configuration)
this.domRef.classList.add("".concat(core$1.EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"), this.css(this.style));
this.renderReactComponent(function () {
return _this2.render(_this2.handleRef);
});
return this;
}
}, {
key: "renderReactComponent",
value: function renderReactComponent() {
var _this3 = this;
var render = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
return _this3.render(_this3.handleRef);
};
if (!this.domRef) {
return;
}
this.portalContainer.render({
render: render,
container: this.domRef
});
}
/**
* Create a dom ref
*/
}, {
key: "createDomRef",
value: function createDomRef() {
var toDOM = this.node.type.spec.toDOM;
if (toDOM) {
var domSpec = toDOM(this.node);
if (core$1.isString(domSpec)) {
return document.createElement(domSpec);
}
if (core$1.isDOMNode(domSpec)) {
if (!core$1.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 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
*/
}, {
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;
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);
if (!isValidUpdate) {
return false;
}
if (this.domRef && !this.node.sameMarkup(node)) {
this.setDomAttrs(node, this.domRef);
}
this.node = node;
this.renderReactComponent(function () {
return _this4.render(_this4.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
*/
}, {
key: "setDomAttrs",
value: function setDomAttrs(node, element) {
var toDOM = this.node.type.spec.toDOM;
if (toDOM) {
var domSpec = toDOM(node);
if (core$1.isString(domSpec) || core$1.isDOMNode(domSpec)) {
return;
}
var attrs = domSpec[1];
if (core$1.isPlainObject(attrs)) {
Object.keys(attrs).forEach(function (attr) {
element.setAttribute(attr, String(attrs[attr]));
});
return;
}
}
Object.keys(node.attrs || {}).forEach(function (attr) {
element.setAttribute(attr, node.attrs[attr]);
});
}
/**
* Marks the node as being selected
*/
}, {
key: "selectNode",
value: function selectNode() {
this.selected = true;
if (this.domRef) {
this.domRef.classList.add(core$1.SELECTED_NODE_CLASS_NAME);
}
this.renderReactComponent();
} // Remove selected node marking from this node.
}, {
key: "deselectNode",
value: function deselectNode() {
this.selected = false;
if (this.domRef) {
this.domRef.classList.remove(core$1.SELECTED_NODE_CLASS_NAME);
}
this.renderReactComponent();
}
/**
* This is called whenever the node is being destroyed.
*/
}, {
key: "destroy",
value: function destroy() {
if (!this.domRef) {
return;
}
this.portalContainer.remove(this.domRef);
this.domRef = undefined;
this.contentDOM = undefined;
}
/**
* A shorthand method for creating the ReactNodeView
*/
}], [{
key: "createNodeView",
value: function createNodeView(_ref3) {
var Component = _ref3.Component,
portalContainer = _ref3.portalContainer,
style = _ref3.style,
withoutEmotion = _ref3.withoutEmotion,
options = _ref3.options;
return function (node, view, getPosition) {
return new ReactNodeView({
node: node,
view: view,
getPosition: getPosition,
portalContainer: portalContainer,
Component: Component,
style: style,
options: options,
withoutEmotion: withoutEmotion
}).init();
};
}
}]);
return ReactNodeView;
}();
Object.defineProperty(exports, 'cx', {
enumerable: true,
get: function () {
return emotion.cx;
}
});
exports.ReactNodeView = ReactNodeView;
exports.addKeyToElement = addKeyToElement;
exports.asDefaultProps = asDefaultProps;
exports.bubblePositioner = bubblePositioner;
exports.cloneElement = cloneElement;
exports.createNodeTypePositioner = createNodeTypePositioner;
exports.css = css;
exports.cssNoOp = cssNoOp;
exports.defaultPositioner = defaultPositioner;
exports.floatingPositioner = floatingPositioner;
exports.getElementProps = getElementProps;

@@ -710,0 +246,0 @@ exports.isManagedRemirrorProvider = isManagedRemirrorProvider;

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import { jsx } from '@emotion/core';
import { isObject, isString, bool, uniqueArray, isArray, isFunction, selectionEmpty, absoluteCoordinates, isEmptyParagraphNode, isNodeActive, findElementAtPosition, EDITOR_CLASS_NAME, isDOMNode, isElementDOMNode, isPlainObject, SELECTED_NODE_CLASS_NAME } from '@remirror/core';
import { isObject, isString, bool, uniqueArray, isArray, isFunction } from '@remirror/core-helpers';
import { isValidElement as isValidElement$1, Fragment, Children } from 'react';
import { css as css$1 } from 'emotion';
export { cx } from 'emotion';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
/**
* These are the props passed to the render function provided when setting up
* your editor.
*/
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
/**
* A function that takes the injected remirror params and returns JSX to render.
*
* @param - injected remirror params
*/
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/**
* Used to mark a remirror specific component to determine it's behaviour.
* These are the constants used to determine whether an element is a remirror constant.
*/
var RemirrorElementType;
(function (RemirrorElementType) {
RemirrorElementType["Extension"] = "extension";
RemirrorElementType["SSR"] = "ssr";
RemirrorElementType["EditorProvider"] = "editor-provider";
RemirrorElementType["ManagedEditorProvider"] = "managed-editor-provider";
RemirrorElementType["Editor"] = "editor";
RemirrorElementType["Manager"] = "manager";
RemirrorElementType["ManagerProvider"] = "manager-provider";
RemirrorElementType["ContextProvider"] = "context-provider";
})(RemirrorElementType || (RemirrorElementType = {}));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var RemirrorType;
/**

@@ -47,2 +21,13 @@ * A drop in replacement for built in React.isValidElement which accepts a test value of any type

(function (RemirrorType) {
RemirrorType["Extension"] = "extension";
RemirrorType["SSR"] = "ssr";
RemirrorType["EditorProvider"] = "editor-provider";
RemirrorType["ManagedEditorProvider"] = "managed-editor-provider";
RemirrorType["Editor"] = "editor";
RemirrorType["Manager"] = "manager";
RemirrorType["ManagerProvider"] = "manager-provider";
RemirrorType["ContextProvider"] = "context-provider";
})(RemirrorType || (RemirrorType = {}));
var isValidElement = function isValidElement(value) {

@@ -128,3 +113,3 @@ return isObject(value) && isValidElement$1(value);

var isRemirrorContextProvider = isRemirrorElementOfType(RemirrorElementType.ContextProvider);
var isRemirrorContextProvider = isRemirrorElementOfType(RemirrorType.ContextProvider);
/**

@@ -137,3 +122,3 @@ * Checks if this is a RemirrorExtension type. These are used to configure the extensions that determine

var isRemirrorExtension = isRemirrorElementOfType(RemirrorElementType.Extension);
var isRemirrorExtension = isRemirrorElementOfType(RemirrorType.Extension);
/**

@@ -145,3 +130,3 @@ * Finds if this is a RemirrorProvider (which provides the RemirrorInjectedProps into the context);

var isRemirrorProvider = isRemirrorElementOfType(RemirrorElementType.EditorProvider);
var isRemirrorProvider = isRemirrorElementOfType(RemirrorType.EditorProvider);
/**

@@ -154,3 +139,3 @@ * Checks if this is a ManagedRemirrorProvider which pulls in the manager from the context and places it's children

var isManagedRemirrorProvider = isRemirrorElementOfType(RemirrorElementType.ManagedEditorProvider);
var isManagedRemirrorProvider = isRemirrorElementOfType(RemirrorType.ManagedEditorProvider);
/**

@@ -199,3 +184,3 @@ * Clones an element while also enabling the css prop on jsx elements at the same time.

* @remarks
* This is useful for enabling the library user to switch of emotion for core react elements.
* This is useful for enabling the library user to switch off emotion for core react elements.
*/

@@ -208,4 +193,3 @@

* A css function that just returns the string.
* This is typically used for css syntax highlighting of plain strings in editors
* Can be used as a replacement for emotion when emotion has been disabled but we still want the
* This is typically used for css syntax highlighting of plain strings in editors.
*/

@@ -248,446 +232,3 @@

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var defaultPositioner = {
initialPosition: {
top: -9999,
left: -9999,
right: 99999,
bottom: 99999
},
hasChanged: function hasChanged(_ref) {
var oldState = _ref.oldState,
newState = _ref.newState;
return !(oldState && oldState.doc.eq(newState.doc) && oldState.selection.eq(newState.selection));
},
isActive: function isActive(_ref2) {
var newState = _ref2.newState;
var isActive = !selectionEmpty(newState);
return isActive;
},
getPosition: function getPosition(_ref3) {
var element = _ref3.element,
view = _ref3.view,
newState = _ref3.newState;
return absoluteCoordinates({
view: view,
element: element,
coords: view.coordsAtPos(newState.selection.$anchor.pos)
});
}
};
/**
* Render a menu which floats to the right at the beginning of an empty paragraph
*/
var floatingPositioner = _objectSpread$1({}, defaultPositioner, {
isActive: function isActive(_ref4) {
var newState = _ref4.newState;
return selectionEmpty(newState) && isEmptyParagraphNode(newState.selection.$anchor.parent);
},
getPosition: function getPosition(_ref5) {
var view = _ref5.view,
element = _ref5.element,
newState = _ref5.newState;
var editorRect = element.offsetParent.getBoundingClientRect();
var cursorRect = view.coordsAtPos(newState.selection.$anchor.pos);
var top = cursorRect.top - editorRect.top;
return _objectSpread$1({}, floatingPositioner.initialPosition, {
top: top
});
}
});
/**
* Render a bubble menu which becomes active whenever a selection is made.
*
* The relevant positions are `bottom` and `left` which can be used to absolutely positioned your PositionerComponent
* `top` and `right` aren't used and always equal the default off screen position
*/
var bubblePositioner = _objectSpread$1({}, defaultPositioner, {
getPosition: function getPosition(_ref6) {
var view = _ref6.view,
element = _ref6.element,
newState = _ref6.newState;
var _newState$selection = newState.selection,
from = _newState$selection.from,
to = _newState$selection.to; // These are in screen coordinates
var start = view.coordsAtPos(from);
var end = view.coordsAtPos(to); // The box in which the tooltip is positioned, to use as base
var parentBox = element.offsetParent.getBoundingClientRect();
var elementBox = element.getBoundingClientRect();
var left = (start.left + end.left) / 2 - parentBox.left;
return _objectSpread$1({}, bubblePositioner.initialPosition, {
left: Math.min(parentBox.width - elementBox.width / 2, Math.max(left, elementBox.width / 2)),
bottom: Math.trunc(parentBox.bottom - start.top)
});
}
});
var getNodeType = function getNodeType(_ref7) {
var state = _ref7.state,
type = _ref7.type;
return isString(type) ? state.schema.nodes[type] : type;
};
/**
* Creates a positioner for the provided node.
*
* TODO this currently is just a placeholder and doesn't actually work.
*/
var createNodeTypePositioner = function createNodeTypePositioner(nodeType) {
return _objectSpread$1({}, defaultPositioner, {
isActive: function isActive(_ref8) {
var state = _ref8.newState;
var type = getNodeType({
state: state,
type: nodeType
});
return isNodeActive({
state: state,
type: type
});
},
getPosition: function getPosition(_ref9) {
var newState = _ref9.newState,
view = _ref9.view;
findElementAtPosition(newState.selection.from, view);
return absoluteCoordinates({
view: view,
element: findElementAtPosition(newState.selection.from, view),
coords: view.coordsAtPos(newState.selection.$anchor.pos)
});
}
});
};
/**
* A mimic of the css method except that this one does nothing but return an empty string.
*
* @remark
* Used to switch off emotion css injection
*/
var cssNoOp$1 = function cssNoOp() {
return '';
};
var ReactNodeView =
/*#__PURE__*/
function () {
_createClass(ReactNodeView, [{
key: "css",
/**
* The outer element exposed to the editor.
*/
/**
* The CSS transformation property depending on whether the emotion is being used or not.
*/
get: function get() {
return (
/*#__PURE__*/
this.withoutEmotion ? cssNoOp$1 : css$1
);
}
/**
* Provides readonly access to the dom element
*/
}, {
key: "dom",
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,
_ref$style = _ref.style,
style = _ref$style === void 0 ? [] : _ref$style,
view = _ref.view,
_ref$withoutEmotion = _ref.withoutEmotion,
withoutEmotion = _ref$withoutEmotion === void 0 ? false : _ref$withoutEmotion,
options = _ref.options;
_classCallCheck(this, ReactNodeView);
_defineProperty(this, "contentDOMWrapper", null);
_defineProperty(this, "selected", false);
_defineProperty(this, "handleRef", function (node) {
var contentDOM = _this.contentDOMWrapper || _this.contentDOM; // move the contentDOM node inside the inner reference after rendering
if (node && contentDOM && !node.contains(contentDOM)) {
node.appendChild(contentDOM);
}
});
this.node = _node;
this.view = view;
this.getPosition = getPosition;
this.portalContainer = portalContainer;
this.Component = Component;
this.style = style;
this.withoutEmotion = withoutEmotion;
this.options = options;
}
/**
* This method exists to move initialization logic out of the constructor,
* so the object can be initialized properly before calling render first time.
*
* Example:
* Instance properties get added to an object only after super call in
* constructor, which leads to some methods being undefined during the
* first render.
*/
_createClass(ReactNodeView, [{
key: "init",
value: function init() {
var _this2 = this;
this.domRef = this.createDomRef();
this.setDomAttrs(this.node, this.domRef);
var _ref2 = this.getContentDOM() || {
dom: undefined,
contentDOM: undefined
},
contentDOMWrapper = _ref2.dom,
contentDOM = _ref2.contentDOM;
if (this.domRef && contentDOMWrapper) {
this.domRef.appendChild(contentDOMWrapper);
this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
this.contentDOMWrapper = contentDOMWrapper || contentDOM;
} // Add a fixed class and a dynamic class to this node (allows for custom styles being added in configuration)
this.domRef.classList.add("".concat(EDITOR_CLASS_NAME, "-").concat(this.node.type.name, "-node-view"), this.css(this.style));
this.renderReactComponent(function () {
return _this2.render(_this2.handleRef);
});
return this;
}
}, {
key: "renderReactComponent",
value: function renderReactComponent() {
var _this3 = this;
var render = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
return _this3.render(_this3.handleRef);
};
if (!this.domRef) {
return;
}
this.portalContainer.render({
render: render,
container: this.domRef
});
}
/**
* Create a dom ref
*/
}, {
key: "createDomRef",
value: function createDomRef() {
var toDOM = this.node.type.spec.toDOM;
if (toDOM) {
var domSpec = toDOM(this.node);
if (isString(domSpec)) {
return document.createElement(domSpec);
}
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 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
*/
}, {
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;
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);
if (!isValidUpdate) {
return false;
}
if (this.domRef && !this.node.sameMarkup(node)) {
this.setDomAttrs(node, this.domRef);
}
this.node = node;
this.renderReactComponent(function () {
return _this4.render(_this4.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
*/
}, {
key: "setDomAttrs",
value: function setDomAttrs(node, element) {
var toDOM = this.node.type.spec.toDOM;
if (toDOM) {
var domSpec = toDOM(node);
if (isString(domSpec) || isDOMNode(domSpec)) {
return;
}
var attrs = domSpec[1];
if (isPlainObject(attrs)) {
Object.keys(attrs).forEach(function (attr) {
element.setAttribute(attr, String(attrs[attr]));
});
return;
}
}
Object.keys(node.attrs || {}).forEach(function (attr) {
element.setAttribute(attr, node.attrs[attr]);
});
}
/**
* Marks the node as being selected
*/
}, {
key: "selectNode",
value: function selectNode() {
this.selected = true;
if (this.domRef) {
this.domRef.classList.add(SELECTED_NODE_CLASS_NAME);
}
this.renderReactComponent();
} // Remove selected node marking from this node.
}, {
key: "deselectNode",
value: function deselectNode() {
this.selected = false;
if (this.domRef) {
this.domRef.classList.remove(SELECTED_NODE_CLASS_NAME);
}
this.renderReactComponent();
}
/**
* This is called whenever the node is being destroyed.
*/
}, {
key: "destroy",
value: function destroy() {
if (!this.domRef) {
return;
}
this.portalContainer.remove(this.domRef);
this.domRef = undefined;
this.contentDOM = undefined;
}
/**
* A shorthand method for creating the ReactNodeView
*/
}], [{
key: "createNodeView",
value: function createNodeView(_ref3) {
var Component = _ref3.Component,
portalContainer = _ref3.portalContainer,
style = _ref3.style,
withoutEmotion = _ref3.withoutEmotion,
options = _ref3.options;
return function (node, view, getPosition) {
return new ReactNodeView({
node: node,
view: view,
getPosition: getPosition,
portalContainer: portalContainer,
Component: Component,
style: style,
options: options,
withoutEmotion: withoutEmotion
}).init();
};
}
}]);
return ReactNodeView;
}();
export { ReactNodeView, RemirrorElementType, addKeyToElement, asDefaultProps, bubblePositioner, cloneElement, createNodeTypePositioner, css, cssNoOp, defaultPositioner, floatingPositioner, getElementProps, isManagedRemirrorProvider, isReactDOMElement, isReactFragment, isRemirrorContextProvider, isRemirrorElement, isRemirrorExtension, isRemirrorProvider, isValidElement, oneChildOnly, propIsFunction, uniqueClass };
export { RemirrorType, addKeyToElement, asDefaultProps, cloneElement, css, cssNoOp, getElementProps, isManagedRemirrorProvider, isReactDOMElement, isReactFragment, isRemirrorContextProvider, isRemirrorElement, isRemirrorExtension, isRemirrorProvider, isValidElement, oneChildOnly, propIsFunction, uniqueClass };
//# sourceMappingURL=react-utils.esm.js.map

@@ -1,5 +0,2 @@

export * from './helpers';
export * from './react-types';
export * from './positioners';
export * from './node-view';
export * from './react-utils';
//# sourceMappingURL=index.d.ts.map

@@ -1,54 +0,32 @@

"use strict";
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, '__esModule', { value: true });
var _helpers = require("./helpers");
var reactUtils = require('./react-utils.js');
Object.keys(_helpers).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _helpers[key];
}
});
});
var _reactTypes = require("./react-types");
Object.keys(_reactTypes).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _reactTypes[key];
}
});
Object.defineProperty(exports, 'RemirrorType', {
enumerable: true,
get: function () {
return reactUtils.RemirrorType;
}
});
var _positioners = require("./positioners");
Object.keys(_positioners).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _positioners[key];
}
});
});
var _nodeView = require("./node-view");
Object.keys(_nodeView).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _nodeView[key];
}
});
});
//# sourceMappingURL=index.js.map
exports.addKeyToElement = reactUtils.addKeyToElement;
exports.asDefaultProps = reactUtils.asDefaultProps;
exports.cloneElement = reactUtils.cloneElement;
exports.css = reactUtils.css;
exports.cssNoOp = reactUtils.cssNoOp;
exports.getElementProps = reactUtils.getElementProps;
exports.isManagedRemirrorProvider = reactUtils.isManagedRemirrorProvider;
exports.isReactDOMElement = reactUtils.isReactDOMElement;
exports.isReactFragment = reactUtils.isReactFragment;
exports.isRemirrorContextProvider = reactUtils.isRemirrorContextProvider;
exports.isRemirrorElement = reactUtils.isRemirrorElement;
exports.isRemirrorExtension = reactUtils.isRemirrorExtension;
exports.isRemirrorProvider = reactUtils.isRemirrorProvider;
exports.isValidElement = reactUtils.isValidElement;
exports.oneChildOnly = reactUtils.oneChildOnly;
exports.propIsFunction = reactUtils.propIsFunction;
exports.uniqueClass = reactUtils.uniqueClass;
//# sourceMappingURL=index.js.map

@@ -7,8 +7,4 @@ {

"homepage": "https://github.com/ifiokjr/remirror/tree/master/@remirror/react-utils",
"repository": {
"type": "git",
"url": "https://github.com/ifiokjr/remirror.git",
"directory": "@remirror/react-utils"
},
"version": "0.4.2-ci.1564567834.5+b9897ce",
"repository": "https://github.com/ifiokjr/remirror/tree/master/@remirror/react-utils",
"version": "0.4.2-ci.1569229282.9+29c8ef4",
"main": "lib/index.js",

@@ -20,20 +16,10 @@ "module": "lib/dist/react-utils.esm.js",

],
"scripts": {
"build": "run-p build:*",
"build:babel": "babel src --out-dir lib --root-mode=upward --extensions \".ts,.tsx\" -s",
"build:declaration": "tsc -p ./tsconfig.prod.json --emitDeclarationOnly --declarationMap",
"dev": "run-p dev:*",
"dev:babel": "babel src --out-dir lib --root-mode=upward --extensions \".ts,.tsx\" -s --watch",
"dev:declaration": "tsc -p ./tsconfig.prod.json --emitDeclarationOnly --declarationMap --watch",
"lint": "tslint --project tsconfig.lint.json --config ../../tslint.json",
"typecheck": "tsc -p ./tsconfig.json --noEmit"
},
"types": "lib/index.d.ts",
"dependencies": {
"@babel/runtime": "^7.5.5",
"@emotion/core": "^10.0.14",
"@remirror/core": "^0.4.2-ci.1564567834.5+b9897ce",
"emotion": "^10.0.14"
"@babel/runtime": "^7.6.0",
"@remirror/core-helpers": "^0.4.2-ci.1569229282.9+29c8ef4",
"@remirror/core-types": "^0.4.2-ci.1569229282.9+29c8ef4"
},
"peerDependencies": {
"@emotion/core": "^10",
"@types/react": "^16.8.0",

@@ -46,4 +32,7 @@ "react": "^16.8.0"

"cjs": "lib/dist/react-utils.cjs.js",
"meta": {
"sizeLimit": "5 KB"
},
"sideEffects": false,
"gitHead": "b9897ce1f2a1100a37978bde453f7bba645e8139"
"gitHead": "29c8ef4651ece848be7a70d944415c6c14c7c840"
}

@@ -1,4 +0,1 @@

export * from './helpers';
export * from './react-types';
export * from './positioners';
export * from './node-view';
export * from './react-utils';

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet