@jackuait/blok 0.7.3-beta.4 → 0.8.0

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

@@ -23,6 +23,17 @@
   "tools.marker.textColor": "文字",
   "tools.marker.background": "背景",
   "tools.marker.default": "默认",
+  "tools.colorPicker.defaultSwatchLabel": "{default} {mode}",
+  "tools.colorPicker.colorSwatchLabel": "{color} {mode}",
+  "tools.colorPicker.color.gray": "灰色",
+  "tools.colorPicker.color.brown": "棕色",
+  "tools.colorPicker.color.orange": "橙色",
+  "tools.colorPicker.color.yellow": "黄色",
+  "tools.colorPicker.color.green": "绿色",
+  "tools.colorPicker.color.blue": "蓝色",
+  "tools.colorPicker.color.purple": "紫色",
+  "tools.colorPicker.color.pink": "粉色",
+  "tools.colorPicker.color.red": "红色",
   "tools.stub.error": "错误",
   "tools.stub.blockCannotBeDisplayed": "无法显示此内容块",
   "tools.header.heading1": "一级标题",
@@ -72,5 +83,7 @@
   "tools.table.dragToAddRemoveRows": "拖动以添加或删除行",
   "tools.table.clickToAddColumn": "点击添加新列",
   "tools.table.dragToAddRemoveColumns": "拖动以添加或删除列",
-  "blockSettings.convertWithChildrenWarning": "此内容块包含 {count} 个嵌套块。转换后，这些嵌套块将被提升至顶层。是否继续？"
+  "blockSettings.convertWithChildrenWarning": "此内容块包含 {count} 个嵌套块。转换后，这些嵌套块将被提升至顶层。是否继续？",
+  "toolNames.underline": "Underline",
+  "toolNames.strikethrough": "Strikethrough"
 }

package/src/components/icons/index.ts

@@ -9,7 +9,8 @@ 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"
+    transform="translate(0,-1)"
+    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 +23,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 +40,29 @@ 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>
+`;
+
+// Underline icon
+export const IconUnderline = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.5 3.5v7.5a4.5 4.5 0 0 0 9 0V3.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3.5 18.5h13" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Strikethrough icon
+export const IconStrikethrough = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 10h12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M8.2 10c-1-.5-1.8-1.27-1.8-2.4 0-1.99 1.61-3.6 3.6-3.6s3.6 1.61 3.6 3.6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M11.8 10c1 .5 1.8 1.27 1.8 2.4 0 1.99-1.61 3.6-3.6 3.6s-3.6-1.61-3.6-3.6" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 
@@ -386,3 +404,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) {