#custom slate elements in v2

9 messages · Page 1 of 1 (latest)

teal slate
#

i am trying to add custom elements that use useSlate() to the slate Editor. But i get the following error:

index.es.js:2585 Uncaught Error: The `useSlate` hook must be used inside the <Slate> component's context.

I know, i have to add the <Slate> component somewhere but i haven't found any location where i can insert it. Is it even possible to manually add a slate context?

(i also found this thread, it suggests that it is not possible, but the last comment is from 2021)
https://github.com/payloadcms/payload/issues/119

GitHub
Support for adding plugins to Slate · Issue #119 · payloadcms/paylo...

Thanks for a lovely framework and a nice job on the first video. Really hope you guys will get more traction soon 🤞 At least I'm recommending it to any client that will hear it. Feature Request...

sweet kindleBOT
pulsar linden
#

the video element is the most complex one and makes use of the useSlate hook

teal slate
#

They don't have the slate context either, they just use the useSlate hook. As far as i can tell my code looks quite similar but somehow i get the mentioned error.
this is my buttons code:

import {ElementButton} from '@payloadcms/richtext-slate';
import React, {useCallback} from 'react';
import {Transforms} from 'slate';
import {ReactEditor, useSlate} from 'slate-react';
import {isElementActive} from '../../../../helpers/isElementActive';

const baseClass = 'rich-text-invite-button';

const insertButton = (editor) => {
  const text = {text: 'Einladungslink'};
  const button = {
    type: 'invite',
    children: [text],
  };

  const nodes = [button, {children: [{text: ''}]}];

  if (editor.blurSelection) {
    Transforms.select(editor, editor.blurSelection);
  }

  Transforms.insertNodes(editor, nodes);
  ReactEditor.focus(editor);
};

const ToolbarButton: React.FC<{path: string}> = () => {
  const editor = useSlate();

  const handleAddInviteLink = useCallback(() => {
    insertButton(editor);
  }, [editor]);

  return (
    <ElementButton
      format=''
      className={[
        baseClass,
        isElementActive(editor, 'invite') && 'rich-text__button__button--active',
      ]
        .filter(Boolean)
        .join(' ')}
      onClick={handleAddInviteLink}
      >
      Einladungs Link
    </ElementButton>
  );
};

export default ToolbarButton;
teal slate
#

I found out what it was. I was migrating from payload 1.x and i forgot to remove slate and slate-react from package.json. In v2 the @payloadcms/richtext-slate has dependencies to the the correct versions of those packages. (not the latest) With the latest versions it doesn't work.

sweet kindleBOT
pulsar linden
teal slate
#

yeah i had like slate 0.101 and @payloadcms/richtext-slate requires 0.91