Skip to content

Commit

Permalink
Fix issue where text codes would only autocomplete only using localis…
Browse files Browse the repository at this point in the history 
…ed names. `!Font`, `!Speed`, `!Instant` and `!Cursor` will no list results regardless of user's language setting
  • Loading branch information
@chrismaltby
chrismaltby committed Jun 27, 2024
1 parent 8684a82 commit 9599179
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 29 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"@types/pngjs": "^6.0.0",
"@types/prismjs": "^1.26.0",
"@types/react-helmet": "^6.1.0",
"@types/react-mentions": "^3.3.0",
"@types/react-mentions": "^4.1.13",
"@types/react-redux": "^7.1.9",
"@types/react-select": "^3.0.22",
"@types/react-window": "^1.8.2",
Expand Down Expand Up @@ -94,7 +94,7 @@
"react-helmet": "^6.0.0",
"react-highlight-words": "^0.16.0",
"react-hot-loader": "^4.12.18",
"react-mentions": "^4.0.2",
"react-mentions": "^4.4.10",
"react-range": "^1.8.7",
"react-redux": "^7.2.0",
"react-scroll-into-view-if-needed": "^2.1.7",
Expand Down
93 changes: 74 additions & 19 deletions src/components/ui/form/DialogueTextarea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import styled from "styled-components";
import { MentionsInput, SuggestionDataItem } from "react-mentions";
import { NamedVariable } from "renderer/lib/variables";
import keyBy from "lodash/keyBy";
import { Dictionary } from "@reduxjs/toolkit";
import { Font } from "shared/lib/entities/entitiesTypes";
import CustomMention from "./CustomMention";
import { RelativePortal } from "ui/layout/RelativePortal";
Expand All @@ -33,6 +32,10 @@ interface DialogueTextareaWrapperProps {
singleLine?: boolean;
}

type ExtendedSuggestionDataItem = SuggestionDataItem & {
searchName: string;
};

const DialogueTextareaWrapper = styled.div<DialogueTextareaWrapperProps>`
position: relative;
z-index: 0;
Expand Down Expand Up @@ -228,75 +231,79 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
placeholder,
singleLine = false,
}) => {
const [variablesLookup, setVariablesLookup] = useState<
Dictionary<NamedVariable>
>({});
const inputRef = useRef<HTMLTextAreaElement | null>(null);
const [fontItems, setFontItems] = useState<SuggestionDataItem[]>([]);
const [fontsLookup, setFontsLookup] = useState<
Dictionary<SuggestionDataItem>
>({});
const [editMode, setEditMode] = useState<EditModeOptions>();

const speedCodes = useMemo(
const speedCodes: ExtendedSuggestionDataItem[] = useMemo(
() => [
{
id: "S0",
display: `${l10n("FIELD_INSTANT")}`,
searchName: `instant ${l10n("FIELD_INSTANT")}`,
},
{
id: "S1",
display: `${l10n("FIELD_SPEED")}\u00a01`,
searchName: `speed1 ${l10n("FIELD_SPEED")}\u00a01`,
},
{
id: "S2",
display: `${l10n("FIELD_SPEED")}\u00a02`,
searchName: `speed2 ${l10n("FIELD_SPEED")}\u00a02`,
},
{
id: "S3",
display: `${l10n("FIELD_SPEED")}\u00a03`,
searchName: `speed3 ${l10n("FIELD_SPEED")}\u00a03`,
},
{
id: "S4",
display: `${l10n("FIELD_SPEED")}\u00a04`,
searchName: `speed4 ${l10n("FIELD_SPEED")}\u00a04`,
},
{
id: "S5",
display: `${l10n("FIELD_SPEED")}\u00a05`,
searchName: `speed5 ${l10n("FIELD_SPEED")}\u00a05`,
},
],
[]
);

const speedCodeLookup = useMemo(() => keyBy(speedCodes, "id"), [speedCodes]);

const moveCodes = useMemo(
const moveCodes: ExtendedSuggestionDataItem[] = useMemo(
() => [
{
id: "\\003\\001\\001",
display: l10n("FIELD_SET_CURSOR_POSITION_TO"),
searchName: `cursorset ${l10n("FIELD_SET_CURSOR_POSITION_TO")}`,
},
{
id: "\\004\\002\\002",
display: l10n("FIELD_MOVE_CURSOR_POSITION_BY"),
searchName: `cursormove ${l10n("FIELD_MOVE_CURSOR_POSITION_BY")}`,
},
],
[]
);

useEffect(() => {
setVariablesLookup(keyBy(variables, "code"));
const variablesLookup = useMemo(() => {
return keyBy(variables, "code");
}, [variables]);

useEffect(() => {
const items = fonts.map((f) => ({
const fontItems: ExtendedSuggestionDataItem[] = useMemo(() => {
return fonts.map((f) => ({
id: `F:${f.id}`,
display: `${l10n("FIELD_FONT")}: ${f.name}`,
searchName: `font ${l10n("FIELD_FONT")} ${f.name}`,
}));
setFontItems(items);
setFontsLookup(keyBy(items, "id"));
}, [fonts]);

const fontsLookup = useMemo(() => {
return keyBy(fontItems, "id");
}, [fontItems]);

const handleCopy = useCallback((e: ClipboardEvent) => {
if (e.target !== inputRef.current) {
return;
Expand All @@ -313,6 +320,54 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
};
}, [handleCopy]);

const searchLocalisedSuggestions = useCallback(
(
items: ExtendedSuggestionDataItem[],
searchTerm: string
): ExtendedSuggestionDataItem[] => {
const searchTermLowerCase = searchTerm.toLocaleLowerCase();
return items.filter((item) => {
return item.searchName
.toLocaleLowerCase()
.includes(searchTermLowerCase);
});
},
[]
);

const searchFonts = useCallback(
(searchTerm: string): ExtendedSuggestionDataItem[] => {
const searchTermLowerCase = searchTerm.toLocaleLowerCase();
if ("font".includes(searchTermLowerCase)) {
return fontItems;
}
return searchLocalisedSuggestions(fontItems, searchTermLowerCase);
},
[fontItems, searchLocalisedSuggestions]
);

const searchSpeedCodes = useCallback(
(searchTerm: string): ExtendedSuggestionDataItem[] => {
const searchTermLowerCase = searchTerm.toLocaleLowerCase();
if ("speed".includes(searchTermLowerCase)) {
return speedCodes;
}
return searchLocalisedSuggestions(speedCodes, searchTermLowerCase);
},
[searchLocalisedSuggestions, speedCodes]
);

const searchMoveCodes = useCallback(
(searchTerm: string): ExtendedSuggestionDataItem[] => {
const searchTermLowerCase = searchTerm.toLocaleLowerCase();
if ("cursor".includes(searchTermLowerCase)) {
return moveCodes;
}
return searchLocalisedSuggestions(moveCodes, searchTermLowerCase);
},
[moveCodes, searchLocalisedSuggestions]
);

return (
<DialogueTextareaWrapper singleLine={singleLine}>
{editMode && (
Expand Down Expand Up @@ -515,7 +570,7 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
<CustomMention
className="Mentions__TokenSpeed"
trigger={/(!([\p{L}0-9]+))$/u}
data={speedCodes}
data={searchSpeedCodes}
markup="!__id__!"
regex={/!(S[0-5]+)!/}
displayTransform={(_speedCode: string) => "Ｓ"}
Expand All @@ -542,7 +597,7 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
<CustomMention
className="Mentions__TokenFont"
trigger={/(!([\p{L}0-9]+))$/u}
data={fontItems}
data={searchFonts}
markup="!__id__!"
regex={/!(F:[0-9a-f-]+)!/}
displayTransform={(_fontCode) => {
Expand All @@ -569,7 +624,7 @@ export const DialogueTextarea: FC<DialogueTextareaProps> = ({
<CustomMention
className="Mentions__TokenGoto"
trigger={/(!([\p{L}0-9]+))$/u}
data={moveCodes}
data={searchMoveCodes}
markup={`__id__`}
regex={/(\\00[34]\\[0-7][0-7][0-7]\\[0-7][0-7][0-7])/}
displayTransform={(code: string) => {
Expand Down
16 changes: 8 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3091,10 +3091,10 @@
dependencies:
"@types/react" "*"

"@types/react-mentions@^3.3.0":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@types/react-mentions/-/react-mentions-3.3.0.tgz#b446362a1ae20d0c71661c22abd523e8e033220a"
integrity sha512-sySDvqX9N5jyOSITd/aylm2b95ALc7zw3grqShqKw7oe0SR0yR+p3O7JoIQjRfVyqYqoOC4WSGyUtoSfnBuiWw==
"@types/react-mentions@^4.1.13":
version "4.1.13"
resolved "https://registry.yarnpkg.com/@types/react-mentions/-/react-mentions-4.1.13.tgz#293e56e14c502f6a73217fece0b870e54a0cc657"
integrity sha512-kRulAAjlmhCtsJ9bapO0foocknaE/rEuFKpmFEU81fBfnXZmZNBaJ9J/DBjwigT3WDHjQVUmYoi5sxEXrcdzAw==
dependencies:
"@types/react" "*"

Expand Down Expand Up @@ -10611,10 +10611,10 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react-mentions@^4.0.2:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-mentions/-/react-mentions-4.1.1.tgz#9f74928f7a33d587151e95dc7ef303f2002790de"
integrity sha512-+BK8dQzXPZUBFYfbv1hwbve9lp0lGYHOUyb1hk9s13mzvmVD9S+l9oszo1CaumVjYdb9olJ4NMJW2jBRGck9Rw==
react-mentions@^4.4.10:
version "4.4.10"
resolved "https://registry.yarnpkg.com/react-mentions/-/react-mentions-4.4.10.tgz#ae6c1e310a405597e83ce786f12c5bfb93b097ce"
integrity sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==
dependencies:
"@babel/runtime" "7.4.5"
invariant "^2.2.4"
Expand Down

0 comments on commit 9599179

Please sign in to comment.