starting to be able to edit EP examples

This commit is contained in:
lingdocs 2022-06-11 13:50:20 -04:00
parent f675542fbd
commit 9f90b12fcc
10 changed files with 133 additions and 121 deletions

View File

@ -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",

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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>.

View File

@ -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

View File

@ -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.

View File

@ -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}>{[
{type: "NP", selection:
<EditableBlock opts={opts}>{
{
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:

View File

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