improved markdown editor

frontend/src/Components/MarkdownEditor.svelte

@@ -104,30 +104,16 @@
     if (simple) startEdit();
 </script>
 
-<style>
-    textarea{
-        width: 100%;
-        min-height: 100px;
-    }
-    div{
-        min-width: 40px;
-        min-height: 20px;
-    }
-    div.editable:hover{
-        border: 1px dotted;
-    }
-</style>
-
 <div class="markdown {editing?'editing':''}">
 {#if editing}
-    <div class="boundary">
+    <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
-        <textarea bind:value={editValue.source} onkeyup={typed} autofocus={!simple}></textarea>
+    <div>{@html target(editValue.rendered)}</div>
-        <span class="buttons">
+    <div class="buttons">
-            <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
+        <button class="cancel" onclick={e => editing = false}>{t('cancel')}</button>
-            <span>{@html t('markdown_supported')}</span>
+        <span>{@html t('markdown_supported')}</span>
-            <button class="save" onclick={doSave}>{t('save')}</button>
+        <button class="save" onclick={doSave}>{t('save')}</button>
-        </span>
     </div>
-{/if}
+{:else}
     <svelte:element this={type} {onclick} {oncontextmenu} class={{editable}} title={t('right_click_to_edit')} >{@html target(editValue.rendered)}</svelte:element>
+{/if}
 </div>

frontend/src/routes/task/View.svelte

@@ -210,9 +210,7 @@
     </div>
     {#if task.description}
     <div>{t('description')}</div>
-    <div class="description">
+    <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
-        <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
-    </div>
     {/if}
     {#if !showSettings && task.start_date}
         <div>{t('start_date')}</div>
@@ -277,6 +275,10 @@
         </ul>
     </div>
     {/if}
+    <div>{t('tags')}</div>
+    <div class="tags">
+        <TagList module="task" {id} user_list={Object.keys(task.members).map(id => +id)} />
+    </div>
 
     <div>
         {t('subtasks')}
@@ -288,10 +290,6 @@
         {/if}
     </div>
 
-    <div>{t('tags')}</div>
-    <div class="tags">
-        <TagList module="task" {id} user_list={Object.keys(task.members).map(id => +id)} />
-    </div>
     <h3>{t('notes')}</h3>
     <div>
     <Notes module="task" entity_id={id} />

web/src/main/resources/web/css/default.css

@@ -290,6 +290,18 @@ span.timetracking {
   display: inline-block;
 }
 
+.markdown.editing{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 10px;
+}
+.markdown .buttons{
+    grid-column-end: span 2;
+}
+
+.editable:hover{
+    border: 1px dotted;
+}
 
 .timetracks .year, .timetracks .month{
     border: 1px solid;
@@ -307,23 +319,6 @@ span.timetracking {
     float: right;
 }
 
-.markdown.editing{
-    position: relative;
-}
-
-.markdown.editing > *{
-    width: 49%;
-}
-
-.markdown.editing > *:nth-child(2){
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-.markdown img{
-    max-width: 75%;
-}
 
 table{
     min-width: 30vw;
@@ -370,6 +365,7 @@ a.wikilink{
 .grid2{
     display: grid;
     grid-template-columns: 230px auto;
+    margin: 0 5px;
 }
 
 .grid2 > :nth-child(2n-1){