diff --git a/app/static/css/editor.css b/app/static/css/editor.css index 8251dc5..072aeec 100644 --- a/app/static/css/editor.css +++ b/app/static/css/editor.css @@ -1,7 +1,23 @@ -.editor > button > svg { +.editor .btn-group { + display: flex; + justify-content: space-between; +} +.editor .btn-group button { + background-color: var(--background); +} +.editor .btn-group button > svg { width: 25px; } -.editor > button > svg > path, -.editor > button > svg > rect { +.editor .btn-group button > svg > path, +.editor .btn-group button > svg > rect { fill: var(--icons); +} +.separator { + display: inline-block; + width: 0; + border-left: 1px solid #d9d9d9; + border-right: 1px solid #ffffff; + color: transparent; + text-indent: -10px; + margin: 0 6px; } \ No newline at end of file diff --git a/app/static/css/themes/FK_dark_theme.css b/app/static/css/themes/FK_dark_theme.css index dfe315e..7936096 100644 --- a/app/static/css/themes/FK_dark_theme.css +++ b/app/static/css/themes/FK_dark_theme.css @@ -127,8 +127,9 @@ table tr:nth-child(odd) { table.codehilitetable { --background: #263238; } -.editor svg { +.editor svg, .editor button { --icons: #fff; + --background: #0d1215; } div.editor-toolbar, div.CodeMirror { diff --git a/app/static/less/editor.less b/app/static/less/editor.less index 520b6f7..1f4ce94 100644 --- a/app/static/less/editor.less +++ b/app/static/less/editor.less @@ -1,15 +1,31 @@ @import "vars"; .editor { - & > button { - background-color: #000; + & .btn-group { + display: flex; + justify-content: space-between; - & > svg { - width: 25px; + & button { + background-color: var(--background); - & > path, & > rect { - fill: var(--icons); + & > svg { + width: 25px; + + & > path, & > rect { + fill: var(--icons); + } } } } } + +// From gitea +.separator { + display: inline-block; + width: 0; + border-left: 1px solid #d9d9d9; + border-right: 1px solid #fff; + color: transparent; + text-indent: -10px; + margin: 0 6px; +} diff --git a/app/static/scripts/editor.js b/app/static/scripts/editor.js index 56a3e83..231ae53 100644 --- a/app/static/scripts/editor.js +++ b/app/static/scripts/editor.js @@ -1,87 +1,11 @@ /* Add callbacks on text formatting buttons */ -function edit(e, type) { - function inline(type, str, repeat, insert) { - // Characters used to format inline blocs - // repeat: if true, add one more char to the longest suite found - // insert: insert between char and str (before and after) - var chars = { - 'bold': '*', - 'italic': '/', - 'underline': '_', - 'strikethrough': '~', - 'inline-code': '`', - 'h1': '===', - 'h2': '---', - 'h3': '...', - } - - if (repeat) { - // Detect longest suite of similar chars - var n = 1; var tmp = 1; - for(var i = 0; i < str.length; i++) { - if(str[i] == chars[type]) tmp++; - else tmp = 1; - n = (tmp > n) ? tmp : n; - } - return chars[type].repeat(n) + insert + str + insert + chars[type].repeat(n); - } - - return chars[type] + insert + str + insert + chars[type]; - } - - function list(type, str) { - switch(type) { - case 'list-bulleted': - return '* ' + str.replaceAll('\n', '\n* '); - break; - case 'list-numbered': - return '1. ' + str; - break; - } - } - - var ta = e.parentNode.parentNode.querySelector('textarea'); - var start = ta.selectionStart; - var end = ta.selectionEnd; - - switch(type) { - case 'bold': - case 'italic': - case 'underline': - case 'strikethrough': - case 'inline-code': - ta.value = ta.value.substring(0, start) - + inline(type, ta.value.substring(start, end), true, '') - + ta.value.substring(end); - break; - case 'h1': - case 'h2': - case 'h3': - ta.value = ta.value.substring(0, start) - + inline(type, ta.value.substring(start, end), false, ' ') - + ta.value.substring(end); - break; - case 'list-bulleted': - case 'list-numbered': - ta.value = ta.value.substring(0, start) - + list(type, ta.value.substring(start, end)) - + ta.value.substring(end); - break; - } -} - -function pre(type, str, multiline) { - -} - - -function bold(e) { - var ta = e.parentNode.parentNode.querySelector('textarea'); - var indexStart = ta.selectionStart; - var indexEnd = ta.selectionEnd; - var txt = ta.value.substring(indexStart, indexEnd); - ta.value += '\n' + inline('bold', txt); +function editor_bold(e) { + let ta = document.querySelector(".editor textarea"); + let indexStart = ta.selectionStart; + let indexEnd = ta.selectionEnd; + let txt = ta.value.substring(indexStart, indexEnd); + ta.value += '\n' + 'bold'; } @@ -89,18 +13,18 @@ function bold(e) { // Ctrl+Enter send the form ta = document.querySelector(".editor textarea"); ta.addEventListener('keydown', function(e) { - var keyCode = e.keyCode || e.which; + let keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); - var start = e.target.selectionStart; - var end = e.target.selectionEnd; + let start = e.target.selectionStart; + let end = e.target.selectionEnd; // set textarea value to: text before caret + tab + text after caret e.target.value = e.target.value.substring(0, start) + "\t" + e.target.value.substring(end); e.target.selectionEnd = start + 1; } if (e.ctrlKey && keyCode == 13) { - var e = e.target; + let e = e.target; while(! (e instanceof HTMLFormElement)) { e = e.parentNode; } diff --git a/app/templates/widgets/editor.html b/app/templates/widgets/editor.html index 97ef374..4d27eea 100644 --- a/app/templates/widgets/editor.html +++ b/app/templates/widgets/editor.html @@ -1,128 +1,131 @@ {% macro text_editor(field, label=True, autofocus=false) %} -
- - - - - - - - - - - - - - - - - - - - - - - + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + {{ field.label if label }} + {{ field() }} + + + + + + {% for error in field.errors %} + {{ error }} + {% endfor %}
- {{ field.label if label }} - {{ field() }} - - {% for error in field.errors %} - {{ error }} - {% endfor %} {% endmacro %}