@instructure/canvas-rce 5.2.0 → 5.3.0

package/lib/rce/contentInsertion.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.insertContent = insertContent;
 exports.insertImage = insertImage;
+exports.insertEquation = insertEquation;
 exports.existingContentToLink = existingContentToLink;
 exports.existingContentToLinkIsImg = existingContentToLinkIsImg;
 exports.insertLink = insertLink;
@@ -122,6 +123,26 @@ function insertImage(editor, image) {
 
   return insertContent(editor, content);
 }
+
+async function insertEquation(editor, latex, canvasUrl) {
+  const docSz = parseFloat(editor.dom.doc.defaultView.getComputedStyle(editor.dom.doc.body).getPropertyValue('font-size')) || 1;
+  const sel = editor.selection.getNode();
+  const imgSz = sel ? parseFloat(editor.dom.doc.defaultView.getComputedStyle(sel).getPropertyValue('font-size')) || 1 : docSz;
+  let url = `/equation_images/${encodeURIComponent(encodeURIComponent(latex))}?scale=${imgSz / docSz}`;
+
+  if (canvasUrl) {
+    url = canvasUrl + url;
+  } // if I simply create the html string, xsslint fails jenkins
+
+
+  const img = document.createElement('img');
+  img.setAttribute('alt', `LaTeX: ${latex}`);
+  img.setAttribute('title', latex);
+  img.setAttribute('class', 'equation_image');
+  img.setAttribute('data-equation-content', latex);
+  img.setAttribute('src', url);
+  return insertContent(editor, img.outerHTML);
+}
 /** * link insertion ** */
 // checks if there's an existing anchor containing the cursor
 

package/lib/rce/getCanvasUrl.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCanvasUrl = getCanvasUrl;
+
+var _api = _interopRequireDefault(require("../sidebar/sources/api.js"));
+
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+async function getCanvasUrl(props) {
+  if (!props || !props.jwt || !props.host) {
+    return null;
+  }
+
+  const source = new _api.default(props);
+  const session = await source.getSession();
+  return session.canvasUrl;
+}

package/lib/rce/plugins/instructure_buttons/components/CreateButtonForm/CreateButtonForm.js

@@ -121,7 +121,8 @@ const CreateButtonForm = ({
   }), /*#__PURE__*/_react.default.createElement(_index2.ImageSection, {
     editor: editor,
     settings: settings,
-    onChange: dispatch
+    onChange: dispatch,
+    editing: editing
   }), /*#__PURE__*/_react.default.createElement(_Footer.Footer, {
     disabled: status === _settings.statuses.LOADING,
     onCancel: onClose,

package/lib/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/ImageSection.js

@@ -17,6 +17,8 @@ var _formatMessage = _interopRequireDefault(require("../../../../../../format-me
 
 var _imageSection = _interopRequireWildcard(require("../../../reducers/imageSection.js"));
 
+var _svgSettings = require("../../../reducers/svgSettings.js");
+
 var _uiFlex = require("@instructure/ui-flex");
 
 var _uiText = require("@instructure/ui-text");
@@ -60,7 +62,11 @@ var _uiView = require("@instructure/ui-view");
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-const ImageSection = () => {
+const ImageSection = ({
+  settings,
+  onChange,
+  editing
+}) => {
   const _useState = (0, _react.useState)(false),
         _useState2 = (0, _slicedToArray2.default)(_useState, 2),
         openCropModal = _useState2[0],
@@ -74,6 +80,40 @@ const ImageSection = () => {
   const allowedModes = {
     [_imageSection.modes.courseImages.type]: _Course.default
   };
+  (0, _react.useEffect)(() => {
+    if (editing) {
+      dispatch({
+        type: _imageSection.actions.SET_IMAGE.type,
+        payload: settings.encodedImage
+      });
+    }
+  }, [settings.encodedImage]);
+  (0, _react.useEffect)(() => {
+    if (editing) {
+      dispatch({
+        type: _imageSection.actions.SET_IMAGE_NAME.type,
+        payload: settings.encodedImageName
+      });
+    }
+  }, [settings.encodedImageName]);
+  (0, _react.useEffect)(() => {
+    onChange({
+      type: _svgSettings.actions.SET_ENCODED_IMAGE,
+      payload: state.image
+    });
+  }, [state.image]);
+  (0, _react.useEffect)(() => {
+    onChange({
+      type: _svgSettings.actions.SET_ENCODED_IMAGE_TYPE,
+      payload: state.mode
+    });
+  }, [state.mode]);
+  (0, _react.useEffect)(() => {
+    onChange({
+      type: _svgSettings.actions.SET_ENCODED_IMAGE_NAME,
+      payload: state.imageName
+    });
+  }, [state.imageName]);
   return /*#__PURE__*/_react.default.createElement(_Group.Group, {
     as: "section",
     defaultExpanded: true,

package/lib/rce/plugins/instructure_buttons/reducers/svgSettings.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgSettings = exports.actions = exports.defaultState = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _constants = require("../svg/constants.js");
+
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+const defaultState = _constants.DEFAULT_SETTINGS;
+exports.defaultState = defaultState;
+const actions = {
+  SET_ENCODED_IMAGE: 'SetEncodedImage',
+  SET_ENCODED_IMAGE_TYPE: 'SetEncodedImageType',
+  SET_ENCODED_IMAGE_NAME: 'SetEncodedImageName'
+};
+exports.actions = actions;
+
+const svgSettings = (state, action) => {
+  switch (action.type) {
+    case actions.SET_ENCODED_IMAGE:
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        encodedImage: action.payload
+      });
+
+    case actions.SET_ENCODED_IMAGE_TYPE:
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        encodedImageType: action.payload
+      });
+
+    case actions.SET_ENCODED_IMAGE_NAME:
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        encodedImageName: action.payload
+      });
+
+    default:
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), action);
+  }
+};
+
+exports.svgSettings = svgSettings;

package/lib/rce/plugins/instructure_buttons/svg/constants.js

@@ -34,7 +34,10 @@ const DEFAULT_SETTINGS = {
   textSize: 'small',
   textColor: null,
   textBackgroundColor: null,
-  textPosition: 'middle'
+  textPosition: 'middle',
+  encodedImage: '',
+  encodedImageType: '',
+  encodedImageName: ''
 };
 exports.DEFAULT_SETTINGS = DEFAULT_SETTINGS;
 const DEFAULT_OPTIONS = {

package/lib/rce/plugins/instructure_buttons/svg/settings.js

@@ -9,13 +9,11 @@ exports.useSvgSettings = useSvgSettings;
 exports.svgFromUrl = svgFromUrl;
 exports.statuses = void 0;
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = require("react");
 
-var _constants = require("../svg/constants.js");
+var _svgSettings = require("../reducers/svgSettings.js");
 
 /*
  * Copyright (C) 2021 - present Instructure, Inc.
@@ -43,7 +41,7 @@ const statuses = {
 exports.statuses = statuses;
 
 function useSvgSettings(editor, editing) {
-  const _useReducer = (0, _react.useReducer)((state, changes) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), changes), _constants.DEFAULT_SETTINGS),
+  const _useReducer = (0, _react.useReducer)(_svgSettings.svgSettings, _svgSettings.defaultState),
         _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
         settings = _useReducer2[0],
         dispatch = _useReducer2[1];

package/lib/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -0,0 +1,395 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../mathlive/index.js");
+
+var _uiTextArea = require("@instructure/ui-text-area");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiCheckbox = require("@instructure/ui-checkbox");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiModal = require("@instructure/ui-modal");
+
+var _formatMessage = _interopRequireDefault(require("../../../../format-message.js"));
+
+var _index2 = _interopRequireDefault(require("../EquationEditorToolbar/index.js"));
+
+var _aphrodite = require("aphrodite");
+
+var _mathml = _interopRequireDefault(require("./mathml.js"));
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+let EquationEditorModal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EquationEditorModal, _Component);
+
+  var _super = (0, _createSuper2.default)(EquationEditorModal);
+
+  function EquationEditorModal(...args) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, EquationEditorModal);
+    _this = _super.call(this, ...args);
+    _this.state = {
+      advanced: false,
+      workingFormula: ''
+    };
+    _this.originalFormula = null;
+    _this.previewElement = /*#__PURE__*/_react.default.createRef();
+
+    _this.executeCommand = (cmd, advancedCmd) => {
+      if (_this.state.advanced) {
+        _this.setState(state => ({
+          workingFormula: state.workingFormula + (advancedCmd || cmd)
+        }));
+      } else {
+        _this.mathField.insert(cmd, {
+          focus: 'true'
+        });
+      }
+    };
+
+    _this.handleEntered = () => {
+      _this.loadExistingFormula();
+    };
+
+    _this.handleModalCancel = e => {
+      var _this$props$onModalDi, _this$props;
+
+      const element = e.srcElement || e.targetElement; // MathJax Menu clicks closes modal. MathJax doesn't let us to get the menu click event
+      // to use stopPropagation().
+
+      const isMathJaxEvent = element && (element.id === 'MathJax_MenuFrame' || element.classList.contains('MathJax_Menu') || element.classList.contains('MathJax_MenuItem'));
+
+      if (isMathJaxEvent) {
+        return;
+      }
+
+      (_this$props$onModalDi = (_this$props = _this.props).onModalDismiss) === null || _this$props$onModalDi === void 0 ? void 0 : _this$props$onModalDi.call(_this$props);
+    };
+
+    _this.handleModalDone = () => {
+      const _this$props2 = _this.props,
+            onModalDismiss = _this$props2.onModalDismiss,
+            onEquationSubmit = _this$props2.onEquationSubmit;
+      const output = _this.state.advanced ? _this.state.workingFormula : _this.mathField.getValue();
+
+      if (output) {
+        onEquationSubmit(output);
+      }
+
+      onModalDismiss();
+    };
+
+    _this.toggleAdvanced = () => {
+      _this.setState(state => {
+        if (state.advanced) {
+          _this.mathField.setValue(state.workingFormula || '');
+
+          return {
+            advanced: false,
+            workingFormula: ''
+          };
+        } else {
+          return {
+            advanced: true,
+            workingFormula: _this.mathField.getValue()
+          };
+        }
+      });
+    };
+
+    _this.handleOpen = () => {
+      _this.originalFormula = null;
+    };
+
+    _this.handleFieldRef = node => {
+      _this.mathField = node;
+    };
+
+    _this.renderFooter = () => {
+      const cancelButton = /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: _this.handleModalCancel
+      }, (0, _formatMessage.default)('Cancel'));
+
+      const doneButton = /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        margin: "none none none xx-small",
+        onClick: _this.handleModalDone,
+        variant: "primary"
+      }, (0, _formatMessage.default)('Done'));
+
+      return /*#__PURE__*/_react.default.createElement("div", null, cancelButton, doneButton);
+    };
+
+    _this.handleRef = node => {
+      _this.modalFooter = node;
+    };
+
+    _this.render = () => {
+      const _this$props3 = _this.props,
+            label = _this$props3.label,
+            onModalClose = _this$props3.onModalClose,
+            title = _this$props3.title,
+            mountNode = _this$props3.mountNode;
+      return /*#__PURE__*/_react.default.createElement(_uiModal.Modal, {
+        label: label,
+        onClose: onModalClose,
+        onDismiss: _this.handleModalCancel,
+        onEntered: _this.handleEntered,
+        onOpen: _this.handleOpen,
+        open: true,
+        mountNode: mountNode,
+        transition: "fade"
+      }, /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        placement: "end",
+        offset: "medium",
+        variant: "icon",
+        onClick: _this.handleModalCancel
+      }, (0, _formatMessage.default)('Close')), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, title || label)), /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Body, null, /*#__PURE__*/_react.default.createElement("div", {
+        ref: node => {
+          _this.modalContent = node;
+        },
+        className: (0, _aphrodite.css)(_styles.default.mathfieldContainer)
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        executeCommand: _this.executeCommand
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _aphrodite.css)(_styles.default.mathFieldContainer),
+        style: {
+          display: _this.state.advanced ? 'none' : null
+        }
+      }, /*#__PURE__*/_react.default.createElement("math-field", {
+        style: {
+          padding: '0.5em',
+          overflow: 'auto',
+          border: 'solid 1px',
+          borderRadius: '4px'
+        },
+        ref: _this.handleFieldRef,
+        "default-mode": "math",
+        "virtual-keyboard-mode": "off",
+        "keypress-sound": "none",
+        "plonk-sound": "none",
+        "math-mode-space": " "
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _aphrodite.css)(_styles.default.mathFieldContainer),
+        style: {
+          display: _this.state.advanced ? null : 'none'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiTextArea.TextArea, {
+        style: {
+          height: '5.1rem',
+          overflowY: 'auto',
+          lineHeight: '1.7rem'
+        },
+        label: "",
+        value: _this.state.workingFormula,
+        onChange: e => _this.setState({
+          workingFormula: e.target.value
+        })
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _aphrodite.css)(_styles.default.latexToggle)
+      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        onChange: _this.toggleAdvanced,
+        checked: _this.state.advanced,
+        label: (0, _formatMessage.default)('Directly Edit LaTeX'),
+        variant: "toggle"
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: _this.state.advanced ? null : 'none',
+          marginTop: '1em'
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        "data-testid": "mathml-preview-element",
+        ref: _this.previewElement
+      })))), /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Footer, {
+        ref: _this.handleRef
+      }, _this.renderFooter()));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(EquationEditorModal, [{
+    key: "currentFormula",
+    value: // **************** //
+    // Helper functions //
+    // **************** //
+    function currentFormula(nodeValue, cursor) {
+      let leftIndex, rightIndex; // The range could still contain more than one formulae, so we need to
+      // isolate them and figure out which one the cursor is within.
+
+      const formulae = nodeValue.match(EquationEditorModal.boundaryRegex);
+
+      if (!formulae) {
+        return [void 0, 0, 0];
+      }
+
+      const foundFormula = formulae.find(formula => {
+        leftIndex = nodeValue.indexOf(formula);
+        rightIndex = leftIndex + formula.length;
+        return leftIndex < cursor && cursor < rightIndex && this.selectionIsLatex(formula);
+      });
+      return [foundFormula, leftIndex, rightIndex];
+    }
+  }, {
+    key: "insertNewRange",
+    value: function insertNewRange(currentFormula, startContainer, leftIndex, rightIndex) {
+      const editor = this.props.editor;
+      const range = document.createRange();
+      range.setStart(startContainer, leftIndex);
+      range.setEnd(startContainer, rightIndex);
+      editor.selection.setRng(range);
+      this.originalFormula = this.selectionToLatex(currentFormula);
+      this.mathField.setValue(this.originalFormula || ' ');
+    }
+  }, {
+    key: "loadExistingFormula",
+    value: function loadExistingFormula() {
+      const editor = this.props.editor;
+      const selection = editor.selection.getContent();
+
+      if (selection && this.selectionIsLatex(selection)) {
+        this.originalFormula = this.selectionToLatex(selection);
+        this.mathField.setValue(this.originalFormula || ' ');
+      } else {
+        const selnode = editor.selection.getNode();
+
+        if (selnode.tagName === 'IMG' && selnode.classList.contains('equation_image')) {
+          try {
+            const src = new URL(selnode.src);
+            const encoded_eq = src.pathname.replace(/^\/equation_images\//, '');
+            this.originalFormula = decodeURIComponent(decodeURIComponent(encoded_eq));
+            this.mathField.setValue(this.originalFormula || ' ');
+          } catch (ex) {
+            // probably failed to create the new URL
+            // eslint-disable-next-line no-console
+            console.error(ex);
+          }
+        } else {
+          const editorRange = editor.selection.getRng();
+          const startContainer = editorRange.startContainer;
+          const wholeText = startContainer.wholeText;
+
+          if (wholeText) {
+            const cursor = editorRange.startOffset; // The `wholeText` value is not sufficient, since we could be dealing with
+            // a number of nested ranges. The `nodeValue` is the text in the range in
+            // which we have found the cursor.
+
+            const nodeValue = startContainer.nodeValue;
+
+            const _this$currentFormula = this.currentFormula(nodeValue, cursor),
+                  _this$currentFormula2 = (0, _slicedToArray2.default)(_this$currentFormula, 3),
+                  currentFormula = _this$currentFormula2[0],
+                  leftIndex = _this$currentFormula2[1],
+                  rightIndex = _this$currentFormula2[2];
+
+            if (currentFormula !== void 0) {
+              this.insertNewRange(currentFormula, startContainer, leftIndex, rightIndex);
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "selectionIsLatex",
+    value: function selectionIsLatex(selection) {
+      return selection.startsWith('\\(') && selection.endsWith('\\)');
+    }
+  }, {
+    key: "selectionToLatex",
+    value: function selectionToLatex(selection) {
+      return selection.substr(2, selection.length - 4);
+    } // ********* //
+    // Callbacks //
+    // ********* //
+
+  }, {
+    key: "setPreviewElementContent",
+    value: function setPreviewElementContent() {
+      if (!this.state.advanced) {
+        return;
+      }
+
+      const mathMlContent = (0, _index.convertLatexToMathMl)(this.state.workingFormula);
+
+      if (mathMlContent) {
+        this.previewElement.current.innerHTML = `<math>${mathMlContent}</math>`;
+
+        _mathml.default.processNewMathInElem(this.previewElement.current);
+      } else {
+        this.previewElement.current.innerHTML = '';
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setPreviewElementContent();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.state.workingFormula !== prevState.workingFormula) {
+        this.setPreviewElementContent();
+      }
+    }
+  }]);
+  return EquationEditorModal;
+}(_react.Component);
+
+exports.default = EquationEditorModal;
+EquationEditorModal.propTypes = {
+  editor: _propTypes.default.object.isRequired,
+  label: _propTypes.default.string.isRequired,
+  onModalDismiss: _propTypes.default.func.isRequired,
+  onModalClose: _propTypes.default.func.isRequired,
+  onEquationSubmit: _propTypes.default.func.isRequired,
+  title: _propTypes.default.node,
+  mountNode: _propTypes.default.string
+};
+EquationEditorModal.boundaryRegex = /\\\((.+?)\\\)/g;
+EquationEditorModal.defaultProps = {
+  title: null,
+  mountNode: null
+};