From b7f7a15b0d0259e94b29a07a7c2a1746320f98ad Mon Sep 17 00:00:00 2001 From: Akin909 Date: Sun, 22 Jul 2018 16:39:27 +0100 Subject: [PATCH 1/5] update regex to look for word boundaries, update f ont family if config changes --- browser/src/Editor/OniEditor/ColorHighlightLayer.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx index 2d0f0e6aa8..813222ccba 100644 --- a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx +++ b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx @@ -32,6 +32,7 @@ const ColorHighlight = withProps(styled.div).attrs({ color: ${p => (Color(p.color).dark() ? "white" : "black")}; font-family: ${p => p.fontFamily}; font-size: ${p => p.fontSize}; + white-space: nowrap; ` export default class ColorHighlightLayer implements Oni.BufferLayer { @@ -203,6 +204,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,12 +217,19 @@ export default class ColorHighlightLayer implements Oni.BufferLayer { return "CSS color highlight layer" } + private _updateFontFamily = (configChanges: Partial) => { + 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`) const colorNamesRegex = new RegExp("(" + colorNames.join("|") + ")") this._colorRegex = new RegExp( - colorNamesRegex.source + "|" + this._colorCodeRegex.source, + "\\b" + colorNamesRegex.source + "|" + this._colorCodeRegex.source + "\\b", "gi", ) } From 961f51ec58475676ad3cc0a73fb28b956cba6304 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Sun, 22 Jul 2018 21:07:11 +0100 Subject: [PATCH 2/5] remove unnecessary word boundaries from color rege x --- browser/src/Editor/OniEditor/ColorHighlightLayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx index 813222ccba..23904dca0f 100644 --- a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx +++ b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx @@ -229,7 +229,7 @@ export default class ColorHighlightLayer implements Oni.BufferLayer { const colorNames = this.CSS_COLOR_NAMES.map(name => `\\b${name}\\b`) const colorNamesRegex = new RegExp("(" + colorNames.join("|") + ")") this._colorRegex = new RegExp( - "\\b" + colorNamesRegex.source + "|" + this._colorCodeRegex.source + "\\b", + colorNamesRegex.source + "|" + this._colorCodeRegex.source, "gi", ) } From 81c5f1bf4375856cf96c36c3d9b5e20a5958ff78 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Mon, 23 Jul 2018 12:56:57 +0100 Subject: [PATCH 3/5] vertically center text inside color highlight add highlight component with component did catch if error remove higlights --- .../Editor/OniEditor/ColorHighlightLayer.tsx | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx index 23904dca0f..b977f6449e 100644 --- a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx +++ b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx @@ -24,7 +24,7 @@ const ColorHighlight = withProps(styled.div).attrs({ width: pixel(props.width), }), })` - display: flex; + display: block; justify-content: center; align-items: center; background-color: ${p => p.color}; @@ -32,9 +32,29 @@ const ColorHighlight = withProps(styled.div).attrs({ 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 */ white-space: nowrap; ` +interface IState { + error: Error +} + +class Highlight extends React.PureComponent { + public state: IState = { + error: null, + } + + public componentDidCatch(error: Error) { + this.setState({ error }) + } + + public render() { + const { error } = this.state + return !error && + } +} + export default class ColorHighlightLayer implements Oni.BufferLayer { public render = memoize((context: Oni.BufferLayerRenderContext) => ( <>{this._getColorHighlights(context)} @@ -263,7 +283,7 @@ export default class ColorHighlightLayer implements Oni.BufferLayer { const width = endPosition.pixelX - startPosition.pixelX return ( - {location.color} - + ) }) } From 42ce42a5606ca4de7e3a91b5b11372506ec3a520 Mon Sep 17 00:00:00 2001 From: Akin909 Date: Mon, 23 Jul 2018 20:53:20 +0100 Subject: [PATCH 4/5] add a background component to prevent underlying color from bleeding through --- .../Editor/OniEditor/ColorHighlightLayer.tsx | 49 ++++++++++++++----- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx index b977f6449e..cd3d71b314 100644 --- a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx +++ b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx @@ -6,40 +6,50 @@ 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(styled.div).attrs({ - style: (props: IProps) => ({ +const Background = withProps(styled.div).attrs({ + style: (props: IBackground) => ({ top: pixel(props.top), left: pixel(props.left), height: pixel(props.height), width: pixel(props.width), }), })` - display: block; - 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(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 */ - white-space: nowrap; + 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 { public state: IState = { error: null, @@ -50,8 +60,25 @@ class Highlight extends React.PureComponent { } public render() { - const { error } = this.state - return !error && + return ( + !this.state.error && ( + + + {this.props.children} + + + ) + ) } } From 598a7e5bb5aa4c5736784d4f476a3263042f485d Mon Sep 17 00:00:00 2001 From: Akin909 Date: Mon, 23 Jul 2018 21:31:10 +0100 Subject: [PATCH 5/5] replace data id on new component --- browser/src/Editor/OniEditor/ColorHighlightLayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx index cd3d71b314..20bd6d835e 100644 --- a/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx +++ b/browser/src/Editor/OniEditor/ColorHighlightLayer.tsx @@ -67,6 +67,7 @@ class Highlight extends React.PureComponent { left={this.props.left} height={this.props.height} width={this.props.width} + data-id="color-highlight" > {location.color}