☰

Textarea Plus

An userscript to improve plain textarea for code editing.

当前为 2014-09-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Textarea Plus
  3. // @description	An userscript to improve plain textarea for code editing.
  4. // @namespace   eight04.blogspot.com
  5. // @include     http*
  6. // @version     1.0.2
  7. // @grant       GM_addStyle
  8. // ==/UserScript==
  9.  
  10. "use strict";
  11.  
  12. var textareaPlus = function(){
  13.  
  14. 	var editor = {
  15. 		indent: indent,
  16. 		unindent: unindent,
  17. 		home: home,
  18. 		selectHome: selectHome,
  19. 		enter: enter
  20. 	};
  21. 	
  22. 	function selectionRange(data){
  23. 		return data.pos[1] - data.pos[0];
  24. 	}
  25. 	
  26. 	function insert(data, text){
  27. 		data.text = data.text.substr(0, data.pos[0]) + text + data.text.substr(data.pos[1]);
  28. 		data.pos[0] += text.length;
  29. 		data.pos[1] = data.pos[0];
  30. 	}
  31. 	
  32. 	function del(data){
  33. 		if (!selectionRange(data)) {
  34. 			data.pos[1]++;
  35. 		}
  36. 		insert(data, "");
  37. 	}
  38. 	
  39. 	function getLineStart(data){
  40. 		var pos = data.pos[0];
  41. 		if (data.text[pos] == "\n") {
  42. 			pos--;
  43. 		}
  44. 		var s = data.text.lastIndexOf("\n", pos);
  45. 		if (s < 0) {
  46. 			return 0;
  47. 		}
  48. 		return s + 1;
  49. 	}
  50. 	
  51. 	function getLineEnd(data){
  52. 		var s = data.text.indexOf("\n", data.pos[1]);
  53. 		if (s < 0) {
  54. 			return data.text.length;
  55. 		}
  56. 		return s;
  57. 	}
  58. 	
  59. 	function multiIndent(data){
  60. 		var lineStart = getLineStart(data), lineEnd = getLineEnd(data);
  61. 		var lines = data.text.substr(lineStart, lineEnd - lineStart);
  62. 		
  63. 		lines = lines.split("\n");
  64. 		for (var i = 0; i < lines.length; i++) {
  65. 			lines[i] = "\t" + lines[i];
  66. 		}
  67. 		lines = lines.join("\n");
  68. 		data.text = data.text.substr(0, lineStart) + lines + data.text.substr(lineEnd);
  69. 		data.pos[0] = lineStart;
  70. 		data.pos[1] = lineEnd + i;
  71. 	}
  72. 	
  73. 	function inMultiLine(data) {
  74. 		var s = data.text.indexOf("\n", data.pos[0]);
  75. 		if (s < 0) {
  76. 			return false;
  77. 		}
  78. 		return  s < data.pos[1];
  79. 	}
  80. 	
  81. 	function indent(data){
  82. 		if (!selectionRange(data)) {
  83. 			insert(data, "\t");
  84. 			if (data.pos[0] < getTextStart(data)) {
  85. 				home(data);
  86. 			}
  87. 		} else {
  88. 			if (inMultiLine(data)) {
  89. 				multiIndent(data);
  90. 			} else {
  91. 				insert(data, "\t");
  92. 			}
  93. 		}
  94. 	}
  95. 	
  96. 	function multiUnindent(data){
  97. 		var lineStart = getLineStart(data), lineEnd = getLineEnd(data);
  98. 		var lines = data.text.substr(lineStart, lineEnd - lineStart);
  99. 		
  100. 		lines = lines.split("\n");
  101. 		var len = 0;
  102. 		for (var i = 0; i < lines.length; i++) {
  103. 			var m = lines[i].match(/^(    | {0,3}\t?)(.*)$/);
  104. 			// console.log(m);
  105. 			len += m[1].length;
  106. 			lines[i] = m[2];
  107. 		}
  108. 		lines = lines.join("\n");
  109. 		data.text = data.text.substr(0, lineStart) + lines + data.text.substr(lineEnd);
  110. 		data.pos[0] = lineStart;
  111. 		data.pos[1] = lineEnd - len;
  112. 	}
  113. 	
  114. 	function backspace(data) {
  115. 		
  116. 		if (selectionRange(data)) {
  117. 			del(data);
  118. 		} else if (data.pos[0] > 0) {
  119. 			data.pos[0]--;
  120. 			del(data);
  121. 		}
  122. 	}
  123. 	
  124. 	function inText(data) {
  125. 		return getTextStart(data) <= data.pos[0];
  126. 	}
  127. 	
  128. 	function unindent(data) {
  129. 		if (inMultiLine(data)) {
  130. 			multiUnindent(data);
  131. 		} else if (data.text[data.pos[0] - 1] == "\t") {
  132. 			backspace(data);
  133. 		} else {
  134. 			multiUnindent(data);
  135. 			home(data);
  136. 		}
  137. 	}
  138. 	
  139. 	function searchFrom(text, re, pos) {
  140. 		pos = pos || 0;
  141. 		var t = text.substr(pos);
  142. 		var s = t.search(re);
  143. 		if (s < 0) {
  144. 			return -1;
  145. 		}
  146. 		return s + pos;
  147. 	}
  148. 	
  149. 	function getTextStart(data) {
  150. 		var lineStart = getLineStart(data);
  151. 		var pos = searchFrom(data.text, /[\S\n]/, lineStart);
  152. 		if (pos < 0 || data.text[pos] == "\n") {
  153. 			return getLineEnd(data);
  154. 		}
  155. 		return pos;
  156. 	}
  157. 	
  158. 	function isTextStart(data) {
  159. 		return getTextStart(data) == data.pos[0];
  160. 	}
  161. 	
  162. 	function home(data) {
  163. 		if (isTextStart(data)) {
  164. 			data.pos[0] = getLineStart(data);
  165. 		} else {
  166. 			data.pos[0] = getTextStart(data);
  167. 		}
  168. 		data.pos[1] = data.pos[0];
  169. 	}
  170. 	
  171. 	function selectHome(data) {
  172. 		var pos = data.pos[1];
  173. 		home(data);
  174. 		if (data.pos[0] > pos) {
  175. 			home(data);
  176. 		}
  177. 		data.pos[1] = pos;
  178. 	}
  179. 	
  180. 	function getIndents(data) {
  181. 		var lineStart = getLineStart(data);
  182. 		var len;
  183. 		
  184. 		var textStart = getTextStart(data);
  185. 		// console.log(textStart);
  186. 		if (textStart >= data.pos[0]) {
  187. 			len = data.pos[0] - lineStart;
  188. 		} else {
  189. 			len = textStart - lineStart;
  190. 		}
  191. 		return data.text.substr(lineStart, len);
  192. 	}
  193. 	
  194. 	function enter(data) {
  195. 		// console.log(data);
  196. 		var indents = getIndents(data);
  197. 		insert(data, "\n" + indents);
  198. 	}
  199. 	
  200. 	function init(node, command) {
  201. 		var data = {
  202. 			text: node.value,
  203. 			pos: [node.selectionStart, node.selectionEnd]
  204. 		};
  205. 		
  206. 		editor[command](data);
  207. 		
  208. 		node.value = data.text;
  209. 		node.setSelectionRange(data.pos[0], data.pos[1]);
  210. 	}
  211. 	
  212. 	return init;
  213. }();
  214.  
  215. function validArea(area) {
  216. 	if (area.nodeName != "TEXTAREA") {
  217. 		return false;
  218. 	} 
  219. 	
  220. 	if (area.dataset.textareaPlus === "false") {
  221. 		return false;
  222. 	}
  223. 	
  224. 	if (area.dataset.textareaPlus === "true") {
  225. 		return true;
  226. 	}
  227. 	
  228. 	var node = area;
  229. 	while ((node = node.parentNode) != document.body) {
  230. 		if (node.classList.contains("CodeMirror")) {
  231. 			area.dataset.textareaPlus = "false";
  232. 			return false;
  233. 		}
  234. 	}
  235. 	
  236. 	area.dataset.textareaPlus = "true";
  237. 	return true;
  238. }
  239.  
  240. window.addEventListener("keydown", function(e){
  241. 	if (!validArea(e.target)) {
  242. 		return;
  243. 	}
  244. 	
  245. 	var command;
  246. 	
  247. 	if (e.keyCode == 9 && !e.ctrlKey && !e.altKey) {
  248. 		// tab
  249. 		if (e.shiftKey) {
  250. 			command = "unindent";
  251. 		} else {
  252. 			command = "indent";
  253. 		}
  254. 	} else if (e.keyCode == 13 && !e.ctrlKey && !e.altKey && !e.shiftKey) {
  255. 		// enter
  256. 		command = "enter";
  257. 	} else if (e.keyCode == 36 && !e.ctrlKey && !e.altKey) {
  258. 		// home
  259. 		if (!e.shiftKey) {
  260. 			command = "home";
  261. 		} else {
  262. 			command = "selectHome";
  263. 		}
  264. 	} else {
  265. 		return;
  266. 	}
  267. 	
  268. 	e.preventDefault();
  269. 	textareaPlus(e.target, command);
  270. });
  271.  
  272. GM_addStyle("textarea {tab-size: 4; -moz-tab-size: 4; -o-tab-size: 4;}");