Revert textareainput

This commit is contained in:
kwaroran
2024-11-02 22:56:13 +09:00
parent b4d08b1f7d
commit e631b8fb51

View File

@@ -88,8 +88,6 @@
}} }}
bind:this={inputDom} bind:this={inputDom}
translate="no" translate="no"
role="textbox"
tabindex="0"
>{value ?? ''}</div> >{value ?? ''}</div>
{:else} {:else}
<div <div
@@ -105,8 +103,6 @@
}} }}
bind:this={inputDom} bind:this={inputDom}
translate="no" translate="no"
role="textbox"
tabindex="0"
>{value ?? ''}</div> >{value ?? ''}</div>
{/if} {/if}
<div class="hidden absolute z-100 bg-bgcolor border border-darkborderc p-2 flex-col" bind:this={autoCompleteDom}> <div class="hidden absolute z-100 bg-bgcolor border border-darkborderc p-2 flex-col" bind:this={autoCompleteDom}>
@@ -119,7 +115,7 @@
</div> </div>
<script lang="ts"> <script lang="ts">
import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize' import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
import { highlighter, getNewHighlightId, removeHighlight, AllCBS, decorators } from 'src/ts/gui/highlight' import { highlighter, getNewHighlightId, removeHighlight, AllCBS } from 'src/ts/gui/highlight'
import { isMobile } from 'src/ts/globalApi.svelte'; import { isMobile } from 'src/ts/globalApi.svelte';
import { isFirefox, sleep } from 'src/ts/util'; import { isFirefox, sleep } from 'src/ts/util';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
@@ -163,7 +159,7 @@
let autocompleteContents:string[] = $state([]) let autocompleteContents:string[] = $state([])
let inputDom: HTMLDivElement = $state() let inputDom: HTMLDivElement = $state()
const autoComplete = (type:'cbs'|'decorator'|'both' = 'both') => { const autoComplete = () => {
if(isMobile){ if(isMobile){
return return
} }
@@ -178,24 +174,14 @@
if(range){ if(range){
const qValue = (range.startContainer).textContent const qValue = (range.startContainer).textContent
const splited = qValue.substring(0, range.startOffset).split(type === 'decorator' ? '@@' : '{{') const splited = qValue.substring(0, range.startOffset).split('{{')
if(splited.length === 1){ if(splited.length === 1){
if(type === 'both'){
return autoComplete('decorator')
}
hideAutoComplete() hideAutoComplete()
return return
} }
const qText = splited.pop() const qText = splited.pop()
let filtered = (type === 'decorator' ? decorators : AllCBS).filter((cb) => cb.startsWith(qText)) let filtered = AllCBS.filter((cb) => cb.startsWith(qText))
if(type === 'decorator'){
filtered = filtered.map((cb) => '@' + cb)
}
if(filtered.length === 0){ if(filtered.length === 0){
if(type === 'both'){
return autoComplete('decorator')
}
hideAutoComplete() hideAutoComplete()
return return
} }
@@ -225,11 +211,8 @@
let contentStart = content.substring(0, range.startOffset) let contentStart = content.substring(0, range.startOffset)
let contentEnd = content.substring(range.startOffset) let contentEnd = content.substring(range.startOffset)
if(type === 'autoComplete'){ if(type === 'autoComplete'){
contentStart = contentStart.substring(0, contentStart.lastIndexOf(insertContent.startsWith('@') ? '@@' : '{{')) contentStart = contentStart.substring(0, contentStart.lastIndexOf('{{'))
if(insertContent.startsWith('@')){ if(insertContent.endsWith(':')){
insertContent = `@${insertContent}`
}
else if(insertContent.endsWith(':')){
insertContent = `{{${insertContent}:` insertContent = `{{${insertContent}:`
} }
else if(insertContent.startsWith('#')){ else if(insertContent.startsWith('#')){