fix: support multiline phrase highlighting

defmethodinc · Jan 29, 2021 · 3d7281c · 3d7281c
1 parent bfd2ae0
commit 3d7281c
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/src/components/Warning.js b/src/components/Warning.js
@@ -55,19 +55,19 @@ export const calculatePosition = (coords) => {
 
 export default function Warning(props) {
   const { parentNode, rangeToHighlight } = props.value;
-  const warningStyle = highlightStyles(parentNode, rangeToHighlight);
+  const warningStyles = highlightStyles(parentNode, rangeToHighlight);
   const coords = calculateCoords(parentNode, rangeToHighlight);
-  const position = calculatePosition(coords);
+  const positions = calculatePosition(coords);
 
-  return (
-    <div className="jns-warning">
-      <WarningHighlight
-        styles={warningStyle}
-        parent={parentNode}
-        keyword={props.value.keyword}
-        message={props.value.message}
-        position={position}
-      />
-    </div>
-  );
+  const highlights = warningStyles.map((style, index) => (
+    <WarningHighlight
+      key={positions[index]}
+      styles={style}
+      parent={parentNode}
+      keyword={props.value.keyword}
+      message={props.value.message}
+      position={positions[index]}
+    />
+  ));
+  return <div className="jns-warning">{highlights}</div>;
 }