Feature/Color-highlight improvements (#2447)

* update regex to look for word boundaries, update f

ont family if config changes

* remove unnecessary word boundaries from color rege

x

* vertically center text inside color highlight add highlight component
with component did catch if error remove higlights

* add a background component to prevent underlying color from bleeding through

* replace data id on new component

browser/src/Editor/OniEditor/ColorHighlightLayer.tsx

@@ -6,34 +6,83 @@ import * as React from "react"
 
 import styled, { pixel, withProps } from "../../UI/components/common"
 
-interface IProps {
+interface IBackground {
     top: number
     left: number
     height: number
     width: number
+}
+
+interface IHighlight {
     color: string
     fontFamily: string
+    height: number
     fontSize: string
 }
 
-const ColorHighlight = withProps<IProps>(styled.div).attrs({
-    style: (props: IProps) => ({
+const Background = withProps<IBackground>(styled.div).attrs({
+    style: (props: IBackground) => ({
         top: pixel(props.top),
         left: pixel(props.left),
         height: pixel(props.height),
         width: pixel(props.width),
     }),
 })`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: ${p => p.color};
+    background-color: ${p => p.theme["editor.background"]};
     position: absolute;
+    white-space: nowrap;
+`
+
+const HighlightSpan = withProps<IHighlight>(styled.div)`
+    display: block;
+    height: 100%;
+    width: 100%;
     color: ${p => (Color(p.color).dark() ? "white" : "black")};
     font-family: ${p => p.fontFamily};
     font-size: ${p => p.fontSize};
+    line-height: ${p => pixel(p.height + 5)}; /* vertically center text inside the highlight */
+    background-color: ${p => p.color};
 `
 
+interface IState {
+    error: Error
+}
+
+type IProps = IHighlight & IBackground
+
+class Highlight extends React.PureComponent<IProps, IState> {
+    public state: IState = {
+        error: null,
+    }
+
+    public componentDidCatch(error: Error) {
+        this.setState({ error })
+    }
+
+    public render() {
+        return (
+            !this.state.error && (
+                <Background
+                    top={this.props.top}
+                    left={this.props.left}
+                    height={this.props.height}
+                    width={this.props.width}
+                    data-id="color-highlight"
+                >
+                    <HighlightSpan
+                        fontFamily={this.props.fontFamily}
+                        fontSize={this.props.fontSize}
+                        height={this.props.height}
+                        color={this.props.color}
+                    >
+                        {this.props.children}
+                    </HighlightSpan>
+                </Background>
+            )
+        )
+    }
+}
+
 export default class ColorHighlightLayer implements Oni.BufferLayer {
     public render = memoize((context: Oni.BufferLayerRenderContext) => (
         <>{this._getColorHighlights(context)}</>
@@ -203,6 +252,7 @@ export default class ColorHighlightLayer implements Oni.BufferLayer {
     constructor(private _config: Oni.Configuration) {
         this._fontSize = this._config.getValue("editor.fontSize")
         this._fontFamily = this._config.getValue("editor.fontFamily")
+        this._config.onConfigurationChanged.subscribe(this._updateFontFamily)
 
         this._constructRegex()
     }
@@ -215,6 +265,13 @@ export default class ColorHighlightLayer implements Oni.BufferLayer {
         return "CSS color highlight layer"
     }
 
+    private _updateFontFamily = (configChanges: Partial<Oni.ConfigurationValues>) => {
+        const fontFamilyChanged = Object.keys(configChanges).includes("editor.fontFamily")
+        if (fontFamilyChanged) {
+            this._fontFamily = configChanges["editor.fontFamily"]
+        }
+    }
+
     private _constructRegex() {
         // Construct a regex checking for both color codes and all the different css colornames
         const colorNames = this.CSS_COLOR_NAMES.map(name => `\\b${name}\\b`)
@@ -254,18 +311,17 @@ export default class ColorHighlightLayer implements Oni.BufferLayer {
 
                             const width = endPosition.pixelX - startPosition.pixelX
                             return (
-                                <ColorHighlight
+                                <Highlight
                                     width={width}
                                     left={startPosition.pixelX}
                                     top={startPosition.pixelY}
                                     height={context.fontPixelHeight}
                                     fontSize={this._fontSize}
                                     fontFamily={this._fontFamily}
                                     color={location.color.toLowerCase()}
-                                    data-id="color-highlight"
                                 >
                                     {location.color}
-                                </ColorHighlight>
+                                </Highlight>
                             )
                         })
                     }