forked from facebook/lexical
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
253 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| [ignore] | ||
| .*/scripts/.* | ||
| .*/build/.* | ||
| .*/__tests__/.* | ||
| .*/dist/.* | ||
| .*/.tempUserDataDir/.* | ||
| .*/node_modules/.* | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| 'use strict'; | ||
|
|
||
| module.exports = { | ||
| presets: ['@babel/preset-env', '@babel/preset-react'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
219 changes: 219 additions & 0 deletions
219
packages/outline/src/__tests__/OutlineSelection-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| let container = null; | ||
| let React; | ||
| let ReactDOM; | ||
| let ReactTestUtils; | ||
| let Outline; | ||
|
|
||
| function sanitizeHTML(html) { | ||
| // Remove the special space characters | ||
| return html.replace(/\uFEFF/g, ''); | ||
| } | ||
|
|
||
| function insertText(text) { | ||
| return { | ||
| type: 'insert_text', | ||
| text, | ||
| }; | ||
| } | ||
|
|
||
| function deleteBackward() { | ||
| return { | ||
| type: 'delete_backward', | ||
| text: null, | ||
| }; | ||
| } | ||
|
|
||
| function deleteForward() { | ||
| return { | ||
| type: 'delete_forward', | ||
| text: null, | ||
| }; | ||
| } | ||
|
|
||
| function setNativeSelection( | ||
| anchorPath, | ||
| anchorOffset, | ||
| focusPath, | ||
| focusOffset, | ||
| isCollapsed = false, | ||
| ) { | ||
| return { | ||
| type: 'set_native_selection', | ||
| anchorPath, | ||
| anchorOffset, | ||
| focusPath, | ||
| focusOffset, | ||
| isCollapsed, | ||
| }; | ||
| } | ||
|
|
||
| function getNodeFromPath(path, editorElement) { | ||
| let node = editorElement; | ||
| for (let i = 0; i < path.length; i++) { | ||
| node = node.childNodes[path[i]]; | ||
| } | ||
| return node; | ||
| } | ||
|
|
||
| function updateNativeSelection( | ||
| editorElement, | ||
| anchorPath, | ||
| anchorOffset, | ||
| focusPath, | ||
| focusOffset, | ||
| isCollapsed = false, | ||
| ) { | ||
| const anchorNode = getNodeFromPath(anchorPath, editorElement); | ||
| const focusNode = getNodeFromPath(focusPath, editorElement); | ||
| const domSelection = window.getSelection(); | ||
| const range = document.createRange(); | ||
| range.collapse(isCollapsed); | ||
| range.setStart(anchorNode, anchorOffset); | ||
| range.setEnd(focusNode, focusOffset); | ||
| domSelection.removeAllRanges(); | ||
| domSelection.addRange(range); | ||
| } | ||
|
|
||
| function applySelectionInputs(inputs, update, editor) { | ||
| const editorElement = editor.getEditorElement(); | ||
| inputs.forEach((input) => { | ||
| update((view) => { | ||
| const selection = view.getSelection(); | ||
|
|
||
| switch (input.type) { | ||
| case 'insert_text': { | ||
| selection.insertText(input.text); | ||
| break; | ||
| } | ||
| case 'delete_backward': { | ||
| selection.deleteBackward(); | ||
| break; | ||
| } | ||
| case 'delete_forward': { | ||
| selection.deleteForward(); | ||
| break; | ||
| } | ||
| case 'set_native_selection': { | ||
| updateNativeSelection( | ||
| editorElement, | ||
| input.anchorPath, | ||
| input.anchorOffset, | ||
| input.focusPath, | ||
| input.focusOffset, | ||
| input.isCollapsed, | ||
| ); | ||
| break; | ||
| } | ||
| default: | ||
| console.log('TODO'); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| describe('OutlineSelection tests', () => { | ||
| beforeEach(() => { | ||
| React = require('react'); | ||
| ReactDOM = require('react-dom'); | ||
| ReactTestUtils = require('react-dom/test-utils'); | ||
| Outline = require('outline'); | ||
|
|
||
| container = document.createElement('div'); | ||
| document.body.appendChild(container); | ||
| init(); | ||
| }); | ||
|
|
||
| let editor = null; | ||
|
|
||
| function init() { | ||
| const ref = React.createRef(); | ||
|
|
||
| function TestBase() { | ||
| editor = Outline.useOutlineEditor(ref); | ||
| return <div ref={ref} contentEditable={true} />; | ||
| } | ||
|
|
||
| ReactTestUtils.act(() => { | ||
| ReactDOM.render(<TestBase />, container); | ||
| }); | ||
| ref.current.focus(); | ||
|
|
||
| // Insert initial block | ||
| update((view) => { | ||
| const paragraph = Outline.createParagraph(); | ||
| const text = Outline.createText(); | ||
| paragraph.append(text); | ||
| view.getBody().append(paragraph); | ||
| }); | ||
|
|
||
| // Focus first element | ||
| updateNativeSelection(ref.current, [0, 0, 0], 0, [0, 0, 0], 0); | ||
| } | ||
|
|
||
| function update(callback) { | ||
| const viewModel = editor.createViewModel(callback); | ||
| editor.update(viewModel, true); | ||
| } | ||
|
|
||
| afterEach(() => { | ||
| document.body.removeChild(container); | ||
| container = null; | ||
| }); | ||
|
|
||
| test('Expect initial output to be a block with some text', () => { | ||
| expect(sanitizeHTML(container.innerHTML)).toBe( | ||
| '<div contenteditable="true"><p><span data-text="true"><br></span></p></div>', | ||
| ); | ||
| }); | ||
|
|
||
| const suite = [ | ||
| { | ||
| inputs: [ | ||
| insertText('H'), | ||
| insertText('e'), | ||
| insertText('l'), | ||
| insertText('l'), | ||
| insertText('o'), | ||
| ], | ||
| result: | ||
| '<div contenteditable="true"><p dir="ltr"><span data-text="true">Hello</span></p></div>', | ||
| }, | ||
| { | ||
| inputs: [ | ||
| insertText('1'), | ||
| insertText('2'), | ||
| insertText('3'), | ||
| deleteBackward(), | ||
| insertText('4'), | ||
| insertText('5'), | ||
| deleteBackward(), | ||
| insertText('6'), | ||
| deleteForward(), | ||
| ], | ||
| result: | ||
| '<div contenteditable="true"><p><span data-text="true">1246</span></p></div>', | ||
| }, | ||
| { | ||
| inputs: [ | ||
| insertText('1'), | ||
| insertText('1'), | ||
| insertText('2'), | ||
| insertText('3'), | ||
| setNativeSelection([0, 0, 0], 0, [0, 0, 0], 0), | ||
| insertText('a'), | ||
| insertText('b'), | ||
| insertText('c'), | ||
| deleteForward(), | ||
| ], | ||
| result: | ||
| '<div contenteditable="true"><p dir="ltr"><span data-text="true">abc123</span></p></div>', | ||
| }, | ||
| ]; | ||
|
|
||
| suite.forEach((testUnit, i) => { | ||
| test('Test case #' + (i + 1), () => { | ||
| applySelectionInputs(testUnit.inputs, update, editor); | ||
| expect(sanitizeHTML(container.innerHTML)).toBe(testUnit.result); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters