Fix firefox compability

This commit is contained in:
kwaroran
2024-09-24 01:38:25 +09:00
parent a5ef8ecac3
commit 8fd3681de0

View File

@@ -71,7 +71,7 @@
<div <div
class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto px-4 py-2 break-words whitespace-pre-wrap" class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto px-4 py-2 break-words whitespace-pre-wrap"
contenteditable="true" contenteditable="true"
bind:innerText={value} bind:textContent={value}
on:keydown={(e) => { on:keydown={(e) => {
handleKeyDown(e) handleKeyDown(e)
onInput() onInput()
@@ -83,7 +83,7 @@
e.preventDefault() e.preventDefault()
const text = e.clipboardData.getData('text/plain') const text = e.clipboardData.getData('text/plain')
if(text){ if(text){
insertContent(text, 'paste') insertTextAtSelection(text)
} }
}} }}
bind:this={inputDom} bind:this={inputDom}
@@ -93,7 +93,7 @@
<div <div
class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto px-4 py-2 break-words whitespace-pre-wrap" class="w-full h-full bg-transparent focus-within:outline-none resize-none absolute top-0 left-0 z-10 overflow-y-auto px-4 py-2 break-words whitespace-pre-wrap"
contenteditable="plaintext-only" contenteditable="plaintext-only"
bind:innerText={value} bind:textContent={value}
on:keydown={(e) => { on:keydown={(e) => {
handleKeyDown(e) handleKeyDown(e)
onInput() onInput()
@@ -265,10 +265,30 @@
if(e.key === 'Enter' && isFirefox){ if(e.key === 'Enter' && isFirefox){
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
insertContent('\n') insertTextAtSelection('\n')
} }
} }
function insertTextAtSelection(txt:string) {
let div = inputDom;
let sel = window.getSelection();
let text = div.textContent;
let before = Math.min(sel.focusOffset, sel.anchorOffset);
let after = Math.max(sel.focusOffset, sel.anchorOffset);
let afterStr = text.substring(after);
if (afterStr == "") afterStr = "\n";
div.textContent = text.substring(0, before) + txt + afterStr;
sel.removeAllRanges();
let range = document.createRange();
range.setStart(div.childNodes[0], before + txt.length);
range.setEnd(div.childNodes[0], before + txt.length);
sel.addRange(range);
try {
inputDom.dispatchEvent(new Event('input'))
inputDom.dispatchEvent(new Event('change'))
} catch (error) {}
}
$: optiValue = value $: optiValue = value
$: highlightChange(value, highlightId) $: highlightChange(value, highlightId)