kokopu-react 1.5.4 → 1.7.0

package/.nycrc.yml

@@ -9,5 +9,5 @@ check-coverage: true
 
 exclude:
   - build/**
-  - graphic_test_app/**
+  - graphic_test_src/**
   - test/**

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 ChangeLog
 =========
 
+1.7.0 (June 22, 2022)
+---------------------
+* Upgrade React to React 18.
+* Add support for color blue for markers.
+* Allow customization of the move arrow color in the `Chessboard` component.
+* Change the property names used to define the marker colors in the objects returned by `Chessboard.colorsets()`:
+`g`, `r`, `y` and `highlight` have become respectively `cg`, `cr`, `cy` and `cb`.
+
+1.6.0 (June 1, 2022)
+--------------------
+* Allow block-formatting HTML tags in PGN comments.
+* Provide `formatMove` and `moveFormatter`.
+
+1.5.5 (May 18, 2022)
+--------------------
+* Upgrade dependencies.
+* Remove dependency with security issue.
+
 1.5.4 (May 1, 2022)
 -------------------
 * Provide method `Chessboard#size(..)` to retrieve the width/height of a `Chessboard` component instance.

package/README.md

@@ -27,10 +27,10 @@ Example
 
 ```javascript
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Chessboard } from 'kokopu-react';
 
-ReactDOM.render(<Chessboard />, document.body);
+createRoot(document.body).render(<Chessboard />);
 ```
 
 ![Chessboard component](test/references/02_chessboard_simple/0.png)

package/dist/lib/ArrowMarkerIcon.js

@@ -27,7 +27,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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 || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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); }; }
 
@@ -37,7 +37,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var ARROW_THICKNESS_FACTOR = 0.2;
 /**

package/dist/lib/Chessboard.js

@@ -59,7 +59,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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 || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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); }; }
 
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var TURN_FLAG_SPACING_FACTOR = 0.1;
 var RANK_COORDINATE_WIDTH_FACTOR = 1;
@@ -188,7 +188,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         viewBox: viewBox,
         width: xmax - xmin,
         height: ymax - ymin
-      }, /*#__PURE__*/_react["default"].createElement("defs", null, this.renderArrowTip(colorset, 'g'), this.renderArrowTip(colorset, 'r'), this.renderArrowTip(colorset, 'y'), this.renderArrowTip(colorset, 'highlight')), squares, rankCoordinates, fileCoordinates, this.renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset));
+      }, /*#__PURE__*/_react["default"].createElement("defs", null, this.renderArrowTip(colorset, 'b'), this.renderArrowTip(colorset, 'g'), this.renderArrowTip(colorset, 'r'), this.renderArrowTip(colorset, 'y')), squares, rankCoordinates, fileCoordinates, this.renderBoardContent(position, positionBefore, move, squareSize, colorset, pieceset));
     }
   }, {
     key: "renderBoardContent",
@@ -286,13 +286,14 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
 
       var thickness = Math.max(2, Math.round(HOVER_MARKER_THICKNESS_FACTOR * squareSize));
       var size = squareSize - thickness;
+      var color = this.props.interactionMode === 'editArrows' ? this.props.editedArrowColor : this.props.moveArrowColor;
       return /*#__PURE__*/_react["default"].createElement("rect", {
         className: "kokopu-hoveredSquare",
         x: x + thickness / 2,
         y: y + thickness / 2,
         width: size,
         height: size,
-        stroke: colorset.highlight,
+        stroke: colorset['c' + color],
         strokeWidth: thickness
       });
     }
@@ -407,7 +408,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
         y1: yFrom,
         x2: xTo,
         y2: yTo,
-        stroke: colorset[this.props.editedArrowColor],
+        stroke: colorset['c' + this.props.editedArrowColor],
         strokeWidth: strokeWidth,
         markerEnd: "url(#".concat(arrowTipId, ")")
       });
@@ -543,7 +544,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y: y,
           width: squareSize,
           height: squareSize,
-          fill: colorset[color]
+          fill: colorset['c' + color]
         }));
       });
       return result;
@@ -573,7 +574,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y: y,
           size: squareSize,
           symbol: value.symbol,
-          color: colorset[value.color]
+          color: colorset['c' + value.color]
         })));
       });
       return result;
@@ -621,7 +622,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
           y1: yFrom,
           x2: xTo,
           y2: yTo,
-          stroke: colorset[color],
+          stroke: colorset['c' + color],
           strokeWidth: strokeWidth,
           markerEnd: "url(#".concat(arrowTipId, ")")
         }));
@@ -652,15 +653,16 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
       yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
       var x = xTo * alpha + xFrom * (1 - alpha);
       var y = yTo * alpha + yFrom * (1 - alpha);
+      var color = this.props.moveArrowColor;
       return /*#__PURE__*/_react["default"].createElement("line", {
         className: "kokopu-annotation kokopu-arrow",
         x1: xFrom,
         y1: yFrom,
         x2: x,
         y2: y,
-        stroke: colorset['highlight'],
+        stroke: colorset['c' + color],
         strokeWidth: squareSize * STROKE_THICKNESS_FACTOR,
-        markerEnd: "url(#".concat(this.getArrowTipId('highlight'), ")")
+        markerEnd: "url(#".concat(this.getArrowTipId(color), ")")
       });
     }
   }, {
@@ -668,7 +670,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     value: function renderArrowTip(colorset, color) {
       return /*#__PURE__*/_react["default"].createElement(_ArrowTip["default"], {
         id: this.getArrowTipId(color),
-        color: colorset[color]
+        color: colorset['c' + color]
       });
     }
   }, {
@@ -1114,7 +1116,7 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     /**
      * Available colorsets for theming.
      *
-     * @returns {Object.<string, {w: string, b: string, g: string, r: string, y: string, highlight: string}>}
+     * @returns {Object.<string, { w: string, b: string, cb: string, cg: string, cr: string, cy: string }>}
      * @public
      */
 
@@ -1126,8 +1128,8 @@ var Chessboard = /*#__PURE__*/function (_React$Component) {
     /**
      * Available piecesets for theming.
      *
-     * @returns {Object.<string, {bb: string, bk: string, bn: string, bp: string, bq: string, br: string, bx: string,
-     *                            wb: string, wk: string, wn: string, wp: string, wq: string, wr: string, wx: string}>}
+     * @returns {Object.<string, { bb: string, bk: string, bn: string, bp: string, bq: string, br: string, bx: string,
+     *                             wb: string, wk: string, wn: string, wp: string, wq: string, wr: string, wx: string }>}
      * @public
      */
 
@@ -1205,6 +1207,11 @@ Chessboard.propTypes = {
    */
   moveArrowVisible: _propTypes["default"].bool,
 
+  /**
+   * Color of the move arrow.
+   */
+  moveArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
+
   /**
    * Whether moves are animated or not.
    */
@@ -1252,7 +1259,7 @@ Chessboard.propTypes = {
   /**
    * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
    */
-  editedArrowColor: _propTypes["default"].oneOf(['g', 'r', 'y']),
+  editedArrowColor: _propTypes["default"].oneOf(['b', 'g', 'r', 'y']),
 
   /**
    * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
@@ -1290,6 +1297,7 @@ Chessboard.defaultProps = {
   squareSize: 40,
   coordinateVisible: true,
   moveArrowVisible: true,
+  moveArrowColor: 'b',
   animated: false,
   colorset: 'original',
   pieceset: 'cburnett'

package/dist/lib/Movetext.js

@@ -19,9 +19,9 @@ var _Chessboard = _interopRequireDefault(require("./Chessboard"));
 
 var _ErrorBox = _interopRequireDefault(require("./ErrorBox"));
 
-var _i18n = _interopRequireDefault(require("./i18n"));
+var _formatmove = require("./formatmove");
 
-require("./css/fonts.css");
+var _i18n = _interopRequireDefault(require("./i18n"));
 
 require("./css/movetext.css");
 
@@ -49,7 +49,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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 || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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); }; }
 
@@ -59,7 +59,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 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 : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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...).
@@ -254,7 +254,8 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderBody",
     value: function renderBody(game) {
-      return this.renderVariation(this.getNotationTextBuilder(), game.mainVariation(), 'main-variation', true, game.result());
+      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.
@@ -441,10 +442,10 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
     key: "renderComment",
     value: function renderComment(node, comment, isVariation) {
       var content;
+      var sanitizer = createSanitizer(true);
 
       if (this.props.diagramVisible && comment.includes('[#]')) {
         content = [];
-        var sanitizer = createSanitizer();
         var isFirstPart = true;
 
         var _iterator2 = _createForOfIteratorHelper(comment.split('[#]').entries()),
@@ -491,7 +492,7 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
           _iterator2.f();
         }
       } else {
-        content = sanitizeHtml(comment);
+        content = sanitizeHtml(comment, sanitizer);
       }
 
       var key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
@@ -564,40 +565,6 @@ var Movetext = /*#__PURE__*/function (_React$Component) {
         this.props.onMoveSelected(nodeId === this.props.selection ? undefined : nodeId, 'click');
       }
     }
-    /**
-     * Return the square at the given location.
-     */
-
-  }, {
-    key: "getNotationTextBuilder",
-    value: function getNotationTextBuilder() {
-      var pieceSymbols = this.props.pieceSymbols;
-
-      if (pieceSymbols === 'localized') {
-        var mapping = _i18n["default"].PIECE_SYMBOLS;
-        return function (notation) {
-          return notation.replace(/[KQRBNP]/g, function (match) {
-            return mapping[match];
-          });
-        };
-      } else if (pieceSymbols === 'figurines') {
-        return function (notation) {
-          return figurineNotation(notation, 'alpha');
-        };
-      } else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(function (p) {
-        return typeof pieceSymbols[p] === 'string';
-      })) {
-        return function (notation) {
-          return notation.replace(/[KQRBNP]/g, function (match) {
-            return pieceSymbols[match];
-          });
-        };
-      } else {
-        return function (notation) {
-          return notation;
-        };
-      }
-    }
     /**
      * Set the focus to the current component.
      *
@@ -846,58 +813,50 @@ function formatResult(result) {
   }
 }
 
-function createSanitizer() {
+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: ['a', 'span', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup'],
-    allowedAttributes: {
-      '*': ['class', 'id', 'title'],
-      'a': ['href', 'target']
-    }
+    allowedTags: allowedTags,
+    allowedAttributes: allowedAttributes
   });
 }
 
 function sanitizeHtml(text, sanitizer) {
   if (!sanitizer) {
-    sanitizer = createSanitizer();
+    sanitizer = createSanitizer(false);
   }
 
   var result = sanitizer.parse(text);
   return result !== null && result !== void 0 ? result : text;
 }
-/**
- * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
- * React objects represented with the given chess font.
- */
-
-
-function figurineNotation(text, fontName) {
-  var result = [];
-  var beginOfText = 0;
-  var pieceSymbolIndex = 0;
-
-  for (var pos = 0; pos < text.length; ++pos) {
-    var currentChar = text.charAt(pos);
-
-    if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
-      if (pos > beginOfText) {
-        result.push(text.substring(beginOfText, pos));
-      }
-
-      beginOfText = pos + 1;
-      var key = 'symbol-' + pieceSymbolIndex++;
-      result.push( /*#__PURE__*/_react["default"].createElement("span", {
-        className: 'kokopu-font-' + fontName,
-        key: key
-      }, currentChar));
-    }
-  }
-
-  if (beginOfText < text.length) {
-    result.push(text.substring(beginOfText));
-  }
-
-  return result;
-}
 /**
  * Try to interpret the given object as a chess game.
  */

package/dist/lib/formatmove.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatMove = formatMove;
+exports.moveFormatter = moveFormatter;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = _interopRequireDefault(require("./i18n"));
+
+require("./css/fonts.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/******************************************************************************
+ *                                                                            *
+ *    This file is part of Kokopu-React, a JavaScript chess library.          *
+ *    Copyright (C) 2021-2022  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    This program is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    This program is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+/**
+ * Render the given SAN notation according to the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols See {@link moveFormatter}.
+ * @param {string} notation SAN notation.
+ * @returns {string|React.ReactFragment}
+ */
+function formatMove(pieceSymbols, notation) {
+  var formatter = moveFormatter(pieceSymbols);
+  return formatter(notation);
+}
+/**
+ * Return a callback capable of rendering a SAN notation using the given piece symbol style.
+ *
+ * @param {string|object} pieceSymbols `'native'`, `'localized'`, `'figurines'`, or an object defining a string-valued properties
+ *                                     for each English piece symbol.
+ * @returns {function(string)} Callback returning either a string or a React fragment.
+ */
+
+
+function moveFormatter(pieceSymbols) {
+  if (pieceSymbols === 'localized') {
+    var mapping = _i18n["default"].PIECE_SYMBOLS;
+    return function (notation) {
+      return notation.replace(/[KQRBNP]/g, function (match) {
+        return mapping[match];
+      });
+    };
+  } else if (pieceSymbols === 'figurines') {
+    return function (notation) {
+      return figurineNotation('alpha', notation);
+    };
+  } else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(function (p) {
+    return typeof pieceSymbols[p] === 'string';
+  })) {
+    return function (notation) {
+      return notation.replace(/[KQRBNP]/g, function (match) {
+        return pieceSymbols[match];
+      });
+    };
+  } else {
+    return function (notation) {
+      return notation;
+    };
+  }
+}
+/**
+ * Decompose the given string into piece symbol characters and sections of non piece symbol characters, and transform the piece symbols into
+ * React objects represented with the given chess font.
+ *
+ * @ignore
+ */
+
+
+function figurineNotation(fontName, text) {
+  var result = [];
+  var beginOfText = 0;
+  var pieceSymbolIndex = 0;
+
+  for (var pos = 0; pos < text.length; ++pos) {
+    var currentChar = text.charAt(pos);
+
+    if (currentChar === 'K' || currentChar === 'Q' || currentChar === 'R' || currentChar === 'B' || currentChar === 'N' || currentChar === 'P') {
+      if (pos > beginOfText) {
+        result.push(text.substring(beginOfText, pos));
+      }
+
+      beginOfText = pos + 1;
+      var key = 'symbol-' + pieceSymbolIndex++;
+      result.push( /*#__PURE__*/_react["default"].createElement("span", {
+        className: 'kokopu-font-' + fontName,
+        key: key
+      }, currentChar));
+    }
+  }
+
+  if (beginOfText < text.length) {
+    result.push(text.substring(beginOfText));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, result);
+}

package/dist/lib/impl/HtmlSanitizer.js

@@ -35,9 +35,14 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
+/**
+ * Those tags cannot have any children.
+ */
+var NO_CHILDREN_TAGS = new Set(['br', 'hr', 'img']);
 /**
  * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
  */
+
 var HtmlSanitizer = /*#__PURE__*/function () {
   function HtmlSanitizer(_ref) {
     var allowedTags = _ref.allowedTags,
@@ -101,7 +106,7 @@ var HtmlSanitizer = /*#__PURE__*/function () {
       if (node.type === 'text') {
         return node.data;
       } else if (node.type === 'tag') {
-        var children = node.children.map(function (child) {
+        var children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(function (child) {
           return _this2._processNode(child);
         });
 
@@ -111,9 +116,9 @@ var HtmlSanitizer = /*#__PURE__*/function () {
           attributes['key'] = this._allocateKey();
           return /*#__PURE__*/_react["default"].createElement(node.name, attributes, children);
         } else {
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+          return children ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: this._allocateKey()
-          }, children);
+          }, children) : undefined;
         }
       } else {
         return undefined;