fixed pdf boxes to be active in lightboxview by fixing lightboxview docview to be observable so that IsLightboxDoc's will invalidate. made webBox's content 'relative' so that linksButton is in correct place. changed text highlight color to orange for webboxes

5 files changed, 34 insertions, 8 deletions

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index cb5094f4b..e3e8403df 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -39,7 +39,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
     private static _savedState: Opt<{ panX: Opt<number>; panY: Opt<number>; scale: Opt<number>; scrollTop: Opt<number> }>;
     private static _history: Opt<{ doc: Doc; target?: Doc }[]> = [];
     @observable private static _future: Opt<Doc[]> = [];
-    private static _docView: Opt<DocumentView>;
+    @observable private static _docView: Opt<DocumentView>;
     private static openInTabFunc: any;
     static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<{ panX: Opt<number>; panY: Opt<number>; scale: Opt<number>; scrollTop: Opt<number> }> }[] = [];
     @action public static SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc) {
@@ -98,7 +98,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
         return true;
     }
     public static IsLightboxDocView(path: DocumentView[]) {
-        return path.includes(this._docView!);
+        return (path ?? []).includes(this._docView!);
     }
     @computed get leftBorder() {
         return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 001d9a5a6..c7001f846 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -18,6 +18,7 @@ import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent';
 import { Colors } from '../global/globalEnums';
+import { LightboxView } from '../LightboxView';
 import { CreateImage } from '../nodes/WebBoxRenderer';
 import { PDFViewer } from '../pdf/PDFViewer';
 import { SidebarAnnos } from '../SidebarAnnos';
@@ -441,7 +442,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
     }
 
-    isPdfContentActive = () => this.isAnyChildContentActive() || this.props.isSelected();
+    isPdfContentActive = () => this.isAnyChildContentActive() || this.props.isSelected() || (this.props.renderDepth === 0 && LightboxView.IsLightboxDocView(this.props.docViewPath()));
     @computed get renderPdfView() {
         TraceMobx();
         const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 85986ff27..a41f66ef0 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -5,7 +5,7 @@
     width: 100%;
     top: 0;
     left: 0;
-    position: absolute;
+    position: relative;
     display: flex;
 
     .webBox-sideResizer {
@@ -182,6 +182,12 @@
                 height: 100%;
                 position: absolute;
                 top: 0;
+                body {
+                    ::selection {
+                        color: white;
+                        background: orange;
+                    }
+                }
             }
         }
 
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index b086b7ffb..e7b188961 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -366,12 +366,31 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     iframeClick = () => this._iframeClick;
     iframeScaling = () => 1 / this.props.ScreenToLocalTransform().Scale;
 
+    addStyleSheet(document: any, styleType: string = 'text/css') {
+        const style = document.createElement('style');
+        style.type = styleType;
+        const sheets = document.head.appendChild(style);
+        return (sheets as any).sheet;
+    }
+    addStyleSheetRule(sheet: any, selector: any, css: any, selectorPrefix = '.') {
+        const propText =
+            typeof css === 'string'
+                ? css
+                : Object.keys(css)
+                      .map(p => p + ':' + (p === 'content' ? "'" + css[p] + "'" : css[p]))
+                      .join(';');
+        return sheet.insertRule(selectorPrefix + selector + '{' + propText + '}', sheet.cssRules.length);
+    }
+
     @action
     iframeLoaded = (e: any) => {
         const iframe = this._iframe;
         if (this._initialScroll !== undefined) {
             this.setScrollPos(this._initialScroll);
         }
+
+        this.addStyleSheetRule(this.addStyleSheet(this._iframe?.contentDocument), '::selection', { color: 'white', background: 'orange' }, '');
+
         let requrlraw = decodeURIComponent(iframe?.contentWindow?.location.href.replace(Utils.prepend('') + '/corsProxy/', '') ?? this._url.toString());
         if (requrlraw !== this._url.toString()) {
             if (requrlraw.match(/q=.*&/)?.length && this._url.toString().match(/q=.*&/)?.length) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2625b34d2..6db199149 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -603,20 +603,20 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { background: 'moccasin' });
         }
         if (highlights.indexOf('Todo Items') !== -1) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-' + 'todo', { outline: 'black solid 1px' });
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-todo', { outline: 'black solid 1px' });
         }
         if (highlights.indexOf('Important Items') !== -1) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-' + 'important', { 'font-size': 'larger' });
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-important', { 'font-size': 'larger' });
         }
         if (highlights.indexOf('Bold Text') !== -1) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner-selected .ProseMirror strong > span', { 'font-size': 'large' }, '');
             addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner-selected .ProseMirror :not(strong > span)', { 'font-size': '0px' }, '');
         }
         if (highlights.indexOf('Disagree Items') !== -1) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-' + 'disagree', { 'text-decoration': 'line-through' });
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-disagree', { 'text-decoration': 'line-through' });
         }
         if (highlights.indexOf('Ignore Items') !== -1) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-' + 'ignore', { 'font-size': '1' });
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-ignore', { 'font-size': '1' });
         }
         if (highlights.indexOf('By Recent Minute') !== -1) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { opacity: '0.1' });