Text pasting fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "private": false,
   "description": "Pulse Signage application with MySQL and media uploads",
   "repository": {

src/web/public/css/admin.css

@@ -1094,6 +1094,13 @@ label {
   color: var(--text);
 }
 
+label > input,
+label > textarea,
+label > select,
+label > button  {
+  margin-top: 6px;
+}
+
 input,
 textarea,
 select,
@@ -1101,7 +1108,6 @@ button {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 12px;
-  margin-top: 6px;
   border: 1px solid var(--border-strong);
   border-radius: 12px;
   font: inherit;
@@ -1619,7 +1625,8 @@ tbody tr:last-child td {
   }
 
   table.table-cards td[data-label="Actions"] {
-    width: 100%;
+    width: 1%;
+    white-space: nowrap;
   }
 
   table.table-cards td .actions {
@@ -1628,11 +1635,11 @@ tbody tr:last-child td {
   }
 
   table.table-cards td[data-label="Actions"] .actions {
-    display: flex;
-    flex-wrap: wrap;
+    display: inline-flex;
+    flex-wrap: nowrap;
     align-items: center;
     justify-content: flex-start;
-    width: 100%;
+    width: auto;
   }
 
   table.table-cards td[data-label="Actions"] .actions > * {
@@ -1662,7 +1669,7 @@ tbody tr:last-child td {
   table.table-cards td[data-label="Actions"] .list-action {
     display: inline-flex;
     width: auto;
-    min-width: 96px;
+    min-width: 0;
     white-space: nowrap;
   }
 
@@ -1902,6 +1909,7 @@ table td .actions form {
   height: 28px;
   padding: 0;
   border: 0;
+  margin: 0;
   border-radius: 0;
   color: var(--muted);
   background: currentColor;
@@ -1948,33 +1956,26 @@ tr.sortable-drag {
   background: var(--surface);
 }
 
+#playlist-items-body tr.sortable-drag {
+  display: flex;
+  align-items: stretch;
+}
+
+#playlist-items-body tr.sortable-drag > td {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+#playlist-items-body tr.sortable-drag .playlist-order-cell-inner {
+  height: 100%;
+}
+
+#playlist-items-body tr.sortable-drag .playlist-drag-handle {
+  align-self: center;
+}
+
 @media (min-width: 721px) {
-  table.table-cards tr > td:nth-child(1),
-  table.table-cards tr > th:nth-child(1) {
-    width: 1%;
-    white-space: nowrap;
-  }
-
-  table.table-cards tr > td:nth-child(2),
-  table.table-cards tr > th:nth-child(2) {
-    width: 36%;
-  }
-
-  table.table-cards tr > td:nth-child(3),
-  table.table-cards tr > th:nth-child(3) {
-    width: 36%;
-  }
-
-  table.table-cards tr > td:nth-child(4),
-  table.table-cards tr > th:nth-child(4) {
-    width: 10%;
-  }
-
-  table.table-cards tr > td:nth-child(5),
-  table.table-cards tr > th:nth-child(5) {
-    width: 1%;
-    white-space: nowrap;
-  }
 }
 
 .actions form {

src/web/public/js/admin-page.js

@@ -165,7 +165,7 @@
 
     return [
       '<tr data-client-key="' + escapeHtml(getClientRowKey(client)) + '">',
-      '<td data-label="Client/Connection ID"><div class="connection-count">' + clientId + '</div><div class="connection-id">' + connectionId + '</div></td>',
+      '<td data-label="Client/Connection ID"><div class="connection-count">' + clientId + '</div><br><div class="connection-id">' + connectionId + '</div></td>',
       '<td data-label="IP">' + clientIp + '</td>',
       '<td data-label="Viewport">' + viewport + '</td>',
       '<td data-label="Connected">' + connectedAt + '</td>',
@@ -249,7 +249,7 @@
         var connectionId = client.id ? escapeHtml(client.id) : '<span class="empty">Unknown</span>';
         var currentSlide = client.currentSlideTitle ? escapeHtml(client.currentSlideTitle) : 'No slide currently showing';
 
-        row.cells[0].innerHTML = '<div class="connection-count">' + clientId + '</div><div class="connection-id">' + connectionId + '</div>';
+        row.cells[0].innerHTML = '<div class="connection-count">' + clientId + '</div><br><div class="connection-id">' + connectionId + '</div>';
         row.cells[1].innerHTML = clientIp;
         row.cells[2].innerHTML = viewport;
         row.cells[3].innerHTML = connectedAt;

src/web/public/js/playlist-schedule.js

@@ -371,6 +371,40 @@
       updateEmptyState();
     }
 
+    function lockDraggedRowWidths(row) {
+      if (!row) {
+        return;
+      }
+
+      var rowRect = row.getBoundingClientRect();
+      row.style.width = rowRect.width + 'px';
+      row.style.height = rowRect.height + 'px';
+      row.style.boxSizing = 'border-box';
+
+      Array.prototype.forEach.call(row.children, function (cell) {
+        var cellRect = cell.getBoundingClientRect();
+        cell.style.width = cellRect.width + 'px';
+        cell.style.height = cellRect.height + 'px';
+        cell.style.boxSizing = 'border-box';
+      });
+    }
+
+    function unlockDraggedRowWidths(row) {
+      if (!row) {
+        return;
+      }
+
+      row.style.width = '';
+      row.style.height = '';
+      row.style.boxSizing = '';
+
+      Array.prototype.forEach.call(row.children, function (cell) {
+        cell.style.width = '';
+        cell.style.height = '';
+        cell.style.boxSizing = '';
+      });
+    }
+
     function setRowSchedule(row, values) {
       var modeInput = row.querySelector('[name="schedule_mode[]"]');
       var startDatetime = row.querySelector('[name="schedule_start_datetime[]"]');
@@ -472,7 +506,14 @@
         fallbackTolerance: 3,
         swapThreshold: 0.65,
         invertedSwapThreshold: 0.65,
+        onChoose: function (event) {
+          lockDraggedRowWidths(event && event.item);
+        },
+        onUnchoose: function (event) {
+          unlockDraggedRowWidths(event && event.item);
+        },
         onEnd: function () {
+          unlockDraggedRowWidths(tbody.querySelector('.sortable-drag'));
           updateRowOrder();
         }
       });

src/web/public/js/slide-form.js

@@ -3,6 +3,7 @@ import {
   BlockQuote,
   Bold,
   ClassicEditor,
+  ClipboardPipeline,
   Essentials,
   FontBackgroundColor,
   FontColor,
@@ -142,6 +143,26 @@ import {
     }
   }
 
+  class ForcePlainTextPaste extends Plugin {
+    static get pluginName() {
+      return 'ForcePlainTextPaste';
+    }
+
+    static get requires() {
+      return [ClipboardPipeline];
+    }
+
+    init() {
+      var editor = this.editor;
+      var clipboardPipeline = editor.plugins.get(ClipboardPipeline);
+
+      this.listenTo(clipboardPipeline, 'inputTransformation', function (_event, data) {
+        var plainText = data.dataTransfer.getData('text/plain');
+        data.content = editor.data.processor.toView(plainTextToHtml(plainText));
+      }, { priority: 'high' });
+    }
+  }
+
   function escapeHtml(value) {
     return String(value ?? '')
       .replace(/&/g, '&')
@@ -151,6 +172,32 @@ import {
       .replace(/'/g, ''');
   }
 
+  function plainTextToHtml(value) {
+    var lines = String(value ?? '').replace(/\r\n?/g, '\n').split('\n');
+    var paragraphs = [];
+    var currentParagraph = [];
+
+    lines.forEach(function (line) {
+      if (line === '') {
+        if (currentParagraph.length) {
+          paragraphs.push('<p>' + currentParagraph.join('<br />') + '</p>');
+          currentParagraph = [];
+        } else {
+          paragraphs.push('<p></p>');
+        }
+        return;
+      }
+
+      currentParagraph.push(escapeHtml(line));
+    });
+
+    if (currentParagraph.length) {
+      paragraphs.push('<p>' + currentParagraph.join('<br />') + '</p>');
+    }
+
+    return paragraphs.length ? paragraphs.join('') : '<p></p>';
+  }
+
   function getTemplateById(id) {
     return templates.find(function (item) { return Number(item.id) === Number(id); }) || null;
   }
@@ -608,6 +655,7 @@ import {
           BlockQuote,
           Bold,
           Essentials,
+          ForcePlainTextPaste,
           FontBackgroundColor,
           FontColor,
           FontFamily,