You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
/* |
|
* 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, |
|
};
|
|
|