remove default properties

introduce rendering per Chapter and Verse

packages/base-core/src/components/Editor.jsx

@@ -15,16 +15,17 @@ function Editor({
   epiteleteHtml,
   sourceId,
   bookId,
-  verbose,
+  verbose = false,
   onRenderToolbar,
   reference,
   onReferenceSelected,
   scrollLock,
   scrollDelay = 200,
   children,
   defaultOptions,
+  ...props
 }) {
-  const props = {
+  const editorProps = {
     sourceId,
     onSave,
     epiteleteHtml,
@@ -36,6 +37,7 @@ function Editor({
     scrollDelay,
     children,
     defaultOptions,
+    ...props
   };
   const components = {
     section: Section,
@@ -44,7 +46,7 @@ function Editor({
     editorGraft: GraftPopup,
   };
   return (
-    <EditorCacheProvider{...props}>
+    <EditorCacheProvider{...editorProps}>
       <EditorToolbar showToggles={false} onRenderToolbar={onRenderToolbar} />
       <EditorMain components={components} />
     </EditorCacheProvider>
@@ -79,6 +81,7 @@ function Editor({
       editable: PropTypes.bool,
       preview: PropTypes.bool,
       locked: PropTypes.bool,
+      stripAlignment: PropTypes.bool,
     }),
     /** Method to call when save button is pressed */
     onSave: PropTypes.func,
@@ -88,8 +91,4 @@ function Editor({
     onReferenceSelected: PropTypes.func,
   };
 
-Editor.defaultProps = {
-  verbose: false
-}
-
 export default Editor;

packages/base-core/src/components/PrintDrawer.jsx

@@ -32,10 +32,10 @@ export default function PrintDrawer({
   openPrintDrawer,
   onClosePrintDrawer,
   onRenderContent,
-  canChangeAtts,
-  canChangeColumns,
+  canChangeAtts = false,
+  canChangeColumns = false,
 }) {
-
+  
   const allNames = [
     'wordAtts',
     'titles',
@@ -206,8 +206,3 @@ PrintDrawer.propTypes = {
   canChangeAtts: PropTypes.bool,
   canChangeColumns: PropTypes.bool
 }
-
-PrintDrawer.defaultProps = {
-  canChangeAtts: false,
-  canChangeColumns: false
-}

packages/base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oce-editor-tools/base",
   "description": "A React Component Library for editing PERF.",
-  "version": "0.1.31-beta.10",
+  "version": "0.1.31-beta.15",
   "homepage": "https://oce-editor-tools-base.netlify.app/",
   "license": "MIT",
   "repository": {

packages/base/src/components/BookPreview.jsx

@@ -1,20 +1,25 @@
+
 import React from 'react'
 import PropTypes from 'prop-types'
 import useUsfmPreviewRenderer from "../hooks/useUsfmPreviewRenderer"
 
 export default function BookPreview(props) {
   const {
     usfmText,
-    verbose, 
+    verbose = false,
     extInfo, 
+    bcvFilter,
     renderFlags,
+    ...extraProps
   } = props
 
   const { renderedData, ready } = useUsfmPreviewRenderer({
     usfmText,
     verbose, 
     extInfo, 
+    bcvFilter,
     renderFlags,
+    ...extraProps
   })
 
   return (
@@ -29,12 +34,11 @@ BookPreview.propTypes = {
   usfmText: PropTypes.string,
   /** Rendering flags */
   renderFlags: PropTypes.objectOf(PropTypes.bool),
+  /** BCV Filter - limit which verses to display */
+  bcvFilter: PropTypes.any,
   /** Extended info - to be displayed for some verses */
   extInfo: PropTypes.any,
   /** Whether to show extra info in the js console */
   verbose: PropTypes.bool,
 }
 
-BookPreview.defaultProps = {
-  verbose: false,
-}

packages/base/src/components/BookPreview.md

@@ -1,9 +1,8 @@
 # BookPreview demo
 
-The demo demonstrates the BookPreview component.
-
 ```js
-import { usfmText } from '../data/tit.en.ult.usfm.js';
+import { usfmText } from '../data/John.usfm.js'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 
 function Component () {
   const renderFlags = {
@@ -12,9 +11,89 @@ function Component () {
     showVersesLabels: true,
   };
 
+  const onRenderItem = (props) => {
+    const {verseId, extInfo} = props
+    const {messageStr,color} = extInfo
+    return (
+      <span
+        key={"update-from-master"+verseId}
+        variant="contained"
+        value="update-from-master"
+        color={color}
+        title={messageStr}
+        aria-label={verseId}
+        style={{ cursor: 'pointer' }}
+      ><ErrorOutlineIcon/> Conflict! </span>
+    )
+  }
+
+  const bcvFilter = {
+    book: { 
+      jhn: {
+        ch: { 
+          1: { 
+            v: { 1: {}, 2: {}, 3: {}, 6: {}, 7: {}, 8: {}, 9: {}, 10: {}, 20: {}, 21: {} } 
+          },
+          2: {} 
+        } 
+      } 
+    } 
+  }
+
+  const extInfo = {
+    book: {
+      jhn: {
+        ch: {
+          1: { 
+              v: {
+                7: { 
+                  color: 'success',
+                  onRenderItem,
+                  messageStr: `Existing changes:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat ex a varius. Fusce varius ac nisl.
+Your edited text: 
+Vivamus ante ligula, tempor vel suscipit nec, elementum vel lectus. Nulla porttitor `
+                },
+                8: { 
+                  color: 'danger',
+                  onRenderItem,
+                  messageStr: `Existing changes:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat ex a varius. Fusce varius ac nisl.
+Your edited text: 
+Vivamus ante ligula, tempor vel suscipit nec, elementum vel lectus. Nulla porttitor `
+                },
+                10: { 
+                  color: 'primary',
+                  onRenderItem,
+                  messageStr: `Existing changes:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat ex a varius. Fusce varius ac nisl.
+Your edited text: 
+Vivamus ante ligula, tempor vel suscipit nec, elementum vel lectus. Nulla porttitor `
+                },
+              } 
+          },
+          2: { 
+              v: {
+                1: { 
+                  color: 'danger',
+                  onRenderItem,
+                  messageStr: `Existing changes:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum consequat ex a varius. Fusce varius ac nisl.
+Your edited text: 
+Vivamus ante ligula, tempor vel suscipit nec, elementum vel lectus. Nulla porttitor `
+                },
+              } 
+          },
+        },
+      },
+    },
+  }
+
   const previewProps = {
     usfmText,
     renderFlags,
+    bcvFilter,
+    extInfo,
     verbose: true,
   }
 

packages/base/src/components/Buttons/ButtonSave.js

@@ -1,12 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import ButtonHeadless from './ButtonHeadless';
 import { useEditorContext } from '../../context/EditorCacheProvider';
+import { readOptions } from '../../constants';
 
 export default function ButtonSave({ component, children, ...props }) {
   const {
-    state: { htmlPerf, epiteleteHtml, bookCode },
+    state,
     actions: { onSave }
   } = useEditorContext();
+  const { htmlPerf, epiteleteHtml, bookCode, options } = state;
+
   const [canSave, setCanSave] = useState(false);
   useEffect(
     () => {
@@ -18,12 +21,12 @@ export default function ButtonSave({ component, children, ...props }) {
   );
   const save = useCallback(
     async (e) => {
-      const usfmText = await epiteleteHtml.readUsfm(bookCode);
+      const usfmText = await epiteleteHtml.readUsfm(bookCode, options?.stripAlignment ? readOptions : undefined );
       epiteleteHtml.savePerf(bookCode);
       setCanSave(false);
       onSave && onSave(bookCode, usfmText);
     },
-    [epiteleteHtml, bookCode, onSave]
+    [epiteleteHtml, bookCode, onSave, options.stripAlignment]
   );
   return (
     <ButtonHeadless

packages/base/src/components/useEditorOptions.js

@@ -11,6 +11,7 @@ export function useEditorOptions(defaultOptions) {
       editable: true,
       preview: true,
       locked: false,
+      stripAlignment: false,
       ...defaultOptions,
     }),
     [defaultOptions]