ponkotsu-md-editor 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbb4edacc4c389fd1e7b470381b07861c0534c41b48248cfd41bcb295d3a032d
-  data.tar.gz: deff4f5d9c78cf564d348cf4efad276ac60867271ebd65ec4311e5bc0bf20915
+  metadata.gz: 29d6bd2ad67f2660ed6e4f5f06a74c651e83df68d222ffcf46ac1d1e494bd24f
+  data.tar.gz: e32efc8ec6b6aa356c22bd947fcdee62eaf5ae59f3d1ce044aeae16915d69053
 SHA512:
-  metadata.gz: aeb2396debdb11aafc9bc81efcaf672f6d31c48768a446a8c4120466928c71ebc3650c3ab1394ef581474f9053d55214e1ef54bfe740a257e10e0bc6f438b353
-  data.tar.gz: d8fdfde9fb05016c27214e22d415cac9dbba2ca57e0655bcfa2f7bb0e37da8165f439ccf50ae4b475d8e161cb3799e445b2f88cbb5c84cbf2bf1b0692a67f4f8
+  metadata.gz: fc5903d157a698f86923edaa038ea904ac8f0cf0043a746fb7e57c1eb5653a309c57f855cd647705035ae4b28a4802d8979918560e0a047ebbcbd6a23c99fb6d
+  data.tar.gz: 2c4b514c879389f11f958ca95b8221c8bc2b5befc723b873798500bf79efcad1ed25a7dc0a7d9cc859c39ab224f4250df342a40b85e84f3bbc6880562b7ed715

data/app/assets/javascripts/markdown_editor.js

@@ -30,7 +30,7 @@
 
         let isPreviewMode = false;
 
-        // contenteditable要素用の選択範囲取得・設定機能
+        // contenteditable要素用の選択範囲取得・設定機能（改行対応版）
         function getContentEditableSelection(element) {
             const selection = window.getSelection();
             if (selection.rangeCount === 0) {
@@ -39,28 +39,52 @@
 
             const range = selection.getRangeAt(0);
 
-            // 要素内のテキスト全体を取得
-            const fullText = element.innerText || element.textContent || '';
+            // テキストノードを順次処理して正確な位置を計算
+            const walker = document.createTreeWalker(
+                element,
+                NodeFilter.SHOW_TEXT,
+                null,
+                false
+            );
+
+            let currentOffset = 0;
+            let startOffset = 0;
+            let endOffset = 0;
+            let foundStart = false;
+            let foundEnd = false;
+
+            let node;
+            while (node = walker.nextNode()) {
+                const nodeText = node.textContent;
+                const nodeLength = nodeText.length;
 
-            // 選択範囲の開始位置を計算
-            const preRange = document.createRange();
-            preRange.selectNodeContents(element);
-            preRange.setEnd(range.startContainer, range.startOffset);
-            const start = (preRange.toString()).length;
+                // 開始位置の検出
+                if (!foundStart && node === range.startContainer) {
+                    startOffset = currentOffset + range.startOffset;
+                    foundStart = true;
+                }
+
+                // 終了位置の検出
+                if (!foundEnd && node === range.endContainer) {
+                    endOffset = currentOffset + range.endOffset;
+                    foundEnd = true;
+                    break;
+                }
+
+                currentOffset += nodeLength;
+            }
 
-            // 選択範囲の終了位置を計算
+            // 選択されたテキストを取得
             const selectedText = range.toString();
-            const end = start + selectedText.length;
 
             return {
-                start: start,
-                end: end,
+                start: startOffset,
+                end: endOffset,
                 selectedText: selectedText
             };
         }
 
         function setContentEditableSelection(element, start, end) {
-            const textNodes = [];
             const walker = document.createTreeWalker(
                 element,
                 NodeFilter.SHOW_TEXT,
@@ -68,43 +92,79 @@
                 false
             );
 
-            let node;
-            while (node = walker.nextNode()) {
-                textNodes.push(node);
-            }
-
             let currentOffset = 0;
-            let startNode = null, startOffset = 0;
-            let endNode = null, endOffset = 0;
+            let startNode = null, startNodeOffset = 0;
+            let endNode = null, endNodeOffset = 0;
 
-            for (const textNode of textNodes) {
-                const nodeLength = textNode.textContent.length;
+            let node;
+            while (node = walker.nextNode()) {
+                const nodeText = node.textContent;
+                const nodeLength = nodeText.length;
 
+                // 開始位置の設定
                 if (startNode === null && currentOffset + nodeLength >= start) {
-                    startNode = textNode;
-                    startOffset = start - currentOffset;
+                    startNode = node;
+                    startNodeOffset = start - currentOffset;
                 }
 
+                // 終了位置の設定
                 if (endNode === null && currentOffset + nodeLength >= end) {
-                    endNode = textNode;
-                    endOffset = end - currentOffset;
+                    endNode = node;
+                    endNodeOffset = end - currentOffset;
                     break;
                 }
 
                 currentOffset += nodeLength;
             }
 
-            if (startNode && endNode) {
-                const range = document.createRange();
-                range.setStart(startNode, startOffset);
-                range.setEnd(endNode, endOffset);
+            // 範囲が見つからない場合の処理
+            if (!startNode || !endNode) {
+                // 要素の最後にカーソルを設定
+                const lastWalker = document.createTreeWalker(
+                    element,
+                    NodeFilter.SHOW_TEXT,
+                    null,
+                    false
+                );
+                let lastNode = null;
+                while (lastNode = lastWalker.nextNode()) {
+                    // 最後のテキストノードを取得
+                }
+                if (lastNode) {
+                    startNode = endNode = lastNode;
+                    startNodeOffset = endNodeOffset = lastNode.textContent.length;
+                }
+            }
 
-                const selection = window.getSelection();
-                selection.removeAllRanges();
-                selection.addRange(range);
+            if (startNode && endNode) {
+                try {
+                    const range = document.createRange();
+                    range.setStart(startNode, Math.min(startNodeOffset, startNode.textContent.length));
+                    range.setEnd(endNode, Math.min(endNodeOffset, endNode.textContent.length));
+
+                    const selection = window.getSelection();
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                } catch (e) {
+                    console.warn('Failed to set selection:', e);
+                    // フォールバック: 要素の最後にカーソルを設定
+                    element.focus();
+                }
             }
         }
 
+        // contenteditable要素用のテキスト取得機能（改行保持版）
+        function getContentEditableText(element) {
+            // innerTextを使用して改行を保持
+            return element.innerText || element.textContent || '';
+        }
+
+        // contenteditable要素用のテキスト設定機能（改行保持版）
+        function setContentEditableText(element, text) {
+            // innerTextを使用して改行を正確に設定
+            element.innerText = text;
+        }
+
         // Markdownテキスト挿入機能
         window.insertMarkdown = function(before, after) {
             after = after || '';

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

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ponkotsu-md-editor
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.1.15
 platform: ruby
 authors:
 - dhq_boiler