diff --git a/Public/css/highlight.css b/Public/css/highlight.css index 49b5518..09c254f 100644 --- a/Public/css/highlight.css +++ b/Public/css/highlight.css @@ -85,8 +85,8 @@ color: #c0c; } -.exp-error { - background: #d22; +.exp-syntax-error { + border-top: solid 2px #d22; } span.match-char { diff --git a/Public/js/views/expression_field.js b/Public/js/views/expression_field.js index 52898f2..17786ff 100644 --- a/Public/js/views/expression_field.js +++ b/Public/js/views/expression_field.js @@ -53,7 +53,7 @@ export class ExpressionField extends EventDispatcher { this.highlighter.clearError(); } - tippy(".exp-error", { + tippy(".exp-syntax-error", { allowHTML: true, animation: false, placement: "bottom", diff --git a/Public/js/views/expression_highlighter.js b/Public/js/views/expression_highlighter.js index 385887c..4dc4a8d 100644 --- a/Public/js/views/expression_highlighter.js +++ b/Public/js/views/expression_highlighter.js @@ -74,17 +74,20 @@ export default class ExpressionHighlighter extends EventDispatcher { error.location.end - error.location.start ); const widget = document.createElement("span"); - widget.className = `${pre}-error`; + widget.className = `${pre}-syntax-error`; - widget.style.height = `2px`; + widget.style.height = `5px`; widget.style.zIndex = "10"; - widget.setAttribute("data-tippy-content", error.message); + widget.setAttribute( + "data-tippy-content", + `${error.behavior}: ${error.message}` + ); editor.addWidget(location.startPos, widget); const startCoords = editor.charCoords(location.startPos, "local"); const endCoords = editor.charCoords(location.endPos, "local"); widget.style.left = `${startCoords.left + 1}px`; - widget.style.top = `${startCoords.bottom}px`; + widget.style.top = `${startCoords.bottom - 1}px`; widget.style.width = `${endCoords.left - startCoords.left - 2}px`; this.widgets.push(widget);