☰

Textarea Plus

An userscript to improve plain textarea for code editing.

目前為 2014-10-07 提交的版本，檢視 最新版本。

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