question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can the editable component ref be exposed?

See original GitHub issue

Can the editable component ref be exposed? I want to trigger the events brought by the component through the similar refEditor.current.onCut()

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:10
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
msenejoacommented, Jul 3, 2020

One way around this issue: in parent component: const editorRef = useRef() and pass that down as a prop, in your slate component you can set that ref in a useEffect hook:

useEffect(()=> {
     editorRef.current = ReactEditor.toDOMNode(editor, editor)
, []}

The parent component will now have access to the editor ref as editorRef.current

5reactions
camerackercommented, May 22, 2020

It seems like most people want the ref for focusing or for positioning purposes.

For focusing, there’s a helper that focuses, ReactEditor.focus(). It’s usually most successful in a setTimeout.

For positioning, you can get the dom node with ReactEditor.toDOMNode(editor, editor) as @msenejoa mentioned, or you could also wrap the editor in a div or some simple element that you grab a ref for.

Are there any use cases that aren’t covered by these existing solutions? This is sounding like a problem with the docs and less a missing feature

Read more comments on GitHub >

github_iconTop Results From Across the Web

Refs and the DOM - React
Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when...
Read more >
React ref to component not exposing method - Stack Overflow
I tried to keep the code as simple as possible in the example the filter out the noise, but I'll edit the question...
Read more >
A complete guide to React refs - LogRocket Blog
Learn how to use React refs, and why it's important to use them only when React can't handle a function call through its...
Read more >
Refs to Components | React
React supports a special attribute that you can attach to any component. The ref attribute can be a callback function, and this callback...
Read more >
Template Refs - Vue.js
Note that you can only access the ref after the component is mounted. If you try to access $refs.input input in a template...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found