Skip to content

Instantly share code, notes, and snippets.

@orbitbot
Created October 23, 2014 21:43
Show Gist options
  • Save orbitbot/27f042995d03372fecaa to your computer and use it in GitHub Desktop.
Save orbitbot/27f042995d03372fecaa to your computer and use it in GitHub Desktop.
Ace editor with http-link highlighting and click action, from http://jsbin.com/jehopaja/30/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<style>
#editor { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.ace_link_marker {
position: absolute;
border-bottom: 1px solid blue;
}
</style>
</head>
<body>
<div id="editor">
text and link http://hello.world
</div>
</body>
<script>
editor = ace.edit("editor")
define("hoverlink", [], function(require, exports, module) {
"use strict";
var oop = require("ace/lib/oop");
var event = require("ace/lib/event");
var Range = require("ace/range").Range;
var EventEmitter = require("ace/lib/event_emitter").EventEmitter;
var HoverLink = function(editor) {
if (editor.hoverLink)
return;
editor.hoverLink = this;
this.editor = editor;
this.update = this.update.bind(this);
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
this.onClick = this.onClick.bind(this);
event.addListener(editor.renderer.scroller, "mousemove", this.onMouseMove);
event.addListener(editor.renderer.content, "mouseout", this.onMouseOut);
event.addListener(editor.renderer.content, "click", this.onClick);
};
(function(){
oop.implement(this, EventEmitter);
this.token = {};
this.range = new Range();
this.update = function() {
this.$timer = null;
var editor = this.editor;
var renderer = editor.renderer;
var canvasPos = renderer.scroller.getBoundingClientRect();
var offset = (this.x + renderer.scrollLeft - canvasPos.left - renderer.$padding) / renderer.characterWidth;
var row = Math.floor((this.y + renderer.scrollTop - canvasPos.top) / renderer.lineHeight);
var col = Math.round(offset);
var screenPos = {row: row, column: col, side: offset - col > 0 ? 1 : -1};
var session = editor.session;
var docPos = session.screenToDocumentPosition(screenPos.row, screenPos.column);
var selectionRange = editor.selection.getRange();
if (!selectionRange.isEmpty()) {
if (selectionRange.start.row <= row && selectionRange.end.row >= row)
return this.clear();
}
var line = editor.session.getLine(docPos.row);
if (docPos.column == line.length) {
var clippedPos = editor.session.documentToScreenPosition(docPos.row, docPos.column);
if (clippedPos.column != screenPos.column) {
return this.clear();
}
}
var token = this.findLink(docPos.row, docPos.column);
this.link = token;
if (!token) {
return this.clear();
}
this.isOpen = true
editor.renderer.setCursorStyle("pointer");
session.removeMarker(this.marker);
this.range = new Range(token.row, token.start, token.row, token.start + token.value.length);
this.marker = session.addMarker(this.range, "ace_link_marker", "text", true);
};
this.clear = function() {
if (this.isOpen) {
this.link = null;
this.editor.session.removeMarker(this.marker);
this.editor.renderer.setCursorStyle("");
this.isOpen = false;
}
};
this.getMatchAround = function(regExp, string, col) {
var match;
regExp.lastIndex = 0;
string.replace(regExp, function(str) {
var offset = arguments[arguments.length-2];
var length = str.length;
if (offset <= col && offset + length >= col)
match = {
start: offset,
value: str
};
});
return match;
};
this.onClick = function() {
if (this.link) {
this.link.editor = this.editor;
this._signal("open", this.link);
this.clear()
}
};
this.findLink = function(row, column) {
var editor = this.editor;
var session = editor.session;
var line = session.getLine(row);
var match = this.getMatchAround(/https?:\/\/[^\s"']+/g, line, column);
if (!match)
return;
match.row = row;
return match;
};
this.onMouseMove = function(e) {
if (this.editor.$mouseHandler.isMousePressed) {
if (!this.editor.selection.isEmpty())
this.clear();
return;
}
this.x = e.clientX;
this.y = e.clientY;
this.update();
};
this.onMouseOut = function(e) {
this.clear();
};
this.destroy = function() {
this.onMouseOut();
event.removeListener(this.editor.renderer.scroller, "mousemove", this.onMouseMove);
event.removeListener(this.editor.renderer.content, "mouseout", this.onMouseOut);
delete this.editor.hoverLink;
};
}).call(HoverLink.prototype);
exports.HoverLink = HoverLink;
});
HoverLink = require("hoverlink").HoverLink
editor.hoverLink = new HoverLink(editor);
editor.hoverLink.on("open", function() {
alert("trying to open")
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment