theme linktooltip y editlinkmenu

src/app.css

@@ -48,3 +48,13 @@ a {
     --accent-fg: #94a3b8;
   }
 }
+/* https://devdojo.com/pines/docs/button */
+.btn {
+  @apply rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-white  dark:bg-neutral-200 dark:text-neutral-800;
+}
+.btn-outline {
+  @apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-950 dark:text-neutral-200;
+}
+.input {
+  @apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900;
+}

src/editor/bubblemenu/EditLinkMenu.svelte

@@ -11,7 +11,6 @@
   export let view: EditorView;
   export let editingLink: Writable<false | "new" | "selection">;
 
-  let hrefInputEl: HTMLInputElement;
   let formEl: HTMLFormElement;
 
   // ref: https://gitlab.com/gitlab-org/gitlab-foss/-/blob/13d851c795a48b670b859a7ec5bd6e2886d2789e/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue#L69
@@ -24,11 +23,6 @@
     text = "";
     href = "";
 
-    // el timeout... ugh
-    hrefInputEl?.focus();
-    setTimeout(() => hrefInputEl?.focus(), 50);
-    setTimeout(() => hrefInputEl?.focus(), 100);
-
     if (editingLink === "selection") {
       // https://gitlab.com/gitlab-org/gitlab-foss/-/blob/13d851c795a48b670b859a7ec5bd6e2886d2789e/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue#L69
       text = getSelectionText(view.state);
@@ -96,47 +90,29 @@
 <svelte:document on:pointerdown={detectFocus} />
 
 <form
-  class="rounded-lg bg-white shadow-lg"
+  class="absolute z-50 w-max rounded-lg border border-neutral-200/70 bg-white p-4 shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
   style={$style}
   hidden={!shown}
   bind:this={formEl}
   on:submit|preventDefault={onSubmit}
 >
-  <div class="form-group">
+  <div class="mb-4">
-    <label for={`link-text-${id}`} class="col-form-label d-block">Texto</label>
+    <label for={`link-text-${id}`} class="block">Texto</label>
-    <input
+    <input class="input" id={`link-text-${id}`} type="text" bind:value={text} />
-      class="form-control"
-      id={`link-text-${id}`}
-      type="text"
-      bind:value={text}
-    />
   </div>
-  <div class="form-group was-validated">
+  <div class="mb-4">
-    <label for={`link-href-${id}`} class="col-form-label d-block">Enlace</label>
+    <label for={`link-href-${id}`} class="block">Enlace</label>
     <input
-      class="form-control"
+      class="input"
       id={`link-href-${id}`}
       type="url"
-      bind:this={hrefInputEl}
+      autofocus
       bind:value={href}
     />
   </div>
-  <div class="d-flex justify-content-end buttons">
+  <div class="flex justify-end gap-2">
-    <button type="button" class="btn btn-secondary" on:click={cancel}
+    <button class="btn-outline" type="button" on:click={cancel}>Cancelar</button
-      >Cancelar</button
     >
-    <button type="submit" class="btn btn-primary">Guardar</button>
+    <button class="btn" type="submit">Guardar</button>
   </div>
 </form>
-
-<style>
-  form {
-    width: max-content;
-    position: absolute;
-    z-index: 420;
-    padding: 1rem;
-  }
-  .buttons {
-    gap: 0.5rem;
-  }
-</style>

src/editor/bubblemenu/LinkTooltip.svelte

@@ -10,6 +10,8 @@
   import { markSelectionFloatingUi } from "./floatingUi";
   import { readable, type Writable } from "svelte/store";
   import { flip, shift, offset } from "@floating-ui/dom";
+  import EditIcon from "eva-icons/outline/svg/edit-outline.svg";
+  import CloseIcon from "eva-icons/fill/svg/close.svg";
 
   export let state: EditorState;
   export let view: EditorView;
@@ -58,11 +60,11 @@
       {link?.mark.attrs.href}
     </a>
   </span>
-  <button type="button" on:click={editLink}>
+  <button type="button" on:click={editLink} title={"Editar enlace"}>
-    <i class={`fa fa-edit`} title={"Editar enlace"} />
+    <EditIcon class="h-6 w-6 fill-current" />
   </button>
-  <button type="button" on:click={removeLink}>
+  <button type="button" on:click={removeLink} title={"Borrar enlace"}>
-    <i class={`fa fa-remove`} title={"Borrar enlace"} />
+    <CloseIcon class="h-6 w-6 fill-current" />
   </button>
 </div>