diff --git a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx index 88c6e45ed..3e5ff5b3b 100644 --- a/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx +++ b/studio/src/app/components/editor/publish/app-publish-edit/app-publish-edit.tsx @@ -15,6 +15,10 @@ import {ApiUserService} from '../../../../services/api/user/api.user.service'; import {PublishService} from '../../../../services/editor/publish/publish.service'; import {FeedService} from '../../../../services/data/feed/feed.service'; +interface CustomInputEvent extends KeyboardEvent { + data: string | null; +} + @Component({ tag: 'app-publish-edit', styleUrl: 'app-publish-edit.scss' @@ -246,18 +250,46 @@ export class AppPublishEdit { private onTagInput($event: CustomEvent): Promise { return new Promise((resolve) => { + if (!$event || !$event.detail) { + resolve(); + return; + } + + if (($event.detail as CustomInputEvent).data === ' ' || ($event.detail as CustomInputEvent).data === ',') { + this.addTag(); + resolve(); + return; + } + this.tag = ($event.target as InputTargetEvent).value; resolve(); }); } - private onTagChange() { + private onTagInputKeyUp($event: KeyboardEvent): Promise { + return new Promise((resolve) => { + if (!$event) { + resolve(); + return; + } + + if ($event.code === 'Enter') { + this.addTag(); + } + + resolve(); + }); + } + + private addTag() { if (this.tag && this.tag !== undefined && this.tag !== null && this.tag.length >= 3) { if (this.tag.charAt(0) === '#') { this.tag = this.tag.substr(1); } + this.tag = this.tag.replace(' ', ''); + if (this.tags && this.tags.indexOf(this.tag) === -1) { this.tags = [...this.tags, this.tag.trim()]; this.tag = null; @@ -305,7 +337,7 @@ export class AppPublishEdit {

But first, edit or review your presentation's title and summary and add or change tags (up to 5) to make your presentation more inviting to readers.

-
this.handleSubmit(e)}> + this.handleSubmit(e)} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }}> Title @@ -337,8 +369,8 @@ export class AppPublishEdit { = 5 || this.publishing} - onIonInput={(e: CustomEvent) => this.onTagInput(e)} - onIonChange={() => this.onTagChange()}> + onKeyUp={($event: KeyboardEvent) => this.onTagInputKeyUp($event)} + onIonInput={(e: CustomEvent) => this.onTagInput(e)}> this.removeTag($event)}>