kokopu-react 1.5.5 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kokopu-react",
-	"version": "1.5.5",
+	"version": "1.7.1",
 	"description": "A React-based library to create and display chessboard and chess-related components.",
 	"keywords": [
 		"chess",
@@ -18,61 +18,67 @@
 	"files": [
 		"dist/lib",
 		"doc_src",
-		"graphic_test_app",
+		"graphic_test_src",
 		"graphics",
-		"scripts/test_graphic",
-		"scripts/test_headless.webpack-config.js",
+		"scripts/clean-graphic-output.js",
+		"scripts/docker-compose.yml",
+		"scripts/test-graphic.webpack.config.js",
+		"scripts/test-headless.webpack.config.js",
 		"src",
 		"test",
 		".babelrc",
 		".eslint.yml",
 		".nycrc.yml"
 	],
+	"peerDependencies": {
+		"kokopu": "^2.6.0",
+		"react": "17.x.x || 18.x.x"
+	},
 	"dependencies": {
 		"htmlparser2": "^8.0.1",
-		"kokopu": "^2.8.0",
 		"prop-types": "^15.8.1",
-		"react": "^17.0.2",
 		"react-draggable": "^4.4.5",
 		"react-motion": "^0.5.2"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.17.10",
-		"@babel/core": "^7.17.12",
-		"@babel/preset-env": "^7.17.12",
+		"@babel/core": "^7.18.5",
+		"@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",
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@mui/material": "^5.8.5",
 		"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.18.0",
+		"eslint-plugin-react": "^7.30.0",
 		"html-webpack-plugin": "^5.5.0",
 		"img-diff-js": "^0.5.2",
+		"kokopu": "^2.9.0",
 		"mocha": "^10.0.0",
 		"null-loader": "^4.0.1",
 		"nyc": "^15.1.0",
-		"react-dom": "^17.0.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-styleguidist": "^11.2.0",
-		"selenium-webdriver": "^4.1.2",
-		"ssh2-sftp-client": "^8.1.0",
+		"selenium-webdriver": "^4.2.0",
+		"ssh2-sftp-client": "^9.0.1",
 		"style-loader": "^3.3.1",
 		"unit.js": "^2.1.1",
-		"webpack": "^5.72.1",
-		"webpack-cli": "^4.9.2"
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0"
 	},
 	"scripts": {
-		"lint": "eslint doc_src graphic_test_app src test",
-		"preunit": "webpack --config scripts/test_headless.webpack-config.js && webpack --config scripts/test_graphic/webpack-config.js && node scripts/test_graphic/clean-graphic-output.js",
+		"lint": "eslint doc_src graphic_test_src src test",
+		"preunit": "webpack --config scripts/test-headless.webpack.config.js && webpack --config scripts/test-graphic.webpack.config.js && node scripts/clean-graphic-output.js",
 		"unit": "nyc mocha --bail --sort",
 		"test": "npm run lint && npm run unit",
 		"publish_coverage": "nyc report --reporter=text-lcov | coveralls",
-		"start_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml up -d",
-		"stop_test_env": "docker-compose -f scripts/test_graphic/docker-compose.yml down",
+		"test_env:start": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml up -d",
+		"test_env:stop": "docker-compose -p kokopu-react-test-env -f scripts/docker-compose.yml down",
 		"build": "make -f scripts/build.mk",
 		"clean": "make -f scripts/build.mk clean",
 		"start": "styleguidist server --open --config scripts/styleguide.config.js",

package/scripts/{test_graphic/clean-graphic-output.js → clean-graphic-output.js}

@@ -22,7 +22,7 @@
 
 const fs = require('fs');
 
-const rootDir = __dirname + '/../..';
+const rootDir = __dirname + '/..';
 const outputDir = rootDir + '/build/graphic_output';
 
 // Erase the directory in which the screenshots are generated.

package/scripts/docker-compose.yml

@@ -0,0 +1,14 @@
+version: "3.7"
+
+services:
+  web-client:
+    image: selenium/standalone-firefox:4.2.2-20220622
+    shm_size: '2gb'
+    ports:
+      - 4444:4444 # http://localhost:4444 (driver)
+      - 7900:7900 # http://localhost:7900 (VNC, pass: secret)
+    volumes:
+      - type: bind
+        source: ..
+        target: /app
+        read_only: true

package/scripts/{test_graphic/webpack-config.js → test-graphic.webpack.config.js}

@@ -25,11 +25,11 @@ const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-// List all the JS files in /test/graphic, each of them corresponding to a entry.
-var items = fs.readdirSync('./graphic_test_app').filter(filename => path.extname(filename) === '.js').map(filename => path.basename(filename, '.js')).sort();
+// List all the JS files in /graphic_test_src, each of them corresponding to a entry.
+var items = fs.readdirSync('./graphic_test_src').filter(filename => path.extname(filename) === '.js').map(filename => path.basename(filename, '.js')).sort();
 var entries = {};
 items.forEach(item => {
-	entries[item] = `./graphic_test_app/${item}.js`;
+	entries[item] = `./graphic_test_src/${item}`;
 });
 
 // Define the outputs.
@@ -39,14 +39,18 @@ 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_src/common/heartbeat.txt', to: 'heartbeat.txt' },
+		{ from: './graphic_test_src/common/smiley.png', to: 'smiley.png' },
+	],
 }));
 
 module.exports = {
 	mode: 'development',
+	devtool: 'inline-source-map',
 	entry: entries,
 	output: {
-		path: path.resolve(__dirname, '../../build/test_graphic'),
+		path: path.resolve(__dirname, '../build/test_graphic'),
 		hashFunction: "xxhash64", // FIXME The default hash function used by Webpack has been removed from OpenSSL.
 	},
 	plugins: plugins,

package/scripts/{test_headless.webpack-config.js → test-headless.webpack.config.js}

@@ -24,8 +24,9 @@ const path = require('path');
 
 module.exports = {
 	mode: 'development',
+	devtool: 'inline-source-map',
 	entry: {
-		index: './src/index.js',
+		index: './src/index',
 	},
 	output: {
 		path: path.resolve(__dirname, '../build/test_headless'),

package/src/Chessboard.js

@@ -123,10 +123,10 @@ export default class Chessboard extends React.Component {
 		return (
 			<svg className="kokopu-chessboard" viewBox={viewBox} width={xmax - xmin} height={ymax - ymin}>
 				<defs>
+					{this.renderArrowTip(colorset, 'b')}
 					{this.renderArrowTip(colorset, 'g')}
 					{this.renderArrowTip(colorset, 'r')}
 					{this.renderArrowTip(colorset, 'y')}
-					{this.renderArrowTip(colorset, 'highlight')}
 				</defs>
 				{squares}
 				{rankCoordinates}
@@ -213,7 +213,8 @@ export default class Chessboard extends React.Component {
 		let { x, y } = this.getSquareCoordinates(squareSize, this.state.hoveredSquare);
 		let thickness = Math.max(2, Math.round(HOVER_MARKER_THICKNESS_FACTOR * squareSize));
 		let size = squareSize - thickness;
-		return <rect className="kokopu-hoveredSquare" x={x + thickness/2} y={y + thickness/2} width={size} height={size} stroke={colorset.highlight} strokeWidth={thickness} />;
+		let color = this.isEditArrowModeEnabled() ? this.props.editedArrowColor : this.props.moveArrowColor;
+		return <rect className="kokopu-hoveredSquare" x={x + thickness/2} y={y + thickness/2} width={size} height={size} stroke={colorset['c' + color]} strokeWidth={thickness} />;
 	}
 
 	renderPiece(position, squareSize,  pieceset, sq) {
@@ -272,7 +273,7 @@ export default class Chessboard extends React.Component {
 		return (
 			<line
 				className="kokopu-annotation kokopu-arrow kokopu-arrowDraggable kokopu-dragging" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-				stroke={colorset[this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
+				stroke={colorset['c' + this.props.editedArrowColor]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 			/>
 		);
 	}
@@ -335,7 +336,7 @@ export default class Chessboard extends React.Component {
 		let result = [];
 		Object.entries(sqm).forEach(([ sq, color ]) => {
 			let { x, y } = this.getSquareCoordinates(squareSize, sq);
-			result.push(<rect key={'sqm-' + sq} className="kokopu-annotation" x={x} y={y} width={squareSize} height={squareSize} fill={colorset[color]} />);
+			result.push(<rect key={'sqm-' + sq} className="kokopu-annotation" x={x} y={y} width={squareSize} height={squareSize} fill={colorset['c' + color]} />);
 		});
 		return result;
 	}
@@ -348,7 +349,7 @@ export default class Chessboard extends React.Component {
 			y += squareSize / 2;
 			result.push(
 				<g key={'txtm-' + sq} className="kokopu-annotation">
-					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset[value.color]} />
+					<TextSymbol x={x} y={y} size={squareSize} symbol={value.symbol} color={colorset['c' + value.color]} />
 				</g>
 			);
 		});
@@ -376,7 +377,7 @@ export default class Chessboard extends React.Component {
 			result.push(
 				<line
 					key={'arm-' + vect} className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={xTo} y2={yTo}
-					stroke={colorset[color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
+					stroke={colorset['c' + color]} strokeWidth={strokeWidth} markerEnd={`url(#${arrowTipId})`}
 				/>
 			);
 		});
@@ -397,16 +398,17 @@ export default class Chessboard extends React.Component {
 		yTo += Math.sign(yFrom - yTo) * ARROW_TIP_OFFSET_FACTOR * squareSize;
 		let x = xTo * alpha + xFrom * (1 - alpha);
 		let y = yTo * alpha + yFrom * (1 - alpha);
+		let color = this.props.moveArrowColor;
 		return (
 			<line
-				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['highlight']}
-				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId('highlight')})`}
+				className="kokopu-annotation kokopu-arrow" x1={xFrom} y1={yFrom} x2={x} y2={y} stroke={colorset['c' + color]}
+				strokeWidth={squareSize * STROKE_THICKNESS_FACTOR} markerEnd={`url(#${this.getArrowTipId(color)})`}
 			/>
 		);
 	}
 
 	renderArrowTip(colorset, color) {
-		return <ArrowTip id={this.getArrowTipId(color)} color={colorset[color]} />;
+		return <ArrowTip id={this.getArrowTipId(color)} color={colorset['c' + color]} />;
 	}
 
 	renderTurnFlag(turn, squareSize, pieceset) {
@@ -735,7 +737,7 @@ export default class Chessboard extends 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
 	 */
 	static colorsets() {
@@ -745,8 +747,8 @@ export default class Chessboard extends 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
 	 */
 	static piecesets() {
@@ -789,7 +791,7 @@ Chessboard.propTypes = {
 	 * Square markers, defined as a "square -> color" struct (e.g. `{ e4: 'g', d5: 'r' }`) or as a comma-separated CSL string (e.g. `'Rd5,Ge4'`).
 	 */
 	squareMarkers: PropTypes.oneOfType([
-		PropTypes.objectOf(PropTypes.oneOf([ 'g', 'r', 'y' ])),
+		PropTypes.objectOf(PropTypes.oneOf([ 'b', 'g', 'r', 'y' ])),
 		PropTypes.string
 	]),
 
@@ -800,7 +802,7 @@ Chessboard.propTypes = {
 	textMarkers: PropTypes.oneOfType([
 		PropTypes.objectOf(PropTypes.shape({
 			symbol: PropTypes.string.isRequired,
-			color: PropTypes.oneOf([ 'g', 'r', 'y' ]).isRequired
+			color: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]).isRequired
 		})),
 		PropTypes.string
 	]),
@@ -810,7 +812,7 @@ Chessboard.propTypes = {
 	 * or as a comma-separated CAL string (e.g. `'Ge2e4,Rg8f6,Yg8h6'`).
 	 */
 	arrowMarkers: PropTypes.oneOfType([
-		PropTypes.objectOf(PropTypes.oneOf([ 'g', 'r', 'y' ])),
+		PropTypes.objectOf(PropTypes.oneOf([ 'b', 'g', 'r', 'y' ])),
 		PropTypes.string
 	]),
 
@@ -834,6 +836,11 @@ Chessboard.propTypes = {
 	 */
 	moveArrowVisible: PropTypes.bool,
 
+	/**
+	 * Color of the move arrow.
+	 */
+	moveArrowColor: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]),
+
 	/**
 	 * Whether moves are animated or not.
 	 */
@@ -881,7 +888,7 @@ Chessboard.propTypes = {
 	/**
 	 * Color of the edited arrow (only used if `interactionMode` is set to `'editArrows'`).
 	 */
-	editedArrowColor: PropTypes.oneOf([ 'g', 'r', 'y' ]),
+	editedArrowColor: PropTypes.oneOf([ 'b', 'g', 'r', 'y' ]),
 
 	/**
 	 * Callback invoked when a piece is moved through drag&drop (only if `interactionMode` is set to `'movePieces'`).
@@ -921,6 +928,7 @@ Chessboard.defaultProps = {
 	squareSize: 40,
 	coordinateVisible: true,
 	moveArrowVisible: true,
+	moveArrowColor: 'b',
 	animated: false,
 	colorset: 'original',
 	pieceset: 'cburnett',

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 {