removing wrapper

build/codex-editor.js

@@ -2757,6 +2757,11 @@ var SelectionAPI = function (_Module) {
         value: function findParentTag(tagName, className) {
             return new _selection2.default().findParentTag(tagName, className);
         }
+    }, {
+        key: 'expandToTag',
+        value: function expandToTag(node) {
+            new _selection2.default().expandToTag(node);
+        }
     }, {
         key: 'methods',
         get: function get() {
@@ -2765,6 +2770,9 @@ var SelectionAPI = function (_Module) {
             return {
                 findParentTag: function findParentTag(tagName, className) {
                     return _this2.findParentTag(tagName, className);
+                },
+                expandToTag: function expandToTag(node) {
+                    return _this2.expandToTag(node);
                 }
             };
         }
@@ -7405,7 +7413,8 @@ var Selection = function () {
 
     /**
      * Expands selection range to the passed parent node
-     * @param {Element} node
+     *
+     * @param {HTMLElement} node
      */
 
   }, {

example/tools-inline/marker/marker.js

@@ -1,9 +1,10 @@
 /**
  * @todo remove wrapper if selection () inside it:
- *       s([ample tex])t -> sample text
- *       s[ampl(e t)ex]t -> s[ampl]e t[ex]t       @todo create splitter
- *       s(ampl[e t]ex)t -> s[ampl[e t]ex]t       do not remove wrapper
- *       s([ampl]e t[ex])t -> s[[ampl]e t[ex]]t   do not remove wrapper
+ *   [x] s[(ample tex)]t -> sample text
+ *   [x] s[ampl(e t)ex]t -> sample text
+ *   (?) s[ampl(e t)ex]t -> s[ampl]e t[ex]t       @todo create splitter
+ *   [x] s(ampl[e t]ex)t -> s[ampl[e t]ex]t       add remove wrapper
+ *   [ ] s[(ampl]e t[ex)]t -> s[[ampl]e t[ex]]t   add wrapper
  *
  * @todo process cross-tag wrapping []:
  *       sam[ple <b>te]xt</b> -> sam[ple ]<b>[te]xt</b>
@@ -12,16 +13,14 @@
  *       sa[mple t][ex]t -> sa[mple tex]t
  *       sa[mpl[e t]ex]t -> sa[mple tex]t
  *       @see https://developer.mozilla.org/en-US/docs/Web/API/Range/commonAncestorContainer
- *
- * @todo save selection after clicking on tool
  */
 
 class Marker {
   constructor(api) {
     this.api = api;
-    console.log(this.api);
 
     this.button = null;
+    this.TAG = 'SPAN';
     this.CSS = 'marked';
   }
 
@@ -44,32 +43,43 @@ class Marker {
 
     let state = this.checkState();
 
+    /**
+     * If start or end of selection is in the highlighted block
+     */
     if (state) {
-      console.log('range', range);
-      console.log('state', state);
+      /**
+       * Expand selection
+       */
+      this.api.selection.expandToTag(state);
 
-      /** @todo remove highlighting */
+      /**
+       * Remove wrapper
+       */
+      state.outerHTML = state.innerHTML;
 
-      // /**
-      //  *
-      //  */
-      // if (range.startContainer === range.endContainer) {
-      //   /**
-      //    * @todo remove whole wrapper not class
-      //    */
-      //   state.classList.remove(this.CSS);
-      // }
+      // @todo save selection on the text
     } else {
-      let span = document.createElement('SPAN');
+      /**
+       * Create a wrapper for highlighting
+       */
+      let span = document.createElement(this.TAG);
 
       span.classList.add(this.CSS);
+
+      /**
+       * Wrap text with wrapper tag
+       */
       range.surroundContents(span);
-      range.selectNode(span);
+
+      /**
+       * Expand (add) selection to highlighted block
+       */
+      this.api.selection.expandToTag(span);
     }
   }
 
   checkState(selection) {
-    const markerTag = this.api.selection.findParentTag('SPAN', this.CSS);
+    const markerTag = this.api.selection.findParentTag(this.TAG, this.CSS);
 
     this.button.classList.toggle('ce-inline-tool--active', !!markerTag);
 

src/components/interfaces/api.ts

@@ -83,10 +83,17 @@ export interface ISelectionAPI {
   /**
    * Looks ahead to find passed tag from current selection
    *
-   * @param tagName
-   * @param className
+   * @param {String} tagName
+   * @param {String} className
    */
   findParentTag: (tagName: string, className: string) => Node;
+
+  /**
+   * Expands selection range to the passed parent node
+   *
+   * @param {HTMLElement} node
+   */
+  expandToTag: (node: HTMLElement) => void;
 }
 
 /**

src/components/modules/api-selection.ts

@@ -23,12 +23,17 @@ export default class SelectionAPI extends Module implements ISelectionAPI {
    */
   get methods(): ISelectionAPI {
     return {
-      findParentTag: (tagName, className) => this.findParentTag(tagName, className),
+      findParentTag: (tagName: string, className: string) => this.findParentTag(tagName, className),
+      expandToTag: (node: HTMLElement) => this.expandToTag(node),
     };
   }
 
-  public findParentTag(tagName, className) {
+  public findParentTag(tagName: string, className: string): Node {
     return new Selection().findParentTag(tagName, className);
   }
 
+  public expandToTag(node: HTMLElement): void {
+    new Selection().expandToTag(node);
+  }
+
 }

src/components/selection.js

@@ -242,7 +242,8 @@ export default class Selection {
 
   /**
    * Expands selection range to the passed parent node
-   * @param {Element} node
+   *
+   * @param {HTMLElement} node
    */
   expandToTag(node) {
     let selection = window.getSelection();