Link Inline Tool

src/components/block-tunes/block-tune-delete.ts

@@ -30,31 +30,24 @@ export default class DeleteTune implements IBlockTune {
    */
   private needConfirmation: boolean;
 
+  /**
+   * set false confirmation state
+   */
+  private resetConfirmation: () => void;
+
   /**
    * DeleteTune constructor
    *
    * @param {Object} api
    */
-  public constructor({api}) {
+  constructor({api}) {
     this.api = api;
 
     this.resetConfirmation = () => {
       this.setConfirmation(false);
     };
   }
 
-  /**
-   * change tune state
-   */
-  private setConfirmation(state): void {
-    this.needConfirmation = state;
-  }
-
-  /**
-   * set false confirmation state
-   */
-  private resetConfirmation: () => void;
-
   /**
    * Create "Delete" button and add click event listener
    * @returns [Element}
@@ -95,4 +88,12 @@ export default class DeleteTune implements IBlockTune {
       this.api.blocks.delete();
     }
   }
+
+  /**
+   * change tune state
+   */
+  private setConfirmation(state): void {
+    this.needConfirmation = state;
+  }
+
 }

src/components/inline-tools/inline-tool-bold.ts

@@ -32,7 +32,7 @@ export default class BoldInlineTool implements InlineTool {
     button: null,
   };
 
-  constructor() {
+  constructor(api) {
     console.log('Bold Inline Tool is ready');
   }
 
@@ -42,7 +42,7 @@ export default class BoldInlineTool implements InlineTool {
   public render(): HTMLElement {
     this.nodes.button = document.createElement('button');
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.appendChild($.svg('icon-bold', 13, 15));
+    this.nodes.button.appendChild($.svg('bold', 13, 15));
     return this.nodes.button;
   }
 

src/components/inline-tools/inline-tool-link.ts

@@ -0,0 +1,289 @@
+import InlineTool from '../interfaces/inline-tool';
+import Selection from '../selection';
+
+declare var $: any;
+declare var _: any;
+
+/**
+ * Link Tool
+ *
+ * Inline Toolbar Tool
+ *
+ * Wrap selected text with <a> tag
+ */
+export default class LinkInlineTool implements InlineTool {
+
+  /**
+   * Native Document's commands for link/unlink
+   */
+  private readonly commandLink: string = 'createLink';
+  private readonly commandUnlink: string = 'unlink';
+
+  /**
+   * Enter key code
+   */
+  private readonly ENTER_KEY: number = 13;
+
+  /**
+   * Styles
+   */
+  private readonly CSS = {
+    button: 'ce-inline-tool',
+    buttonActive: 'ce-inline-tool--active',
+    buttonModifier: 'ce-inline-tool--link',
+    buttonUnlink: 'ce-inline-tool--unlink',
+    input: 'ce-inline-tool-input',
+    inputShowed: 'ce-inline-tool-input--showed',
+  };
+
+  /**
+   * Elements
+   */
+  private nodes = {
+    button: null,
+    input: null,
+  };
+
+  /**
+   * Selection instance
+   */
+  private selection: Selection;
+
+  /**
+   * Input opening state
+   */
+  private inputOpened: boolean = false;
+
+  /**
+   * Available Inline Toolbar methods (open/close)
+   */
+  private inlineToolbar: any;
+
+  /**
+   * @param {object} api - CodeX Editor API
+   * @param {object} api.toolbar - Inline Toolbar API
+   */
+  constructor(api) {
+    this.inlineToolbar = api.toolbar;
+    this.selection = new Selection();
+  }
+
+  /**
+   * Create button for Inline Toolbar
+   */
+  public render(): HTMLElement {
+    this.nodes.button = document.createElement('button');
+    this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
+    this.nodes.button.appendChild($.svg('link', 15, 14));
+    this.nodes.button.appendChild($.svg('unlink', 16, 18));
+    return this.nodes.button;
+  }
+
+  /**
+   * Input for the link
+   */
+  public renderActions(): HTMLElement {
+    this.nodes.input = document.createElement('input');
+    this.nodes.input.placeholder = 'Add a link';
+    this.nodes.input.classList.add(this.CSS.input);
+    this.nodes.input.addEventListener('keydown', (event) => {
+      if (event.keyCode === this.ENTER_KEY ) {
+        this.enterPressed(event);
+      }
+    });
+    return this.nodes.input;
+  }
+
+  /**
+   * Handle clicks on the Inline Toolbar icon
+   * @param {Range} range
+   */
+  public surround(range: Range): void {
+
+    /**
+     * Save selection before change focus to the input
+     */
+    this.selection.save();
+
+    const parentAnchor = this.selection.findParentTag('A');
+
+    if (parentAnchor) {
+      this.selection.expandToTag(parentAnchor);
+      this.unlink();
+      this.closeActions();
+      this.checkState();
+      this.inlineToolbar.close();
+      return;
+    }
+
+    this.toggleActions();
+  }
+
+  /**
+   * Check selection and set activated state to button if there are <a> tag
+   * @param {Selection} selection
+   */
+  public checkState(selection?: Selection): boolean {
+    const anchorTag = this.selection.findParentTag('A');
+
+    if (anchorTag) {
+      this.nodes.button.classList.add(this.CSS.buttonUnlink);
+      this.nodes.button.classList.add(this.CSS.buttonActive);
+      this.openActions();
+
+      /**
+       * Fill input value with link href
+       */
+      const hrefAttr = anchorTag.getAttribute('href');
+      this.nodes.input.value = hrefAttr !== 'null' ? hrefAttr : '';
+    } else {
+      this.nodes.button.classList.remove(this.CSS.buttonUnlink);
+      this.nodes.button.classList.remove(this.CSS.buttonActive);
+    }
+
+    return !!anchorTag;
+  }
+
+  private toggleActions() {
+    if (!this.inputOpened) {
+      this.openActions(true);
+    } else {
+      this.closeActions();
+    }
+  }
+
+  /**
+   * @param {boolean} needFocus - on link creation we need to focus input. On editing - nope.
+   */
+  private openActions(needFocus: boolean = false) {
+    this.nodes.input.classList.add(this.CSS.inputShowed);
+    if (needFocus) {
+      this.nodes.input.focus();
+    }
+  }
+
+  /**
+   * Close input
+   */
+  private closeActions() {
+    this.nodes.input.classList.remove(this.CSS.inputShowed);
+    this.nodes.input.value = '';
+  }
+
+  /**
+   * Enter pressed on input
+   * @param {KeyboardEvent} event
+   */
+  private enterPressed(event: KeyboardEvent) {
+    let value = this.nodes.input.value || '';
+
+    if (!value.trim()) {
+      this.selection.restore();
+      this.unlink();
+      event.preventDefault();
+      this.closeActions();
+    }
+
+    if (!this.validateURL(value)) {
+      /**
+       * @todo show notification 'Incorrect Link'
+       */
+      _.log('Incorrect Link pasted', 'warn', value);
+      return;
+    }
+
+    value = this.prepareLink(value);
+
+    this.selection.restore();
+    this.insertLink(value);
+
+    /**
+     * Preventing events that will be able to happen
+     */
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+
+    this.closeActions();
+    this.inlineToolbar.close();
+    this.checkState();
+  }
+
+  /**
+   * Detects if passed string is URL
+   * @param  {string}  str
+   * @return {Boolean}
+   */
+  private validateURL(str: string): boolean {
+    /**
+     * Don't allow spaces
+     */
+    return !/\s/.test(str);
+
+  }
+  /**
+   * Process link before injection
+   * - sanitize
+   * - add protocol for links like 'google.com'
+   * @param {string} link - raw user input
+   */
+  private prepareLink(link: string): string {
+    link = link.trim();
+    link = this.addProtocol(link);
+    return link;
+  }
+
+  /**
+   * Add 'http' protocol to the links like 'vc.ru', 'google.com'
+   * @param {String} link
+   */
+  private addProtocol(link: string): string {
+    /**
+     * If protocol already exists, do nothing
+     */
+    if (/^(https?|mailto|ftp):\/\//.test(link)) {
+      return link;
+    }
+
+    /**
+     * We need to add missed HTTP protocol to the link, but skip 2 cases:
+     *     1) Internal links like "/general"
+     *     2) Anchors looks like "#results"
+     *     3) Protocol-relative URLs like "//google.com"
+     */
+    const isInternal = /^\/[^\/\s]/.test(link),
+      isAnchor = link.substring(0, 1) === '#',
+      isProtocolRelative = /^\/\/[^\/\s]/.test(link);
+
+    if (!isInternal && !isAnchor && !isProtocolRelative) {
+      link = 'http://' + link;
+    }
+
+    return link;
+  }
+
+  /**
+   * Inserts <a> tag with "href"
+   * @param {string} link - "href" value
+   */
+  private insertLink(link: string): void {
+
+    /**
+     * Edit all link, not selected part
+     */
+    const anchorTag = this.selection.findParentTag('A');
+
+    if (anchorTag) {
+      this.selection.expandToTag(anchorTag);
+    }
+
+    document.execCommand(this.commandLink, false, link);
+  }
+
+  /**
+   * Removes <a> tag
+   */
+  private unlink(): void {
+    document.execCommand(this.commandUnlink);
+  }
+}