Fix rich editor styling
This commit is contained in:
1ilit
parent
e2a37b68e4
commit
651c8f9de7
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 349 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 353 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 356 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
|
|
||||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 360 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-chat-square-quote" viewBox="0 0 16 16">
|
|
||||||
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
||||||
<path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 732 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-chat-square-quote" viewBox="0 0 16 16">
|
|
||||||
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
|
|
||||||
<path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 736 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-chevron-down" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 287 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-chevron-down" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 291 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-code" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 359 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-code" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 363 B |
@ -1,5 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/>
|
|
||||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
|
|
||||||
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 772 B |
@ -1,5 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
|
|
||||||
<path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
|
|
||||||
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 759 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-justify" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 411 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-justify" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 415 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-link" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
|
|
||||||
<path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 400 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-link" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
|
|
||||||
<path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 404 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-list-ol" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
<path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 980 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-list-ol" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
<path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 984 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-list-ul" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 444 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-list-ul" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 448 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-text-center" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 413 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-text-center" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 417 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-text-left" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 409 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-text-left" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 413 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-text-paragraph" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 414 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-text-paragraph" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 418 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-text-right" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 412 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-text-right" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 416 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-bold" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 467 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-type-bold" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 471 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-h1" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 279 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-type-h1" viewBox="0 0 16 16">
|
|
||||||
<path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 283 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-h2" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 479 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-type-h2" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 483 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.625-4.272h1.018c1.142 0 1.935.67 1.949 1.674.013 1.005-.78 1.737-2.01 1.73-1.08-.007-1.853-.588-1.935-1.32H9.108c.069 1.327 1.224 2.386 3.083 2.386 1.935 0 3.343-1.155 3.309-2.789-.027-1.51-1.251-2.16-2.037-2.249v-.068c.704-.123 1.764-.91 1.723-2.229-.035-1.353-1.176-2.4-2.954-2.385-1.873.006-2.857 1.162-2.898 2.358h1.196c.062-.69.711-1.299 1.696-1.299.998 0 1.695.622 1.695 1.525.007.922-.718 1.592-1.695 1.592h-.964v1.074z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 646 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-italic" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 348 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-type-italic" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 352 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 576 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 61 85)" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
|
|
||||||
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 580 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="lightgrey" class="bi bi-type-underline" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 331 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(51 65 85)" class="bi bi-type-underline" viewBox="0 0 16 16">
|
|
||||||
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 335 B |
@ -10,6 +10,7 @@
|
|||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
|||||||
@ -50,7 +50,16 @@ function SurveyForm({ theme }) {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const resetForm = () => {
|
const resetForm = () => {
|
||||||
setForm({});
|
setForm({
|
||||||
|
satisfaction: 5,
|
||||||
|
ease: 5,
|
||||||
|
wouldRecommend: 5,
|
||||||
|
hadDifficulty: "",
|
||||||
|
difficulty: "",
|
||||||
|
triedOtherApps: "",
|
||||||
|
comparison: "",
|
||||||
|
occupation: "",
|
||||||
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -62,9 +71,9 @@ function SurveyForm({ theme }) {
|
|||||||
await axios
|
await axios
|
||||||
.post(`${process.env.REACT_APP_BACKEND_URL}/report_bug`, {
|
.post(`${process.env.REACT_APP_BACKEND_URL}/report_bug`, {
|
||||||
subject: `[SURVEY]: ${new Date().toDateString()}`,
|
subject: `[SURVEY]: ${new Date().toDateString()}`,
|
||||||
message: `${Object.keys(questions).map(
|
message: `${Object.keys(form).map(
|
||||||
(k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
|
(k) => `<div>${questions[k]}</div><div>${form[k]}</div>`
|
||||||
)}<div>Anything else?</div>${$generateHtmlFromNodes(editor)}`,
|
)}<div>How can we make drawDB a better experience for you?</div>${$generateHtmlFromNodes(editor)}`,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
Toast.success("Thanks for the feedback!");
|
Toast.success("Thanks for the feedback!");
|
||||||
@ -138,6 +147,7 @@ function SurveyForm({ theme }) {
|
|||||||
<div className="font-semibold ms-1 mb-3">{questions.hadDifficulty}</div>
|
<div className="font-semibold ms-1 mb-3">{questions.hadDifficulty}</div>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
|
value={form.hadDifficulty}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setForm((prev) => ({ ...prev, hadDifficulty: e.target.value }))
|
setForm((prev) => ({ ...prev, hadDifficulty: e.target.value }))
|
||||||
}
|
}
|
||||||
@ -151,6 +161,8 @@ function SurveyForm({ theme }) {
|
|||||||
<div className="font-semibold ms-1 mb-3">{questions.difficulty}</div>
|
<div className="font-semibold ms-1 mb-3">{questions.difficulty}</div>
|
||||||
<TextArea
|
<TextArea
|
||||||
rows={2}
|
rows={2}
|
||||||
|
placeholder="Tell us more"
|
||||||
|
value={form.difficulty}
|
||||||
onChange={(v) => setForm((prev) => ({ ...prev, difficulty: v }))}
|
onChange={(v) => setForm((prev) => ({ ...prev, difficulty: v }))}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -161,6 +173,7 @@ function SurveyForm({ theme }) {
|
|||||||
</div>
|
</div>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
|
value={form.triedOtherApps}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setForm((prev) => ({ ...prev, triedOtherApps: e.target.value }))
|
setForm((prev) => ({ ...prev, triedOtherApps: e.target.value }))
|
||||||
}
|
}
|
||||||
@ -174,6 +187,8 @@ function SurveyForm({ theme }) {
|
|||||||
<div className="font-semibold ms-1 mb-3">{questions.comparison}</div>
|
<div className="font-semibold ms-1 mb-3">{questions.comparison}</div>
|
||||||
<TextArea
|
<TextArea
|
||||||
rows={2}
|
rows={2}
|
||||||
|
placeholder="Tell us more"
|
||||||
|
value={form.comparison}
|
||||||
onChange={(v) => setForm((prev) => ({ ...prev, comparison: v }))}
|
onChange={(v) => setForm((prev) => ({ ...prev, comparison: v }))}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -188,6 +203,7 @@ function SurveyForm({ theme }) {
|
|||||||
]}
|
]}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
placeholder="Occupation"
|
placeholder="Occupation"
|
||||||
|
value={form.occupation}
|
||||||
onSelect={(v) => setForm((prev) => ({ ...prev, occupation: v }))}
|
onSelect={(v) => setForm((prev) => ({ ...prev, occupation: v }))}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,30 +39,29 @@ import {
|
|||||||
getDefaultCodeLanguage,
|
getDefaultCodeLanguage,
|
||||||
getCodeLanguages,
|
getCodeLanguages,
|
||||||
} from "@lexical/code";
|
} from "@lexical/code";
|
||||||
|
import { Dropdown } from "@douyinfe/semi-ui";
|
||||||
|
import "../styles/richeditor.css";
|
||||||
|
|
||||||
const LowPriority = 1;
|
const LowPriority = 1;
|
||||||
|
|
||||||
const supportedBlockTypes = new Set([
|
const blockTypeToIcon = {
|
||||||
"paragraph",
|
code: "bi-code-slash",
|
||||||
"quote",
|
h1: "bi-type-h1",
|
||||||
"code",
|
h2: "bi-type-h2",
|
||||||
"h1",
|
ol: "bi-list-ol",
|
||||||
"h2",
|
paragraph: "bi-text-paragraph",
|
||||||
"ul",
|
quote: "bi-chat-square-quote",
|
||||||
"ol",
|
ul: "bi-list-ul",
|
||||||
]);
|
};
|
||||||
|
|
||||||
const blockTypeToBlockName = {
|
const blockTypeToBlockName = {
|
||||||
code: "Code Block",
|
paragraph: "Paragraph",
|
||||||
h1: "Large Heading",
|
h1: "Large Heading",
|
||||||
h2: "Small Heading",
|
h2: "Small Heading",
|
||||||
h3: "Heading",
|
|
||||||
h4: "Heading",
|
|
||||||
h5: "Heading",
|
|
||||||
ol: "Numbered List",
|
|
||||||
paragraph: "Paragraph",
|
|
||||||
quote: "Quote",
|
|
||||||
ul: "Bulleted List",
|
ul: "Bulleted List",
|
||||||
|
ol: "Numbered List",
|
||||||
|
code: "Code Block",
|
||||||
|
quote: "Quote",
|
||||||
};
|
};
|
||||||
|
|
||||||
function Divider() {
|
function Divider() {
|
||||||
@ -252,83 +251,38 @@ function getSelectedNode(selection) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function BlockOptionsDropdownList({
|
function BlockOptionsDropdownList({ editor, blockType }) {
|
||||||
editor,
|
|
||||||
blockType,
|
|
||||||
toolbarRef,
|
|
||||||
setShowBlockOptionsDropDown,
|
|
||||||
theme,
|
|
||||||
}) {
|
|
||||||
const dropDownRef = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const toolbar = toolbarRef.current;
|
|
||||||
const dropDown = dropDownRef.current;
|
|
||||||
|
|
||||||
if (toolbar !== null && dropDown !== null) {
|
|
||||||
const { top, left } = toolbar.getBoundingClientRect();
|
|
||||||
dropDown.style.top = `${top + 40}px`;
|
|
||||||
dropDown.style.left = `${left}px`;
|
|
||||||
}
|
|
||||||
}, [dropDownRef, toolbarRef]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const dropDown = dropDownRef.current;
|
|
||||||
const toolbar = toolbarRef.current;
|
|
||||||
|
|
||||||
if (dropDown !== null && toolbar !== null) {
|
|
||||||
const handle = (event) => {
|
|
||||||
const target = event.target;
|
|
||||||
|
|
||||||
if (!dropDown.contains(target) && !toolbar.contains(target)) {
|
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
document.addEventListener("click", handle);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener("click", handle);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
|
|
||||||
|
|
||||||
const formatParagraph = () => {
|
const formatParagraph = () => {
|
||||||
if (blockType !== "paragraph") {
|
if (blockType !== "paragraph") {
|
||||||
editor.update(() => {
|
editor.update(() => {
|
||||||
const selection = $getSelection();
|
const selection = $getSelection();
|
||||||
|
|
||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
$wrapNodes(selection, () => $createParagraphNode());
|
$wrapNodes(selection, () => $createParagraphNode());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatLargeHeading = () => {
|
const formatLargeHeading = () => {
|
||||||
if (blockType !== "h1") {
|
if (blockType !== "h1") {
|
||||||
editor.update(() => {
|
editor.update(() => {
|
||||||
const selection = $getSelection();
|
const selection = $getSelection();
|
||||||
|
|
||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
$wrapNodes(selection, () => $createHeadingNode("h1"));
|
$wrapNodes(selection, () => $createHeadingNode("h1"));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatSmallHeading = () => {
|
const formatSmallHeading = () => {
|
||||||
if (blockType !== "h2") {
|
if (blockType !== "h2") {
|
||||||
editor.update(() => {
|
editor.update(() => {
|
||||||
const selection = $getSelection();
|
const selection = $getSelection();
|
||||||
|
|
||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
$wrapNodes(selection, () => $createHeadingNode("h2"));
|
$wrapNodes(selection, () => $createHeadingNode("h2"));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatBulletList = () => {
|
const formatBulletList = () => {
|
||||||
@ -337,7 +291,6 @@ function BlockOptionsDropdownList({
|
|||||||
} else {
|
} else {
|
||||||
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatNumberedList = () => {
|
const formatNumberedList = () => {
|
||||||
@ -346,81 +299,90 @@ function BlockOptionsDropdownList({
|
|||||||
} else {
|
} else {
|
||||||
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatQuote = () => {
|
const formatQuote = () => {
|
||||||
if (blockType !== "quote") {
|
if (blockType !== "quote") {
|
||||||
editor.update(() => {
|
editor.update(() => {
|
||||||
const selection = $getSelection();
|
const selection = $getSelection();
|
||||||
|
|
||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
$wrapNodes(selection, () => $createQuoteNode());
|
$wrapNodes(selection, () => $createQuoteNode());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatCode = () => {
|
const formatCode = () => {
|
||||||
if (blockType !== "code") {
|
if (blockType !== "code") {
|
||||||
editor.update(() => {
|
editor.update(() => {
|
||||||
const selection = $getSelection();
|
const selection = $getSelection();
|
||||||
|
|
||||||
if ($isRangeSelection(selection)) {
|
if ($isRangeSelection(selection)) {
|
||||||
$wrapNodes(selection, () => $createCodeNode());
|
$wrapNodes(selection, () => $createCodeNode());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
setShowBlockOptionsDropDown(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dropdown" ref={dropDownRef}>
|
<Dropdown
|
||||||
<button className="item" onClick={formatParagraph}>
|
trigger="click"
|
||||||
<span className={`icon paragraph${theme === "dark" ? "-dark" : ""}`} />
|
clickToHide
|
||||||
<span className="text">Paragraph</span>
|
render={
|
||||||
{blockType === "paragraph" && <span className="active" />}
|
<Dropdown.Menu>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatParagraph}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.paragraph}`} />}
|
||||||
|
>
|
||||||
|
Paragraph
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatLargeHeading}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.h1}`} />}
|
||||||
|
>
|
||||||
|
Large Heading
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatSmallHeading}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.h2}`} />}
|
||||||
|
>
|
||||||
|
Small Heading
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatBulletList}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.ul}`} />}
|
||||||
|
>
|
||||||
|
Bullet List
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatNumberedList}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.ol}`} />}
|
||||||
|
>
|
||||||
|
Numbered List
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatQuote}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.quote}`} />}
|
||||||
|
>
|
||||||
|
Quote
|
||||||
|
</Dropdown.Item>
|
||||||
|
<Dropdown.Item
|
||||||
|
onClick={formatCode}
|
||||||
|
icon={<i className={`bi ${blockTypeToIcon.code}`} />}
|
||||||
|
>
|
||||||
|
Code Block
|
||||||
|
</Dropdown.Item>
|
||||||
|
</Dropdown.Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="flex mx-2 justify-center items-center"
|
||||||
|
aria-label="Formatting Options"
|
||||||
|
>
|
||||||
|
<i className={`bi ${blockTypeToIcon[blockType]} me-3`} />
|
||||||
|
<span className="me-3 text-sm">{blockTypeToBlockName[blockType]}</span>
|
||||||
|
<i className="bi bi-chevron-down" />
|
||||||
</button>
|
</button>
|
||||||
<button className="item" onClick={formatLargeHeading}>
|
</Dropdown>
|
||||||
<span
|
|
||||||
className={`icon large-heading${theme === "dark" ? "-dark" : ""}`}
|
|
||||||
/>
|
|
||||||
<span className="text">Large Heading</span>
|
|
||||||
{blockType === "h1" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
<button className="item" onClick={formatSmallHeading}>
|
|
||||||
<span
|
|
||||||
className={`icon small-heading${theme === "dark" ? "-dark" : ""}`}
|
|
||||||
/>
|
|
||||||
<span className="text">Small Heading</span>
|
|
||||||
{blockType === "h2" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
<button className="item" onClick={formatBulletList}>
|
|
||||||
<span
|
|
||||||
className={`icon bullet-list${theme === "dark" ? "-dark" : ""}`}
|
|
||||||
/>
|
|
||||||
<span className="text">Bullet List</span>
|
|
||||||
{blockType === "ul" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
<button className="item" onClick={formatNumberedList}>
|
|
||||||
<span
|
|
||||||
className={`icon numbered-list${theme === "dark" ? "-dark" : ""}`}
|
|
||||||
/>
|
|
||||||
<span className="text">Numbered List</span>
|
|
||||||
{blockType === "ol" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
<button className="item" onClick={formatQuote}>
|
|
||||||
<span className={`icon quote${theme === "dark" ? "-dark" : ""}`} />
|
|
||||||
<span className="text">Quote</span>
|
|
||||||
{blockType === "quote" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
<button className="item" onClick={formatCode}>
|
|
||||||
<span className={`icon code${theme === "dark" ? "-dark" : ""}`} />
|
|
||||||
<span className="text">Code Block</span>
|
|
||||||
{blockType === "code" && <span className="active" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -432,8 +394,6 @@ export default function ToolbarPlugin(props) {
|
|||||||
const [canRedo, setCanRedo] = useState(false);
|
const [canRedo, setCanRedo] = useState(false);
|
||||||
const [blockType, setBlockType] = useState("paragraph");
|
const [blockType, setBlockType] = useState("paragraph");
|
||||||
const [selectedElementKey, setSelectedElementKey] = useState(null);
|
const [selectedElementKey, setSelectedElementKey] = useState(null);
|
||||||
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
|
|
||||||
useState(false);
|
|
||||||
const [codeLanguage, setCodeLanguage] = useState("");
|
const [codeLanguage, setCodeLanguage] = useState("");
|
||||||
const [, setIsRTL] = useState(false);
|
const [, setIsRTL] = useState(false);
|
||||||
const [isLink, setIsLink] = useState(false);
|
const [isLink, setIsLink] = useState(false);
|
||||||
@ -469,7 +429,7 @@ export default function ToolbarPlugin(props) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Update text format
|
|
||||||
setIsBold(selection.hasFormat("bold"));
|
setIsBold(selection.hasFormat("bold"));
|
||||||
setIsItalic(selection.hasFormat("italic"));
|
setIsItalic(selection.hasFormat("italic"));
|
||||||
setIsUnderline(selection.hasFormat("underline"));
|
setIsUnderline(selection.hasFormat("underline"));
|
||||||
@ -477,7 +437,6 @@ export default function ToolbarPlugin(props) {
|
|||||||
setIsCode(selection.hasFormat("code"));
|
setIsCode(selection.hasFormat("code"));
|
||||||
setIsRTL($isParentElementRTL(selection));
|
setIsRTL($isParentElementRTL(selection));
|
||||||
|
|
||||||
// Update links
|
|
||||||
const node = getSelectedNode(selection);
|
const node = getSelectedNode(selection);
|
||||||
const parent = node.getParent();
|
const parent = node.getParent();
|
||||||
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||||
@ -549,131 +508,91 @@ export default function ToolbarPlugin(props) {
|
|||||||
<div className="toolbar" ref={toolbarRef}>
|
<div className="toolbar" ref={toolbarRef}>
|
||||||
<button
|
<button
|
||||||
disabled={!canUndo}
|
disabled={!canUndo}
|
||||||
onClick={() => {
|
onClick={() => editor.dispatchCommand(UNDO_COMMAND)}
|
||||||
editor.dispatchCommand(UNDO_COMMAND);
|
|
||||||
}}
|
|
||||||
className="toolbar-item spaced"
|
className="toolbar-item spaced"
|
||||||
aria-label="Undo"
|
aria-label="Undo"
|
||||||
>
|
>
|
||||||
<i className={`format ${theme === "dark" ? "undo-dark" : "undo"}`} />
|
<i
|
||||||
|
className={`bi bi-arrow-counterclockwise ${
|
||||||
|
canUndo ? "" : "opacity-30"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
disabled={!canRedo}
|
disabled={!canRedo}
|
||||||
onClick={() => {
|
onClick={() => editor.dispatchCommand(REDO_COMMAND)}
|
||||||
editor.dispatchCommand(REDO_COMMAND);
|
|
||||||
}}
|
|
||||||
className="toolbar-item"
|
className="toolbar-item"
|
||||||
aria-label="Redo"
|
aria-label="Redo"
|
||||||
>
|
>
|
||||||
<i className={`format ${theme === "dark" ? "redo-dark" : "redo"}`} />
|
<i className={`bi bi-arrow-clockwise ${canRedo ? "" : "opacity-30"}`} />
|
||||||
</button>
|
</button>
|
||||||
<Divider />
|
<Divider />
|
||||||
{supportedBlockTypes.has(blockType) && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
className="toolbar-item block-controls"
|
|
||||||
onClick={() =>
|
|
||||||
setShowBlockOptionsDropDown(!showBlockOptionsDropDown)
|
|
||||||
}
|
|
||||||
aria-label="Formatting Options"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={
|
|
||||||
"icon block-type " +
|
|
||||||
blockType +
|
|
||||||
(theme === "dark" ? "-dark" : "")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<span className="text">{blockTypeToBlockName[blockType]}</span>
|
|
||||||
<i className={`chevron-down${theme === "dark" ? "-dark" : ""}`} />
|
|
||||||
</button>
|
|
||||||
{showBlockOptionsDropDown &&
|
|
||||||
createPortal(
|
|
||||||
<BlockOptionsDropdownList
|
<BlockOptionsDropdownList
|
||||||
editor={editor}
|
editor={editor}
|
||||||
blockType={blockType}
|
blockType={blockType}
|
||||||
toolbarRef={toolbarRef}
|
/>
|
||||||
setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
|
|
||||||
theme={theme}
|
|
||||||
/>,
|
|
||||||
document.body
|
|
||||||
)}
|
|
||||||
<Divider />
|
<Divider />
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{blockType === "code" ? (
|
{blockType === "code" ? (
|
||||||
<>
|
<div className="flex items-center">
|
||||||
<Select
|
<Select
|
||||||
className="toolbar-item code-language"
|
className="toolbar-item code-language"
|
||||||
onChange={onCodeLanguageSelect}
|
onChange={onCodeLanguageSelect}
|
||||||
options={codeLanguges}
|
options={codeLanguges}
|
||||||
value={codeLanguage}
|
value={codeLanguage}
|
||||||
/>
|
/>
|
||||||
<i
|
<i className="bi bi-chevron-down" />
|
||||||
className={`chevron-down${theme === "dark" ? "-dark" : ""} inside`}
|
</div>
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")}
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
|
||||||
}}
|
|
||||||
className={"toolbar-item spaced " + (isBold ? "active" : "")}
|
className={"toolbar-item spaced " + (isBold ? "active" : "")}
|
||||||
aria-label="Format Bold"
|
aria-label="Format Bold"
|
||||||
>
|
>
|
||||||
<i className={`format bold${theme === "dark" ? "-dark" : ""}`} />
|
<i className="bi bi-type-bold" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
|
||||||
}}
|
}
|
||||||
className={"toolbar-item spaced " + (isItalic ? "active" : "")}
|
className={"toolbar-item spaced " + (isItalic ? "active" : "")}
|
||||||
aria-label="Format Italics"
|
aria-label="Format Italics"
|
||||||
>
|
>
|
||||||
<i className={`format italic${theme === "dark" ? "-dark" : ""}`} />
|
<i className="bi bi-type-italic" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
|
||||||
}}
|
}
|
||||||
className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
|
className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
|
||||||
aria-label="Format Underline"
|
aria-label="Format Underline"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-type-underline" />
|
||||||
className={`format underline${theme === "dark" ? "-dark" : ""}`}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
|
||||||
}}
|
}
|
||||||
className={
|
className={
|
||||||
"toolbar-item spaced " + (isStrikethrough ? "active" : "")
|
"toolbar-item spaced " + (isStrikethrough ? "active" : "")
|
||||||
}
|
}
|
||||||
aria-label="Format Strikethrough"
|
aria-label="Format Strikethrough"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-type-strikethrough" />
|
||||||
className={`format strikethrough${
|
|
||||||
theme === "dark" ? "-dark" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")}
|
||||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
|
||||||
}}
|
|
||||||
className={"toolbar-item spaced " + (isCode ? "active" : "")}
|
className={"toolbar-item spaced " + (isCode ? "active" : "")}
|
||||||
aria-label="Insert Code"
|
aria-label="Insert Code"
|
||||||
>
|
>
|
||||||
<i className={`format code${theme === "dark" ? "-dark" : ""}`} />
|
<i className="bi bi-code-slash" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={insertLink}
|
onClick={insertLink}
|
||||||
className={"toolbar-item spaced " + (isLink ? "active" : "")}
|
className={"toolbar-item spaced " + (isLink ? "active" : "")}
|
||||||
aria-label="Insert Link"
|
aria-label="Insert Link"
|
||||||
>
|
>
|
||||||
<i className={`format link${theme === "dark" ? "-dark" : ""}`} />
|
<i className="bi bi-link" />
|
||||||
</button>
|
</button>
|
||||||
{isLink &&
|
{isLink &&
|
||||||
createPortal(
|
createPortal(
|
||||||
@ -682,30 +601,22 @@ export default function ToolbarPlugin(props) {
|
|||||||
)}
|
)}
|
||||||
<Divider />
|
<Divider />
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left")
|
||||||
}}
|
}
|
||||||
className="toolbar-item spaced"
|
className="toolbar-item spaced"
|
||||||
aria-label="Left Align"
|
aria-label="Left Align"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-text-left" />
|
||||||
className={`format ${
|
|
||||||
theme === "dark" ? "left-align-dark" : "left-align"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() =>
|
||||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center")
|
||||||
}}
|
}
|
||||||
className="toolbar-item spaced"
|
className="toolbar-item spaced"
|
||||||
aria-label="Center Align"
|
aria-label="Center Align"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-text-center" />
|
||||||
className={`format ${
|
|
||||||
theme === "dark" ? "center-align-dark" : "center-align"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -714,11 +625,7 @@ export default function ToolbarPlugin(props) {
|
|||||||
className="toolbar-item spaced"
|
className="toolbar-item spaced"
|
||||||
aria-label="Right Align"
|
aria-label="Right Align"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-text-right" />
|
||||||
className={`format ${
|
|
||||||
theme === "dark" ? "right-align-dark" : "right-align"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -727,12 +634,8 @@ export default function ToolbarPlugin(props) {
|
|||||||
className="toolbar-item"
|
className="toolbar-item"
|
||||||
aria-label="Justify Align"
|
aria-label="Justify Align"
|
||||||
>
|
>
|
||||||
<i
|
<i className="bi bi-justify" />
|
||||||
className={`format ${
|
</button>
|
||||||
theme === "dark" ? "justify-align-dark" : "justify-align"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</button>{" "}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -319,171 +319,6 @@ pre::-webkit-scrollbar-thumb {
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar i.chevron-down {
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-left: 6px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
user-select: none;
|
|
||||||
background-image: url(/public/images/icons/chevron-down.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar i.chevron-down-dark {
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-left: 6px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
user-select: none;
|
|
||||||
background-image: url(/public/images/icons/chevron-down-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar i.chevron-down.inside {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-top: 11px;
|
|
||||||
margin-right: 10px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar i.chevron-down-dark.inside {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-top: 11px;
|
|
||||||
margin-right: 10px;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls button:focus-visible {
|
|
||||||
border-color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type {
|
|
||||||
background-size: contain;
|
|
||||||
display: block;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.paragraph {
|
|
||||||
background-image: url(/public/images/icons/text-paragraph.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.paragraph-dark {
|
|
||||||
background-image: url(/public/images/icons/text-paragraph-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.h1 {
|
|
||||||
background-image: url(/public/images/icons/type-h1.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.h1-dark {
|
|
||||||
background-image: url(/public/images/icons/type-h1-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.h2 {
|
|
||||||
background-image: url(/public/images/icons/type-h2.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.h2-dark {
|
|
||||||
background-image: url(/public/images/icons/type-h2-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.quote {
|
|
||||||
background-image: url(/public/images/icons/chat-square-quote.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.quote-dark {
|
|
||||||
background-image: url(/public/images/icons/chat-square-quote-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.ul {
|
|
||||||
background-image: url(/public/images/icons/list-ul.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.ul-dark {
|
|
||||||
background-image: url(/public/images/icons/list-ul-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.ol {
|
|
||||||
background-image: url(/public/images/icons/list-ol.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.ol-dark {
|
|
||||||
background-image: url(/public/images/icons/list-ol-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.code {
|
|
||||||
background-image: url(/public/images/icons/code.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-controls span.block-type.code-dark {
|
|
||||||
background-image: url(/public/images/icons/code-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
z-index: 5;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 0 0 1px rgba(var(--semi-grey-2), 1);
|
|
||||||
border-radius: 6px;
|
|
||||||
min-width: 240px;
|
|
||||||
min-height: 40px;
|
|
||||||
background-color: rgba(var(--semi-grey-1), 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item {
|
|
||||||
padding: 6px 16px;
|
|
||||||
width: 100%;
|
|
||||||
color: rgba(var(--semi-text-1), 1);
|
|
||||||
cursor: pointer;
|
|
||||||
line-height: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-shrink: 0;
|
|
||||||
justify-content: space-between;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item .active {
|
|
||||||
display: flex;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item:first-child {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item:last-child {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item:hover {
|
|
||||||
background-color: rgba(var(--semi-grey-3), 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item .text {
|
|
||||||
display: flex;
|
|
||||||
line-height: 20px;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .item .icon {
|
|
||||||
display: flex;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
user-select: none;
|
|
||||||
margin-right: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-editor {
|
.link-editor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
@ -582,163 +417,3 @@ pre::-webkit-scrollbar-thumb {
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
vertical-align: -0.25em;
|
vertical-align: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.undo {
|
|
||||||
background-image: url(/public/images/icons/arrow-counterclockwise.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.undo-dark {
|
|
||||||
background-image: url(/public/images/icons/arrow-counterclockwise-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.redo {
|
|
||||||
background-image: url(/public/images/icons/arrow-clockwise.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.redo-dark {
|
|
||||||
background-image: url(/public/images/icons/arrow-clockwise-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.paragraph {
|
|
||||||
background-image: url(/public/images/icons/text-paragraph.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.paragraph-dark {
|
|
||||||
background-image: url(/public/images/icons/text-paragraph-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.large-heading,
|
|
||||||
.icon.h1 {
|
|
||||||
background-image: url(/public/images/icons/type-h1.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.large-heading-dark,
|
|
||||||
.icon.h1-dark {
|
|
||||||
background-image: url(/public/images/icons/type-h1-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.small-heading,
|
|
||||||
.icon.h2 {
|
|
||||||
background-image: url(/public/images/icons/type-h2.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.small-heading-dark,
|
|
||||||
.icon.h2-dark {
|
|
||||||
background-image: url(/public/images/icons/type-h2-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.bullet-list,
|
|
||||||
.icon.ul {
|
|
||||||
background-image: url(/public/images/icons/list-ul.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.bullet-list-dark,
|
|
||||||
.icon.ul-dark {
|
|
||||||
background-image: url(/public/images/icons/list-ul-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.numbered-list,
|
|
||||||
.icon.ol {
|
|
||||||
background-image: url(/public/images/icons/list-ol.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.numbered-list-dark,
|
|
||||||
.icon.ol-dark {
|
|
||||||
background-image: url(/public/images/icons/list-ol-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.quote {
|
|
||||||
background-image: url(/public/images/icons/chat-square-quote.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.quote-dark {
|
|
||||||
background-image: url(/public/images/icons/chat-square-quote-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.code {
|
|
||||||
background-image: url(/public/images/icons/code.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon.code-dark {
|
|
||||||
background-image: url(/public/images/icons/code-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.bold {
|
|
||||||
background-image: url(/public/images/icons/type-bold.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.bold-dark {
|
|
||||||
background-image: url(/public/images/icons/type-bold-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.italic {
|
|
||||||
background-image: url(/public/images/icons/type-italic.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.italic-dark {
|
|
||||||
background-image: url(/public/images/icons/type-italic-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.underline {
|
|
||||||
background-image: url(/public/images/icons/type-underline.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.underline-dark {
|
|
||||||
background-image: url(/public/images/icons/type-underline-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.strikethrough {
|
|
||||||
background-image: url(/public/images/icons/type-strikethrough.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.strikethrough-dark {
|
|
||||||
background-image: url(/public/images/icons/type-strikethrough-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.code {
|
|
||||||
background-image: url(/public/images/icons/code.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.code-dark {
|
|
||||||
background-image: url(/public/images/icons/code-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.link {
|
|
||||||
background-image: url(/public/images/icons/link.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.link-dark {
|
|
||||||
background-image: url(/public/images/icons/link-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.left-align {
|
|
||||||
background-image: url(/public/images/icons/text-left.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.left-align-dark {
|
|
||||||
background-image: url(/public/images/icons/text-left-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.center-align {
|
|
||||||
background-image: url(/public/images/icons/text-center.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.center-align-dark {
|
|
||||||
background-image: url(/public/images/icons/text-center-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.right-align {
|
|
||||||
background-image: url(/public/images/icons/text-right.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.right-align-dark {
|
|
||||||
background-image: url(/public/images/icons/text-right-dark.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.justify-align {
|
|
||||||
background-image: url(/public/images/icons/justify.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.justify-align-dark {
|
|
||||||
background-image: url(/public/images/icons/justify-dark.svg);
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user