added tinyMarkDownEditor and adjustede the CSS

libs/timeline.css

@@ -320,7 +320,7 @@ article small a:hover {
 
 #new_twt {
     border: none;
-    text-align: center
+/* text-align: center*/
 }
 
 #new_twt input[type="submit"] {

libs/tiny-mde.css

@@ -0,0 +1,233 @@
+.TinyMDE {
+/*  background-color:#fff;
+  color:#000;
+  font-size:16px;
+  line-height:24px;
+  outline: none;
+  padding:5px; */
+
+  color: var(--text);
+  background-color: var(--bg);
+  border: 1px solid var(--border);
+
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: var(--standard-border-radius);
+  min-height: 6rem;
+  background-color: #222; /* darch.dk only */
+}
+/*
+.TMBlankLine {
+  height:24px;
+}
+
+.TMH1, .TMSetextH1 {
+  font-size:22px;
+  line-height:32px;
+  font-weight:bold;
+  margin-bottom:8px;
+}
+
+.TMSetextH1 {
+  margin-bottom:0px;
+}
+
+.TMSetextH1Marker {
+  margin-bottom:8px;
+}
+
+.TMH2, .TMSetextH2 {
+  font-size:20px;
+  line-height:28px;
+  font-weight:bold;
+  margin-bottom:4px;
+}
+*/
+
+.TMMark_TMCode {
+  font-family:monospace;
+  font-size:.9em;  
+}
+
+.TMFencedCodeBacktick, .TMFencedCodeTilde, .TMIndentedCode, .TMCode {
+  font-family:monospace;
+  font-size:.9em;
+  background-color: var(--accent-bg);
+}
+
+.TMCodeFenceBacktickOpen, .TMCodeFenceTildeOpen {
+  border-bottom: 1px solid var(--border);
+  font-family: monospace;
+  font-size:.9em;
+}
+
+.TMCodeFenceBacktickClose, .TMCodeFenceTildeClose {
+  border-top: 1px solid var(--border);
+  font-family: monospace;
+  font-size:.9em;
+}
+
+.TMInfoString {
+  color: var(--accent);
+}
+
+.TMCode {
+  border:1px solid var(--border);
+  border-radius: 2px;
+}
+
+.TMBlockquote {
+  font-style: italic;
+  border-left:2px solid var(--border);
+  padding-left:10px;
+  margin-left:10px;
+}
+
+/*
+.TMMark {
+  color:#a0a0a0;
+}
+
+.TMMark_TMH1, .TMMark_TMH2 {
+  color:#ff8080;
+}
+*/
+
+.TMMark_TMUL, .TMMark_TMOL {
+  color: var(--accent);
+}
+
+.TMImage {
+  text-decoration: underline;
+  text-decoration-color: #00ff00;
+}
+
+.TMLink {
+  text-decoration: underline;
+  text-decoration-color: var(--accent);
+}
+
+.TMLinkLabel {
+  text-decoration: underline;
+  font-family: monospace;
+}
+
+.TMLinkLabel_Definition, .TMLinkLabel_Valid {
+  color: #40c040;
+}
+
+.TMLinkLabel_Invalid {
+  color: #ff0000;
+}
+
+.TMLinkTitle {
+  font-style:italic;
+}
+
+.TMLinkDestination, .TMAutolink {
+  text-decoration: underline;
+  color: var(--accent);
+}
+
+/*
+.TMHR { 
+  position: relative;
+}
+
+.TMHR:before { 
+  content: '';
+  position: absolute;
+  bottom: 50%;
+  left: 40%;
+  border-bottom: 2px solid #808080;
+  width: 20%;
+  z-index:0;
+}
+*/
+
+.TMHTML, .TMHTMLBlock {
+  font-family:monospace;
+  font-size:.9em;
+  color:#8000ff;
+}
+
+.TMHTMLBlock {
+  color:#6000c0;
+}
+
+.TMCommandBar {
+/*  background-color:#f8f8f8;
+  height:24px;
+  border:4px solid #f8f8f8; */
+  box-sizing: content-box;
+  display:flex;
+  user-select: none;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;  
+  -ms-overflow-style: none; 
+}
+
+.TMCommandBar::-webkit-scrollbar {
+  display: none;
+}
+
+.TMCommandButton {
+  box-sizing: border-box;
+  display: inline-block;
+  height:24px;
+  width:24px;
+  padding:3px;
+  margin-right:4px; 
+  color: var(--text-light);
+  fill: var(--text-light);
+  text-align: center;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size:20px;
+  line-height:18px;
+  font-family: sans-serif;
+}
+
+.TMCommandDivider {
+  box-sizing: content-box;
+  height:24px;
+  margin-left:4px;
+  margin-right:8px;
+  width:0px;
+/*  border-left:1px solid var(--border);*/
+/*  border-right:1px solid #ffffff;*/
+  border-left:1px solid var(--border);
+}
+
+.TMCommandButton_Active {
+  font-weight: bold;
+  color: var(--accent-bg);
+  fill: var(--accent-bg);
+  background-color: var(--accent);
+}
+
+.TMCommandButton_Inactive {
+/*  background-color:#f8f8f8;*/
+  background-color: var(--accent-bg);
+}
+
+.TMCommandButton_Disabled {
+/*  color:#a0a0a0;
+  fill:#a0a0a0; */
+  color: var(--text-light);
+  fill: var(--text-light);  
+}
+
+@media (hover: hover) {
+  .TMCommandButton_Active:hover,
+  .TMCommandButton_Disabled:hover,
+  .TMCommandButton_Inactive:hover {
+/*    background-color:#e0e0ff;*/
+/*    fill:#000000;*/
+    fill: var(--accent);
+
+  }
+}

libs/tiny-mde.min.css

@@ -0,0 +1 @@
+.TinyMDE{background-color:#fff;color:#000;font-size:16px;line-height:24px;outline:none;padding:5px}.TMBlankLine{height:24px}.TMH1,.TMSetextH1{font-size:22px;font-weight:700;line-height:32px;margin-bottom:8px}.TMSetextH1{margin-bottom:0}.TMSetextH1Marker{margin-bottom:8px}.TMH2,.TMSetextH2{font-size:20px;font-weight:700;line-height:28px;margin-bottom:4px}.TMMark_TMCode{font-family:monospace;font-size:.9em}.TMCode,.TMFencedCodeBacktick,.TMFencedCodeTilde,.TMIndentedCode{background-color:#e0e0e0;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickOpen,.TMCodeFenceTildeOpen{border-bottom:1px solid silver;font-family:monospace;font-size:.9em}.TMCodeFenceBacktickClose,.TMCodeFenceTildeClose{border-top:1px solid silver;font-family:monospace;font-size:.9em}.TMInfoString{color:#00f}.TMCode{border:1px solid silver;border-radius:2px}.TMBlockquote{border-left:2px solid silver;font-style:italic;margin-left:10px;padding-left:10px}.TMMark{color:#a0a0a0}.TMMark_TMH1,.TMMark_TMH2,.TMMark_TMOL,.TMMark_TMUL{color:#ff8080}.TMImage{text-decoration:underline;text-decoration-color:#0f0}.TMLink{text-decoration:underline;text-decoration-color:#00f}.TMLinkLabel{font-family:monospace;text-decoration:underline}.TMLinkLabel_Definition,.TMLinkLabel_Valid{color:#40c040}.TMLinkLabel_Invalid{color:red}.TMLinkTitle{font-style:italic}.TMAutolink,.TMLinkDestination{color:#00f;text-decoration:underline}.TMHR{position:relative}.TMHR:before{border-bottom:2px solid grey;bottom:50%;content:"";left:40%;position:absolute;width:20%;z-index:0}.TMHTML,.TMHTMLBlock{color:#8000ff;font-family:monospace;font-size:.9em}.TMHTMLBlock{color:#6000c0}.TMCommandBar{-ms-overflow-style:none;background-color:#f8f8f8;border:4px solid #f8f8f8;box-sizing:content-box;display:flex;height:24px;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;-webkit-user-select:none;user-select:none}.TMCommandBar::-webkit-scrollbar{display:none}.TMCommandButton{fill:#404040;box-sizing:border-box;color:#404040;cursor:pointer;display:inline-block;font-family:sans-serif;font-size:20px;height:24px;line-height:18px;margin-right:4px;padding:3px;text-align:center;vertical-align:middle;width:24px}.TMCommandDivider{border-left:1px solid silver;border-right:1px solid #fff;box-sizing:content-box;height:24px;margin-left:4px;margin-right:8px;width:0}.TMCommandButton_Active{fill:navy;background-color:#c0c0ff;color:navy;font-weight:700}.TMCommandButton_Inactive{background-color:#f8f8f8}.TMCommandButton_Disabled{fill:#a0a0a0;color:#a0a0a0}@media (hover:hover){.TMCommandButton_Active:hover,.TMCommandButton_Disabled:hover,.TMCommandButton_Inactive:hover{fill:#000;background-color:#e0e0ff}}

partials/header.php

@@ -10,6 +10,11 @@ $profile = getTwtsFromTwtxtString($config['public_txt_url']);
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="<?= $baseURL ?>/media/logo.png">
+    <?php if( isset($_SESSION['password'])) { ?>
+        <script src="<?= $baseURL ?>/libs/tiny-mde.min.js"></script>
+        <!-- <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/tiny-mde.min.css" /> -->
+        <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/tiny-mde.css" />        
+    <?php } ?>
     <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/simple.css">
     <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/timeline.css">
     <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/custom.css">

views/new_twt.php

@@ -2,6 +2,7 @@
 // TODO: Give a warning if the file is not found
 $config = parse_ini_file('private/config.ini');
 
+
 if ($config['debug_mode']) {
 	ini_set('display_errors', 1);
 	ini_set('display_startup_errors', 1);
@@ -151,12 +152,27 @@ if (isset($_GET['hash'])) {
 <article id="new_twt">
 	<form method="POST">
 		<div id="posting">
+			<div id="toolbar"></div>
 			<textarea class="textinput" id="new_post" name="new_post"
 				rows="4" cols="100" autofocus required onfocus="var val=this.value; this.value=''; this.value= val;"
 				placeholder="Your twt"><?= $textareaValue ?></textarea>
 			<!-- <br> -->
 			<input type="submit" value="Post" name="submit">
 		</div>
+
+		<script type="text/javascript">
+		  var tinyMDE = new TinyMDE.Editor({
+		  	element: "new_post",
+		  	// content: "Type your twt"
+		  });
+		  var commandBar = new TinyMDE.CommandBar({
+		    element: "toolbar",
+		    editor: tinyMDE,
+		    commands: ['bold', 'italic', 'strikethrough', 'ul', 'ol',  'blockquote', 'code', '|', 'insertLink', 'insertImage'],
+		    
+		  });
+		</script>
+
 	</form>
 </article>