ponkotsu-md-editor 0.2.38 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5302c9a2279a1cc63c0eb45bc2bef74a3293fc792c4c1b21b73d69368fe75054
-  data.tar.gz: 496540544d96bf811322e4de5338fc6cab9d6706c0d061d545272e64630ae528
+  metadata.gz: 69a042675752a90ebfb4fea9302b8afdcdc4ef5b5a0a92d1060bb5c591c591c9
+  data.tar.gz: 1ba8795a6ce803ddc14c64df8d709e46829bbcfc36915161d4577fb947ad2e33
 SHA512:
-  metadata.gz: 040fc09a76dec0d164fd9190b297cfc63acd4a8059d74a3ee8a492bf2888f11dbaba03b194b83ac285609d522b3cd359b62e273a257bf3a4e829af7e9d8ab592
-  data.tar.gz: 8f0cfef74e8bc86cdffb916f5bf7af964578dae487288d3b46da2b91dff1331767d9a045a1157baad4476b64c9981a40258b7b2c15eb53561da4db95d33f3152
+  metadata.gz: e21f8d1f60a1cbedec438c055b9522a27714dd1bb874130b89d182fe9b62ea15fc5930f576b46b2df84ac79628b662ba14fcf0587ef571cf9766eda9caa068b0
+  data.tar.gz: 021bb8b7babf193b14a9baada9ced767fcacdc8b09d1990c0453dcc384b62aaea8f40366db51037e8ce09e216fadd637473cc0372e9161975f90ac551a3365b2

data/.ruby-version

@@ -0,0 +1 @@
+3.4.7

data/E2E_TESTING.md

@@ -0,0 +1,256 @@
+# E2E Testing Guide for Ponkotsu Markdown Editor
+
+このドキュメントでは、ponkotsu-md-editorのEnd-to-End（E2E）テストの実行方法について説明します。
+
+## 概要
+
+E2Eテストは、実際のブラウザ環境でMarkdownエディタの機能を検証します。以下のブラウザでテストを実行できます：
+
+- Google Chrome (Headless)
+- Mozilla Firefox (Headless)
+
+## 前提条件
+
+### 必要なソフトウェア
+
+1. **Ruby** (>= 3.4.7)
+2. **Google Chrome** (最新版)
+3. **Mozilla Firefox** (最新版)
+4. **ChromeDriver** (webdrivers gemが自動的に管理)
+5. **GeckoDriver** (webdrivers gemが自動的に管理)
+
+### Gemのインストール
+
+```bash
+bundle install
+```
+
+必要なgemは以下の通りです：
+- `rspec`: テストフレームワーク
+- `capybara`: ブラウザ自動化ツール
+- `selenium-webdriver`: WebDriverプロトコルの実装
+- `webdrivers`: ブラウザドライバーの自動管理
+
+## テストファイルの構成
+
+```
+spec/
+├── spec_helper.rb              # RSpecとCapybaraの設定
+├── support/
+│   └── e2e_helpers.rb         # E2Eテスト用ヘルパーメソッド
+└── features/
+    ├── markdown_editor_e2e_spec.rb  # 包括的なE2Eテスト
+    └── bold_functionality_spec.rb   # Bold機能の詳細テスト
+```
+
+## テストの実行方法
+
+### すべてのテストを実行
+
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb
+```
+
+### 特定のブラウザでのみ実行
+
+**Chromeのみ:**
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb -e "Testing with Chrome"
+```
+
+**Firefoxのみ:**
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb -e "Testing with Firefox"
+```
+
+### 特定のテストカテゴリを実行
+
+**基本操作のみ:**
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb -e "Basic operations"
+```
+
+**装飾ボタンのみ:**
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb -e "Formatting buttons"
+```
+
+**プレビュー機能のみ:**
+```bash
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb -e "Preview functionality"
+```
+
+### ヘッドレスモードを無効にしてテストを実行
+
+ブラウザの動作を視覚的に確認したい場合は、spec_helper.rbを編集してヘッドレスオプションを削除します：
+
+```ruby
+# spec/spec_helper.rbの該当箇所をコメントアウト
+# options.add_argument("--headless")
+```
+
+## テスト項目
+
+### 1. 基本操作テスト
+
+- **テキスト挿入**
+  - 英数字のテキスト挿入
+  - 日本語テキストの挿入
+  - 改行の保持
+  - 複数の連続した改行の挿入
+
+- **テキスト削除**
+  - 選択範囲の削除
+  - コンテンツ全体のクリア
+
+- **カーソル位置**
+  - テキスト挿入後のカーソル位置維持
+
+### 2. 装飾ボタン機能テスト
+
+各Markdown装飾機能が正しく動作することを確認：
+
+- **Bold** (`**text**`)
+- **Italic** (`*text*`)
+- **Strikethrough** (`~~text~~`)
+- **Code** (`` `code` `` or ` ```code block``` `)
+- **Headings** (`# H1`, `## H2`, `### H3`, etc.)
+- **Lists**
+  - Unordered list (`- item`)
+  - Ordered list (`1. item`)
+  - Checkbox list (`- [ ] task`, `- [x] done`)
+- **Blockquote** (`> quote`)
+- **Link** (`[text](url)`)
+- **Image** (`![alt](url)`)
+- **Table** (マークダウンテーブル構文)
+- **Horizontal Rule** (`---`)
+
+### 3. 複数の装飾操作テスト
+
+- 異なるテキスト範囲への複数の装飾適用
+- ネストされた装飾の処理
+
+### 4. プレビュー機能テスト
+
+- プレビューの表示/非表示切り替え
+- MarkdownからHTMLへの変換
+
+### 5. エッジケースとエラーハンドリング
+
+- 空のエディタでの操作
+- 非常に長いテキストの処理
+- 特殊文字の処理
+- Unicode文字（絵文字、多言語）の処理
+
+## テストのデバッグ
+
+### ログの有効化
+
+```ruby
+# spec/spec_helper.rbに追加
+RSpec.configure do |config|
+  config.before(:each, type: :feature) do
+    page.driver.browser.manage.logs.get(:browser).each do |log|
+      puts log.message
+    end
+  end
+end
+```
+
+### スクリーンショットの取得
+
+テスト失敗時にスクリーンショットを保存：
+
+```ruby
+# テストケース内で
+save_screenshot('debug_screenshot.png')
+```
+
+### ブラウザコンソールログの確認
+
+```ruby
+page.driver.browser.manage.logs.get(:browser).each do |log|
+  puts "[#{log.level}] #{log.message}"
+end
+```
+
+## トラブルシューティング
+
+### ChromeDriverのバージョンエラー
+
+```bash
+# webdriversキャッシュをクリア
+rm -rf ~/.webdrivers
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb
+```
+
+### GeckoDriverのエラー
+
+Firefoxが最新版であることを確認してください：
+
+```bash
+# macOS
+brew upgrade firefox
+```
+
+### タイムアウトエラー
+
+Capybaraのタイムアウト設定を増やす：
+
+```ruby
+# spec/spec_helper.rb
+Capybara.configure do |config|
+  config.default_max_wait_time = 20  # デフォルトは10秒
+end
+```
+
+## CI/CD環境での実行
+
+### GitHub Actions設定例
+
+```yaml
+name: E2E Tests
+
+on: [push, pull_request]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Set up Ruby
+      uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: 3.4.7
+        bundler-cache: true
+
+    - name: Install Chrome
+      run: |
+        wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+        sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+        sudo apt-get update
+        sudo apt-get install -y google-chrome-stable
+
+    - name: Install Firefox
+      run: sudo apt-get install -y firefox
+
+    - name: Run E2E tests
+      run: bundle exec rspec spec/features/markdown_editor_e2e_spec.rb
+```
+
+## ベストプラクティス
+
+1. **テストの独立性**: 各テストは独立して実行可能にする
+2. **適切な待機時間**: `sleep`の代わりにCapybaraの待機メソッドを使用
+3. **クリーンアップ**: 各テスト後にエディタの状態をリセット
+4. **エラーメッセージ**: 失敗時に有用な情報を提供
+5. **並列実行**: テストを並列実行して時間を短縮（`parallel_tests` gemを使用）
+
+## 参考リンク
+
+- [Capybara Documentation](https://github.com/teamcapybara/capybara)
+- [Selenium WebDriver Documentation](https://www.selenium.dev/documentation/webdriver/)
+- [RSpec Documentation](https://rspec.info/)
+- [WebDrivers Gem](https://github.com/titusfortner/webdrivers)

data/README.md

@@ -105,9 +105,36 @@ params[:model][:content] # => Markdown text
 
 This gem mainly provides Rails view elements (helpers, partials, JS/CSS assets), so UI and behavior cannot be automatically tested with standard RSpec, etc.
 
+### E2Eテスト/E2E Testing
 
-- UIやエディタの動作確認には、手動テストを推奨します。
-  - For UI/editor behavior, manual testing is recommended.
+ChromeとFirefoxを使用したE2Eテストを用意しています。
+
+E2E tests using Chrome and Firefox are available.
+
+```bash
+# すべてのテストを実行/Run all tests
+bundle exec rspec spec/features/markdown_editor_e2e_spec.rb
+
+# 簡単にテストを実行/Run tests easily
+bin/run_e2e_tests
+
+# 特定のブラウザでテスト/Test with specific browser
+bin/run_e2e_tests --browser chrome
+bin/run_e2e_tests --browser firefox
+
+# 特定のカテゴリをテスト/Test specific category
+bin/run_e2e_tests --category basic
+bin/run_e2e_tests --category formatting
+```
+
+詳細は [E2E_TESTING.md](E2E_TESTING.md) を参照してください。
+
+See [E2E_TESTING.md](E2E_TESTING.md) for more details.
+
+### 手動テスト/Manual Testing
+
+- UIやエディタの動作確認には、手動テストも推奨します。
+  - Manual testing is also recommended for UI/editor behavior verification.
 
 ## コントリビュート/Contributing
 

data/app/assets/javascripts/markdown_editor.js

@@ -5,6 +5,59 @@
     let _scanOffsetCache = new Map();
 
     const analyzeHtmlCache = new Map();
+    const MAX_CACHE_SIZE = 500;
+
+    // Undo/Redo stack management
+    class UndoRedoManager {
+        constructor(maxStackSize = 100) {
+            this.undoStack = [];
+            this.redoStack = [];
+            this.maxStackSize = maxStackSize;
+            this.isUndoRedoAction = false;
+        }
+
+        pushState(state) {
+            if (this.isUndoRedoAction) return;
+
+            this.undoStack.push(state);
+            if (this.undoStack.length > this.maxStackSize) {
+                this.undoStack.shift();
+            }
+            // Clear redo stack when new state is pushed
+            this.redoStack = [];
+        }
+
+        undo() {
+            if (this.undoStack.length === 0) return null;
+
+            const currentState = this.undoStack.pop();
+            this.redoStack.push(currentState);
+
+            return this.undoStack.length > 0 ? this.undoStack[this.undoStack.length - 1] : null;
+        }
+
+        redo() {
+            if (this.redoStack.length === 0) return null;
+
+            const state = this.redoStack.pop();
+            this.undoStack.push(state);
+
+            return state;
+        }
+
+        canUndo() {
+            return this.undoStack.length > 1;
+        }
+
+        canRedo() {
+            return this.redoStack.length > 0;
+        }
+
+        clear() {
+            this.undoStack = [];
+            this.redoStack = [];
+        }
+    }
 
     // Debounce function for delayed execution
     function debounce(func, wait) {
@@ -142,6 +195,80 @@
                 // 初期化時に同期
                 syncToHidden();
 
+                // inputイベントで同期
+                textarea.addEventListener('input', syncToHidden);
+
+                // Undo/Redo manager initialization
+                const undoRedoManager = new UndoRedoManager();
+
+                // Save editor state
+                function saveEditorState() {
+                    const state = {
+                        html: textarea.innerHTML,
+                        text: textarea.innerText,
+                        timestamp: Date.now()
+                    };
+                    undoRedoManager.pushState(state);
+                }
+
+                // Restore editor state
+                function restoreEditorState(state) {
+                    if (!state) return;
+
+                    undoRedoManager.isUndoRedoAction = true;
+                    textarea.innerHTML = state.html;
+                    syncToHidden();
+                    undoRedoManager.isUndoRedoAction = false;
+                }
+
+                // Perform undo
+                function performUndo() {
+                    const previousState = undoRedoManager.undo();
+                    restoreEditorState(previousState);
+                    return undoRedoManager.canUndo();
+                }
+
+                // Perform redo
+                function performRedo() {
+                    const nextState = undoRedoManager.redo();
+                    restoreEditorState(nextState);
+                    return undoRedoManager.canRedo();
+                }
+
+                // Save initial state
+                saveEditorState();
+
+                // Save state on input with debounce
+                const debouncedSaveState = debounce(saveEditorState, 500);
+                textarea.addEventListener('input', function(e) {
+                    if (!undoRedoManager.isUndoRedoAction) {
+                        debouncedSaveState();
+                    }
+                });
+
+                // Keyboard shortcuts for Undo/Redo
+                textarea.addEventListener('keydown', function(e) {
+                    // Ctrl+Z or Cmd+Z for Undo
+                    if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                        e.preventDefault();
+                        performUndo();
+                        return false;
+                    }
+
+                    // Ctrl+Y or Cmd+Shift+Z for Redo
+                    if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+                        e.preventDefault();
+                        performRedo();
+                        return false;
+                    }
+                });
+
+                // Make undo/redo functions globally accessible
+                window.editorUndo = performUndo;
+                window.editorRedo = performRedo;
+                window.canUndo = () => undoRedoManager.canUndo();
+                window.canRedo = () => undoRedoManager.canRedo();
+
                 // フォーム送信時の処理を非同期化
                 const form = textarea.closest('form');
                 if (form) {
@@ -482,7 +609,7 @@
         // 外部公開
         window.getContentEditableSelection = getContentEditableSelection;
 
-        // Set selection range at specified position (precision enhanced version)
+        // Set selection range at specified position (改行を含むinnerTextベースの位置)
         function setContentEditableSelection(element, start, end) {
             element.focus();
 
@@ -492,78 +619,181 @@
             start = Math.max(0, Math.min(start, fullText.length));
             end = Math.max(start, Math.min(end, fullText.length));
 
-            // Get text nodes
-            const walker = document.createTreeWalker(
-                element,
-                NodeFilter.SHOW_TEXT,
-                null,
-                false
-            );
+            // buildLinearTextMapを使用してDOM構造を解析（改行を含む）
+            function buildLinearTextMap(container) {
+                let textMap = [];
+                let currentPos = 0;
 
-            const textNodes = [];
-            let node;
-            while (node = walker.nextNode()) {
-                textNodes.push(node);
-            }
+                function processNode(node) {
+                    if (node.nodeType === Node.TEXT_NODE) {
+                        const text = node.textContent;
+                        textMap.push({
+                            node: node,
+                            type: 'text',
+                            start: currentPos,
+                            end: currentPos + text.length,
+                            text: text
+                        });
+                        currentPos += text.length;
+                    } else if (node.nodeType === Node.ELEMENT_NODE) {
+                        if (node.tagName === 'DIV') {
+                            if (node.children.length === 1 && node.children[0].tagName === 'BR') {
+                                textMap.push({
+                                    node: node,
+                                    type: 'div-br',
+                                    start: currentPos,
+                                    end: currentPos + 1,
+                                    text: '\n'
+                                });
+                                currentPos += 1;
+                                return;
+                            } else if (node.innerHTML === '<br>' || node.innerHTML === '<br/>' || node.innerHTML === '') {
+                                textMap.push({
+                                    node: node,
+                                    type: 'empty-div',
+                                    start: currentPos,
+                                    end: currentPos + 1,
+                                    text: '\n'
+                                });
+                                currentPos += 1;
+                                return;
+                            }
+                        } else if (node.tagName === 'BR') {
+                            textMap.push({
+                                node: node,
+                                type: 'br',
+                                start: currentPos,
+                                end: currentPos + 1,
+                                text: '\n'
+                            });
+                            currentPos += 1;
+                            return;
+                        }
 
-            // Fallback for missing text nodes
-            if (textNodes.length === 0) {
-                console.warn('No text nodes found, recreating content');
-                element.textContent = fullText;
+                        // 子ノードを処理
+                        for (let child of node.childNodes) {
+                            processNode(child);
+                        }
+                    }
+                }
 
-                // Get text nodes again
-                const newWalker = document.createTreeWalker(
-                    element,
-                    NodeFilter.SHOW_TEXT,
-                    null,
-                    false
-                );
-                while (node = newWalker.nextNode()) {
-                    textNodes.push(node);
+                for (let child of container.childNodes) {
+                    processNode(child);
                 }
+
+                return textMap;
             }
 
-            // Calculate cumulative positions of text nodes
-            let cumulativeOffset = 0;
+            const textMap = buildLinearTextMap(element);
+
+            // startとendの位置に対応するノードとオフセットを見つける
             let startNode = null, startOffset = 0;
             let endNode = null, endOffset = 0;
 
-            for (let i = 0; i < textNodes.length; i++) {
-                const textNode = textNodes[i];
-                const nodeLength = textNode.textContent.length;
-
-                // Find start position
-                if (!startNode && cumulativeOffset + nodeLength >= start) {
-                    startNode = textNode;
-                    startOffset = start - cumulativeOffset;
+            for (let item of textMap) {
+                if (!startNode && start >= item.start && start < item.end) {
+                    // Position is within this item
+                    if (item.type === 'text') {
+                        startNode = item.node;
+                        startOffset = start - item.start;
+                    } else {
+                        // Position is at the start of a line break element
+                        // Set cursor before this element (not after)
+                        const parent = item.node.parentNode;
+                        let childIndex = 0;
+                        for (let i = 0; i < parent.childNodes.length; i++) {
+                            if (parent.childNodes[i] === item.node) {
+                                childIndex = i; // Position before this node
+                                break;
+                            }
+                        }
+                        startNode = parent;
+                        startOffset = childIndex;
+                    }
+                } else if (!startNode && start === item.end) {
+                    // Position is at the end boundary of this item
+                    if (item.type === 'text') {
+                        // At end of text node
+                        startNode = item.node;
+                        startOffset = start - item.start;
+                    } else {
+                        // At end of line break element - set cursor after it
+                        const parent = item.node.parentNode;
+                        let childIndex = 0;
+                        for (let i = 0; i < parent.childNodes.length; i++) {
+                            if (parent.childNodes[i] === item.node) {
+                                childIndex = i + 1; // Position after this node
+                                break;
+                            }
+                        }
+                        startNode = parent;
+                        startOffset = childIndex;
+                    }
                 }
 
-                // Find end position
-                if (!endNode && cumulativeOffset + nodeLength >= end) {
-                    endNode = textNode;
-                    endOffset = end - cumulativeOffset;
-                    break;
+                if (!endNode && end >= item.start && end < item.end) {
+                    if (item.type === 'text') {
+                        endNode = item.node;
+                        endOffset = end - item.start;
+                    } else {
+                        // Position is at the start of a line break element
+                        const parent = item.node.parentNode;
+                        let childIndex = 0;
+                        for (let i = 0; i < parent.childNodes.length; i++) {
+                            if (parent.childNodes[i] === item.node) {
+                                childIndex = i; // Position before this node
+                                break;
+                            }
+                        }
+                        endNode = parent;
+                        endOffset = childIndex;
+                    }
+                } else if (!endNode && end === item.end) {
+                    if (item.type === 'text') {
+                        endNode = item.node;
+                        endOffset = end - item.start;
+                    } else {
+                        const parent = item.node.parentNode;
+                        let childIndex = 0;
+                        for (let i = 0; i < parent.childNodes.length; i++) {
+                            if (parent.childNodes[i] === item.node) {
+                                childIndex = i + 1;
+                                break;
+                            }
+                        }
+                        endNode = parent;
+                        endOffset = childIndex;
+                    }
                 }
 
-                cumulativeOffset += nodeLength;
+                if (startNode && endNode) break;
             }
 
-            // Enhanced fallback processing
-            if (!startNode && textNodes.length > 0) {
-                startNode = textNodes[textNodes.length - 1];
-                startOffset = Math.min(start, startNode.textContent.length);
-            }
-
-            if (!endNode && textNodes.length > 0) {
-                endNode = textNodes[textNodes.length - 1];
-                endOffset = Math.min(end, endNode.textContent.length);
+            // Fallback: 位置が見つからない場合、最後のテキストノードの末尾に設定
+            if (!startNode || !endNode) {
+                const textItems = textMap.filter(i => i.type === 'text');
+                if (textItems.length > 0) {
+                    const lastTextItem = textItems[textItems.length - 1];
+                    if (!startNode) {
+                        startNode = lastTextItem.node;
+                        startOffset = lastTextItem.node.textContent.length;
+                    }
+                    if (!endNode) {
+                        endNode = lastTextItem.node;
+                        endOffset = lastTextItem.node.textContent.length;
+                    }
+                }
             }
 
             if (startNode && endNode) {
                 try {
-                    // Safe boundary setting
-                    startOffset = Math.max(0, Math.min(startOffset, startNode.textContent.length));
-                    endOffset = Math.max(0, Math.min(endOffset, endNode.textContent.length));
+                    // Only clamp offset for text nodes, not element nodes
+                    if (startNode.nodeType === Node.TEXT_NODE) {
+                        startOffset = Math.max(0, Math.min(startOffset, startNode.textContent.length));
+                    }
+                    if (endNode.nodeType === Node.TEXT_NODE) {
+                        endOffset = Math.max(0, Math.min(endOffset, endNode.textContent.length));
+                    }
 
                     const range = document.createRange();
                     range.setStart(startNode, startOffset);
@@ -575,7 +805,6 @@
 
                 } catch (e) {
                     console.error('Selection setting failed:', e);
-                    // Final fallback
                     try {
                         const range = document.createRange();
                         range.selectNodeContents(element);
@@ -730,44 +959,97 @@
                 }
             }
 
+            // ノードがtextMapにない場合（親コンテナなど）、子ノードから計算
+            if (node === container && node.nodeType === Node.ELEMENT_NODE) {
+                let calculatedOffset = 0;
+                for (let i = 0; i < offset && i < node.childNodes.length; i++) {
+                    const child = node.childNodes[i];
+                    if (child.nodeType === Node.TEXT_NODE) {
+                        calculatedOffset += child.textContent.length;
+                    } else if (child.nodeType === Node.ELEMENT_NODE) {
+                        // Check if this child is in the textMap
+                        const childItem = textMap.find(item => item.node === child);
+                        if (childItem) {
+                            calculatedOffset += (childItem.end - childItem.start);
+                        }
+                    }
+                }
+                return calculatedOffset;
+            }
+
             return 0;
         }
 
         function selectLineNumberAndCharIndex(beginEndLenStrings, beginCharIndex, endCharIndex) {
             let retBeginLine = 0, retBeginCharIndex = 0;
             let retEndLine = 0, retEndCharIndex = 0;
-            let emptyLineCount = 0;
 
+            // Find line for beginCharIndex - handle boundary ambiguity by preferring non-empty lines
+            let beginMatches = [];
             for (let i = 0; i < beginEndLenStrings.length; i++) {
                 const line = beginEndLenStrings[i];
-
-                if (line.str === "⹉") {
-                    emptyLineCount++;
+                if (beginCharIndex >= line.begin && beginCharIndex <= line.end) {
+                    beginMatches.push({
+                        line: i,
+                        char: beginCharIndex - line.begin,
+                        isEmpty: line.str === "⹉",
+                        isAtBoundary: beginCharIndex === line.begin || beginCharIndex === line.end
+                    });
                 }
+            }
 
-                if (beginCharIndex >= line.begin && beginCharIndex <= line.end) {
-                    retBeginLine = i;
-                    retBeginCharIndex = beginCharIndex - line.begin + emptyLineCount;
-                    break;
+            console.log('selectLineNumberAndCharIndex DEBUG:');
+            console.log('  beginCharIndex:', beginCharIndex);
+            console.log('  beginMatches:', JSON.stringify(beginMatches, null, 2));
+
+            // Save to debug info for testing
+            if (typeof window !== 'undefined' && window._debugInfo) {
+                window._debugInfo.selectDebug = {
+                    beginCharIndex: beginCharIndex,
+                    beginMatches: beginMatches
+                };
+            }
+
+            // If multiple matches, prefer non-empty lines
+            if (beginMatches.length > 1) {
+                const nonEmptyMatches = beginMatches.filter(m => !m.isEmpty);
+                if (nonEmptyMatches.length > 0) {
+                    beginMatches = nonEmptyMatches;
                 }
             }
 
-            emptyLineCount = 0;
+            if (beginMatches.length > 0) {
+                retBeginLine = beginMatches[0].line;
+                retBeginCharIndex = beginMatches[0].char;
+            }
 
+            // Find line for endCharIndex - handle boundary ambiguity by preferring non-empty lines
+            let endMatches = [];
             for (let i = 0; i < beginEndLenStrings.length; i++) {
                 const line = beginEndLenStrings[i];
-
-                if (line.str === "⹉") {
-                    emptyLineCount++;
+                if (endCharIndex >= line.begin && endCharIndex <= line.end) {
+                    endMatches.push({
+                        line: i,
+                        char: endCharIndex - line.begin,
+                        isEmpty: line.str === "⹉",
+                        isAtBoundary: endCharIndex === line.begin || endCharIndex === line.end
+                    });
                 }
+            }
 
-                if (endCharIndex >= line.begin && endCharIndex <= line.end) {
-                    retEndLine = i;
-                    retEndCharIndex = endCharIndex - line.begin + emptyLineCount;
-                    break;
+            // If multiple matches, prefer non-empty lines
+            if (endMatches.length > 1) {
+                const nonEmptyMatches = endMatches.filter(m => !m.isEmpty);
+                if (nonEmptyMatches.length > 0) {
+                    endMatches = nonEmptyMatches;
                 }
             }
 
+            if (endMatches.length > 0) {
+                retEndLine = endMatches[0].line;
+                retEndCharIndex = endMatches[0].char;
+            }
+
             return { begin: { line: retBeginLine, char: retBeginCharIndex }, end: { line: retEndLine, char: retEndCharIndex } };
         }
 
@@ -776,9 +1058,15 @@
             for (let i = 0; i < beginEndLenStrings.length; i++) {
                 const line = beginEndLenStrings[i];
 
-                // 改行行は変更せずそのまま保持
+                // 空行（改行行）の処理
                 if (line.str === "⹉") {
-                    newLines.push(line.str);
+                    // カーソルが空行にある場合、before + after を挿入
+                    if (i === targetTextPosition.begin.line && i === targetTextPosition.end.line) {
+                        newLines.push(before + after);
+                    } else {
+                        // 空行は変更せずそのまま保持
+                        newLines.push(line.str);
+                    }
                     continue;
                 }
 
@@ -825,18 +1113,21 @@
         }
 
         function convertToInnerHtml(newLines) {
+            // ブラウザのネイティブ構造に合わせて、<br>タグを使用した平坦な構造を生成
             let html = "";
             for (let i = 0; i < newLines.length; i++) {
-                if (i === 0) {
-                    html += newLines[i].split("⹉").join("");
+                let insert = newLines[i];
+                if (i > 0) {
+                    // 行の区切りとして<br>を追加
+                    html += "<br>";
+                }
+                if (insert === "⹉") {
+                    // 空行の場合は何も追加しない（<br>タグのみで表現）
+                    // noop
                 } else {
-                    let insert = newLines[i];
-                    if (insert === "⹉") {
-                        insert = insert.split("⹉").join("<br>");
-                    } else {
-                        insert = insert.split("⹉").join("");
-                    }
-                    html += "<div>" + insert + "</div>";
+                    // 通常の行の場合はテキストを追加
+                    insert = insert.split("⹉").join("");
+                    html += insert;
                 }
             }
             return html;
@@ -908,8 +1199,6 @@
             }
         }
 
-        const MAX_CACHE_SIZE = 500;
-
         function analyzeHtml(target, isCountEmptyDiv = false) {
 
             const cacheKey = `${target}_${isCountEmptyDiv}`;
@@ -918,68 +1207,121 @@
                 return analyzeHtmlCache.get(cacheKey);
             }
 
+            // Helper function to strip HTML tags
+            function stripHtmlTags(html) {
+                return html.replace(/<[^>]*>/g, '');
+            }
+
             let lines = [];
-            let remain = target;
 
-            while (remain.length > 0) {
-                // <div><br></div> パターン（改行）- 常に維持
-                if (remain.startsWith("<div><br></div>")) {
-                    lines.push("⹉");
-                    remain = remain.substring(15);
-                    continue;
-                }
+            // Check if this is div-based structure or br-based structure
+            const hasDivStructure = target.startsWith("<div>") || target.startsWith("<div ");
 
-                // <div></div> パターン（空のdiv）- isCountEmptyDivで制御
-                if (remain.startsWith("<div></div>")) {
-                    if (isCountEmptyDiv) {
+            if (!hasDivStructure && target.includes("<br>")) {
+                // Br-based structure (flat): Split by <br> tags
+                const segments = target.split("<br>");
+                for (let segment of segments) {
+                    const textContent = stripHtmlTags(segment);
+                    if (textContent === "") {
                         lines.push("⹉");
+                    } else {
+                        lines.push(textContent);
                     }
-                    remain = remain.substring(11);
-                    continue;
                 }
+            } else {
+                // Div-based structure: Parse divs
+                let remain = target;
 
-                // <div>内容</div> パターン
-                const divMatch = remain.match(/^<div>([^<]*)<\/div>/);
-                if (divMatch) {
-                    lines.push(divMatch[1]);
-                    remain = remain.substring(divMatch[0].length);
-                    continue;
-                }
+                while (remain.length > 0) {
+                    // <div><br></div> パターン（改行）- 常に維持
+                    if (remain.startsWith("<div><br></div>")) {
+                        lines.push("⹉");
+                        remain = remain.substring(15);
+                        continue;
+                    }
 
-                // <br> パターン（単体の改行）
-                if (remain.startsWith("<br>")) {
-                    lines.push("⹉");
-                    remain = remain.substring(4);
-                    continue;
-                }
+                    // <div></div> パターン（空のdiv）- isCountEmptyDivで制御
+                    if (remain.startsWith("<div></div>")) {
+                        if (isCountEmptyDiv) {
+                            lines.push("⹉");
+                        }
+                        remain = remain.substring(11);
+                        continue;
+                    }
 
-                // <div> の開始を探す
-                const divIndex = remain.indexOf("<div>");
-                if (divIndex > 0) {
-                    lines.push(remain.substring(0, divIndex));
-                    remain = remain.substring(divIndex);
-                    continue;
-                }
+                    // <div>内容</div> パターン（ネストされたタグも考慮）
+                    if (remain.startsWith("<div>")) {
+                        // Find the matching </div> by counting depth
+                        let depth = 0;
+                        let i = 0;
+                        let foundMatch = false;
+
+                        while (i < remain.length) {
+                            if (remain.substring(i, i + 5) === "<div>") {
+                                depth++;
+                                i += 5;
+                            } else if (remain.substring(i, i + 6) === "</div>") {
+                                depth--;
+                                if (depth === 0) {
+                                    // Found the matching closing tag
+                                    const content = remain.substring(5, i); // Content between <div> and </div>
+                                    // Strip all HTML tags from content to get text only
+                                    const textContent = stripHtmlTags(content);
+                                    lines.push(textContent);
+                                    remain = remain.substring(i + 6);
+                                    foundMatch = true;
+                                    break;
+                                }
+                                i += 6;
+                            } else {
+                                i++;
+                            }
+                        }
 
-                // その他のタグまたは残りのテキスト
-                const nextTagIndex = remain.indexOf("<");
-                if (nextTagIndex === -1) {
-                    if (remain.trim()) {
-                        lines.push(remain);
+                        if (foundMatch) {
+                            continue;
+                        }
                     }
-                    break;
-                }
 
-                if (nextTagIndex > 0) {
-                    lines.push(remain.substring(0, nextTagIndex));
-                    remain = remain.substring(nextTagIndex);
-                } else {
-                    const tagEnd = remain.indexOf(">");
-                    if (tagEnd !== -1) {
-                        remain = remain.substring(tagEnd + 1);
-                    } else {
+                    // <div> の開始を探す
+                    const divIndex = remain.indexOf("<div>");
+                    if (divIndex > 0) {
+                        // Strip HTML tags from the text before <div>
+                        const textContent = stripHtmlTags(remain.substring(0, divIndex));
+                        if (textContent) {
+                            lines.push(textContent);
+                        }
+                        remain = remain.substring(divIndex);
+                        continue;
+                    }
+
+                    // その他のタグまたは残りのテキスト
+                    const nextTagIndex = remain.indexOf("<");
+                    if (nextTagIndex === -1) {
+                        // No more tags, strip any remaining HTML and add as text
+                        const textContent = stripHtmlTags(remain);
+                        if (textContent.trim()) {
+                            lines.push(textContent);
+                        }
                         break;
                     }
+
+                    if (nextTagIndex > 0) {
+                        // Text before next tag
+                        const textContent = stripHtmlTags(remain.substring(0, nextTagIndex));
+                        if (textContent) {
+                            lines.push(textContent);
+                        }
+                        remain = remain.substring(nextTagIndex);
+                    } else {
+                        // Skip the tag
+                        const tagEnd = remain.indexOf(">");
+                        if (tagEnd !== -1) {
+                            remain = remain.substring(tagEnd + 1);
+                        } else {
+                            break;
+                        }
+                    }
                 }
             }
 
@@ -1010,8 +1352,14 @@
                 const isContentEditable = textarea.contentEditable === 'true' ||
                     textarea.getAttribute('contenteditable') === 'true';
 
+                console.log('=== HTML Debug ===');
+                console.log('textarea.innerHTML:', textarea.innerHTML);
+
                 let lines = analyzeHtml(textarea.innerHTML.replace('\n    \n  ', ''));
 
+                console.log('lines from analyzeHtml:', JSON.stringify(lines, null, 2));
+                console.log('==================');
+
                 // === 修正部分：DOM構造に基づいたテキスト表現を構築 ===
                 let domBasedText = '';
                 for (let i = 0; i < lines.length; i++) {
@@ -1023,6 +1371,9 @@
                 }
 
                 // beginEndLenStringsをDOM構造ベースで構築
+                // br-based構造かdiv-based構造かを判定
+                const isBrBased = !textarea.innerHTML.startsWith("<div>") && !textarea.innerHTML.startsWith("<div ") && textarea.innerHTML.includes("<br>");
+
                 let offset = 0;
                 let beginEndLenStrings = [];
                 for (let i = 0; i < lines.length; i++) {
@@ -1030,7 +1381,9 @@
                     let actualLength;
 
                     if (line === "⹉") {
-                        actualLength = 1; // 改行として1文字
+                        // br-basedの場合、空行は長さ0（<br>が改行を表現している）
+                        // div-basedの場合は長さ1
+                        actualLength = isBrBased ? 0 : 1;
                     } else {
                         actualLength = line.length;
                     }
@@ -1042,6 +1395,11 @@
                         str: line,
                     });
                     offset += actualLength;
+
+                    // br-based構造の場合、各行（最後以外）の後に<br>セパレータがあるので+1
+                    if (isBrBased && i < lines.length - 1) {
+                        offset += 1; // <br>セパレータ分
+                    }
                 }
                 // ===================================================
 
@@ -1063,10 +1421,9 @@
                 let selectLineMode = false;
                 let selectedLinePos;
 
-                if (!selection.rangeCount || selection.isCollapsed) {
-                    // 行選択モード
-                    selectLineMode = true;
-                    selectedLinePos = getCurrentLineIndex(beginEndLenStrings);
+                if (!selection.rangeCount) {
+                    console.warn('No selection range');
+                    return;
                 }
 
                 const range = selection.getRangeAt(0);
@@ -1079,11 +1436,19 @@
                 const startOffset = getOffsetInContainer(textarea, range.startContainer, range.startOffset);
                 const endOffset = getOffsetInContainer(textarea, range.endContainer, range.endOffset);
 
-                // === デバッグ出力（削除可能）===
-                // console.log('DOM-based text:', JSON.stringify(domBasedText));
-                // console.log('beginEndLenStrings:', beginEndLenStrings);
-                // console.log('Selection offsets:', startOffset, endOffset);
-                // console.log('Selected text should be:', JSON.stringify(domBasedText.substring(startOffset, endOffset)));
+                // === デバッグ出力 ===
+                console.log('=== insertMarkdown Debug ===');
+                console.log('DOM-based text:', JSON.stringify(domBasedText));
+                console.log('Selection offsets - start:', startOffset, 'end:', endOffset);
+                console.log('Selection containers - start:', range.startContainer, 'end:', range.endContainer);
+                console.log('Inserted text will be:', before + after);
+
+                // Save debug info to DOM for testing
+                window._debugInfo = {
+                    domBasedText: domBasedText,
+                    startOffset: startOffset,
+                    endOffset: endOffset
+                };
                 // =============================
 
                 const startPos = getLineAndCharIndex(textarea, startOffset);
@@ -1091,65 +1456,54 @@
 
                 const selectedTextContent = selection.toString();
 
+                console.log('=== Line Position Debug ===');
+                console.log('beginEndLenStrings:', JSON.stringify(beginEndLenStrings, null, 2));
+                console.log('startOffset:', startOffset, 'endOffset:', endOffset);
+                console.log('selectedTextContent:', JSON.stringify(selectedTextContent));
+                console.log('selectLineMode:', selectLineMode);
+
                 const targetTextPosition = selectLineNumberAndCharIndex(beginEndLenStrings, startOffset, endOffset);
 
+                console.log('targetTextPosition:', JSON.stringify(targetTextPosition, null, 2));
+
                 const newLines = !selectLineMode
                     ? replaceLineNumberAndCharIndex(beginEndLenStrings, targetTextPosition, before, after)
                     : replaceLine(beginEndLenStrings, selectedLinePos.line, before, after);
 
+                console.log('newLines:', JSON.stringify(newLines, null, 2));
+                console.log('newLines.length:', newLines.length);
+                console.log('newLines breakdown:');
+                for (let i = 0; i < newLines.length; i++) {
+                    console.log(`  Line ${i}: ${JSON.stringify(newLines[i])}`);
+                }
+                console.log('==========================');
+
+                // Save more debug info
+                window._debugInfo.beginEndLenStrings = beginEndLenStrings;
+                window._debugInfo.targetTextPosition = targetTextPosition;
+                window._debugInfo.newLines = newLines;
+
                 const newFullHTML = convertToInnerHtml(newLines);
 
                 if (isContentEditable) {
                     textarea.innerHTML = newFullHTML;
                     textarea.focus();
 
-                    // 挿入されたテキストノードを直接探してカーソルを設定
-                    const insertedText = selectedTextContent.length > 0 ?
-                        (before + selectedTextContent + after) :
-                        (before + after);
-
-                    // 新しく挿入されたテキストの終端を探す
-                    const walker = document.createTreeWalker(
-                        textarea,
-                        NodeFilter.SHOW_TEXT,
-                        null,
-                        false
-                    );
-
-                    let foundNode = null;
-                    let foundOffset = 0;
-                    let node;
-
-                    while (node = walker.nextNode()) {
-                        if (node.textContent.includes(insertedText)) {
-                            // 挿入されたテキストを含むノードを発見
-                            const textIndex = node.textContent.indexOf(insertedText);
-                            if (textIndex !== -1) {
-                                foundNode = node;
-                                foundOffset = textIndex + insertedText.length;
-                                break;
-                            }
-                        }
-                    }
+                    // カーソル位置を計算（空文字選択時はbeforeの直後、テキスト選択時は挿入テキストの最後）
+                    const cursorOffsetInInsertedText = selectedTextContent.length > 0 ?
+                        (before.length + selectedTextContent.length + after.length) :
+                        before.length;
 
-                    if (foundNode) {
-                        // 見つかったテキストノード内にカーソルを設定
-                        const range = document.createRange();
-                        range.setStart(foundNode, Math.min(foundOffset, foundNode.textContent.length));
-                        range.collapse(true);
+                    const targetPosition = startOffset + cursorOffsetInInsertedText;
 
-                        const selection = window.getSelection();
-                        selection.removeAllRanges();
-                        selection.addRange(range);
-                    } else {
-                        // フォールバック: 従来の方法
-                        const newDomText = buildDomBasedText(textarea);
-                        const targetPosition = Math.min(
-                            startOffset + insertedText.length,
-                            newDomText.length
-                        );
-                        setContentEditableSelection(textarea, targetPosition, targetPosition);
-                    }
+                    console.log('=== Cursor Position Debug ===');
+                    console.log('startOffset:', startOffset);
+                    console.log('cursorOffsetInInsertedText:', cursorOffsetInInsertedText);
+                    console.log('targetPosition:', targetPosition);
+                    console.log('============================');
+
+                    // setContentEditableSelection関数を使用（innerTextベースで改行を正しく扱う）
+                    setContentEditableSelection(textarea, targetPosition, targetPosition);
                 }
 
                 // Fire input event
@@ -1160,6 +1514,10 @@
             }
         };
 
+        // Expose setContentEditableSelection for testing
+        window.setContentEditableSelection = setContentEditableSelection;
+        window._debugGetOffsetInContainer = getOffsetInContainer;
+
         function buildDomBasedText(element) {
             const lines = analyzeHtml(element.innerHTML);
             let domText = '';

data/lib/ponkotsu/md/editor/helpers.rb

@@ -28,7 +28,8 @@ module PonkotsuMdEditor
       attribute = attribute[:attribute] if attribute.is_a?(Hash)
       content = content[:attribute] if content.is_a?(Hash)
       options = options[:options] if options.is_a?(Hash)
-      render "ponkotsu_md_editor/editor", locals: { attribute: attribute, content: content, form: form, options: options }
+      render "ponkotsu_md_editor/editor",
+             locals: { attribute: attribute, content: content, form: form, options: options }
     end
   end
 end

data/lib/ponkotsu/md/editor/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PonkotsuMdEditor
-  VERSION = "0.2.38"
+  VERSION = "0.3.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ponkotsu-md-editor
 version: !ruby/object:Gem::Version
-  version: 0.2.38
+  version: 0.3.1
 platform: ruby
 authors:
 - dhq_boiler
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 8.0.2
+        version: '8.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 8.0.2
+        version: '8.1'
 description: There is a bug in Chrome where entering large amounts of text into a
   textarea element causes significant slowness (https://issues.chromium.org/issues/341564372).
   This gem serves as a countermeasure for that issue.
@@ -32,7 +32,9 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".ruby-version"
 - CHANGELOG.md
+- E2E_TESTING.md
 - LICENSE.txt
 - README.md
 - Rakefile
@@ -64,7 +66,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.4.5
+      version: 3.0.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="