editor de texto, fiz o gerador de markdown

componentes/escrever.php

@@ -30,10 +30,20 @@
     </div>
     <div id="text-write">
         <ul>
+            <span class="material-symbols-outlined h1">format_h1</span>
+            <span class="material-symbols-outlined h2">format_h2</span>
+            <span class="material-symbols-outlined h3">format_h3</span>
+            <span class="material-symbols-outlined bold">format_bold</span>
+            <span class="material-symbols-outlined italic" id="gap">format_italic</span>
+            <span class="material-symbols-outlined">photo</span>
+            <span class="material-symbols-outlined">format_list_bulleted</span>
+            <span class="material-symbols-outlined" id="gap">chat_paste_go</span>
+            <span class="material-symbols-outlined">visibility</span>
         </ul>
         <li>
-            <textarea placeholder="escreva sua historia aqui"></textarea>
+            <textarea id="edit" placeholder="escreva sua historia aqui"></textarea>
         </li>
         <a id="btn">enviar</a>
     </div>
 </div>
+<script type="text/javascript" src="javascript/escrever.js"></script>

css/escrever.css

@@ -8,6 +8,7 @@
         align-items: center;
         flex-direction: column;
         img {
+            cursor: pointer;
             object-fit: cover;
             width: 50dvh;
             height: 50dvh;
@@ -17,22 +18,40 @@
             display: flex;
             align-items: center;
             flex-direction: column;
+            width: 100%;
             li {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
                 margin: 0 0 1dvh 0;
-                width: 95%;
+                width: 100%;
                 input[type="text"] {
-                    width: 100%;
+                    width: 90%;
                     outline: none;
                     font-size: 1.3em;
+                    padding: 1dvh;
+                    color: var(--btn);
+                    background-color: var(--bg-light);
+                    border: none;
+                    border-bottom: solid 2px var(--btn);
                 }
                 textarea {
                     font-size: 1.3em;
+                    width: 90%;
+                    padding: 1dvh;
                     outline: none;
                     resize: none;
-                    width: 100%;
-                    height: 25dvh;
+                    height: 20dvh;
+                    color: var(--btn);
+                    background-color: var(--bg-light);
+                    border: solid 2px var(--btn);
                 }
             }
+
+            #tags {
+                display: block;
+                width: 90%;
+            }
         }
     }
     #text-write {
@@ -42,15 +61,41 @@
         ul {
             width: 100%;
             min-height: 3dvw;
-            background: purple;
+            display: flex;
+            align-items: center;
+            padding: 0 1dvh 0 1dvh;
+            span {
+                cursor: pointer;
+                width: 4dvh;
+                height: 4dvh;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: 0.3s;
+                background-color: var(--btn);
+                color: var(--bg-dark);
+            }
+            span:hover {
+                background-color: var(--bg-light);
+                color: var(--btn);
+            }
+
+            #gap {
+                margin: 0 1dvb 0 0;
+            }
         }
         li {
             width: 100%;
+            position: relative;
             textarea {
                 width: 100%;
-                height: 39dvw;
+                height: 78dvh;
                 resize: none;
+                outline: none;
                 padding: 1dvh;
+                color: var(--btn);
+                background-color: var(--bg-light);
+                border: none;
             }
         }
         #btn {

css/home.css

@@ -31,7 +31,7 @@
             color: var(--bg-dark);
         }
         li:hover {
-            color: var(--font);
+            color: var(--btn);
         }
     }
 }

index.php

@@ -6,6 +6,7 @@
         <link rel="icon" type="image/x-icon" href="assets/favicon.png">
         <link rel="stylesheet" href="css/base.css" />
         <link rel="stylesheet" href="css/home.css" />
+        <script type="text/javascript" src="javascript/libs/jquery.js"></script>
         <script type="text/javascript" src="javascript/libs/vanila.js"></script>
         <title>;-;</title>
     </head>

javascript/escrever.js

@@ -0,0 +1,63 @@
+function setText(textarea, text, inicio, fim, _in) {
+  textarea.value = text;
+  textarea.selectionStart = inicio + _in.length;
+  textarea.selectionEnd = fim + _in.length;
+  textarea.focus();
+}
+
+$(function () {
+  function editText(textarea, _in, _out) {
+    let inicio = textarea.selectionStart;
+    let fim = textarea.selectionEnd;
+    let valor = textarea.value;
+
+    switch (inicio === fim) {
+      case true:
+        setText(
+          textarea,
+          valor.slice(0, inicio) + _in + "texto aqui" + _out + valor.slice(fim),
+          inicio,
+          fim,
+          _in,
+        );
+        break;
+      default:
+        setText(
+          textarea,
+          valor.slice(0, inicio) +
+            _in +
+            valor.slice(inicio, fim) +
+            _out +
+            valor.slice(fim),
+          inicio,
+          fim,
+          _in,
+        );
+
+        break;
+    }
+  }
+
+  $("#text-write ul span").on("click", function () {
+    let list = [
+      { start: "# ", end: "" },
+      { start: "## ", end: "" },
+      { start: "### ", end: "" },
+      { start: "**", end: "**" },
+      { start: "_", end: "_" },
+      {
+        addImg: function () {
+          editText($("#edit")[0], "[[img]{},'", "',size,100,100]");
+        },
+      }, // especial
+      { start: "- ", end: "" },
+      { start: "> ", end: "" },
+    ];
+    let md = list[$(this).index()];
+    try {
+      md.addImg ? md.addImg() : editText($("#edit")[0], md.start, md.end);
+    } catch {
+      alert("vou usar essa parte para executar a previw");
+    }
+  });
+});