next work

ispras · Dec 14, 2024 · 88cab50 · 88cab50
1 parent 7bfd56d
commit 88cab50
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 79 deletions.
diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js
@@ -365,7 +365,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 </Table.Row>
               </Table.Header>
               <Table.Body>
-                {Object.keys(groupDict).map(group_id => (
+                {Object.keys(groupDict).map(group_id => groupDict[group_id].markups.length > 1 && (
                   <Table.Row key={group_id}>
                     <Table.Cell>
                       <Checkbox

diff --git a/src/components/LexicalEntryCorp/Text.js b/src/components/LexicalEntryCorp/Text.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useContext, useEffect } from "react";
 import TranslationContext from "Layout/TranslationContext";
 import { useDrag } from "react-dnd";
-import { RegExpMarker, RangesMarker } from "react-mark.js";
+import { RangesMarker } from "react-mark.js";
 import TextareaAutosize from "react-textarea-autosize";
 import { Button, Checkbox, Confirm } from "semantic-ui-react";
 import { find, isEqual } from "lodash";
@@ -56,71 +56,10 @@ const TextEntityContent = ({
   const text = is_number ? number : entity.content;
   const markups = entity.additional_metadata?.markups || [];
 
-  useEffect(() => {
-    if (!browserSelection) {
-      setMarking({
-        action: null,
-        result: markups,
-        groupsToDelete: null
-      });
-      return;
-    }
-
-    const startSelection = browserSelection.startOffset;
-    const endSelection = browserSelection.endOffset;
-    const selectedText = browserSelection.selectedText;
-
-    var selected_action = null;
-    const selected_markups = [[]];
-    const selected_groups = [];
-
-    // 'markups' variable has the following format:
-    // [[[start_offset, end_offset], [group1_cid, group1_oid], ..., [groupN_cid, groupN_oid]]]
-    for (const markup of markups) {
-
-      const [indexes, ...groups] = markup;
-      if (!indexes || indexes.length !== 2) {
-        continue;
-      }
-      const [startMarkup, endMarkup] = indexes;
-
-      if (
-        (startMarkup <= startSelection && startSelection < endMarkup) ||
-        (startMarkup < endSelection && endSelection <= endMarkup) ||
-        (startSelection < startMarkup && endMarkup < endSelection)
-      ) {
-        if (groups.length > 0) {
-          selected_groups.push(...groups);
-          selected_action = "delete_with_group";
-        } else {
-          selected_action = "delete_markup";
-        }
-      } else {
-        selected_markups.push(markup);
-      }
-    }
-
-    if (
-      !selected_action &&
-      selectedText === selectedText.trim() &&
-      (startSelection === 0 || /\W/.test(text[startSelection - 1])) &&
-      (endSelection === text.length || /\W/.test(text[endSelection]))
-    ) {
-      selected_action = "create_markup";
-      selected_markups.push([[startSelection, endSelection]]);
-    }
-
-    console.log(selected_action + "; groups_to_delete: " + selected_groups);
-
-    setMarking({
-      action: selected_action,
-      result: selected_markups,
-      groupsToDelete: selected_groups
-    });
-  }, [browserSelection]);
-
-  const getCurrentArea = useCallback(() => document.getElementById(id), [id]);
+  const getCurrentArea = useCallback(() => document.getElementById(id), [ id ]);
 
+  // Pre-checking if current selection can be handled
+  // as markup and choosing base text container
   const getCurrentSelection = (checkSelectedText = true) => {
     if (!document.getSelection().rangeCount) {
       return null;
@@ -129,7 +68,7 @@ const TextEntityContent = ({
     const range = document.getSelection().getRangeAt(0);
     const selectedText = range.toString();
 
-    if (checkSelectedText && selectedText.length === 0) {
+    if (checkSelectedText && !selectedText.length) {
       return null;
     }
 
@@ -158,6 +97,7 @@ const TextEntityContent = ({
     return null;
   };
 
+  // Calculating summary selection length
   const onBrowserSelection = () => {
     const currentSelection = getCurrentSelection();
 
@@ -187,14 +127,81 @@ const TextEntityContent = ({
     });
   };
 
+  // Reset browser selection on some events
   const resetMarkupAction = event => {
     if (!!getCurrentSelection(event.type !== "mousedown")) {
       setBrowserSelection(null);
       console.log("Reset markup action : " + id + " : " + Date.now());
     }
   };
 
-  const markupAction = () => {
+  // Setting current markup action: create_markup/delete_markup/delete_with_group
+  // according to browser selection
+  useEffect(() => {
+
+    if (!browserSelection) {
+      setMarking({
+        action: null,
+        result: markups,
+        groupsToDelete: null
+      });
+      return;
+    }
+
+    const startSelection = browserSelection.startOffset;
+    const endSelection = browserSelection.endOffset;
+    const selectedText = browserSelection.selectedText;
+
+    var selected_action = null;
+    const selected_markups = [[]];
+    const selected_groups = [];
+
+    // 'markups' variable has the following format:
+    // [[[start_offset, end_offset], [group1_cid, group1_oid], ..., [groupN_cid, groupN_oid]]]
+    for (const markup of markups) {
+
+      const [indexes, ...groups] = markup;
+      if (!indexes || indexes.length !== 2) {
+        continue;
+      }
+      const [startMarkup, endMarkup] = indexes;
+
+      if (startMarkup <= startSelection && startSelection < endMarkup ||
+          startMarkup < endSelection && endSelection <= endMarkup ||
+          startSelection < startMarkup && endMarkup < endSelection) {
+
+        if (groups.length > 0) {
+          selected_groups.push(...groups);
+          selected_action = 'delete_with_group';
+        } else {
+          selected_action = 'delete_markup';
+        }
+
+      } else {
+        selected_markups.push(markup);
+      }
+    }
+
+    if (!selected_action && selectedText === selectedText.trim() &&
+        (startSelection === 0 || /\W/.test(text[startSelection - 1])) &&
+        (endSelection === text.length || /\W/.test(text[endSelection]))) {
+
+      selected_action = 'create_markup';
+      selected_markups.push([[startSelection, endSelection]]);
+    }
+
+    console.log(selected_action + '; groups_to_delete: ' + selected_groups);
+
+    setMarking({
+        action: selected_action,
+        result: selected_markups,
+        groupsToDelete: selected_groups
+    });
+
+  }, [browserSelection]);
+
+  // Perform markup action
+  const onMarkupAction = () => {
     const { result, action, groupsToDelete } = marking;
 
     if (action === "delete_with_group") {
@@ -204,7 +211,7 @@ const TextEntityContent = ({
         ),
         func: () => {
           update(entity, undefined, result);
-          deleteMarkupGroup({variables: {groupIds: groupsToDelete, perspectiveId}});
+          deleteMarkupGroup({variables: {groupIds: groupsToDelete, perspectiveId: entry.parent_id}});
         }
       });
     } else {
@@ -361,26 +368,26 @@ const TextEntityContent = ({
                 <Button
                   className="lingvo-button-markup lingvo-button-markup_create"
                   content="M"
-                  title={getTranslation("Create markup")}
-                  onClick={markupAction}
+                  title="Create markup"
+                  onClick={onMarkupAction}
                   disabled={is_being_updated}
                 />
               )}
               {marking.action === "delete_markup" && (
                 <Button
                   className="lingvo-button-markup lingvo-button-markup_delete"
                   content="M"
-                  title={getTranslation("Delete markup")}
-                  onClick={markupAction}
+                  title="Delete markup"
+                  onClick={onMarkupAction}
                   disabled={is_being_updated}
                 />
               )}
               {marking.action === "delete_with_group" && (
                 <Button
                   className="lingvo-button-markup lingvo-button-markup_delete"
                   content="G"
-                  title={getTranslation("Delete markup group")}
-                  onClick={markupAction}
+                  title="Delete markup group"
+                  onClick={onMarkupAction}
                   disabled={is_being_updated}
                 />
               )}
@@ -437,7 +444,9 @@ const TextEntityContent = ({
             </span>
           ) : (
             <span className="lingvo-entry-content">
-              <RegExpMarker mark={metatext}>{text}</RegExpMarker>
+              <RangesMarker mark={highlights}>
+                {text}
+              </RangesMarker>
             </span>
           )}
           <Checkbox
@@ -465,14 +474,18 @@ const TextEntityContent = ({
     case "view":
       return (
         <span className="lingvo-entry-content">
-          <RegExpMarker mark={metatext}>{text}</RegExpMarker>
+          <RangesMarker mark={highlights}>
+            {text}
+          </RangesMarker>
         </span>
       );
     case "contributions":
       return entity.accepted ? (
         <span className="lingvo-entry-content">
-          <RegExpMarker mark={metatext}>{text}</RegExpMarker>
-        </span>
+          <RangesMarker mark={highlights}>
+            {text}
+          </RangesMarker>
+    </span>
       ) : (
         <Button.Group basic icon className="lingvo-buttons-group">
           <Button content={text} className="lingvo-buttons-group__text" />