kokopu-react 1.5.5 → 1.6.0

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 ChangeLog
 =========
 
+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.

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;

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;

package/dist/lib/index.js

@@ -57,12 +57,24 @@ Object.defineProperty(exports, "flattenTextMarkers", {
     return _markers.flattenTextMarkers;
   }
 });
+Object.defineProperty(exports, "formatMove", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.formatMove;
+  }
+});
 Object.defineProperty(exports, "i18n", {
   enumerable: true,
   get: function get() {
     return _i18n["default"];
   }
 });
+Object.defineProperty(exports, "moveFormatter", {
+  enumerable: true,
+  get: function get() {
+    return _formatmove.moveFormatter;
+  }
+});
 Object.defineProperty(exports, "parseArrowMarkers", {
   enumerable: true,
   get: function get() {
@@ -84,6 +96,8 @@ Object.defineProperty(exports, "parseTextMarkers", {
 
 var _markers = require("./markers");
 
+var _formatmove = require("./formatmove");
+
 var _i18n = _interopRequireDefault(require("./i18n"));
 
 var _Chessboard = _interopRequireDefault(require("./Chessboard"));

package/graphic_test_app/common/games.pgn

@@ -85,7 +85,7 @@ probably to assure himself that the combination was sound and that he had a forc
 [Date "????.??.??"]
 [Round "<strong>3</strong>.2"]
 [White "1<sup>st</sup> <em>player</em>"]
-[Black "2<sub>nd</sub> <em>player</em>"]
+[Black "2<sub>nd</sub> <i>player</i>"]
 [Result "*"]
 [WhiteElo "<ins>2800</ins>"]
 [BlackElo "<del>1010</del>"]
@@ -104,7 +104,13 @@ probably to assure himself that the combination was sound and that he had a forc
 [Black "?"]
 [Result "*"]
 
-{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.}
+{I'm a <strong><ins>comment</ins></strong> with some <em class="myClass">HTML content</em> in it.<br/>
+Lists are supported:
+<ul>
+<li>1<sup>st</sup> point</li>
+<li>2<sup>nd</sup> point</li>
+</ul>
+... and so are images: <img src="../smiley.png" alt="smiley" />}
 
 *
 
@@ -119,9 +125,9 @@ probably to assure himself that the combination was sound and that he had a forc
 [Result "*"]
 
 {
-Using <div class="myClass">div tags</div> is not allowed.
-... but <div class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</div> are rendered.
-Using <span style="color: cyan;">style attributes</span> is not allowed.
+Using <form class="myClass">form-related tags</form> is not allowed.<br/>
+... but <button class="myClass"><em>legit HTML elements</em> within forbidden HTML tags</button> are rendered.<br/>
+Using <span style="color: cyan;">style attributes</span> is not allowed.<br/>
 Using scripts is not allowed. <script>alert('You should not see this either.');</script>
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.5",
+	"version": "1.6.0",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -38,19 +38,19 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.17.12",
-		"@babel/preset-env": "^7.17.12",
+		"@babel/core": "^7.18.2",
+		"@babel/preset-env": "^7.18.2",
 		"@babel/preset-react": "^7.17.12",
 		"@emotion/react": "^11.9.0",
 		"@emotion/styled": "^11.8.1",
-		"@mui/material": "^5.8.0",
+		"@mui/material": "^5.8.2",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-istanbul": "^6.1.1",
 		"copy-webpack-plugin": "^11.0.0",
 		"coveralls": "^3.1.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.15.0",
-		"eslint-plugin-react": "^7.29.4",
+		"eslint": "^8.16.0",
+		"eslint-plugin-react": "^7.30.0",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
 		"mocha": "^10.0.0",

package/scripts/test_graphic/webpack-config.js

@@ -39,7 +39,10 @@ var plugins = items.map(item => new HtmlWebpackPlugin({
 	filename: item + '/index.html',
 }));
 plugins.push(new CopyWebpackPlugin({
-	patterns: [ { from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' } ],
+	patterns: [
+		{ from: './graphic_test_app/common/heartbeat.txt', to: 'heartbeat.txt' },
+		{ from: './graphic_test_app/common/smiley.png', to: 'smiley.png' },
+	],
 }));
 
 module.exports = {

package/src/Movetext.js

@@ -27,9 +27,9 @@ import kokopu from 'kokopu';
 import HtmlSanitizer from './impl/HtmlSanitizer';
 import Chessboard from './Chessboard';
 import ErrorBox from './ErrorBox';
+import { moveFormatter } from './formatmove';
 import i18n from './i18n';
 
-import './css/fonts.css';
 import './css/movetext.css';
 
 
@@ -144,7 +144,8 @@ export default class Movetext extends React.Component {
 	}
 
 	renderBody(game) {
-		return this.renderVariation(this.getNotationTextBuilder(), game.mainVariation(), 'main-variation', true, game.result());
+		let notationTextBuilder = moveFormatter(this.props.pieceSymbols);
+		return this.renderVariation(notationTextBuilder, game.mainVariation(), 'main-variation', true, game.result());
 	}
 
 	/**
@@ -284,9 +285,9 @@ export default class Movetext extends React.Component {
 	 */
 	renderComment(node, comment, isVariation) {
 		let content;
+		let sanitizer = createSanitizer(true);
 		if (this.props.diagramVisible && comment.includes('[#]')) {
 			content = [];
-			let sanitizer = createSanitizer();
 			let isFirstPart = true;
 			for (let [index, part] of comment.split('[#]').entries()) {
 				if (!isFirstPart) {
@@ -309,7 +310,7 @@ export default class Movetext extends React.Component {
 			}
 		}
 		else {
-			content = sanitizeHtml(comment);
+			content = sanitizeHtml(comment, sanitizer);
 		}
 		let key = isVariation ? 'initial-comment' : node.fullMoveNumber() + node.moveColor() + '-comment';
 		return node.isLongComment() ? <div className="kokopu-comment" key={key}>{content}</div> : <span className="kokopu-comment" key={key}>{content}</span>;
@@ -368,26 +369,6 @@ export default class Movetext extends React.Component {
 		}
 	}
 
-	/**
-	 * Return the square at the given location.
-	 */
-	getNotationTextBuilder() {
-		let pieceSymbols = this.props.pieceSymbols;
-		if (pieceSymbols === 'localized') {
-			let mapping = i18n.PIECE_SYMBOLS;
-			return notation => notation.replace(/[KQRBNP]/g, match => mapping[match]);
-		}
-		else if (pieceSymbols === 'figurines') {
-			return notation => figurineNotation(notation, 'alpha');
-		}
-		else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(p => typeof pieceSymbols[p] === 'string')) {
-			return notation => notation.replace(/[KQRBNP]/g, match => pieceSymbols[match]);
-		}
-		else {
-			return notation => notation;
-		}
-	}
-
 	/**
 	 * Set the focus to the current component.
 	 *
@@ -615,52 +596,49 @@ function formatResult(result) {
 }
 
 
-function createSanitizer() {
-	return new HtmlSanitizer({
-		allowedTags: [ 'a', 'span', 'b', 'strong', 'i', 'em', 'mark', 'small', 'del', 'ins', 'sub', 'sup' ],
-		allowedAttributes: {
-			'*': [ 'class', 'id', 'title' ],
-			'a': [ 'href', 'target' ]
-		}
-	});
+function createSanitizer(withBlockTags) {
+	let 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
+	];
+	let 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({ allowedTags: allowedTags, allowedAttributes: allowedAttributes });
 }
 
 
 function sanitizeHtml(text, sanitizer) {
 	if (!sanitizer) {
-		sanitizer = createSanitizer();
+		sanitizer = createSanitizer(false);
 	}
 	let result = sanitizer.parse(text);
 	return 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) {
-	let result = [];
-	let beginOfText = 0;
-	let pieceSymbolIndex = 0;
-	for (let pos = 0; pos < text.length; ++pos) {
-		let 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;
-			let key = 'symbol-' + (pieceSymbolIndex++);
-			result.push(<span className={'kokopu-font-' + fontName} key={key}>{currentChar}</span>);
-		}
-	}
-	if (beginOfText < text.length) {
-		result.push(text.substring(beginOfText));
-	}
-	return result;
-}
-
-
 /**
  * Try to interpret the given object as a chess game.
  */

package/src/formatmove.js

@@ -0,0 +1,91 @@
+/******************************************************************************
+ *                                                                            *
+ *    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/>.                                         *
+ *                                                                            *
+ ******************************************************************************/
+
+
+import React from 'react';
+import i18n from './i18n';
+
+import './css/fonts.css';
+
+
+/**
+ * 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}
+ */
+export function formatMove(pieceSymbols, notation) {
+	let 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.
+ */
+export function moveFormatter(pieceSymbols) {
+	if (pieceSymbols === 'localized') {
+		let mapping = i18n.PIECE_SYMBOLS;
+		return notation => notation.replace(/[KQRBNP]/g, match => mapping[match]);
+	}
+	else if (pieceSymbols === 'figurines') {
+		return notation => figurineNotation('alpha', notation);
+	}
+	else if (pieceSymbols !== 'native' && pieceSymbols && ['K', 'Q', 'R', 'B', 'N', 'P'].every(p => typeof pieceSymbols[p] === 'string')) {
+		return notation => notation.replace(/[KQRBNP]/g, match => pieceSymbols[match]);
+	}
+	else {
+		return notation => 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) {
+	let result = [];
+	let beginOfText = 0;
+	let pieceSymbolIndex = 0;
+	for (let pos = 0; pos < text.length; ++pos) {
+		let 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;
+			let key = 'symbol-' + (pieceSymbolIndex++);
+			result.push(<span className={'kokopu-font-' + fontName} key={key}>{currentChar}</span>);
+		}
+	}
+	if (beginOfText < text.length) {
+		result.push(text.substring(beginOfText));
+	}
+	return <>{result}</>;
+}

package/src/impl/HtmlSanitizer.js

@@ -24,6 +24,12 @@ import React from 'react';
 import * as htmlparser2 from 'htmlparser2';
 
 
+/**
+ * Those tags cannot have any children.
+ */
+const NO_CHILDREN_TAGS = new Set([ 'br', 'hr', 'img' ]);
+
+
 /**
  * HTML sanitizer: parse HTML string, keeping only the allowed HTML nodes, and the corresponding React object.
  */
@@ -74,14 +80,14 @@ export default class HtmlSanitizer {
 			return node.data;
 		}
 		else if (node.type === 'tag') {
-			let children = node.children.map(child => this._processNode(child));
+			let children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(child => this._processNode(child));
 			if (this._allowedTags.has(node.name)) {
 				let attributes = this._filterAttributes(node.name, node.attribs);
 				attributes['key'] = this._allocateKey();
 				return React.createElement(node.name, attributes, children);
 			}
 			else {
-				return <React.Fragment key={this._allocateKey()}>{children}</React.Fragment>;
+				return children ? <React.Fragment key={this._allocateKey()}>{children}</React.Fragment> : undefined;
 			}
 		}
 		else {

package/src/index.js

@@ -21,6 +21,7 @@
 
 
 export { flattenSquareMarkers, parseSquareMarkers, flattenTextMarkers, parseTextMarkers, flattenArrowMarkers, parseArrowMarkers } from './markers';
+export { formatMove, moveFormatter } from './formatmove';
 export { default as i18n } from './i18n';
 export { default as Chessboard } from './Chessboard';
 export { default as ErrorBox } from './ErrorBox';