@pie-element/math-templated 3.4.10-next.9 → 3.5.1-next.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated@3.4.9...@pie-element/math-templated@3.5.0) (2025-03-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4895, PD-4093, PD-4888 ([7e6f1c5](https://github.com/pie-framework/pie-elements/commit/7e6f1c5d7bd0832f62ec8f048e04bcdbfe426779))
+
+
+### Features
+
+* updated config so line breaks are enabled in editor [PD-4093] ([2e1978d](https://github.com/pie-framework/pie-elements/commit/2e1978db22d6e39328fff7dce8af3a494f77e2e1))
+
+
+
+
+
 ## [3.4.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated@3.4.8...@pie-element/math-templated@3.4.9) (2025-03-21)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-configure@2.3.9...@pie-element/math-templated-configure@2.4.0) (2025-03-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4895, PD-4093, PD-4888 ([7e6f1c5](https://github.com/pie-framework/pie-elements/commit/7e6f1c5d7bd0832f62ec8f048e04bcdbfe426779))
+
+
+### Features
+
+* updated config so line breaks are enabled in editor [PD-4093] ([2e1978d](https://github.com/pie-framework/pie-elements/commit/2e1978db22d6e39328fff7dce8af3a494f77e2e1))
+
+
+
+
+
 ## [2.3.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-configure@2.3.8...@pie-element/math-templated-configure@2.3.9) (2025-03-21)
 
 

package/configure/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/math-templated-configure",
   "private": true,
-  "version": "2.3.9",
+  "version": "2.4.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.10.3",
+    "@pie-lib/pie-toolbox": "2.11.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.21](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-controller@3.1.20...@pie-element/math-templated-controller@3.1.21) (2025-03-27)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-4895, PD-4093, PD-4888 ([7e6f1c5](https://github.com/pie-framework/pie-elements/commit/7e6f1c5d7bd0832f62ec8f048e04bcdbfe426779))
+
+
+
+
+
 ## [3.1.20](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-controller@3.1.19...@pie-element/math-templated-controller@3.1.20) (2025-03-21)
 
 

package/controller/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/math-templated-controller",
   "private": true,
-  "version": "3.1.20",
+  "version": "3.1.21",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
     "@pie-framework/math-validation": "^1.2.3",
-    "@pie-lib/pie-toolbox": "2.10.3",
+    "@pie-lib/pie-toolbox": "2.11.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   },

package/module/configure.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.3/module/index.js";
-import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.11.2/module/index.js";
+import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.11.3/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;

package/module/element.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.3/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.2/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.3/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -6105,16 +6105,16 @@ Transition.ENTERED = 3;
 Transition.EXITING = 4;
 var _default$2$ = (0, _reactLifecyclesCompat.polyfill)(Transition);
 Transition$1.default = _default$2$;
-var utils$7 = {};
-Object.defineProperty(utils$7, "__esModule", {
+var utils$8 = {};
+Object.defineProperty(utils$8, "__esModule", {
   value: true
 });
-utils$7.getTransitionProps = getTransitionProps;
-utils$7.reflow = void 0;
+utils$8.getTransitionProps = getTransitionProps;
+utils$8.reflow = void 0;
 var reflow = function reflow(node) {
   return node.scrollTop;
 };
-utils$7.reflow = reflow;
+utils$8.reflow = reflow;
 function getTransitionProps(props, options) {
   var timeout = props.timeout, _props$style = props.style, style = _props$style === void 0 ? {} : _props$style;
   return {
@@ -6140,7 +6140,7 @@ var _react$2J = _interopRequireDefault$3y(require$$8$J);
 var _propTypes$1$ = _interopRequireDefault$3y(require$$9$W);
 var _Transition$6 = _interopRequireDefault$3y(Transition$1);
 var _withTheme$6 = _interopRequireDefault$3y(withTheme);
-var _utils$1G = utils$7;
+var _utils$1G = utils$8;
 function getScale(value) {
   return ("scale(").concat(value, ", ").concat(Math.pow(value, 2), ")");
 }
@@ -137051,7 +137051,7 @@ var _propTypes$1V = _interopRequireDefault$3i(require$$9$N);
 var _Transition$5 = _interopRequireDefault$3i(Transition$1);
 var _transitions$7 = transitions;
 var _withTheme$5 = _interopRequireDefault$3i(withTheme);
-var _utils$1D = utils$7;
+var _utils$1D = utils$8;
 var styles$1F = {
   entering: {
     opacity: 1
@@ -139217,7 +139217,7 @@ var _Transition$3 = _interopRequireDefault$3a(Transition$1);
 var _utils$1z = require$$16$4;
 var _withStyles$1q = _interopRequireDefault$3a(withStyles);
 var _transitions$6 = transitions;
-var _utils2$3 = utils$7;
+var _utils2$3 = utils$8;
 var styles$1z = function styles(theme) {
   return {
     container: {
@@ -141924,13 +141924,13 @@ InputLabel$1.default = _default$2r;
 var index$1v = getDefaultExportFromCjs(InputLabel$2);
 var FormControl$2 = {};
 var FormControl$1 = {};
-var utils$6 = {};
-Object.defineProperty(utils$6, "__esModule", {
+var utils$7 = {};
+Object.defineProperty(utils$7, "__esModule", {
   value: true
 });
-utils$6.hasValue = hasValue;
-utils$6.isFilled = isFilled;
-utils$6.isAdornedStart = isAdornedStart;
+utils$7.hasValue = hasValue;
+utils$7.isFilled = isFilled;
+utils$7.isAdornedStart = isAdornedStart;
 function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
 }
@@ -141961,7 +141961,7 @@ var _react$2h = _interopRequireDefault$2S(require$$9$F);
 var _propTypes$1G = _interopRequireDefault$2S(require$$10$z);
 var _classnames$1i = _interopRequireDefault$2S(require$$11$s);
 var _utils$1s = require$$16$4;
-var _utils2$2 = utils$6;
+var _utils2$2 = utils$7;
 var _withStyles$1j = _interopRequireDefault$2S(withStyles);
 var _helpers$q = helpers;
 var _reactHelpers$9 = reactHelpers;
@@ -146791,6 +146791,18 @@ const require$$18$3 = _dll_classnames;
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleImageLoad", function () {
         _this.updateDimensions();
       });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
+        e.preventDefault();
+        _this.touchStartTimer = setTimeout(function () {
+          _this.startDrag();
+        }, 300);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
+        var _this$props = _this.props, connectDragSource = _this$props.connectDragSource, disabled = _this$props.disabled;
+        if (!disabled) {
+          connectDragSource(_this.rootRef);
+        }
+      });
       _this.state = {
         height: 0,
         width: 0
@@ -146814,6 +146826,11 @@ const require$$18$3 = _dll_classnames;
       key: "componentDidMount",
       value: function componentDidMount() {
         this.handleElements();
+        if (this.rootRef) {
+          this.rootRef.addEventListener('touchstart', this.handleTouchStart, {
+            passive: false
+          });
+        }
       }
     }, {
       key: "componentDidUpdate",
@@ -146832,6 +146849,13 @@ const require$$18$3 = _dll_classnames;
           this.handleElements();
         }
       }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (this.rootRef) {
+          this.rootRef.removeEventListener('touchstart', this.handleTouchStart);
+        }
+      }
     }, {
       key: "updateDimensions",
       value: function updateDimensions() {
@@ -146883,7 +146907,7 @@ const require$$18$3 = _dll_classnames;
       key: "render",
       value: function render() {
         var _this3 = this, _classnames2;
-        var _this$props = this.props, disabled = _this$props.disabled, choice = _this$props.choice, classes = _this$props.classes, isOver = _this$props.isOver, dragItem = _this$props.dragItem, correct = _this$props.correct;
+        var _this$props2 = this.props, disabled = _this$props2.disabled, choice = _this$props2.choice, classes = _this$props2.classes, isOver = _this$props2.isOver, dragItem = _this$props2.dragItem, correct = _this$props2.correct;
         var draggedLabel = dragItem && isOver && dragItem.choice.value;
         var label = choice && choice.value;
         return _react["default"].createElement(_Chip["default"], {
@@ -154178,7 +154202,7 @@ var _Transition$1 = _interopRequireDefault$2m(Transition$1);
 var _ownerWindow = _interopRequireDefault$2m(ownerWindow$1);
 var _withTheme$4 = _interopRequireDefault$2m(withTheme);
 var _transitions$4 = transitions;
-var _utils$1e = utils$7;
+var _utils$1e = utils$8;
 var GUTTER = 24;
 function getTranslateValue(props, node) {
   var direction = props.direction;
@@ -155479,7 +155503,7 @@ var _withFormControlContext$5 = _interopRequireDefault$2e(withFormControlContext
 var _withStyles$Q = _interopRequireDefault$2e(withStyles);
 var _reactHelpers$3 = reactHelpers;
 var _Textarea = _interopRequireDefault$2e(Textarea$1);
-var _utils2$1 = utils$6;
+var _utils2$1 = utils$7;
 var styles$Y = function styles(theme) {
   var light = theme.palette.type === 'light';
   var placeholder = {
@@ -159979,7 +160003,7 @@ var _classnames$p = _interopRequireDefault$1C(require$$13$5);
 var _warning$4 = _interopRequireDefault$1C(warning_1);
 var _utils$V = require$$16$4;
 var _Menu = _interopRequireDefault$1C(Menu$1);
-var _utils2 = utils$6;
+var _utils2 = utils$7;
 var _reactHelpers$1 = reactHelpers;
 function areEqualValues(a, b) {
   if ((0, _typeof2.default)(b) === 'object' && b !== null) {
@@ -161629,7 +161653,7 @@ var _reactDom$2 = _interopRequireDefault$1o(require$$12$9);
 var _Drawer = _interopRequireWildcard$4(Drawer$1);
 var _transitions$1 = transitions;
 var _withTheme$2 = _interopRequireDefault$1o(withTheme);
-var _utils$Q = utils$7;
+var _utils$Q = utils$8;
 var _NoSsr = _interopRequireDefault$1o(NoSsr$2);
 var _SwipeArea = _interopRequireDefault$1o(SwipeArea$1);
 var UNCERTAINTY_THRESHOLD = 3;
@@ -164315,7 +164339,7 @@ var _propTypes$4 = _interopRequireDefault$10(require$$9$d);
 var _Transition = _interopRequireDefault$10(Transition$1);
 var _transitions = transitions;
 var _withTheme = _interopRequireDefault$10(withTheme);
-var _utils$G = utils$7;
+var _utils$G = utils$8;
 var styles$5 = {
   entering: {
     transform: 'scale(1)'
@@ -165910,13 +165934,13 @@ var greaterThanEqual = set$f({
 });
 comparison$2.greaterThanEqual = greaterThanEqual;
 var vars$1 = {};
-var utils$5 = {};
+var utils$6 = {};
 const require$$3$b = _dll_lodash;
 var _interopRequireDefault$W = interopRequireDefault.exports;
-Object.defineProperty(utils$5, "__esModule", {
+Object.defineProperty(utils$6, "__esModule", {
   value: true
 });
-utils$5.transformToKeySetStructure = utils$5.toKey = utils$5.toArray = utils$5.mkSet = utils$5.extendKeySet = void 0;
+utils$6.transformToKeySetStructure = utils$6.toKey = utils$6.toArray = utils$6.mkSet = utils$6.extendKeySet = void 0;
 var _toConsumableArray2$2 = _interopRequireDefault$W(toConsumableArray$1.exports);
 var _defineProperty2$5 = _interopRequireDefault$W(defineProperty$5.exports);
 var _lodash = _interopRequireDefault$W(require$$3$b);
@@ -165948,13 +165972,13 @@ var mkSet = function mkSet(category) {
     });
   };
 };
-utils$5.mkSet = mkSet;
+utils$6.mkSet = mkSet;
 var toArray = function toArray(o) {
   return Object.keys(o).map(function (k) {
     return o[k];
   });
 };
-utils$5.toArray = toArray;
+utils$6.toArray = toArray;
 var toKey = function toKey(category) {
   return function (v) {
     if (typeof v === 'string') {
@@ -165971,7 +165995,7 @@ var toKey = function toKey(category) {
     }
   };
 };
-utils$5.toKey = toKey;
+utils$6.toKey = toKey;
 var transformToKeySetStructure = function transformToKeySetStructure() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var structure = [];
@@ -165989,7 +166013,7 @@ var transformToKeySetStructure = function transformToKeySetStructure() {
   }
   return structure;
 };
-utils$5.transformToKeySetStructure = transformToKeySetStructure;
+utils$6.transformToKeySetStructure = transformToKeySetStructure;
 var latexAndNameDontExist = function latexAndNameDontExist(base) {
   return function (k) {
     var flattened = _lodash["default"].flatten(base);
@@ -166019,12 +166043,12 @@ var extendKeySet = function extendKeySet() {
   }
   return _final;
 };
-utils$5.extendKeySet = extendKeySet;
+utils$6.extendKeySet = extendKeySet;
 Object.defineProperty(vars$1, "__esModule", {
   value: true
 });
 vars$1.y = vars$1.x = vars$1.theta = void 0;
-var _utils$F = utils$5;
+var _utils$F = utils$6;
 var set$e = (0, _utils$F.mkSet)('vars');
 var x = set$e({
   name: 'X',
@@ -166049,7 +166073,7 @@ Object.defineProperty(fractions$2, "__esModule", {
   value: true
 });
 fractions$2.xOverBlank = fractions$2.xBlankBlank = fractions$2.blankOverBlank = void 0;
-var _utils$E = utils$5;
+var _utils$E = utils$6;
 var set$d = (0, _utils$E.mkSet)('fractions');
 var blankOverBlank = set$d({
   name: 'blank/blank',
@@ -166079,7 +166103,7 @@ Object.defineProperty(exponent$2, "__esModule", {
   value: true
 });
 exponent$2.xToPowerOfN = exponent$2.squared = exponent$2.squareRoot = exponent$2.nthRoot = void 0;
-var _utils$D = utils$5;
+var _utils$D = utils$6;
 var set$c = (0, _utils$D.mkSet)('exponent');
 var squared = set$c({
   name: 'Squared',
@@ -166111,7 +166135,7 @@ Object.defineProperty(misc$2, "__esModule", {
   value: true
 });
 misc$2.similar = misc$2.plusMinus = misc$2.percentage = misc$2.parenthesis = misc$2.notSimilar = misc$2.notEqual = misc$2.nApprox = misc$2.brackets = misc$2.approx = misc$2.absValue = void 0;
-var _utils$C = utils$5;
+var _utils$C = utils$6;
 var set$b = (0, _utils$C.mkSet)('misc');
 var plusMinus = set$b({
   name: 'Plus or Minus',
@@ -166181,7 +166205,7 @@ Object.defineProperty(constants$2, "__esModule", {
   value: true
 });
 constants$2.pi = constants$2.infinity = constants$2.halfInfinity = constants$2.eulers = void 0;
-var _utils$B = utils$5;
+var _utils$B = utils$6;
 var set$a = (0, _utils$B.mkSet)('constants');
 var pi = set$a({
   name: 'Pi',
@@ -166220,7 +166244,7 @@ Object.defineProperty(trigonometry$1, "__esModule", {
   value: true
 });
 trigonometry$1.tan = trigonometry$1.sin = trigonometry$1.sec = trigonometry$1.csc = trigonometry$1.cot = trigonometry$1.cos = void 0;
-var _utils$A = utils$5;
+var _utils$A = utils$6;
 var set$9 = (0, _utils$A.mkSet)('trigonometry');
 var sin = set$9({
   name: 'sine',
@@ -166443,7 +166467,7 @@ Object.defineProperty(operators$1, "__esModule", {
   value: true
 });
 operators$1.circleDot = void 0;
-var _utils$z = utils$5;
+var _utils$z = utils$6;
 var set$7 = (0, _utils$z.mkSet)('operators');
 var circleDot = set$7({
   name: 'CircleDot',
@@ -166457,7 +166481,7 @@ Object.defineProperty(log$4, "__esModule", {
   value: true
 });
 log$4.logSubscript = log$4.log = log$4.ln = void 0;
-var _utils$y = utils$5;
+var _utils$y = utils$6;
 var set$6 = (0, _utils$y.mkSet)('log');
 var log$3 = set$6({
   name: 'Log',
@@ -166485,7 +166509,7 @@ Object.defineProperty(subSup$1, "__esModule", {
   value: true
 });
 subSup$1.superscript = subSup$1.subscript = void 0;
-var _utils$x = utils$5;
+var _utils$x = utils$6;
 var set$5 = (0, _utils$x.mkSet)('sub-sup');
 var superscript = set$5({
   name: 'Superscript',
@@ -166504,7 +166528,7 @@ Object.defineProperty(statistics$1, "__esModule", {
   value: true
 });
 statistics$1.yBar = statistics$1.xBar = statistics$1.smallSigma = statistics$1.sigma = statistics$1.mu = void 0;
-var _utils$w = utils$5;
+var _utils$w = utils$6;
 var set$4 = (0, _utils$w.mkSet)('statistics');
 var xBar = set$4({
   name: 'X Bar',
@@ -166563,7 +166587,7 @@ Object.defineProperty(basicOperators$1, "__esModule", {
 });
 basicOperators$1.plus = basicOperators$1.multiply = basicOperators$1.minus = basicOperators$1.equals = basicOperators$1.divide = void 0;
 var _chars$2 = chars;
-var _utils$v = utils$5;
+var _utils$v = utils$6;
 var set$3 = (0, _utils$v.mkSet)('operators');
 var equals = set$3({
   write: '=',
@@ -166598,7 +166622,7 @@ Object.defineProperty(matrices$1, "__esModule", {
   value: true
 });
 matrices$1.singleCellMatrix = matrices$1.doubleCellMatrix = void 0;
-var _utils$u = utils$5;
+var _utils$u = utils$6;
 var set$2 = (0, _utils$u.mkSet)('matrices');
 var singleCellMatrix = set$2({
   name: 'Single Cell Matrix',
@@ -166667,7 +166691,7 @@ Object.defineProperty(logic$1, "__esModule", {
   value: true
 });
 logic$1.therefore = logic$1.longDivision = void 0;
-var _utils$t = utils$5;
+var _utils$t = utils$6;
 var set$1 = (0, _utils$t.mkSet)('logic');
 var therefore = set$1({
   name: 'Therefore',
@@ -166687,7 +166711,7 @@ Object.defineProperty(navigation, "__esModule", {
 });
 navigation.right = navigation.left = void 0;
 var _chars$1 = chars;
-var _utils$s = utils$5;
+var _utils$s = utils$6;
 var set = (0, _utils$s.mkSet)('navigation');
 var left = set({
   label: _chars$1.LEFT_ARROW,
@@ -168150,7 +168174,7 @@ const require$$9$8 = _dll_prop_types;
   var _react = _interopRequireDefault(require$$8$8);
   var _propTypes = _interopRequireDefault(require$$9$8);
   var _grades = grades;
-  var _utils = utils$5;
+  var _utils = utils$6;
   var _keypad = _interopRequireDefault(keypad);
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
@@ -168342,6 +168366,22 @@ getDefaultExportFromCjs(horizontalKeypad);
   exports.removeBrackets = removeBrackets;
 })(mathInput);
 getDefaultExportFromCjs(mathInput);
+var utils$5 = {};
+Object.defineProperty(utils$5, "__esModule", {
+  value: true
+});
+utils$5.markFractionBaseSuperscripts = void 0;
+var markFractionBaseSuperscripts = function markFractionBaseSuperscripts() {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach(function (supsub) {
+    var prev = supsub.previousElementSibling;
+    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {
+      supsub.classList.add('mq-after-fraction-group');
+    } else {
+      supsub.classList.remove('mq-after-fraction-group');
+    }
+  });
+};
+utils$5.markFractionBaseSuperscripts = markFractionBaseSuperscripts;
 const require$$9$7 = _dll_react;
 const require$$10$9 = _dll_debug;
 const require$$11$6 = _dll_prop_types;
@@ -168371,6 +168411,7 @@ const {isEqual: require$$18$2} = _dll_lodash;
   var _MenuItem = _interopRequireDefault(MenuItem$2);
   var _Select = _interopRequireDefault(Select$2);
   var _isEqual = _interopRequireDefault(require$$18$2);
+  var _utils = utils$5;
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -168493,6 +168534,7 @@ const {isEqual: require$$18$2} = _dll_lodash;
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditorChange", function (latex) {
         var _this$props2 = _this.props, onChange = _this$props2.onChange, noDecimal = _this$props2.noDecimal;
         (0, _mathInput.updateSpans)();
+        (0, _utils.markFractionBaseSuperscripts)();
         _this.updateDisable(true);
         if (noDecimal && (latex.indexOf('.') !== -1 || latex.indexOf(',') !== -1) && _this.input) {
           _this.input.clear();
@@ -168785,6 +168827,12 @@ const {isEqual: require$$18$2} = _dll_lodash;
               marginBottom: '0px !important'
             }
           },
+          '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+            verticalAlign: '0.4em !important'
+          },
+          '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+            verticalAlign: '0.4em !important'
+          },
           '& .mq-math-mode .mq-denominator': {
             marginTop: '-5px !important',
             padding: '0.5em 0.1em 0.1em !important'
@@ -169047,6 +169095,7 @@ const require$$11$5 = _dll_prop_types;
   var _styles = styles$1I;
   var _propTypes = _interopRequireDefault(require$$11$5);
   var _mathInput = mathInput;
+  var _utils = utils$5;
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -169080,6 +169129,18 @@ const require$$11$5 = _dll_prop_types;
       return _super.apply(this, arguments);
     }
     (0, _createClass2["default"])(RawMathPreview, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        (0, _utils.markFractionBaseSuperscripts)();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+          (0, _utils.markFractionBaseSuperscripts)();
+        }
+      }
+    }, {
       key: "render",
       value: function render() {
         log('[render] data: ', this.props.node.data);
@@ -169207,6 +169268,12 @@ const require$$11$5 = _dll_prop_types;
             marginBottom: '0px !important'
           }
         },
+        '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+          verticalAlign: '0.4em !important'
+        },
+        '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+          verticalAlign: '0.4em !important'
+        },
         '& .mq-overarrow-inner': {
           paddingTop: '0 !important',
           border: 'none !important'
@@ -176070,7 +176137,7 @@ var _interopRequireDefault$a = interopRequireDefault.exports;
 Object.defineProperty(serialization, "__esModule", {
   value: true
 });
-serialization.valueToHtml = serialization.reduceMultipleBrs = serialization.reactAttributes = serialization.parseStyleString = serialization.htmlToValue = serialization.getBase64 = serialization.extraCSSRulesOpts = serialization.TEXT_RULE = serialization.INLINE_TAGS = void 0;
+serialization.valueToHtml = serialization.reduceMultipleBrs = serialization.reactAttributes = serialization.parseStyleString = serialization.htmlToValue = serialization.handleHtml = serialization.getBase64 = serialization.extraCSSRulesOpts = serialization.TEXT_RULE = serialization.INLINE_TAGS = void 0;
 var _defineProperty2$1 = _interopRequireDefault$a(defineProperty$5.exports);
 var _slateHtmlSerializer = _interopRequireDefault$a(require$$2$C);
 var _react$a = _interopRequireDefault$a(require$$3$3);
@@ -176545,9 +176612,13 @@ var fixHtmlCode = function fixHtmlCode(markup) {
   parseNode(wrapperEl);
   return wrapperEl.innerHTML;
 };
+var handleHtml = function handleHtml(html) {
+  return fixHtmlCode(reduceRedundantNewLineCharacters(reduceMultipleBrs(html)));
+};
+serialization.handleHtml = handleHtml;
 var htmlToValue = function htmlToValue(html) {
   try {
-    return serializer.deserialize(fixHtmlCode(reduceRedundantNewLineCharacters(reduceMultipleBrs(html))));
+    return serializer.deserialize(handleHtml(html));
   } catch (e) {
     console.log("Couldn't parse html: ", e);
     return {};
@@ -179253,7 +179324,7 @@ const require$$21 = _dll_debug;
   exports.serialization = serialization$1;
   var _insertImageHandler = _interopRequireDefault(insertImageHandler);
   var _plugins = plugins;
-  var _excluded = ["customPlugins"];
+  var _excluded = ["customPlugins", "showParagraphs"];
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -180103,11 +180174,13 @@ const require$$21 = _dll_debug;
     }, {
       key: "render",
       value: function render() {
-        var _classNames, _this4 = this, _value$document;
-        var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className, placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
+        var _classNames, _this4 = this, _value$document, _classNames2;
+        var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className;
+        _this$props2.isEditor;
+        var placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
         var _ref4 = pluginProps || ({});
         _ref4.customPlugins;
-        var otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
+        var showParagraphs = _ref4.showParagraphs, otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
         var _this$state4 = this.state, value = _this$state4.value, focusedNode = _this$state4.focusedNode, toolbarOpts = _this$state4.toolbarOpts, dialog = _this$state4.dialog, scheduled = _this$state4.scheduled;
         log('[render] value: ', value);
         var sizeStyle = this.buildSizeStyle();
@@ -180163,7 +180236,7 @@ const require$$21 = _dll_debug;
           readOnly: disabled,
           spellCheck: spellCheck,
           autoCorrect: spellCheck,
-          className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding), classes.slateEditor),
+          className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.noPadding, toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding), (0, _defineProperty2["default"])(_classNames2, classes.showParagraph, showParagraphs && !showParagraphs.disabled), _classNames2), classes.slateEditor),
           style: {
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
@@ -180226,6 +180299,7 @@ const require$$21 = _dll_debug;
     autoWidthToolbar: _propTypes["default"].bool,
     pluginProps: _propTypes["default"].any,
     placeholder: _propTypes["default"].string,
+    isEditor: _propTypes["default"].bool,
     responseAreaProps: _propTypes["default"].shape({
       type: _propTypes["default"].oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank', 'math-templated']),
       options: _propTypes["default"].object,
@@ -180275,7 +180349,8 @@ const require$$21 = _dll_debug;
     toolbarOpts: defaultToolbarOpts,
     responseAreaProps: defaultResponseAreaProps,
     languageCharactersProps: defaultLanguageCharactersProps,
-    extraCSSRules: null
+    extraCSSRules: null,
+    isEditor: false
   });
   var styles = {
     withBg: {
@@ -180312,6 +180387,13 @@ const require$$21 = _dll_debug;
         border: '1px solid #dfe2e5'
       }
     },
+    showParagraph: {
+      '& > div:has(+ div)::after': {
+        display: 'block',
+        content: '"¶"',
+        color: '#146EB3'
+      }
+    },
     toolbarOnTop: {
       marginTop: '45px'
     },
@@ -180496,7 +180578,7 @@ const require$$15 = _dll_debug;
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (value, done) {
         var html = (0, _serialization.valueToHtml)(value);
-        var htmlParsed = (0, _parseHtml.parseDegrees)(html);
+        var htmlParsed = (0, _serialization.handleHtml)((0, _parseHtml.parseDegrees)(html));
         if (html !== _this.props.markup && _this.props.onChange) {
           _this.props.onChange(htmlParsed);
         }
@@ -180558,7 +180640,7 @@ const require$$15 = _dll_debug;
           return;
         }
         var v = (0, _serialization.htmlToValue)(props.markup);
-        var current = (0, _serialization.htmlToValue)(props.markup);
+        var current = (0, _serialization.htmlToValue)(this.props.markup);
         if (v.equals && !v.equals(current)) {
           this.setState({
             value: v

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/math-templated@3.4.9</title>
+      <title>@pie-element/math-templated@3.5.0</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/math-templated",
-  "version": "3.4.9",
+  "version": "3.5.0",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
@@ -8,7 +8,7 @@
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.11.2"
+      "version": "5.11.3"
     }
   ]
 }

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/math-templated@3.4.9</title>
+      <title>@pie-element/math-templated@3.5.0</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.3/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.2/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.3/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -6068,16 +6068,16 @@ Transition.ENTERED = 3;
 Transition.EXITING = 4;
 var _default$2$ = (0, _reactLifecyclesCompat.polyfill)(Transition);
 Transition$1.default = _default$2$;
-var utils$7 = {};
-Object.defineProperty(utils$7, "__esModule", {
+var utils$8 = {};
+Object.defineProperty(utils$8, "__esModule", {
   value: true
 });
-utils$7.getTransitionProps = getTransitionProps;
-utils$7.reflow = void 0;
+utils$8.getTransitionProps = getTransitionProps;
+utils$8.reflow = void 0;
 var reflow = function reflow(node) {
   return node.scrollTop;
 };
-utils$7.reflow = reflow;
+utils$8.reflow = reflow;
 function getTransitionProps(props, options) {
   var timeout = props.timeout, _props$style = props.style, style = _props$style === void 0 ? {} : _props$style;
   return {
@@ -6103,7 +6103,7 @@ var _react$2J = _interopRequireDefault$3y(require$$8$J);
 var _propTypes$1$ = _interopRequireDefault$3y(require$$9$W);
 var _Transition$6 = _interopRequireDefault$3y(Transition$1);
 var _withTheme$6 = _interopRequireDefault$3y(withTheme);
-var _utils$1G = utils$7;
+var _utils$1G = utils$8;
 function getScale(value) {
   return ("scale(").concat(value, ", ").concat(Math.pow(value, 2), ")");
 }
@@ -137014,7 +137014,7 @@ var _propTypes$1V = _interopRequireDefault$3i(require$$9$N);
 var _Transition$5 = _interopRequireDefault$3i(Transition$1);
 var _transitions$7 = transitions;
 var _withTheme$5 = _interopRequireDefault$3i(withTheme);
-var _utils$1D = utils$7;
+var _utils$1D = utils$8;
 var styles$1F = {
   entering: {
     opacity: 1
@@ -139180,7 +139180,7 @@ var _Transition$3 = _interopRequireDefault$3a(Transition$1);
 var _utils$1z = require$$16$4;
 var _withStyles$1q = _interopRequireDefault$3a(withStyles);
 var _transitions$6 = transitions;
-var _utils2$3 = utils$7;
+var _utils2$3 = utils$8;
 var styles$1z = function styles(theme) {
   return {
     container: {
@@ -141887,13 +141887,13 @@ InputLabel$1.default = _default$2r;
 var index$1v = getDefaultExportFromCjs(InputLabel$2);
 var FormControl$2 = {};
 var FormControl$1 = {};
-var utils$6 = {};
-Object.defineProperty(utils$6, "__esModule", {
+var utils$7 = {};
+Object.defineProperty(utils$7, "__esModule", {
   value: true
 });
-utils$6.hasValue = hasValue;
-utils$6.isFilled = isFilled;
-utils$6.isAdornedStart = isAdornedStart;
+utils$7.hasValue = hasValue;
+utils$7.isFilled = isFilled;
+utils$7.isAdornedStart = isAdornedStart;
 function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
 }
@@ -141924,7 +141924,7 @@ var _react$2h = _interopRequireDefault$2S(require$$9$F);
 var _propTypes$1G = _interopRequireDefault$2S(require$$10$z);
 var _classnames$1i = _interopRequireDefault$2S(require$$11$s);
 var _utils$1s = require$$16$4;
-var _utils2$2 = utils$6;
+var _utils2$2 = utils$7;
 var _withStyles$1j = _interopRequireDefault$2S(withStyles);
 var _helpers$q = helpers;
 var _reactHelpers$9 = reactHelpers;
@@ -146754,6 +146754,18 @@ const require$$18$3 = _dll_classnames;
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleImageLoad", function () {
         _this.updateDimensions();
       });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTouchStart", function (e) {
+        e.preventDefault();
+        _this.touchStartTimer = setTimeout(function () {
+          _this.startDrag();
+        }, 300);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startDrag", function () {
+        var _this$props = _this.props, connectDragSource = _this$props.connectDragSource, disabled = _this$props.disabled;
+        if (!disabled) {
+          connectDragSource(_this.rootRef);
+        }
+      });
       _this.state = {
         height: 0,
         width: 0
@@ -146777,6 +146789,11 @@ const require$$18$3 = _dll_classnames;
       key: "componentDidMount",
       value: function componentDidMount() {
         this.handleElements();
+        if (this.rootRef) {
+          this.rootRef.addEventListener('touchstart', this.handleTouchStart, {
+            passive: false
+          });
+        }
       }
     }, {
       key: "componentDidUpdate",
@@ -146795,6 +146812,13 @@ const require$$18$3 = _dll_classnames;
           this.handleElements();
         }
       }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        if (this.rootRef) {
+          this.rootRef.removeEventListener('touchstart', this.handleTouchStart);
+        }
+      }
     }, {
       key: "updateDimensions",
       value: function updateDimensions() {
@@ -146846,7 +146870,7 @@ const require$$18$3 = _dll_classnames;
       key: "render",
       value: function render() {
         var _this3 = this, _classnames2;
-        var _this$props = this.props, disabled = _this$props.disabled, choice = _this$props.choice, classes = _this$props.classes, isOver = _this$props.isOver, dragItem = _this$props.dragItem, correct = _this$props.correct;
+        var _this$props2 = this.props, disabled = _this$props2.disabled, choice = _this$props2.choice, classes = _this$props2.classes, isOver = _this$props2.isOver, dragItem = _this$props2.dragItem, correct = _this$props2.correct;
         var draggedLabel = dragItem && isOver && dragItem.choice.value;
         var label = choice && choice.value;
         return _react["default"].createElement(_Chip["default"], {
@@ -154141,7 +154165,7 @@ var _Transition$1 = _interopRequireDefault$2m(Transition$1);
 var _ownerWindow = _interopRequireDefault$2m(ownerWindow$1);
 var _withTheme$4 = _interopRequireDefault$2m(withTheme);
 var _transitions$4 = transitions;
-var _utils$1e = utils$7;
+var _utils$1e = utils$8;
 var GUTTER = 24;
 function getTranslateValue(props, node) {
   var direction = props.direction;
@@ -155442,7 +155466,7 @@ var _withFormControlContext$5 = _interopRequireDefault$2e(withFormControlContext
 var _withStyles$Q = _interopRequireDefault$2e(withStyles);
 var _reactHelpers$3 = reactHelpers;
 var _Textarea = _interopRequireDefault$2e(Textarea$1);
-var _utils2$1 = utils$6;
+var _utils2$1 = utils$7;
 var styles$Y = function styles(theme) {
   var light = theme.palette.type === 'light';
   var placeholder = {
@@ -159942,7 +159966,7 @@ var _classnames$p = _interopRequireDefault$1C(require$$13$5);
 var _warning$4 = _interopRequireDefault$1C(warning_1);
 var _utils$V = require$$16$4;
 var _Menu = _interopRequireDefault$1C(Menu$1);
-var _utils2 = utils$6;
+var _utils2 = utils$7;
 var _reactHelpers$1 = reactHelpers;
 function areEqualValues(a, b) {
   if ((0, _typeof2.default)(b) === 'object' && b !== null) {
@@ -161592,7 +161616,7 @@ var _reactDom$2 = _interopRequireDefault$1o(require$$12$9);
 var _Drawer = _interopRequireWildcard$4(Drawer$1);
 var _transitions$1 = transitions;
 var _withTheme$2 = _interopRequireDefault$1o(withTheme);
-var _utils$Q = utils$7;
+var _utils$Q = utils$8;
 var _NoSsr = _interopRequireDefault$1o(NoSsr$2);
 var _SwipeArea = _interopRequireDefault$1o(SwipeArea$1);
 var UNCERTAINTY_THRESHOLD = 3;
@@ -164278,7 +164302,7 @@ var _propTypes$4 = _interopRequireDefault$10(require$$9$d);
 var _Transition = _interopRequireDefault$10(Transition$1);
 var _transitions = transitions;
 var _withTheme = _interopRequireDefault$10(withTheme);
-var _utils$G = utils$7;
+var _utils$G = utils$8;
 var styles$5 = {
   entering: {
     transform: 'scale(1)'
@@ -165873,13 +165897,13 @@ var greaterThanEqual = set$f({
 });
 comparison$2.greaterThanEqual = greaterThanEqual;
 var vars$1 = {};
-var utils$5 = {};
+var utils$6 = {};
 const require$$3$b = _dll_lodash;
 var _interopRequireDefault$W = interopRequireDefault.exports;
-Object.defineProperty(utils$5, "__esModule", {
+Object.defineProperty(utils$6, "__esModule", {
   value: true
 });
-utils$5.transformToKeySetStructure = utils$5.toKey = utils$5.toArray = utils$5.mkSet = utils$5.extendKeySet = void 0;
+utils$6.transformToKeySetStructure = utils$6.toKey = utils$6.toArray = utils$6.mkSet = utils$6.extendKeySet = void 0;
 var _toConsumableArray2$2 = _interopRequireDefault$W(toConsumableArray$1.exports);
 var _defineProperty2$5 = _interopRequireDefault$W(defineProperty$5.exports);
 var _lodash = _interopRequireDefault$W(require$$3$b);
@@ -165911,13 +165935,13 @@ var mkSet = function mkSet(category) {
     });
   };
 };
-utils$5.mkSet = mkSet;
+utils$6.mkSet = mkSet;
 var toArray = function toArray(o) {
   return Object.keys(o).map(function (k) {
     return o[k];
   });
 };
-utils$5.toArray = toArray;
+utils$6.toArray = toArray;
 var toKey = function toKey(category) {
   return function (v) {
     if (typeof v === 'string') {
@@ -165934,7 +165958,7 @@ var toKey = function toKey(category) {
     }
   };
 };
-utils$5.toKey = toKey;
+utils$6.toKey = toKey;
 var transformToKeySetStructure = function transformToKeySetStructure() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var structure = [];
@@ -165952,7 +165976,7 @@ var transformToKeySetStructure = function transformToKeySetStructure() {
   }
   return structure;
 };
-utils$5.transformToKeySetStructure = transformToKeySetStructure;
+utils$6.transformToKeySetStructure = transformToKeySetStructure;
 var latexAndNameDontExist = function latexAndNameDontExist(base) {
   return function (k) {
     var flattened = _lodash["default"].flatten(base);
@@ -165982,12 +166006,12 @@ var extendKeySet = function extendKeySet() {
   }
   return _final;
 };
-utils$5.extendKeySet = extendKeySet;
+utils$6.extendKeySet = extendKeySet;
 Object.defineProperty(vars$1, "__esModule", {
   value: true
 });
 vars$1.y = vars$1.x = vars$1.theta = void 0;
-var _utils$F = utils$5;
+var _utils$F = utils$6;
 var set$e = (0, _utils$F.mkSet)('vars');
 var x = set$e({
   name: 'X',
@@ -166012,7 +166036,7 @@ Object.defineProperty(fractions$2, "__esModule", {
   value: true
 });
 fractions$2.xOverBlank = fractions$2.xBlankBlank = fractions$2.blankOverBlank = void 0;
-var _utils$E = utils$5;
+var _utils$E = utils$6;
 var set$d = (0, _utils$E.mkSet)('fractions');
 var blankOverBlank = set$d({
   name: 'blank/blank',
@@ -166042,7 +166066,7 @@ Object.defineProperty(exponent$2, "__esModule", {
   value: true
 });
 exponent$2.xToPowerOfN = exponent$2.squared = exponent$2.squareRoot = exponent$2.nthRoot = void 0;
-var _utils$D = utils$5;
+var _utils$D = utils$6;
 var set$c = (0, _utils$D.mkSet)('exponent');
 var squared = set$c({
   name: 'Squared',
@@ -166074,7 +166098,7 @@ Object.defineProperty(misc$2, "__esModule", {
   value: true
 });
 misc$2.similar = misc$2.plusMinus = misc$2.percentage = misc$2.parenthesis = misc$2.notSimilar = misc$2.notEqual = misc$2.nApprox = misc$2.brackets = misc$2.approx = misc$2.absValue = void 0;
-var _utils$C = utils$5;
+var _utils$C = utils$6;
 var set$b = (0, _utils$C.mkSet)('misc');
 var plusMinus = set$b({
   name: 'Plus or Minus',
@@ -166144,7 +166168,7 @@ Object.defineProperty(constants$2, "__esModule", {
   value: true
 });
 constants$2.pi = constants$2.infinity = constants$2.halfInfinity = constants$2.eulers = void 0;
-var _utils$B = utils$5;
+var _utils$B = utils$6;
 var set$a = (0, _utils$B.mkSet)('constants');
 var pi = set$a({
   name: 'Pi',
@@ -166183,7 +166207,7 @@ Object.defineProperty(trigonometry$1, "__esModule", {
   value: true
 });
 trigonometry$1.tan = trigonometry$1.sin = trigonometry$1.sec = trigonometry$1.csc = trigonometry$1.cot = trigonometry$1.cos = void 0;
-var _utils$A = utils$5;
+var _utils$A = utils$6;
 var set$9 = (0, _utils$A.mkSet)('trigonometry');
 var sin = set$9({
   name: 'sine',
@@ -166406,7 +166430,7 @@ Object.defineProperty(operators$1, "__esModule", {
   value: true
 });
 operators$1.circleDot = void 0;
-var _utils$z = utils$5;
+var _utils$z = utils$6;
 var set$7 = (0, _utils$z.mkSet)('operators');
 var circleDot = set$7({
   name: 'CircleDot',
@@ -166420,7 +166444,7 @@ Object.defineProperty(log$5, "__esModule", {
   value: true
 });
 log$5.logSubscript = log$5.log = log$5.ln = void 0;
-var _utils$y = utils$5;
+var _utils$y = utils$6;
 var set$6 = (0, _utils$y.mkSet)('log');
 var log$4 = set$6({
   name: 'Log',
@@ -166448,7 +166472,7 @@ Object.defineProperty(subSup$1, "__esModule", {
   value: true
 });
 subSup$1.superscript = subSup$1.subscript = void 0;
-var _utils$x = utils$5;
+var _utils$x = utils$6;
 var set$5 = (0, _utils$x.mkSet)('sub-sup');
 var superscript = set$5({
   name: 'Superscript',
@@ -166467,7 +166491,7 @@ Object.defineProperty(statistics$1, "__esModule", {
   value: true
 });
 statistics$1.yBar = statistics$1.xBar = statistics$1.smallSigma = statistics$1.sigma = statistics$1.mu = void 0;
-var _utils$w = utils$5;
+var _utils$w = utils$6;
 var set$4 = (0, _utils$w.mkSet)('statistics');
 var xBar = set$4({
   name: 'X Bar',
@@ -166526,7 +166550,7 @@ Object.defineProperty(basicOperators$1, "__esModule", {
 });
 basicOperators$1.plus = basicOperators$1.multiply = basicOperators$1.minus = basicOperators$1.equals = basicOperators$1.divide = void 0;
 var _chars$2 = chars;
-var _utils$v = utils$5;
+var _utils$v = utils$6;
 var set$3 = (0, _utils$v.mkSet)('operators');
 var equals = set$3({
   write: '=',
@@ -166561,7 +166585,7 @@ Object.defineProperty(matrices$1, "__esModule", {
   value: true
 });
 matrices$1.singleCellMatrix = matrices$1.doubleCellMatrix = void 0;
-var _utils$u = utils$5;
+var _utils$u = utils$6;
 var set$2 = (0, _utils$u.mkSet)('matrices');
 var singleCellMatrix = set$2({
   name: 'Single Cell Matrix',
@@ -166630,7 +166654,7 @@ Object.defineProperty(logic$1, "__esModule", {
   value: true
 });
 logic$1.therefore = logic$1.longDivision = void 0;
-var _utils$t = utils$5;
+var _utils$t = utils$6;
 var set$1 = (0, _utils$t.mkSet)('logic');
 var therefore = set$1({
   name: 'Therefore',
@@ -166650,7 +166674,7 @@ Object.defineProperty(navigation, "__esModule", {
 });
 navigation.right = navigation.left = void 0;
 var _chars$1 = chars;
-var _utils$s = utils$5;
+var _utils$s = utils$6;
 var set = (0, _utils$s.mkSet)('navigation');
 var left = set({
   label: _chars$1.LEFT_ARROW,
@@ -168113,7 +168137,7 @@ const require$$9$8 = _dll_prop_types;
   var _react = _interopRequireDefault(require$$8$8);
   var _propTypes = _interopRequireDefault(require$$9$8);
   var _grades = grades;
-  var _utils = utils$5;
+  var _utils = utils$6;
   var _keypad = _interopRequireDefault(keypad);
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
@@ -168305,6 +168329,22 @@ getDefaultExportFromCjs(horizontalKeypad);
   exports.removeBrackets = removeBrackets;
 })(mathInput);
 getDefaultExportFromCjs(mathInput);
+var utils$5 = {};
+Object.defineProperty(utils$5, "__esModule", {
+  value: true
+});
+utils$5.markFractionBaseSuperscripts = void 0;
+var markFractionBaseSuperscripts = function markFractionBaseSuperscripts() {
+  document.querySelectorAll('.mq-supsub.mq-sup-only').forEach(function (supsub) {
+    var prev = supsub.previousElementSibling;
+    if (prev && prev.classList.contains('mq-non-leaf') && prev.querySelector('.mq-fraction')) {
+      supsub.classList.add('mq-after-fraction-group');
+    } else {
+      supsub.classList.remove('mq-after-fraction-group');
+    }
+  });
+};
+utils$5.markFractionBaseSuperscripts = markFractionBaseSuperscripts;
 const require$$9$7 = _dll_react;
 const require$$10$9 = _dll_debug;
 const require$$11$6 = _dll_prop_types;
@@ -168334,6 +168374,7 @@ const {isEqual: require$$18$2} = _dll_lodash;
   var _MenuItem = _interopRequireDefault(MenuItem$2);
   var _Select = _interopRequireDefault(Select$2);
   var _isEqual = _interopRequireDefault(require$$18$2);
+  var _utils = utils$5;
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -168456,6 +168497,7 @@ const {isEqual: require$$18$2} = _dll_lodash;
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onEditorChange", function (latex) {
         var _this$props2 = _this.props, onChange = _this$props2.onChange, noDecimal = _this$props2.noDecimal;
         (0, _mathInput.updateSpans)();
+        (0, _utils.markFractionBaseSuperscripts)();
         _this.updateDisable(true);
         if (noDecimal && (latex.indexOf('.') !== -1 || latex.indexOf(',') !== -1) && _this.input) {
           _this.input.clear();
@@ -168748,6 +168790,12 @@ const {isEqual: require$$18$2} = _dll_lodash;
               marginBottom: '0px !important'
             }
           },
+          '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+            verticalAlign: '0.4em !important'
+          },
+          '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+            verticalAlign: '0.4em !important'
+          },
           '& .mq-math-mode .mq-denominator': {
             marginTop: '-5px !important',
             padding: '0.5em 0.1em 0.1em !important'
@@ -169010,6 +169058,7 @@ const require$$11$5 = _dll_prop_types;
   var _styles = styles$1I;
   var _propTypes = _interopRequireDefault(require$$11$5);
   var _mathInput = mathInput;
+  var _utils = utils$5;
   function _createSuper(Derived) {
     var hasNativeReflectConstruct = _isNativeReflectConstruct();
     return function _createSuperInternal() {
@@ -169043,6 +169092,18 @@ const require$$11$5 = _dll_prop_types;
       return _super.apply(this, arguments);
     }
     (0, _createClass2["default"])(RawMathPreview, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        (0, _utils.markFractionBaseSuperscripts)();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (this.props.node.data.get('latex') !== prevProps.node.data.get('latex')) {
+          (0, _utils.markFractionBaseSuperscripts)();
+        }
+      }
+    }, {
       key: "render",
       value: function render() {
         log('[render] data: ', this.props.node.data);
@@ -169170,6 +169231,12 @@ const require$$11$5 = _dll_prop_types;
             marginBottom: '0px !important'
           }
         },
+        '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+          verticalAlign: '0.4em !important'
+        },
+        '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+          verticalAlign: '0.4em !important'
+        },
         '& .mq-overarrow-inner': {
           paddingTop: '0 !important',
           border: 'none !important'
@@ -176033,7 +176100,7 @@ var _interopRequireDefault$a = interopRequireDefault.exports;
 Object.defineProperty(serialization, "__esModule", {
   value: true
 });
-serialization.valueToHtml = serialization.reduceMultipleBrs = serialization.reactAttributes = serialization.parseStyleString = serialization.htmlToValue = serialization.getBase64 = serialization.extraCSSRulesOpts = serialization.TEXT_RULE = serialization.INLINE_TAGS = void 0;
+serialization.valueToHtml = serialization.reduceMultipleBrs = serialization.reactAttributes = serialization.parseStyleString = serialization.htmlToValue = serialization.handleHtml = serialization.getBase64 = serialization.extraCSSRulesOpts = serialization.TEXT_RULE = serialization.INLINE_TAGS = void 0;
 var _defineProperty2$1 = _interopRequireDefault$a(defineProperty$5.exports);
 var _slateHtmlSerializer = _interopRequireDefault$a(require$$2$C);
 var _react$a = _interopRequireDefault$a(require$$3$3);
@@ -176508,9 +176575,13 @@ var fixHtmlCode = function fixHtmlCode(markup) {
   parseNode(wrapperEl);
   return wrapperEl.innerHTML;
 };
+var handleHtml = function handleHtml(html) {
+  return fixHtmlCode(reduceRedundantNewLineCharacters(reduceMultipleBrs(html)));
+};
+serialization.handleHtml = handleHtml;
 var htmlToValue = function htmlToValue(html) {
   try {
-    return serializer.deserialize(fixHtmlCode(reduceRedundantNewLineCharacters(reduceMultipleBrs(html))));
+    return serializer.deserialize(handleHtml(html));
   } catch (e) {
     console.log("Couldn't parse html: ", e);
     return {};
@@ -179216,7 +179287,7 @@ const require$$21 = _dll_debug;
   exports.serialization = serialization$1;
   var _insertImageHandler = _interopRequireDefault(insertImageHandler);
   var _plugins = plugins;
-  var _excluded = ["customPlugins"];
+  var _excluded = ["customPlugins", "showParagraphs"];
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -180066,11 +180137,13 @@ const require$$21 = _dll_debug;
     }, {
       key: "render",
       value: function render() {
-        var _classNames, _this4 = this, _value$document;
-        var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className, placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
+        var _classNames, _this4 = this, _value$document, _classNames2;
+        var _this$props2 = this.props, disabled = _this$props2.disabled, spellCheck = _this$props2.spellCheck, highlightShape = _this$props2.highlightShape, classes = _this$props2.classes, className = _this$props2.className;
+        _this$props2.isEditor;
+        var placeholder = _this$props2.placeholder, pluginProps = _this$props2.pluginProps, onKeyDown = _this$props2.onKeyDown;
         var _ref4 = pluginProps || ({});
         _ref4.customPlugins;
-        var otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
+        var showParagraphs = _ref4.showParagraphs, otherPluginProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded);
         var _this$state4 = this.state, value = _this$state4.value, focusedNode = _this$state4.focusedNode, toolbarOpts = _this$state4.toolbarOpts, dialog = _this$state4.dialog, scheduled = _this$state4.scheduled;
         log('[render] value: ', value);
         var sizeStyle = this.buildSizeStyle();
@@ -180126,7 +180199,7 @@ const require$$21 = _dll_debug;
           readOnly: disabled,
           spellCheck: spellCheck,
           autoCorrect: spellCheck,
-          className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, classes.noPadding, toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding), classes.slateEditor),
+          className: (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, classes.noPadding, toolbarOpts === null || toolbarOpts === void 0 ? void 0 : toolbarOpts.noPadding), (0, _defineProperty2["default"])(_classNames2, classes.showParagraph, showParagraphs && !showParagraphs.disabled), _classNames2), classes.slateEditor),
           style: {
             minHeight: sizeStyle.minHeight,
             height: sizeStyle.height,
@@ -180189,6 +180262,7 @@ const require$$21 = _dll_debug;
     autoWidthToolbar: _propTypes["default"].bool,
     pluginProps: _propTypes["default"].any,
     placeholder: _propTypes["default"].string,
+    isEditor: _propTypes["default"].bool,
     responseAreaProps: _propTypes["default"].shape({
       type: _propTypes["default"].oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank', 'math-templated']),
       options: _propTypes["default"].object,
@@ -180238,7 +180312,8 @@ const require$$21 = _dll_debug;
     toolbarOpts: defaultToolbarOpts,
     responseAreaProps: defaultResponseAreaProps,
     languageCharactersProps: defaultLanguageCharactersProps,
-    extraCSSRules: null
+    extraCSSRules: null,
+    isEditor: false
   });
   var styles = {
     withBg: {
@@ -180275,6 +180350,13 @@ const require$$21 = _dll_debug;
         border: '1px solid #dfe2e5'
       }
     },
+    showParagraph: {
+      '& > div:has(+ div)::after': {
+        display: 'block',
+        content: '"¶"',
+        color: '#146EB3'
+      }
+    },
     toolbarOnTop: {
       marginTop: '45px'
     },
@@ -180459,7 +180541,7 @@ const require$$15 = _dll_debug;
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (value, done) {
         var html = (0, _serialization.valueToHtml)(value);
-        var htmlParsed = (0, _parseHtml.parseDegrees)(html);
+        var htmlParsed = (0, _serialization.handleHtml)((0, _parseHtml.parseDegrees)(html));
         if (html !== _this.props.markup && _this.props.onChange) {
           _this.props.onChange(htmlParsed);
         }
@@ -180521,7 +180603,7 @@ const require$$15 = _dll_debug;
           return;
         }
         var v = (0, _serialization.htmlToValue)(props.markup);
-        var current = (0, _serialization.htmlToValue)(props.markup);
+        var current = (0, _serialization.htmlToValue)(this.props.markup);
         if (v.equals && !v.equals(current)) {
           this.setState({
             value: v

package/package.json

@@ -4,19 +4,19 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.4.10-next.9+8df6015bb",
+  "version": "3.5.1-next.0+8364834e8",
   "description": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.10.3",
+    "@pie-lib/pie-toolbox": "2.11.0",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "8df6015bb355a15b84fae3c79d7471f4423469bf",
+  "gitHead": "8364834e8dfe238958b0f54f5f216d443344bd21",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },