starting to use jsx/md for highlighting in ps text

.babelrc

@@ -1,3 +1,11 @@
 {
-	"presets": ["babel-preset-react-app"]
+	"presets": ["babel-preset-react-app"],
+	"plugins": [
+		[
+		  "@babel/plugin-transform-react-jsx",
+		  {
+			"pragmaFrag": "React.Fragment"
+		  }
+		]
+	]
 }

package.json

@@ -14,6 +14,7 @@
     "@types/react-dom": "^17.0.2",
     "bootstrap": "4.5.3",
     "classnames": "^2.2.6",
+    "markdown-to-jsx": "^7.1.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
@@ -47,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.14.5",
     "mdx-loader": "^3.0.2",
     "node-fetch": "^2.6.1"
   }

src/content/equatives/present-equative.mdx

@@ -122,9 +122,9 @@ export function EquativeIllustration({forms, opts}) {
 
 <EquativeIllustration />
 
-**Warning: ⚠** *Often times English speakers learning Pashto will be tempted to just forget the equative at the end because it can feel like they're done the sentence, or it might be hard to remember which equative to use. But don't leave it out, it's a vital part of the sentence!* 
+<!-- **Warning: ⚠** *Often times English speakers learning Pashto will be tempted to just forget the equative at the end because it can feel like they're done the sentence, or it might be hard to remember which equative to use. But don't leave it out, it's a vital part of the sentence!* 
 
-The important thing about the equative is that **the equative has to agree with the subject**. Just like it would sound strange to say "I are tired," in Pashto you can't say ❌ <InlinePs opts={defaultTextOptions} ps={{ p: "زه ستړی یو", f: "zu stuRey yoo" }} /> ❌.
+The important thing about the equative is that **the equative has to agree with the subject**. Just like it would sound strange to say "I are tired," in Pashto you can't say ❌ <InlinePs opts={defaultTextOptions} ps={{ p: "زه ستړی یو", f: "zu stuRey yoo" }} /> ❌. -->
 
 ## Present Equative Form
 

src/content/equatives/subjunctive-habitual-equative.mdx

@@ -10,6 +10,8 @@ import {
     concatPsString,
     InlinePs,
 } from "@lingdocs/pashto-inflector";
+import psmd from "../../lib/psmd";
+import Markdown from "markdown-to-jsx";
 import EquativeFormChoice from "../../components/EquativeFormChoice";
 import Link from "../../components/Link";
 export const opts = defaultTextOptions;
@@ -47,13 +49,21 @@ This form is used with two different meanings:
 1. **Subjunctive** - to talk about something being something when the statement involves a hypothetical condition, a wish, desire, hope, or statement of whether it should or shouldn't be, as in:
 
     <Examples opts={opts}>{[
-        { p: "امید لرم چې خوشحاله وي", f: "Umeed larum che khosháala wee", e: "I hope he's happy" },
+        psmd({
+            p: "امید لرم چې خوشحاله **وي**",
+            f: "Umeed larum che khosháala **wee**",
+            e: "I hope he **is** happy",
+        }),
     ]}</Examples>
 
 2. **Habitual** - to say that something is generally or repeatedly something, as in:
 
     <Examples opts={opts}>{[
-        { p: "سحار کې چمن لوند وي", f: "saháar ke chaman loond wee", e: "The grass is wet in the morning. (generally, habitually)" },
+        psmd({
+            p: "سحار کې چمن لوند **وي**",
+            f: "saháar ke chaman loond **wee**",
+            e: "The grass **is** wet in the morning. (generally, habitually)",
+        }),
     ]}</Examples>
 
 ### With a Subjunctive Meaning
@@ -62,42 +72,84 @@ This form is used with two different meanings:
 
 The subjunctive form can be used to talk about it being being good or bad, necessary, or required that something is something.
 
-<Examples opts={opts}>{[
+<Examples opts={opts}>{psmd([
-    { p: "ښه ده چې دلته یې", f: "xa da che dălta ye.", e: "It's good that you're here." },
+    {
-    { p: "هغوي باید په ښووونځي کې وي", f: "hagwee baayad pu xowoondzee ke wee.", e: "They have to be in school." },
+        p: "ښه ده چې دلته **یې**",
-]}</Examples>
+        f: "xa da che dălta **ye**.",
+        e: "It's good that you're here.",
+    },
+    {
+        p: "هغوي باید په ښووونځي کې **وي**",
+        f: "hagwee baayad pu xowoondzee ke **wee**.",
+        e: "They have to be in school.",
+    },
+])}</Examples>
 
 #### Desire
 
-<Examples opts={opts}>{[
+<Examples opts={opts}>{psmd([
-    { p: "امید لرم چې هلته وي", f: "Umeed larum che halta wee.", e: "I hope they're there." },
+    {
-    { p: "هغه غواړي چې مونږ په کور کې یو", f: "haghá ghwaaRee che moonG pu kor ke yoo.", e: "He wants us to be home." },
+        p: "امید لرم چې هلته **وي**",
-]}</Examples>
+        f: "Umeed larum che halta **wee**.",
+        e: "I hope they're there.",
+    },
+    {
+        p: "هغه غواړي چې مونږ په کور کې **یو**",
+        f: "haghá ghwaaRee che moonG pu kor ke **yoo**.",
+        e: "He wants us to be home.",
+    },
+])}</Examples>
 
 #### Conditions
 
 The subjunctive form is also used to talk about conditions or possibilities. *If A = B, then...* or *It could be that A = B ...*
 
-<Examples opts={opts}>{[
+<Examples opts={opts}>{psmd([
-    { p: "که دوکان کې وریژې وي نو وایې خله", f: "ku dokaan ke wrejze wee, no waa-ye-khla", e: "If there's rice in the store, buy it" },
+    {
-    { p: "کېدی شي چې ډوډۍ تیاره وي", f: "kedey shee che DoDúy tayaara wee", e: "The food could be ready" },
+        p: "که دوکان کې وریژې **وي** نو وایې خله",
-]}</Examples>
+        f: "ku dokaan ke wrejze **wee**, no waa-ye-khla",
+        e: "If there's rice in the store, buy it",
+    },
+    {
+        p: "کېدی شي چې ډوډۍ تیاره **وي**",
+        f: "kedey shee che DoDúy tayaara **wee**",
+        e: "The food could be ready",
+    },
+])}</Examples>
 
 ### With a Habitual Meaning
 
 This same form is used when you are saying that **A = B generally, habitually, or repeatedly**. For example:
 
-<Examples opts={opts}>{[
+<Examples opts={opts}>{psmd([
-    { p: "هغه تر ماښامه پورې په دوکان کې وي", f: "haghá tur maaxaama pore pu dookáan ke wee", e: "He's in the shop until evening. (generally, habitually)" },
+    {
-    { p: "اتو بجو نه بعد دوکان بند وي", f: "atu bajo na bad dookáan band wee", e: "The shop is closed after 8 o'clock. (generally, habitually)" },
+        p: "هغه تر ماښامه پورې په دوکان کې **وي**",
-]}</Examples>
+        f: "haghá tur maaxaama pore pu dookáan ke **wee**",
+        e: "He's in the shop until evening. (generally, habitually)",
+    },
+    { 
+        p: "اتو بجو نه بعد دوکان بند **وي**.",
+        f: "atu bajo na bad dookáan band **wee**",
+        e: "The shop is closed after 8 o'clock. (generally, habitually)",
+    },
+])}</Examples>
 
 ⚠ **Warning**: For English speakers **it take some time to get used to choosing between the *present* and *habitual* equatives**. Standard English uses the same form for both, but in Pashto the forms change!
 
-<Examples opts={opts}>{[
+<Examples opts={opts}>{psmd([
-    { p: "ماښام دوکان بند وي.", f: "maaxáam dookáan band wee", e: "The shop is closed in the evening. (generally, every day - habitual form)" },
+    {
-    { p: "دوکان دند دی.", f: "dookáan band dey.", e: "The shop is closed. (right now, at this moment - present form)" },
+        p: "دوکان دند **دی**.",
-]}</Examples>
+        f: "dookáan band **dey**.",
+        e: "The shop **is** closed. (right now, at this moment)",
+        sub: "1. Present Form"
+    },
+    {
+        p: "دوکان هر وخت بند **وي**",
+        f: "dookáan hăr wakht band **wee**",
+        e: "The shop **is** always closed. (generally, every day)",
+        sub: "2. Habitual Form"
+    },
+])}</Examples>
 
 In English, we just say "is" in both situations. But **in Pashto, you have to pick between the two forms**. Use the present form for things that are something in the moment, and use the habitual form for things are generally or habitually something.
 
@@ -125,7 +177,7 @@ Interestingly, there is also a separate [habitual equative](https://en.wikipedia
                     <td>The grass <strong>is</strong> wet</td>
                     <td>
                         <Examples opts={opts}>{[
-                            { p: "چمن لوند دی", f: "chaman loond dey" },
+                            { p: <>چمن لوند <strong>دی</strong></>, f: <>chaman loond <strong>dey</strong></> },
                         ]}</Examples>
                     </td>
                 </tr>
@@ -137,9 +189,9 @@ Interestingly, there is also a separate [habitual equative](https://en.wikipedia
                     </td>
                     <td>The grass <strong>be</strong> wet in the morning</td>
                     <td>
-                        <Examples opts={opts}>{[
+                        <Examples opts={opts}>
-                            { p: "په سحار کې چمن لوند وي", f: "pu sahaar ke chaman loond wee" },
+                            {[{ p: <>په سحار کې چمن لوند <strong>وي</strong></>, f: <>pu sahaar ke chaman loond <strong>wee</strong></> }]}
-                        ]}</Examples>
+                        </Examples>
                     </td>
                 </tr>
             </tbody>

src/content/pronouns/pronouns-mini.mdx

@@ -14,7 +14,7 @@ https://creativecommons.org/licenses/by-sa/4.0/legalcode
 -->
 
 import {
-    defaultTextOptions,
+    defaultTextOptions as opts,
     grammarUnits,
     VerbTable,
     Examples,
@@ -34,7 +34,7 @@ Mini pronouns can only be used as one of three things:
 
 <VerbTable
     block={grammarUnits.pronouns.mini}
-    textOptions={defaultTextOptions}
+    textOptions={opts}
     english={[
         ["I", "we"],
         ["I", "we"],
@@ -51,7 +51,7 @@ Below are some examples of how mini pronouns can be used in the place of regular
 
 ### 1. As the object of a present/future verb
 
-<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={defaultTextOptions}>{[
+<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={opts}>{[
     [
         { p: "زه تا وینم", f: "zu taa weenum", e: "I see you"},
         { p: "زه دې وینم", f: "zu de weenum", e: "I see you"},
@@ -68,7 +68,7 @@ Below are some examples of how mini pronouns can be used in the place of regular
 
 ### 2. As the subject of a past tense transitive verb
 
-<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={defaultTextOptions}>{[
+<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={opts}>{[
     [
         { p: "ما ډوډۍ وخوړله", f: "maa DoDuy óokhoRula", e: "I ate food"},
         { p: "ډوډۍ مې وخوړله", f: "DoDuy me óokhoRula", e: "I ate food"},
@@ -85,7 +85,7 @@ Below are some examples of how mini pronouns can be used in the place of regular
 
 ### 3. As a possesive pronoun  
 
-<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={defaultTextOptions}>{[
+<Chart titleRow={["w/ reg. pronoun", "w/ mini pronoun 👶"]} opts={opts}>{[
     [
         { p: "د هغې پلار مریض دی", f: "du haghe plaar mareez dey", e: "Her father is ill" },
         { p: "پلار یې مریض دی", f: "plaar ye mareez dey", e: "Her father is ill" },
@@ -99,3 +99,12 @@ Below are some examples of how mini pronouns can be used in the place of regular
         { p: "کور مو په کابل کې دی", f: "kor mU pu kaabul ke dey", e: "Our house is in Kabul" },
     ],
 ]}</Chart>
+
+## Notes
+
+Mini prounouns **can't go inside sandwiches**.
+
+<Examples opts={opts}>{[
+    { p: "❌ زه دفتر یې ته ځم", f: "❌ zu dăftar ye ta dzum", e: "I'm going to his office" },
+    { p: "زه دفتر ته یې ځم", f: "zu dăftar ta ye dzum", e: "I'm going to his office" },
+]}</Examples>

src/lib/psmd.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Markdown from "markdown-to-jsx";
+
+export default function mdps(input) {
+    if (Array.isArray(input)) {
+        return input.map((x) => mdps(x));
+    }
+    return {
+        ...input,
+        p: <Markdown>{input.p}</Markdown>,
+        f: <Markdown>{input.f}</Markdown>,
+        ...input.e ? {
+            e: <Markdown>{input.e}</Markdown>,
+        } : {},
+    };
+}

yarn.lock

@@ -104,6 +104,13 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/helper-annotate-as-pure@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
+  integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -289,6 +296,13 @@
   dependencies:
     "@babel/types" "^7.12.5"
 
+"@babel/helper-module-imports@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
+  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
 "@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
@@ -355,6 +369,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
@@ -449,6 +468,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
+
 "@babel/helper-validator-identifier@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.0.tgz#ad53562a7fc29b3b9a91bbf7d10397fd146346ed"
@@ -656,6 +680,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-jsx@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-syntax-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
@@ -952,6 +983,17 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
+  integrity sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-jsx" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
 "@babel/plugin-transform-react-jsx@^7.9.1":
   version "7.9.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.1.tgz#d03af29396a6dc51bfa24eefd8005a9fd381152a"
@@ -1280,6 +1322,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
+  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.5"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1505,12 +1555,13 @@
     chalk "^4.0.0"
 
 "@lingdocs/pashto-inflector@^0.4.0":
-  version "0.4.1"
+  version "0.4.5"
-  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.4.1.tgz#dba13d46c27c03bb30a7487e82e1ac0d78f47f5a"
+  resolved "https://npm.lingdocs.com/@lingdocs%2fpashto-inflector/-/pashto-inflector-0.4.5.tgz#3fa73a61a24cd109d9cc32341a5f06d4abcb9ab7"
-  integrity sha512-7NJVvZiCREPcYX0p8yeVc6ZJT/A4C1SiFvTqEmf5SMZoejimobFJFbi95GyLW6Ln9BAYHN5U00p0eIoVVwEfLg==
+  integrity sha512-Zjc5ERN9457vXh7fK6W/gcNnIDmyiTnxhT1Mrqj7u0+3GTWlmpJZlOI7dyffBg2j65OVNbVRJ2WaIhkS9Wz9Wg==
   dependencies:
     classnames "^2.2.6"
     pbf "^3.2.1"
+    rambda "^6.7.0"
 
 "@mdx-js/mdx@^0.15.5":
   version "0.15.7"
@@ -7374,6 +7425,11 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+markdown-to-jsx@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.3.tgz#f00bae66c0abe7dd2d274123f84cb6bd2a2c7c6a"
+  integrity sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9524,6 +9580,11 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+rambda@^6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/rambda/-/rambda-6.7.0.tgz#50322efdd23a108b61eb6ac4e0868d10dd95b4aa"
+  integrity sha512-qg2atEwhAS4ipYoNfggkIP7qBUbY2OqdW17n25VqZIz5YC1MIwSpIToQ7XacvqSCZz16efM8Y8QKLx+Js1Sybg==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"