docs(codes): Add (key) codes documentation

Create codes documentation for standardized keys.

Closes #218.  Fixes #308.  Ref #21.

1 files changed, 51 insertions, 0 deletions

diff --git a/docs/src/components/codes/Description.jsx b/docs/src/components/codes/Description.jsx
new file mode 100644
index 0000000..6d8c5f6
--- /dev/null
+++ b/docs/src/components/codes/Description.jsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+const specialCharactersRegex = /(?:^|\s)((?:&(?:(?:\w+)|(?:#\d+));)|[_]|[^\w\s])(?:\s*\[([^[\]]+?)\])/g;
+
+function renderSpecialCharacters(description) {
+  const matches = Array.from(description.matchAll(specialCharactersRegex));
+  if (matches.length == 0) return description;
+  let lastIndex = 0;
+  const parts = matches.reduce((acc, match, i) => {
+    const { index } = match;
+    const str = match[0];
+    const chars = match[1];
+    const meaning = match[2];
+    if (index != lastIndex) {
+      acc.push(description.substring(lastIndex, index));
+    }
+    const pos = str.indexOf(chars);
+    if (pos > 0) {
+      acc.push(description.substr(index, pos));
+    }
+    acc.push(
+      <span key={i} className="symbol" title={meaning ?? ""}>
+        <code>{description.substr(index + pos, chars.length)}</code>
+        {meaning ? <span className="meaning">{meaning}</span> : undefined}
+      </span>
+    );
+    lastIndex = index + str.length;
+    return acc;
+  }, []);
+  if (lastIndex < description.length) {
+    parts.push(description.substr(lastIndex));
+  }
+  return parts;
+}
+
+export default function Description({ description = "" }) {
+  return (
+    <span className="description">{renderSpecialCharacters(description)}</span>
+  );
+}
+
+Description.propTypes = {
+  description: PropTypes.string.isRequired,
+};