client/src/AnnotationPlugin.js
changeset 157 5c3af4f10e92
parent 102 b0e36664f1f2
equal deleted inserted replaced
156:384f4539b76a 157:5c3af4f10e92
     1 function AnnotationPlugin(options) {
     1 function AnnotationPlugin(options) {
     2 
     2 
     3   const { onChange } = options
     3   const { onChange } = options
     4 
     4 
     5   return {
     5   return {
     6     onSelect(event, data, state, editor) {
     6     onSelect(event, change) {
     7       event.preventDefault()
     7       event.preventDefault()
     8 
     8 
     9       const selection = data.selection;
     9       const { value } = change
    10 
    10       const { selection } = value
    11       const startOffset = selection.startOffset;
    11       const { start, end} = selection
    12       const endOffset = selection.endOffset;
       
    13 
    12 
    14       if (selection.isCollapsed) {
    13       if (selection.isCollapsed) {
    15         return;
    14         return;
    16       }
    15       }
    17 
    16 
    19       let hasStarted = false;
    18       let hasStarted = false;
    20       let hasEnded = false;
    19       let hasEnded = false;
    21 
    20 
    22       // Keep only the relevant nodes,
    21       // Keep only the relevant nodes,
    23       // i.e. nodes which are contained within selection
    22       // i.e. nodes which are contained within selection
    24       state.document.nodes.forEach((node) => {
    23       value.document.nodes.forEach((node) => {
    25         if (selection.hasStartIn(node)) {
    24         if (start.isInNode(node)) {
    26           hasStarted = true;
    25           hasStarted = true;
    27         }
    26         }
    28         if (hasStarted && !hasEnded) {
    27         if (hasStarted && !hasEnded) {
    29           nodes.push(node);
    28           nodes.push(node);
    30         }
    29         }
    31         if (selection.hasEndIn(node)) {
    30         if (end.isAtEndOfNode(node)) {
    32           hasEnded = true;
    31           hasEnded = true;
    33         }
    32         }
    34       });
    33       });
    35 
    34 
    36       let text = '';
    35       let text = '';
    37 
    36 
    38       // Concatenate the nodes text
    37       // Concatenate the nodes text
    39       if (nodes.length === 1) {
    38       if (nodes.length === 1) {
    40         text = nodes[0].text.substring(startOffset, endOffset);
    39         text = nodes[0].text.substring(start.offset, end.offset);
    41       } else {
    40       } else {
    42         text = nodes.map((node) => {
    41         text = nodes.map((node) => {
    43           if (selection.hasStartIn(node)) return node.text.substring(startOffset);
    42           if (start.isInNode(node)) return node.text.substring(start.offset);
    44           if (selection.hasEndIn(node)) return node.text.substring(0, endOffset);
    43           if (end.isAtEndOfNode(node)) return node.text.substring(0, end.offset);
    45           return node.text;
    44           return node.text;
    46         }).join('\n');
    45         }).join('\n');
    47       }
    46       }
    48 
    47 
    49       if (onChange) {
    48       if (onChange) {
    50         onChange(text, startOffset, endOffset);
    49         onChange(text, start.offset, end.offset);
    51       }
    50       }
    52     }
    51     }
    53 
    52 
    54   };
    53   };
    55 }
    54 }