FIX: UI coherence for contextual actions should be improved.

features/step_definitions/event.rb

@@ -71,7 +71,7 @@
       text = selection.toString();
   ")
   expect(page.evaluate_script('text')).to eq(markdown)
-  click_button(class: 'create-fragment')
+  click_on_contextual_menu_item('Comment the selected text...', 'main col', 2)
 end
 
 Quand("j'essaie d'éditer le document") do
@@ -84,8 +84,8 @@
 end
 
 Quand("j'essaie d'accorder les droits d'édition à {string}") do |userName|
-  find(".more-btn > button").trigger("click")
-  find(".dropdown-item-share").click
+  expect(page).to have_css('.scholium')
+  click_on_contextual_menu_item('Invite editors...', 'scholium', 0)
   find(".add-user-input").fill_in with: userName
   find(".add-user-input-btn").click
 end

features/support/env.rb

@@ -61,3 +61,13 @@ def fill_element(selector, text)
 def click_on_element(class_name, text)
   find(class_name, text: text).click
 end
+
+def click_on_contextual_menu_item(item_locator, context_classes, context_order = 0)
+  page.execute_script("
+    let area = document.getElementsByClassName('#{context_classes}')[#{context_order}];
+    let dropdown = area.getElementsByClassName('dropdown')[0];
+    dropdown.style.visibility = 'visible';
+    dropdown.getElementsByClassName('toggle')[0].dispatchEvent(new Event('click', {bubbles:true}))
+  ")
+  click_on(item_locator)
+end

frontend/src/components/EditableText.jsx

@@ -5,7 +5,7 @@ import FormattedText from './FormattedText';
 import PassageMarginMenu from './PassageMarginMenu';
 import {v4 as uuid} from 'uuid';
 
-function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, backend, setLastUpdate}) {
+function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment, setHighlightedText, setSelectedText, backend, setLastUpdate}) {
   const [beingEdited, setBeingEdited] = useState(false);
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
@@ -82,13 +82,14 @@ function EditableText({id, text, rubric, isPartOf, links, fragment, setFragment,
       })
       .then(x => setLastUpdate(x.rev))
       .then(() => setBeingEdited(false))
+      .then(() => setHighlightedText())
       .catch(console.error);
   };
 
   if (!beingEdited) return (
     <div className="editable content" title="Edit content...">
       <div className="formatted-text" onClick={handleClick}>
-        <FormattedText {...{setHighlightedText}}>
+        <FormattedText {...{setHighlightedText, setSelectedText}}>
           {editedText || text}
         </FormattedText>
       </div>

frontend/src/components/FormattedText.jsx

@@ -1,23 +1,21 @@
-import { useState } from 'react';
-import SelectPopUp from './SelectPopUp';
 import ReactMarkdown from 'react-markdown';
 import remarkUnwrapImages from 'remark-unwrap-images';
 import { remarkDefinitionList, defListHastHandlers } from 'remark-definition-list';
 import CroppedImage from './CroppedImage';
 import VideoComment from './VideoComment';
 import FragmentComment from './FragmentComment';
 
-function FormattedText({children, setHighlightedText, selectable, setFragment}) {
-  const [selectedText, setSelectedText] = useState();
+function FormattedText({children, setHighlightedText, selectable, setSelectedText}) {
 
   const handleMouseUp = () => {
     if (selectable) {
-      setSelectedText(window.getSelection().toString());
+      let text = window.getSelection().toString();
+      setSelectedText(text);
+      setHighlightedText(text);
     }
   };
 
   return (<>
-    <SelectPopUp {...{selectedText, setSelectedText, setFragment}}/>
     <ReactMarkdown
       remarkPlugins={[remarkDefinitionList, remarkUnwrapImages]}
       components={{

frontend/src/components/More.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import { Button, InputGroup, ListGroup, Modal, Dropdown, Form } from 'react-bootstrap';
 import { ThreeDotsVertical } from 'react-bootstrap-icons';
 
@@ -11,6 +11,11 @@ export default function More({metadata, backend}) {
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
 
+  const Toggle = forwardRef(({onClick}, ref) => (
+    <ThreeDotsVertical className="toggle" {...{onClick, ref}} />
+  ));
+  Toggle.displayName = 'Toggle';
+
   let addEditor = () => {
     if (!loading) {
       setLoading(true);
@@ -37,9 +42,7 @@ export default function More({metadata, backend}) {
   return (
     <>
       <Dropdown className="float-end more-btn">
-        <Dropdown.Toggle variant="ghost">
-          <ThreeDotsVertical/>
-        </Dropdown.Toggle>
+        <Dropdown.Toggle as={Toggle} />
         <Dropdown.Menu>
           <Dropdown.Item as="button" onClick={handleShow} className="dropdown-item-share">Invite editors...</Dropdown.Item>
         </Dropdown.Menu>

frontend/src/components/Passage.jsx

@@ -7,8 +7,10 @@ import Col from 'react-bootstrap/Col';
 import { Marker } from 'react-mark.js';
 import FormattedText from './FormattedText';
 import EditableText from '../components/EditableText';
+import PassageSourceMenu from './PassageSourceMenu';
 
 function Passage({source, rubric, scholia, margin, sourceId, backend, setLastUpdate}) {
+  const [selectedText, setSelectedText] = useState();
   const [highlightedText, setHighlightedText] = useState('');
   const [fragment, setFragment] = useState();
 
@@ -26,28 +28,29 @@ function Passage({source, rubric, scholia, margin, sourceId, backend, setLastUpd
       <Col className="main">
         <Container>
           <Row>
-            <PassageSource {...{highlightedText, setHighlightedText, setFragment}}>
+            <PassageSource {...{highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText}}>
               {source}
             </PassageSource>
             <Rubric id={rubric} />
           </Row>
         </Container>
       </Col>
-      <PassageMargin active={!!margin} {...{scholia, rubric, setHighlightedText, fragment, setFragment, backend, setLastUpdate}} />
+      <PassageMargin active={!!margin} {...{scholia, rubric, setHighlightedText, fragment, setFragment, setSelectedText, backend, setLastUpdate}} />
     </Row>
   );
 }
 
-function PassageSource({children, highlightedText, setHighlightedText, setFragment}) {
+function PassageSource({children, highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText}) {
   return (
     <Col>
       {children.map((chunk, index) =>
         <Marker key={index} mark={highlightedText} options={({separateWordSearch: false})}>
-          <FormattedText selectable="true" {...{setFragment, setHighlightedText}}>
+          <FormattedText selectable="true" {...{setSelectedText, setHighlightedText}}>
             {chunk}
           </FormattedText>
         </Marker>
       )}
+      <PassageSourceMenu {...{selectedText, setSelectedText, setFragment}}/>
     </Col>
   );
 }
@@ -58,12 +61,12 @@ function Rubric({id}) {
   );
 }
 
-function PassageMargin({active, scholia, setHighlightedText, fragment, setFragment, backend, setLastUpdate}) {
+function PassageMargin({active, scholia, setHighlightedText, fragment, setFragment, setSelectedText, backend, setLastUpdate}) {
   if (!active) return;
   return (
     <Col xs={5} className="scholium">
       {scholia.map((scholium, i) =>
-        <EditableText key={i} {...scholium} {...{setHighlightedText, fragment, setFragment, backend, setLastUpdate}} />
+        <EditableText key={i} {...scholium} {...{setHighlightedText, fragment, setFragment, setSelectedText, backend, setLastUpdate}} />
       )}
     </Col>
   );

frontend/src/components/PassageMarginMenu.jsx

@@ -22,7 +22,7 @@ function PassageMarginMenu ({ id, backend, handleImageUrl }) {
     <>
       <Dropdown>
         <Dropdown.Toggle as={BlockMenuButton}/>
-        <Dropdown.Menu id="block-actions">
+        <Dropdown.Menu>
           <Dropdown.Item onClick={handleClick}>Add a picture...</Dropdown.Item>
         </Dropdown.Menu>
       </Dropdown>
@@ -44,7 +44,7 @@ const BlockMenuButton = forwardRef(({ children, onClick }, ref) => (
       e.preventDefault();
       onClick(e);
     }}
-    ref={ref} className="editable-button">
+    ref={ref} className="toggle">
     {children}
   </ThreeDotsVertical>
 ));

frontend/src/components/PassageSourceMenu.jsx

@@ -0,0 +1,32 @@
+import '../styles/PassageMarginMenu.css';
+
+import { forwardRef } from 'react';
+import { Dropdown } from 'react-bootstrap';
+import { ThreeDotsVertical } from 'react-bootstrap-icons';
+
+function PassageSourceMenu({selectedText, setSelectedText, setFragment}) {
+
+  const handleClick = () => {
+    setFragment(`[${selectedText}]\n`);
+    setSelectedText();
+  };
+
+  const Toggle = forwardRef(({onClick}, ref) => (
+    <ThreeDotsVertical className="toggle" {...{onClick, ref}} />
+  ));
+  Toggle.displayName = 'Toggle';
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle as={Toggle} />
+      <Dropdown.Menu>
+        <Dropdown.Item onClick={handleClick}>
+          Comment the selected text...
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default PassageSourceMenu;
+

frontend/src/styles/Lectern.css

@@ -19,6 +19,10 @@
   background-color: ghostwhite;
 }
 
+.main .col {
+  display: flex;
+}
+
 .lectern .runningHead div {
   padding-top: 17px;
   padding-bottom: 17px;

frontend/src/styles/PassageMarginMenu.css

@@ -1,18 +1,14 @@
-.editable-button {
+.dropdown {
   visibility: hidden;
-  margin-top: 0.25rem;
-  color: crimson;
 }
 
-.editable:hover .editable-button {
+:is(.scholium, .main):hover .dropdown {
   visibility: visible;
-  cursor: pointer;
 }
 
-#block-actions .dropdown-item:hover {
-  background-color: lightgray;
+.toggle {
+  margin-top: 0.25rem;
+  color: crimson;
+  cursor: pointer;
 }
 
-#block-actions .dropdown-item:active {
-  color: black;
-}