Fix highlighter behavior on mobile

component-catalog/index.html

@@ -24,6 +24,7 @@
           var highlighter = document.getElementById(id);
           if (!id || !highlighter) {
             // in a real application, report an error at this point.
+            console.log("highlighter not found", id);
             return;
           }
 
@@ -50,11 +51,12 @@
           var data;
 
           if (realTarget) {
-            data = realTarget.getAttribute("data-highlighter-item-index"); // each word has a data attribute with its index.
+            // each word has a data attribute with its index.
+            data = realTarget.getAttribute("data-highlighter-item-index");
           }
 
-          // we only want to be informed for touchmove-events in the current highlighter.
-          if (data && id === realTarget.parentNode.id) {
+          // we only want to be informed for touchmove-events in highlightables
+          if (data) {
             app.ports.highlighterOnTouch.send([type, id, parseInt(data, 10)]);
           }
         };

component-catalog/src/Examples/Highlighter.elm

@@ -50,7 +50,13 @@ example =
     , version = version
     , init = init
     , update = update
-    , subscriptions = \_ -> Sub.map HighlighterMsg subscriptions
+    , subscriptions =
+        \_ ->
+            Sub.batch
+                [ Sub.map HighlighterMsg subscriptions
+                , Sub.map OverlappingHighlighterMsg subscriptions
+                , Sub.map FoldHighlighterMsg subscriptions
+                ]
     , preview =
         [ div [ css [ Fonts.baseFont, Css.lineHeight (Css.num 2), Css.Global.children [ Css.Global.p [ Css.margin Css.zero ] ] ] ]
             [ Highlighter.static
@@ -196,6 +202,8 @@ example =
                     , Css.lineHeight (Css.num 1.75)
                     , Fonts.ugFont
                     ]
+                , Html.Styled.Attributes.id state.foldHighlightsState.id
+                , Html.Styled.Attributes.class "highlighter-container"
                 ]
                 [ viewFoldHighlights state.foldHighlightsState
                     |> map FoldHighlighterMsg
@@ -806,10 +814,15 @@ update msg state =
 
         FoldHighlighterMsg highlighterMsg ->
             let
-                ( highlighterModel, highlighterCmd, _ ) =
+                ( highlighterModel, highlighterCmd, intent ) =
                     Highlighter.update highlighterMsg state.foldHighlightsState
             in
-            ( { state | foldHighlightsState = highlighterModel }, Cmd.map FoldHighlighterMsg highlighterCmd )
+            ( { state | foldHighlightsState = highlighterModel }
+            , Cmd.batch
+                [ Cmd.map FoldHighlighterMsg highlighterCmd
+                , perform intent
+                ]
+            )
 
 
 perform : Highlighter.Intent -> Cmd msg

src/Nri/Ui/Highlighter/V5.elm

@@ -28,6 +28,7 @@ Highlighter provides a view/model/update to display a view to highlight text and
   - Added `FoldState`, `initFoldState`, `viewFoldHighlighter`, and `viewFoldStatic`
   - Exposed KeyboardMsg(..) to allow for fine-tuning keyboard interactions
   - Made keyboard selection use hinting state too
+  - Fixed mobile interaction bugs (see #1694)
 
 
 # Types
@@ -430,19 +431,23 @@ pointerEventToActions msg model =
         Ignored ->
             []
 
-        Move _ eventIndex ->
-            case model.mouseDownIndex of
-                Just downIndex ->
-                    [ MouseOver eventIndex
-                    , Hint downIndex eventIndex
-                    ]
+        Move targetId eventIndex ->
+            if Just model.id == targetId then
+                case model.mouseDownIndex of
+                    Just downIndex ->
+                        [ MouseOver eventIndex
+                        , Hint downIndex eventIndex
+                        ]
 
-                Nothing ->
-                    -- We're dealing with a touch move that hasn't been where
-                    -- the initial touch down was not over a highlightable
-                    -- region. We need to pretend like the first move into the
-                    -- highlightable region was actually a touch down.
-                    pointerEventToActions (Down eventIndex) model
+                    Nothing ->
+                        -- We're dealing with a touch move that hasn't been where
+                        -- the initial touch down was not over a highlightable
+                        -- region. We need to pretend like the first move into the
+                        -- highlightable region was actually a touch down.
+                        pointerEventToActions (Down eventIndex) model
+
+            else
+                []
 
         Over eventIndex ->
             case model.mouseDownIndex of
@@ -467,29 +472,33 @@ pointerEventToActions msg model =
             , Hint eventIndex eventIndex
             ]
 
-        Up _ ->
-            let
-                save marker =
-                    case ( model.mouseOverIndex, model.mouseDownIndex ) of
-                        ( Just overIndex, Just downIndex ) ->
-                            if overIndex == downIndex then
-                                [ Toggle downIndex marker ]
+        Up targetId ->
+            if Just model.id == targetId then
+                let
+                    save marker =
+                        case ( model.mouseOverIndex, model.mouseDownIndex ) of
+                            ( Just overIndex, Just downIndex ) ->
+                                if overIndex == downIndex then
+                                    [ Toggle downIndex marker ]
 
-                            else
+                                else
+                                    [ Save marker ]
+
+                            ( Nothing, Just downIndex ) ->
                                 [ Save marker ]
 
-                        ( Nothing, Just downIndex ) ->
-                            [ Save marker ]
+                            _ ->
+                                []
+                in
+                case model.marker of
+                    Tool.Marker marker ->
+                        MouseUp :: save marker
 
-                        _ ->
-                            []
-            in
-            case model.marker of
-                Tool.Marker marker ->
-                    MouseUp :: save marker
+                    Tool.Eraser _ ->
+                        [ MouseUp, RemoveHint ]
 
-                Tool.Eraser _ ->
-                    [ MouseUp, RemoveHint ]
+            else
+                []
 
 
 {-| We fold over actions using (Model marker) as the accumulator.
@@ -1426,7 +1435,7 @@ viewHighlightable { renderMarkdown, overlaps } config highlightable =
                 , eventListeners =
                     [ onPreventDefault "mouseover" (Pointer <| Over highlightable.index)
                     , onPreventDefault "mouseleave" (Pointer <| Out)
-                    , onPreventDefault "mouseup" (Pointer <| Up Nothing)
+                    , onPreventDefault "mouseup" (Pointer <| Up <| Just config.id)
                     , onPreventDefault "mousedown" (Pointer <| Down highlightable.index)
                     , onPreventDefault "touchstart" (Pointer <| Down highlightable.index)
                     , attribute "data-interactive" ""
@@ -1468,7 +1477,7 @@ viewHighlightable { renderMarkdown, overlaps } config highlightable =
                     -- should see the entire highlight change to hover styles.
                     [ onPreventDefault "mouseover" (Pointer <| Over highlightable.index)
                     , onPreventDefault "mouseleave" (Pointer <| Out)
-                    , onPreventDefault "mouseup" (Pointer <| Up Nothing)
+                    , onPreventDefault "mouseup" (Pointer <| Up <| Just config.id)
                     , onPreventDefault "mousedown" (Pointer <| Down highlightable.index)
                     , onPreventDefault "touchstart" (Pointer <| Down highlightable.index)
                     , attribute "data-static" ""