add media select to editor

Author: d-oit

adminEditor/config.json

@@ -11,7 +11,8 @@
         "coloredCode": "```language\ncode\n```",
         "horizontalLine": "---",
         "internalLink": "{{< link \"path/to/file\" >}}text{{< /link >}}",
-        "mediaSelect": "![alt text](/img/blog/image.jpg)"
+        "mediaSelect": "![alt text](/img/blog/image.jpg)",
+        "blockquoteSelect": "Github \n Blockquote content"
     },
     "icons": {
         "bold": "bold",
@@ -25,7 +26,8 @@
         "coloredCode": "code",
         "horizontalLine": "minus",
         "internalLink": "file-alt",
-        "mediaSelect": "photo-video"
+        "mediaSelect": "photo-video",
+        "blockquoteSelect": "quote-right"
     },
     "server": {
         "port": 8081,
@@ -40,7 +42,7 @@
         },
         "thumbnailResize": {
             "method": "fit",
-            "maxWidth": 640
+            "maxWidth": 1024
         }
     }
 }

adminEditor/static/index.html

@@ -54,6 +54,8 @@ <h5 class="modal-title" id="mediaSelectModalLabel">Select Media</h5>
                 </div>
                 <div class="modal-body">
                     <select id="mediaFileSelect" class="form-select mb-3"></select>
+                    <input type="file" webkitRelativePath id="fileMediaSelect-select" class="form-control mb-3" placeholder="Select a file from the media folder">
+                    <p id="fileMediaSelect-feedback"></p>
                     <input type="text" id="newFileName" class="form-control mb-3" placeholder="New file name (without extension)">
                     <input type="text" id="altText" class="form-control" placeholder="Alt text for image">
                 </div>
@@ -65,6 +67,33 @@ <h5 class="modal-title" id="mediaSelectModalLabel">Select Media</h5>
         </div>
     </div>
 
+    <div class="modal fade" id="blockquoteModal" tabindex="-1" aria-labelledby="blockquoteModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="blockquoteModalLabel">Insert Blockqoute Code</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <select id="blockquoteSelect" class="form-select mb-3">
+                        <option value="> [!NOTE]">NOTE</option>
+                        <option value="> [!TIP]">TIP</option>
+                        <option value="> [!IMPORTANT]">IMPORTANT</option>
+                        <option value="> [!WARNING]">WARNING</option>
+                        <option value="> [!CAUTION]">CAUTION</option>
+                        <option value="> ">Only Quote</option>                      
+                    </select>
+                    <textarea title="blockquoteEditor" id="blockquoteContent" class="form-control" rows="10"></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" onclick="insertBlockquoteCode()">Enter</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <!-- Colored Code Dialog -->
    <div class="modal fade" id="coloredCodeModal" tabindex="-1" aria-labelledby="coloredCodeModalLabel" aria-hidden="true">
         <div class="modal-dialog">
@@ -244,6 +273,9 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
                 case 'internalLink':
                     showInternalLinksDialog();
                     break;
+                case 'blockquoteSelect':
+                    showModal('blockquoteModal');
+                    break;    
                 default:
                     doc.replaceRange(value, cursor);
             }
@@ -262,6 +294,22 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
             hideModal('coloredCodeModal');
         }
 
+        function insertBlockquoteCode() {
+            const blockquote = document.getElementById('blockquoteSelect').value;
+            const text = document.getElementById('blockquoteContent').value;
+            const formattedText = blockquote + "\n" + addPrefixToLines(text);
+            editor.getDoc().replaceSelection(formattedText);
+            hideModal('blockquoteModal');
+        }
+        
+        function addPrefixToLines(text) {
+            var lines = text.split('\n');
+            for (var i = 0; i < lines.length; i++) {
+                lines[i] = "> " + lines[i];
+            }
+            return lines.join('\n');
+        }
+
         function showInternalLinksDialog() {
             const select = document.getElementById('internalLinkSelect');
             select.innerHTML = '';
@@ -332,6 +380,9 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
                 case 'mediaSelect':
                     showMediaSelectDialog();
                     break;
+                case 'blockquoteSelect':
+                    showModal('blockquoteModal');
+                    break;    
                 default:
                     doc.replaceRange(value, cursor);
             }
@@ -350,12 +401,23 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
                         option.textContent = file;
                         select.appendChild(option);
                     });
+                    // TODO change, only for testing now -> create this as example for testing purposes:
+                    var fileName = document.getElementById("file-select").value;
+                    var newFileName = fileName.replace(/\.md$/, '_1'); // Replace .md with 1
+                    document.getElementById("newFileName").defaultValue = newFileName;
+                    document.getElementById("altText").defaultValue = newFileName;
                     showModal('mediaSelectModal');
                 });
         }
 
         function insertMediaFile() {
-            const file = document.getElementById('mediaFileSelect').value;
+            var file = document.getElementById('mediaFileSelect').value;
+            console.log(file)
+            const fileMediaSelect = document.getElementById('fileMediaSelect-select').files[0].name;
+            if(fileMediaSelect != null && fileMediaSelect) {
+                file = fileMediaSelect;
+                console.log(file)
+            }
             const newName = document.getElementById('newFileName').value;
             const altText = document.getElementById('altText').value;
 
@@ -374,6 +436,24 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
             });
         }
 
+        document.getElementById("fileMediaSelect-select").addEventListener("change", function() {
+            var fileInput = document.getElementById("fileMediaSelect-select");
+            var filePath = fileInput.value;
+           
+            var feedback = document.getElementById("fileMediaSelect-feedback");
+
+            // Check if the selected file is in the ./mediaSet folder
+            // TODO check against the media file list /api/media-list
+            if (true) {
+                feedback.textContent = "File selected: " + fileInput.files[0].name;
+                feedback.style.color = "green";
+            } else {
+                feedback.textContent = "Please select a file from the media folder.";
+                feedback.style.color = "red";
+                fileInput.value = ""; // Clear the input
+            }
+        });
+
         function toggleFullscreen() {
             const editorWrapper = editor.getWrapperElement();
             if (!document.fullscreenElement) {
@@ -486,6 +566,8 @@ <h5 class="modal-title" id="internalLinksModalLabel">Insert Internal Link</h5>
                 });
         }
 
+        
+
         function pasteFromClipboard() {
             navigator.clipboard.readText()
                 .then(text => {