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

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -1,5 +1,3 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,6 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyTestText>;
 
 export const BasePegaDxilMyTestText: Story = args => {
-
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -34,13 +31,23 @@ export const BasePegaDxilMyTestText: Story = args => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,12 +1,4 @@
-import {
-  Input,
-  FieldValueList,
-  Text,
-  EmailDisplay,
-  PhoneDisplay,
-  URLDisplay,
-  withConfiguration
-} from '@pega/cosmos-react-core';
+import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -28,15 +20,7 @@ interface StateProps {
 }
 
 export const formatExists = (formatterVal: string) => {
-  const formatterValues = [
-    'TextInput',
-    'WorkStatus',
-    'RichText',
-    'Email',
-    'Phone',
-    'URL',
-    'Operator'
-  ];
+  const formatterValues = ['TextInput', 'WorkStatus', 'RichText', 'Email', 'Phone', 'URL', 'Operator'];
   let isformatter = false;
   if (formatterValues.includes(formatterVal)) {
     isformatter = true;
@@ -60,9 +44,7 @@ export const textFormatter = (formatter: string, value: string) => {
       break;
     }
     case 'URL': {
-      displayComponent = (
-        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
-      );
+      displayComponent = <URLDisplay target='_blank' value={value} displayText={value} variant='link' />;
       break;
     }
     // no default
@@ -73,7 +55,20 @@ export const textFormatter = (formatter: string, value: string) => {
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
+  const {
+    getPConnect,
+    value,
+    placeholder,
+    disabled = false,
+    displayMode,
+    readOnly = false,
+    required = false,
+    label,
+    hideLabel = false,
+    testId,
+    isTableFormatter = false,
+    variant = 'inline'
+  } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -115,11 +110,7 @@ function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
     );
     return (
       <StyledPegaDxilMyTestTextWrapper>
-        <FieldValueList
-          variant='stacked'
-          data-testid={testId}
-          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
-        />
+        <FieldValueList variant='stacked' data-testid={testId} fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]} />
       </StyledPegaDxilMyTestTextWrapper>
     );
   }
@@ -140,7 +131,6 @@ function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
       />
     </StyledPegaDxilMyTestTextWrapper>
   );
-};
-
+}
 
 export default withConfiguration(PegaDxilMyTestText);

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -1,4 +1,3 @@
-
 // @ts-nocheck
 export const configProps = {
   value: '',

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyTestTextComponent> = {
   title: 'PegaDxilMyTestText',
   component: PegaDxilMyTestTextComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.html

@@ -2,9 +2,9 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="bVisible$ && bHasForm$">
-    <div [formGroup]="formGroup$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -12,14 +12,17 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
-          [readonly]="bReadonly$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>
   </div>
 </ng-template>
+<ng-template #noEdit>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+</ng-template>

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface PegaDxilMyTestTextProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-test-text',
   templateUrl: './pega-dxil-my-test-text.component.html',
   styleUrls: ['./pega-dxil-my-test-text.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyTestTextComponent extends FieldBase {
   configProps$: PegaDxilMyTestTextProps;

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert/alert.component.html

@@ -10,7 +10,10 @@
   <div class="psdk-alert-icon">
     <mat-icon>{{ getMatIcon(severity) }}</mat-icon>
   </div>
-  <div>{{ message }}</div>
+  <div *ngIf="messageIsHtml; else textMessage" [innerHTML]="messageText"></div>
+  <ng-template #textMessage>
+    <div>{{ messageText }}</div>
+  </ng-template>
   <div *ngIf="!hideClose" style="margin-left: auto">
     <button class="close-button" mat-icon-button (click)="onCloseClick()">
       <mat-icon>close</mat-icon>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert/alert.component.scss

@@ -1,8 +1,10 @@
 .psdk-alert {
-  border: 1px solid;
+  background-color: var(--mat-sys-surface-container-high);
+  border: 1px solid var(--mat-sys-outline-variant);
   display: flex;
   align-items: center;
   border-radius: 4px;
+  color: var(--mat-sys-on-surface);
   padding: 10px;
   margin: 5px 0px;
 }
@@ -22,26 +24,23 @@
 }
 
 .psdk-grid-warning {
-  color: var(--app-alert-warning-color);
-  border: 1px solid var(--app-alert-warning-border-color);
+  border-color: var(--mat-sys-secondary);
   .mat-icon {
-    color: var(--app-alert-warning-border-color);
+    color: var(--mat-sys-secondary);
   }
 }
 
 .psdk-grid-success {
-  color: var(--app-alert-success-color);
-  border: 1px solid var(--app-alert-success-border-color);
+  border-color: var(--mat-sys-tertiary);
   .mat-icon {
-    color: var(--app-alert-success-border-color);
+    color: var(--mat-sys-tertiary);
   }
 }
 
 .psdk-grid-info {
-  color: var(--app-alert-info-color);
-  border: 1px solid var(--app-alert-info-border-color);
+  border-color: var(--mat-sys-primary);
   .mat-icon {
-    color: var(--app-alert-info-border-color);
+    color: var(--mat-sys-primary);
   }
 }
 

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert/alert.component.ts

@@ -9,11 +9,16 @@ import { MatIconModule } from '@angular/material/icon';
   imports: [CommonModule, MatIconModule]
 })
 export class AlertComponent {
-  @Input() message: any[];
+  @Input() message: unknown;
+  @Input() messageIsHtml = false;
   @Input() severity;
   @Input() hideClose;
   @Output() onClose: EventEmitter<any> = new EventEmitter();
 
+  get messageText(): string {
+    return this.message == null ? '' : String(this.message);
+  }
+
   getMatIcon(severity) {
     let variant;
     switch (severity) {
@@ -36,7 +41,6 @@ export class AlertComponent {
   }
 
   onCloseClick() {
-    alert('Close clicked');
     this.onClose.emit({ Page: 'Page', target: 'target', type: 'type' });
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/field-group/field-group.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input, TemplateRef } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -9,14 +9,22 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrls: ['./field-group.component.scss'],
   imports: [CommonModule, MatGridListModule, MatIconModule]
 })
-export class FieldGroupComponent {
+export class FieldGroupComponent implements OnChanges {
   @Input() name?: string;
-  @Input() collapsible = false;
+  @Input() collapseOnLoad: 'none' | 'expanded' | 'collapsed' = 'none';
   @Input() instructions: string;
   @Input() childrenTemplate: TemplateRef<any>;
 
+  collapsible = false;
   collapsed = false;
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['collapseOnLoad']) {
+      this.collapsible = this.collapseOnLoad !== 'none';
+      this.collapsed = this.collapseOnLoad === 'collapsed';
+    }
+  }
+
   headerClickHandler() {
     this.collapsed = !this.collapsed;
   }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -1,58 +1,73 @@
 <div class="psdk-case-summary-fields">
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
-      <dt class="psdk-csf-primary-field-header">
+      <dt
+        *ngIf="
+          field.type.toLowerCase() !== 'objectreference' && field.type.toLowerCase() !== 'reference' && field.type.toLowerCase() !== 'caseoperator'
+        "
+        class="psdk-csf-primary-field-header"
+      >
         {{ field.config?.label }}
       </dt>
-      <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
-        <ng-container [ngSwitch]="field.type.toLowerCase()">
-          <label *ngSwitchCase="'caseoperator'">operator</label>
-          <span *ngSwitchDefault class="psdk-csf-text-style">---</span>
-        </ng-container>
+      <dd class="psdk-csf-primary-field-data" [ngSwitch]="field.type.toLowerCase()">
+        <span *ngSwitchCase="'textinput'" class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
+        <span *ngSwitchCase="'status'" class="psdk-csf-status-style">{{ field.config.value || '---' }}</span>
+        <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ field.config.value || '---' }}</a>
+        <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value || '---' }}</a>
+        <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
+        <div class="psdk-case-summary-operator" *ngSwitchCase="'caseoperator'">
+          <component-mapper
+            name="Operator"
+            [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
+          ></component-mapper>
+        </div>
+        <div *ngSwitchCase="'objectreference'">
+          <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid }"></component-mapper>
+        </div>
+        <div *ngSwitchCase="'reference'" class="psdk-csf-object-reference-value">
+          <component-mapper name="reference" [props]="{ pConn$: field.kid }"></component-mapper>
+        </div>
+        <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value || '---' }}</span>
       </dd>
-      <ng-template #hasValue>
-        <dd class="psdk-csf-primary-field-data" [ngSwitch]="field.type.toLowerCase()">
-          <span *ngSwitchCase="'textinput'" class="psdk-csf-text-style">{{ field.config.value }}</span>
-          <span *ngSwitchCase="'status'" class="psdk-csf-status-style">{{ field.config.value }}</span>
-          <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ field.config.value }}</a>
-          <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ field.config.value }}</a>
-          <span *ngSwitchCase="'date'" class="psdk-csf-text-style">{{ field.config.value }}</span>
-          <label *ngSwitchCase="'caseoperator'">operator</label>
-          <span *ngSwitchDefault class="psdk-csf-text-style">{{ field.config.value }}</span>
-        </dd>
-      </ng-template>
     </div>
   </dl>
 </div>
 <div class="psdk-case-summary-fields">
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
-    <div
-      *ngIf="
-        field?.config?.label?.toLowerCase() == 'create operator' ||
-          field?.displayLabel?.toLowerCase() == 'create operator' ||
-          field?.config?.label?.toLowerCase() == 'update operator' ||
-          field?.displayLabel?.toLowerCase() == 'update operator';
-        else hasSecondaryValue
-      "
-    >
-      <component-mapper
-        name="Operator"
-        [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
-      ></component-mapper>
-    </div>
-    <ng-template #hasSecondaryValue>
+    @if (
+      field?.config?.label?.toLowerCase() == 'create operator' ||
+      field?.displayLabel?.toLowerCase() == 'create operator' ||
+      field?.config?.label?.toLowerCase() == 'update operator' ||
+      field?.displayLabel?.toLowerCase() == 'update operator'
+    ) {
+      <div>
+        <component-mapper
+          name="Operator"
+          [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel || field?.config.displayLabel }"
+        ></component-mapper>
+      </div>
+    } @else if (field.type.toLowerCase() === 'objectreference') {
+      <div class="psdk-csf-object-reference-value">
+        <component-mapper name="ObjectReference" [props]="{ pConn$: field.kid, displayMode: 'DISPLAY_ONLY', hideLabel: true }"></component-mapper>
+      </div>
+    } @else if (field.type.toLowerCase() === 'reference') {
+      <div class="psdk-csf-object-reference-value">
+        <component-mapper name="reference" [props]="{ pConn$: field.kid }"></component-mapper>
+      </div>
+    } @else {
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
           {{ field.config?.displayLabel || field.config?.label }}
         </dt>
+
         <dd class="psdk-csf-secondary-field-data">
-          <div [ngSwitch]="field.type">
-            <label *ngSwitchCase="'UserReference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
-            <label *ngSwitchCase="'Checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
+          <div [ngSwitch]="field.type.toLowerCase()">
+            <label *ngSwitchCase="'userreference'" class="psdk-secondary-value">{{ field.config.value.userName || '---' }}</label>
+            <label *ngSwitchCase="'checkbox'" class="psdk-secondary-value">{{ field.config.falseLabel || '---' }}</label>
             <label *ngSwitchDefault class="psdk-secondary-value">{{ field.config.value || '---' }}</label>
           </div>
         </dd>
       </div>
-    </ng-template>
+    }
   </dl>
 </div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -110,3 +110,15 @@ span.psdk-csf-status-style {
 .psdk-primary-color {
   color: var(--mat-sys-primary);
 }
+
+.psdk-case-summary-operator {
+  ::ng-deep .psdk-operator {
+    flex-direction: column !important;
+  }
+}
+
+.psdk-csf-object-reference-value {
+  ::ng-deep .psdk-grid-label {
+    font-size: 0.8125rem !important;
+  }
+}

package/tests/assets/sdk-a/components/create/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/create/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/create/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/create/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/create/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">