Add live Markdown editing, colours and files in the tree

Frontend/src/Components/SettingsPanel.jsx

@@ -390,6 +390,17 @@ export default function SettingsPanel({
             <Switch Checked={Settings.StickyToolbar} OnChange={(Event) => UpdateField("StickyToolbar", Event.target.checked)} />
           </div>
 
+          <div className="SettingsRow">
+            <label className="SettingsLabel">Markdown editing</label>
+            <select
+              value={Settings.MarkdownEditing}
+              onChange={(Event) => UpdateField("MarkdownEditing", Event.target.value)}
+            >
+              <option value="Live">Live: edit the Markdown where you click in the rendered file</option>
+              <option value="Separate">Separate: View and Edit are two modes</option>
+            </select>
+          </div>
+
           <div className="SettingsRowInline">
             <label className="SettingsLabel">Confirm before delete</label>
             <Switch Checked={Settings.ConfirmBeforeDelete} OnChange={(Event) => UpdateField("ConfirmBeforeDelete", Event.target.checked)} />