blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-11-03 19:31:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: enter to send

Browse source
This commit is contained in:
Shibo Lyu 2024-09-03 15:28:39 +08:00
parent 72b962fb77
commit 431f14b35d
7 changed files with 101 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/InputFrame.svelte
View file

@ -7,7 +7,7 @@
<div
class={tw(
'flex items-center gap-1 rounded-md px-2 py-1.5 shadow-[inset_0_1px_2px_0_rgb(0_0_0/0.05)] ring-1 ring-ss-secondary',
'flex items-center gap-1 rounded-md px-2 py-1.5 caret-accent-500 shadow-[inset_0_1px_2px_0_rgb(0_0_0/0.05)] ring-1 ring-ss-secondary',
className
)}
>

14
src/lib/components/RichTextInput.svelte
View file

@ -1,12 +1,14 @@
<script lang="ts">
import { browser } from '$app/environment';
import type { Delta } from 'typewriter-editor';
import type { Delta, Editor } from 'typewriter-editor';
import InputFrame from '$lib/components/InputFrame.svelte';
import { tw } from '$lib/tw';
export let delta: Delta | null = null;
export let plainText: string | undefined = undefined;
export let keyboardSubmitMethod: 'enter' | 'shiftEnter' | undefined = undefined;
export let placeholder: string = '';
export let editor: Editor | undefined;
let className = '';
export { className as class };
@ -24,7 +26,15 @@
<p>{placeholder}</p>
</div>
{:then Input}
<svelte:component this={Input} bind:delta bind:plainText {placeholder} on:keydown>
<svelte:component
this={Input}
bind:delta
bind:plainText
{placeholder}
bind:editor
{keyboardSubmitMethod}
on:keyboardSubmit
>
<slot />
</svelte:component>
{/await}

61
src/lib/components/RichTextInput/ClientInput.svelte
View file

@ -1,33 +1,49 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { Delta, Editor, asRoot, h } from 'typewriter-editor';
import { keyboardSubmit } from './keyboardSubmitModule';
export let delta: Delta = new Delta();
export let plainText: string | undefined = undefined;
export let placeholder: string = '';
export let keyboardSubmitMethod: 'enter' | 'shiftEnter' | undefined = undefined;
const editor = new Editor();
editor.typeset.formats.add({
name: 'underline',
selector: 'span[data-weblah-brt=underline]',
styleSelector: '[style*="text-decoration:underline"], [style*="text-decoration: underline"]',
commands: (editor) => () => editor.toggleTextFormat({ underline: true }),
shortcuts: 'Mod+U',
render: (attributes, children) => h('span', { 'data-weblah-brt': 'underline' }, children)
});
editor.typeset.formats.add({
name: 'strikethrough',
selector: 's',
styleSelector:
'[style*="text-decoration:line-through"], [style*="text-decoration: line-through"]',
commands: (editor) => () => editor.toggleTextFormat({ strikethrough: true }),
shortcuts: 'Mod+Shift+X',
render: (attributes, children) => h('s', null, children)
});
const dispatch = createEventDispatcher<{
keyboardSubmit: void;
}>();
editor.on('change', () => {
delta = editor.getDelta();
if (typeof plainText === 'string') plainText = editor.getText();
});
let editor: Editor;
function initEditor() {
const modules = keyboardSubmitMethod
? { keyboardSubmit: keyboardSubmit(() => dispatch('keyboardSubmit'), keyboardSubmitMethod) }
: undefined;
editor = new Editor({ modules });
editor.typeset.formats.add({
name: 'underline',
selector: 'span[data-weblah-brt=underline]',
styleSelector: '[style*="text-decoration:underline"], [style*="text-decoration: underline"]',
commands: (editor) => () => editor.toggleTextFormat({ underline: true }),
shortcuts: 'Mod+U',
render: (attributes, children) => h('span', { 'data-weblah-brt': 'underline' }, children)
});
editor.typeset.formats.add({
name: 'strikethrough',
selector: 's',
styleSelector:
'[style*="text-decoration:line-through"], [style*="text-decoration: line-through"]',
commands: (editor) => () => editor.toggleTextFormat({ strikethrough: true }),
shortcuts: 'Mod+Shift+X',
render: (attributes, children) => h('s', null, children)
});
editor.on('change', () => {
delta = editor.getDelta();
if (typeof plainText === 'string') plainText = editor.getText();
});
}
$: if (keyboardSubmitMethod || typeof keyboardSubmitMethod === 'undefined') initEditor();
$: editor.setDelta(delta ?? new Delta());
$: if (typeof plainText === 'string' && plainText !== editor.getText()) editor.setText(plainText);
@ -40,7 +56,6 @@
? 'true'
: undefined}
data-weblah-placeholder={placeholder}
on:keydown
role="textbox"
tabindex="0"
>

15
src/lib/components/RichTextInput/keyboardSubmitModule.ts Normal file
View file

@ -0,0 +1,15 @@
import type { ModuleInitializer } from 'typewriter-editor';
export const keyboardSubmit = function keyboardSubmit(
onSubmit: () => void,
method: 'enter' | 'shiftEnter'
): ModuleInitializer {
return () => ({
commands: {
keyboardSubmit: onSubmit
},
shortcuts: {
[method === 'enter' ? 'Enter' : 'Shift+Enter']: 'keyboardSubmit'
}
});
};