improve code

example/tools-inline/term/term-blue.svg

@@ -0,0 +1 @@
+<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#388AE5" d="M2.921 7.014l4.835 4.834a1.113 1.113 0 1 1-1.574 1.574L.543 7.784a1.113 1.113 0 0 1 .04-1.613L6.125.627a1.125 1.125 0 0 1 1.591 1.591L2.921 7.014zm15.301-.823l.02.019c.435.435.435 1.14 0 1.574l-5.639 5.638a1.113 1.113 0 1 1-1.574-1.574l4.835-4.834-4.796-4.796A1.125 1.125 0 1 1 12.66.628l5.544 5.543.02.02z"/></svg>

example/tools-inline/term/term.css

@@ -1,12 +1,24 @@
-/*.marked {*/
-  /*background: yellowgreen;*/
-/*}*/
+/**
+ * Styles for the Term tool
+ *
+ * CodeX Editor Inline Toolbar plugin
+ */
+.ce-term-tool__icon {
+  background-image: url('term.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.ce-term-tool__icon--active {
+  background-image: url('term-blue.svg');
+}
+
 
 .marked {
-  /*font-family: 'monospace', 'monaco', 'consolas', 'courier';*/
   background-color: #f4f4f4;
   border: 1px solid #eaeaea;
   color: #3c3434;
   padding: 1px 3px;
   border-radius: 2px;
+  margin: 0 4px;
 }

example/tools-inline/term/term.js

@@ -1,37 +1,47 @@
 /**
- * @todo remove wrapper if selection () inside it:
- *   [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
+ * Term plugin for the CodeX Editor
  *
- * @todo process cross-tag wrapping []:
- *       sam[ple <b>te]xt</b> -> sam[ple ]<b>[te]xt</b>
- *
- * @todo create optimizer:
- *       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
+ * Allows to wrap inline fragment and style it somehow.
  */
-
-// @todo add description
 class Term {
+  /**
+   * @param {object} api - CodeX Editor API
+   */
   constructor(api) {
     this.api = api;
 
+    /**
+     * Toolbar Button
+     * @type {HTMLElement|null}
+     */
     this.button = null;
-    this.TAG = 'SPAN';
+
+    /**
+     * Tag represented the term
+     * @type {string}
+     */
+    this.tag = 'SPAN';
+
+    /**
+     * Class name for term-tag
+     * @type {string}
+     */
     this.CSS = 'marked';
 
-    // @todo move this classes to api
-    this.ICON_CLASSES = {
-      default: 'ce-inline-tool',
-      active: 'ce-inline-tool--active'
+    /**
+     * CSS classes
+     */
+    this.iconClasses = {
+      base: 'ce-inline-tool',
+      term: 'ce-term-tool__icon',
+      active: 'ce-term-tool__icon--active'
     };
   }
 
-  // @todo add description
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   * @return {boolean}
+   */
   static get isInline() {
     return true;
   }
@@ -43,76 +53,96 @@ class Term {
    */
   render() {
     this.button = document.createElement('button');
-
-    this.button.innerText = '<>'; // @todo change to SVG icon
-
-    this.button.classList.add(this.ICON_CLASSES.default);
+    this.button.classList.add(this.iconClasses.base, this.iconClasses.term);
 
     return this.button;
   }
 
   /**
-   * Process selected fragment
-   *
-   * @param {Range} range
+   * Wrap/Unwrap selected fragment
+   * @param {Range} range - selected fragment
    */
   surround(range) {
     if (!range) {
       return;
     }
 
-    console.log(range);
-
-
-    let state = this.api.selection.findParentTag(this.TAG, this.CSS);
-    console.log(state);
+    let termWrapper = this.api.selection.findParentTag(this.tag, this.CSS);
 
     /**
      * If start or end of selection is in the highlighted block
      */
-    if (state) {
-      // @todo create "unwrap" function
-      /**
-       * Expand selection
-       */
-      this.api.selection.expandToTag(state);
-
-      /**
-       * Remove wrapper
-       */
-      state.outerHTML = state.innerHTML;
-
-      // @todo save selection on the text
+    if (termWrapper) {
+      this.unwrap(termWrapper);
     } else {
-      // @todo create "wrap" function
-      /**
-       * Create a wrapper for highlighting
-       */
-      let span = document.createElement(this.TAG);
-
-      span.classList.add(this.CSS);
-
-      /**
-       * Wrap text with wrapper tag
-       */
-      range.surroundContents(span);
-
-      /**
-       * Expand (add) selection to highlighted block
-       */
-      this.api.selection.expandToTag(span);
+      this.wrap(range);
     }
   }
 
   /**
-   * Check and change Term's state for current selection
-   *
-   * @param {Selection} selection
+   * Wrap selection with term-tag
+   * @param {Range} range - selected fragment
    */
-  checkState(selection) {
-    const termTag = this.api.selection.findParentTag(this.TAG, this.CSS);
-                                      // @todo pass selection to this function
+  wrap(range) {
+    /**
+     * Create a wrapper for highlighting
+     */
+    let span = document.createElement(this.tag);
 
-    this.button.classList.toggle(this.ICON_CLASSES.active, !!termTag);
+    span.classList.add(this.CSS);
+
+    /**
+     * SurroundContent throws an error if the Range splits a non-Text node with only one of its boundary points
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents}
+     * // range.surroundContents(span);
+     */
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+
+    /**
+     * Expand (add) selection to highlighted block
+     */
+    this.api.selection.expandToTag(span);
+  }
+
+  /**
+   * Unwrap term-tag
+   * @param {HTMLElement} termWrapper - term wrapper tag
+   */
+  unwrap(termWrapper) {
+    /**
+     * Expand selection to all term-tag
+     */
+    this.api.selection.expandToTag(termWrapper);
+
+    let sel = window.getSelection();
+    let range = sel.getRangeAt(0);
+
+    let unwrappedContent = range.extractContents();
+
+    /**
+     * Remove empty term-tag
+     */
+    termWrapper.parentNode.removeChild(termWrapper);
+
+    /**
+     * Insert extracted content
+     */
+    range.insertNode(unwrappedContent);
+
+    /**
+     * Restore selection
+     */
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  /**
+   * Check and change Term's state for current selection
+   */
+  checkState() {
+    const termTag = this.api.selection.findParentTag(this.tag, this.CSS);
+
+    this.button.classList.toggle(this.iconClasses.active, !!termTag);
   }
 }

example/tools-inline/term/term.svg

@@ -1 +1,3 @@
-<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.921 7.014l4.835 4.834a1.113 1.113 0 1 1-1.574 1.574L.543 7.784a1.113 1.113 0 0 1 .04-1.613L6.125.627a1.125 1.125 0 0 1 1.591 1.591L2.921 7.014zm15.301-.823l.02.019c.435.435.435 1.14 0 1.574l-5.639 5.638a1.113 1.113 0 1 1-1.574-1.574l4.835-4.834-4.796-4.796A1.125 1.125 0 1 1 12.66.628l5.544 5.543.02.02z"/></svg>
+<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path fill="#7B7E89" d="M2.921 7.014l4.835 4.834a1.113 1.113 0 1 1-1.574 1.574L.543 7.784a1.113 1.113 0 0 1 .04-1.613L6.125.627a1.125 1.125 0 0 1 1.591 1.591L2.921 7.014zm15.301-.823l.02.019c.435.435.435 1.14 0 1.574l-5.639 5.638a1.113 1.113 0 1 1-1.574-1.574l4.835-4.834-4.796-4.796A1.125 1.125 0 1 1 12.66.628l5.544 5.543.02.02z"/>
+</svg>

src/components/interfaces/api.ts

@@ -86,7 +86,7 @@ export interface ISelectionAPI {
    * @param {String} tagName
    * @param {String} className
    */
-  findParentTag: (tagName: string, className: string) => Node;
+  findParentTag: (tagName: string, className: string) => HTMLElement|null;
 
   /**
    * Expands selection range to the passed parent node

src/components/modules/api-selection.ts

@@ -28,10 +28,20 @@ export default class SelectionAPI extends Module implements ISelectionAPI {
     };
   }
 
-  public findParentTag(tagName: string, className: string): Node {
+  /**
+   * Looks ahead from selection and find passed tag with class name
+   * @param {string} tagName - tag to find
+   * @param {string} className - tag's class name
+   * @return {HTMLElement|null}
+   */
+  public findParentTag(tagName: string, className: string): HTMLElement|null {
     return new Selection().findParentTag(tagName, className);
   }
 
+  /**
+   * Expand selection to passed tag
+   * @param {HTMLElement} node - tag that should contain selection
+   */
   public expandToTag(node: HTMLElement): void {
     new Selection().expandToTag(node);
   }

src/components/modules/ui.js

@@ -203,8 +203,12 @@ export default class UI extends Module {
 
     /**
      * Close Inline Toolbar when nothing selected
+     * use small delay to renew selection
      */
-    this.Editor.InlineToolbar.handleShowingEvent(event);
+    setTimeout(() => {
+      this.Editor.InlineToolbar.handleShowingEvent(event);
+    }, 50);
+
 
     /**
          *

src/components/selection.js

@@ -175,7 +175,7 @@ export default class Selection {
    * @param  {String} tagName       - tag to found
    * @param  {String} [className]   - tag's class name
    * @param  {Number} [searchDepth] - count of tags that can be included. For better performance.
-   * @return {Node|null}
+   * @return {HTMLElement|null}
    */
   findParentTag(tagName, className, searchDepth = 10) {
     let selection = window.getSelection(),
@@ -191,7 +191,7 @@ export default class Selection {
     /**
      * Define Nodes for start and end of selection
      */
-    let parents = [
+    let boundNodes = [
       /** the Node in which the selection begins */
       selection.anchorNode.parentNode,
 
@@ -203,7 +203,7 @@ export default class Selection {
      * For each selection parent Nodes we try to find target tag [with target class name]
      * It would be saved in parentTag variable
      */
-    parents.forEach(parent => {
+    boundNodes.forEach(parent => {
       /** Reset tags limit */
       let searchDepthIterable = searchDepth;
 

src/styles/variables.css

@@ -67,7 +67,7 @@
     }
 
     &:hover {
-      background: var(--bg-light);
+      background-color: var(--bg-light);
     }
 
     &--active {