@jackuait/blok 0.7.3-beta.4 → 0.7.3

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { wn as e } from "./chunks/constants-C_H9o9Ao.mjs";
-import { n as t, t as n } from "./chunks/blok-CdxHhr5i.mjs";
+import { An as e } from "./chunks/constants-WhLyFkza.mjs";
+import { n as t, t as n } from "./chunks/blok-BmlbETK7.mjs";
 import { t as r } from "./chunks/objectSpread2-CyPxu8-u.mjs";
-import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-B0YXCZFW.mjs";
+import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-BCb5bMO3.mjs";
 //#region src/full.ts
 var m = {
 	paragraph: {

package/dist/locales.mjs

@@ -25,6 +25,15 @@ var e = {
 	"tools.marker.textColor": "Text",
 	"tools.marker.background": "Background",
 	"tools.marker.default": "Default",
+	"tools.colorPicker.color.gray": "Gray",
+	"tools.colorPicker.color.brown": "Brown",
+	"tools.colorPicker.color.orange": "Orange",
+	"tools.colorPicker.color.yellow": "Yellow",
+	"tools.colorPicker.color.green": "Green",
+	"tools.colorPicker.color.blue": "Blue",
+	"tools.colorPicker.color.purple": "Purple",
+	"tools.colorPicker.color.pink": "Pink",
+	"tools.colorPicker.color.red": "Red",
 	"tools.stub.error": "Error",
 	"tools.stub.blockCannotBeDisplayed": "This block cannot be displayed",
 	"tools.header.heading1": "Heading 1",

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import "./chunks/constants-C_H9o9Ao.mjs";
-import { r as e, t } from "./chunks/blok-CdxHhr5i.mjs";
+import "./chunks/constants-WhLyFkza.mjs";
+import { r as e, t } from "./chunks/blok-BmlbETK7.mjs";
 import { t as n } from "./chunks/objectSpread2-CyPxu8-u.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-C_H9o9Ao.mjs";
-import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-B0YXCZFW.mjs";
+import { m as e } from "./chunks/constants-WhLyFkza.mjs";
+import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-BCb5bMO3.mjs";
 export { s as Bold, e as Convert, d as Header, t as Italic, i as Link, a as List, c as Marker, r as Paragraph, n as Table, l as Toggle, u as defaultBlockTools, o as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.7.3-beta.4",
+  "version": "0.7.3",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",
@@ -200,4 +200,4 @@
       "optional": true
     }
   }
-}
+}

package/src/components/block/style-manager.ts

@@ -10,7 +10,7 @@ export class StyleManager {
    * Tailwind styles for the Block elements
    */
   private static readonly styles = {
-    wrapper: 'relative opacity-100 my-[-0.5em] py-[0.5em] first:mt-0 last:pb-0 last:mb-0 [&_a]:cursor-pointer [&_a]:underline [&_a]:text-link [&_b]:font-bold [&_i]:italic',
+    wrapper: 'relative opacity-100 first:mt-0 last:pb-0 last:mb-0 [&_a]:cursor-pointer [&_a]:underline [&_a]:text-link [&_b]:font-bold [&_i]:italic',
     content: 'relative mx-auto transition-colors duration-150 ease-out max-w-blok-content',
     contentSelected: 'bg-selection rounded-[4px] **:[[contenteditable]]:select-none [&_img]:opacity-55 **:data-[blok-tool=stub]:opacity-55',
     contentStretched: 'max-w-none',

package/src/components/blocks.ts

@@ -116,7 +116,7 @@ export class Blocks {
    * @param {number} fromIndex - block to move
    * @param {boolean} skipDOM - if true, do not manipulate DOM (useful when SortableJS already did it)
    */
-  public move(toIndex: number, fromIndex: number, skipDOM = false): void {
+  public move(toIndex: number, fromIndex: number, skipDOM = false, skipMovedHook = false): void {
     /**
      * cut out the block, move the DOM element and insert at the desired index
      * again (the shifting within the blocks array will happen automatically).
@@ -132,10 +132,7 @@ export class Blocks {
       block.holder.parentElement !== this.workingArea;
 
     if (!skipDOM && !isNested) {
-      const previousBlockIndex = Math.max(0, toIndex - 1);
-      const position: InsertPosition = toIndex > 0 ? 'afterend' : 'beforebegin';
-
-      this.moveHolderInDOM(block, this.blocks[previousBlockIndex].holder, position);
+      this.moveHolderInDOM(block, toIndex);
     }
 
     // move in array
@@ -145,11 +142,13 @@ export class Blocks {
     // immediately follow the moved block in the flat array, matching DOM nesting.
     this.resortNestedBlocks(block, this.blocks.indexOf(block));
 
-    // invoke hook
-    block.call(BlockToolAPI.MOVED, {
-      fromIndex,
-      toIndex,
-    });
+    // invoke hook (skipped during batch moves — caller re-triggers after all blocks land)
+    if (!skipMovedHook) {
+      block.call(BlockToolAPI.MOVED, {
+        fromIndex,
+        toIndex,
+      });
+    }
   }
 
   /**
@@ -412,52 +411,36 @@ export class Blocks {
       return;
     }
 
-    const referenceNode = this.findWorkingAreaChild(target.holder);
-
-    if (referenceNode !== null) {
-      referenceNode.insertAdjacentElement(position, block.holder);
-    } else {
-      this.workingArea.appendChild(block.holder);
-    }
-
+    target.holder.insertAdjacentElement(position, block.holder);
     block.call(BlockToolAPI.RENDERED);
   }
 
   /**
-   * Walk from an element up to find the ancestor that is a direct child of workingArea.
-   * If the element itself is a direct child, returns the element.
-   * Returns null if the element is not inside workingArea.
-   *
-   * @param element - Starting element to walk up from
-   * @returns Direct child of workingArea, or null
-   */
-  /**
-   * Move a block's holder in the DOM relative to a reference element.
-   * If the reference is nested inside a container (e.g. a table cell),
-   * walks up to find the workingArea-level ancestor and inserts relative to that.
+   * Move a block's holder in the DOM to the position indicated by toIndex in the
+   * post-splice flat array. Inserts directly before the next block's holder
+   * (without walking up to the workingArea root), so nested blocks are handled
+   * correctly — the moved block lands at the exact DOM position, not after the
+   * root-level ancestor of a nested reference block.
    *
    * @param block - Block whose holder to move
-   * @param referenceHolder - The reference element to position relative to
-   * @param position - Where to insert relative to the reference
+   * @param toIndex - Target index in the post-splice blocks array
    */
-  private moveHolderInDOM(block: Block, referenceHolder: Element, position: InsertPosition): void {
-    const referenceNode = this.findWorkingAreaChild(referenceHolder);
+  private moveHolderInDOM(block: Block, toIndex: number): void {
+    const nextBlock = this.blocks[toIndex];
 
-    if (referenceNode === block.holder) {
-      /**
-       * Self-reference: the resolved reference is the block being moved itself,
-       * which happens when the previousBlock's holder is nested inside block.holder.
-       * Use the next workingArea sibling to avoid undefined behavior.
-       */
+    if (nextBlock === undefined) {
+      this.workingArea.appendChild(block.holder);
+    } else if (block.holder.contains(nextBlock.holder)) {
+      // Self-reference: next block is nested inside the block being moved
+      // (e.g. moving a toggle forward; blocks[toIndex] is one of its children).
+      // Use the next workingArea sibling to avoid undefined DOM behavior.
       const nextSibling = block.holder.nextElementSibling;
 
-      if (nextSibling) {
+      if (nextSibling !== null) {
         nextSibling.insertAdjacentElement('beforebegin', block.holder);
       }
-    } else if (referenceNode !== null) {
-      referenceNode.insertAdjacentElement(position, block.holder);
     } else {
-      this.workingArea.appendChild(block.holder);
+      nextBlock.holder.insertAdjacentElement('beforebegin', block.holder);
     }
 
     block.call(BlockToolAPI.RENDERED);
@@ -495,15 +478,4 @@ export class Blocks {
     this.blocks.splice(newIdx + 1, 0, ...nested);
   }
 
-  private findWorkingAreaChild(element: Element): Element | null {
-    if (element.parentElement === this.workingArea) {
-      return element;
-    }
-
-    if (element.parentElement === null) {
-      return null;
-    }
-
-    return this.findWorkingAreaChild(element.parentElement);
-  }
 }

package/src/components/constants/data-attributes.ts

@@ -161,8 +161,6 @@ export const DATA_ATTR = {
   popoverItemNoHover: 'data-blok-popover-item-no-hover',
   /** Disable focus handling */
   popoverItemNoFocus: 'data-blok-popover-item-no-focus',
-  /** Wobble animation */
-  popoverItemWobble: 'data-blok-popover-item-wobble',
   /** Destructive action item (e.g. delete) */
   popoverItemDestructive: 'data-blok-popover-item-destructive',
   /** Separator item */

package/src/components/i18n/locales/en/messages.json

@@ -24,6 +24,15 @@
   "tools.marker.textColor": "Text",
   "tools.marker.background": "Background",
   "tools.marker.default": "Default",
+  "tools.colorPicker.color.gray": "Gray",
+  "tools.colorPicker.color.brown": "Brown",
+  "tools.colorPicker.color.orange": "Orange",
+  "tools.colorPicker.color.yellow": "Yellow",
+  "tools.colorPicker.color.green": "Green",
+  "tools.colorPicker.color.blue": "Blue",
+  "tools.colorPicker.color.purple": "Purple",
+  "tools.colorPicker.color.pink": "Pink",
+  "tools.colorPicker.color.red": "Red",
   "tools.stub.error": "Error",
   "tools.stub.blockCannotBeDisplayed": "This block cannot be displayed",
   "tools.header.heading1": "Heading 1",

package/src/components/icons/index.ts

@@ -9,7 +9,7 @@ export const IconCross = `
 export const IconBold = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M5.5 11h4.9231c.6528 0 1.2789-.3161 1.7405-.8787.4617-.56259.721-1.32565.721-2.1213 0-.79565-.2593-1.55871-.721-2.12132C11.702 5.31607 11.0759 5 10.4231 5H5.5v6Zm0 0h5.5385c.6528 0 1.2789.3161 1.7405.8787.4617.5626.721 1.3257.721 2.1213 0 .7956-.2593 1.5587-.721 2.1213-.4616.5626-1.0877.8787-1.7405.8787H5.5v-6Z"
+    d="M6 11h4.9231c.6528 0 1.2789-.3161 1.7405-.8787.4617-.56259.721-1.32565.721-2.1213 0-.79565-.2593-1.55871-.721-2.12132C12.202 5.31607 11.5759 5 10.9231 5H6v6Zm0 0h5.5385c.6528 0 1.2789.3161 1.7405.8787.4617.5626.721 1.3257.721 2.1213 0 .7956-.2593 1.5587-.721 2.1213-.4616.5626-1.0877.8787-1.7405.8787H6v-6Z"
     stroke="currentColor"
     stroke-width="1.25"
     stroke-linecap="round"
@@ -22,7 +22,7 @@ export const IconBold = `
 export const IconItalic = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M8.5 5h6m-10 12h6m1-12-4 12"
+    d="M8.5 4h6m-10 12h6m1-12-4 12"
     stroke="currentColor"
     stroke-width="1.25"
     stroke-linecap="round"
@@ -39,12 +39,12 @@ export const IconLink = `
 </svg>
 `;
 
-// Marker/Color icon (letter A with color bar)
+// Marker/Color icon (letter A in rounded square)
 export const IconMarker = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6.5 14L10 5l3.5 9" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M7.5 11.5h5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
-  <rect x="4.5" y="16" width="11" height="1.5" rx="0.75" fill="currentColor"/>
+  <rect x="1.25" y="1.25" width="17.5" height="17.5" rx="4.5" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M6.5 14.5L10 5.5l3.5 9" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.5 11h3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
 </svg>
 `;
 
@@ -386,3 +386,31 @@ export const IconToggleH3 = `
   <path d="M16 7l2.5 3-2.5 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
+
+// Globe icon (URL link type)
+export const IconGlobe = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="6" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M10 4C8 6 7.5 8 7.5 10C7.5 12 8 14 10 16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 4C12 6 12.5 8 12.5 10C12.5 12 12 14 10 16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 10H16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Mail icon (email link type)
+export const IconMail = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="5.5" width="14" height="9" rx="1.5" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+  <path d="M3 8L10 10L17 8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Hash icon (anchor link type)
+export const IconHash = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.5 4L7.5 16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M12.5 4L12.5 16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M4 8H16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M4 12H16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;

package/src/components/inline-tools/inline-tool-link.ts

@@ -6,12 +6,15 @@ import type {
 import type { Notifier, Toolbar, I18n, InlineToolbar } from '../../../types/api';
 import type { MenuConfig } from '../../../types/tools';
 import { DATA_ATTR, createSelector, INLINE_TOOLBAR_INTERFACE_VALUE } from '../constants';
-import { IconLink } from '../icons';
+import { IconLink, IconGlobe, IconMail, IconHash } from '../icons';
 import { SelectionUtils } from '../selection/index';
 import { log } from '../utils';
 import { PopoverItemType } from '../utils/popover';
 import { twMerge } from '../utils/tw';
 
+const SUGGESTION_ROW_VALID = 'flex items-center gap-2 w-full mt-0.5 px-1.5 py-1.5 rounded-md text-left cursor-pointer can-hover:hover:bg-item-hover-bg transition-colors';
+const SUGGESTION_ROW_INVALID = 'flex items-center gap-2 w-full mt-0.5 px-1.5 py-1.5 rounded-md text-left pointer-events-none';
+
 /**
  * Link Tool
  *
@@ -54,7 +57,7 @@ export class LinkInlineTool implements InlineTool {
   /**
    * Tailwind classes for input
    */
-  private readonly INPUT_BASE_CLASSES = 'hidden w-full m-0 px-2 py-1 text-sm leading-[22px] font-medium bg-item-hover-bg border border-link-input-border rounded-md outline-hidden box-border appearance-none font-[inherit] placeholder:text-gray-text mobile:text-[15px] mobile:font-medium';
+  private readonly INPUT_BASE_CLASSES = 'hidden w-[200px] m-0 px-2 py-1 text-sm leading-[22px] font-medium text-text-primary bg-item-hover-bg border border-link-input-border rounded-lg! outline-hidden box-border appearance-none font-[inherit] placeholder:text-gray-text mobile:text-[15px] mobile:font-medium';
 
   /**
    * Data attributes for e2e selectors
@@ -70,9 +73,13 @@ export class LinkInlineTool implements InlineTool {
    */
   private nodes: {
     input: HTMLInputElement | null;
+    inputWrapper: HTMLElement | null;
+    suggestion: HTMLElement | null;
     button: HTMLButtonElement | null;
   } = {
       input: null,
+      inputWrapper: null,
+      suggestion: null,
       button: null,
     };
 
@@ -121,6 +128,9 @@ export class LinkInlineTool implements InlineTool {
     this.i18n = api.i18n;
     this.selection = new SelectionUtils();
     this.nodes.input = this.createInput();
+    this.nodes.suggestion = this.createSuggestion();
+    this.nodes.inputWrapper = document.createElement('div');
+    this.nodes.inputWrapper.append(this.nodes.input, this.nodes.suggestion);
   }
 
   /**
@@ -133,12 +143,11 @@ export class LinkInlineTool implements InlineTool {
       isActive: () => !!this.selection.findParentTag('A'),
       children: {
         hideChevron: true,
-        width: '200px',
         items: [
           {
             type: PopoverItemType.Html,
-            // Input is created in constructor, so it's always available here
-            element: this.nodes.input as HTMLInputElement,
+            // Wrapper contains the input and suggestion chip
+            element: this.nodes.inputWrapper as HTMLElement,
           },
         ],
         onOpen: () => {
@@ -167,10 +176,195 @@ export class LinkInlineTool implements InlineTool {
         this.enterPressed(event);
       }
     });
+    input.addEventListener('paste', () => {
+      requestAnimationFrame(() => {
+        this.updateSuggestion(input.value);
+      });
+    });
+    input.addEventListener('input', () => {
+      this.updateSuggestion(input.value);
+    });
 
     return input;
   }
 
+  /**
+   * Create the suggestion chip shown below the input when a URL is present
+   */
+  private createSuggestion(): HTMLElement {
+    const wrapper = document.createElement('div');
+
+    wrapper.className = 'hidden';
+    wrapper.setAttribute('data-link-suggestion', '');
+
+    const divider = document.createElement('div');
+
+    divider.className = 'mt-1 mb-0.5 h-px bg-link-input-border';
+
+    const row = document.createElement('button');
+
+    row.type = 'button';
+    row.className = SUGGESTION_ROW_VALID;
+    row.setAttribute('data-link-suggestion-row', '');
+
+    const iconEl = document.createElement('span');
+
+    iconEl.className = 'text-gray-text shrink-0 flex [&>svg]:size-7';
+    iconEl.setAttribute('data-link-suggestion-icon', '');
+
+    const textEl = document.createElement('span');
+
+    textEl.className = 'flex-1 min-w-0';
+
+    const urlEl = document.createElement('span');
+
+    urlEl.className = 'block text-xs font-medium text-text-primary truncate';
+    urlEl.setAttribute('data-link-suggestion-url', '');
+
+    const typeEl = document.createElement('span');
+
+    typeEl.className = 'block text-[10.5px] text-gray-text leading-tight mt-px';
+    typeEl.setAttribute('data-link-suggestion-type', '');
+
+    textEl.append(urlEl, typeEl);
+    row.append(iconEl, textEl);
+    wrapper.append(divider, row);
+
+    row.addEventListener('mousedown', (e) => e.preventDefault());
+    row.addEventListener('click', () => this.confirmLink());
+
+    return wrapper;
+  }
+
+  /**
+   * Update the suggestion chip content and visibility based on current input value
+   */
+  private updateSuggestion(value: string): void {
+    if (!this.nodes.suggestion) {
+      return;
+    }
+
+    const trimmed = value.trim();
+
+    if (!trimmed) {
+      this.nodes.suggestion.classList.add('hidden');
+
+      return;
+    }
+
+    const isComplete = this.isLinkComplete(trimmed);
+    const { icon, label } = this.getLinkTypeInfo(trimmed);
+    const iconEl = this.nodes.suggestion.querySelector<HTMLElement>('[data-link-suggestion-icon]');
+    const urlEl = this.nodes.suggestion.querySelector<HTMLElement>('[data-link-suggestion-url]');
+    const typeEl = this.nodes.suggestion.querySelector<HTMLElement>('[data-link-suggestion-type]');
+    const row = this.nodes.suggestion.querySelector<HTMLElement>('[data-link-suggestion-row]');
+
+    if (iconEl) {
+      iconEl.innerHTML = icon;
+      iconEl.className = `${isComplete ? 'text-gray-text' : 'text-gray-text opacity-40'} shrink-0 flex [&>svg]:size-7`;
+    }
+    if (urlEl) {
+      urlEl.textContent = trimmed;
+      urlEl.className = `block text-xs font-medium truncate ${isComplete ? 'text-text-primary' : 'text-gray-text'}`;
+    }
+    if (typeEl) {
+      typeEl.textContent = isComplete ? label : 'Keep typing to add a link';
+      typeEl.className = 'block text-[10.5px] text-gray-text leading-tight mt-px';
+    }
+    if (row) {
+      row.className = isComplete ? SUGGESTION_ROW_VALID : SUGGESTION_ROW_INVALID;
+    }
+
+    this.nodes.suggestion.classList.remove('hidden');
+  }
+
+  /**
+   * Return true if the URL is complete enough to confirm as a link.
+   *
+   * Rules by category:
+   *  - http/https   → must have at least one character after "://"
+   *  - other ://    → same (ftp, ws, etc.)
+   *  - mailto/tel/… → must have something after the colon
+   *  - //host       → must have at least one character after "//"
+   *  - #anchor      → must have at least one character after "#"
+   *  - /path        → always valid (internal link)
+   *  - plain text   → must look like a domain (dot + 2+ letter TLD) or IP address
+   */
+  private isLinkComplete(url: string): boolean {
+    // http / https — require a non-empty host after "://"
+    if (/^https?:\/\//i.test(url)) {
+      return url.replace(/^https?:\/\//i, '').length > 0;
+    }
+    // Other double-slash protocols (ftp://, ws://, etc.)
+    if (/^\w+:\/\//.test(url)) {
+      return url.replace(/^\w+:\/\//, '').length > 0;
+    }
+    // Single-colon schemes: mailto:, tel:, sms:, etc. — require something after ":"
+    if (/^\w+:/.test(url)) {
+      return url.slice(url.indexOf(':') + 1).length > 0;
+    }
+    // Protocol-relative — require a non-empty host after "//"
+    if (url.startsWith('//')) {
+      return url.slice(2).length > 0;
+    }
+    // Anchor — require at least one character after "#"
+    if (url.startsWith('#')) {
+      return url.length > 1;
+    }
+    // Absolute internal path — always valid
+    if (url.startsWith('/')) {
+      return true;
+    }
+    // Plain text — must look like a domain or IP address
+    return /\.[a-zA-Z]{2,}/.test(url) || /^\d{1,3}(\.\d{1,3}){3}/.test(url);
+  }
+
+  /**
+   * Return the icon SVG and human-readable label for a given URL
+   */
+  private getLinkTypeInfo(url: string): { icon: string; label: string } {
+    if (url.startsWith('mailto:')) {
+      return { icon: IconMail, label: 'Email address' };
+    }
+    if (url.startsWith('#')) {
+      return { icon: IconHash, label: 'Jump to section' };
+    }
+
+    return { icon: IconGlobe, label: 'Link to web page' };
+  }
+
+  /**
+   * Insert the link from the input — called by the suggestion chip click
+   */
+  private confirmLink(): void {
+    if (!this.nodes.input) {
+      return;
+    }
+
+    const value = this.nodes.input.value || '';
+
+    if (!value.trim() || !this.isLinkComplete(value.trim())) {
+      return;
+    }
+
+    if (!this.validateURL(value)) {
+      this.notifier.show({
+        message: this.i18n.t('tools.link.invalidLink'),
+        style: 'error',
+      });
+
+      return;
+    }
+
+    const preparedValue = this.prepareLink(value);
+
+    this.selection.removeFakeBackground();
+    this.selection.restore();
+    this.insertLink(preparedValue);
+    this.selection.collapseToEnd();
+    this.inlineToolbar.close();
+  }
+
   /**
    * Shortcut for the link tool
    */
@@ -202,6 +396,8 @@ export class LinkInlineTool implements InlineTool {
       this.nodes.input.value = '';
     }
 
+    this.updateSuggestion(this.nodes.input.value);
+
     this.nodes.input.className = twMerge(this.INPUT_BASE_CLASSES, 'block');
     this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, true);
 
@@ -310,6 +506,7 @@ export class LinkInlineTool implements InlineTool {
     this.nodes.input.className = this.INPUT_BASE_CLASSES;
     this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, false);
     this.nodes.input.value = '';
+    this.nodes.suggestion?.classList.add('hidden');
     this.updateButtonStateAttributes(false);
     this.unlinkAvailable = false;
     if (clearSavedSelection) {