elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-26 21:18:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

populate autocomplete with all synonyms

Browse Source 
+ properly display synonyms based on label
This commit is contained in:
Felix Roos 2023-11-24 09:52:39 +01:00
parent 458c97b927
commit 18e9ceb501
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/react/src/components/Autocomplete.jsx
View File

@ -2,19 +2,21 @@ import { createRoot } from 'react-dom/client';
import jsdoc from '../../../../doc.json'; import jsdoc from '../../../../doc.json';
const getDocLabel = (doc) => doc.name || doc.longname; const getDocLabel = (doc) => doc.name || doc.longname;
const getDocSynonyms = (doc) => [getDocLabel(doc), ...(doc.synonyms || [])];
const getInnerText = (html) => { const getInnerText = (html) => {
var div = document.createElement('div'); var div = document.createElement('div');
div.innerHTML = html; div.innerHTML = html;
return div.textContent || div.innerText || ''; return div.textContent || div.innerText || '';
}; };
export function Autocomplete({ doc, label }) { export function Autocomplete({ doc, label = getDocLabel(doc) }) {
const synonyms = getDocSynonyms(doc).filter((a) => a !== label);
return ( return (
<div className="prose dark:prose-invert max-h-[400px] overflow-auto"> <div className="prose dark:prose-invert max-h-[400px] overflow-auto">
<h3 className="pt-0 mt-0">{label || getDocLabel(doc)}</h3>{' '} <h3 className="pt-0 mt-0">{label}</h3>{' '}
{!!doc.synonyms_text && ( {!!synonyms.length && (
<span> <span>
Synonyms: <code>{doc.synonyms_text}</code> Synonyms: <code>{synonyms.join(', ')}</code>
</span> </span>
)} )}
<div dangerouslySetInnerHTML={{ __html: doc.description }} /> <div dangerouslySetInnerHTML={{ __html: doc.description }} />
@ -53,18 +55,24 @@ const jsdocCompletions = jsdoc.docs
!['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag)), !['superdirtOnly', 'noAutocomplete'].some((tag) => doc.tags?.find((t) => t.originalTitle === tag)),
) )
// https://codemirror.net/docs/ref/#autocomplete.Completion // https://codemirror.net/docs/ref/#autocomplete.Completion
.map((doc) /*: Completion */ => ({ .reduce(
label: getDocLabel(doc), (acc, doc) /*: Completion */ =>
// detail: 'xxx', // An optional short piece of information to show (with a different style) after the label. acc.concat(
info: () => { [getDocLabel(doc), ...(doc.synonyms || [])].map((label) => ({
const node = document.createElement('div'); label,
// if Autocomplete is non-interactive, it could also be rendered at build time.. // detail: 'xxx', // An optional short piece of information to show (with a different style) after the label.
// .. using renderToStaticMarkup info: () => {
createRoot(node).render(<Autocomplete doc={doc} />); const node = document.createElement('div');
return node; // if Autocomplete is non-interactive, it could also be rendered at build time..
}, // .. using renderToStaticMarkup
type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type createRoot(node).render(<Autocomplete doc={doc} label={label} />);
})); return node;
},
type: 'function', // https://codemirror.net/docs/ref/#autocomplete.Completion.type
})),
),
[],
);
export const strudelAutocomplete = (context /* : CompletionContext */) => { export const strudelAutocomplete = (context /* : CompletionContext */) => {
let word = context.matchBefore(/\w*/); let word = context.matchBefore(/\w*/);