Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

examples are not 100% type safe #5612

Open
0xMALVEE opened this issue Mar 2, 2024 · 4 comments
Open

examples are not 100% type safe #5612

0xMALVEE opened this issue Mar 2, 2024 · 4 comments

Comments

@0xMALVEE
Copy link

0xMALVEE commented Mar 2, 2024

Problem
Examples are not 100% typesafe after I copy code I get a lot of type errors.
image

Solution
Improve type safety

Alternatives
No alternative

Context
Typescript improvements of types in examples.

@dylans
Copy link
Collaborator

dylans commented Mar 5, 2024

It is indeed difficult to keep the examples safe as every version of TS potentially introduces changes that were not caught previously.

PRs are always welcome to update them.

@alexander-larsson
Copy link

alexander-larsson commented Mar 11, 2024

Sorry if this is not 100% related to this issue but I just started using Slate and got really confused by this when trying to get some code working based on the examples. Is it just the types that are wrong or does the type property for example in fact not exist on BaseElement (see one of the errors in the picture above) so the example code is wrong and based on some older version of Slate?

@maral
Copy link

maral commented Mar 14, 2024

Hi, I stumbled upon the very same thing and found a solution around the internet. However, it would be really nice if Slate's Docs already provided that - I really like everything about the design and philosophy of Slate, this was a turn off though. GitBook has the option to have multiple "tabs" in the docs to allow both JS and TS versions, see their examples.

Here is my take of correctly typed example from the 05-executing-commands walk through part:

'use client';

import React, { useCallback, useState } from 'react';
import type { BaseEditor, Descendant } from 'slate';
import { createEditor, Editor, Element, Transforms } from 'slate';
import type { ReactEditor, RenderElementProps, RenderLeafProps } from 'slate-react';
import { Editable, Slate, withReact } from 'slate-react';

type Paragraph = { type: 'paragraph'; children: CustomText[] };
type Code = { type: 'code'; children: CustomText[] };
type CustomElement = Paragraph | Code;
type CustomText = { text: string; bold: boolean };

declare module 'slate' {
  interface CustomTypes {
    Editor: BaseEditor & ReactEditor;
    Element: CustomElement;
    Text: CustomText;
  }
}

const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.', bold: false }],
  },
];

const CustomEditor = {
  isBoldMarkActive(editor: Editor) {
    const marks = Editor.marks(editor);
    return marks ? marks.bold === true : false;
  },

  isCodeBlockActive(editor: Editor) {
    const [match] = Editor.nodes(editor, {
      match: n => Element.isElement(n) && n.type === 'code',
    });

    return !!match;
  },

  toggleBoldMark(editor: Editor) {
    const isActive = CustomEditor.isBoldMarkActive(editor);
    if (isActive) {
      Editor.removeMark(editor, 'bold');
    } else {
      Editor.addMark(editor, 'bold', true);
    }
  },

  toggleCodeBlock(editor: Editor) {
    const isActive = CustomEditor.isCodeBlockActive(editor);
    Transforms.setNodes(
      editor,
      { type: isActive ? undefined : 'code' },
      { match: n => Element.isElement(n) && Editor.isBlock(editor, n) }
    );
  },
};

export const EditorTest: React.FC = () => {
  const [editor] = useState(() => withReact(createEditor()));
  const renderElement = useCallback((props: RenderElementProps) => {
    switch (props.element.type) {
      case 'code':
        return <CodeElement {...props} />;
      default:
        return <DefaultElement {...props} />;
    }
  }, []);

  const renderLeaf = useCallback((props: RenderLeafProps) => {
    return <Leaf {...props} />;
  }, []);

  return (
    <div className='mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8'>
      <Slate editor={editor} initialValue={initialValue}>
        <div className='flex mb-4 gap-2'>
          <button
            className='p-2 bg-blue-500 text-white rounded-md'
            onMouseDown={event => {
              event.preventDefault();
              CustomEditor.toggleBoldMark(editor);
            }}
          >
            Bold
          </button>
          <button
            className='p-2 bg-blue-500 text-white rounded-md'
            onMouseDown={event => {
              event.preventDefault();
              CustomEditor.toggleCodeBlock(editor);
            }}
          >
            Code Block
          </button>
        </div>
        <Editable
          renderElement={renderElement}
          renderLeaf={renderLeaf}
          onKeyDown={event => {
            if (!event.ctrlKey) {
              return;
            }

            switch (event.key) {
              case '`': {
                event.preventDefault();
                CustomEditor.toggleCodeBlock(editor);
                break;
              }

              case 'b': {
                event.preventDefault();
                CustomEditor.toggleBoldMark(editor);
                break;
              }
            }
          }}
        />
      </Slate>
    </div>
  );
};

const CodeElement = (props: RenderElementProps) => {
  return (
    <pre {...props.attributes}>
      <code>{props.children}</code>
    </pre>
  );
};

const DefaultElement = (props: RenderElementProps) => {
  return <p {...props.attributes}>{props.children}</p>;
};

const Leaf = (props: RenderLeafProps) => {
  return (
    <span
      {...props.attributes}
      style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal', color: props.leaf.bold ? 'red' : 'black' }}
    >
      {props.children}
    </span>
  );
};

@KarsonJo
Copy link

In fact most type errors stem from not defining the editor types. This issue is actually addressed in the documentation. You can also get the type definition from inside the example. But it would be great if this information could be shown in the comments of the examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants