feat(compose): add placeholder preview to compose add editor

Author: nzxl101

root/app/www/public/ajax/compose.php

@@ -273,8 +273,8 @@ function composeValidateAndWrite($dir, $yaml)
         </div>
         <div class="col-12 mb-3">
             <label class="form-label">Compose</label>
-            <textarea id="compose-add-data" style="display:none;"><?= htmlspecialchars($composeExample) ?></textarea>
-            <div id="compose-add-editor" style="height: 300px;"></div>
+            <textarea id="compose-add-data" style="display:none;"></textarea>
+            <div id="compose-add-editor" style="height: 300px;" data-placeholder="<?= htmlspecialchars($composeExample, ENT_QUOTES) ?>"></div>
         </div>
         <div class="col-12 text-center">
             <button class="btn btn-outline-success access-rw" onclick="composeAdd()">Add Compose</button>

root/app/www/public/css/style.css

@@ -767,3 +767,17 @@ tr.container-group-row .container-group-label {
     max-height: 70vh;
     overflow-x: auto;
 }
+.compose-placeholder {
+    position: absolute;
+    top: 6px;
+    left: 50px;
+    right: 12px;
+    z-index: 5;
+    overflow: hidden;
+    pointer-events: none;
+    white-space: pre-wrap;
+    color: #868e96;
+    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
+    font-size: 13px;
+    line-height: 1.5;
+}

root/app/www/public/js/compose.js

@@ -41,6 +41,40 @@ function initComposeEditor(id, content, readOnly = false)
     composeEditor = editor;
 }
 // ---------------------------------------------------------------------------------------------
+function composeEditorPlaceholder(containerId, placeholder)
+{
+    if (!placeholder) {
+        return;
+    }
+
+    const container = document.getElementById(containerId);
+    const overlay   = document.createElement('div');
+
+    overlay.className   = 'compose-placeholder';
+    overlay.textContent = placeholder;
+    container.appendChild(overlay);
+
+    const position = () => {
+        if (!composeEditor || !composeEditor.renderer) {
+            return;
+        }
+        const pos  = composeEditor.renderer.textToScreenCoordinates(0, 0);
+        const rect = container.getBoundingClientRect();
+        overlay.style.left = (pos.pageX - rect.left) + 'px';
+        overlay.style.top  = (pos.pageY - rect.top) + 'px';
+    };
+
+    const update = () => {
+        overlay.style.display = composeEditor && composeEditor.getValue() === '' ? 'block' : 'none';
+    };
+
+    composeEditor.on('change', update);
+    composeEditor.renderer.on('changeGutterWidth', position);
+    composeEditor.renderer.on('resize', position);
+    window.setTimeout(position, 0);
+    update();
+}
+// ---------------------------------------------------------------------------------------------
 function openComposeAdd()
 {
     $.ajax({
@@ -54,7 +88,8 @@ function openComposeAdd()
                 size: 'lg',
                 body: resultData,
                 onOpen: function () {
-                    initComposeEditor('compose-add-editor', $('#compose-add-data').val());
+                    initComposeEditor('compose-add-editor', '');
+                    composeEditorPlaceholder('compose-add-editor', $('#compose-add-editor').data('placeholder'));
                 },
                 onClose: function () {
                     if (composeEditor) {
@@ -214,9 +249,9 @@ function composeStream(path, action)
                         socket.close();
                         if (data.code === 0) {
                             toast('Compose', label + ' was completed', 'success');
-                            $('#compose-stream-output').text($('#compose-stream-output').text() + '\n[complete]');
+                            $('#compose-stream-output').text($('#compose-stream-output').text() + '\n[complete]\r\nAuto closing in 10s..');
 
-                            setTimeout(() => dialogClose('composeStream'), 300);
+                            setTimeout(() => dialogClose('composeStream'), 10e3);
                         } else {
                             toast('Compose', label + ' failed<br>' + (data.message || 'unknown error'), 'error');
                             $('#compose-stream-output').text($('#compose-stream-output').text() + '\n[failed]');