@phuong-tran-redoc/document-engine-angular 0.1.5 → 0.1.6

package/README.md

@@ -206,6 +206,12 @@ the contract.** It lists every token the library reads
   hardcodes a colour.
 - `--de-editor-min-height` (default `12rem`) sets the editing surface's floor; alternatively give the
   `document-engine-editor` element a real height and the surface fills it.
+- **The editing surface does not scroll internally — it grows, and the page scrolls.** `0.1.5` briefly
+  made it a scroll container; that was reverted in `0.1.6` because the selection bubble menu is an
+  absolutely-positioned descendant of it, so the scroller became the panel's clip rect and a dropdown
+  opening upward lost its top options to the clip. If you need a fixed-height box that scrolls its
+  content, put `overflow: auto` on **your own** wrapper around `document-engine-editor`, never on
+  `.tiptap-editor`.
 - Prose and editing-affordance styles are **opt-in** subpaths (`styles/editor-content`,
   `styles/editor-interaction`), so the baseline can never impose a look on your documents.
 

package/fesm2022/phuong-tran-redoc-document-engine-angular.mjs

@@ -3733,6 +3733,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 args: [ToggleOptionDirective, { descendants: true }]
             }] } });
 
+/**
+ * Normalize what a user typed into the border-width field into a valid CSS length.
+ *
+ * The field is a free-text input, and `border-width: 3` is not a valid declaration —
+ * the browser drops it silently, so typing a bare number used to do nothing at all
+ * with no feedback. A bare number is the single most likely thing to type, and in a
+ * length context it conventionally means pixels, so it is completed to `px`.
+ *
+ * Anything already carrying a unit is left alone (only the unit is lower-cased).
+ *
+ * The two failure modes are deliberately NOT the same value, because the command this
+ * feeds reads `null` as "clear this field" and `undefined` as "leave it alone":
+ *
+ * - an **empty** field is a real instruction to clear the width, so it returns `null`;
+ * - **unusable** input (`abc`, `-2px`, `50%`) returns `undefined`, so a typo leaves the
+ *   width the cell already had instead of wiping it. Collapsing the two would mean a
+ *   user with a working `1px` border who mistypes `3 pixels` loses it on Save with no
+ *   message — the field is free text, so mistyping it is the expected case, not a rare one.
+ *
+ * @returns a valid CSS border-width; `null` to clear it; `undefined` to leave it alone.
+ */
+function normalizeBorderWidth(input) {
+    const value = (input ?? '').trim();
+    if (!value)
+        return null;
+    // `thin | medium | thick` are valid border-width keywords in their own right.
+    if (/^(thin|medium|thick)$/i.test(value))
+        return value.toLowerCase();
+    // A bare number — the case this helper exists for. Border widths cannot be
+    // negative, so a signed value is rejected rather than quietly clamped.
+    if (/^\d+(\.\d+)?$/.test(value))
+        return `${parseFloat(value)}px`;
+    // Already a length. Units per CSS Values 4; `%` is not valid for border-width.
+    const withUnit = /^(\d+(?:\.\d+)?)\s*(px|em|rem|pt|pc|in|cm|mm|q|ch|ex|vh|vw|vmin|vmax)$/i.exec(value);
+    if (withUnit)
+        return `${parseFloat(withUnit[1])}${withUnit[2].toLowerCase()}`;
+    // Not a border-width at all — leave whatever the cell already has untouched.
+    return undefined;
+}
+
 /**
  * Cell style view for table bubble menu
  * Allows styling individual table cells (borders, background, alignment)
@@ -3834,10 +3874,14 @@ class TableCellStyleViewComponent {
         this.cdr.markForCheck();
     }
     onSave() {
+        // See `normalizeBorderWidth`: a bare number is completed to `px` so the field does
+        // not silently do nothing, and unusable input yields `undefined` so the command
+        // leaves the width the cell already has rather than clearing it.
+        const width = normalizeBorderWidth(this.borderWidth);
         this.editor
             ?.chain()
             .focus()
-            .setCellBorder({ style: this.borderStyle, color: this.borderColor, width: this.borderWidth })
+            .setCellBorder({ style: this.borderStyle, color: this.borderColor, width })
             .setCellBackgroundColor(this.backgroundColor)
             .setCellTextAlign(this.textAlign)
             .setCellVerticalAlign(this.vAlign)
@@ -3902,6 +3946,7 @@ class TableCellStyleViewComponent {
                 <button
                   #borderColorTrigger
                   type="button"
+                  data-testid="border-color-trigger"
                   class="table-cell-style-view__color-swatch"
                   [style.background-color]="borderColor || 'transparent'"
                   (click)="toggleColorPicker('border')"
@@ -3955,6 +4000,7 @@ class TableCellStyleViewComponent {
               <button
                 #bgColorTrigger
                 type="button"
+                data-testid="background-color-trigger"
                 class="table-cell-style-view__color-swatch"
                 [style.background-color]="backgroundColor || 'transparent'"
                 (click)="toggleColorPicker('bg')"
@@ -4095,6 +4141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 <button
                   #borderColorTrigger
                   type="button"
+                  data-testid="border-color-trigger"
                   class="table-cell-style-view__color-swatch"
                   [style.background-color]="borderColor || 'transparent'"
                   (click)="toggleColorPicker('border')"
@@ -4148,6 +4195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <button
                 #bgColorTrigger
                 type="button"
+                data-testid="background-color-trigger"
                 class="table-cell-style-view__color-swatch"
                 [style.background-color]="backgroundColor || 'transparent'"
                 (click)="toggleColorPicker('bg')"
@@ -4631,7 +4679,7 @@ class TableMainViewComponent {
       </document-engine-select>
 
       <!-- Cell actions -->
-      <document-engine-select [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
+      <document-engine-select data-testid="cell-actions" [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_merge_cell"></document-engine-icon>
 
         <button documentEngineSelectOption data-testid="merge-cells" value="merge" [disabled]="!canMerge">
@@ -4693,7 +4741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
       </document-engine-select>
 
       <!-- Cell actions -->
-      <document-engine-select [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
+      <document-engine-select data-testid="cell-actions" [(value)]="cellAction" (valueChange)="handleCellAction($event)" labelMode="static">
         <document-engine-icon documentEngineSelectLabel name="table_merge_cell"></document-engine-icon>
 
         <button documentEngineSelectOption data-testid="merge-cells" value="merge" [disabled]="!canMerge">
@@ -4829,10 +4877,14 @@ class TableStyleViewComponent {
         const editor = this.editor;
         if (!editor)
             return;
+        // Complete a bare number to `px` before it reaches the command; `border-width: 3`
+        // is invalid CSS and would be dropped without any feedback. `undefined` here means
+        // the input was not a width at all, and the command leaves the current one alone.
+        const width = normalizeBorderWidth(this.borderWidth);
         editor
             .chain()
             .focus()
-            .setTableBorder({ style: this.borderStyle, color: this.borderColor, width: this.borderWidth })
+            .setTableBorder({ style: this.borderStyle, color: this.borderColor, width })
             .setTableBackgroundColor(this.tableBg)
             .run();
         this.cancel();
@@ -4896,6 +4948,7 @@ class TableStyleViewComponent {
                 <button
                   #borderColorTrigger
                   type="button"
+                  data-testid="border-color-trigger"
                   class="table-style-view__color-swatch"
                   [style.background-color]="borderColor || 'transparent'"
                   (click)="toggleColorPicker('border')"
@@ -4949,6 +5002,7 @@ class TableStyleViewComponent {
               <button
                 #bgColorTrigger
                 type="button"
+                data-testid="background-color-trigger"
                 class="table-style-view__color-swatch"
                 [style.background-color]="tableBg || 'transparent'"
                 (click)="toggleColorPicker('bg')"
@@ -5053,6 +5107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                 <button
                   #borderColorTrigger
                   type="button"
+                  data-testid="border-color-trigger"
                   class="table-style-view__color-swatch"
                   [style.background-color]="borderColor || 'transparent'"
                   (click)="toggleColorPicker('border')"
@@ -5106,6 +5161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
               <button
                 #bgColorTrigger
                 type="button"
+                data-testid="background-color-trigger"
                 class="table-style-view__color-swatch"
                 [style.background-color]="tableBg || 'transparent'"
                 (click)="toggleColorPicker('bg')"