├── .gitignore
├── .npmignore
├── README.md
├── dist
    └── bundle.js
├── example
    ├── .env
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    └── src
    │   ├── App.css
    │   ├── App.js
    │   ├── App.test.js
    │   ├── EditorJsTool.js
    │   ├── index.css
    │   ├── index.js
    │   ├── reportWebVitals.js
    │   └── setupTests.js
├── package-lock.json
├── package.json
├── src
    ├── Hyperlink.css
    ├── Hyperlink.js
    └── SelectionUtils.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | npm-debug.log
3 | .idea/*
4 | .DS_Store


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | assets/
3 | src/
4 | webpack.config.js
5 | yarn.lock


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://badgen.net/badge/Editor.js/v2.0/blue)
 2 | 
 3 | # Hyperlink Tool
 4 | 
 5 | A tool link with target & rel attribute for [Editor.js](https://editorjs.io).  
 6 | 
 7 | ![Screen Shot 2020-11-08 at 23 51 36](https://user-images.githubusercontent.com/22043198/98481955-acee3900-2230-11eb-8b9d-a76439dc258e.png)
 8 | 
 9 | ![Screen Shot 2020-11-08 at 23 51 43](https://user-images.githubusercontent.com/22043198/98481956-afe92980-2230-11eb-9a84-f22149befbc0.png)
10 | 
11 | ![Screen Shot 2020-11-08 at 23 52 04](https://user-images.githubusercontent.com/22043198/98481957-b11a5680-2230-11eb-9356-5e956f1f8d35.png)
12 | 
13 | ## Installation
14 | 
15 | ### Get the package via NPM
16 | 
17 | ```shell
18 | npm i editorjs-hyperlink -D
19 | ```
20 | ### or via Yarn
21 | 
22 | ```shell
23 | yarn add editorjs-hyperlink -D
24 | ```
25 | 
26 | Include module at your application
27 | 
28 | ```javascript
29 | const Hyperlink = require('editorjs-hyperlink');
30 | ```
31 | 
32 | ## Usage
33 | Add a new Tool to the `tools` property of the Editor.js initial config.
34 | 
35 | ```javascript
36 | var editor = EditorJS({
37 |   ...
38 |   
39 |   tools: {
40 |     ...
41 | 
42 |     hyperlink: {
43 |       class: Hyperlink,
44 |       config: {
45 |         shortcut: 'CMD+L',
46 |         target: '_blank',
47 |         rel: 'nofollow',
48 |         availableTargets: ['_blank', '_self'],
49 |         availableRels: ['author', 'noreferrer'],
50 |         validate: false,
51 |       }
52 |     },
53 | 
54 |     ...
55 |   },
56 | 
57 |   ...
58 | 
59 |   i18n: {
60 |     toolNames: {
61 |       Hyperlink: 'Link'
62 |     },
63 |     tools: {
64 |       hyperlink: {
65 |         Save: 'Salvar',
66 |         'Select target': 'Seleziona destinazione',
67 |         'Select rel': 'Wählen rel'
68 |       }
69 |     }
70 |   }
71 |   
72 |   ...
73 | });
74 | ```
75 | 
76 | ## Config Params (optional)
77 | 
78 | | Field  | Type     | Description      |
79 | | ------ | -------- | ---------------- |
80 | | shortcut  | `string` | Shortcut, defaults to 'CMD+L' |
81 | | target | `string` | Defines a default target, defaults to null |
82 | | rel | `string` | Defines a default rel, defaults to null |
83 | | availableTargets | `string[]` | Available link targets, defaults to all targets.<br>If empty array is provided, the control will be hidden and the default value applied. |
84 | | availableRels | `string[]` | Available link rels, defaults to all rels.<br>If empty array is provided, the control will be hidden and the default value applied. |
85 | | validate | `boolean` | Defines if an URL should be validated on saving |
86 | 
87 | 
88 | ## License
89 | [MIT](https://tamit.info)


--------------------------------------------------------------------------------
/dist/bundle.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["Hyperlink"] = factory();
  8 | 	else
  9 | 		root["Hyperlink"] = factory();
 10 | })(window, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 50 | /******/ 		}
 51 | /******/ 	};
 52 | /******/
 53 | /******/ 	// define __esModule on exports
 54 | /******/ 	__webpack_require__.r = function(exports) {
 55 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 56 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 57 | /******/ 		}
 58 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 59 | /******/ 	};
 60 | /******/
 61 | /******/ 	// create a fake namespace object
 62 | /******/ 	// mode & 1: value is a module id, require it
 63 | /******/ 	// mode & 2: merge all properties of value into the ns
 64 | /******/ 	// mode & 4: return value when already ns object
 65 | /******/ 	// mode & 8|1: behave like require
 66 | /******/ 	__webpack_require__.t = function(value, mode) {
 67 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 68 | /******/ 		if(mode & 8) return value;
 69 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 70 | /******/ 		var ns = Object.create(null);
 71 | /******/ 		__webpack_require__.r(ns);
 72 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 73 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 74 | /******/ 		return ns;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 78 | /******/ 	__webpack_require__.n = function(module) {
 79 | /******/ 		var getter = module && module.__esModule ?
 80 | /******/ 			function getDefault() { return module['default']; } :
 81 | /******/ 			function getModuleExports() { return module; };
 82 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 83 | /******/ 		return getter;
 84 | /******/ 	};
 85 | /******/
 86 | /******/ 	// Object.prototype.hasOwnProperty.call
 87 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 88 | /******/
 89 | /******/ 	// __webpack_public_path__
 90 | /******/ 	__webpack_require__.p = "/";
 91 | /******/
 92 | /******/
 93 | /******/ 	// Load entry module and return exports
 94 | /******/ 	return __webpack_require__(__webpack_require__.s = "./src/Hyperlink.js");
 95 | /******/ })
 96 | /************************************************************************/
 97 | /******/ ({
 98 | 
 99 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/Hyperlink.css":
100 | /*!*****************************************************************!*\
101 |   !*** ./node_modules/css-loader/dist/cjs.js!./src/Hyperlink.css ***!
102 |   \*****************************************************************/
103 | /*! no static exports found */
104 | /***/ (function(module, exports, __webpack_require__) {
105 | 
106 | eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \".ce-inline-tool-hyperlink-wrapper {\\r\\n    outline: none;\\r\\n    border: 0;\\r\\n    border-radius: 0 0 4px 4px;\\r\\n    margin: 0;\\r\\n    font-size: 13px;\\r\\n    padding: 10px;\\r\\n    width: 100%;\\r\\n    -webkit-box-sizing: border-box;\\r\\n    box-sizing: border-box;\\r\\n    display: none;\\r\\n    font-weight: 500;\\r\\n    border-top: 1px solid rgba(201,201,204,.48);\\r\\n}\\r\\n\\r\\n.ce-inline-tool-hyperlink-wrapper.ce-inline-tool-hyperlink-wrapper--showed {\\r\\n    display: block;\\r\\n}\\r\\n\\r\\n.ce-inline-tool-hyperlink--input,\\r\\n.ce-inline-tool-hyperlink--select-target,\\r\\n.ce-inline-tool-hyperlink--select-rel {\\r\\n    border: 1px solid rgba(201,201,204,.48);\\r\\n    -webkit-box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);\\r\\n    box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);\\r\\n    border-radius: 5px;\\r\\n    padding: 5px 8px;\\r\\n    margin-bottom: 10px;\\r\\n    outline: none;\\r\\n    width: 100%;\\r\\n    -webkit-box-sizing: border-box;\\r\\n    box-sizing: border-box;\\r\\n}\\r\\n\\r\\n.ce-inline-tool-hyperlink--select-target,\\r\\n.ce-inline-tool-hyperlink--select-rel {\\r\\n    width: 48%;\\r\\n    display: inline-block;\\r\\n}\\r\\n.ce-inline-tool-hyperlink--select-target {\\r\\n    margin-right: 2%;\\r\\n}\\r\\n.ce-inline-tool-hyperlink--select-rel {\\r\\n    margin-left: 2%;\\r\\n}\\r\\n\\r\\n.ce-inline-tool-hyperlink--button {\\r\\n    display: block;\\r\\n    width: 100%;\\r\\n    background-color: #34c38f;\\r\\n    color: #fff;\\r\\n    padding: 7px 0;\\r\\n    border: none;\\r\\n    text-align: center;\\r\\n    text-decoration: none;\\r\\n    font-size: 16px;\\r\\n    border-radius: 5px;\\r\\n    cursor: pointer;\\r\\n}\\r\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack://Hyperlink/./src/Hyperlink.css?./node_modules/css-loader/dist/cjs.js");
107 | 
108 | /***/ }),
109 | 
110 | /***/ "./node_modules/css-loader/dist/runtime/api.js":
111 | /*!*****************************************************!*\
112 |   !*** ./node_modules/css-loader/dist/runtime/api.js ***!
113 |   \*****************************************************/
114 | /*! no static exports found */
115 | /***/ (function(module, exports, __webpack_require__) {
116 | 
117 | "use strict";
118 | eval("\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item, useSourceMap);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join('');\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery, dedupe) {\n    if (typeof modules === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    if (dedupe) {\n      for (var i = 0; i < this.length; i++) {\n        // eslint-disable-next-line prefer-destructuring\n        var id = this[i][0];\n\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = [].concat(modules[_i]);\n\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        // eslint-disable-next-line no-continue\n        continue;\n      }\n\n      if (mediaQuery) {\n        if (!item[2]) {\n          item[2] = mediaQuery;\n        } else {\n          item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n        }\n      }\n\n      list.push(item);\n    }\n  };\n\n  return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n  var cssMapping = item[3];\n\n  if (!cssMapping) {\n    return content;\n  }\n\n  if (useSourceMap && typeof btoa === 'function') {\n    var sourceMapping = toComment(cssMapping);\n    var sourceURLs = cssMapping.sources.map(function (source) {\n      return \"/*# sourceURL=\".concat(cssMapping.sourceRoot || '').concat(source, \" */\");\n    });\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n  }\n\n  return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n  // eslint-disable-next-line no-undef\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n  var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n  return \"/*# \".concat(data, \" */\");\n}\n\n//# sourceURL=webpack://Hyperlink/./node_modules/css-loader/dist/runtime/api.js?");
119 | 
120 | /***/ }),
121 | 
122 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
123 | /*!****************************************************************************!*\
124 |   !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
125 |   \****************************************************************************/
126 | /*! no static exports found */
127 | /***/ (function(module, exports, __webpack_require__) {
128 | 
129 | "use strict";
130 | eval("\n\nvar isOldIE = function isOldIE() {\n  var memo;\n  return function memorize() {\n    if (typeof memo === 'undefined') {\n      // Test for IE <= 9 as proposed by Browserhacks\n      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n      // Tests for existence of standard globals is to allow style-loader\n      // to operate correctly into non-standard environments\n      // @see https://github.com/webpack-contrib/style-loader/issues/177\n      memo = Boolean(window && document && document.all && !window.atob);\n    }\n\n    return memo;\n  };\n}();\n\nvar getTarget = function getTarget() {\n  var memo = {};\n  return function memorize(target) {\n    if (typeof memo[target] === 'undefined') {\n      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n        try {\n          // This will throw an exception if access to iframe is blocked\n          // due to cross-origin restrictions\n          styleTarget = styleTarget.contentDocument.head;\n        } catch (e) {\n          // istanbul ignore next\n          styleTarget = null;\n        }\n      }\n\n      memo[target] = styleTarget;\n    }\n\n    return memo[target];\n  };\n}();\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n  var result = -1;\n\n  for (var i = 0; i < stylesInDom.length; i++) {\n    if (stylesInDom[i].identifier === identifier) {\n      result = i;\n      break;\n    }\n  }\n\n  return result;\n}\n\nfunction modulesToDom(list, options) {\n  var idCountMap = {};\n  var identifiers = [];\n\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var count = idCountMap[id] || 0;\n    var identifier = \"\".concat(id, \" \").concat(count);\n    idCountMap[id] = count + 1;\n    var index = getIndexByIdentifier(identifier);\n    var obj = {\n      css: item[1],\n      media: item[2],\n      sourceMap: item[3]\n    };\n\n    if (index !== -1) {\n      stylesInDom[index].references++;\n      stylesInDom[index].updater(obj);\n    } else {\n      stylesInDom.push({\n        identifier: identifier,\n        updater: addStyle(obj, options),\n        references: 1\n      });\n    }\n\n    identifiers.push(identifier);\n  }\n\n  return identifiers;\n}\n\nfunction insertStyleElement(options) {\n  var style = document.createElement('style');\n  var attributes = options.attributes || {};\n\n  if (typeof attributes.nonce === 'undefined') {\n    var nonce =  true ? __webpack_require__.nc : undefined;\n\n    if (nonce) {\n      attributes.nonce = nonce;\n    }\n  }\n\n  Object.keys(attributes).forEach(function (key) {\n    style.setAttribute(key, attributes[key]);\n  });\n\n  if (typeof options.insert === 'function') {\n    options.insert(style);\n  } else {\n    var target = getTarget(options.insert || 'head');\n\n    if (!target) {\n      throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n    }\n\n    target.appendChild(style);\n  }\n\n  return style;\n}\n\nfunction removeStyleElement(style) {\n  // istanbul ignore if\n  if (style.parentNode === null) {\n    return false;\n  }\n\n  style.parentNode.removeChild(style);\n}\n/* istanbul ignore next  */\n\n\nvar replaceText = function replaceText() {\n  var textStore = [];\n  return function replace(index, replacement) {\n    textStore[index] = replacement;\n    return textStore.filter(Boolean).join('\\n');\n  };\n}();\n\nfunction applyToSingletonTag(style, index, remove, obj) {\n  var css = remove ? '' : obj.media ? \"@media \".concat(obj.media, \" {\").concat(obj.css, \"}\") : obj.css; // For old IE\n\n  /* istanbul ignore if  */\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = replaceText(index, css);\n  } else {\n    var cssNode = document.createTextNode(css);\n    var childNodes = style.childNodes;\n\n    if (childNodes[index]) {\n      style.removeChild(childNodes[index]);\n    }\n\n    if (childNodes.length) {\n      style.insertBefore(cssNode, childNodes[index]);\n    } else {\n      style.appendChild(cssNode);\n    }\n  }\n}\n\nfunction applyToTag(style, options, obj) {\n  var css = obj.css;\n  var media = obj.media;\n  var sourceMap = obj.sourceMap;\n\n  if (media) {\n    style.setAttribute('media', media);\n  } else {\n    style.removeAttribute('media');\n  }\n\n  if (sourceMap && typeof btoa !== 'undefined') {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  } // For old IE\n\n  /* istanbul ignore if  */\n\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    while (style.firstChild) {\n      style.removeChild(style.firstChild);\n    }\n\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nvar singleton = null;\nvar singletonCounter = 0;\n\nfunction addStyle(obj, options) {\n  var style;\n  var update;\n  var remove;\n\n  if (options.singleton) {\n    var styleIndex = singletonCounter++;\n    style = singleton || (singleton = insertStyleElement(options));\n    update = applyToSingletonTag.bind(null, style, styleIndex, false);\n    remove = applyToSingletonTag.bind(null, style, styleIndex, true);\n  } else {\n    style = insertStyleElement(options);\n    update = applyToTag.bind(null, style, options);\n\n    remove = function remove() {\n      removeStyleElement(style);\n    };\n  }\n\n  update(obj);\n  return function updateStyle(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n        return;\n      }\n\n      update(obj = newObj);\n    } else {\n      remove();\n    }\n  };\n}\n\nmodule.exports = function (list, options) {\n  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n  // tags it will allow on a page\n\n  if (!options.singleton && typeof options.singleton !== 'boolean') {\n    options.singleton = isOldIE();\n  }\n\n  list = list || [];\n  var lastIdentifiers = modulesToDom(list, options);\n  return function update(newList) {\n    newList = newList || [];\n\n    if (Object.prototype.toString.call(newList) !== '[object Array]') {\n      return;\n    }\n\n    for (var i = 0; i < lastIdentifiers.length; i++) {\n      var identifier = lastIdentifiers[i];\n      var index = getIndexByIdentifier(identifier);\n      stylesInDom[index].references--;\n    }\n\n    var newLastIdentifiers = modulesToDom(newList, options);\n\n    for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n      var _identifier = lastIdentifiers[_i];\n\n      var _index = getIndexByIdentifier(_identifier);\n\n      if (stylesInDom[_index].references === 0) {\n        stylesInDom[_index].updater();\n\n        stylesInDom.splice(_index, 1);\n      }\n    }\n\n    lastIdentifiers = newLastIdentifiers;\n  };\n};\n\n//# sourceURL=webpack://Hyperlink/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
131 | 
132 | /***/ }),
133 | 
134 | /***/ "./src/Hyperlink.css":
135 | /*!***************************!*\
136 |   !*** ./src/Hyperlink.css ***!
137 |   \***************************/
138 | /*! no static exports found */
139 | /***/ (function(module, exports, __webpack_require__) {
140 | 
141 | eval("var api = __webpack_require__(/*! ../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n            var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js!./Hyperlink.css */ \"./node_modules/css-loader/dist/cjs.js!./src/Hyperlink.css\");\n\n            content = content.__esModule ? content.default : content;\n\n            if (typeof content === 'string') {\n              content = [[module.i, content, '']];\n            }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nmodule.exports = content.locals || {};\n\n//# sourceURL=webpack://Hyperlink/./src/Hyperlink.css?");
142 | 
143 | /***/ }),
144 | 
145 | /***/ "./src/Hyperlink.js":
146 | /*!**************************!*\
147 |   !*** ./src/Hyperlink.js ***!
148 |   \**************************/
149 | /*! exports provided: default */
150 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
151 | 
152 | "use strict";
153 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Hyperlink; });\n/* harmony import */ var _SelectionUtils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SelectionUtils */ \"./src/SelectionUtils.js\");\n/* harmony import */ var _Hyperlink_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Hyperlink.css */ \"./src/Hyperlink.css\");\n/* harmony import */ var _Hyperlink_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Hyperlink_css__WEBPACK_IMPORTED_MODULE_1__);\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\n\n\n\nvar Hyperlink = /*#__PURE__*/function () {\n  function Hyperlink(_ref) {\n    var data = _ref.data,\n        config = _ref.config,\n        api = _ref.api,\n        readOnly = _ref.readOnly;\n\n    _classCallCheck(this, Hyperlink);\n\n    this.toolbar = api.toolbar;\n    this.inlineToolbar = api.inlineToolbar;\n    this.tooltip = api.tooltip;\n    this.i18n = api.i18n;\n    this.config = config;\n    this.selection = new _SelectionUtils__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n    this.commandLink = 'createLink';\n    this.commandUnlink = 'unlink';\n    this.CSS = {\n      wrapper: 'ce-inline-tool-hyperlink-wrapper',\n      wrapperShowed: 'ce-inline-tool-hyperlink-wrapper--showed',\n      button: 'ce-inline-tool',\n      buttonActive: 'ce-inline-tool--active',\n      buttonModifier: 'ce-inline-tool--link',\n      buttonUnlink: 'ce-inline-tool--unlink',\n      input: 'ce-inline-tool-hyperlink--input',\n      selectTarget: 'ce-inline-tool-hyperlink--select-target',\n      selectRel: 'ce-inline-tool-hyperlink--select-rel',\n      buttonSave: 'ce-inline-tool-hyperlink--button'\n    };\n    this.targetAttributes = this.config.availableTargets || ['_blank', // Opens the linked document in a new window or tab\n    '_self', // Opens the linked document in the same frame as it was clicked (this is default)\n    '_parent', // Opens the linked document in the parent frame\n    '_top' // Opens the linked document in the full body of the window\n    ];\n    this.relAttributes = this.config.availableRels || ['alternate', //Provides a link to an alternate representation of the document (i.e. print page, translated or mirror)\n    'author', //Provides a link to the author of the document\n    'bookmark', //Permanent URL used for bookmarking\n    'external', //Indicates that the referenced document is not part of the same site as the current document\n    'help', //Provides a link to a help document\n    'license', //Provides a link to licensing information for the document\n    'next', //Provides a link to the next document in the series\n    'nofollow', //Links to an unendorsed document, like a paid link. (\"nofollow\" is used by Google, to specify that the Google search spider should not follow that link)\n    'noreferrer', //Requires that the browser should not send an HTTP referer header if the user follows the hyperlink\n    'noopener', //Requires that any browsing context created by following the hyperlink must not have an opener browsing context\n    'prev', //The previous document in a selection\n    'search', //Links to a search tool for the document\n    'tag' //A tag (keyword) for the current document\n    ];\n    this.nodes = {\n      button: null,\n      wrapper: null,\n      input: null,\n      selectTarget: null,\n      selectRel: null,\n      buttonSave: null\n    };\n    this.inputOpened = false;\n  }\n\n  _createClass(Hyperlink, [{\n    key: \"render\",\n    value: function render() {\n      this.nodes.button = document.createElement('button');\n      this.nodes.button.type = 'button';\n      this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);\n      this.nodes.button.appendChild(this.iconSvg('link', 14, 10));\n      this.nodes.button.appendChild(this.iconSvg('unlink', 15, 11));\n      return this.nodes.button;\n    }\n  }, {\n    key: \"renderActions\",\n    value: function renderActions() {\n      var _this = this;\n\n      this.nodes.wrapper = document.createElement('div');\n      this.nodes.wrapper.classList.add(this.CSS.wrapper); // Input\n\n      this.nodes.input = document.createElement('input');\n      this.nodes.input.placeholder = 'https://...';\n      this.nodes.input.classList.add(this.CSS.input);\n      var i; // Target\n\n      this.nodes.selectTarget = document.createElement('select');\n      this.nodes.selectTarget.classList.add(this.CSS.selectTarget);\n      this.addOption(this.nodes.selectTarget, this.i18n.t('Select target'), '');\n\n      for (i = 0; i < this.targetAttributes.length; i++) {\n        this.addOption(this.nodes.selectTarget, this.targetAttributes[i], this.targetAttributes[i]);\n      }\n\n      if (!!this.config.target) {\n        this.nodes.selectTarget.value = this.config.target;\n      } // Rel\n\n\n      this.nodes.selectRel = document.createElement('select');\n      this.nodes.selectRel.classList.add(this.CSS.selectRel);\n      this.addOption(this.nodes.selectRel, this.i18n.t('Select rel'), '');\n\n      for (i = 0; i < this.relAttributes.length; i++) {\n        this.addOption(this.nodes.selectRel, this.relAttributes[i], this.relAttributes[i]);\n      }\n\n      if (!!this.config.rel) {\n        this.nodes.selectRel.value = this.config.rel;\n      } // Button\n\n\n      this.nodes.buttonSave = document.createElement('button');\n      this.nodes.buttonSave.type = 'button';\n      this.nodes.buttonSave.classList.add(this.CSS.buttonSave);\n      this.nodes.buttonSave.innerHTML = this.i18n.t('Save');\n      this.nodes.buttonSave.addEventListener('click', function (event) {\n        _this.savePressed(event);\n      }); // append\n\n      this.nodes.wrapper.appendChild(this.nodes.input);\n      this.nodes.wrapper.appendChild(this.nodes.selectTarget);\n      this.nodes.wrapper.appendChild(this.nodes.selectRel);\n      this.nodes.wrapper.appendChild(this.nodes.buttonSave);\n      return this.nodes.wrapper;\n    }\n  }, {\n    key: \"surround\",\n    value: function surround(range) {\n      if (range) {\n        if (!this.inputOpened) {\n          this.selection.setFakeBackground();\n          this.selection.save();\n        } else {\n          this.selection.restore();\n          this.selection.removeFakeBackground();\n        }\n\n        var parentAnchor = this.selection.findParentTag('A');\n\n        if (parentAnchor) {\n          this.selection.expandToTag(parentAnchor);\n          this.unlink();\n          this.closeActions();\n          this.checkState();\n          this.toolbar.close();\n          return;\n        }\n      }\n\n      this.toggleActions();\n    }\n  }, {\n    key: \"checkState\",\n    value: function checkState() {\n      var selection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;\n      var anchorTag = this.selection.findParentTag('A');\n\n      if (anchorTag) {\n        this.nodes.button.classList.add(this.CSS.buttonUnlink);\n        this.nodes.button.classList.add(this.CSS.buttonActive);\n        this.openActions();\n        var hrefAttr = anchorTag.getAttribute('href');\n        var targetAttr = anchorTag.getAttribute('target');\n        var relAttr = anchorTag.getAttribute('rel');\n        this.nodes.input.value = !!hrefAttr ? hrefAttr : '';\n        this.nodes.selectTarget.value = !!targetAttr ? targetAttr : '';\n        this.nodes.selectRel.value = !!relAttr ? relAttr : '';\n        this.selection.save();\n      } else {\n        this.nodes.button.classList.remove(this.CSS.buttonUnlink);\n        this.nodes.button.classList.remove(this.CSS.buttonActive);\n      }\n\n      return !!anchorTag;\n    }\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      this.closeActions();\n    }\n  }, {\n    key: \"toggleActions\",\n    value: function toggleActions() {\n      if (!this.inputOpened) {\n        this.openActions(true);\n      } else {\n        this.closeActions(false);\n      }\n    }\n  }, {\n    key: \"openActions\",\n    value: function openActions() {\n      var needFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n      this.nodes.wrapper.classList.add(this.CSS.wrapperShowed);\n\n      if (needFocus) {\n        this.nodes.input.focus();\n      }\n\n      this.inputOpened = true;\n    }\n  }, {\n    key: \"closeActions\",\n    value: function closeActions() {\n      var clearSavedSelection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n\n      if (this.selection.isFakeBackgroundEnabled) {\n        var currentSelection = new _SelectionUtils__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n        currentSelection.save();\n        this.selection.restore();\n        this.selection.removeFakeBackground();\n        currentSelection.restore();\n      }\n\n      this.nodes.wrapper.classList.remove(this.CSS.wrapperShowed);\n      this.nodes.input.value = '';\n      this.nodes.selectTarget.value = '';\n      this.nodes.selectRel.value = '';\n\n      if (clearSavedSelection) {\n        this.selection.clearSaved();\n      }\n\n      this.inputOpened = false;\n    }\n  }, {\n    key: \"savePressed\",\n    value: function savePressed(event) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.stopImmediatePropagation();\n      var value = this.nodes.input.value || '';\n      var target = this.nodes.selectTarget.value || '';\n      var rel = this.nodes.selectRel.value || '';\n\n      if (!value.trim()) {\n        this.selection.restore();\n        this.unlink();\n        event.preventDefault();\n        this.closeActions();\n      } // if (!this.validateURL(value)) {\n      //     this.tooltip.show(this.nodes.input, 'Pasted link is not valid.', {\n      //         placement: 'top',\n      //     });\n      //     setTimeout(() => {\n      //         this.tooltip.hide();\n      //     }, 1000);\n      //     return;\n      // }\n\n\n      value = this.prepareLink(value);\n      this.selection.restore();\n      this.selection.removeFakeBackground();\n      this.insertLink(value, target, rel);\n      this.selection.collapseToEnd();\n      this.inlineToolbar.close();\n    }\n  }, {\n    key: \"validateURL\",\n    value: function validateURL(str) {\n      var pattern = new RegExp('^(https?:\\\\/\\\\/)?' + // protocol\n      '((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.)+[a-z]{2,}|' + // domain name\n      '((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))' + // OR ip (v4) address\n      '(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*' + // port and path\n      '(\\\\?[;&a-z\\\\d%_.~+=-]*)?' + // query string\n      '(\\\\#[-a-z\\\\d_]*)?$', 'i'); // fragment locator\n\n      return !!pattern.test(str);\n    }\n  }, {\n    key: \"prepareLink\",\n    value: function prepareLink(link) {\n      link = link.trim();\n      link = this.addProtocol(link);\n      return link;\n    }\n  }, {\n    key: \"addProtocol\",\n    value: function addProtocol(link) {\n      if (/^(\\w+):(\\/\\/)?/.test(link)) {\n        return link;\n      }\n\n      var isInternal = /^\\/[^/\\s]/.test(link),\n          isAnchor = link.substring(0, 1) === '#',\n          isProtocolRelative = /^\\/\\/[^/\\s]/.test(link);\n\n      if (!isInternal && !isAnchor && !isProtocolRelative) {\n        link = 'http://' + link;\n      }\n\n      return link;\n    }\n  }, {\n    key: \"insertLink\",\n    value: function insertLink(link) {\n      var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';\n      var rel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';\n      var anchorTag = this.selection.findParentTag('A');\n\n      if (anchorTag) {\n        this.selection.expandToTag(anchorTag);\n      } else {\n        document.execCommand(this.commandLink, false, link);\n        anchorTag = this.selection.findParentTag('A');\n      }\n\n      if (anchorTag) {\n        if (!!target) {\n          anchorTag['target'] = target;\n        } else {\n          anchorTag.removeAttribute('target');\n        }\n\n        if (!!rel) {\n          anchorTag['rel'] = rel;\n        } else {\n          anchorTag.removeAttribute('rel');\n        }\n      }\n    }\n  }, {\n    key: \"unlink\",\n    value: function unlink() {\n      document.execCommand(this.commandUnlink);\n    }\n  }, {\n    key: \"iconSvg\",\n    value: function iconSvg(name) {\n      var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 14;\n      var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 14;\n      var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n      icon.classList.add('icon', 'icon--' + name);\n      icon.setAttribute('width', width + 'px');\n      icon.setAttribute('height', height + 'px');\n      icon.innerHTML = \"<use xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" xlink:href=\\\"#\".concat(name, \"\\\"></use>\");\n      return icon;\n    }\n  }, {\n    key: \"addOption\",\n    value: function addOption(element, text) {\n      var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n      var option = document.createElement('option');\n      option.text = text;\n      option.value = value;\n      element.add(option);\n    }\n  }, {\n    key: \"shortcut\",\n    get: function get() {\n      return this.config.shortcut || 'CMD+L';\n    }\n  }, {\n    key: \"title\",\n    get: function get() {\n      return 'Hyperlink';\n    }\n  }], [{\n    key: \"isInline\",\n    get: function get() {\n      return true;\n    }\n  }, {\n    key: \"sanitize\",\n    get: function get() {\n      return {\n        a: {\n          href: true,\n          target: true,\n          rel: true\n        }\n      };\n    }\n  }]);\n\n  return Hyperlink;\n}();\n\n\n\n//# sourceURL=webpack://Hyperlink/./src/Hyperlink.js?");
154 | 
155 | /***/ }),
156 | 
157 | /***/ "./src/SelectionUtils.js":
158 | /*!*******************************!*\
159 |   !*** ./src/SelectionUtils.js ***!
160 |   \*******************************/
161 | /*! exports provided: default */
162 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
163 | 
164 | "use strict";
165 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return SelectionUtils; });\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar SelectionUtils = /*#__PURE__*/function () {\n  function SelectionUtils() {\n    _classCallCheck(this, SelectionUtils);\n\n    this.selection = null;\n    this.savedSelectionRange = null;\n    this.isFakeBackgroundEnabled = false;\n    this.commandBackground = 'backColor';\n    this.commandRemoveFormat = 'removeFormat';\n  }\n\n  _createClass(SelectionUtils, [{\n    key: \"isElement\",\n    value: function isElement(node) {\n      return node && _typeof(node) === 'object' && node.nodeType && node.nodeType === Node.ELEMENT_NODE;\n    }\n  }, {\n    key: \"isContentEditable\",\n    value: function isContentEditable(element) {\n      return element.contentEditable === 'true';\n    }\n  }, {\n    key: \"isNativeInput\",\n    value: function isNativeInput(target) {\n      var nativeInputs = ['INPUT', 'TEXTAREA'];\n      return target && target.tagName ? nativeInputs.includes(target.tagName) : false;\n    }\n  }, {\n    key: \"canSetCaret\",\n    value: function canSetCaret(target) {\n      var result = true;\n\n      if (this.isNativeInput(target)) {\n        switch (target.type) {\n          case 'file':\n          case 'checkbox':\n          case 'radio':\n          case 'hidden':\n          case 'submit':\n          case 'button':\n          case 'image':\n          case 'reset':\n            result = false;\n            break;\n\n          default:\n        }\n      } else {\n        result = this.isContentEditable(target);\n      }\n\n      return result;\n    }\n  }, {\n    key: \"CSS\",\n    value: function CSS() {\n      return {\n        editorWrapper: 'codex-editor',\n        editorZone: 'codex-editor__redactor'\n      };\n    }\n  }, {\n    key: \"anchorNode\",\n    value: function anchorNode() {\n      var selection = window.getSelection();\n      return selection ? selection.anchorNode : null;\n    }\n  }, {\n    key: \"anchorElement\",\n    value: function anchorElement() {\n      var selection = window.getSelection();\n\n      if (!selection) {\n        return null;\n      }\n\n      var anchorNode = selection.anchorNode;\n\n      if (!anchorNode) {\n        return null;\n      }\n\n      if (!this.isElement(anchorNode)) {\n        return anchorNode.parentElement;\n      } else {\n        return anchorNode;\n      }\n    }\n  }, {\n    key: \"anchorOffset\",\n    value: function anchorOffset() {\n      var selection = window.getSelection();\n      return selection ? selection.anchorOffset : null;\n    }\n  }, {\n    key: \"isCollapsed\",\n    value: function isCollapsed() {\n      var selection = window.getSelection();\n      return selection ? selection.isCollapsed : null;\n    }\n  }, {\n    key: \"isAtEditor\",\n    value: function isAtEditor() {\n      var selection = SelectionUtils.get();\n      var selectedNode = selection.anchorNode || selection.focusNode;\n\n      if (selectedNode && selectedNode.nodeType === Node.TEXT_NODE) {\n        selectedNode = selectedNode.parentNode;\n      }\n\n      var editorZone = null;\n\n      if (selectedNode) {\n        editorZone = selectedNode.closest(\".\".concat(SelectionUtils.CSS.editorZone));\n      }\n\n      return editorZone && editorZone.nodeType === Node.ELEMENT_NODE;\n    }\n  }, {\n    key: \"isSelectionExists\",\n    value: function isSelectionExists() {\n      var selection = SelectionUtils.get();\n      return !!selection.anchorNode;\n    }\n  }, {\n    key: \"get\",\n    value: function get() {\n      return window.getSelection();\n    }\n  }, {\n    key: \"setCursor\",\n    value: function setCursor(element) {\n      var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n      var range = document.createRange();\n      var selection = window.getSelection();\n\n      if (this.isNativeInput(element)) {\n        if (!this.canSetCaret(element)) {\n          return;\n        }\n\n        element.focus();\n        element.selectionStart = element.selectionEnd = offset;\n        return element.getBoundingClientRect();\n      }\n\n      range.setStart(element, offset);\n      range.setEnd(element, offset);\n      selection.removeAllRanges();\n      selection.addRange(range);\n      return range.getBoundingClientRect();\n    }\n  }, {\n    key: \"removeFakeBackground\",\n    value: function removeFakeBackground() {\n      if (!this.isFakeBackgroundEnabled) {\n        return;\n      }\n\n      this.isFakeBackgroundEnabled = false;\n      document.execCommand(this.commandRemoveFormat);\n    }\n  }, {\n    key: \"setFakeBackground\",\n    value: function setFakeBackground() {\n      document.execCommand(this.commandBackground, false, '#a8d6ff');\n      this.isFakeBackgroundEnabled = true;\n    }\n  }, {\n    key: \"save\",\n    value: function save() {\n      this.savedSelectionRange = SelectionUtils.range;\n    }\n  }, {\n    key: \"restore\",\n    value: function restore() {\n      if (!this.savedSelectionRange) {\n        return;\n      }\n\n      var sel = window.getSelection();\n      sel.removeAllRanges();\n      sel.addRange(this.savedSelectionRange);\n    }\n  }, {\n    key: \"clearSaved\",\n    value: function clearSaved() {\n      this.savedSelectionRange = null;\n    }\n  }, {\n    key: \"collapseToEnd\",\n    value: function collapseToEnd() {\n      var sel = window.getSelection();\n      var range = document.createRange();\n      range.selectNodeContents(sel.focusNode);\n      range.collapse(false);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    }\n  }, {\n    key: \"findParentTag\",\n    value: function findParentTag(tagName) {\n      var className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      var searchDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;\n      var selection = window.getSelection();\n      var parentTag = null;\n\n      if (!selection || !selection.anchorNode || !selection.focusNode) {\n        return null;\n      }\n\n      var boundNodes = [selection.anchorNode, selection.focusNode];\n      boundNodes.forEach(function (parent) {\n        var searchDepthIterable = searchDepth;\n\n        while (searchDepthIterable > 0 && parent.parentNode) {\n          if (parent.tagName === tagName) {\n            parentTag = parent;\n\n            if (className && parent.classList && !parent.classList.contains(className)) {\n              parentTag = null;\n            }\n\n            if (parentTag) {\n              break;\n            }\n          }\n\n          parent = parent.parentNode;\n          searchDepthIterable--;\n        }\n      });\n      return parentTag;\n    }\n  }, {\n    key: \"expandToTag\",\n    value: function expandToTag(element) {\n      var selection = window.getSelection();\n      selection.removeAllRanges();\n      var range = document.createRange();\n      range.selectNodeContents(element);\n      selection.addRange(range);\n    }\n  }], [{\n    key: \"range\",\n    get: function get() {\n      var selection = window.getSelection();\n      return selection && selection.rangeCount ? selection.getRangeAt(0) : null;\n    }\n  }, {\n    key: \"rect\",\n    get: function get() {\n      var sel = document.selection,\n          range;\n      var rect = {\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0\n      };\n\n      if (sel && sel.type !== 'Control') {\n        range = sel.createRange();\n        rect.x = range.boundingLeft;\n        rect.y = range.boundingTop;\n        rect.width = range.boundingWidth;\n        rect.height = range.boundingHeight;\n        return rect;\n      }\n\n      if (!window.getSelection) {\n        return rect;\n      }\n\n      sel = window.getSelection();\n\n      if (sel.rangeCount === null || isNaN(sel.rangeCount)) {\n        return rect;\n      }\n\n      if (sel.rangeCount === 0) {\n        return rect;\n      }\n\n      range = sel.getRangeAt(0).cloneRange();\n\n      if (range.getBoundingClientRect) {\n        rect = range.getBoundingClientRect();\n      }\n\n      if (rect.x === 0 && rect.y === 0) {\n        var span = document.createElement('span');\n\n        if (span.getBoundingClientRect) {\n          span.appendChild(document.createTextNode(\"\\u200B\"));\n          range.insertNode(span);\n          rect = span.getBoundingClientRect();\n          var spanParent = span.parentNode;\n          spanParent.removeChild(span);\n          spanParent.normalize();\n        }\n      }\n\n      return rect;\n    }\n  }, {\n    key: \"text\",\n    get: function get() {\n      return window.getSelection ? window.getSelection().toString() : '';\n    }\n  }]);\n\n  return SelectionUtils;\n}();\n\n\n\n//# sourceURL=webpack://Hyperlink/./src/SelectionUtils.js?");
166 | 
167 | /***/ })
168 | 
169 | /******/ })["default"];
170 | });


--------------------------------------------------------------------------------
/example/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
2 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.1.2",
 8 |     "@testing-library/user-event": "^12.2.2",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.0",
12 |     "web-vitals": "^0.2.4"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject",
19 |     "symlink": "cd node_modules && ln -s ../.. ./editorjs-hyperlink"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   },
39 |   "devDependencies": {
40 |     "@editorjs/editorjs": "^2.19.0",
41 |     "@editorjs/paragraph": "^2.8.0",
42 |     "react-editor-js": "^1.6.2"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trinhtam/editorjs-hyperlink/4ada6b531a5478b426f062f576aaab9e3b8042b9/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trinhtam/editorjs-hyperlink/4ada6b531a5478b426f062f576aaab9e3b8042b9/example/public/logo192.png


--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trinhtam/editorjs-hyperlink/4ada6b531a5478b426f062f576aaab9e3b8042b9/example/public/logo512.png


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/example/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: #dddddd;
3 | }
4 | 
5 | .ce-block__content {
6 |   background: #fff;
7 | }


--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
 1 | import EditorJs from 'react-editor-js';
 2 | import {EDITOR_JS_TOOLS} from "./EditorJsTool";
 3 | import './App.css';
 4 | 
 5 | function App() {
 6 |   let data = {};
 7 |   return (
 8 |     <div className="App">
 9 |       <EditorJs data={data} tools={EDITOR_JS_TOOLS} onChange={(api, data) => {console.log(data)}} />;
10 |     </div>
11 |   );
12 | }
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/example/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/example/src/EditorJsTool.js:
--------------------------------------------------------------------------------
 1 | import { ToolConstructable, ToolSettings } from '@editorjs/editorjs';
 2 | import Paragraph from '@editorjs/paragraph'
 3 | import Hyperlink from 'editorjs-hyperlink';
 4 | 
 5 | export const EDITOR_JS_TOOLS: { [toolName: string]: ToolConstructable | ToolSettings } = {
 6 |     paragraph: {
 7 |         class: Paragraph,
 8 |         config: {
 9 |             preserveBlank: true
10 |         },
11 |         inlineToolbar: true
12 |     },
13 |     hyperlink: {
14 |         class: Hyperlink,
15 |         config: {
16 |             shortcut: 'CMD+L',
17 |             target: '_blank', // default null
18 |             rel: 'nofollow', // default null
19 |             availableTargets: ['_blank', '_self'],
20 |             availableRels: ['author', 'noreferrer'],
21 |             validate: false
22 |         },
23 |     },
24 | };


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/example/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/example/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "editorjs-hyperlink",
 3 |   "version": "1.0.6",
 4 |   "description": "Link with target & rel attribute for Editor.js",
 5 |   "main": "./dist/bundle.js",
 6 |   "scripts": {
 7 |     "build": "webpack --mode production",
 8 |     "build:dev": "webpack --mode development --watch"
 9 |   },
10 |   "keywords": [
11 |     "codex editor",
12 |     "inline tool link",
13 |     "target inline tool",
14 |     "rel inline tool",
15 |     "editor.js",
16 |     "editorjs"
17 |   ],
18 |   "author": "TamIT <tam.maris94@gmail.com> (https://tamit.info)",
19 |   "license": "MIT",
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/trinhtam/editorjs-hyperlink.git"
23 |   },
24 |   "homepage": "https://github.com/trinhtam/editorjs-hyperlink",
25 |   "bugs": {
26 |     "url": "https://github.com/trinhtam/editorjs-hyperlink/issues"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "^7.10.2",
30 |     "@babel/preset-env": "^7.10.2",
31 |     "babel-loader": "^8.1.0",
32 |     "css-loader": "^3.5.3",
33 |     "raw-loader": "^4.0.1",
34 |     "style-loader": "^1.2.1",
35 |     "webpack": "^4.29.5",
36 |     "webpack-cli": "^3.2.3"
37 |   },
38 |   "dependencies": {}
39 | }
40 | 


--------------------------------------------------------------------------------
/src/Hyperlink.css:
--------------------------------------------------------------------------------
 1 | .ce-inline-tool-hyperlink-wrapper {
 2 |     outline: none;
 3 |     border: 0;
 4 |     border-radius: 0 0 4px 4px;
 5 |     margin: 0;
 6 |     font-size: 13px;
 7 |     padding: 10px;
 8 |     width: 100%;
 9 |     -webkit-box-sizing: border-box;
10 |     box-sizing: border-box;
11 |     display: none;
12 |     font-weight: 500;
13 |     border-top: 1px solid rgba(201,201,204,.48);
14 | }
15 | 
16 | .ce-inline-tool-hyperlink-wrapper.ce-inline-tool-hyperlink-wrapper--showed {
17 |     display: block;
18 | }
19 | 
20 | .ce-inline-tool-hyperlink--input,
21 | .ce-inline-tool-hyperlink--select-target,
22 | .ce-inline-tool-hyperlink--select-rel {
23 |     border: 1px solid rgba(201,201,204,.48);
24 |     -webkit-box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);
25 |     box-shadow: inset 0 1px 2px 0 rgba(35,44,72,.06);
26 |     border-radius: 5px;
27 |     padding: 5px 8px;
28 |     margin-bottom: 10px;
29 |     outline: none;
30 |     width: 100%;
31 |     -webkit-box-sizing: border-box;
32 |     box-sizing: border-box;
33 | }
34 | 
35 | .ce-inline-tool-hyperlink--select-target,
36 | .ce-inline-tool-hyperlink--select-rel {
37 |     width: 48%;
38 |     display: inline-block;
39 | }
40 | .ce-inline-tool-hyperlink--select-target {
41 |     margin-right: 2%;
42 | }
43 | .ce-inline-tool-hyperlink--select-rel {
44 |     margin-left: 2%;
45 | }
46 | 
47 | .ce-inline-tool-hyperlink--button {
48 |     display: block;
49 |     width: 100%;
50 |     background-color: #34c38f;
51 |     color: #fff;
52 |     padding: 7px 0;
53 |     border: none;
54 |     text-align: center;
55 |     text-decoration: none;
56 |     font-size: 16px;
57 |     border-radius: 5px;
58 |     cursor: pointer;
59 | }
60 | 


--------------------------------------------------------------------------------
/src/Hyperlink.js:
--------------------------------------------------------------------------------
  1 | import SelectionUtils from "./SelectionUtils";
  2 | import css from './Hyperlink.css';
  3 | 
  4 | export default class Hyperlink {
  5 | 
  6 |     constructor({ data, config, api, readOnly }) {
  7 |         this.toolbar = api.toolbar;
  8 |         this.inlineToolbar = api.inlineToolbar;
  9 |         this.tooltip = api.tooltip;
 10 |         this.i18n = api.i18n;
 11 |         this.config = config;
 12 |         this.selection = new SelectionUtils();
 13 | 
 14 |         this.commandLink = 'createLink';
 15 |         this.commandUnlink = 'unlink';
 16 | 
 17 |         this.CSS = {
 18 |             wrapper: 'ce-inline-tool-hyperlink-wrapper',
 19 |             wrapperShowed: 'ce-inline-tool-hyperlink-wrapper--showed',
 20 |             button: 'ce-inline-tool',
 21 |             buttonActive: 'ce-inline-tool--active',
 22 |             buttonModifier: 'ce-inline-tool--link',
 23 |             buttonUnlink: 'ce-inline-tool--unlink',
 24 |             input: 'ce-inline-tool-hyperlink--input',
 25 |             selectTarget: 'ce-inline-tool-hyperlink--select-target',
 26 |             selectRel: 'ce-inline-tool-hyperlink--select-rel',
 27 |             buttonSave: 'ce-inline-tool-hyperlink--button',
 28 |         };
 29 | 
 30 |         this.targetAttributes = this.config.availableTargets || [
 31 |             '_blank',   // Opens the linked document in a new window or tab
 32 |             '_self',    // Opens the linked document in the same frame as it was clicked (this is default)
 33 |             '_parent',  // Opens the linked document in the parent frame
 34 |             '_top',     // Opens the linked document in the full body of the window
 35 |         ];
 36 | 
 37 |         this.relAttributes = this.config.availableRels || [
 38 |             'alternate',    //Provides a link to an alternate representation of the document (i.e. print page, translated or mirror)
 39 |             'author',       //Provides a link to the author of the document
 40 |             'bookmark',     //Permanent URL used for bookmarking
 41 |             'external',     //Indicates that the referenced document is not part of the same site as the current document
 42 |             'help',         //Provides a link to a help document
 43 |             'license',      //Provides a link to licensing information for the document
 44 |             'next',         //Provides a link to the next document in the series
 45 |             'nofollow',     //Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
 46 |             'noreferrer',   //Requires that the browser should not send an HTTP referer header if the user follows the hyperlink
 47 |             'noopener',     //Requires that any browsing context created by following the hyperlink must not have an opener browsing context
 48 |             'prev',         //The previous document in a selection
 49 |             'search',       //Links to a search tool for the document
 50 |             'tag',          //A tag (keyword) for the current document
 51 |         ];
 52 | 
 53 |         this.nodes = {
 54 |             button: null,
 55 |             wrapper: null,
 56 |             input: null,
 57 |             selectTarget: null,
 58 |             selectRel: null,
 59 |             buttonSave: null,
 60 |         };
 61 | 
 62 |         this.inputOpened = false;
 63 |     }
 64 | 
 65 |     render() {
 66 |         this.nodes.button = document.createElement('button');
 67 |         this.nodes.button.type = 'button';
 68 |         this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
 69 |         this.nodes.button.appendChild(this.iconSvg('link', 14, 10));
 70 |         this.nodes.button.appendChild(this.iconSvg('unlink', 15, 11));
 71 |         return this.nodes.button;
 72 |     }
 73 | 
 74 |     renderActions() {
 75 |         this.nodes.wrapper = document.createElement('div');
 76 |         this.nodes.wrapper.classList.add(this.CSS.wrapper);
 77 | 
 78 |         // Input
 79 |         this.nodes.input = document.createElement('input');
 80 |         this.nodes.input.placeholder = 'https://...';
 81 |         this.nodes.input.classList.add(this.CSS.input);
 82 | 
 83 |         let i;
 84 | 
 85 |         // Target
 86 |         this.nodes.selectTarget = document.createElement('select');
 87 |         this.nodes.selectTarget.classList.add(this.CSS.selectTarget);
 88 |         this.addOption(this.nodes.selectTarget, this.i18n.t('Select target'), '');
 89 |         for (i=0; i<this.targetAttributes.length; i++) {
 90 |             this.addOption(this.nodes.selectTarget, this.targetAttributes[i], this.targetAttributes[i]);
 91 |         }
 92 | 
 93 |         if(!!this.config.target) {
 94 |             if(this.targetAttributes.length === 0) {
 95 |                 this.addOption(this.nodes.selectTarget, this.config.target, this.config.target);
 96 |             }
 97 | 
 98 |             this.nodes.selectTarget.value = this.config.target;
 99 |         }
100 | 
101 |         // Rel
102 |         this.nodes.selectRel = document.createElement('select');
103 |         this.nodes.selectRel.classList.add(this.CSS.selectRel);
104 |         this.addOption(this.nodes.selectRel, this.i18n.t('Select rel'), '');
105 |         for (i=0; i<this.relAttributes.length; i++) {
106 |             this.addOption(this.nodes.selectRel, this.relAttributes[i], this.relAttributes[i]);
107 |         }
108 | 
109 |         if(!!this.config.rel) {
110 |             if(this.relAttributes.length === 0) {
111 |                 this.addOption(this.nodes.selectTarget, this.config.rel, this.config.rel);
112 |             }
113 | 
114 |             this.nodes.selectRel.value = this.config.rel;
115 |         }
116 | 
117 |         // Button
118 |         this.nodes.buttonSave = document.createElement('button');
119 |         this.nodes.buttonSave.type = 'button';
120 |         this.nodes.buttonSave.classList.add(this.CSS.buttonSave);
121 |         this.nodes.buttonSave.innerHTML = this.i18n.t('Save');
122 |         this.nodes.buttonSave.addEventListener('click', (event) => {
123 |             this.savePressed(event);
124 |         });
125 | 
126 |         // append
127 |         this.nodes.wrapper.appendChild(this.nodes.input);
128 | 
129 |         if(!!this.targetAttributes && this.targetAttributes.length > 0) {
130 |             this.nodes.wrapper.appendChild(this.nodes.selectTarget);
131 |         }
132 | 
133 |         if(!!this.relAttributes && this.relAttributes.length > 0) {
134 |             this.nodes.wrapper.appendChild(this.nodes.selectRel);
135 |         }
136 | 
137 |         this.nodes.wrapper.appendChild(this.nodes.buttonSave);
138 | 
139 |         return this.nodes.wrapper;
140 |     }
141 | 
142 |     surround(range) {
143 |         if (range) {
144 |             if (!this.inputOpened) {
145 |                 this.selection.setFakeBackground();
146 |                 this.selection.save();
147 |             } else {
148 |                 this.selection.restore();
149 |                 this.selection.removeFakeBackground();
150 |             }
151 |             const parentAnchor = this.selection.findParentTag('A');
152 |             if (parentAnchor) {
153 |                 this.selection.expandToTag(parentAnchor);
154 |                 this.unlink();
155 |                 this.closeActions();
156 |                 this.checkState();
157 |                 this.toolbar.close();
158 |                 return;
159 |             }
160 |         }
161 |         this.toggleActions();
162 |     }
163 | 
164 |     get shortcut() {
165 |         return this.config.shortcut || 'CMD+L';
166 |     }
167 | 
168 |     get title() {
169 |         return 'Hyperlink';
170 |     }
171 | 
172 |     static get isInline() {
173 |         return true;
174 |     }
175 | 
176 |     static get sanitize() {
177 |         return {
178 |             a: {
179 |                 href: true,
180 |                 target: true,
181 |                 rel: true,
182 |             },
183 |         };
184 |     }
185 | 
186 |     checkState(selection=null) {
187 |         const anchorTag = this.selection.findParentTag('A');
188 |         if (anchorTag) {
189 |             this.nodes.button.classList.add(this.CSS.buttonUnlink);
190 |             this.nodes.button.classList.add(this.CSS.buttonActive);
191 |             this.openActions();
192 |             const hrefAttr = anchorTag.getAttribute('href');
193 |             const targetAttr = anchorTag.getAttribute('target');
194 |             const relAttr = anchorTag.getAttribute('rel');
195 |             this.nodes.input.value = !!hrefAttr ? hrefAttr : '';
196 |             this.nodes.selectTarget.value = !!targetAttr ? targetAttr : '';
197 |             this.nodes.selectRel.value = !!relAttr ? relAttr : '';
198 |             this.selection.save();
199 |         } else {
200 |             this.nodes.button.classList.remove(this.CSS.buttonUnlink);
201 |             this.nodes.button.classList.remove(this.CSS.buttonActive);
202 |         }
203 |         return !!anchorTag;
204 |     }
205 | 
206 |     clear() {
207 |         this.closeActions();
208 |     }
209 | 
210 |     toggleActions() {
211 |         if (!this.inputOpened) {
212 |             this.openActions(true);
213 |         } else {
214 |             this.closeActions(false);
215 |         }
216 |     }
217 | 
218 |     openActions(needFocus = false) {
219 |         this.nodes.wrapper.classList.add(this.CSS.wrapperShowed);
220 |         if (needFocus) {
221 |             this.nodes.input.focus();
222 |         }
223 |         this.inputOpened = true;
224 |     }
225 | 
226 |     closeActions(clearSavedSelection = true) {
227 |         if (this.selection.isFakeBackgroundEnabled) {
228 |             const currentSelection = new SelectionUtils();
229 |             currentSelection.save();
230 |             this.selection.restore();
231 |             this.selection.removeFakeBackground();
232 |             currentSelection.restore();
233 |         }
234 |         this.nodes.wrapper.classList.remove(this.CSS.wrapperShowed);
235 |         this.nodes.input.value = '';
236 |         this.nodes.selectTarget.value = '';
237 |         this.nodes.selectRel.value = '';
238 | 
239 |         if (clearSavedSelection) {
240 |             this.selection.clearSaved();
241 |         }
242 |         this.inputOpened = false;
243 |     }
244 | 
245 |     savePressed(event) {
246 |         event.preventDefault();
247 |         event.stopPropagation();
248 |         event.stopImmediatePropagation();
249 | 
250 |         let value = this.nodes.input.value || '';
251 |         let target = this.nodes.selectTarget.value || '';
252 |         let rel = this.nodes.selectRel.value || '';
253 | 
254 |         if (!value.trim()) {
255 |             this.selection.restore();
256 |             this.unlink();
257 |             event.preventDefault();
258 |             this.closeActions();
259 |         }
260 | 
261 |         if (!!this.config.validate && !!this.config.validate === true && !this.validateURL(value)) {
262 |             this.tooltip.show(this.nodes.input, 'The URL is not valid.', {
263 |                 placement: 'top',
264 |             });
265 |             setTimeout(() => {
266 |                 this.tooltip.hide();
267 |             }, 1000);
268 |             return;
269 |         }
270 | 
271 |         value = this.prepareLink(value);
272 | 
273 |         this.selection.restore();
274 |         this.selection.removeFakeBackground();
275 | 
276 |         this.insertLink(value, target, rel);
277 | 
278 |         this.selection.collapseToEnd();
279 |         this.inlineToolbar.close();
280 |     }
281 | 
282 |     validateURL(str) {
283 |         const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
284 |             '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
285 |             '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
286 |             '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
287 |             '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
288 |             '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
289 |         return !!pattern.test(str);
290 |     }
291 | 
292 |     prepareLink(link) {
293 |         link = link.trim();
294 |         link = this.addProtocol(link);
295 |         return link;
296 |     }
297 | 
298 |     addProtocol(link) {
299 |         if (/^(\w+):(\/\/)?/.test(link)) {
300 |             return link;
301 |         }
302 | 
303 |         const isInternal = /^\/[^/\s]?/.test(link),
304 |             isAnchor = link.substring(0, 1) === '#',
305 |             isProtocolRelative = /^\/\/[^/\s]/.test(link);
306 | 
307 |         if (!isInternal && !isAnchor && !isProtocolRelative) {
308 |             link = 'http://' + link;
309 |         }
310 | 
311 |         return link;
312 |     }
313 | 
314 |     insertLink(link, target='', rel='') {
315 |         let anchorTag = this.selection.findParentTag('A');
316 |         if (anchorTag) {
317 |             this.selection.expandToTag(anchorTag);
318 |         }else{
319 |             document.execCommand(this.commandLink, false, link);
320 |             anchorTag = this.selection.findParentTag('A');
321 |         }
322 |         if(anchorTag) {
323 |             if(!!target) {
324 |                 anchorTag['target'] = target;
325 |             }else{
326 |                 anchorTag.removeAttribute('target');
327 |             }
328 |             if(!!rel) {
329 |                 anchorTag['rel'] = rel;
330 |             }else{
331 |                 anchorTag.removeAttribute('rel');
332 |             }
333 |         }
334 |     }
335 | 
336 |     unlink() {
337 |         document.execCommand(this.commandUnlink);
338 |     }
339 | 
340 |     iconSvg(name, width = 14, height = 14) {
341 |         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
342 |         icon.classList.add('icon', 'icon--' + name);
343 |         icon.setAttribute('width', width + 'px');
344 |         icon.setAttribute('height', height + 'px');
345 |         icon.innerHTML = `<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#${name}"></use>`;
346 |         return icon;
347 |     }
348 | 
349 |     addOption(element, text, value=null) {
350 |         let option = document.createElement('option');
351 |         option.text = text;
352 |         option.value = value;
353 |         element.add(option);
354 |     }
355 | }
356 | 


--------------------------------------------------------------------------------
/src/SelectionUtils.js:
--------------------------------------------------------------------------------
  1 | export default class SelectionUtils {
  2 | 
  3 |     constructor() {
  4 |         this.selection = null;
  5 |         this.savedSelectionRange = null;
  6 |         this.isFakeBackgroundEnabled = false;
  7 |         this.commandBackground = 'backColor';
  8 |         this.commandRemoveFormat = 'removeFormat';
  9 |     }
 10 | 
 11 | 
 12 |     isElement(node) {
 13 |         return node && typeof node === 'object' && node.nodeType && node.nodeType === Node.ELEMENT_NODE;
 14 |     }
 15 | 
 16 |     isContentEditable(element) {
 17 |         return element.contentEditable === 'true';
 18 |     }
 19 | 
 20 |     isNativeInput(target) {
 21 |         const nativeInputs = [
 22 |             'INPUT',
 23 |             'TEXTAREA',
 24 |         ];
 25 |         return target && target.tagName ? nativeInputs.includes(target.tagName) : false;
 26 |     }
 27 | 
 28 |     canSetCaret(target) {
 29 |         let result = true;
 30 |         if (this.isNativeInput(target)) {
 31 |             switch (target.type) {
 32 |                 case 'file':
 33 |                 case 'checkbox':
 34 |                 case 'radio':
 35 |                 case 'hidden':
 36 |                 case 'submit':
 37 |                 case 'button':
 38 |                 case 'image':
 39 |                 case 'reset':
 40 |                     result = false;
 41 |                     break;
 42 |                 default:
 43 |             }
 44 |         } else {
 45 |             result = this.isContentEditable(target);
 46 |         }
 47 | 
 48 |         return result;
 49 |     }
 50 | 
 51 |     CSS() {
 52 |         return {
 53 |             editorWrapper: 'codex-editor',
 54 |             editorZone: 'codex-editor__redactor',
 55 |         };
 56 |     }
 57 | 
 58 |     anchorNode() {
 59 |         const selection = window.getSelection();
 60 |         return selection ? selection.anchorNode : null;
 61 |     }
 62 | 
 63 |     anchorElement() {
 64 |         const selection = window.getSelection();
 65 | 
 66 |         if (!selection) {
 67 |             return null;
 68 |         }
 69 | 
 70 |         const anchorNode = selection.anchorNode;
 71 | 
 72 |         if (!anchorNode) {
 73 |             return null;
 74 |         }
 75 | 
 76 |         if (!this.isElement(anchorNode)) {
 77 |             return anchorNode.parentElement;
 78 |         } else {
 79 |             return anchorNode;
 80 |         }
 81 |     }
 82 | 
 83 |     anchorOffset() {
 84 |         const selection = window.getSelection();
 85 |         return selection ? selection.anchorOffset : null;
 86 |     }
 87 | 
 88 |     isCollapsed() {
 89 |         const selection = window.getSelection();
 90 |         return selection ? selection.isCollapsed : null;
 91 |     }
 92 | 
 93 |     isAtEditor() {
 94 |         const selection = SelectionUtils.get();
 95 |         let selectedNode = (selection.anchorNode || selection.focusNode);
 96 | 
 97 |         if (selectedNode && selectedNode.nodeType === Node.TEXT_NODE) {
 98 |             selectedNode = selectedNode.parentNode;
 99 |         }
100 | 
101 |         let editorZone = null;
102 | 
103 |         if (selectedNode) {
104 |             editorZone = selectedNode.closest(`.${SelectionUtils.CSS.editorZone}`);
105 |         }
106 |         return editorZone && editorZone.nodeType === Node.ELEMENT_NODE;
107 |     }
108 | 
109 |     isSelectionExists() {
110 |         const selection = SelectionUtils.get();
111 |         return !!selection.anchorNode;
112 |     }
113 | 
114 |     static get range() {
115 |         const selection = window.getSelection();
116 |         return selection && selection.rangeCount ? selection.getRangeAt(0) : null;
117 |     }
118 | 
119 |     static get rect() {
120 |         let sel = document.selection, range;
121 | 
122 |         let rect = {
123 |             x: 0,
124 |             y: 0,
125 |             width: 0,
126 |             height: 0,
127 |         };
128 | 
129 |         if (sel && sel.type !== 'Control') {
130 |             range = sel.createRange();
131 |             rect.x = range.boundingLeft;
132 |             rect.y = range.boundingTop;
133 |             rect.width = range.boundingWidth;
134 |             rect.height = range.boundingHeight;
135 |             return rect;
136 |         }
137 | 
138 |         if (!window.getSelection) {
139 |             return rect;
140 |         }
141 | 
142 |         sel = window.getSelection();
143 | 
144 |         if (sel.rangeCount === null || isNaN(sel.rangeCount)) {
145 |             return rect;
146 |         }
147 | 
148 |         if (sel.rangeCount === 0) {
149 |             return rect;
150 |         }
151 | 
152 |         range = sel.getRangeAt(0).cloneRange();
153 | 
154 |         if (range.getBoundingClientRect) {
155 |             rect = range.getBoundingClientRect();
156 |         }
157 | 
158 |         if (rect.x === 0 && rect.y === 0) {
159 |             const span = document.createElement('span');
160 | 
161 |             if (span.getBoundingClientRect) {
162 |                 span.appendChild(document.createTextNode('\u200b'));
163 |                 range.insertNode(span);
164 |                 rect = span.getBoundingClientRect();
165 |                 const spanParent = span.parentNode;
166 |                 spanParent.removeChild(span);
167 |                 spanParent.normalize();
168 |             }
169 |         }
170 | 
171 |         return rect;
172 |     }
173 | 
174 |     static get text() {
175 |         return window.getSelection ? window.getSelection().toString() : '';
176 |     }
177 | 
178 |     get() {
179 |         return window.getSelection();
180 |     }
181 | 
182 |     setCursor(element, offset = 0) {
183 |         const range = document.createRange();
184 |         const selection = window.getSelection();
185 | 
186 |         if (this.isNativeInput(element)) {
187 |             if (!this.canSetCaret(element)) {
188 |                 return;
189 |             }
190 | 
191 |             element.focus();
192 |             element.selectionStart = element.selectionEnd = offset;
193 | 
194 |             return element.getBoundingClientRect();
195 |         }
196 | 
197 |         range.setStart(element, offset);
198 |         range.setEnd(element, offset);
199 | 
200 |         selection.removeAllRanges();
201 |         selection.addRange(range);
202 | 
203 |         return range.getBoundingClientRect();
204 |     }
205 | 
206 |     removeFakeBackground() {
207 |         if (!this.isFakeBackgroundEnabled) {
208 |             return;
209 |         }
210 |         this.isFakeBackgroundEnabled = false;
211 |         document.execCommand(this.commandRemoveFormat);
212 |     }
213 | 
214 |     setFakeBackground() {
215 |         document.execCommand(this.commandBackground, false, '#a8d6ff');
216 |         this.isFakeBackgroundEnabled = true;
217 |     }
218 | 
219 |     save() {
220 |         this.savedSelectionRange = SelectionUtils.range;
221 |     }
222 | 
223 |     restore() {
224 |         if (!this.savedSelectionRange) {
225 |             return;
226 |         }
227 |         const sel = window.getSelection();
228 |         sel.removeAllRanges();
229 |         sel.addRange(this.savedSelectionRange);
230 |     }
231 | 
232 |     clearSaved() {
233 |         this.savedSelectionRange = null;
234 |     }
235 | 
236 |     collapseToEnd() {
237 |         const sel = window.getSelection();
238 |         const range = document.createRange();
239 |         range.selectNodeContents(sel.focusNode);
240 |         range.collapse(false);
241 |         sel.removeAllRanges();
242 |         sel.addRange(range);
243 |     }
244 | 
245 |     findParentTag(tagName, className = null, searchDepth = 10) {
246 |         const selection = window.getSelection();
247 |         let parentTag = null;
248 |         if (!selection || !selection.anchorNode || !selection.focusNode) {
249 |             return null;
250 |         }
251 |         const boundNodes = [
252 |             selection.anchorNode,
253 |             selection.focusNode,
254 |         ];
255 | 
256 |         boundNodes.forEach((parent) => {
257 |             let searchDepthIterable = searchDepth;
258 |             while (searchDepthIterable > 0 && parent.parentNode) {
259 |                 if (parent.tagName === tagName) {
260 |                     parentTag = parent;
261 |                     if (className && parent.classList && !parent.classList.contains(className)) {
262 |                         parentTag = null;
263 |                     }
264 |                     if (parentTag) {
265 |                         break;
266 |                     }
267 |                 }
268 |                 parent = parent.parentNode;
269 |                 searchDepthIterable--;
270 |             }
271 |         });
272 |         return parentTag;
273 |     }
274 | 
275 |     expandToTag(element) {
276 |         const selection = window.getSelection();
277 |         selection.removeAllRanges();
278 |         const range = document.createRange();
279 |         range.selectNodeContents(element);
280 |         selection.addRange(range);
281 |     }
282 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |     entry: './src/Hyperlink.js',
 5 |     module: {
 6 |         rules: [
 7 |             {
 8 |                 test: /\.js$/,
 9 |                 exclude: /node_modules/,
10 |                 use: [
11 |                     {
12 |                         loader: 'babel-loader',
13 |                         query: {
14 |                             presets: [ '@babel/preset-env' ],
15 |                         },
16 |                     },
17 |                 ]
18 |             },
19 |             {
20 |                 test: /\.css$/,
21 |                 use: [
22 |                     'style-loader',
23 |                     'css-loader'
24 |                 ]
25 |             },
26 |             {
27 |                 test: /\.(svg)$/,
28 |                 use: [
29 |                     {
30 |                         loader: 'raw-loader',
31 |                     }
32 |                 ]
33 |             }
34 |         ]
35 |     },
36 |     output: {
37 |         path: path.join(__dirname, '/dist'),
38 |         publicPath: '/',
39 |         filename: 'bundle.js',
40 |         library: 'Hyperlink',
41 |         libraryExport: 'default',
42 |         libraryTarget: 'umd'
43 |     }
44 | };
45 | 


--------------------------------------------------------------------------------