feat: add styling for upload and embed file

Author: m-risto

libs/block-note-angular/src/lib/components/bna-file-panel/bna-file-panel.component.html

@@ -1,5 +1,29 @@
-<div class="bg-white">
-  <input class="w-80" hlmInput type="file" (input)="onFileInput($event)" />
-<!--  <input class="w-80" hlmInput [(ngModel)]="embedInputText" type="text" />-->
-<!--  <button hlmBtn (click)="insertEmbed()" >Embed Image</button>-->
+<div class="bg-background shadow-2xl rounded shadow-neutral-700 w-96">
+  <hlm-tabs tab="upload">
+    <hlm-tabs-list class="w-full grid grid-cols-2" aria-label="file panel">
+      <button hlmTabsTrigger="upload">Upload</button>
+      <button hlmTabsTrigger="embed">Embed</button>
+    </hlm-tabs-list>
+    <div hlmTabsContent="upload" class="p-3">
+      <input
+        class="w-full"
+        hlmInput
+        type="file"
+        (input)="onFileInputChanged($event)"
+      />
+    </div>
+    <div hlmTabsContent="embed" class="p-3">
+      <form (submit)="insertEmbedFile(embedInputText)">
+        <input
+          class="w-full mb-3"
+          placeholder="Enter URL"
+          [(ngModel)]="embedInputText"
+          hlmInput
+          type="text"
+          [ngModelOptions]="{ standalone: true }"
+        />
+        <button hlmBtn variant="default" class="w-full">Embed</button>
+      </form>
+    </div>
+  </hlm-tabs>
 </div>

libs/block-note-angular/src/lib/components/bna-file-panel/bna-file-panel.component.ts

@@ -1,25 +1,26 @@
 import {
   Component,
-  Directive,
   ElementRef,
   input,
   OnChanges,
-  Renderer2
+  Renderer2,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
   BlockFromConfig,
   BlockNoteEditor,
-  FileBlockConfig
+  FileBlockConfig,
 } from '@blocknote/core';
-import { autoUpdate, computePosition, flip } from '@floating-ui/dom';
-import { getVirtualElement } from '../../util/get-virtual-element.util';
+import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
 import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
 import {
   HlmTabsComponent,
-  HlmTabsListComponent
+  HlmTabsContentDirective,
+  HlmTabsListComponent,
+  HlmTabsTriggerDirective,
 } from '@spartan-ng/ui-tabs-helm';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
-import { FormsModule } from '@angular/forms';
+import { getVirtualElement } from '../../util/get-virtual-element.util';
 
 @Component({
   selector: 'bna-file-panel',
@@ -29,12 +30,14 @@ import { FormsModule } from '@angular/forms';
     HlmTabsComponent,
     HlmTabsListComponent,
     HlmButtonDirective,
-    FormsModule
+    FormsModule,
+    HlmTabsTriggerDirective,
+    HlmTabsContentDirective,
   ],
   templateUrl: './bna-file-panel.component.html',
 })
 export class BnaFilePanelComponent implements OnChanges {
-  editor = input.required<BlockNoteEditor<any,any,any>>();
+  editor = input.required<BlockNoteEditor<any, any, any>>();
   private block?: BlockFromConfig<FileBlockConfig, any, any>;
 
   embedInputText = '';
@@ -59,14 +62,14 @@ export class BnaFilePanelComponent implements OnChanges {
       if (!filePanelState.show) {
         cleanup();
       } else {
-        this.block = filePanelState.block
+        this.block = filePanelState.block;
         const updatePosition = async () => {
           const result = await computePosition(
             getVirtualElement(filePanelState.referencePos),
             this.elRef.nativeElement,
             {
-              placement: 'bottom-start',
-              middleware: [flip()],
+              placement: 'bottom',
+              middleware: [offset(10), flip()],
             }
           );
           this.renderer2.setStyle(
@@ -100,44 +103,39 @@ export class BnaFilePanelComponent implements OnChanges {
     }
   }
 
-  async onFileInput(event: Event){
-    const editor = this.editor()
-    if (!editor.uploadFile || !this.block){
+  async onFileInputChanged(event: Event) {
+    const editor = this.editor();
+    if (!editor.uploadFile || !this.block) {
       console.error('uploadFile was not provided in editor options');
-      return
+      return;
     }
 
-    const files = (event.target as HTMLInputElement).files
-    if(!files) return
-
-    const file = files[0]
-    const fileUrl = await editor.uploadFile(file)
+    const files = (event.target as HTMLInputElement).files;
+    if (!files) return;
 
-    editor.updateBlock(
-      this.block,
-        {
-          props: {
-            url: fileUrl,
-          },
-        }
-    )
+    const file = files[0];
+    const fileUrl = await editor.uploadFile(file);
 
-    editor.filePanel?.closeMenu()
+    this.updateBlockWithEmbedFileUrl(this.block, editor, fileUrl);
   }
 
-  insertEmbed(){
-    const editor = this.editor()
-    if(!this.block) return;
+  insertEmbedFile(embedFileUrl: string) {
+    const editor = this.editor();
+    if (!this.block) return;
+    this.updateBlockWithEmbedFileUrl(this.block, editor, embedFileUrl);
+  }
 
-    editor.updateBlock(
-      this.block,
-      {
-        props: {
-          url: this.embedInputText,
-        },
-      }
-    )
+  private updateBlockWithEmbedFileUrl(
+    block: BlockFromConfig<FileBlockConfig, any, any>,
+    editor: BlockNoteEditor<any, any, any>,
+    embedFileUrl: string | Record<string, any>
+  ) {
+    editor.updateBlock(block, {
+      props: {
+        url: embedFileUrl,
+      },
+    });
 
-    editor.filePanel?.closeMenu()
+    editor.filePanel?.closeMenu();
   }
 }