@forgeroute/ui 0.4.61 → 0.4.62

package/fesm2022/forgeroute-ui.mjs

@@ -50452,7 +50452,7 @@ var ConversationRichBodyComponent = class ConversationRichBodyComponent {
 			ngImport: i0,
 			template: "",
 			isInline: true,
-			styles: [".cv-rich{display:block;font-size:.875rem;line-height:1.45;word-break:break-word}.cv-rich p,.cv-rich div{margin:0}.cv-rich ul,.cv-rich ol{margin:0;padding-inline-start:1.25rem}.cv-rich a{color:inherit;text-decoration:underline}\n"],
+			styles: [".cv-rich{display:block;font-size:.875rem;line-height:1.45;word-break:break-word}.cv-rich p,.cv-rich div{margin:0}.cv-rich ul,.cv-rich ol{margin:0;padding-inline-start:1.25rem}.cv-rich a{color:inherit;text-decoration:underline;text-underline-offset:2px}.cv-rich strong,.cv-rich b{font-weight:700}.cv-rich blockquote{margin:4px 0;padding-inline-start:10px;border-inline-start:3px solid currentColor;opacity:.9}.cv-rich h1,.cv-rich h2,.cv-rich h3,.cv-rich h4{margin:0;font-size:1rem;font-weight:700;line-height:1.35}.cv-rich hr{border:0;border-top:1px solid currentColor;opacity:.4;margin:6px 0}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush,
 			encapsulation: i0.ViewEncapsulation.None
 		});
@@ -50475,7 +50475,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[innerHTML]": "safe()"
 			},
 			template: "",
-			styles: [".cv-rich{display:block;font-size:.875rem;line-height:1.45;word-break:break-word}.cv-rich p,.cv-rich div{margin:0}.cv-rich ul,.cv-rich ol{margin:0;padding-inline-start:1.25rem}.cv-rich a{color:inherit;text-decoration:underline}\n"]
+			styles: [".cv-rich{display:block;font-size:.875rem;line-height:1.45;word-break:break-word}.cv-rich p,.cv-rich div{margin:0}.cv-rich ul,.cv-rich ol{margin:0;padding-inline-start:1.25rem}.cv-rich a{color:inherit;text-decoration:underline;text-underline-offset:2px}.cv-rich strong,.cv-rich b{font-weight:700}.cv-rich blockquote{margin:4px 0;padding-inline-start:10px;border-inline-start:3px solid currentColor;opacity:.9}.cv-rich h1,.cv-rich h2,.cv-rich h3,.cv-rich h4{margin:0;font-size:1rem;font-weight:700;line-height:1.35}.cv-rich hr{border:0;border-top:1px solid currentColor;opacity:.4;margin:6px 0}\n"]
 		}]
 	}],
 	propDecorators: { html: [{
@@ -50636,9 +50636,16 @@ var ConversationsComponent = class ConversationsComponent {
 		this.emptyText = computed(() => this.filtering() ? this.filteredEmptyMessage() : this.canWrite() ? this.emptyMessage() : this.emptyReadOnlyMessage(), ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
 		this.messageRows = computed(() => groupMessagesByDay(this.messages(), this.clock()), ...ngDevMode ? [{ debugName: "messageRows" }] : /* istanbul ignore next */ []);
 		this.contextVisible = computed(() => this.hasContext() && this.contextOpen() && !!this.selected(), ...ngDevMode ? [{ debugName: "contextVisible" }] : /* istanbul ignore next */ []);
-		this.canSend = computed(() => !this.composerDisabled() && !this.sendBlocked() && !this.sending() && (this.draftText().length > 0 || !!this.attachment()), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
-		this.draftText = computed(() => this.richText() ? conversationHtmlToText(this.draft()) : this.draft().trim(), ...ngDevMode ? [{ debugName: "draftText" }] : /* istanbul ignore next */ []);
+		this.canSend = computed(() => !this.composerDisabled() && !this.sendBlocked() && !this.sending() && (this.draft().trim().length > 0 || !!this.attachment()) && this.draft().trim().length <= this.maxLength(), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
+		this.editorHtml = signal("", ...ngDevMode ? [{ debugName: "editorHtml" }] : /* istanbul ignore next */ []);
 		this.richHide = RICH_COMPOSER_HIDE;
+		effect(() => {
+			const text = this.draft();
+			if (!this.richText()) return;
+			untracked(() => {
+				if (text !== conversationHtmlToText(this.editorHtml())) this.editorHtml.set(plainTextToHtml(text));
+			});
+		});
 		effect(() => {
 			const id = this.selected()?.id ?? null;
 			const count = this.messages().length;
@@ -50694,16 +50701,21 @@ var ConversationsComponent = class ConversationsComponent {
 		this.fileInput()?.open();
 	}
 	onComposeKeydown(event) {
-		if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+		if (event.key !== "Enter" || event.isComposing) return;
+		if (this.richText() ? event.ctrlKey || event.metaKey : !event.shiftKey) {
 			event.preventDefault();
 			this.sendMessage();
 		}
 	}
+	onEditorChange(html) {
+		this.editorHtml.set(html);
+		this.draft.set(conversationHtmlToText(html));
+	}
 	sendMessage() {
 		if (!this.canSend()) return;
 		this.send.emit(this.richText() ? {
-			text: this.draftText(),
-			html: sanitizeRichTextHtml(this.draft(), { mode: "paste" })
+			text: this.draft().trim(),
+			html: sanitizeRichTextHtml(this.editorHtml(), { mode: "paste" })
 		} : { text: this.draft().trim() });
 	}
 	clock() {
@@ -51606,12 +51618,12 @@ var ConversationsComponent = class ConversationsComponent {
                 }
                 @if (richText()) {
                   <ui-rich-text-editor class="cv-compose-input cv-compose-rich" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [hide]="richHide"
-                    [minHeight]="44" [maxHeight]="160" [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                    [minHeight]="44" [maxHeight]="160" [ngModel]="editorHtml()" (ngModelChange)="onEditorChange($event)" [disabled]="composerDisabled()" [error]="composerError()"
                     (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
                 } @else {
-                                  <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
-                  [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
-                  (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
+                  <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
+                    [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                    (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
                 }
                 <ui-button class="cv-send-btn" variant="primary" [ariaLabel]="sendLabel()" [disabled]="!canSend()" [loading]="sending()" (click)="sendMessage()" data-testid="send-btn">
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
@@ -52186,12 +52198,12 @@ i0.ɵɵngDeclareClassMetadata({
                 }
                 @if (richText()) {
                   <ui-rich-text-editor class="cv-compose-input cv-compose-rich" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [hide]="richHide"
-                    [minHeight]="44" [maxHeight]="160" [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                    [minHeight]="44" [maxHeight]="160" [ngModel]="editorHtml()" (ngModelChange)="onEditorChange($event)" [disabled]="composerDisabled()" [error]="composerError()"
                     (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
                 } @else {
-                                  <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
-                  [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
-                  (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
+                  <ui-textarea-input class="cv-compose-input" [ariaLabel]="composeLabel()" [placeholder]="composePlaceholder()" [rows]="1" [maxlength]="maxLength()"
+                    [ngModel]="draft()" (ngModelChange)="draft.set($event)" [disabled]="composerDisabled()" [error]="composerError()"
+                    (keydown)="onComposeKeydown($event)" data-testid="compose-input" />
                 }
                 <ui-button class="cv-send-btn" variant="primary" [ariaLabel]="sendLabel()" [disabled]="!canSend()" [loading]="sending()" (click)="sendMessage()" data-testid="send-btn">
                   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>