kokopu-react 3.1.0 → 3.3.0

package/src/movetext/fonts.css

@@ -23,14 +23,14 @@
 
 
 @font-face {
-	font-family: 'Chess Alpha';
-	src:
-		url('./fonts/chessalpha.woff2') format('woff2'),
-		url('./fonts/chessalpha.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
+    font-family: 'Chess Alpha';
+    src:
+        url('./fonts/chessalpha.woff2') format('woff2'),
+        url('./fonts/chessalpha.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 .kokopu-font-alpha {
-	font-family: 'Chess Alpha', sans-serif;
+    font-family: 'Chess Alpha', sans-serif;
 }

package/src/movetext/htmlFilter.tsx

@@ -45,48 +45,48 @@ type ChildNode = ReturnType<typeof htmlparser2.parseDocument>['children'][0];
  */
 export function htmlFilter(type: 'header' | 'comment'): (text: string) => React.ReactNode {
 
-	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
-	];
-	const allowedAttributes: Record<string, string[]> = {
-		'*': [ 'class', 'id', 'title' ],
-		'a': [ 'href', 'target' ],
-	};
-
-	if (type === 'comment') {
-		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' ],
-		});
-	}
-
-	const sanitizer = new HtmlSanitizer({
-		allowedTags: allowedTags,
-		allowedAttributes: allowedAttributes,
-	});
-	return text => sanitizer.parse(text);
+    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
+    ];
+    const allowedAttributes: Record<string, string[]> = {
+        '*': [ 'class', 'id', 'title' ],
+        'a': [ 'href', 'target' ],
+    };
+
+    if (type === 'comment') {
+        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' ],
+        });
+    }
+
+    const sanitizer = new HtmlSanitizer({
+        allowedTags: allowedTags,
+        allowedAttributes: allowedAttributes,
+    });
+    return text => sanitizer.parse(text);
 }
 
 
 interface HtmlSanitizerProps {
-	allowedTags?: string[];
-	allowedAttributes?: Record<string, string[]>;
+    allowedTags?: string[];
+    allowedAttributes?: Record<string, string[]>;
 }
 
 
@@ -95,96 +95,96 @@ interface HtmlSanitizerProps {
  */
 class HtmlSanitizer {
 
-	#allowedTags: Set<string>;
-	#allowedAttributes: Map<string, Set<string>>;
-	#keyCounter = 0;
-
-	constructor({ allowedTags, allowedAttributes }: HtmlSanitizerProps) {
-		this.#allowedTags = allowedTags ? new Set(allowedTags) : new Set();
-		this.#allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(([k, v]) => [k, new Set(v)])) : new Map();
-	}
-
-	/**
-	 * @param text - HTML string to be parsed.
-	 * @returns React object corresponding to the given HTML string. Can also be a fragment, or just a simple string if the given HTML string
-	 *          does not contain any HTML tag.
-	 */
-	parse(text: string): React.ReactNode {
-		const dom = htmlparser2.parseDocument(text);
-
-		// Ensure that the returned object is a non-empty node type.
-		if (dom.type !== 'root') {
-			return undefined;
-		}
-
-		// Process the children of the root node.
-		const result: React.ReactNode[] = [];
-		dom.children.forEach(child => {
-			const childElement = this.processNode(child);
-			if (childElement) {
-				result.push(childElement);
-			}
-		});
-
-		// Return the result.
-		if (result.length === 0) {
-			return undefined;
-		}
-		else if (result.length === 1) {
-			return result[0];
-		}
-		else {
-			return <React.Fragment key={this.allocateKey()}>{result}</React.Fragment>;
-		}
-	}
-
-	private processNode(node: ChildNode): React.ReactNode {
-		if (node.type === 'text') {
-			return node.data;
-		}
-		else if (node.type === 'tag') {
-			const children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(child => this.processNode(child));
-			if (this.#allowedTags.has(node.name)) {
-				const attributes = this.filterAttributes(node.name, node.attribs);
-				attributes['key'] = this.allocateKey();
-				return React.createElement(node.name, attributes, children);
-			}
-			else {
-				return children ? <React.Fragment key={this.allocateKey()}>{children}</React.Fragment> : undefined;
-			}
-		}
-		else {
-			return undefined;
-		}
-	}
-
-	private filterAttributes(nodeName: string, attributes: Record<string, string>) {
-		const result: Record<string, string> = {};
-		for (const [ attribute, value ] of Object.entries(attributes)) {
-			if (this.isAttributeAllowed(nodeName, attribute)) {
-				result[attribute === 'class' ? 'className' : attribute] = value;
-			}
-		}
-		return result;
-	}
-
-	private isAttributeAllowed(nodeName: string, attribute: string) {
-		if (attribute === 'key' || attribute === 'ref' || attribute === 'className') { // Those attributes are always forbidden.
-			return false;
-		}
-		const allowedAttributesForCurrent = this.#allowedAttributes.get(nodeName);
-		if (allowedAttributesForCurrent && allowedAttributesForCurrent.has(attribute)) {
-			return true;
-		}
-		const allowedAttributesForAll = this.#allowedAttributes.get('*');
-		if (allowedAttributesForAll && allowedAttributesForAll.has(attribute)) {
-			return true;
-		}
-		return false;
-	}
-
-	private allocateKey() {
-		return 'auto-' + (this.#keyCounter++);
-	}
+    #allowedTags: Set<string>;
+    #allowedAttributes: Map<string, Set<string>>;
+    #keyCounter = 0;
+
+    constructor({ allowedTags, allowedAttributes }: HtmlSanitizerProps) {
+        this.#allowedTags = allowedTags ? new Set(allowedTags) : new Set();
+        this.#allowedAttributes = allowedAttributes ? new Map(Object.entries(allowedAttributes).map(([k, v]) => [k, new Set(v)])) : new Map();
+    }
+
+    /**
+     * @param text - HTML string to be parsed.
+     * @returns React object corresponding to the given HTML string. Can also be a fragment, or just a simple string if the given HTML string
+     *          does not contain any HTML tag.
+     */
+    parse(text: string): React.ReactNode {
+        const dom = htmlparser2.parseDocument(text);
+
+        // Ensure that the returned object is a non-empty node type.
+        if (dom.type !== 'root') {
+            return undefined;
+        }
+
+        // Process the children of the root node.
+        const result: React.ReactNode[] = [];
+        dom.children.forEach(child => {
+            const childElement = this.processNode(child);
+            if (childElement) {
+                result.push(childElement);
+            }
+        });
+
+        // Return the result.
+        if (result.length === 0) {
+            return undefined;
+        }
+        else if (result.length === 1) {
+            return result[0];
+        }
+        else {
+            return <React.Fragment key={this.allocateKey()}>{result}</React.Fragment>;
+        }
+    }
+
+    private processNode(node: ChildNode): React.ReactNode {
+        if (node.type === 'text') {
+            return node.data;
+        }
+        else if (node.type === 'tag') {
+            const children = NO_CHILDREN_TAGS.has(node.name) ? undefined : node.children.map(child => this.processNode(child));
+            if (this.#allowedTags.has(node.name)) {
+                const attributes = this.filterAttributes(node.name, node.attribs);
+                attributes['key'] = this.allocateKey();
+                return React.createElement(node.name, attributes, children);
+            }
+            else {
+                return children ? <React.Fragment key={this.allocateKey()}>{children}</React.Fragment> : undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+
+    private filterAttributes(nodeName: string, attributes: Record<string, string>) {
+        const result: Record<string, string> = {};
+        for (const [ attribute, value ] of Object.entries(attributes)) {
+            if (this.isAttributeAllowed(nodeName, attribute)) {
+                result[attribute === 'class' ? 'className' : attribute] = value;
+            }
+        }
+        return result;
+    }
+
+    private isAttributeAllowed(nodeName: string, attribute: string) {
+        if (attribute === 'key' || attribute === 'ref' || attribute === 'className') { // Those attributes are always forbidden.
+            return false;
+        }
+        const allowedAttributesForCurrent = this.#allowedAttributes.get(nodeName);
+        if (allowedAttributesForCurrent && allowedAttributesForCurrent.has(attribute)) {
+            return true;
+        }
+        const allowedAttributesForAll = this.#allowedAttributes.get('*');
+        if (allowedAttributesForAll && allowedAttributesForAll.has(attribute)) {
+            return true;
+        }
+        return false;
+    }
+
+    private allocateKey() {
+        return 'auto-' + (this.#keyCounter++);
+    }
 
 }

package/src/movetext/moveFormatter.tsx

@@ -38,8 +38,8 @@ import './fonts.css';
  * @param notation - SAN notation.
  */
 export function formatMove(pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping, notation: string): React.ReactNode {
-	const formatter = moveFormatter(pieceSymbols);
-	return formatter(notation);
+    const formatter = moveFormatter(pieceSymbols);
+    return formatter(notation);
 }
 
 
@@ -53,22 +53,22 @@ export function formatMove(pieceSymbols: 'native' | 'localized' | 'figurines' |
  *                       - {@link PieceSymbolMapping}: use the given custom set of chess piece symbols.
  */
 export function moveFormatter(pieceSymbols: 'native' | 'localized' | 'figurines' | PieceSymbolMapping): (notation: string) => React.ReactNode {
-	if (pieceSymbols === 'native') {
-		return notation => notation;
-	}
-	else if (pieceSymbols === 'localized') {
-		const mapping = i18n.PIECE_SYMBOLS;
-		return notation => pieceMappingNotation(mapping, notation);
-	}
-	else if (pieceSymbols === 'figurines') {
-		return notation => figurineNotation('alpha', notation);
-	}
-	else if (isPieceSymbolMapping(pieceSymbols)) {
-		return notation => pieceMappingNotation(pieceSymbols, notation);
-	}
-	else {
-		throw new IllegalArgument('moveFormatter', 'pieceSymbols');
-	}
+    if (pieceSymbols === 'native') {
+        return notation => notation;
+    }
+    else if (pieceSymbols === 'localized') {
+        const mapping = i18n.PIECE_SYMBOLS;
+        return notation => pieceMappingNotation(mapping, notation);
+    }
+    else if (pieceSymbols === 'figurines') {
+        return notation => figurineNotation('alpha', notation);
+    }
+    else if (isPieceSymbolMapping(pieceSymbols)) {
+        return notation => pieceMappingNotation(pieceSymbols, notation);
+    }
+    else {
+        throw new IllegalArgument('moveFormatter', 'pieceSymbols');
+    }
 }
 
 
@@ -76,7 +76,7 @@ export function moveFormatter(pieceSymbols: 'native' | 'localized' | 'figurines'
  * Replace the native piece symbols by those defined by the given {@link PieceSymbolMapping}.
  */
 function pieceMappingNotation(mapping: PieceSymbolMapping, text: string) {
-	return text.replace(/[KQRBNP]/g, match => mapping[match as keyof PieceSymbolMapping]);
+    return text.replace(/[KQRBNP]/g, match => mapping[match as keyof PieceSymbolMapping]);
 }
 
 
@@ -85,22 +85,22 @@ function pieceMappingNotation(mapping: PieceSymbolMapping, text: string) {
  * React objects represented with the given chess font.
  */
 function figurineNotation(fontName: string, text: string): React.ReactNode {
-	const result: React.ReactNode[] = [];
-	let beginOfText = 0;
-	let pieceSymbolIndex = 0;
-	for (let pos = 0; pos < text.length; ++pos) {
-		const 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;
-			const 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}</>;
+    const result: React.ReactNode[] = [];
+    let beginOfText = 0;
+    let pieceSymbolIndex = 0;
+    for (let pos = 0; pos < text.length; ++pos) {
+        const 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;
+            const 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}</>;
 }