-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy patheditor.html
63 lines (63 loc) · 1.75 KB
/
editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>editor</title>
</head>
<body>
<div>
<button type="button" onclick="reverseText()">reverse</button>
</div>
<div id="content" contenteditable style="outline: none; margin-bottom: 90vh;">
...
</div>
<script>
const contentEle = document.getElementById('content')
document.body.onkeydown = e => {
if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
const selection = document.getSelection();
selection.anchorNode
const range = selection.getRangeAt(0)
const newDiv = document.createElement('div')
newDiv.innerText = (selection + '').replaceAll('\n', ' ')
const startElement = range.startContainer.nodeType === document.ELEMENT_NODE
? range.startContainer
: range.startContainer.parentElement
startElement.parentElement.insertBefore(newDiv, startElement)
range.deleteContents()
}
}
function reverseText() {
const pairs = {
'(': ')',
'[': ']',
'{': '}',
')': '(',
']': '[',
'}': '{',
}
const text = contentEle.innerText
contentEle.innerText = text.split(/\s*\n\s*/).map(line => {
return line.split(/\s+/).reverse().map(word => {
const last = word[word.length - 1]
const first = word[0]
if (',.;:!?'.indexOf(last) > -1) {
return last + word.slice(0,-1)
}
if (pairs[last]) {
return pairs[last] + word.slice(0,-1)
}
if (pairs[last]) {
return pairs[last] + word.slice(0,-1)
}
if (pairs[first]) {
return word.slice(1) + pairs[first]
}
return word
}).join(' ')
}).join('\n')
}
</script>
</body>
</html>