Slate: editor.findPath is not a function

[Josh-McFarlin]

Getting the error TypeError: editor.findPath is not a function even if the text is not empty.

Logging editor gives the following:

addMark: (key, value) => {…}
apply: op => {…}
children: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
deleteBackward: unit => {…}
deleteForward: unit => {…}
deleteFragment: () => {…}
history: {undos: Array(1), redos: Array(0)}
insertBreak: () => {…}
insertData: data => {…}
insertFragment: fragment => {…}
insertNode: node => { Transforms.insertNodes(editor, node); }
insertText: text => {…}
isInline: () => false
isVoid: element => {…}
marks: null
normalizeNode: entry => {…}
onChange: () => {…}
operations: []
redo: () => {…}
removeMark: key => {…}
selection: {anchor: {…}, focus: {…}}
undo: () => {…}

So findPath is not defined anywhere.

A different issue mentioned needing a nonempty text child, but that still doesn't fix it.

[thesunny]

Can you clarify where you saw editor.findPath that led you to believe it's defined here?

It might be a documentation issue.

[Josh-McFarlin]

@thesunny in the official example.

Embeds: https://www.slatejs.org/examples/embeds

  const editor = useEditor()
  const selected = useSelected()
  const focused = useFocused()
  const { url } = element

  return (
    <div {...attributes}>
      <div ...>
        <div ...  />
        <div ...>
          <iframe
            src={`${url}?title=0&byline=0&portrait=0`}
            frameBorder="0"
            ...
          />
        </div>
        {selected && focused ? (
          <input
            value={url}
            onClick={e => e.stopPropagation()}
            style={{
              marginTop: '5px',
              boxSizing: 'border-box',
            }}
            onChange={value => {
              // HERE
              const path = editor.findPath(element)
              Transforms.setNodes(editor, { url: value }, { at: path })
            }}
          />
        ) : null}
      </div>
      {children}
    </div>
  )

[thesunny]

Looks like the code wasn't updated.

Should say

ReactEditor.findPath(editor, element)

I couldn't start the edit URL process as it stopped editing when I clicked on the input so there might be other bugs.

If you can get it working, will accept a PR.

[Josh-McFarlin]

Yep, my code now works. Thanks!

Will work on a PR.

[thesunny]

Thanks @Josh-McFarlin

Will take a look after vacation. Caught a cold so I'm lurking but no actual programming for now. :)