kokopu-react 1.11.1 → 2.0.1

package/dist/lib/Movetext.js

@@ -1,805 +0,0 @@
-"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 = 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, _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,
-          message: info.message,
-          text: info.text,
-          errorIndex: info.errorIndex,
-          lineNumber: info.lineNumber
-        });
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "kokopu-movetext"
-      }, this.renderHeaders(info.game), this.renderBody(info.game), this.renderFocusField(info.game));
-    }
-  }, {
-    key: "renderHeaders",
-    value: function renderHeaders(game) {
-      if (!this.props.headerVisible) {
-        return undefined;
-      }
-      var headers = [];
-      headers.push(this.renderPlayerHeaders(game, 'w'));
-      headers.push(this.renderPlayerHeaders(game, 'b'));
-      headers.push(this.renderEventRoundHeaders(game));
-      headers.push(this.renderDateSiteHeaders(game));
-      headers.push(this.renderAnnotatorHeader(game));
-      return headers.some(function (element) {
-        return element !== undefined;
-      }) ? /*#__PURE__*/_react["default"].createElement("div", {
-        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));
-      var ratingElement = rating === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
-        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);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classNames.join(' '),
-        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 fullRound = game.fullRound();
-      var roundElement = fullRound === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "kokopu-header-round"
-      }, fullRound);
-      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()));
-      var siteElement = site === undefined ? undefined : /*#__PURE__*/_react["default"].createElement("span", {
-        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",
-        key: "annotator"
-      }, sanitizeHtml(annotator));
-    }
-  }, {
-    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", {
-        className: "kokopu-focusField",
-        href: "#",
-        ref: this.focusFieldRef,
-        onKeyDown: function onKeyDown(evt) {
-          return _this2.handleKeyDownInFocusField(evt, game);
-        }
-      }));
-    }
-  }, {
-    key: "renderBody",
-    value: function renderBody(game) {
-      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 = [];
-
-      // 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.
-      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.
-      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).
-        var nodeComment = this.extractComment(node);
-        if (nodeComment !== undefined) {
-          if (node.isLongComment()) {
-            closeMoveGroup();
-            moveGroups.push(this.renderComment(node, nodeComment, false));
-          } else {
-            currentMoveGroupElements.push(this.renderComment(node, nodeComment, false));
-          }
-        }
-
-        // Write the sub-variations.
-        var hasNonEmptySubVariations = false;
-        var _iterator = _createForOfIteratorHelper(node.variations().entries()),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var _step$value = _slicedToArray(_step.value, 2),
-              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();
-                moveGroups.push(subVariationElement);
-              } else {
-                currentMoveGroupElements.push(subVariationElement);
-              }
-              hasNonEmptySubVariations = true;
-            }
-          }
-
-          // 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.
-      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.
-      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",
-          key: variationKey
-        }, elements);
-      } else if (variation.isLongVariation()) {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          className: "kokopu-variation kokopu-subVariation",
-          key: variationKey
-        }, elements);
-      } else {
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          className: "kokopu-variation kokopu-subVariation",
-          key: variationKey
-        }, 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
-      var nagElements = node.nags().map(function (nag) {
-        return /*#__PURE__*/_react["default"].createElement("span", {
-          className: "kokopu-nag",
-          key: nag
-        }, (0, _kokopu.nagSymbol)(nag));
-      });
-
-      // 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()
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "kokopu-moveContent",
-        onClick: onClick
-      }, moveNumber, /*#__PURE__*/_react["default"].createElement("span", {
-        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;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var _step2$value = _slicedToArray(_step2.value, 2),
-              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'),
-                arrowMarkers: node.tag('cal'),
-                textMarkers: node.tag('ctl'),
-                flipped: this.props.diagramOptions.flipped,
-                squareSize: this.props.diagramOptions.squareSize,
-                coordinateVisible: this.props.diagramOptions.coordinateVisible,
-                smallScreenLimits: this.props.diagramOptions.smallScreenLimits,
-                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));
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
-        }
-      } 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",
-        key: key
-      }, content) : /*#__PURE__*/_react["default"].createElement("span", {
-        className: "kokopu-comment",
-        key: key
-      }, content);
-    }
-  }, {
-    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.
-        comment = comment.replace(/\s+/g, ' ').trim();
-      }
-      return comment ? comment : undefined;
-    }
-  }, {
-    key: "handleKeyDownInFocusField",
-    value: function handleKeyDownInFocusField(evt, game) {
-      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';
-      } else if (evt.key === 'ArrowLeft') {
-        nodeId = Movetext.previousNodeId(game, this.props.selection);
-        evtOrigin = 'key-previous';
-      } else if (evt.key === 'ArrowRight') {
-        nodeId = Movetext.nextNodeId(game, this.props.selection);
-        evtOrigin = 'key-next';
-      } else {
-        // evt.key === 'End'
-        nodeId = Movetext.lastNodeId(game, this.props.selection);
-        evtOrigin = 'key-last';
-      }
-      if (nodeId && this.props.onMoveSelected) {
-        this.props.onMoveSelected(nodeId, evtOrigin);
-      }
-    }
-  }, {
-    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.
-     *
-     * This corresponds to the operation performed when the user presses key "home" on a `Movetext` component.
-     *
-     * @param {kokopu.Game} game Considered chess game.
-     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @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.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow left" on a `Movetext` component.
-     *
-     * @param {kokopu.Game} game Considered chess game.
-     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @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')) {
-        currentNode = currentNode.parentNode(); // `.parentNode()` returns always non-null ref here
-      }
-
-      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.
-     *
-     * This corresponds to the operation performed when the user presses key "arrow right" on a `Movetext` component.
-     *
-     * @param {kokopu.Game} game Considered chess game.
-     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @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.
-     *
-     * This corresponds to the operation performed when the user presses key "end" on a `Movetext` component.
-     *
-     * @param {kokopu.Game} game Considered chess game.
-     * @param {string} selection ID of the selected move (or `'start'` for the beginning of the main variation).
-     * @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 = {
-  /**
-   * Displayed position. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
-   * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
-   * 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.
-   */
-  diagramOptions: _propTypes["default"].shape({
-    flipped: _Chessboard["default"].propTypes.flipped,
-    squareSize: _Chessboard["default"].propTypes.squareSize,
-    coordinateVisible: _Chessboard["default"].propTypes.coordinateVisible,
-    smallScreenLimits: _Chessboard["default"].propTypes.smallScreenLimits,
-    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),
-   * - `'localized'`: use the symbols defined by `i18n.PIECE_SYMBOLS`,
-   * - `'figurines'`: use the figurines,
-   * - or an object defining 6 string-valued properties named `K`, `Q`, `R`, `B`, `N` and `P`.
-   */
-  pieceSymbols: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(['native', 'localized', 'figurines']), _propTypes["default"].shape({
-    K: _propTypes["default"].string.isRequired,
-    Q: _propTypes["default"].string.isRequired,
-    R: _propTypes["default"].string.isRequired,
-    B: _propTypes["default"].string.isRequired,
-    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'`).
-   *
-   * @param {string?} nodeId ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
-   *                         `'start'` for the beginning of the main variation, or `undefined` if the user unselects the previously selected move.
-   * @param {string} evtOrigin Origin of the event. Can be:
-   *                        - `'key-first'`: the event has been triggered by the "go-to-first-move" key (aka. the home key),
-   *                        - `'key-previous'`: the event has been triggered by the "go-to-previous-move" key (aka. the arrow left key),
-   *                        - `'key-next'`: the event has been triggered by the "go-to-next-move" key (aka. the arrow right key),
-   *                        - `'key-last'`: the event has been triggered by the "go-to-last-move" key (aka. the end key),
-   *                        - `'click'`: the event has been triggered by a mouse click on a move.
-   */
-  onMoveSelected: _propTypes["default"].func
-};
-Movetext.defaultProps = {
-  game: new _kokopu.Game(),
-  gameIndex: 0,
-  diagramOptions: {},
-  pieceSymbols: 'native',
-  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
-  '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
-    '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 {
-      error: false,
-      game: game
-    };
-  } else if (game instanceof _kokopu.Database || typeof game === 'string') {
-    if (!Number.isInteger(gameIndex) || gameIndex < 0) {
-      return {
-        error: true,
-        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 {
-        error: false,
-        game: result
-      };
-    } catch (e) {
-      // istanbul ignore else
-      if (e instanceof _kokopu.exception.InvalidPGN) {
-        return {
-          error: true,
-          message: e.message,
-          text: e.pgn,
-          errorIndex: e.index,
-          lineNumber: e.lineNumber
-        };
-      } else {
-        throw e;
-      }
-    }
-  } else {
-    return {
-      error: true,
-      message: _i18n["default"].INVALID_GAME_ATTRIBUTE_ERROR_MESSAGE
-    };
-  }
-}