feat: added trash button to floatingLinkEditor plugin to remove the link

umaranis · Nov 9, 2023 · 4f0b10f · 4f0b10f
1 parent 197b55f
commit 4f0b10f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/demos/playground/src/index.css b/demos/playground/src/index.css
@@ -600,6 +600,20 @@ i.prettier-error {
   width: 35px;
   vertical-align: -0.25em;
   position: absolute;
+  right: 30px;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-trash {
+  background-image: url(images/icons/trash.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
   right: 0;
   top: 0;
   bottom: 0;

diff --git a/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte b/packages/svelte-lexical/src/core/plugins/link/FloatingLinkEditor.svelte
@@ -208,6 +208,14 @@
             editedLinkUrl = linkUrl;
             isEditMode = true;
           }} />
+        <div
+          class="link-trash"
+          role="button"
+          tabIndex={0}
+          on:mousedown={(event) => event.preventDefault()}
+          on:click={() => {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+          }} />
       </div>
     {/if}
   {/if}