Add TextPositionSelector.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 28 Jun 2017 13:29:07 +0200
changeset 102 b0e36664f1f2
parent 101 e165aa89ac82
child 103 dc906a578616
Add TextPositionSelector.
client/src/AnnotationPlugin.js
client/src/api/WebAnnotationSerializer.js
client/src/api/__tests__/WebAnnotationSerializer.test.js
client/src/components/SlateEditor.js
--- a/client/src/AnnotationPlugin.js	Wed Jun 28 12:54:48 2017 +0200
+++ b/client/src/AnnotationPlugin.js	Wed Jun 28 13:29:07 2017 +0200
@@ -47,7 +47,7 @@
       }
 
       if (onChange) {
-        onChange(text);
+        onChange(text, startOffset, endOffset);
       }
     }
 
--- a/client/src/api/WebAnnotationSerializer.js	Wed Jun 28 12:54:48 2017 +0200
+++ b/client/src/api/WebAnnotationSerializer.js	Wed Jun 28 13:29:07 2017 +0200
@@ -27,13 +27,21 @@
         annotation = Object.assign({}, annotation, { body })
       }
 
+      const selectors = [
+        {
+          "type": "TextQuoteSelector",
+          "exact": category.text,
+        }, {
+          "type": "TextPositionSelector",
+          "start": category.selection.start,
+          "end": category.selection.end,
+        }
+      ]
+
       return Object.assign({}, annotation, {
         "target": {
           "source": source,
-          "selector": {
-            "type": "TextQuoteSelector",
-            "exact": category.text,
-          }
+          "selector": selectors
         }
       })
     });
--- a/client/src/api/__tests__/WebAnnotationSerializer.test.js	Wed Jun 28 12:54:48 2017 +0200
+++ b/client/src/api/__tests__/WebAnnotationSerializer.test.js	Wed Jun 28 13:29:07 2017 +0200
@@ -8,7 +8,11 @@
     "key": "keyword",
     "name": "Mot-clé",
     "color": "#2ECC71",
-    "text": "Foo"
+    "text": "Foo",
+    "selection": {
+      "start": 0,
+      "end": 10,
+    },
   };
 
   const comment = {
@@ -17,7 +21,11 @@
     "color": "#3498DB",
     "hasComment": true,
     "comment": "Bar",
-    "text": "Baz"
+    "text": "Baz",
+    "selection": {
+      "start": 0,
+      "end": 10,
+    },
   }
 
   const note = new Note({
@@ -45,10 +53,17 @@
       "id": 0,
       "target": {
         "source": "/session/9876543/notes/123456",
-        "selector": {
-          "type": "TextQuoteSelector",
-          "exact": "Foo"
-        }
+        "selector": [
+          {
+            "type": "TextQuoteSelector",
+            "exact": "Foo"
+          },
+          {
+            "type": "TextPositionSelector",
+            "start": 0,
+            "end": 10
+          }
+        ]
       }
     },
     {
@@ -62,10 +77,17 @@
       },
       "target": {
         "source": "/session/9876543/notes/123456",
-        "selector": {
-          "type": "TextQuoteSelector",
-          "exact": "Baz"
-        }
+        "selector": [
+          {
+            "type": "TextQuoteSelector",
+            "exact": "Baz"
+          },
+          {
+            "type": "TextPositionSelector",
+            "start": 0,
+            "end": 10
+          }
+        ]
       }
     }
   ];
--- a/client/src/components/SlateEditor.js	Wed Jun 28 12:54:48 2017 +0200
+++ b/client/src/components/SlateEditor.js	Wed Jun 28 13:29:07 2017 +0200
@@ -69,8 +69,12 @@
     super(props);
 
     const annotationPlugin = AnnotationPlugin({
-      onChange: (text) => {
-        this.setState({ currentSelectionText: text });
+      onChange: (text, start, end) => {
+        this.setState({
+          currentSelectionText: text,
+          currentSelectionStart: start,
+          currentSelectionEnd: end
+        });
       }
     });
 
@@ -81,6 +85,8 @@
       startedAt: null,
       finishedAt: null,
       currentSelectionText: '',
+      currentSelectionStart: 0,
+      currentSelectionEnd: 0,
       hoveringMenu: null,
       isPortalOpen: false,
       categories: Immutable.List([]),
@@ -349,7 +355,7 @@
 
   onCategoryClick = (category) => {
 
-    const { state, currentSelectionText } = this.state;
+    const { state, currentSelectionText, currentSelectionStart, currentSelectionEnd } = this.state;
     let { categories } = this.state;
     const transform = state.transform();
 
@@ -360,6 +366,10 @@
       type: 'category',
       data: {
         text: currentSelectionText,
+        selection: {
+          start: currentSelectionStart,
+          end: currentSelectionEnd,
+        },
         color: category.color,
         key: category.key
       }