beta audio capabilities

account/package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@lingdocs/inflect": "6.0.12",
+        "@lingdocs/inflect": "7.0.3",
         "base64url": "^3.0.1",
         "bcryptjs": "^2.4.3",
         "connect-redis": "^6.0.0",
@@ -126,9 +126,9 @@
       }
     },
     "node_modules/@lingdocs/inflect": {
-      "version": "6.0.12",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-6.0.12.tgz",
-      "integrity": "sha512-ljOlZ8DuhZuUs86LFioQLSNs7HlGpvPRUHNF4EWOroEfLvNoTAHRdlgoVX1ovQS3JBUN7fFWSkovG/HWYPJZOQ==",
+      "version": "7.0.3",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
+      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
       "dependencies": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",
@@ -3109,9 +3109,9 @@
       }
     },
     "@lingdocs/inflect": {
-      "version": "6.0.12",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-6.0.12.tgz",
-      "integrity": "sha512-ljOlZ8DuhZuUs86LFioQLSNs7HlGpvPRUHNF4EWOroEfLvNoTAHRdlgoVX1ovQS3JBUN7fFWSkovG/HWYPJZOQ==",
+      "version": "7.0.3",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
+      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
       "requires": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",

account/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@lingdocs/inflect": "6.0.12",
+    "@lingdocs/inflect": "7.0.3",
     "base64url": "^3.0.1",
     "bcryptjs": "^2.4.3",
     "connect-redis": "^6.0.0",

account/yarn.lock

@@ -45,10 +45,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@lingdocs/inflect@6.0.12":
-  "integrity" "sha512-ljOlZ8DuhZuUs86LFioQLSNs7HlGpvPRUHNF4EWOroEfLvNoTAHRdlgoVX1ovQS3JBUN7fFWSkovG/HWYPJZOQ=="
-  "resolved" "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-6.0.12.tgz"
-  "version" "6.0.12"
+"@lingdocs/inflect@7.0.3":
+  "integrity" "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA=="
+  "resolved" "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz"
+  "version" "7.0.3"
   dependencies:
     "fp-ts" "^2.16.0"
     "pbf" "^3.2.1"

functions/package-lock.json

@@ -7,7 +7,7 @@
       "name": "functions",
       "dependencies": {
         "@google-cloud/storage": "^5.8.1",
-        "@lingdocs/inflect": "6.0.12",
+        "@lingdocs/inflect": "7.0.3",
         "@types/cors": "^2.8.10",
         "@types/google-spreadsheet": "^3.0.2",
         "@types/react": "^18.0.21",
@@ -1468,9 +1468,9 @@
       }
     },
     "node_modules/@lingdocs/inflect": {
-      "version": "6.0.12",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-6.0.12.tgz",
-      "integrity": "sha512-ljOlZ8DuhZuUs86LFioQLSNs7HlGpvPRUHNF4EWOroEfLvNoTAHRdlgoVX1ovQS3JBUN7fFWSkovG/HWYPJZOQ==",
+      "version": "7.0.3",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
+      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
       "dependencies": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",
@@ -8055,9 +8055,9 @@
       }
     },
     "@lingdocs/inflect": {
-      "version": "6.0.12",
-      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-6.0.12.tgz",
-      "integrity": "sha512-ljOlZ8DuhZuUs86LFioQLSNs7HlGpvPRUHNF4EWOroEfLvNoTAHRdlgoVX1ovQS3JBUN7fFWSkovG/HWYPJZOQ==",
+      "version": "7.0.3",
+      "resolved": "https://npm.lingdocs.com/@lingdocs/inflect/-/inflect-7.0.3.tgz",
+      "integrity": "sha512-Ia4upjGHRUf6zuJ626V4g1AcaQQ5uKm8aHRn5qWYw1xEfBtSPHTvLd8Y6TXUjglv7HZ8udUXoP2LIGPWlD2aYA==",
       "requires": {
         "fp-ts": "^2.16.0",
         "pbf": "^3.2.1",

functions/package.json

@@ -15,7 +15,7 @@
   "main": "lib/functions/src/index.js",
   "dependencies": {
     "@google-cloud/storage": "^5.8.1",
-    "@lingdocs/inflect": "6.0.12",
+    "@lingdocs/inflect": "7.0.3",
     "@types/cors": "^2.8.10",
     "@types/google-spreadsheet": "^3.0.2",
     "@types/react": "^18.0.21",

website/package.json

@@ -7,7 +7,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.2",
-    "@lingdocs/ps-react": "6.0.12",
+    "@lingdocs/ps-react": "7.0.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

website/src/components/Entry.tsx

@@ -7,37 +7,39 @@
  */
 import ExtraEntryInfo from "../components/ExtraEntryInfo";
 import classNames from "classnames";
-import {
-    Types as T,
-    InlinePs,
-} from "@lingdocs/ps-react";
+import { Types as T, InlinePs } from "@lingdocs/ps-react";
 
-function Entry({ entry, textOptions, nonClickable, isolateEntry }: {
-    entry: T.DictionaryEntry,
-    textOptions: T.TextOptions,
-    nonClickable?: boolean,
-    isolateEntry?: (ts: number) => void,
+function Entry({
+  entry,
+  textOptions,
+  nonClickable,
+  isolateEntry,
+}: {
+  entry: T.DictionaryEntry;
+  textOptions: T.TextOptions;
+  nonClickable?: boolean;
+  isolateEntry?: (ts: number) => void;
 }) {
-    return (
-        <div
-            className={classNames("entry", { clickable: !nonClickable })}
-            onClick={(!nonClickable && isolateEntry) ? () => isolateEntry(entry.ts) : undefined}
-            data-testid="entry"
-        >
-                <div>
-                    <strong>
-                        <InlinePs opts={textOptions}>{{ p: entry.p, f: entry.f }}</InlinePs>
-                    </strong> 
-                    {` `}
-                    <em>{entry.c}</em>
-                </div>
-                <ExtraEntryInfo
-                    entry={entry}
-                    textOptions={textOptions}
-                />
-                <div className="entry-definition">{entry.e}</div>
-        </div>
-    );
-};
+  return (
+    <div
+      className={classNames("entry", { clickable: !nonClickable })}
+      onClick={
+        !nonClickable && isolateEntry ? () => isolateEntry(entry.ts) : undefined
+      }
+      data-testid="entry"
+    >
+      <div>
+        <strong>
+          <InlinePs opts={textOptions}>{{ p: entry.p, f: entry.f }}</InlinePs>
+        </strong>
+        {` `}
+        <em>{entry.c}</em>
+        {entry.a && !nonClickable && <i className="ml-2 fas fa-volume-down" />}
+      </div>
+      <ExtraEntryInfo entry={entry} textOptions={textOptions} />
+      <div className="entry-definition">{entry.e}</div>
+    </div>
+  );
+}
 
 export default Entry;

website/src/components/PlayStorageAudio.tsx

@@ -0,0 +1,13 @@
+export default function playStorageAudio(ts: number, callback: () => void) {
+  if (!ts) return;
+  let audio = new Audio(`https://storage.lingdocs.com/${ts}.mp3`);
+  audio.addEventListener("ended", () => {
+    callback();
+    audio.remove();
+    audio.srcObject = null;
+  });
+  audio.play().catch((e) => {
+    console.error(e);
+    alert("Error playing audio - Connect to the internet and try again");
+  });
+}

website/src/screens/IsolatedEntry.tsx

@@ -8,334 +8,429 @@
 
 import { useEffect, useState } from "react";
 import {
-    VPExplorer,
-    InflectionsTable,
-    inflectWord,
-    InlinePs,
-    Types as T,
-    typePredicates as tp,
-    getInflectionPattern,
-    HumanReadableInflectionPattern,
+  VPExplorer,
+  InflectionsTable,
+  inflectWord,
+  InlinePs,
+  Types as T,
+  typePredicates as tp,
+  getInflectionPattern,
+  HumanReadableInflectionPattern,
 } from "@lingdocs/ps-react";
-import {
-    submissionBase,
-    addSubmission,
-} from "../lib/submissions";
+import { submissionBase, addSubmission } from "../lib/submissions";
 import { Link } from "react-router-dom";
 import Entry from "../components/Entry";
 import Results from "../screens/Results";
 import WordlistWordEditor from "../components/WordlistWordEditor";
 import {
-    addToWordlist,
-    deleteWordFromWordlist,
-    hasAttachment,
+  addToWordlist,
+  deleteWordFromWordlist,
+  hasAttachment,
 } from "../lib/wordlist-database";
 import { wordlistEnabled } from "../lib/level-management";
-import AudioPlayButton  from "../components/AudioPlayButton";
+import AudioPlayButton from "../components/AudioPlayButton";
 import { Helmet } from "react-helmet";
 import { Modal } from "react-bootstrap";
 import { getTextOptions } from "../lib/get-text-options";
-import {
-    entryFeeder,
-} from "../lib/dictionary";
-import {
-    State,
-    DictionaryAPI,
-} from "../types/dictionary-types";
+import { entryFeeder } from "../lib/dictionary";
+import { State, DictionaryAPI } from "../types/dictionary-types";
+import playStorageAudio from "../components/PlayStorageAudio";
 
-function IsolatedEntry({ state, dictionary, isolateEntry }: {
-    state: State,
-    dictionary: DictionaryAPI,
-    isolateEntry: (ts: number) => void,
+function IsolatedEntry({
+  state,
+  dictionary,
+  isolateEntry,
+}: {
+  state: State;
+  dictionary: DictionaryAPI;
+  isolateEntry: (ts: number) => void;
 }) {
-    const [exploded, setExploded] = useState<boolean>(false);
-    const [editing, setEditing] = useState<boolean>(false);
-    const [comment, setComment] = useState<string>("");
-    const [editSubmitted, setEditSubmitted] = useState<boolean>(false);
-    const [showingDeleteWarning, setShowingDeleteWarning] = useState<boolean>(false);
-    const [showClipped, setShowClipped] = useState<string>("");
-    useEffect(() => {
-        setEditing(false);
-        setComment("");
-        setEditSubmitted(false);
-    }, [state]);
-    function flashClippedMessage(m: string) {
-        setShowClipped(m);
-        setTimeout(() => {
-            setShowClipped("");
-        }, 1250);
+  const [exploded, setExploded] = useState<boolean>(false);
+  const [playing, setPlaying] = useState<boolean>(false);
+  const [editing, setEditing] = useState<boolean>(false);
+  const [comment, setComment] = useState<string>("");
+  const [editSubmitted, setEditSubmitted] = useState<boolean>(false);
+  const [showingDeleteWarning, setShowingDeleteWarning] =
+    useState<boolean>(false);
+  const [showClipped, setShowClipped] = useState<string>("");
+  useEffect(() => {
+    setEditing(false);
+    setComment("");
+    setEditSubmitted(false);
+    setPlaying(false);
+  }, [state]);
+  function flashClippedMessage(m: string) {
+    setShowClipped(m);
+    setTimeout(() => {
+      setShowClipped("");
+    }, 1250);
+  }
+  const wordlistWord = state.wordlist.find(
+    (w) => w.entry.ts === state.isolatedEntry?.ts
+  );
+  const textOptions = getTextOptions(state);
+  function submitEdit() {
+    if (!state.isolatedEntry) return;
+    if (!state.user) return;
+    addSubmission(
+      {
+        ...submissionBase(state.user),
+        type: "edit suggestion",
+        entry: state.isolatedEntry,
+        comment,
+      },
+      state.user
+    );
+    setEditing(false);
+    setComment("");
+    setEditSubmitted(true);
+  }
+  function handleAddToWordlist() {
+    if (!state.isolatedEntry) return;
+    const toAdd = {
+      entry: state.isolatedEntry,
+      notes: "",
+    };
+    addToWordlist(toAdd);
+  }
+  function handleDeleteFromWordlist() {
+    if (!state.isolatedEntry) return;
+    if (!wordlistWord) return;
+    setShowingDeleteWarning(false);
+    deleteWordFromWordlist(wordlistWord._id);
+  }
+  const entry = state.isolatedEntry;
+  if (!entry) {
+    return (
+      <div className="text-center">
+        <h4 className="mb-4 mt-4">Word not found</h4>
+        <h5>
+          <Link to="/">Home</Link>
+        </h5>
+      </div>
+    );
+  }
+  const complement = entry.l ? dictionary.findOneByTs(entry.l) : undefined;
+  const relatedEntries = dictionary.findRelatedEntries(entry);
+  const inf = ((): T.InflectorOutput | false => {
+    try {
+      return inflectWord(entry);
+    } catch (e) {
+      console.error("error inflecting entry", entry);
+      return false;
     }
-    const wordlistWord = state.wordlist.find((w) => w.entry.ts === state.isolatedEntry?.ts);
-    const textOptions = getTextOptions(state);
-    function submitEdit() {
-        if (!state.isolatedEntry) return;
-        if (!state.user) return;
-        addSubmission({
-            ...submissionBase(state.user),
-            type: "edit suggestion",
-            entry: state.isolatedEntry,
-            comment,
-        }, state.user);
-        setEditing(false);
-        setComment("");
-        setEditSubmitted(true);
+  })();
+  const isVerbEntry = tp.isVerbEntry({ entry, complement });
+  function DisplayVPExplorer(props: {
+    entry: T.DictionaryEntry;
+    complement: T.DictionaryEntry | undefined;
+  }) {
+    try {
+      return (
+        <VPExplorer
+          verb={{
+            // TODO: CLEAN THIS UP!
+            // @ts-ignore
+            entry: props.entry,
+            complement: props.complement,
+          }}
+          opts={textOptions}
+          entryFeeder={entryFeeder}
+          handleLinkClick={isolateEntry}
+        />
+      );
+    } catch (e) {
+      console.error("error rendering VPExplorer", e);
+      return null;
     }
-    function handleAddToWordlist() {
-        if (!state.isolatedEntry) return;
-        const toAdd = {
-            entry: state.isolatedEntry,
-            notes: "",
-        };
-        addToWordlist(toAdd);
-    }
-    function handleDeleteFromWordlist() {
-        if (!state.isolatedEntry) return;
-        if (!wordlistWord) return;
-        setShowingDeleteWarning(false);
-        deleteWordFromWordlist(wordlistWord._id);
-    }
-    const entry = state.isolatedEntry;
-    if (!entry) {
-        return <div className="text-center">
-            <h4 className="mb-4 mt-4">Word not found</h4>
-            <h5><Link to="/">Home</Link></h5>
-        </div>;
-    }
-    const complement = entry.l
-        ? dictionary.findOneByTs(entry.l)
-        : undefined;
-    const relatedEntries = dictionary.findRelatedEntries(entry);
-    const inf = ((): T.InflectorOutput | false => {
-        try {
-            return inflectWord(entry);
-        } catch (e) {
-            console.error("error inflecting entry", entry);
-            return false;
-        }
-    })();
-    const isVerbEntry = tp.isVerbEntry({ entry, complement });
-    function DisplayVPExplorer(props: {
-        entry: T.DictionaryEntry,
-        complement: T.DictionaryEntry | undefined,
-    }) {
-        try {
-            return <VPExplorer
-                verb={{
-                    // TODO: CLEAN THIS UP!
-                    // @ts-ignore
-                    entry: props.entry,
-                    complement: props.complement,
-                }}
-                opts={textOptions}
-                entryFeeder={entryFeeder}
-                handleLinkClick={isolateEntry}
-            />
-        } catch (e) {
-            console.error("error rendering VPExplorer", e);
-            return null;
-        }
-    }
-    function handleClipId() {
-        if (!entry) return
-        navigator.clipboard.writeText(entry.ts.toString());
-        flashClippedMessage("word id copied to clipboard");
-    }
-    function handleClipEntry() {
-        if (!entry) return
-        navigator.clipboard.writeText(JSON.stringify(entry));
-        flashClippedMessage("entry data copied to clipboard");
-    }
-    return <div className="wide-width-limiter">
-        <Helmet>
-            <title>{entry.p} - LingDocs Pashto Dictionary</title>
-        </Helmet>
-        <div className="row">
-            <div className="col-8">
-                <Entry
-                    nonClickable
-                    entry={exploded ? explodeEntry(entry) : entry}
-                    textOptions={textOptions}
-                    isolateEntry={isolateEntry}
-                />
-            </div>
-            <div className="col-4">
-                <div className="d-flex flex-row justify-content-end">
-                    <div
-                        className="clickable mr-3"
-                        onClick={() => setExploded(os => !os)}
-                    >
-                        <i className={`fas fa-${exploded ? "compress" : "expand"}-alt`} />
-                    </div>
-                    <div className="clickable mr-3" onClick={handleClipId}>
-                        <i className="fas fa-tag"></i>
-                    </div>
-                    {state.user && state.user.level === "editor" && <>
-                        <div className="clickable mr-3" onClick={handleClipEntry}>
-                            <i className="fas fa-code"></i>
-                        </div>
-                        <Link to={`/edit?id=${entry.ts}`} className="plain-link">
-                            <div
-                                className="clickable mr-3"
-                                data-testid="finalEditEntryButton"
-                            >
-                                <i className="fa fa-gavel" />
-                            </div>
-                        </Link>
-                    </>}
-                    {state.user && <>
-                        <div
-                            className="clickable mr-3"
-                            data-testid="editEntryButton"
-                            onClick={() => setEditing(os => !os)}
-                        >
-                            <i className="fa fa-pen" />
-                        </div>
-                        {wordlistEnabled(state.user) && <div
-                            className="clickable"
-                            data-testid={wordlistWord ? "fullStarButton" : "emptyStarButton"}
-                            onClick={wordlistWord
-                                ? () => setShowingDeleteWarning(true)
-                                : () => handleAddToWordlist()
-                            }
-                        >
-                            <i className={`fa${wordlistWord ? "s" : "r"} fa-star fa-lg`}/>
-                        </div>}
-                    </>}
-                </div>
-            </div>
+  }
+  function handleClipId() {
+    if (!entry) return;
+    navigator.clipboard.writeText(entry.ts.toString());
+    flashClippedMessage("word id copied to clipboard");
+  }
+  function handleClipEntry() {
+    if (!entry) return;
+    navigator.clipboard.writeText(JSON.stringify(entry));
+    flashClippedMessage("entry data copied to clipboard");
+  }
+  function handlePlayStorageAudio() {
+    if (!entry) return;
+    setPlaying(true);
+    playStorageAudio(entry.ts, () => {
+      setPlaying(false);
+    });
+  }
+  return (
+    <div className="wide-width-limiter">
+      <Helmet>
+        <title>{entry.p} - LingDocs Pashto Dictionary</title>
+      </Helmet>
+      <div className="row">
+        <div className="col-8">
+          <Entry
+            nonClickable
+            entry={exploded ? explodeEntry(entry) : entry}
+            textOptions={textOptions}
+            isolateEntry={isolateEntry}
+          />
         </div>
-        {wordlistWord && <>
-            {hasAttachment(wordlistWord, "audio") && <AudioPlayButton word={wordlistWord} />}
-            <WordlistWordEditor word={wordlistWord} />
-        </>}
-        {editing &&
-            <div className="mb-3">
-                <div className="form-group" style={{ maxWidth: "500px" }}>
-                    <label htmlFor="editSuggestionForm">Suggest correction/edit:</label>
-                    <input
-                        type="text"
-                        className="form-control"
-                        id="editSuggestionForm"
-                        data-lpignore="true"
-                        value={comment}
-                        onChange={(e) => setComment(e.target.value)}
-                    />
-                </div>
-                <div className="btn-group">
-                    <button
-                        type="button"
-                        className="btn btn-outline-secondary"
-                        onClick={comment ? submitEdit : () => null}
-                        data-testid="editWordSubmitButton"
-                    >
-                        Submit
-                    </button>
-                    <button
-                        type="button"
-                        className="btn btn-outline-secondary"
-                        onClick={() => { setEditing(false); setComment("") }}
-                        data-testid="editWordCancelButton"
-                    >
-                        Cancel
-                    </button>
-                </div>
+        <div className="col-4">
+          <div className="d-flex flex-row justify-content-end">
+            {entry.a && (
+              <div className="clickable mr-3" onClick={handlePlayStorageAudio}>
+                <i
+                  className={`fas fa-lg fa-volume-${playing ? "down" : "off"}`}
+                />
+              </div>
+            )}
+            <div
+              className="clickable mr-3"
+              onClick={() => setExploded((os) => !os)}
+            >
+              <i className={`fas fa-${exploded ? "compress" : "expand"}-alt`} />
             </div>
-        }
-        {editSubmitted && <p>Thank you for your help!</p>}
-        {inf && <>
-            {inf.inflections && (() => {
-                const pattern = getInflectionPattern(
-                    // @ts-ignore
-                    entry
-                );
-                return <div>
-                    <a href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(pattern)}`} rel="noreferrer" target="_blank">
-                        <div className="badge bg-light mb-2">Inflection pattern {HumanReadableInflectionPattern(pattern, textOptions)}
-                        </div>
-                    </a>
-                    <InflectionsTable inf={inf.inflections} textOptions={textOptions} />
-                </div>;
+            <div className="clickable mr-3" onClick={handleClipId}>
+              <i className="fas fa-tag"></i>
+            </div>
+            {state.user && state.user.level === "editor" && (
+              <>
+                <div className="clickable mr-3" onClick={handleClipEntry}>
+                  <i className="fas fa-code"></i>
+                </div>
+                <Link to={`/edit?id=${entry.ts}`} className="plain-link">
+                  <div
+                    className="clickable mr-3"
+                    data-testid="finalEditEntryButton"
+                  >
+                    <i className="fa fa-gavel" />
+                  </div>
+                </Link>
+              </>
+            )}
+            {state.user && (
+              <>
+                <div
+                  className="clickable mr-3"
+                  data-testid="editEntryButton"
+                  onClick={() => setEditing((os) => !os)}
+                >
+                  <i className="fa fa-pen" />
+                </div>
+                {wordlistEnabled(state.user) && (
+                  <div
+                    className="clickable"
+                    data-testid={
+                      wordlistWord ? "fullStarButton" : "emptyStarButton"
+                    }
+                    onClick={
+                      wordlistWord
+                        ? () => setShowingDeleteWarning(true)
+                        : () => handleAddToWordlist()
+                    }
+                  >
+                    <i
+                      className={`fa${wordlistWord ? "s" : "r"} fa-star fa-lg`}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      {wordlistWord && (
+        <>
+          {hasAttachment(wordlistWord, "audio") && (
+            <AudioPlayButton word={wordlistWord} />
+          )}
+          <WordlistWordEditor word={wordlistWord} />
+        </>
+      )}
+      {editing && (
+        <div className="mb-3">
+          <div className="form-group" style={{ maxWidth: "500px" }}>
+            <label htmlFor="editSuggestionForm">Suggest correction/edit:</label>
+            <input
+              type="text"
+              className="form-control"
+              id="editSuggestionForm"
+              data-lpignore="true"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+          </div>
+          <div className="btn-group">
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              onClick={comment ? submitEdit : () => null}
+              data-testid="editWordSubmitButton"
+            >
+              Submit
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              onClick={() => {
+                setEditing(false);
+                setComment("");
+              }}
+              data-testid="editWordCancelButton"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+      {editSubmitted && <p>Thank you for your help!</p>}
+      {inf && (
+        <>
+          {inf.inflections &&
+            (() => {
+              const pattern = getInflectionPattern(
+                // @ts-ignore
+                entry
+              );
+              return (
+                <div>
+                  <a
+                    href={`https://grammar.lingdocs.com/inflection/inflection-patterns/${inflectionSubUrl(
+                      pattern
+                    )}`}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    <div className="badge bg-light mb-2">
+                      Inflection pattern{" "}
+                      {HumanReadableInflectionPattern(pattern, textOptions)}
+                    </div>
+                  </a>
+                  <InflectionsTable
+                    inf={inf.inflections}
+                    textOptions={textOptions}
+                  />
+                </div>
+              );
             })()}
-            {"plural" in inf && inf.plural !== undefined && <div>
-                <h5>Plural</h5>
-                <InflectionsTable inf={inf.plural} textOptions={textOptions} />
-            </div>}
-            {"bundledPlural" in inf && inf.bundledPlural !== undefined && <div>
-                <h5>Bundled Plural</h5>
-                <InflectionsTable inf={inf.bundledPlural} textOptions={textOptions} />
-            </div>}
-            {"arabicPlural" in inf && inf.arabicPlural !== undefined && <div>
-                <h5>Arabic Plural</h5>
-                <InflectionsTable inf={inf.arabicPlural} textOptions={textOptions} />
-            </div>}
-        </>}
-        {isVerbEntry && <div className="pb-4">
-            <DisplayVPExplorer entry={entry} complement={complement} />
-        </div>}
-        {showClipped && <div className="alert alert-primary text-center" role="alert" style={{
+          {"plural" in inf && inf.plural !== undefined && (
+            <div>
+              <h5>Plural</h5>
+              <InflectionsTable inf={inf.plural} textOptions={textOptions} />
+            </div>
+          )}
+          {"bundledPlural" in inf && inf.bundledPlural !== undefined && (
+            <div>
+              <h5>Bundled Plural</h5>
+              <InflectionsTable
+                inf={inf.bundledPlural}
+                textOptions={textOptions}
+              />
+            </div>
+          )}
+          {"arabicPlural" in inf && inf.arabicPlural !== undefined && (
+            <div>
+              <h5>Arabic Plural</h5>
+              <InflectionsTable
+                inf={inf.arabicPlural}
+                textOptions={textOptions}
+              />
+            </div>
+          )}
+        </>
+      )}
+      {isVerbEntry && (
+        <div className="pb-4">
+          <DisplayVPExplorer entry={entry} complement={complement} />
+        </div>
+      )}
+      {showClipped && (
+        <div
+          className="alert alert-primary text-center"
+          role="alert"
+          style={{
             position: "fixed",
             top: "30%",
             left: "50%",
             transform: "translate(-50%, -50%)",
             zIndex: 9999999999999,
-        }}>
-            {showClipped}
-        </div>}
-
-        {!!(relatedEntries && relatedEntries.length) ? <>
-            <h4 style={{ marginTop: isVerbEntry ? "10rem" : "5rem" }}>Related Words</h4>
-            <Results
-                state={{ ...state, results: relatedEntries }}
-                isolateEntry={isolateEntry}
-                handleInflectionSearch={() => null}
-            />
-        </> : <div style={{ height: "500px" }} />}
-        <Modal
-            show={showingDeleteWarning}
-            onHide={() => setShowingDeleteWarning(false)}
-            animation={false}
+          }}
         >
-            <Modal.Header closeButton>
-            <Modal.Title>Delete from wordlist?</Modal.Title>
-            </Modal.Header>
-            <Modal.Body>Delete <InlinePs
-                    opts={textOptions}
-                >{{ p: entry.p, f: entry.f }}</InlinePs> from your wordlist?
-            </Modal.Body>
-            <Modal.Footer>
-                <button type="button" className="btn btn-secorndary clb" onClick={() => setShowingDeleteWarning(false)}>
-                    Cancel
-                </button>
-                <button type="button" data-testid="confirmDeleteFromWordlist" className="btn btn-primary clb" onClick={handleDeleteFromWordlist}>
-                    Delete
-                </button>
-            </Modal.Footer>
-        </Modal>
-    </div>;
+          {showClipped}
+        </div>
+      )}
+
+      {!!(relatedEntries && relatedEntries.length) ? (
+        <>
+          <h4 style={{ marginTop: isVerbEntry ? "10rem" : "5rem" }}>
+            Related Words
+          </h4>
+          <Results
+            state={{ ...state, results: relatedEntries }}
+            isolateEntry={isolateEntry}
+            handleInflectionSearch={() => null}
+          />
+        </>
+      ) : (
+        <div style={{ height: "500px" }} />
+      )}
+      <Modal
+        show={showingDeleteWarning}
+        onHide={() => setShowingDeleteWarning(false)}
+        animation={false}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Delete from wordlist?</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          Delete{" "}
+          <InlinePs opts={textOptions}>{{ p: entry.p, f: entry.f }}</InlinePs>{" "}
+          from your wordlist?
+        </Modal.Body>
+        <Modal.Footer>
+          <button
+            type="button"
+            className="btn btn-secorndary clb"
+            onClick={() => setShowingDeleteWarning(false)}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            data-testid="confirmDeleteFromWordlist"
+            className="btn btn-primary clb"
+            onClick={handleDeleteFromWordlist}
+          >
+            Delete
+          </button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
 }
 
 function explodeEntry(entry: T.DictionaryEntry): T.DictionaryEntry {
-    return {
-        ...entry,
-        p: entry.p.split("").join(" "),
-    };
+  return {
+    ...entry,
+    p: entry.p.split("").join(" "),
+  };
 }
 
 function inflectionSubUrl(pattern: T.InflectionPattern): string {
-    return pattern === 0
-        ? ""
-        : pattern === 1
-        ? "#1-basic"
-        : pattern === 2
-        ? "#2-words-ending-in-an-unstressed-ی---ey"
-        : pattern === 3
-        ? "#3-words-ending-in-a-stressed-ی---éy"
-        : pattern === 4
-        ? "#4-words-with-the-pashtoon-pattern"
-        : pattern === 5
-        ? "#5-shorter-words-that-squish"
-        // : pattern === 6
-        : "#6-inanimate-feminine-nouns-ending-in-ي---ee"
+  return pattern === 0
+    ? ""
+    : pattern === 1
+    ? "#1-basic"
+    : pattern === 2
+    ? "#2-words-ending-in-an-unstressed-ی---ey"
+    : pattern === 3
+    ? "#3-words-ending-in-a-stressed-ی---éy"
+    : pattern === 4
+    ? "#4-words-with-the-pashtoon-pattern"
+    : pattern === 5
+    ? "#5-shorter-words-that-squish"
+    : // : pattern === 6
+      "#6-inanimate-feminine-nouns-ending-in-ي---ee";
 }
 
-export default IsolatedEntry;
+export default IsolatedEntry;

website/yarn.lock

@@ -2349,10 +2349,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@lingdocs/ps-react@6.0.12":
-  version "6.0.12"
-  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-6.0.12.tgz#526a962c06ec59bc86884936e8c5bbea43f64461"
-  integrity sha512-ncOccEYU40woDK7ChyBwtdyiIKrWqAVIlTiIeVGkKa1w6mq14P02SZFCvbqnjJ54pBIK8r0VXRj0LcYkmZn4rw==
+"@lingdocs/ps-react@7.0.3":
+  version "7.0.3"
+  resolved "https://npm.lingdocs.com/@lingdocs/ps-react/-/ps-react-7.0.3.tgz#9962fca6a7eeec1d9eec7938ca5fbf2c8634c228"
+  integrity sha512-/ASFFGudbqjEaZQ5OSHAwCQaZSdnPPInWv30rLR6ytLA+lS2udXLQHXkW+3ArUQ1UFBQlK1AC2+1tKNxvD2IrQ==
   dependencies:
     "@formkit/auto-animate" "^1.0.0-beta.3"
     classnames "^2.2.6"