···

       
183
       
183
       
 
       
    setOpenInsertMenu(false);

     

       
184
       
184
       
 
       
  };

     

       
185
       
185
       
 
       


     

       
186
       
186
       
+
       
  const MenuItem = (props: { icon: string; label: string; onClick: () => void }) => {

     

       
187
       
187
       
+
       
    return (

     

       
188
       
188
       
+
       
      <button

     

       
189
       
189
       
+
       
        type="button"

     

       
190
       
190
       
+
       
        class="flex items-center gap-2 rounded-lg p-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       
191
       
191
       
+
       
        onClick={props.onClick}

     

       
192
       
192
       
+
       
      >

     

       
193
       
193
       
+
       
        <span class={`iconify ${props.icon}`}></span>

     

       
194
       
194
       
+
       
        <span>{props.label}</span>

     

       
195
       
195
       
+
       
      </button>

     

       
196
       
196
       
+
       
    );

     

       
197
       
197
       
+
       
  };

     

       
198
       
198
       
+
       


     

       
186
       
199
       
 
       
  const FileUpload = (props: { file: File }) => {

     

       
187
       
200
       
 
       
    const [uploading, setUploading] = createSignal(false);

     

       
188
       
201
       
 
       
    const [error, setError] = createSignal("");

     
···

       
381
       
394
       
 
       
                <div class="relative" ref={insertMenuRef}>

     

       
382
       
395
       
 
       
                  <button

     

       
383
       
396
       
 
       
                    type="button"

     

       
384
       
384
       
-
       
                    class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-2 py-1.5 text-xs shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"

     

       
397
       
397
       
+
       
                    class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 flex w-fit rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 text-base shadow-xs hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800"

     

       
385
       
398
       
 
       
                    onClick={() => setOpenInsertMenu(!openInsertMenu())}

     

       
386
       
399
       
 
       
                  >

     

       
387
       
400
       
 
       
                    <span class="iconify lucide--plus select-none"></span>

     

       
388
       
401
       
 
       
                  </button>

     

       
389
       
402
       
 
       
                  <Show when={openInsertMenu()}>

     

       
390
       
390
       
-
       
                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 shadow-md dark:border-neutral-700 z-10">

     

       
391
       
391
       
-
       
                      <button

     

       
392
       
392
       
-
       
                        type="button"

     

       
393
       
393
       
-
       
                        class="flex items-center gap-2 px-3 py-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 rounded-t-lg"

     

       
403
       
403
       
+
       
                    <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute bottom-full left-0 z-10 mb-1 flex w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1.5 shadow-md dark:border-neutral-700">

     

       
404
       
404
       
+
       
                      <MenuItem

     

       
405
       
405
       
+
       
                        icon="lucide--upload"

     

       
406
       
406
       
+
       
                        label="Upload blob"

     

       
394
       
407
       
 
       
                        onClick={() => {

     

       
395
       
408
       
 
       
                          setOpenInsertMenu(false);

     

       
396
       
409
       
 
       
                          blobInput.click();

     

       
397
       
410
       
 
       
                        }}

     

       
398
       
398
       
-
       
                      >

     

       
399
       
399
       
-
       
                        <span class="iconify lucide--upload"></span>

     

       
400
       
400
       
-
       
                        <span>Upload blob</span>

     

       
401
       
401
       
-
       
                      </button>

     

       
402
       
402
       
-
       
                      <button

     

       
403
       
403
       
-
       
                        type="button"

     

       
404
       
404
       
-
       
                        class="flex items-center gap-2 px-3 py-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600 rounded-b-lg"

     

       
411
       
411
       
+
       
                      />

     

       
412
       
412
       
+
       
                      <MenuItem

     

       
413
       
413
       
+
       
                        icon="lucide--clock"

     

       
414
       
414
       
+
       
                        label="Insert timestamp"

     

       
405
       
415
       
 
       
                        onClick={insertTimestamp}

     

       
406
       
406
       
-
       
                      >

     

       
407
       
407
       
-
       
                        <span class="iconify lucide--clock"></span>

     

       
408
       
408
       
-
       
                        <span>Insert timestamp</span>

     

       
409
       
409
       
-
       
                      </button>

     

       
416
       
416
       
+
       
                      />

     

       
410
       
417
       
 
       
                    </div>

     

       
411
       
418
       
 
       
                  </Show>

     

       
412
       
419
       
 
       
                  <input