-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
106 lines (87 loc) · 3.06 KB
/
main.js
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import './style.css'
const root = document.querySelector('#app')
const editor = document.querySelector('#editor')
// create handle input
const handleCreateInput = () => {
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Type / for blocks, @ to link docs or people');
input.setAttribute('class', 'outline-0 border-none');
root.appendChild(input);
input.addEventListener('input', (event) => {
const popdown = document.querySelector('.popdown');
if (event.target.value === '/1') {
const heading = document.querySelector('.h1');
popdown.classList.remove('hidden');
heading.addEventListener('click', () => {
event.target.classList.add('text-5xl', 'py-2', 'font-bold');
event.target.setAttribute('placeholder', 'Heading 1');
// to not update all the heading 1 element once create one
if (event.target.value === '/1') {
event.target.value = '';
}
popdown.classList.add('hidden');
});
}
else {
popdown.classList.add('hidden');
}
});
input.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
if (getLastElement().value !== '') {
handleCreateInput();
getLastElement().focus()
}
}
});
input.focus()
};
// Create Popdown
const section = document.createElement('section')
section.innerHTML = `
<div class="popdown border rounded-md w-72 h-96 hidden">
<div class="text-light flex flex-col gap-2 p-2">
<h2 class="font-bold">Add blocks</h2>
<p class="text-sm text-gray-400">
Keep typing to filter, or escape to exit
</p>
<span class="text-gray-500"
>Filtering keyword
<span class="bg-blue-900 text-white px-1 py-0.8 rounded-md"
>1</span
></span
>
</div>
<ul class="py-1 text-sm">
<li class="h1 flex p-2 text-sm gap-4 items-center hover:bg-gray-200">
<span class="text-3xl text-gray-400 text-center px-2">T</span>
<span>
<h2 class="font-bold">Heading 1</h2>
<p class="text-xs text-gray-400">Shortcut: type # + space</p>
</span>
</li>
<li class="flex p-2 text-sm gap-4 items-center hover:bg-gray-200">
<span class="text-3xl text-gray-400 text-center px-2">T</span>
<span>
<h2 class="font-bold">Expandable Heading 1</h2>
<p class="text-xs text-gray-400">Shortcut: type >># + space</p>
</span>
</li>
</ul>
</div>
`
editor.appendChild(section)
// create onclick event to create the input on click in the app
const getLastElement = () => {
const input = document.querySelectorAll('input');
return input[input.length - 1];
};
editor.addEventListener('click', (e) => {
if (e.target.id === 'editor') {
if(getLastElement() == undefined || getLastElement().value != ''){
handleCreateInput();
}
}
});