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

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.
 
@@ -239,13 +245,9 @@ nx lint @phuong-tran-redoc/document-engine-angular    # lint
 
 ---
 
-## 👤 Author
+## 👤 Authors
 
-Developed by **Duc Phuong (Jack)**
-
-- 💼 [LinkedIn](https://www.linkedin.com/in/tdp1999/)
-- 🐙 [GitHub](https://github.com/tdp1999)
-- 📧 [Email](mailto:tdp99.business@gmail.com)
+See [AUTHORS.md](https://github.com/phuong-tran-redoc/document-engine/blob/main/AUTHORS.md).
 
 ---
 

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

@@ -3,27 +3,27 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Input, Directive, Injectable, ApplicationRef, createComponent, HostBinding, InjectionToken, Renderer2, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, Component, ViewEncapsulation, EventEmitter, Output, HostListener, ContentChildren, ViewChild, ViewChildren, NgZone, ViewContainerRef, EnvironmentInjector, NgModule } from '@angular/core';
 import { Extension, Editor } from '@tiptap/core';
-import Blockquote from '@tiptap/extension-blockquote';
-import Bold from '@tiptap/extension-bold';
-import Code from '@tiptap/extension-code';
-import CodeBlock from '@tiptap/extension-code-block';
+import { Blockquote } from '@tiptap/extension-blockquote';
+import { Bold } from '@tiptap/extension-bold';
+import { Code } from '@tiptap/extension-code';
+import { CodeBlock } from '@tiptap/extension-code-block';
 import { Document } from '@tiptap/extension-document';
 import { HardBreak } from '@tiptap/extension-hard-break';
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
 import { Image } from '@tiptap/extension-image';
-import Italic from '@tiptap/extension-italic';
-import Link from '@tiptap/extension-link';
+import { Italic } from '@tiptap/extension-italic';
+import { Link } from '@tiptap/extension-link';
 import { ListKeymap, ListItem, BulletList } from '@tiptap/extension-list';
 import { Paragraph } from '@tiptap/extension-paragraph';
-import Strike from '@tiptap/extension-strike';
+import { Strike } from '@tiptap/extension-strike';
 import { Subscript } from '@tiptap/extension-subscript';
 import { Superscript } from '@tiptap/extension-superscript';
 import { Text } from '@tiptap/extension-text';
 import { TextAlign } from '@tiptap/extension-text-align';
 import { TextStyleKit } from '@tiptap/extension-text-style';
-import Underline from '@tiptap/extension-underline';
+import { Underline } from '@tiptap/extension-underline';
 import { Dropcursor, Gapcursor, TrailingNode, UndoRedo, CharacterCount, Placeholder } from '@tiptap/extensions';
-import { ResetOnEnter, EditableRegion, RestrictedEditing, CustomOrderedList, StyledTableKit, ImageRef, PageBreak, ResetFormat, Indent, ClearContent, TextCase, NotumHeading, DynamicField, Color, normalizeColor, getActiveMarkRange, getSelectedCells, getCombinedCellAttributeValue, TableDefaultAttributes, getCursorCellInfo, getClosestDomElement } from '@phuong-tran-redoc/document-engine-core';
+import { ResetOnEnter, EditableRegion, RestrictedEditing, CustomOrderedList, StyledTableKit, ImageRef, PageBreak, ResetFormat, Indent, ClearContent, TextCase, NotumHeading, DynamicField, CkCompat, Color, normalizeColor, getActiveMarkRange, getSelectedCells, getCombinedCellAttributeValue, TableDefaultAttributes, getCursorCellInfo, getClosestDomElement } from '@phuong-tran-redoc/document-engine-core';
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, FormBuilder, Validators, NonNullableFormBuilder } from '@angular/forms';
@@ -113,6 +113,7 @@ const DocumentEngineKit = Extension.create({
         add(options.textCase, TextCase);
         add(options.heading, NotumHeading);
         add(options.dynamicField, DynamicField);
+        add(options.ckCompat, CkCompat);
         return extensions;
     },
 });
@@ -3733,6 +3734,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 +3875,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 +3947,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 +4001,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 +4142,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 +4196,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 +4680,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 +4742,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 +4878,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 +4949,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 +5003,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 +5108,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 +5162,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')"