Add options for minimal links and auto-prefixing http protocol

docs/documentation/index.html

@@ -70,6 +70,8 @@ <h1 class="documentation-title">
  <li><a href="#auto-grow">Auto grow</a></li>
  <li><a href="#auto-grow-on-enter">Auto grow on enter</a></li>
  <li><a href="#image-width-modal-edit">Image width modal edit</a></li>
+ <li><a href="#url-protocol">URL protocol</a></li>
+ <li><a href="#minimal-links">Minimal links</a></li>
  </ul>
  </li>
  <li>
@@ -636,6 +638,59 @@ <h3 id="image-width-modal-edit">Image width modal edit</h3>
  Image width modal edit is not active by default (set to <code>false</code>).
  </p>
  </div>
+
+
+ <div class="feature" data-added="2.9.4">
+ <h3 id="url-protocol">URL protocol</h3>
+ <p class="added-feature">Added in 2.9.4</p>
+ <p>
+ An option to auto-prefix URLs with a protocol.
+ </p>
+ <p>
+ When this option
+ is set to <code>true</code>, URLs missing a protocol will be
+ prefixed with <code>https://</code>. Alternatively, a string can
+ be provided for a custom prefix.
+ </p>
+ <p>
+ For example, a value of <code>true</code> would convert
+ <code>example.com</code> to
+ <code>https://example.com</code>, while a value of
+ <code>ftp</code> converts to
+ <code>ftp://example.com</code>.
+ </p>
+ <pre><code class="javascript">
+$('.trumbowyg').trumbowyg({
+ urlProtocol: true
+});
+ </code></pre>
+ <p class="note">
+ Anchors, email addresses and relative links are left unchanged.
+ </p>
+ <p class="note">
+ URL protocol is not active by default (set to <code>false</code>).
+ </p>
+ </div>
+
+
+ <div class="feature" data-added="2.9.4">
+ <h3 id="minimal-links">Minimal links</h3>
+ <p class="added-feature">Added in 2.9.4</p>
+ <p>
+ Reduce the link overlay to use only <code>url</code> and
+ <code>text</code> fields, omitting <code>title</code> and
+ <code>target</code>.
+ </p>
+ <pre><code class="javascript">
+$('.trumbowyg').trumbowyg({
+ minimalLinks: true
+});
+ </code></pre>
+ <p class="note">
+ The minimal links option is not active by default (set to
+ <code>false</code>).
+ </p>
+ </div>
  </section>
 
 

src/trumbowyg.js

@@ -105,7 +105,9 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
  // imgDblClickHandler: default is defined in constructor
 
- plugins: {}
+ plugins: {},
+ urlProtocol: false,
+ minimalLinks: false
  },
  writable: false,
  enumerable: true,
@@ -398,6 +400,8 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
  t.o.imgDblClickHandler = t.getDefaultImgDblClickHandler();
  }
 
+ t.urlPrefix = t.setupUrlPrefix();
+
  t.disabled = t.o.disabled || (editorElem.nodeName === 'TEXTAREA' && editorElem.disabled);
 
  if (options.btns) {
@@ -470,6 +474,14 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
  this.btnsDef[btnName] = btnDef;
  },
 
+ setupUrlPrefix: function() {
+ var protocol = this.o.urlProtocol;
+ if(!protocol) { return; }
+
+ if(typeof(protocol) !== 'string') { return 'https://'; }
+ return /:\/\/$/.test(protocol) ? protocol : protocol + '://';
+ },
+
  buildEditor: function () {
  var t = this,
  prefix = t.o.prefix,
@@ -1189,8 +1201,10 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
  var $a = $(node);
  text = $a.text();
  url = $a.attr('href');
- title = $a.attr('title');
- target = $a.attr('target');
+ if (!t.o.minimalLinks) {
+ title = $a.attr('title');
+ target = $a.attr('target');
+ }
  var range = t.doc.createRange();
  range.selectNode(node);
  documentSelection.removeAllRanges();
@@ -1199,31 +1213,43 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
 
  t.saveRange();
 
- t.openModalInsert(t.lang.createLink, {
+ var options = {
  url: {
  label: 'URL',
  required: true,
  value: url
  },
- title: {
- label: t.lang.title,
- value: title
- },
  text: {
  label: t.lang.text,
  value: text
- },
- target: {
- label: t.lang.target,
- value: target
  }
- }, function (v) { // v is value
+ };
+ if (!t.o.minimalLinks) {
+ Object.assign(options, {
+ title: {
+ label: t.lang.title,
+ value: title
+ },
+ target: {
+ label: t.lang.target,
+ value: target
+ }
+ });
+ }
+
+ t.openModalInsert(t.lang.createLink, options, function (v) { // v is value
+ var url = t.prependUrlPrefix(v.url);
+ if(!url.length) { return false; }
+
  var link = $(['<a href="', v.url, '">', v.text || v.url, '</a>'].join(''));
- if (v.title.length > 0) {
- link.attr('title', v.title);
- }
- if (v.target.length > 0) {
- link.attr('target', v.target);
+
+ if (!t.o.minimalLinks) {
+ if (v.title.length > 0) {
+ link.attr('title', v.title);
+ }
+ if (v.target.length > 0) {
+ link.attr('target', v.target);
+ }
  }
  t.range.deleteContents();
  t.range.insertNode(link[0]);
@@ -1232,6 +1258,18 @@ Object.defineProperty(jQuery.trumbowyg, 'defaultOptions', {
  return true;
  });
  },
+ prependUrlPrefix: function(url) {
+ var t = this;
+ if(!t.urlPrefix) { return url; }
+
+ const VALID_LINK_PREFIX = /^([a-z][-+.a-z0-9]*:|\/|#)/i;
+ if(VALID_LINK_PREFIX.test(url)) { return url; }
+
+ const SIMPLE_EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if(SIMPLE_EMAIL_REGEX.test(url)) { return 'mailto:' + url; }
+
+ return t.urlPrefix + url;
+ },
  unlink: function () {
  var t = this,
  documentSelection = t.doc.getSelection(),