mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-21 13:51:59 +02:00
Code Issues Releases Wiki Activity

Feat: Enable selection when editor in readonly=true (#4620)

Browse Source 
* make editor.selection avaliable when Editor is contenteditable="false"

* remove dom selection limition of read-only

* Improve grammar of comments regarding selection when read-only is true

* Add Changeset

Co-authored-by: Xheldon <c1006044256@gmail.com>
This commit is contained in:
Nicklas Andersson 2021-10-24 16:31:31 +02:00 committed by GitHub
parent 77d9f60ab5
commit 0b59ad5414
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/short-squids-remember.md Normal file
View File

@ -0,0 +1,5 @@
---
'slate-react': minor
---
Support selection in readOnly=true editors.

6
packages/slate-react/src/components/android/android-editable.tsx
View File

@ -234,11 +234,7 @@ export const AndroidEditable = (props: EditableProps): JSX.Element => {
const onDOMSelectionChange = useCallback(
throttle(() => {
try {
if (
!readOnly &&
!state.isUpdatingSelection &&
!inputManager.isReconciling.current
) {
if (!state.isUpdatingSelection && !inputManager.isReconciling.current) {
const root = ReactEditor.findDocumentOrShadowRoot(editor)
const { activeElement } = root
const el = ReactEditor.toDOMNode(editor, editor)

8
packages/slate-react/src/components/editable.tsx
View File

@ -478,7 +478,6 @@ export const Editable = (props: EditableProps) => {
const onDOMSelectionChange = useCallback(
throttle(() => {
if (
!readOnly &&
!state.isComposing &&
!state.isUpdatingSelection &&
!state.isDraggingInternally
@ -585,7 +584,12 @@ export const Editable = (props: EditableProps) => {
}
data-slate-editor
data-slate-node="value"
contentEditable={readOnly ? undefined : true}
// explicitly set this
contentEditable={!readOnly}
// in some cases, a decoration needs access to the range / selection to decorate a text node,
// then you will select the whole text node when you select part the of text
// this magic zIndex="-1" will fix it
zindex={-1}
suppressContentEditableWarning
ref={ref}
style={{

9
packages/slate-react/src/plugin/react-editor.ts
View File

@ -216,9 +216,12 @@ export const ReactEditor = {
return (
targetEl.closest(`[data-slate-editor]`) === editorEl &&
(!editable ||
targetEl.isContentEditable ||
!!targetEl.getAttribute('data-slate-zero-width'))
(!editable || targetEl.isContentEditable
? true
: (typeof targetEl.isContentEditable === 'boolean' && // isContentEditable exists only on HTMLElement, and on other nodes it will be undefined
// this is the core logic that lets you know you got the right editor.selection instead of null when editor is contenteditable="false"(readOnly)
targetEl.closest('[contenteditable="false"]') === editorEl) ||
!!targetEl.getAttribute('data-slate-zero-width'))
)
},