1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-05 06:47:26 +02:00
Files
slate/site/examples/js/android-tests.jsx
Bartosz Legięć 5a20ea3ad8 Fix Android cursor jumping to word start after autocorrect (#5901)
* Enhance Android input manager to store current selection before applying diffs and ensure correct selection position post-update.

* Add autocorrect test case to Android input examples

This update introduces a new test case for autocorrect functionality in both JavaScript and TypeScript examples. The test case instructs users to type "Cant" and verify the cursor position after autocorrection.

* Add changeset

* Remove unnecessary comments

* Drop pending selection change on programatic text insert
2025-06-26 11:49:17 -07:00

247 lines
6.0 KiB
JavaScript

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { withHistory } from 'slate-history'
import { Editable, Slate, withReact } from 'slate-react'
import { css } from '@emotion/css'
const TEST_CASES = [
{
id: 'split-join',
name: 'Split/Join',
instructions:
'Hit enter twice then backspace twice in the following places:\n- Before "before"\n- Between the two "d"s in "middle"\n- After "after"',
value: [
{
type: 'paragraph',
children: [
{ text: 'One ' },
{ text: 'before', bold: true },
{ text: ' two ' },
{ text: 'middle', bold: true },
{ text: ' three ' },
{ text: 'after', bold: true },
{ text: ' four' },
],
},
],
},
{
id: 'insert',
name: 'Insertion',
instructions:
'Enter text below each line of instruction, including mis-spelling "wasnt"',
value: [
{
type: 'paragraph',
children: [
{ text: 'Type by tapping keys: ', bold: true },
{ text: 'It wasnt me. No.' },
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
{
type: 'paragraph',
children: [
{ text: 'Type using glide typing: ', bold: true },
{ text: 'Yes Sam, I am.' },
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
{
type: 'paragraph',
children: [
{ text: 'Type using voice input: ', bold: true },
{ text: 'The quick brown fox jumps over the lazy dog' },
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
{
type: 'paragraph',
children: [{ text: 'Write any two words using an IME', bold: true }],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
],
},
{
id: 'special',
name: 'Special',
instructions: 'Follow the instructions on each line',
value: [
{
type: 'paragraph',
children: [
{
text: 'Type "it is", move cursor to "i|t" and hit enter.',
bold: true,
},
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
{
type: 'paragraph',
children: [
{
text: 'Move cursor to "mid|dle" and press space, backspace, space, backspace.',
bold: true,
},
],
},
{
type: 'paragraph',
children: [{ text: 'The middle word.' }],
},
{
type: 'paragraph',
children: [
{
text: 'Place cursor in line below. Wait for caps on keyboard to show up. If not try again. Type "It me. No." and check it doesn\'t mangle on the last period.',
bold: true,
},
],
},
{
type: 'paragraph',
children: [{ text: '' }],
},
],
},
{
id: 'empty',
name: 'Empty',
instructions:
'Type "hello world", press enter, "hi", press enter, "bye", and then backspace over everything',
value: [
{
type: 'paragraph',
children: [{ text: '' }],
},
],
},
{
id: 'remove',
name: 'Remove',
instructions:
'Select from ANCHOR to FOCUS and press backspace. Move cursor to end. Backspace over all remaining content.',
value: [
{
type: 'paragraph',
children: [
{ text: 'Go and ' },
{ text: 'select', bold: true },
{ text: ' from this ANCHOR and then' },
],
},
{
type: 'paragraph',
children: [{ text: 'go and select' }],
},
{
type: 'paragraph',
children: [
{ text: 'to this FOCUS then press ' },
{ text: 'backspace.', bold: true },
],
},
{
type: 'paragraph',
children: [
{ text: 'After you have done that move selection to very end.' },
],
},
{
type: 'paragraph',
children: [
{ text: 'Then try ' },
{ text: 'backspacing', bold: true },
{ text: ' over all remaining text.' },
],
},
],
},
{
id: 'autocorrect',
name: 'Autocorrect',
instructions:
'Type "Cant", then press space to autocorrect it. Make sure the cursor position is correct (after the autocorrected word)',
value: [
{
type: 'paragraph',
children: [{ text: '' }],
},
],
},
]
const AndroidTestsExample = () => {
const [testId, setTestId] = useState(
() => window.location.hash.replace('#', '') || TEST_CASES[0].id
)
useEffect(() => {
window.history.replaceState({}, '', `#${testId}`)
}, [testId])
const testCase = TEST_CASES.find(({ id }) => id === testId)
if (!testCase) {
throw new Error(`Could not find test case '${testId}'`)
}
return (
<>
<label>
Test case:{' '}
<select value={testId} onChange={e => setTestId(e.target.value)}>
{TEST_CASES.map(({ name, id }) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
</label>
<p
className={css`
font-weight: 600;
margin: 0.5rem 0;
white-space: pre-line;
`}
>
{testCase.instructions}
</p>
<TestCase key={testId} {...testCase} />
</>
)
}
const TestCase = ({ value }) => {
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
return (
<Slate editor={editor} initialValue={value}>
<Editable
renderLeaf={renderLeaf}
placeholder="Enter some text…"
spellCheck
/>
</Slate>
)
}
const Leaf = ({ attributes, children, leaf }) => {
if (leaf.bold) {
children = <strong>{children}</strong>
}
return <span {...attributes}>{children}</span>
}
export default AndroidTestsExample