merge dict lookup

Sefaria · May 18, 2022 · b616e6e · b616e6e
2 parents ba65db3 + cd2ce0f
commit b616e6e
Show file tree

Hide file tree

Showing 43 changed files with 2,614 additions and 1,884 deletions.
diff --git a/ConnectionsPanel.js b/ConnectionsPanel.js
@@ -79,6 +79,8 @@ class ConnectionsPanel extends React.PureComponent {
     openTopic:            PropTypes.func.isRequired,
   };
 
+  reloadRelated = () => this.props.loadRelated(this.props.sectionRef);
+
   render() {
     let recentFilters, filterIndex, listContents, loadContent, updateCat;
     switch (this.props.connectionsMode) {
@@ -284,7 +286,7 @@ class ConnectionsPanel extends React.PureComponent {
                 shareCurrentSegment={this.props.shareCurrentSegment}
                 reportError={this.props.reportError}
                 viewOnSite={this.props.viewOnSite}
-                reloadRelated={() => this.props.loadRelated(this.props.sectionRef)}
+                reloadRelated={this.reloadRelated}
               />
             );
           }

diff --git a/Hooks.js b/Hooks.js
@@ -139,3 +139,16 @@ export function useRtlFlexDir(lang, dir='row', reverse) {
   const langReverse = isRTL ^ reverse;  // rare situation where XOR makes sense
   return `${dir}${langReverse ? '-reverse' : ''}`;
 }
+
+export function useRenderersProps (onPressATag) {
+  /**
+   * Used for the `renderersProps` prop of `RenderHTML`. Currently only supports setting a-tag onPress.
+   * @param {*} onPressATag function to run when pressing a-tag
+   * @returns 
+   */
+  return useMemo(() => {
+    return {
+      a: { onPress: (event, url) => { onPressATag(url); } }
+    };
+  }, [onPressATag]);
+};
diff --git a/LexiconBox.js b/LexiconBox.js
@@ -1,8 +1,4 @@
 'use strict';
-/** 
- * TODO: Haven't refactored HTMLView to RenderHTML yet because lexicon doesn't work with RenderHTML by default
- * 
-*/
 
 import React, {useContext, useState, useEffect} from 'react';
 import {
@@ -11,15 +7,17 @@ import {
   ScrollView,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import RenderHtml from 'react-native-render-html';
 import {
   LoadingView,
   OrderedList,
+  SimpleHTMLView,
   SText,
+  CSS_CLASS_STYLES,
 } from './Misc';
 import styles from './Styles.js';
 import strings from './LocalizedStrings';
 import { GlobalStateContext, getTheme } from './StateManager';
+import { HTMLContentModel, HTMLElementModel } from 'react-native-render-html';
 
 const shouldActivate = selectedWords => {
   if(selectedWords && selectedWords.match(/[\s:\u0590-\u05ff.]+/)) {
@@ -94,36 +92,33 @@ LexiconBox.propTypes = {
 };
 
 /*
-  Component that renders HTML content with ability to click on inline refs / external links
-  Needs to render HTML using nested HTMLView in order to distinguish font styles for English and Hebrew
+  Renders HTML content with ability to click on inline refs / external links
 */
 
 const LexiconText = ({ value, handleOpenURL, lang, fSize, style }) => {
   style = style || {};
   return (
-    <HTMLView
-      value={value}
-      onLinkPress={handleOpenURL}
-      stylesheet={styles}
-      RootComponent={Text}
-      TextComponent={({children, style, textComponentProps, ...props}) => (
-        <HTMLView
-          value={Sefaria.util.getDisplayableHTML(children, lang)}
-          textComponentProps={textComponentProps}
-          {...props}
-        />
-      )}
-      textComponentProps={{
-        stylesheet: styles,
-        RootComponent: Text,
-        TextComponent: SText,
-        textComponentProps: {
-          lang,
-          style: {...(lang === 'hebrew' ? styles.he : styles.en), fontSize: fSize, ...style},  // note, not including theme.text here because it doesn't work with blue a tags. Decided to forgo theme for blue a tags.
-          lineMultiplier: 1.15
+    <SimpleHTMLView
+      text={value}
+      lang={lang}
+      onPressATag={handleOpenURL}
+      renderers={{span: ({ TDefaultRenderer, ...props }) => {
+        if (props.tnode.init.textNode) {
+          const css_styles = props.tnode.classes.map(cls => CSS_CLASS_STYLES[cls]);
+          return (
+            <SText
+              lang={lang}
+              lineMultiplier={1.15}
+              style={[(lang === 'hebrew' ? styles.he : styles.en), { fontSize: fSize }, style].concat(css_styles)}  // note, not including theme.text here because it doesn't work with blue a tags. Decided to forgo theme for blue a tags.
+            >
+              {props.tnode.init.textNode.data}
+            </SText>
+          );
         }
-      }}
-
+        return (
+          <TDefaultRenderer {...props} />
+        );
+      }}}
     />
   );
 }
@@ -152,16 +147,22 @@ const LexiconAttribution = ({ entry, handleOpenURL }) => {
   const fullContent = [
     lexicon_dtls['source_url'] ? `<a href="${lexicon_dtls["source_url"]}">${sourceContent}</a>` : `${sourceContent}\n`,
     lexicon_dtls['attribution_url'] ? `<a href="${lexicon_dtls['attribution_url']}">${attributionContent}</a>` : attributionContent,
-  ].join('');
+  ].join('<br>');
   return (
-      <HTMLView
-        value={fullContent}
-        stylesheet={{...styles, ...{a: theme.quaternaryText}}}
-        onLinkPress={handleOpenURL}
-        textComponentProps={{
-          style: {fontSize: englishFontSize, ...theme.quaternaryText}
-        }}
-      />
+    <SimpleHTMLView
+      text={fullContent}
+      onPressATag={handleOpenURL}
+      extraStyles={[styles.enInt, {fontSize: englishFontSize}, theme.quaternaryText]}
+      customHTMLElementModels={{
+        'a': HTMLElementModel.fromCustomModel({
+          tagName: 'a',
+          mixedUAStyles: {
+            textDecorationLine: 'underline',
+          },
+          contentModel: HTMLContentModel.mixed
+        })
+      }}
+    />
   );
 };
 

diff --git a/Misc.js b/Misc.js
@@ -20,7 +20,7 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import { GlobalStateContext, DispatchContext, STATE_ACTIONS, themeStr, getTheme } from './StateManager';
-import { useGlobalState } from './Hooks';
+import { useGlobalState, useRenderersProps } from './Hooks';
 import Sefaria from './sefaria';
 import styles from './Styles.js';
 import strings from './LocalizedStrings';
@@ -1102,9 +1102,10 @@ SimpleInterfaceBlock.propTypes = {
   extraStyles: PropTypes.array,
 };
 
-const SimpleHTMLView = ({text, lang, extraStyles=[], ...renderHTMLProps}) => {
+const SimpleHTMLView = ({text, lang, extraStyles=[], onPressATag, ...renderHTMLProps}) => {
   const { themeStr } = useContext(GlobalStateContext);
   const { width } = useWindowDimensions();
+  const renderersProps = useRenderersProps(onPressATag);
   const theme = getTheme(themeStr);
   const html = Sefaria.util.getDisplayableHTML(text, lang);
   const textStyle = [lang == "hebrew" ? styles.hebrewText : styles.englishText, theme.text].concat(extraStyles);
@@ -1115,6 +1116,7 @@ const SimpleHTMLView = ({text, lang, extraStyles=[], ...renderHTMLProps}) => {
       defaultTextProps={{ style: textStyle }}
       classesStyles={CSS_CLASS_STYLES}
       systemFonts={SYSTEM_FONTS}
+      renderersProps={renderersProps}
       {...renderHTMLProps}
     />
   );

diff --git a/ReaderApp.js b/ReaderApp.js
@@ -143,7 +143,9 @@ class ReaderApp extends React.PureComponent {
         ReaderDisplayOptionsMenuVisible: false,
         dictLookup: null,
         overwriteVersions: true, // false when you navigate to a text but dont want the current version to overwrite your sticky version
-    };
+        highlightedWordID: null,
+        highlightedWordSegmentRef: null,
+      };
     this.NetInfoEventListener = () => {};  // calling the event listener unsubcribes, initialize to a null method
 
   }
@@ -1202,6 +1204,10 @@ class ReaderApp extends React.PureComponent {
     });
   };
 
+  setHighlightedWord = (wordID, segmentRef) => {
+    this.setState({ highlightedWordID: wordID, highlightedWordSegmentRef: segmentRef });
+  };
+
   openTextTocDirectly = (title) => {
 
     // used to open text toc witout going throught the reader
@@ -1317,7 +1323,7 @@ class ReaderApp extends React.PureComponent {
   };
 
   closeLinkCat = () => {
-    this.setState({connectionsMode: null});
+    this.setState({connectionsMode: null, highlightedWordID: null, highlightedWordSegmentRef: null});
   };
 
   updateLinkSummary = (section, segment) => {
@@ -2078,7 +2084,10 @@ class ReaderApp extends React.PureComponent {
                   setDictionaryLookup={this.setDictionaryLookup}
                   shareCurrentSegment={this.shareCurrentSegment}
                   getDisplayedText={this.getDisplayedText}
-                  vowelToggleAvailable={vowelToggleAvailable}              
+                  vowelToggleAvailable={vowelToggleAvailable}
+                  highlightedWordID={this.state.highlightedWordID}
+                  highlightedWordSegmentRef={this.state.highlightedWordSegmentRef}
+                  setHighlightedWord={this.setHighlightedWord}            
                 />
             </View> }
 

diff --git a/TextColumn.js b/TextColumn.js
@@ -129,13 +129,15 @@ class TextColumn extends React.PureComponent {
         data: props.data[0].map((source, segmentNumber) => {
           let type = null;
           const sheetNodeRef = `${sheetRef}:${segmentNumber}`;
+          const highlightedWordID = props.highlightedWordSegmentRef === sheetNodeRef && props.highlightedWordID;
           const row = {
             ref: sheetNodeRef,
             data: {
               content: source,
               sectionIndex: 0,
               rowIndex: segmentNumber,
               highlight: props.textListVisible && props.segmentRef == sheetNodeRef,
+              highlightedWordID,
             },
             changeString: sheetNodeRef,
           };
@@ -194,14 +196,16 @@ class TextColumn extends React.PureComponent {
           }
           const rowContent = data[sectionIndex][i];
           const highlight = offsetRef == rowID || (props.textListVisible && props.segmentRef == rowID);
-          const changeString = `${rowID}|${!!rowContent.links && rowContent.links.length}|${highlight}|${this.props.fontSize}`;
+          const highlightedWordID = props.highlightedWordSegmentRef === rowID && props.highlightedWordID;
+          const changeString = `${rowID}|${!!rowContent.links && rowContent.links.length}|${highlight}|${this.props.fontSize}|${highlightedWordID}`;
           let rowData = this.dataSourceHash[changeString];
           if (!rowData) {
             rowData = {
               content: rowContent, // Store data in `content` so that we can manipulate other fields without manipulating the original data
               sectionIndex,
               rowIndex: i,
               highlight,
+              highlightedWordID,
             };
             this.dataSourceHash[changeString] = rowData;           
           } else {
@@ -296,6 +300,8 @@ class TextColumn extends React.PureComponent {
 
       }
 
+    } else {
+      this.props.setHighlightedWord(null);
     }
     this.props.textSegmentPressed(section, segment, segmentRef, true, onlyOpen);
   };
@@ -318,7 +324,9 @@ class TextColumn extends React.PureComponent {
         this.props.linksLoaded !== prevProps.linksLoaded ||
         this.props.textToc !== prevProps.textToc ||
         (this.props.sheet && this.props.sheet.id) !== (prevProps.sheet && prevProps.sheet.id) ||
-        this.props.showAliyot !== prevProps.showAliyot) {
+        this.props.showAliyot !== prevProps.showAliyot ||
+        this.props.highlightedWordID !== prevProps.highlightedWordID ||
+        this.props.highlightedWordSegmentRef !== prevProps.highlightedWordSegmentRef) {
       // Only update dataSource when a change has occurred that will result in different data
       //TODO how to optimize this function when fontSize is changing?
       this.performUpdate(prevProps);
@@ -432,7 +440,7 @@ class TextColumn extends React.PureComponent {
   };
 
   onTopReached = () => {
-    if (this.props.loadingTextHead === true || !this.props.prev || this.state.jumpState.jumping) {
+    if (this.props.loadingTextHead === true || !this.props.prev || this.state.jumpState.jumping || !!this.props.sheet) {
       //already loading tail, or nothing above
       return;
     }
@@ -541,6 +549,7 @@ class TextColumn extends React.PureComponent {
           getDisplayedText={this.props.getDisplayedText}
           vowelToggleAvailable={this.props.vowelToggleAvailable}
           isSheet={this.props.isSheet}
+          setHighlightedWord={this.props.setHighlightedWord}
         />
       </View>
     );

diff --git a/TextRange.js b/TextRange.js
@@ -28,6 +28,7 @@ const TextRange = React.memo(({
   getDisplayedText,
   vowelToggleAvailable,
   isSheet,
+  setHighlightedWord,
 }) => {
   const { themeStr, textLanguage, biLayout, fontSize, vocalization } = useContext(GlobalStateContext);
 
@@ -38,8 +39,8 @@ const TextRange = React.memo(({
 
   let enText = rowData.content.text || "";
   let heText = Sefaria.util.applyVocalizationSettings(rowData.content.he, vocalization, vowelToggleAvailable) || "";
-  enText = Sefaria.util.getDisplayableHTML(enText, 'english', isSheet);
-  heText = Sefaria.util.getDisplayableHTML(heText, 'hebrew', isSheet);
+  enText = Sefaria.util.getDisplayableHTML(enText, 'english', isSheet, false);
+  heText = Sefaria.util.getDisplayableHTML(heText, 'hebrew', isSheet, true);
   let numLinks = rowData.content.links ? rowData.content.links.length : 0;
 
   const textLanguageWithContent = Sefaria.util.getTextLanguageWithContent(textLanguage, enText, heText);
@@ -112,6 +113,8 @@ const TextRange = React.memo(({
                   handleOpenURL={handleOpenURL}
                   shareCurrentSegment={shareCurrentSegment}
                   getDisplayedText={getDisplayedText}
+                  setHighlightedWord={setHighlightedWord}
+                  highlightedWordID={rowData.highlightedWordID}
                 />
               </View>
             ) : null
@@ -134,6 +137,8 @@ const TextRange = React.memo(({
                   handleOpenURL={handleOpenURL}
                   shareCurrentSegment={shareCurrentSegment}
                   getDisplayedText={getDisplayedText}
+                  setHighlightedWord={setHighlightedWord}
+                  highlightedWordID={rowData.highlightedWordID}
                 />
               </View>
             ) : null