starting to be able to edit EP examples

package.json

@@ -6,7 +6,7 @@
     "@formkit/auto-animate": "^1.0.0-beta.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@lingdocs/lingdocs-main": "^0.3.1",
-    "@lingdocs/pashto-inflector": "^2.8.4",
+    "@lingdocs/pashto-inflector": "^2.8.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/phrase-diagram/BlockDiagram.tsx

@@ -6,7 +6,7 @@ import {
     APBlock,
 } from "@lingdocs/pashto-inflector";
 
-function PhraseDiagram({ opts, children }: {
+function BlockDiagram({ opts, children }: {
     opts: T.TextOptions,
     children: T.NPSelection | T.APSelection,
 }) {
@@ -28,4 +28,4 @@ function PhraseDiagram({ opts, children }: {
 }
 
 
-export default PhraseDiagram;
+export default BlockDiagram;

src/components/phrase-diagram/EditableBlock.tsx

@@ -8,7 +8,7 @@ import {
     useRef,
 } from "react";
 import { useState } from "react";
-import PhraseDiagram from "./PhraseDiagram";
+import BlockDiagram from "./BlockDiagram";
 import entryFeeder from "../../lib/entry-feeder";
 import autoAnimate from "@formkit/auto-animate";
 
@@ -22,12 +22,10 @@ function selectionToBlock(s: T.NPSelection | T.APSelection): { type: "NP", block
         : { type: "NP", block: s };
 }
 
-function EditablePhraseDiagram({ opts, children }: {
+function EditableBlock({ opts, children: block }: {
     opts: T.TextOptions,
-    children: (T.NPSelection | T.APSelection)[],
+    children: T.NPSelection | T.APSelection,
 }) {
-    console.log({ aa: children[0] })
-    const block = children[0];
     const parent = useRef<HTMLDivElement>(null);
     useEffect(() => {
         parent.current && autoAnimate(parent.current)
@@ -40,7 +38,6 @@ function EditablePhraseDiagram({ opts, children }: {
         type: "AP",
         block: T.APSelection | undefined,
     }>(selectionToBlock(block));
-    if (children.length === 0) return null;
     function handleNPChange(np: T.NPSelection | undefined) {
         setEdited({ type: "NP", block: np });
     }
@@ -81,11 +78,11 @@ function EditablePhraseDiagram({ opts, children }: {
                 }
             </div>}
             {edited.block
-                && <PhraseDiagram opts={opts}>
+                && <BlockDiagram opts={opts}>
                     {edited.block}
-                </PhraseDiagram>}
+                </BlockDiagram>}
         </div>
     </div>;
 }
 
-export default EditablePhraseDiagram;
+export default EditableBlock;

src/components/phrase-diagram/EditableEPEx.tsx

@@ -0,0 +1,39 @@
+import {
+    Types as T,
+    EPDisplay,
+    EPPicker,
+} from "@lingdocs/pashto-inflector";
+import entryFeeder from "../../lib/entry-feeder";
+import { useState } from "react";
+
+
+export function EditIcon() {
+    return <i className="fas fa-edit" />;
+}
+
+function EditableEPEx({ children, opts }: { children: T.EPSelectionState, opts: T.TextOptions }) {
+    const [editing, setEditing] = useState<boolean>(false);
+    const [eps, setEps] = useState<T.EPSelectionState>(children);
+    function handleReset() {
+        setEditing(false);
+        setEps(children);
+    }
+    return <div>
+        <div
+            className="text-right clickable"
+            onClick={editing ? handleReset : () => setEditing(true)}
+        >
+            {!editing ? <EditIcon /> : <i className="fas fa-undo" />}
+        </div>
+        {editing
+            && <EPPicker
+                opts={opts}
+                entryFeeder={entryFeeder}
+                eps={eps}
+                onChange={setEps}
+            />}
+        <EPDisplay opts={opts} eps={eps} setOmitSubject={false} />
+    </div>;
+}
+
+export default EditableEPEx;

src/components/phrase-diagram/EditableExample.tsx

@@ -1,45 +0,0 @@
-import {
-    Types as T,
-    Examples,
-    renderEP,
-    compileEP,
-
-} from "@lingdocs/pashto-inflector";
-import { completeEPSelection } from "@lingdocs/pashto-inflector/dist/lib/phrase-building/render-ep";
-import { useState } from "react";
-// import EPBlocks from "./EPBlocks";
-
-function getShort<X>(i: T.SingleOrLengthOpts<X>): X {
-    if ("long" in i) {
-        return i.long;
-    }
-    return i;
-}
-
-function EditableExample({ children: eps, opts }: { children: T.EPSelectionState, opts: T.TextOptions }) {
-    const [mode, setMode] = useState<"example" | "blocks">("example");
-    const EPS = completeEPSelection(eps);
-    if (!EPS) {
-        return <div>Error: Invalid/incomplete Phrase</div>;
-    }
-    const rendered = renderEP(EPS);
-    const compiled = compileEP(rendered);
-    const text: T.PsString = {
-        ...getShort(compiled.ps)[0],
-        e: compiled.e ? compiled.e.join(" / ") : undefined,
-    };
-    return <div>
-        <div className="d-flex flex-row justify-content-beginning">
-            {mode === "example" ? <div className="clickable" onClick={() => setMode("blocks")}>
-                <i className="fas fa-cubes" />
-            </div> : <div className="clickable" onClick={() => setMode("example")}>
-                <i className="fas fa-align-left" />
-            </div>}
-        </div>
-        {/* {mode === "example"
-            ? <Examples opts={opts}>{[text]}</Examples>
-            : <EPBlocks opts={opts}>{rendered}</EPBlocks>} */}
-    </div>;
-}
-
-export default EditableExample;

src/content/phrase-structure/ap.mdx

@@ -10,9 +10,9 @@ import {
 } from "@lingdocs/pashto-inflector";
 import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
-import EditablePhraseDiagram, {
+import EditableBlock, {
     EditIcon,
-} from "../../components/phrase-diagram/EditablePhraseDiagram";
+} from "../../components/phrase-diagram/EditableBlock";
 
 Another building block we have in Pashto phrases in the **AP (Adverb Phrase)**. Adverb Phrases are used to give more information about the phrase in terms of time, manner, place, degree, etc.
 
@@ -25,25 +25,25 @@ An AP is either:
 
 An adverb is a word or expression that modifies the time, manner, place, etc. of a phrase.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
             type: "adverb",
             entry: {"ts":1527815160,"i":2394,"p":"پرون","f":"paroon","g":"paroon","e":"yesterday","c":"adv."},
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
             type: "adverb",
             entry: {"ts":1527819967,"i":5428,"p":"خامخا","f":"khaamakhaa","g":"khaamakhaa","e":"definitely, for sure, whether someone wants or not, willy-nilly (this last use more in Urdu)","c":"adv."},
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 ### Sandwich 🥪
 
@@ -51,7 +51,7 @@ In English we have have [prepositions](https://en.wikipedia.org/wiki/Preposition
 
 These "sandwiches" are also used as an adverb to give more information for the phrase. They take an <Link to="/phrase-structure/np/">NP</Link> in the middle. For example if we want to say "in the house" we take the sandwich <InlinePs opts={opts} ps={{ p: "په ... کې", f: "pu ... ke", e: "in" }} /> and put the NP <InlinePs opts={opts} ps={{ p: "کور", f: "kor", e: "house" }} /> inside of it.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
@@ -73,12 +73,12 @@ These "sandwiches" are also used as an adverb to give more information for the p
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 Because the inside of a sandwich is an <Link to="/phrase-structure/np/">NP</Link> we can also spice it up by adding adjectives.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
@@ -103,12 +103,12 @@ Because the inside of a sandwich is an <Link to="/phrase-structure/np/">NP</Link
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 We can also add a possesor it hangs outside of the sandwich. All together it's still all considered one AP block though.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
@@ -148,12 +148,12 @@ We can also add a possesor it hangs outside of the sandwich. All together it's s
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 Here's another example using the sandwich <InlinePs opts={opts} ps={{ p: "سره", f: "sara", e: "with" }} />:
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "AP",
         selection: {
@@ -185,7 +185,7 @@ Here's another example using the sandwich <InlinePs opts={opts} ps={{ p: "سره
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 Notice how when we put the word <InlinePs opts={opts} ps={{ p: "ملګری", f: "malgúrey", e: "friend" }} /> inside the sandwich it <Link to="/inflection/inflection-intro/">inflects</Link>. You <strong>always inflect the inside of the sandwich</strong> except for <Link to="/inflection/inflection-patterns/#exceptions">two exceptions</Link>.

src/content/phrase-structure/ep.mdx

@@ -11,6 +11,7 @@ import {
 import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
 import EquativeIllustration from "../../components/EquativeIllustration";
+import EditableEPEx from "../../components/phrase-diagram/EditableEPEx";
 import BasicBlocks from "../../components/BasicBlocks"
 
 
@@ -58,18 +59,39 @@ Let's look at some examples using each of these kinds of complements.
 
 #### With an adjective
 
-An adjective is a word that describes what the subject is like. Notice that it will inflect to agree with the subject.
+An adjective is a word that describes what the subject is like. Notice that if possible, it will inflect to agree with the subject.
 
-EXAMPLES COMING...
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":0,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"adjective","entry":{"ts":1527815306,"i":7595,"p":"ستړی","f":"stúRey","g":"stuRey","e":"tired","c":"adj."}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
+
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":2,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"adjective","entry":{"ts":1527812792,"i":5823,"p":"خوشاله","f":"khoshaala","g":"khoshaala","e":"happy, glad","c":"adj."}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
 
 #### With a location adverb
 
-An adverb is a word that describes the location of the subject. Don't worry, it doesn't inflect.
+A location adverb is a word that describes the location of the subject. Don't worry, it doesn't inflect.
 
-EXAMPLES COMING...
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":10,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"loc. adv.","entry":{"ts":1527812558,"i":6251,"p":"دلته","f":"dălta","g":"dalta","e":"here","c":"loc. adv."}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
+
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":5,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"loc. adv.","entry":{"ts":1527812449,"i":13954,"p":"هلته","f":"hálta, álta","g":"halta,alta","e":"there","c":"loc. adv."}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
 
 #### With a sandwich
 
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":1,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"sandwich","before":{"p":"له","f":"la"},"after":{"p":"سره","f":"sara"},"e":"with","inside":{"type":"NP","selection":{"type":"pronoun","person":3,"distance":"far"}}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
+
+<EditableEPEx opts={opts}>{
+    {"blocks":[{"key":0.0539623363055568,"block":{"type":"subjectSelection","selection":{"type":"NP","selection":{"type":"pronoun","person":4,"distance":"far"}}}}],"predicate":{"type":"Complement","Complement":{"type":"EQComp","selection":{"type":"sandwich","before":{"p":"په","f":"pu"},"after":{"p":"کې","f":"ke"},"e":"in","inside":{"type":"NP","selection":{"type":"noun","entry":{"ts":1527812828,"i":10540,"p":"کور","f":"kor","g":"kor","e":"house, home","c":"n. m."},"gender":"masc","genderCanChange":false,"number":"singular","numberCanChange":true,"adjectives":[]}}}}},"equative":{"tense":"present","negative":false},"omitSubject":false}
+}</EditableEPEx>
+
+
 #### With a complement noun
 
 ## 2. NP + NP

src/content/phrase-structure/kids-section.mdx

@@ -10,9 +10,6 @@ import {
 import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
 import BasicBlocks from "../../components/BasicBlocks";
-import EditablePhraseDiagram, {
-    EditIcon,
-} from "../../components/phrase-diagram/EditablePhraseDiagram";
 
 Pashto phrases are built with **blocks** that are <Link to="/phrase-structure/np/">NPs</Link>, <Link to="/phrase-structure/ap/">APs</Link>, or complements, with a verb or equative at the end. Here are some examples of what the phrases can look like.
 

src/content/phrase-structure/np.mdx

@@ -9,9 +9,9 @@ import {
 } from "@lingdocs/pashto-inflector";
 import psmd from "../../lib/psmd";
 import Link from "../../components/Link";
-import EditablePhraseDiagram, {
+import EditableBlock, {
     EditIcon,
-} from "../../components/phrase-diagram/EditablePhraseDiagram";
+} from "../../components/phrase-diagram/EditableBlock";
 import BasicBlocks from "../../components/BasicBlocks";
 
 Pashto phrases are built with a basic **building blocks** 🧱 like NPs, APs, verbs, and equatives. We can think of phrases in Pashto as a line of blocks like this:
@@ -37,7 +37,7 @@ A noun phrase (NP) in Pashto is one of the following three things:
 
 A **noun** is a word that we use to identify people, places, things, or ideas. One of these words by itself it forms a NP, one of the basic building blocks.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -50,12 +50,12 @@ A **noun** is a word that we use to identify people, places, things, or ideas. O
             adjectives: [],
             possesor: undefined,
         },
-    },
+    }
-]}</EditablePhraseDiagram> 
+}</EditableBlock> 
 
 We can also **extend our noun by adding *adjectives***. Let's add the *adjective* <InlinePs opts={opts} ps={{ p: "زوړ", f: "zoR", e: "old" }} /> to our NP.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -71,12 +71,12 @@ We can also **extend our noun by adding *adjectives***. Let's add the *adjective
             }],
             possesor: undefined,
         }
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 Now we have two words, but it's still **one NP**, one building block. We can add as many adjectives as we want, and it still stays as one single building block. Click on the <EditIcon /> icon below to try adding or removing more adjectives.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -102,12 +102,12 @@ Now we have two words, but it's still **one NP**, one building block. We can add
             ],
             possesor: undefined,
         }
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 We can also add a **possesor** by adding another NP <Link to="/sandwiches/sandwiches/">sandwiched</Link> in with a <InlinePs opts={opts} ps={{ p: "د", f: "du", e: "of"}} />. (Notice that the word sandwiched in there will <Link to="/inflection/inflection-intro/">inflect</Link> if possible.) Now we have a NP inside of an NP, but it's still all **one NP** or **one building block**. 
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -139,12 +139,12 @@ We can also add a **possesor** by adding another NP <Link to="/sandwiches/sandwi
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 If our possesor is a noun, we can add a possesor to *it*. Try clicking the <EditIcon /> icon below and adding possesors to the possesors, you can go forever! 🤯
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -191,8 +191,8 @@ If our possesor is a noun, we can add a possesor to *it*. Try clicking the <Edit
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 A possesor can have another possesor which can have another posseser and so-on and on *forever*. The nerdy word for this phenomenon where things reference/repeat themselves is [recursion](https://en.wikipedia.org/wiki/Recursion). 🤓
 
@@ -212,7 +212,7 @@ A pronoun is a word like "I", "you", "us", "them" that signifies a person or thi
 
 You can't add any adjectives or possesors to pronouns in Pashto. They just stand on their own as an NP.
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -220,17 +220,19 @@ You can't add any adjectives or possesors to pronouns in Pashto. They just stand
             person: 0,
             distance: "far",
         }
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
-    {type: "NP", selection:
     {
+        type: "NP",
+        selection: {
             type: "pronoun",
             person: 11,
             distance: "far",
-        }},
+        },
-]}</EditablePhraseDiagram>
+    }
+}</EditableBlock>
 
 ### Participle
 
@@ -239,7 +241,7 @@ In Pashto you can use the infinitive form of a verb as a participle, meaning you
 - "to write" or
 - "writing"
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -248,8 +250,8 @@ In Pashto you can use the infinitive form of a verb as a participle, meaning you
                 entry: {"ts":1527812856,"i":11617,"p":"لیکل","f":"leekul","g":"leekul","e":"to write","c":"v. trans./gramm. trans.","ec":"write,writes,writing,wrote,written"},
             },
         }
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 Then we can use this NP just like we would any other noun in a sentence.
 
@@ -295,7 +297,7 @@ We can also **add subjects or objects** to the participle by <Link to="/sandwich
 
 For example, if we take the participle <InlinePs opts={opts} ps={{ p: "وهل", f: "wahúl", e: "to hit / hitting" }} />
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -304,12 +306,12 @@ For example, if we take the participle <InlinePs opts={opts} ps={{ p: "وهل",
                 entry: {"ts":1527815399,"i":14463,"p":"وهل","f":"wahul","g":"wahul","e":"to hit","c":"v. trans.","tppp":"واهه","tppf":"waahu","ec":"hit,hits,hitting,hit,hit"},
             },
         }
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 And we can add the word <InlinePs opts={opts} ps={{ p: "ماشومان", f: "maashoomaan", e: "children" }} /> by sandwiching it in like we did with the possesor, we get
 
-<EditablePhraseDiagram opts={opts}>{[
+<EditableBlock opts={opts}>{
     {
         type: "NP",
         selection: {
@@ -333,8 +335,8 @@ And we can add the word <InlinePs opts={opts} ps={{ p: "ماشومان", f: "maa
                 },
             },
         },
-    },
+    }
-]}</EditablePhraseDiagram>
+}</EditableBlock>
 
 The noun we just attached can be a subject *or* an object of the participle. You just have to know from context. So this NP can mean either:
 

yarn.lock

@@ -1695,10 +1695,10 @@
     rambda "^6.7.0"
     react-select "^5.2.2"
 
-"@lingdocs/pashto-inflector@^2.8.4":
+"@lingdocs/pashto-inflector@^2.8.8":
-  version "2.8.4"
+  version "2.8.8"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-2.8.4.tgz#68c5a4a1b242b13e5fdc10bea472676a7def48bc"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-2.8.8.tgz#4d33dae9716a7284f57aa1aa4ded8c0468b9740f"
-  integrity sha512-kO8qUkNzNwz5A+nG1pdnYB0EBufQIfyy8Y/6TyItsUt1CdH4FC+Y5RNVHGPGJPXUiBP8X1N/PHU8iZURifp7ZQ==
+  integrity sha512-IiM+6upS96S0pm/0ewkqG8EVM7c6A6+LaBmJ2kbiKCyNHhv4V8WOE9wFT1oSCJMeWuCJsJL3MZaeDifCFqXBjQ==
   dependencies:
     "@formkit/auto-animate" "^1.0.0-beta.1"
     classnames "^2.2.6"