Merge branch 'main' of https://github.com/unfoldingWord/oce-editor-tools

into abelpz-headless-editor
unfoldingWord · Jul 26, 2023 · 2d4e21b · 2d4e21b
2 parents e83aa91 + 9da0f83
commit 2d4e21b
Show file tree

Hide file tree

Showing 7 changed files with 5,592 additions and 2,164 deletions.
diff --git a/packages/core/src/components/Editor.md b/packages/core/src/components/Editor.md
@@ -69,12 +69,12 @@ function MyEditor({
 function GridCard({ title, children }) {
   return (
     <Grid item key="Test" xs={12} sm={6}>
-      <Card sx={{ display: "flex", flexDirection: "column", resize: "both", }}>
+      <Card sx={{ display: "flex", flexDirection: "column", resize: "vertical", height: "60vh" }}>
         <CardHeader subheader={title}/>
         <CardContent
           sx={{
             flexGrow: 1,
-            minHeight: "40vh",
+            maxHeight: "100%",
             overflow: "hidden",
             overflowY: "auto",
           }}
@@ -142,7 +142,6 @@ function MyWorkspace() {
 
 ```
 
-
 ## Editor demo 2
 
 The Editor expects input of an EpiteleteHtml object.

diff --git a/packages/pk/netlify.toml b/packages/pk/netlify.toml
@@ -1,4 +1,4 @@
 [build]
-  base = "packages/pk/"
-  command = "nx build:styleguide @oce-editor-tools/pk --skip-nx-cache"
-  publish = "styleguide"
+  base = "/packages/pk/"
+  command = "yarn nx build:styleguide @oce-editor-tools/pk"
+  publish = "styleguide"
diff --git a/packages/pk/package.json b/packages/pk/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@oce-editor-tools/pk",
   "description": "A React Component Library for editing Usfm - incl. Proskomma cache.",
-  "version": "0.1.15-beta.3",
+  "version": "0.1.15-beta.4",
   "homepage": "https://pk-usfm-editor.netlify.app/",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,7 @@
     "translation-helps-rcl": "3.3.4-rc.2"
   },
   "dependencies": {
-    "@oce-editor-tools/core": "^0.1.15-beta.3",
+    "@oce-editor-tools/core": "0.1.15-beta.3",
     "@xelah/type-perf-html": "^1.0.2",
     "dompurify": "^3.0.3",
     "epitelete-html": "0.2.21-beta.2",
@@ -68,7 +68,7 @@
   },
   "scripts": {
     "start": "styleguidist server",
-    "build:styleguide": "npx styleguidist build",
+    "build:styleguide": "styleguidist build",
     "build": "rm -rf ./dist && babel ./src --out-dir ./dist -s inline",
     "test": "react-scripts test",
     "sections": "node styleguide.sections.js",
@@ -99,6 +99,11 @@
   "resolutions": {
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   },
+  "nx": {
+    "implicitDependencies": [
+      "@oce-editor-tools/core"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/pk/src/components/PkEditor.md b/packages/pk/src/components/PkEditor.md
@@ -1,43 +1,130 @@
 # PkEditor demo
 
-The demo demonstrates using the PkEditor (with all Proskomma / Epitetele handling done through a PkCacheProvider,
- which is included as a wrapper in the app).
+The demo demonstrates using four Editor instances (side by side) including synchronised navigation. The PkEditor uses Proskomma / Epitetele through a PkCacheProvider, which is here included as a wrapper around the workspace.
+
+**Note:** Uncontrolled editors use a local editor reference state, while controlled editors use reference state and onSetReference passed in as an argument, use the lock icon to force the editor to be uncontrolled.
 
 ```js
 import { useState, useEffect } from 'react'
 import usePkBookImport from "../hooks/usePkBookImport"
 import { usfmText } from '../data/tit.en.ult.usfm.js'
+import { usfmText as usfmTextFra } from "../data/86-TITfraLSG.usfm.js"
+import { usfmText as usfmTextPe } from "../data/1pe.en.ult.usfm.js"
 import PkCacheProvider from '../context/LocalPkCacheContext'
 
-function Component () {
-  const repoIdStr = 'unfoldingWord_ult'
-  const langIdStr = 'en'
-  const bookId = 'TIT'
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
 
-  const { loading, done } = usePkBookImport( repoIdStr, langIdStr, usfmText ) 
+import Grid from "@mui/material/Grid";
+import Container from "@mui/material/Container";
 
-  const onSave = (bookCode,usfmText) => {
-    console.log("save button clicked")
-    console.log(bookCode)
-    console.log(usfmText)
-  }
+function MyEditor({
+  bookId,
+  reference,
+  onReferenceSelected,
+  repoIdStr,
+  langIdStr,
+  usfmText,
+  ...props
+}) {
+
+  const verbose = true
+  const { loading, done } = usePkBookImport( repoIdStr, langIdStr, usfmText ) 
 
   const editorProps = {
-    onSave,
+    bookId,
+    reference,
+    onReferenceSelected,
     repoIdStr,
     langIdStr,
-    bookId,
+    verbose,
+    ...props,
   }
-
+
+  return <>{done ? <PkEditor {...editorProps} /> : "Loading..."}</>
+}
+
+function GridCard({ title, children }) {
   return (
-      <div key="1">
-        { done ? <PkEditor {...editorProps} /> : 'Loading...'}
-      </div>
+    <Grid item key="Test" xs={12} sm={6}>
+      <Card sx={{ display: "flex", flexDirection: "column", resize: "vertical", height: "60vh" }}>
+        <CardHeader subheader={title}/>
+        <CardContent
+          sx={{
+            flexGrow: 1,
+            maxHeight: "100%",
+            overflow: "hidden",
+            overflowY: "auto",
+          }}
+        >
+          {children}
+        </CardContent>
+      </Card>
+    </Grid>
+  )
+}
+const bookId1 = "TIT"
+const bookId2 = "1PE"
+const langIdStr = 'en'
+const langIdStrFra = 'fra'
+
+function MyWorkspace() {
+  const [reference, setReference] = useState({ bookId: bookId1, chapter: 1, verse: 1 })
+
+  const onReferenceSelected = ({ sourceId, bookId, chapter, verse }) => {
+    setReference({ sourceId, bookId: bookId, chapter, verse })
+  }
+
+  return (
+    <Container sx={{ py: 4 }}>
+      <h2>Workspace</h2>
+      <Grid container spacing={2}>
+        <GridCard title={`Org1: 1Peter (Uncontrolled)`}>
+          <MyEditor
+            repoIdStr={"ORG1-en_ult/1pe"}
+            langIdStr={langIdStr}
+            bookId={bookId2}
+            usfmText={usfmTextPe}
+          />
+        </GridCard>
+        <GridCard title={`Org2: 1Peter (Controlled)`}>
+          <MyEditor
+            repoIdStr={"ORG2-en_ult/1pe"}
+            langIdStr={langIdStr}
+            bookId={bookId2}
+            reference={reference}
+            onReferenceSelected={onReferenceSelected}
+            usfmText={usfmTextPe}
+          />
+        </GridCard>
+        <GridCard title={`Org3: Titus (Controlled)`}>
+          <MyEditor
+            repoIdStr={"Xxx/en_tit"}
+            langIdStr={langIdStr}
+            bookId={bookId1}
+            reference={reference}
+            onReferenceSelected={onReferenceSelected}
+            usfmText={usfmText}
+          />
+        </GridCard>
+        <GridCard title={`Org4: Titus (Controlled)`}>
+          <MyEditor
+            repoIdStr={"LSG/fra_tit"}
+            langIdStr={langIdStrFra}
+            bookId={bookId1}
+            reference={reference}
+            onReferenceSelected={onReferenceSelected}
+            usfmText={usfmTextFra}
+          />
+        </GridCard>
+      </Grid>
+    </Container>
   )
 }
 
 <PkCacheProvider>
-  <Component key="1" />
+  <MyWorkspace/>
 </PkCacheProvider>
 
 ```
@@ -130,8 +217,4 @@ function Component () {
   )
 }  
 
-<PkCacheProvider>
-  <Component key="1" />
-</PkCacheProvider>
-
 ```