Table improvements (#6958)

* Header toggling, resizable columns

* Allow all blocks in table cells, disable column resizing in read-only

* Fixed dynamic scroll shadows

* Refactor, scroll styling

* fix scrolling, tweaks

* fix: Table layout lost on sort

* fix: Caching of grip decorators

* refactor

* stash

* fix first render shadows

* stash

* First add column grip, styles

* Just add column/row click handlers left

* fix: isTableSelected for single cell table

* Refactor mousedown handlers

* fix: 'Add row before' command missing on first row

* fix overflow on rhs

* fix: Error clicking column grip when menu is open

* Hide table controls when printing

* Restore table header background

* fix: Header behavior when adding columns and rows at the edges

* Tweak header styling

* fix: Serialize and parsing of column attributes when copy/pasting
fix: Column width is lost when changing column alignment

shared/editor/styles/EditorStyleHelper.ts

@@ -0,0 +1,39 @@
+/**
+ * Class names and values used by the editor.
+ */
+export class EditorStyleHelper {
+  // Tables
+
+  /** Table wrapper */
+  static readonly table = "table-wrapper";
+
+  /** Table grip (circle in top left) */
+  static readonly tableGrip = "table-grip";
+
+  /** Table row grip */
+  static readonly tableGripRow = "table-grip-row";
+
+  /** Table column grip */
+  static readonly tableGripColumn = "table-grip-column";
+
+  /** "Plus" to add column on tables */
+  static readonly tableAddColumn = "table-add-column";
+
+  /** "Plus" to add row on tables */
+  static readonly tableAddRow = "table-add-row";
+
+  /** Scrollable area of table */
+  static readonly tableScrollable = "table-scrollable";
+
+  /** Full-width table layout */
+  static readonly tableFullWidth = "table-full-width";
+
+  /** Shadow on the right side of the table */
+  static readonly tableShadowRight = "table-shadow-right";
+
+  /** Shadow on the left side of the table */
+  static readonly tableShadowLeft = "table-shadow-left";
+
+  /** Minimum padding around editor */
+  static readonly padding = 32;
+}

shared/editor/styles/utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Combines class names into a single string. If the value is an object, it will only include keys
+ * with a truthy value.
+ *
+ * @param classNames An array of class names
+ * @returns A single string of class names
+ */
+export function cn(
+  ...classNames: (string | number | Record<string, boolean> | undefined)[]
+) {
+  return classNames
+    .filter(Boolean)
+    .map((item) => {
+      if (typeof item === "object") {
+        return Object.entries(item)
+          .filter(([, value]) => value)
+          .map(([key]) => key)
+          .join(" ");
+      }
+      return item;
+    })
+    .join(" ");
+}