better blocks display

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",

src/components/ep-explorer/EPBlocksDisplay.tsx

@@ -2,15 +2,16 @@ import * as T from "../../types";
 import Block from "../blocks/Block";
 import KidDisplay from "../blocks/KidDisplay";
 
-function EPBlocksDisplay({ opts, rendered }: {
+function EPBlocksDisplay({ opts, rendered, justify }: {
     opts: T.TextOptions,
     rendered: T.EPRendered,
+    justify?: "left" | "right" | "center",
 }) {
     const blocks = rendered.omitSubject
         ? rendered.blocks.filter(b => b.type !== "subjectSelection")
         : rendered.blocks;
-    return <div>
-        <div className="d-flex flex-row justify-content-center align-items-end mt-3">
+    return <div className={`d-flex flex-row justify-content-${justify ? justify : "center"}`} style={{}}>
+        <div className="d-flex flex-row justify-content-left align-items-end mt-3 pb-2" style={{ overflowX: "auto" }}>
             <div key={Math.random()} className="mr-2">
                 <Block opts={opts} block={blocks[0]} />
             </div>

src/components/ep-explorer/EPDisplay.tsx

@@ -8,10 +8,12 @@ import EPTextDisplay from "./EPTextDisplay";
 import EPBlocksDisplay from "./EPBlocksDisplay";
 type Mode = "text" | "blocks";
 
-function EPDisplay({ eps, opts, setOmitSubject }: {
+function EPDisplay({ eps, opts, setOmitSubject, justify, onlyOne }: {
     eps: T.EPSelectionState,
     opts: T.TextOptions,
     setOmitSubject: ((value: "true" | "false") => void) | false
+    justify?: "left" | "right" | "center",
+    onlyOne?: boolean,
 }) {
     const [mode, setMode] = useState<Mode>("text");
     const EP = completeEPSelection(eps);
@@ -47,10 +49,10 @@ function EPDisplay({ eps, opts, setOmitSubject }: {
             <div />
         </div>
         {mode === "text"
-            ? <EPTextDisplay opts={opts} compiled={result} />
-            : <EPBlocksDisplay opts={opts} rendered={rendered} />}
-        {result.e && <div className="text-muted mt-3">
-            {result.e.map((e, i) => <div key={i}>{e}</div>)}
+            ? <EPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={onlyOne} />
+            : <EPBlocksDisplay opts={opts} rendered={rendered} justify={justify} />}
+        {result.e && <div className={`text-muted mt-2 text-${justify === "left" ? "left" : justify === "right" ? "right" : "center"}`}>
+            {(onlyOne ? [result.e[0]] : result.e).map((e, i) => <div key={i}>{e}</div>)}
         </div>}
         {EP.predicate.selection.selection.type === "participle" && <div style={{ maxWidth: "6 00px", margin: "0 auto" }} className="alert alert-warning mt-3 pt-4">
             <p>⚠️ NOTE: This means that the subject {renderedSubject.selection.e ? `(${renderedSubject.selection.e})` : ""} is <strong>the action/idea</strong> of

src/components/ep-explorer/EPTextDisplay.tsx

@@ -1,23 +1,31 @@
+import { getShort } from "../../lib/p-text-helpers";
 import * as T from "../../types";
 import Examples from "../Examples";
 
-function EPTextDisplay({ compiled, opts }: { compiled: {
-    ps: T.SingleOrLengthOpts<T.PsString[]>;
-    e?: string[] | undefined;
-}, opts: T.TextOptions }) {
+function EPTextDisplay({ compiled, opts, justify, onlyOne }: {
+    compiled: {
+        ps: T.SingleOrLengthOpts<T.PsString[]>;
+        e?: string[] | undefined;
+    },
+    opts: T.TextOptions,
+    justify?: "left" | "right" | "center",
+    onlyOne?: boolean,
+}) {
     function VariationLayer({ vs }: { vs: T.PsString[] }) {
         return <div className="mb-2">
             <Examples opts={opts} lineHeight={0}>{vs}</Examples>
         </div>;
     }
-    return <div>
-        {"long" in compiled.ps ?
-            <div>
-                <VariationLayer vs={compiled.ps.long} />
-                <VariationLayer vs={compiled.ps.short} />
-                {compiled.ps.mini && <VariationLayer vs={compiled.ps.mini} />}
-            </div>
-            : <VariationLayer vs={compiled.ps} />
+    return <div className={justify === "left" ? "text-left" : justify === "right" ? "text-right" : "text-center"}>
+        {onlyOne
+            ? <VariationLayer vs={[getShort(compiled.ps)[0]]} />
+            : "long" in compiled.ps ?
+                <div>
+                    <VariationLayer vs={compiled.ps.long} />
+                    <VariationLayer vs={compiled.ps.short} />
+                    {compiled.ps.mini && <VariationLayer vs={compiled.ps.mini} />}
+                </div>
+                : <VariationLayer vs={compiled.ps} />
         }
     </div>;
 }