@let currentValue = tmpValue() ?? '';
@let trimmedValue = currentValue.trim();
@let hasContent = trimmedValue.length > 0;
@let displayText =
  hasContent ? currentValue : (T.F.TASK.ADDITIONAL_INFO.TITLE_PLACEHOLDER | translate);
@let placeholder = T.F.TASK.ADDITIONAL_INFO.TITLE_PLACEHOLDER | translate;
<div class="wrapper">
  @if (!isEditing()) {
    @if (hasContent && hasUrlsOrMarkdown()) {
      <span
        class="display-value"
        [innerHTML]="tmpValue() | renderLinks"
      ></span>
    } @else {
      <span
        class="display-value"
        [class.is-placeholder]="!hasContent"
        >{{ displayText }}</span
      >
    }
  }
  @if (isEditing() && !readonly()) {
    <span
      class="height-measure"
      aria-hidden="true"
      >{{ displayText }}</span
    >
    <textarea
      #textAreaElement
      class="edit-panel"
      spellcheck="false"
      rows="1"
      tabindex="-1"
      placeholder="{{ placeholder }}"
      [value]="currentValue"
      [mentionConfig]="(mentionCfg$ | async) ?? {}"
      (listShownChange)="updateMentionListShown($event)"
      (blur)="blurred($event)"
      (focus)="focused()"
      (input)="onInput($event)"
      (mousedown)="$event.stopPropagation()"
      (textInput)="onTextInput($event)"
      (keydown)="handleKeyDown($event)"
    ></textarea>
  }
</div>