Merge pull request #2685 from pie-framework/feat/PD-363-poc

fix(select-text): remove extended-text-entry dependencies and fix clear tokens method PD-363

Author: CarlaCostea

packages/select-text/configure/src/design.jsx

@@ -11,15 +11,15 @@ import Info from '@material-ui/icons/Info';
 import debug from 'debug';
 import { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';
 import Tooltip from '@material-ui/core/Tooltip';
-import { generateValidationMessage } from './utils';
-import {
-  clearSelection,
-  getDOMNodes,
-  getLabelElement,
-  getRangeDetails,
-  isSideLabel,
-  wrapRange,
-} from '@pie-element/extended-text-entry/src/annotation/annotation-utils';
+import { clearSelection, generateValidationMessage } from './utils';
+// import {
+//   clearSelection,
+//   getDOMNodes,
+//   getLabelElement,
+//   getRangeDetails,
+//   isSideLabel,
+//   wrapRange,
+// } from '@pie-element/extended-text-entry/src/annotation/annotation-utils';
 import classNames from 'classnames';
 
 import Switch from '@material-ui/core/Switch';
@@ -184,23 +184,23 @@ export class Design extends React.Component {
     return annotation;
   };
 
-  addAnnotation = (type) => {
-    const { annotations, onChange } = this.props;
-    const annotation = this.createNewAnnotation('', type);
-    const labelElem = getLabelElement(annotation.id);
-
-    annotations.push(annotation);
-
-    this.setState({
-      openedMenu: false,
-      openedEditor: true,
-      annotationIndex: annotations.length - 1,
-      annotation,
-      labelElem,
-    });
-
-    onChange(annotations);
-  };
+  // addAnnotation = (type) => {
+  //   const { annotations, onChange } = this.props;
+  //   const annotation = this.createNewAnnotation('', type);
+  //   const labelElem = getLabelElement(annotation.id);
+  //
+  //   annotations.push(annotation);
+  //
+  //   this.setState({
+  //     openedMenu: false,
+  //     openedEditor: true,
+  //     annotationIndex: annotations.length - 1,
+  //     annotation,
+  //     labelElem,
+  //   });
+  //
+  //   onChange(annotations);
+  // };
 
   // new functionalities
 
@@ -357,9 +357,16 @@ export class Design extends React.Component {
   };
 
   clearTokens = () => {
-    const { text } = this.state;
+    const { model } = this.props;
+
+    const container = document.createElement('div');
+    container.innerHTML = model.text;
+
+    // Remove all children and add new content
+    this.textRef.innerHTML = '';
+    this.textRef.appendChild(container);
 
-    this.setState({ tokenizedText: text });
+    this.setState({ tokenizedText: model.text });
   };
 
   selectWords = () => {

packages/select-text/configure/src/utils.js

@@ -1,4 +1,3 @@
-
 var createElementFromHTML = function createElementFromHTML() {
   var htmlString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var div = document.createElement('div');
@@ -28,7 +27,7 @@ var prepareText = function prepareText(text) {
   var txtDom = createElementFromHTML(text);
 
   var div = document.createElement('div');
-  div.innerHTML = '<div separator=\'true\'>'.concat(txtDom.innerHTML, '</div>');
+  div.innerHTML = "<div separator='true'>".concat(txtDom.innerHTML, '</div>');
   txtDom = div;
 
   var allDomElements = Array.from(txtDom.querySelectorAll('*'));
@@ -111,3 +110,25 @@ export const generateValidationMessage = (config) => {
 
   return message;
 };
+
+// also used in extended-text-entry
+export const clearSelection = () => {
+  if (document.getSelection) {
+    // for all new browsers (IE9+, Chrome, Firefox)
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(document.createRange());
+  } else if (window.getSelection) {
+    // equals with the document.getSelection (MSDN info)
+    if (window.getSelection().removeAllRanges) {
+      // for all new browsers (IE9+, Chrome, Firefox)
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(document.createRange());
+    } else if (window.getSelection().empty) {
+      // Chrome supports this as well
+      window.getSelection().empty();
+    }
+  } else if (document.selection) {
+    // IE8-
+    document.selection.empty();
+  }
+};