mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-05 06:47:26 +02:00
* 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
247 lines
6.0 KiB
JavaScript
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
|