ponkotsu-md-editor 0.1.13 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad323ed8812d439732f1623eac62f59c34e461d872337209cc5690bfc4ddec33
-  data.tar.gz: d7a0d46aff9ca2811b04eaf6002d68b9d61598ca29be64398882f2c5e9a9ed93
+  metadata.gz: fbb4edacc4c389fd1e7b470381b07861c0534c41b48248cfd41bcb295d3a032d
+  data.tar.gz: deff4f5d9c78cf564d348cf4efad276ac60867271ebd65ec4311e5bc0bf20915
 SHA512:
-  metadata.gz: db0be49e3c8f4af5e164f4d3cba8718e5e93a193f9c9b3b2a5d50ba91d5ae250f8923194e1072e19406f1677b9b49436024a02ac6f511fefa9edc8b716ba8b58
-  data.tar.gz: b395cfc3cdd5f23e493f18f736b29e521d864220443f1cd079e2c295cf646a070015f41ae27fc9625928c96fc56511d1fcfbff2c77a76ff59ce19bb35cfe6e20
+  metadata.gz: aeb2396debdb11aafc9bc81efcaf672f6d31c48768a446a8c4120466928c71ebc3650c3ab1394ef581474f9053d55214e1ef54bfe740a257e10e0bc6f438b353
+  data.tar.gz: d8fdfde9fb05016c27214e22d415cac9dbba2ca57e0655bcfa2f7bb0e37da8165f439ccf50ae4b475d8e161cb3799e445b2f88cbb5c84cbf2bf1b0692a67f4f8

data/app/assets/javascripts/markdown_editor.js

@@ -30,6 +30,81 @@
 
         let isPreviewMode = false;
 
+        // contenteditable要素用の選択範囲取得・設定機能
+        function getContentEditableSelection(element) {
+            const selection = window.getSelection();
+            if (selection.rangeCount === 0) {
+                return { start: 0, end: 0, selectedText: '' };
+            }
+
+            const range = selection.getRangeAt(0);
+
+            // 要素内のテキスト全体を取得
+            const fullText = element.innerText || element.textContent || '';
+
+            // 選択範囲の開始位置を計算
+            const preRange = document.createRange();
+            preRange.selectNodeContents(element);
+            preRange.setEnd(range.startContainer, range.startOffset);
+            const start = (preRange.toString()).length;
+
+            // 選択範囲の終了位置を計算
+            const selectedText = range.toString();
+            const end = start + selectedText.length;
+
+            return {
+                start: start,
+                end: end,
+                selectedText: selectedText
+            };
+        }
+
+        function setContentEditableSelection(element, start, end) {
+            const textNodes = [];
+            const walker = document.createTreeWalker(
+                element,
+                NodeFilter.SHOW_TEXT,
+                null,
+                false
+            );
+
+            let node;
+            while (node = walker.nextNode()) {
+                textNodes.push(node);
+            }
+
+            let currentOffset = 0;
+            let startNode = null, startOffset = 0;
+            let endNode = null, endOffset = 0;
+
+            for (const textNode of textNodes) {
+                const nodeLength = textNode.textContent.length;
+
+                if (startNode === null && currentOffset + nodeLength >= start) {
+                    startNode = textNode;
+                    startOffset = start - currentOffset;
+                }
+
+                if (endNode === null && currentOffset + nodeLength >= end) {
+                    endNode = textNode;
+                    endOffset = end - currentOffset;
+                    break;
+                }
+
+                currentOffset += nodeLength;
+            }
+
+            if (startNode && endNode) {
+                const range = document.createRange();
+                range.setStart(startNode, startOffset);
+                range.setEnd(endNode, endOffset);
+
+                const selection = window.getSelection();
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+
         // Markdownテキスト挿入機能
         window.insertMarkdown = function(before, after) {
             after = after || '';
@@ -40,15 +115,40 @@
             }
 
             try {
-                const start = textarea.selectionStart || 0;
-                const end = textarea.selectionEnd || 0;
-                const selectedText = textarea.innerText.substring(start, end);
+                // contenteditable要素かどうかを判定
+                const isContentEditable = textarea.contentEditable === 'true' ||
+                                        textarea.getAttribute('contenteditable') === 'true';
+
+                let start, end, selectedText;
+
+                if (isContentEditable) {
+                    // contenteditable要素の場合
+                    const selection = getContentEditableSelection(textarea);
+                    start = selection.start;
+                    end = selection.end;
+                    selectedText = selection.selectedText;
+                } else {
+                    // 通常のtextarea要素の場合
+                    start = textarea.selectionStart || 0;
+                    end = textarea.selectionEnd || 0;
+                    selectedText = textarea.value.substring(start, end);
+                }
+
+                const fullText = isContentEditable ?
+                    (textarea.innerText || textarea.textContent || '') :
+                    textarea.value;
 
-                const beforeText = textarea.innerText.substring(0, start);
-                const afterText = textarea.innerText.substring(end);
+                const beforeText = fullText.substring(0, start);
+                const afterText = fullText.substring(end);
                 const newText = before + selectedText + after;
 
-                textarea.innerText = beforeText + newText + afterText;
+                const newFullText = beforeText + newText + afterText;
+
+                if (isContentEditable) {
+                    textarea.innerText = newFullText;
+                } else {
+                    textarea.value = newFullText;
+                }
 
                 // カーソル位置調整
                 const newCursorPos = selectedText.length > 0 ?
@@ -56,7 +156,10 @@
                     start + before.length;
 
                 textarea.focus();
-                if (textarea.setSelectionRange) {
+
+                if (isContentEditable) {
+                    setContentEditableSelection(textarea, newCursorPos, newCursorPos);
+                } else if (textarea.setSelectionRange) {
                     textarea.setSelectionRange(newCursorPos, newCursorPos);
                 }
 
@@ -70,7 +173,18 @@
 
         window.insertCode = function() {
             const textarea = document.getElementById('editor_content');
-            const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+
+            // contenteditable要素かどうかを判定
+            const isContentEditable = textarea.contentEditable === 'true' ||
+                                    textarea.getAttribute('contenteditable') === 'true';
+
+            let selectedText;
+            if (isContentEditable) {
+                const selection = getContentEditableSelection(textarea);
+                selectedText = selection.selectedText;
+            } else {
+                selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+            }
 
             if (selectedText.includes('\n')) {
                 // 改行が含まれている場合はコードブロック
@@ -93,7 +207,14 @@
 
                 if (isPreviewMode) {
                     // プレビューモードに切り替え
-                    const markdownText = textarea.value || '';
+                    // contenteditable要素かどうかを判定してテキストを取得
+                    const isContentEditable = textarea.contentEditable === 'true' ||
+                                            textarea.getAttribute('contenteditable') === 'true';
+
+                    const markdownText = isContentEditable ?
+                        (textarea.innerText || textarea.textContent || '') :
+                        (textarea.value || '');
+
                     const htmlContent = convertMarkdownToHtml(markdownText);
 
                     previewContainer.innerHTML = htmlContent;
@@ -676,25 +797,58 @@
         window.insertTextAtCursor = function(textarea, text) {
             if (!textarea || !text) return;
 
-            const start = textarea.selectionStart;
-            const end = textarea.selectionEnd;
-            const currentValue = textarea.value;
+            // contenteditable要素かどうかを判定
+            const isContentEditable = textarea.contentEditable === 'true' ||
+                                    textarea.getAttribute('contenteditable') === 'true';
+
+            if (isContentEditable) {
+                // contenteditable要素の場合
+                const selection = getContentEditableSelection(textarea);
+                const start = selection.start;
+                const end = selection.end;
+                const currentValue = textarea.innerText || textarea.textContent || '';
+
+                // 挿入位置の前後に改行を追加（必要に応じて）
+                let insertText = text;
+                if (start > 0 && currentValue[start - 1] !== '\n') {
+                    insertText = '\n' + insertText;
+                }
+                if (end < currentValue.length && currentValue[end] !== '\n') {
+                    insertText = insertText + '\n';
+                }
 
-            // 挿入位置の前後に改行を追加（必要に応じて）
-            let insertText = text;
-            if (start > 0 && currentValue[start - 1] !== '\n') {
-                insertText = '\n' + insertText;
-            }
-            if (end < currentValue.length && currentValue[end] !== '\n') {
-                insertText = insertText + '\n';
-            }
+                const newValue = currentValue.substring(0, start) + insertText + currentValue.substring(end);
+                textarea.innerText = newValue;
+                textarea.focus();
+
+                const newCursorPos = start + insertText.length;
+                setContentEditableSelection(textarea, newCursorPos, newCursorPos);
+
+                // 入力イベントを発火
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
 
-            textarea.value = currentValue.substring(0, start) + insertText + currentValue.substring(end);
-            textarea.focus();
-            textarea.selectionStart = textarea.selectionEnd = start + insertText.length;
+            } else {
+                // 通常のtextarea要素の場合
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const currentValue = textarea.value;
+
+                // 挿入位置の前後に改行を追加（必要に応じて）
+                let insertText = text;
+                if (start > 0 && currentValue[start - 1] !== '\n') {
+                    insertText = '\n' + insertText;
+                }
+                if (end < currentValue.length && currentValue[end] !== '\n') {
+                    insertText = insertText + '\n';
+                }
 
-            // Railsのフォームバリデーション用にchangeイベントを発火
-            textarea.dispatchEvent(new Event('change', { bubbles: true }));
+                textarea.value = currentValue.substring(0, start) + insertText + currentValue.substring(end);
+                textarea.focus();
+                textarea.selectionStart = textarea.selectionEnd = start + insertText.length;
+
+                // Railsのフォームバリデーション用にchangeイベントを発火
+                textarea.dispatchEvent(new Event('change', { bubbles: true }));
+            }
         }
 
         // 遅延実行のためのデバウンス関数

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

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

metadata

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