kokopu-react 1.9.0 → 1.9.2

package/dist/lib/Movetext.js

@@ -1,91 +1,57 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _kokopu = require("kokopu");
-
 var _HtmlSanitizer = _interopRequireDefault(require("./impl/HtmlSanitizer"));
-
 var _util = require("./impl/util");
-
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));
-
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
-
 var _formatmove = require("./formatmove");
-
 var _i18n = _interopRequireDefault(require("./i18n"));
-
 require("./css/movetext.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 /**
  * Display a chess game, i.e. the headers (name of the players, event, etc.), the moves, and all the related annotations if any (comments, variations, NAGs...).
  */
 var Movetext = /*#__PURE__*/function (_React$Component) {
   _inherits(Movetext, _React$Component);
-
   var _super = _createSuper(Movetext);
-
   function Movetext(props) {
     var _this;
-
     _classCallCheck(this, Movetext);
-
     _this = _super.call(this, props);
     _this.focusFieldRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
-
   _createClass(Movetext, [{
     key: "render",
     value: function render() {
       var info = parseGame(this.props.game, this.props.gameIndex);
-
       if (info.error) {
         return /*#__PURE__*/_react["default"].createElement(_ErrorBox["default"], {
           title: _i18n["default"].INVALID_PGN_ERROR_TITLE,
@@ -95,7 +61,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
           lineNumber: info.lineNumber
         });
       }
-
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-movetext"
       }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField(info.game));
@@ -106,7 +71,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       if (!this.props.headerVisible) {
         return undefined;
       }
-
       var headers = [];
       headers.push(this.renderPlayerHeaders(game, 'w'));
       headers.push(this.renderPlayerHeaders(game, 'b'));
@@ -119,31 +83,26 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-headers"
       }, headers) : undefined;
     }
+
     /**
      * Header containing the player-related information (name, rating, title) corresponding to the given color.
      */
-
   }, {
     key: "renderPlayerHeaders",
     value: function renderPlayerHeaders(game, color) {
       var playerName = game.playerName(color);
-
       if (playerName === undefined) {
         return undefined;
       }
-
       var title = game.playerTitle(color);
       var rating = game.playerElo(color);
       var classNames = ['kokopu-headerGroup-player', color === 'w' ? 'kokopu-headerGroup-whitePlayer' : 'kokopu-headerGroup-blackPlayer'];
-
       var colorTag = /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-colorTag"
       });
-
       var playerNameElement = /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-playerName"
       }, sanitizeHtml(playerName));
-
       var titleElement = title === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-playerTitle"
       }, sanitizeHtml(title));
@@ -151,7 +110,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-header-playerRating"
       }, rating);
       var separator = title === undefined || rating === undefined ? undefined : "\xA0"; // \u00a0 == &nbsp;
-
       var titleRatingGroup = title === undefined && rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-headerGroup-titleRating"
       }, titleElement, separator, ratingElement);
@@ -160,47 +118,41 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         key: 'player-' + color
       }, colorTag, playerNameElement, titleRatingGroup);
     }
+
     /**
      * Header containing the event-related information: event + round.
      */
-
   }, {
     key: "renderEventRoundHeaders",
     value: function renderEventRoundHeaders(game) {
       var evt = game.event();
-
       if (evt === undefined) {
         return undefined;
       }
-
       var round = game.round();
       var roundElement = round === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-round"
       }, sanitizeHtml(round));
-
       var evtElement = /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-event"
       }, sanitizeHtml(evt));
-
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-headerGroup-eventRound",
         key: "event-round"
       }, evtElement, roundElement);
     }
+
     /**
      * Header containing the date/place information.
      */
-
   }, {
     key: "renderDateSiteHeaders",
     value: function renderDateSiteHeaders(game) {
       var date = game.date();
       var site = game.site();
-
       if (date === undefined && site === undefined) {
         return undefined;
       }
-
       var dateElement = date === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
         className: "kokopu-header-date"
       }, capitalizeFirstWord(game.dateAsString()));
@@ -208,25 +160,22 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-header-site"
       }, sanitizeHtml(site));
       var separator = date === undefined || site === undefined ? undefined : "\xA0\u2013\xA0"; // \u00a0 == &nbsp;   \u2013 == &ndash;
-
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-headerGroup-dateSite",
         key: "date-site"
       }, dateElement, separator, siteElement);
     }
+
     /**
      * Header containing the annotator information.
      */
-
   }, {
     key: "renderAnnotatorHeader",
     value: function renderAnnotatorHeader(game) {
       var annotator = game.annotator();
-
       if (annotator === undefined) {
         return undefined;
       }
-
       annotator = (0, _util.fillPlaceholder)(_i18n["default"].ANNOTATED_BY, annotator);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-header-annotator",
@@ -237,11 +186,9 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     key: "renderFocusField",
     value: function renderFocusField(game) {
       var _this2 = this;
-
       if (this.props.interactionMode !== 'selectMove') {
         return undefined;
       }
-
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-focusFieldContainer"
       }, /*#__PURE__*/_react["default"].createElement("a", {
@@ -259,50 +206,47 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       var notationTextBuilder = (0, _formatmove.moveFormatter)(this.props.pieceSymbols);
       return this.renderVariation(notationTextBuilder, game.mainVariation(), 'main-variation', true, game.result());
     }
+
     /**
      * Render the given variation and its sub-variations, recursively.
      */
-
   }, {
     key: "renderVariation",
     value: function renderVariation(notationTextBuilder, variation, variationKey, isMainVariation, gameResult) {
       var moveGroups = []; // ... and also long comments and long sub-variations
+      var currentMoveGroupElements = [];
 
-      var currentMoveGroupElements = []; // Close the current move group, if any.
-
+      // Close the current move group, if any.
       function closeMoveGroup() {
         if (!variation.isLongVariation() || currentMoveGroupElements.length === 0) {
           return;
         }
-
         moveGroups.push( /*#__PURE__*/_react["default"].createElement("div", {
           className: "kokopu-moveGroup",
           key: 'group-' + moveGroups.length
         }, currentMoveGroupElements));
         currentMoveGroupElements = [];
-      } // Write the initial comment, if any.
-
+      }
 
+      // Write the initial comment, if any.
       var variationComment = this.extractComment(variation);
-
       if (variationComment !== undefined) {
         if (variation.isLongComment()) {
           moveGroups.push(this.renderComment(variation, variationComment, true));
         } else {
           currentMoveGroupElements.push(this.renderComment(variation, variationComment, true));
         }
-      } // Visit all the PGN nodes (one node per move) within the variation.
-
+      }
 
+      // Visit all the PGN nodes (one node per move) within the variation.
       var forcePrintMoveNumber = true;
       var node = variation.first();
-
       while (node !== undefined) {
         // Write the move, including directly related information (i.e. move number + NAGs).
-        currentMoveGroupElements.push(this.renderMove(notationTextBuilder, node, forcePrintMoveNumber)); // Write the comment (if any).
+        currentMoveGroupElements.push(this.renderMove(notationTextBuilder, node, forcePrintMoveNumber));
 
+        // Write the comment (if any).
         var nodeComment = this.extractComment(node);
-
         if (nodeComment !== undefined) {
           if (node.isLongComment()) {
             closeMoveGroup();
@@ -310,22 +254,18 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
           } else {
             currentMoveGroupElements.push(this.renderComment(node, nodeComment, false));
           }
-        } // Write the sub-variations.
-
+        }
 
+        // Write the sub-variations.
         var hasNonEmptySubVariations = false;
-
         var _iterator = _createForOfIteratorHelper(node.variations().entries()),
-            _step;
-
+          _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var _step$value = _slicedToArray(_step.value, 2),
-                index = _step$value[0],
-                subVariation = _step$value[1];
-
+              index = _step$value[0],
+              subVariation = _step$value[1];
             var subVariationElement = this.renderVariation(notationTextBuilder, subVariation, node.fullMoveNumber() + node.moveColor() + '-variation-' + index, false);
-
             if (subVariationElement) {
               if (subVariation.isLongVariation()) {
                 closeMoveGroup();
@@ -333,37 +273,34 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
               } else {
                 currentMoveGroupElements.push(subVariationElement);
               }
-
               hasNonEmptySubVariations = true;
             }
-          } // Back to the current variation, go to the next move.
+          }
 
+          // Back to the current variation, go to the next move.
         } catch (err) {
           _iterator.e(err);
         } finally {
           _iterator.f();
         }
-
         forcePrintMoveNumber = nodeComment !== undefined || hasNonEmptySubVariations;
         node = node.next();
-      } // Append the game result at the end of the main variation.
-
+      }
 
+      // Append the game result at the end of the main variation.
       if (isMainVariation && gameResult !== '*') {
         currentMoveGroupElements.push( /*#__PURE__*/_react["default"].createElement("span", {
           className: "kokopu-gameResult",
           key: "gameResult"
         }, formatResult(gameResult)));
-      } // Close the last move group, and return the result.
-
+      }
 
+      // Close the last move group, and return the result.
       closeMoveGroup();
       var elements = variation.isLongVariation() ? moveGroups : currentMoveGroupElements;
-
       if (elements.length === 0) {
         return undefined;
       }
-
       if (isMainVariation) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: "kokopu-variation kokopu-mainVariation",
@@ -381,51 +318,47 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         }, elements);
       }
     }
+
     /**
      * Render the given move, move number, and NAG (if any).
      */
-
   }, {
     key: "renderMove",
     value: function renderMove(notationTextBuilder, node, forcePrintMoveNumber) {
       var _this3 = this;
-
       // Move number
       var moveNumber = undefined;
-
       if (forcePrintMoveNumber || node.moveColor() === 'w') {
         var moveNumberText = node.fullMoveNumber() + (node.moveColor() === 'w' ? '.' : "\u2026");
         moveNumber = /*#__PURE__*/_react["default"].createElement("span", {
           className: "kokopu-moveNumber"
         }, moveNumberText);
-      } // SAN notation.
-
+      }
 
-      var notationText = notationTextBuilder(node.notation()); // NAGs
+      // SAN notation.
+      var notationText = notationTextBuilder(node.notation());
 
+      // NAGs
       var nagElements = node.nags().map(function (nag) {
         return /*#__PURE__*/_react["default"].createElement("span", {
           className: "kokopu-nag",
           key: nag
         }, (0, _kokopu.nagSymbol)(nag));
-      }); // Class
+      });
 
+      // Class
       var nodeId = node.id();
       var moveClassNames = ['kokopu-move'];
       var onClick = undefined;
-
       if (this.props.selection && this.props.selection === nodeId) {
         moveClassNames.push('kokopu-selectedMove');
       }
-
       if (this.props.interactionMode === 'selectMove') {
         moveClassNames.push('kokopu-clickableMove');
-
         onClick = function onClick() {
           return _this3.handleNodeClicked(nodeId);
         };
       }
-
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: moveClassNames.join(' '),
         key: node.fullMoveNumber() + node.moveColor()
@@ -436,32 +369,27 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         className: "kokopu-moveNotation"
       }, notationText), nagElements.length === 0 ? undefined : nagElements));
     }
+
     /**
      * Render the given text comment with its diagrams, if any.
      */
-
   }, {
     key: "renderComment",
     value: function renderComment(node, comment, isVariation) {
       var content;
       var sanitizer = createSanitizer(true);
-
       if (this.props.diagramVisible && comment.includes('[#]')) {
         content = [];
         var isFirstPart = true;
-
         var _iterator2 = _createForOfIteratorHelper(comment.split('[#]').entries()),
-            _step2;
-
+          _step2;
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var _step2$value = _slicedToArray(_step2.value, 2),
-                index = _step2$value[0],
-                part = _step2$value[1];
-
+              index = _step2$value[0],
+              part = _step2$value[1];
             if (!isFirstPart) {
               var position = isVariation ? node.initialPosition() : node.position();
-
               var diagram = /*#__PURE__*/_react["default"].createElement(_Chessboard["default"], {
                 position: position,
                 squareMarkers: node.tag('csl'),
@@ -474,16 +402,13 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
                 colorset: this.props.diagramOptions.colorset,
                 pieceset: this.props.diagramOptions.pieceset
               });
-
               content.push( /*#__PURE__*/_react["default"].createElement("div", {
                 className: "kokopu-diagram",
                 key: 'diagram-' + index
               }, diagram));
             }
-
             isFirstPart = false;
             part = part.trim();
-
             if (part.length !== 0) {
               content.push(sanitizeHtml(part, sanitizer));
             }
@@ -496,7 +421,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       } else {
         content = sanitizeHtml(comment, sanitizer);
       }
-
       var key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
       return node.isLongComment() ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "kokopu-comment",
@@ -510,17 +434,15 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     key: "extractComment",
     value: function extractComment(node) {
       var comment = node.comment();
-
       if (comment) {
         // Remove the diagrams if necessary.
         if (!this.props.diagramVisible) {
           comment = comment.replace(/\[#\]/g, ' ');
-        } // Trim and sanitize the space characters.
-
+        }
 
+        // Trim and sanitize the space characters.
         comment = comment.replace(/\s+/g, ' ').trim();
       }
-
       return comment ? comment : undefined;
     }
   }, {
@@ -529,16 +451,12 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
       if (evt.key !== 'Home' && evt.key !== 'ArrowLeft' && evt.key !== 'ArrowRight' && evt.key !== 'End') {
         return;
       }
-
       evt.preventDefault();
-
       if (!this.props.selection) {
         return;
       }
-
       var nodeId = undefined;
       var evtOrigin = '';
-
       if (evt.key === 'Home') {
         nodeId = Movetext.firstNodeId(game, this.props.selection);
         evtOrigin = 'key-first';
@@ -553,7 +471,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         nodeId = Movetext.lastNodeId(game, this.props.selection);
         evtOrigin = 'key-last';
       }
-
       if (nodeId && this.props.onMoveSelected) {
         this.props.onMoveSelected(nodeId, evtOrigin);
       }
@@ -562,22 +479,22 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     key: "handleNodeClicked",
     value: function handleNodeClicked(nodeId) {
       this.focus();
-
       if (this.props.onMoveSelected) {
         this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
       }
     }
+
     /**
      * Set the focus to the current component.
      *
      * @public
      */
-
   }, {
     key: "focus",
     value: function focus() {
       this.focusFieldRef.current.focus();
     }
+
     /**
      * Return the ID of the main variation in the given chess game.
      * If the given selection corresponds already at the main variation, `undefined` is returned.
@@ -589,16 +506,15 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
      * @returns {string?}
      * @public
      */
-
   }], [{
     key: "firstNodeId",
     value: function firstNodeId(game, selection) {
       if (!game.findById(selection)) {
         return undefined;
       }
-
       return selection === 'start' ? undefined : 'start';
     }
+
     /**
      * Return the ID of the node immediately preceding the given selection in the given chess game.
      * If no such node exists, `undefined` is returned.
@@ -610,16 +526,13 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
      * @returns {string?}
      * @public
      */
-
   }, {
     key: "previousNodeId",
     value: function previousNodeId(game, selection) {
       var currentNode = game.findById(selection);
-
       if (!currentNode) {
         return undefined;
       }
-
       if (selection === 'start') {
         return undefined;
       } else if (selection.endsWith('start')) {
@@ -628,16 +541,14 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
 
       while (currentNode) {
         var previousNode = currentNode.previous();
-
         if (previousNode) {
           return previousNode.id();
         }
-
         currentNode = currentNode.parentVariation().parentNode();
       }
-
       return 'start';
     }
+
     /**
      * Return the ID of the node immediately following the given selection in the given chess game.
      * If no such node exists, `undefined` is returned.
@@ -649,19 +560,17 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
      * @returns {string?}
      * @public
      */
-
   }, {
     key: "nextNodeId",
     value: function nextNodeId(game, selection) {
       var currentNode = game.findById(selection);
-
       if (!currentNode) {
         return undefined;
       }
-
       var nextNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
       return nextNode ? nextNode.id() : undefined;
     }
+
     /**
      * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
      * If the selection is already at the end its variation, `undefined` is returned.
@@ -673,38 +582,29 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
      * @returns {string?}
      * @public
      */
-
   }, {
     key: "lastNodeId",
     value: function lastNodeId(game, selection) {
       var currentNode = game.findById(selection);
-
       if (!currentNode) {
         return undefined;
       }
-
       currentNode = selection.endsWith('start') ? currentNode.first() : currentNode.next();
-
       if (!currentNode) {
         // Ensure that the input node is not already the last one.
         return undefined;
       }
-
       while (true) {
         var nextNode = currentNode.next();
-
         if (!nextNode) {
           return currentNode.id();
         }
-
         currentNode = nextNode;
       }
     }
   }]);
-
   return Movetext;
 }(_react["default"].Component);
-
 exports["default"] = Movetext;
 Movetext.propTypes = {
   /**
@@ -713,14 +613,12 @@ Movetext.propTypes = {
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
    */
   game: _propTypes["default"].oneOfType([_propTypes["default"].instanceOf(_kokopu.Game), _propTypes["default"].instanceOf(_kokopu.Database), _propTypes["default"].string]),
-
   /**
    * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
    * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
    * If omitted, the first game of the database/PGN is displayed.
    */
   gameIndex: _propTypes["default"].number,
-
   /**
    * Options applicable to the diagrams in the comments. See [Chessboard](#/Components/Chessboard) for more details about each option.
    */
@@ -732,7 +630,6 @@ Movetext.propTypes = {
     colorset: _Chessboard["default"].propTypes.colorset,
     pieceset: _Chessboard["default"].propTypes.pieceset
   }),
-
   /**
    * Symbols to use for the chess pieces. Can be:
    * - `'native'`: use the first letter of the piece names (in English),
@@ -748,30 +645,25 @@ Movetext.propTypes = {
     N: _propTypes["default"].string.isRequired,
     P: _propTypes["default"].string.isRequired
   })]),
-
   /**
    * Whether the diagrams within the comments (if any) are displayed or not.
    */
   diagramVisible: _propTypes["default"].bool,
-
   /**
    * Whether the game headers (if any) are displayed or not.
    */
   headerVisible: _propTypes["default"].bool,
-
   /**
    * ID of the selected move (or `'start'` for the beginning of the main variation).
    * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
    */
   selection: _propTypes["default"].string,
-
   /**
    * Type of action allowed with the mouse/keys on the component. If undefined, then the user cannot interact with the component.
    *
    * - `'selectMove'` allows the user to select a move.
    */
   interactionMode: _propTypes["default"].oneOf(['selectMove']),
-
   /**
    * Callback invoked when the user selects a move (only if `interactionMode` is set to `'selectMove'`).
    *
@@ -794,76 +686,83 @@ Movetext.defaultProps = {
   diagramVisible: true,
   headerVisible: true
 };
+
 /**
  * Example: `'hello world'` is turned into `'Hello world'`.
  */
-
 function capitalizeFirstWord(text) {
   return text.length === 0 ? '' : text.charAt(0).toUpperCase() + text.slice(1);
 }
-
 function formatResult(result) {
   switch (result) {
     case '1/2-1/2':
       return "\xBD\u2013\xBD";
-
     case '1-0':
       return "1\u20130";
-
     case '0-1':
       return "0\u20131";
   }
 }
-
 function createSanitizer(withBlockTags) {
-  var allowedTags = ['span', // general purpose
-  'a', // links
-  'b', 'strong', 'i', 'em', // bold, italic
-  'del', 'ins', 's', 'u', // underline, strikethrough
-  'sub', 'sup', // subscript, superscript
-  'abbr', // acronym (typically associated to a title=".." tooltip)
-  'q', 'cite', // quotation and title of a work
-  'mark', // highlighted text
+  var allowedTags = ['span',
+  // general purpose
+  'a',
+  // links
+  'b', 'strong', 'i', 'em',
+  // bold, italic
+  'del', 'ins', 's', 'u',
+  // underline, strikethrough
+  'sub', 'sup',
+  // subscript, superscript
+  'abbr',
+  // acronym (typically associated to a title=".." tooltip)
+  'q', 'cite',
+  // quotation and title of a work
+  'mark',
+  // highlighted text
   'small' // smaller text
   ];
+
   var allowedAttributes = {
     '*': ['class', 'id', 'title'],
     'a': ['href', 'target']
   };
-
   if (withBlockTags) {
-    allowedTags = allowedTags.concat(['div', // general purpose
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', // headings
-    'p', 'br', // paragraph and line break
-    'blockquote', // long quotation
-    'img', // image
-    'pre', // preformatted text
+    allowedTags = allowedTags.concat(['div',
+    // general purpose
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    // headings
+    'p', 'br',
+    // paragraph and line break
+    'blockquote',
+    // long quotation
+    'img',
+    // image
+    'pre',
+    // preformatted text
     'ul', 'ol', 'li' // lists
     ]);
+
     Object.assign(allowedAttributes, {
       'img': ['alt', 'src', 'height', 'width']
     });
   }
-
   return new _HtmlSanitizer["default"]({
     allowedTags: allowedTags,
     allowedAttributes: allowedAttributes
   });
 }
-
 function sanitizeHtml(text, sanitizer) {
   if (!sanitizer) {
     sanitizer = createSanitizer(false);
   }
-
   var result = sanitizer.parse(text);
   return result !== null && result !== void 0 ? result : text;
 }
+
 /**
  * Try to interpret the given object as a chess game.
  */
-
-
 function parseGame(game, gameIndex) {
   if (game instanceof _kokopu.Game) {
     return {
@@ -877,7 +776,6 @@ function parseGame(game, gameIndex) {
         message: _i18n["default"].INVALID_GAME_INDEX_ATTRIBUTE_ERROR_MESSAGE
       };
     }
-
     try {
       var result = game instanceof _kokopu.Database ? game.game(gameIndex) : (0, _kokopu.pgnRead)(game, gameIndex);
       return {