from last -- test font color to determine which blend mode for clippings.

2 files changed, 19 insertions, 4 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 9b969081f..b5ca53a33 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -764,7 +764,7 @@ export function lightOrDark(color: any) {
     const col = DashColor(nonAlphaColor).rgb();
     const colsum = col.red() + col.green() + col.blue();
     if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return Colors.DARK_GRAY;
-    else return Colors.WHITE;
+    return Colors.WHITE;
 }
 
 export function getWordAtPoint(elem: any, x: number, y: number): string | undefined {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index e71a8fd5a..af20ff061 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -13,7 +13,7 @@ import { listSpec } from '../../../fields/Schema';
 import { Cast, ImageCast, NumCast, StrCast, WebCast } from '../../../fields/Types';
 import { ImageField, WebField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, getWordAtPoint, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, getWordAtPoint, lightOrDark, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
@@ -777,6 +777,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     };
 
+    @observable lighttext = false;
+
     @computed get urlContent() {
         setTimeout(
             action(() => {
@@ -788,7 +790,20 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         );
         const field = this.rootDoc[this.props.fieldKey];
         if (field instanceof HtmlField) {
-            return <span className="webBox-htmlSpan" ref={r => r && (this._scrollHeight = Number(getComputedStyle(r).height.replace('px', '')))} contentEditable onPointerDown={this.webClipDown} dangerouslySetInnerHTML={{ __html: field.html }} />;
+            return (
+                <span
+                    className="webBox-htmlSpan"
+                    ref={action((r: any) => {
+                        if (r) {
+                            this._scrollHeight = Number(getComputedStyle(r).height.replace('px', ''));
+                            this.lighttext = Array.from(r.children).some((c: any) => c instanceof HTMLElement && lightOrDark(getComputedStyle(c).color) !== Colors.WHITE);
+                        }
+                    })}
+                    contentEditable
+                    onPointerDown={this.webClipDown}
+                    dangerouslySetInnerHTML={{ __html: field.html }}
+                />
+            );
         }
         if (field instanceof WebField) {
             const url = this.layoutDoc[this.fieldKey + '_useCors'] ? Utils.CorsProxy(this._webUrl) : this._webUrl;
@@ -938,7 +953,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 style={{
                     transform: `scale(${this.zoomScaling()})  translate(${-NumCast(this.layoutDoc.freeform_panX)}px, ${-NumCast(this.layoutDoc.freeform_panY)}px)`,
                     height: Doc.NativeHeight(this.Document) || undefined,
-                    mixBlendMode: this._url ? 'multiply' : 'hard-light',
+                    mixBlendMode: this._url || !this.lighttext ? 'multiply' : 'hard-light',
                 }}
                 ref={this._annotationLayer}>
                 {this.inlineTextAnnotations