Add column (and filter) for HTML entities

Author: fileformat

.github/workflows/ghpages-deploy.yaml

@@ -34,7 +34,8 @@ jobs:
       - name: Process UCD XML to JSON
         run: |
           ./bin/ucd_download.sh
-          ./bin/ucd_to_json.ts
+          ./bin/entity_download.sh
+          ./bin/ucd_to_json.mts
 
       - name: Set Status Info
         run: |

bin/entity_download.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+#
+# Download and unzip the HTML entity list from WhatWG
+#
+
+set -o nounset
+set -o errexit
+set -o pipefail
+
+SCRIPT_HOME="$( cd "$( dirname "$0" )" && pwd )"
+BASE_DIR=$(realpath "${SCRIPT_HOME}/..")
+
+echo "INFO: starting entity download at $(date -u +"%Y-%m-%dT%H:%M:%SZ")"
+
+TMP_DIR="${BASE_DIR}/tmp"
+if [ ! -d "${TMP_DIR}" ]; then
+	echo "INFO: creating temp dir ${TMP_DIR}"
+	mkdir -p "${TMP_DIR}"
+else
+	echo "INFO: using existing temp dir ${TMP_DIR}"
+fi
+
+curl \
+	--location \
+	--output "${TMP_DIR}/entities.json" \
+	--show-error \
+	--silent \
+	https://html.spec.whatwg.org/entities.json
+
+echo "INFO: completed entity download at $(date -u +"%Y-%m-%dT%H:%M:%SZ")"

bin/package.json

@@ -11,6 +11,7 @@ const __dirname = path.dirname(__filename);
 type SearchEntry = {
 	code: string;
 	name: string;
+	entity?: string;
 	age: string;
 	block: string;
 	category: string;
@@ -24,12 +25,44 @@ type SearchData = {
 	data: SearchEntry[];
 }
 
+type EntityData = {
+	[name: string]: {
+		codepoints: number[];
+		characters: string;
+	};
+}
+
 async function main() {
 	console.log(`INFO: starting at ${new Date().toISOString()}`);
 
 	const xmlPath = path.join( __dirname, '..', 'tmp', 'ucd.all.flat.xml' );
+	const entityPath = path.join( __dirname, '..', 'tmp', 'entities.json' );
 	const jsonPath = path.join( __dirname, '..', 'public', 'ucd.json' );
 
+	try {
+		await fs.access(entityPath);
+	}
+	catch (err) {
+		console.log(`ERROR: Entity file does not exist in ${entityPath}`);
+		process.exit(1);
+	}
+
+	// Read and parse the entity JSON file
+	console.log(`INFO: reading entity JSON file from ${entityPath}`);
+	const entityDataRaw = await fs.readFile(entityPath, 'utf-8');
+	console.log(`INFO: parsing entity JSON data`);
+	const entityData: EntityData = JSON.parse(entityDataRaw);
+
+	// Invert the entity data to map codepoints to entities
+	const codepointToEntity: { [codepoint: string]: string } = {};
+	for (const [entity, info] of Object.entries(entityData)) {
+		if (info.codepoints.length != 1) {
+			continue;	// skip multi-codepoint entities
+		}
+		const cpHex = info.codepoints[0].toString(16).toUpperCase().padStart(4, '0');
+		codepointToEntity[cpHex] = entity;
+	}
+
 	try {
 		await fs.access(xmlPath);
 	} catch (err) {
@@ -205,6 +238,7 @@ async function main() {
 		entries.push({
 			code: charData.cp,
 			name: name || "(no name)",
+			entity: codepointToEntity[charData.cp],
 			age: charData.age,
 			block: charData.blk.replaceAll('_', ' '),
 			category: charData.gc,

bin/ucd_to_json.ts renamed to bin/ucd_to_json.mts

@@ -22,6 +22,7 @@ type SearchEntry = {
 	code: string;
 	example: string;
 	name: string;
+	entity?: string;
 	age: string;
 	block: string;
 	category: string;
@@ -147,6 +148,10 @@ function filterName(
 	if (rowData.notes) {
 		rowValues.push(...rowData.notes);
 	}
+	if (rowData.entity) {
+		rowValues.push(rowData.entity.replaceAll(/[^a-z]/gi, ''));
+		console.log(`DEBUG: entity rowValues: ${JSON.stringify(rowValues)}`);
+	}
 
 	if (headerValue.length == 1) {
 		if (headerValue == "^") {
@@ -562,6 +567,15 @@ async function main() {
 				title: "Codepoint",
 				width: 130,
 			},
+			{
+				field: "entity",
+				headerFilter: "input",
+				headerHozAlign: "center",
+				hozAlign: "left",
+				title: "HTML\u00A0Entity",
+				visible: detail,
+				width: 175,
+			},
 			{
 				field: "block",
 				headerFilter: "input",
@@ -731,7 +745,7 @@ async function main() {
 	table.on("tableBuilt", function () {
 		document.getElementById("showhidecolumns")!.onclick = () => {
 			detail = !detail;
-			toggleColumns(table, ["age", "block", "category", "script", "utf8", "utf16"]);
+			toggleColumns(table, ["age", "block", "category", "entity", "script", "utf8", "utf16"]);
 			const qs = new URLSearchParams(window.location.search);
 			if (detail) {
 				qs.set("detail", "1");