@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -53,6 +53,17 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
         case 'checkbox':
           field.config.displayLabel = field.config.caption;
           break;
+        case 'reference': {
+          const referenceLabel = field.kid.getInheritedProps()?.label;
+          if (referenceLabel) {
+            field.config.label = referenceLabel;
+          }
+          field.kid.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+          break;
+        }
+        case 'objectreference':
+          field.kid.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+          break;
         default:
           break;
       }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.html

@@ -2,10 +2,12 @@
   <div class="psdk-label">
     {{ label$ }}
   </div>
-  <div class="psdk-double">
-    <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+  <div class="psdk-operator-details">
+    <div class="psdk-double">
+      <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+    </div>
+    <div>{{ date$ }}</div>
   </div>
-  <div>{{ date$ }}</div>
 </div>
 
 <div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.scss

@@ -80,3 +80,10 @@ dd {
   grid-column-start: 1;
   max-width: max-content;
 }
+
+.psdk-operator-details {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(0.3125rem);
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -112,7 +112,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +144,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.html

@@ -2,16 +2,106 @@
   <label [ngClass]="{ 'label-required': required === true }" class="rich-text-label">{{ label }}</label>
 
   <div class="rich-text-editor" *ngIf="!readonly">
-    <editor
-      [formControl]="richText"
-      [attr.disabled]="disabled"
-      [initialValue]="value"
-      [init]="editorConfig"
-      (onBlur)="blur()"
-      (onChange)="change($event)"
-    ></editor>
-
-    <p *ngIf="richText.invalid" [ngClass]="'text-editor-error'">{{ info }}</p>
+    <div class="tiptap-container" [class.disabled]="disabled" [class.tiptap-container-invalid]="showError">
+      <div #editorEl class="tiptap-editor-area" [attr.aria-invalid]="showError"></div>
+
+      <div class="tiptap-toolbar" *ngIf="!disabled" (mousedown)="$event.preventDefault()">
+        <mat-form-field class="tiptap-block-select" appearance="outline" subscriptSizing="dynamic">
+          <mat-select [value]="currentBlock" (selectionChange)="setBlock($event.value)" aria-label="Text block type">
+            <mat-option value="paragraph">Paragraph</mat-option>
+            <mat-option value="h1">Heading 1</mat-option>
+            <mat-option value="h2">Heading 2</mat-option>
+            <mat-option value="h3">Heading 3</mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('bold')"
+          (click)="toggleBold()"
+          title="Bold"
+          aria-label="Bold"
+        >
+          <mat-icon>format_bold</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('italic')"
+          (click)="toggleItalic()"
+          title="Italic"
+          aria-label="Italic"
+        >
+          <mat-icon>format_italic</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('strike')"
+          (click)="toggleStrike()"
+          title="Strikethrough"
+          aria-label="Strikethrough"
+        >
+          <mat-icon>strikethrough_s</mat-icon>
+        </button>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('bulletList')"
+          (click)="toggleBulletList()"
+          title="Bulleted list"
+          aria-label="Bulleted list"
+        >
+          <mat-icon>format_list_bulleted</mat-icon>
+        </button>
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('orderedList')"
+          (click)="toggleOrderedList()"
+          title="Numbered list"
+          aria-label="Numbered list"
+        >
+          <mat-icon>format_list_numbered</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="outdent()" title="Decrease indent" aria-label="Decrease indent">
+          <mat-icon>format_indent_decrease</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="indent()" title="Increase indent" aria-label="Increase indent">
+          <mat-icon>format_indent_increase</mat-icon>
+        </button>
+
+        <span class="tiptap-sep"></span>
+
+        <button
+          mat-icon-button
+          type="button"
+          class="tiptap-btn"
+          [class.active]="isActive('link')"
+          (click)="addLink()"
+          title="Insert link"
+          aria-label="Insert link"
+        >
+          <mat-icon>link</mat-icon>
+        </button>
+        <button mat-icon-button type="button" class="tiptap-btn" (click)="addImage()" title="Insert image" aria-label="Insert image">
+          <mat-icon>image</mat-icon>
+        </button>
+      </div>
+    </div>
+
+    <p *ngIf="showError" [ngClass]="'text-editor-error'">{{ errorMessage }}</p>
   </div>
 
   <div *ngIf="readonly">

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.scss

@@ -14,5 +14,145 @@
 }
 
 .text-editor-error {
-  color: var(--app-error-light-color);
+  margin: 4px 0 0;
+  color: var(--mat-sys-error, var(--app-error-light-color, #ba1a1a));
+}
+
+.tiptap-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--mat-sys-outline, #ccc);
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: transparent;
+
+  &.tiptap-container-invalid {
+    border-color: var(--mat-sys-error, var(--app-error-light-color, #ba1a1a));
+  }
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.tiptap-editor-area {
+  min-height: 130px;
+  padding: 8px 12px;
+  color: var(--mat-sys-on-surface, #000);
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  outline: none;
+  background: var(--mat-sys-surface, #fff);
+
+  ::ng-deep .ProseMirror {
+    min-height: 130px;
+    outline: none;
+
+    > * + * {
+      margin-top: 0.5em;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.25rem;
+    }
+
+    a {
+      color: var(--mat-sys-primary, #6200ee);
+      text-decoration: underline;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  ::ng-deep .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--mat-sys-on-surface-variant, #888);
+    pointer-events: none;
+    height: 0;
+  }
+}
+
+.tiptap-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 56px;
+  padding: 5px 12px;
+  background-color: var(--mat-sys-surface-container-high, #f0f0f0);
+  border-top: 1px solid var(--mat-sys-outline-variant, #ccc);
+}
+
+.tiptap-block-select {
+  width: 176px;
+  margin: 0;
+
+  ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    height: 40px;
+  }
+
+  ::ng-deep .mat-mdc-form-field-flex,
+  ::ng-deep .mat-mdc-form-field-infix {
+    min-height: 40px;
+    height: 40px;
+  }
+
+  ::ng-deep .mat-mdc-form-field-infix {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.tiptap-btn {
+  background: transparent;
+  border: none;
+  color: var(--mat-sys-on-surface-variant, #555);
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  border-radius: 4px;
+  line-height: 1;
+
+  ::ng-deep .mat-icon {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    line-height: 22px;
+  }
+
+  &:hover {
+    background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05));
+  }
+
+  &.active {
+    background: var(--mat-sys-secondary-container, #e8def8);
+    color: var(--mat-sys-on-secondary-container, #1d192b);
+  }
+}
+
+.tiptap-sep {
+  width: 1px;
+  height: 24px;
+  background: var(--mat-sys-outline-variant, #ccc);
+  margin: 0 4px;
+}
+
+.readonly-richtext-editor {
+  ::ng-deep img {
+    max-width: 100%;
+    height: auto;
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RichTextEditorComponent } from './rich-text-editor.component';
 
-describe('RichTextComponent', () => {
+describe('RichTextEditorComponent', () => {
   let component: RichTextEditorComponent;
   let fixture: ComponentFixture<RichTextEditorComponent>;
 

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/rich-text-editor/rich-text-editor.component.ts

@@ -1,18 +1,37 @@
-import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
 
-declare let tinymce: any;
+type BlockType = 'paragraph' | 'h1' | 'h2' | 'h3';
 
 @Component({
   selector: 'app-rich-text-editor',
   templateUrl: './rich-text-editor.component.html',
   styleUrls: ['./rich-text-editor.component.scss'],
-  imports: [CommonModule, EditorModule, ReactiveFormsModule],
-  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }]
+  imports: [CommonModule, ReactiveFormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatSelectModule]
 })
-export class RichTextEditorComponent implements OnChanges {
+export class RichTextEditorComponent implements OnChanges, AfterViewInit, OnDestroy {
   @Input() placeholder;
   @Input() disabled;
   @Input() readonly;
@@ -26,13 +45,27 @@ export class RichTextEditorComponent implements OnChanges {
   @Output() onBlur: EventEmitter<any> = new EventEmitter();
   @Output() onChange: EventEmitter<any> = new EventEmitter();
 
-  richText = new FormControl();
-  editorConfig: any = {};
+  private editorEl?: ElementRef<HTMLDivElement>;
 
-  ngOnChanges() {
-    if (this.required) {
-      this.richText.addValidators(Validators.required);
+  richText = new FormControl('');
+  editor?: Editor;
+  currentBlock: BlockType = 'paragraph';
+
+  private viewInitialized = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  @ViewChild('editorEl')
+  set editorElement(element: ElementRef<HTMLDivElement> | undefined) {
+    this.editorEl = element;
+    if (element && this.viewInitialized && !this.readonly && !this.editor) {
+      this.initializeEditor();
     }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.richText.setValidators(this.required ? Validators.required : null);
+    this.richText.updateValueAndValidity({ emitEvent: false });
 
     if (this.disabled) {
       this.richText.disable();
@@ -40,79 +73,214 @@ export class RichTextEditorComponent implements OnChanges {
       this.richText.enable();
     }
 
-    if (this.value) {
-      this.richText.setValue(this.value);
+    this.richText.setValue(this.value ?? '', { emitEvent: false });
+
+    if (!this.viewInitialized) return;
+
+    if (this.readonly) {
+      this.destroyEditor();
+      return;
+    }
+
+    if (!this.editor && this.editorEl) {
+      this.initializeEditor();
+    }
+
+    if (this.editor && changes['value'] && (this.value ?? '') !== this.getEditorValue(this.editor)) {
+      this.editor.commands.setContent(this.value ?? '', { emitUpdate: false });
+    }
+    if (this.editor && changes['disabled']) {
+      this.editor.setEditable(!this.disabled);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.viewInitialized = true;
+    if (!this.readonly) this.initializeEditor();
+  }
+
+  private initializeEditor(): void {
+    if (!this.editorEl || this.editor) return;
+
+    this.editor = new Editor({
+      element: this.editorEl.nativeElement,
+      extensions: [
+        StarterKit,
+        Placeholder.configure({ placeholder: this.placeholder || '' }),
+        Image.configure({ inline: false, allowBase64: true }),
+        Link.configure({ openOnClick: false, autolink: true })
+      ],
+      content: this.value || '',
+      editable: !this.disabled,
+      onUpdate: ({ editor }) => {
+        const html = this.getEditorValue(editor);
+        this.richText.setValue(html, { emitEvent: false });
+        this.richText.markAsDirty();
+        this.onChange.emit(html);
+        this.cdr.markForCheck();
+      },
+      onBlur: ({ editor }) => {
+        this.richText.markAsTouched();
+        this.onBlur.emit(this.getEditorValue(editor));
+        this.cdr.markForCheck();
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.updateCurrentBlock(editor);
+        this.cdr.markForCheck();
+      }
+    });
+    this.updateCurrentBlock(this.editor);
+  }
+
+  // Tiptap reports an empty document as "<p></p>", which would satisfy Validators.required and the engine's required check.
+  private getEditorValue(editor: Editor): string {
+    return editor.isEmpty ? '' : editor.getHTML();
+  }
+
+  get showError(): boolean {
+    return !!this.error || (this.richText.invalid && (this.richText.touched || this.richText.dirty));
+  }
+
+  get errorMessage(): string {
+    if (!this.error && this.richText.hasError('required')) {
+      return 'You must enter a value';
+    }
+    return this.info;
+  }
+
+  private updateCurrentBlock(editor: Editor): void {
+    if (editor.isActive('heading', { level: 1 })) this.currentBlock = 'h1';
+    else if (editor.isActive('heading', { level: 2 })) this.currentBlock = 'h2';
+    else if (editor.isActive('heading', { level: 3 })) this.currentBlock = 'h3';
+    else this.currentBlock = 'paragraph';
+  }
+
+  private destroyEditor(): void {
+    this.editor?.destroy();
+    this.editor = undefined;
+    this.currentBlock = 'paragraph';
+  }
+
+  ngOnDestroy(): void {
+    this.destroyEditor();
+  }
+
+  isActive(name: string, attrs?: Record<string, any>): boolean {
+    return this.editor ? this.editor.isActive(name, attrs) : false;
+  }
+
+  setBlock(value: string) {
+    if (!this.editor) return;
+    const chain = this.editor.chain().focus();
+    switch (value) {
+      case 'h1':
+        chain.toggleHeading({ level: 1 }).run();
+        break;
+      case 'h2':
+        chain.toggleHeading({ level: 2 }).run();
+        break;
+      case 'h3':
+        chain.toggleHeading({ level: 3 }).run();
+        break;
+      default:
+        chain.setParagraph().run();
+    }
+    this.currentBlock = value as BlockType;
+  }
+
+  toggleBold() {
+    this.editor?.chain().focus().toggleBold().run();
+  }
+
+  toggleItalic() {
+    this.editor?.chain().focus().toggleItalic().run();
+  }
+
+  toggleStrike() {
+    this.editor?.chain().focus().toggleStrike().run();
+  }
+
+  toggleBulletList() {
+    this.editor?.chain().focus().toggleBulletList().run();
+  }
+
+  toggleOrderedList() {
+    this.editor?.chain().focus().toggleOrderedList().run();
+  }
+
+  outdent() {
+    if (!this.editor) return;
+    if (this.editor.can().liftListItem('listItem')) {
+      this.editor.chain().focus().liftListItem('listItem').run();
+    } else {
+      this.editor.chain().focus().liftEmptyBlock().run();
+    }
+  }
+
+  indent() {
+    this.editor?.chain().focus().sinkListItem('listItem').run();
+  }
+
+  addLink() {
+    if (!this.editor) return;
+    const previous = this.editor.getAttributes('link')?.['href'] ?? '';
+    const { from, to, empty } = this.editor.state.selection;
+    const url = window.prompt('Enter URL', previous);
+    if (url === null) return;
+    if (url === '') {
+      this.editor.chain().focus().setTextSelection({ from, to }).extendMarkRange('link').unsetLink().run();
+      return;
+    }
+    const normalizedUrl = this.normalizeUrl(url);
+    if (!normalizedUrl) return;
+    if (empty) {
+      this.editor
+        .chain()
+        .focus()
+        .insertContentAt(from, {
+          type: 'text',
+          text: url,
+          marks: [{ type: 'link', attrs: { href: normalizedUrl } }]
+        })
+        .run();
+      return;
     }
+    this.editor.chain().focus().setTextSelection({ from, to }).extendMarkRange('link').setLink({ href: normalizedUrl }).run();
+  }
+
+  private normalizeUrl(url: string): string | null {
+    const trimmedUrl = url.trim();
+    if (!trimmedUrl) return null;
+    if (/^\/\//.test(trimmedUrl)) return `https:${trimmedUrl}`;
+    if (/^(?:https?|mailto|tel|ftp):/i.test(trimmedUrl)) return trimmedUrl;
+    if (/^[a-z][a-z\d+.-]*:/i.test(trimmedUrl)) return null;
+    return `https://${trimmedUrl}`;
+  }
 
-    const themeElement = document.querySelector('.dark') || document.body;
-    let textColor = getComputedStyle(themeElement).getPropertyValue('--mat-sys-on-surface').trim();
-    if (!textColor) textColor = '#000000';
-
-    this.editorConfig = {
-      base_url: '/tinymce',
-      suffix: '.min',
-      menubar: false,
-      placeholder: this.placeholder,
-      statusbar: false,
-      min_height: 130,
-      plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
-      autoresize_bottom_margin: 0,
-      toolbar: this.disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
-      toolbar_location: 'bottom',
-      content_style: `
-        body {
-          font-family: Helvetica, Arial, sans-serif;
-          font-size: 14px;
-          color: ${textColor} !important;
-          background: transparent !important;
-        }
-      `,
-      branding: false,
-      paste_data_images: true,
-      file_picker_types: 'image',
-      file_picker_callback: this.filePickerCallback
-    };
-  }
-
-  filePickerCallback = cb => {
+  addImage() {
+    if (!this.editor) return;
+    const insertPosition = this.editor.state.selection.to;
     const input = document.createElement('input');
     input.setAttribute('type', 'file');
     input.setAttribute('accept', 'image/*');
 
     input.addEventListener('change', (e: any) => {
-      const file = e.target.files[0];
-
-      const reader: any = new FileReader();
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
       reader.addEventListener('load', () => {
-        /*
-            Note: Now we need to register the blob in TinyMCEs image blob
-            registry. In the next release this part hopefully won't be
-            necessary, as we are looking to handle it internally.
-        */
-        const blobId = `blobid${new Date().getTime()}`;
-        console.log('editorRef', tinymce.activeEditor);
-        const blobCache = tinymce.activeEditor.editorUpload.blobCache;
-        const base64 = reader.result.split(',')[1];
-        const blobInfo = blobCache.create(blobId, file, base64);
-        blobCache.add(blobInfo);
-
-        /* call the callback and populate the Title field with the file name */
-        cb(blobInfo.blobUri(), { title: file.name });
+        const src = reader.result as string;
+        this.editor
+          ?.chain()
+          .focus()
+          .setTextSelection(insertPosition)
+          .insertContent({ type: 'image', attrs: { src, alt: file.name, title: file.name } })
+          .run();
       });
+      reader.addEventListener('error', () => this.cdr.markForCheck());
       reader.readAsDataURL(file);
     });
 
     input.click();
-  };
-
-  blur() {
-    if (tinymce.activeEditor) {
-      const editorValue = tinymce.activeEditor.getContent({ format: 'html' });
-      this.onBlur.emit(editorValue);
-    }
-  }
-
-  change(event) {
-    this.onChange.emit(event);
   }
 }