feat/url: add clickable URLs in cells. Fixes #13 Fixes #14

README.md

@@ -28,6 +28,7 @@ A plugin designed to view and edit `CSV files` directly within Obsidian.
 -   **Edit** cells directly by clicking and typing.
 -   **Manage** rows and columns (add, delete, move) with a simple right-click on the header.
 - **Switch Delimiter Non‑Destructively**: Auto‑detects the file delimiter (comma, semicolon, tab, etc.). Changing the delimiter in the toolbar only re-parses the view; it does NOT rewrite your file. Your original delimiter is preserved when saving edits.
+- **Clickable URLs**: Plain-text URLs and Markdown-style links (`[text](url)`) in cells are automatically detected and rendered as clickable links. Click a link to open it in your browser, or click the edit button (✎) to edit the cell content.
 
 I have a plan to design my own database using json and csv only. If you have fancy idea about tables or csv, please feel free to issue (I will consider it in csv-lite or my new plugin) or search it in community. <!-- For in-markdown edit, I recommend `anyblock` with a much more complex syntax. -->
 

README_zh.md

@@ -23,6 +23,7 @@
 -   **编辑** 直接点击并输入即可编辑单元格
 -   **管理** 行和列（添加、删除、移动），只需右键点击表头
 - **非破坏性分隔符切换**：自动检测文件原始分隔符（逗号、分号、制表符等）。在工具栏切换分隔符只会重新解析视图，不会改写文件；保存编辑时仍使用文件原始分隔符，避免产生大规模 diff。
+- **可点击的 URL 链接**：单元格中的纯文本 URL 和 Markdown 风格链接（`[文本](url)`）会自动识别并渲染为可点击的链接。点击链接在浏览器中打开，或点击编辑按钮（✎）编辑单元格内容。
 
 我计划仅用 json 和 csv 设计自己的数据库。如果你有关于表格或 csv 的新想法，欢迎提 issue（我会考虑加入 csv-lite 或新插件），或在社区中搜索。<!-- 对于 Markdown 内编辑，推荐 `anyblock`，但语法更复杂。 -->
 

docs/CLICKABLE_URLS.md

@@ -0,0 +1,134 @@
+# Clickable URLs Feature
+
+## Overview
+
+The Clickable URLs feature automatically detects and renders plain-text URLs and Markdown-style links in CSV cells as clickable links. This makes it easy to navigate to external resources directly from your CSV data while keeping your tables clean and readable.
+
+## How It Works
+
+### URL Detection
+
+The plugin detects two types of links:
+
+**1. Plain URLs:**
+- `http://example.com`
+- `https://example.com`
+- URLs with paths: `https://example.com/path/to/page`
+- URLs with query parameters: `https://example.com?param=value`
+- URLs with fragments: `https://example.com#section`
+
+**2. Markdown-style Links:**
+- `[GitHub](https://github.com)` - Displays as "GitHub" but links to the URL
+- `[Documentation](https://docs.example.com)` - Clean, readable link text
+- Mixed content: `Visit [our site](https://example.com) for more` - Text with embedded Markdown links
+
+### Display Modes
+
+Each cell with a URL has two modes:
+
+1. **Display Mode** (default)
+   - URLs are rendered as clickable links
+   - Links open in a new browser tab
+   - Click the cell (not the link) to enter edit mode
+
+2. **Edit Mode**
+   - Shows the plain text input field
+   - Allows editing the URL text
+   - Automatically switches back to display mode on blur
+
+### Implementation Details
+
+#### Files Created/Modified
+
+1. **`src/utils/url-utils.ts`** (new)
+   - `containsUrl()`: Detects if text contains URLs
+   - `parseTextWithUrls()`: Parses text into segments (URL and non-URL)
+   - `createUrlDisplay()`: Creates DOM elements with clickable links
+
+2. **`src/view/table-render.ts`** (modified)
+   - Integrated URL display layer
+   - Toggle between display and edit modes
+   - Dynamic URL detection on input changes
+
+3. **`styles.css`** (modified)
+   - Added styles for `.csv-cell-display`
+   - Added styles for `.csv-cell-link` with hover effects
+
+#### Architecture
+
+```
+Cell Structure:
+├── <td>
+    ├── <div class="csv-cell-display"> (shown when not editing)
+    │   ├── <span>Plain text</span>
+    │   ├── <a href="..." class="csv-cell-link">URL</a>
+    │   └── <span>More text</span>
+    └── <input class="csv-cell-input"> (shown when editing)
+```
+
+### User Experience
+
+1. **Viewing**: URLs appear as underlined, colored links
+2. **Clicking a link**: Opens in new browser tab (Ctrl/Cmd + Click for background tab)
+3. **Editing**: Click anywhere in the cell (including the display area, but not on the link itself) to enter edit mode
+4. **Saving**: Changes are saved automatically when you blur the input
+
+### Click Behavior
+
+- **Click on link**: Opens URL in new tab
+- **Click on cell (anywhere except link)**: Enters edit mode and focuses the input
+- **Hover over cell**: Shows background highlight to indicate it's editable
+- **Hover over link**: Shows link-specific hover effect
+
+### Styling
+
+The links use CSS variables for theming:
+- `--link-color`: Link color
+- `--link-color-hover`: Hover state color
+- Transitions for smooth hover effects
+
+### Testing
+
+Unit tests are provided in `test/url-utils.test.ts`:
+- URL detection accuracy
+- Text parsing with single/multiple URLs
+- Edge cases (URLs at start/end, with special characters)
+
+### Demo
+
+Sample CSV files are provided for testing:
+- `test/url-test-sample.csv` - Plain URLs
+- `test/markdown-links-sample.csv` - Markdown-style links
+
+### Examples
+
+**Plain URLs:**
+```csv
+name,website
+GitHub,https://github.com
+```
+Displays: GitHub | https://github.com (as clickable link)
+
+**Markdown Links:**
+```csv
+name,website
+GitHub,[Visit GitHub](https://github.com)
+```
+Displays: GitHub | Visit GitHub (as clickable link, cleaner!)
+
+**Mixed Content:**
+```csv
+description
+Check [our docs](https://docs.example.com) and https://example.com
+```
+Both links are clickable, with Markdown link showing as "our docs"
+
+## Future Enhancements
+
+Possible improvements:
+- Support for other URL formats (ftp://, file://, etc.)
+- URL validation and error indicators
+- Custom link styling per column
+- Option to disable auto-linking for specific columns
+- Support for Obsidian internal links (`[[note]]`)
+- Support for Wiki-style links