online editor: Support attribute grouping

The LSP now groups attributes. Support that in the online editor

tools/online_editor/src/lsp_integration.ts

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
-import { Position, Range } from 'vscode-languageserver-types'
+import { Position, Range } from "vscode-languageserver-types";
 
 export interface DeclarationPosition {
   uri: string;
@@ -15,6 +15,7 @@ export interface DefinitionPosition {
 
 export interface Property {
   name: string;
+  group: string;
   type_name: string;
   declared_at: DeclarationPosition | null;
   defined_at: DefinitionPosition | null;

tools/online_editor/src/properties_widget.ts

@@ -120,9 +120,23 @@ export class PropertiesWidget extends Widget {
   ) {
     const table = this.tableNode;
 
+    let current_group = "";
+
     table.innerHTML = "";
 
     for (const p of properties) {
+      if (p.group !== current_group) {
+        const group_header = document.createElement("tr");
+        group_header.className = "group-header";
+
+        const group_cell = document.createElement("td");
+        group_cell.innerText = p.group;
+        group_cell.setAttribute("colspan", "2");
+        current_group = p.group;
+
+        group_header.appendChild(group_cell);
+        table.appendChild(group_header);
+      }
       const row = document.createElement("tr");
       row.className = "property";
       if (p.declared_at == null) {

tools/online_editor/styles/content.css

@@ -132,6 +132,12 @@
   width: 100%;
 }
 
+.properties-editor .properties-table .group-header td {
+  background-color: #000000;
+  color: #ffffff;
+  font-weight: bold;
+}
+
 .properties-editor .properties-table .undefined {
   background-color: #b0b0b0;
 }