Help with rich text editor that supports lists and list items

[joseDaKing]

I want to create a simple RichTextEditor where you can have bold, italic, underline, strikethrough styles and it should also have support for simple ordered and unordered lists. So far I have added bold, italic, underline strikethrough styles but there are missing support for ordered and unordered lists.

I tried to follow the rich text editor example but had a hard time understanding toggleBlock function at line 68, please could someone explain what it actually does.

Here is my code:

import { 
  Editable,
  withReact,
  Slate,
  ReactEditor,
  RenderLeafProps,
  RenderElementProps
}
from "slate-react";

import {
  Editor,
  Transforms,
  createEditor,
  Descendant,
  Element,
  BaseEditor,
} 
from "slate"

import React, { useCallback, useMemo, useState } from "react";

import { withHistory } from "slate-history";

import { stitches } from "stitches";



const customElementTypes = [
  "paragraph",
  "list-item",
  "ordered-list" ,
  "unordered-list"
] as const;

type CustomText = { 
  text: string;
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  strikethrough?: boolean;
}

type BaseCustomElement = {
  children: CustomText[];
}

type CustomElement = BaseCustomElement & {
  type: (typeof customElementTypes)[number];
};

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



export const RichTextEditor: React.FC = () => {

  const [state, setState] = useState<Descendant[]>([
    {
      type: "paragraph",
      children: [
        {
          text: "abra isma"
        }
      ],
    },
  ]);

  const { editor, controller } = useRichTextEditorController();

  const keyboardHandler = useRichTextEditorKeyboardHandler(controller);

  const renderElement = useCallback<(props: RenderElementProps) => JSX.Element>(props => <RenderElement {...props}/>, []);

  const renderLeaf = useCallback<(props: RenderLeafProps) => JSX.Element>(props => <RenderLeaf {...props}/>, []);

  return (
    <Slate 
    editor={editor}
    value={state}
    onChange={setState}>
      <Editable
      onKeyDown={keyboardHandler}
      renderLeaf={renderLeaf}
      renderElement={renderElement}/>
    </Slate>
  );
}



const richTextEditorController = (editor: Editor) => {

  type MarkTypes = keyof Omit<CustomText, "text">;

  const markMedthos = (type: MarkTypes) => {

    const isActive = (): boolean => {

      const marks = Editor.marks(editor);
  
      if (!marks) {
  
        return false;
      }
      
      return !!marks[type];
    };

    const set = (value: boolean): void => {

      if (value) {
        
        Editor.addMark(editor, type, true);
      }
      else {
  
        Editor.removeMark(editor, type);
      }
    }

    const toggle = (): void => set(!isActive());

    return {
      isActive,
      set,
      toggle
    };
  }

  type BlockTypes = CustomElement["type"];

  const blockMethods = (type: BlockTypes) => {

    const isActive = (): boolean => {
      
      const { selection } = editor
      
      if (!selection) return false
    
      const [match] = Array.from(
        Editor.nodes(editor, {
          at: Editor.unhangRange(editor, selection),
          match: node => (
            !Editor.isEditor(node) &&
            Element.isElement(node) &&
            node.type === type
          )
        })
      )
    
      return !!match
    }

    const set = (value: boolean): void => {

      

      Transforms.unwrapNodes(editor, {
        match: node => (
          !Editor.isEditor(node) &&
          Element.isElement(node) &&
          customElementTypes.includes(node.type)
        ),
        
      });

      if (value) {
      }
      else {
        
      }
    }

    return {
      isActive,
      set
    };
  }

  return {
    bold: markMedthos("bold"),
    italic: markMedthos("italic"),
    underline: markMedthos("underline"),
    strikethrough: markMedthos("strikethrough"),
    orderedList: blockMethods("ordered-list"),
    unorderedList: blockMethods("unordered-list")
  };
}

function useRichTextEditorController() {

  const editor = useMemo(() => withHistory(withReact(createEditor())), []);

  const controller = richTextEditorController(editor);

  return {
    editor,
    controller
  };
}

function useRichTextEditorKeyboardHandler(controller: ReturnType<typeof richTextEditorController>) {

  return (event: React.KeyboardEvent<HTMLDivElement>) => {

    if (event.ctrlKey && event.key === "b") {
      
      controller.bold.toggle();

      event.preventDefault();
    }

    if (event.ctrlKey && event.key === "u") {

      controller.underline.toggle();

      event.preventDefault();
    }

    if (event.ctrlKey && event.key === "s") {

      controller.strikethrough.toggle();

      event.preventDefault();
    }

    if (event.ctrlKey && event.key === "i") {

      controller.italic.toggle();

      event.preventDefault();
    }

    if (event.ctrlKey && event.key === "l") {

      controller.orderedList.set(true);

      event.preventDefault();
    }
  }
}



const UnorderedList = stitches.styled("ul", {});

const OrderedList = stitches.styled("ol", {});

function RenderElement({ attributes, children, element }: React.PropsWithChildren<RenderElementProps>) {

  return ({
    paragraph: (
      <div 
      {...attributes}>
        {children}
      </div>
    ),
    "list-item": (
      <li 
      {...attributes}>
        {children}
      </li>
    ),
    "ordered-list": (
      <OrderedList 
      {...attributes}>
        {children}
      </OrderedList>
    ),
    "unordered-list": (
      <UnorderedList 
      {...attributes}>
        {children}
      </UnorderedList>
    ),
  }[element.type]);
}



const Bold = stitches.styled("b", {
  fontWeight: 800
});

const Italic = stitches.styled("i", {
  fontStyle: "italic"
});

const Underline = stitches.styled("span", {
  textDecorationLine: "underline"
});

const Strikethrough = stitches.styled("span", {
  textDecorationLine: "line-through"
});

function RenderLeaf({ attributes, children, leaf }: React.PropsWithChildren<RenderLeafProps>) {

  if (leaf.bold) {

    children = (
      <Bold 
      {...attributes}>
        {children}
      </Bold>
    );
  }

  if (leaf.italic) {

    children = (
      <Italic 
      {...attributes}>
        {children}
      </Italic>
    );
  }
    
  if (leaf.underline) {

    children = (
      <Underline 
      {...attributes}>
        {children}
      </Underline>
    );
  }

  if (leaf.strikethrough) {

    children = (
      <Strikethrough 
      {...attributes}>
        {children}
      </Strikethrough>
    );
  }

  return (
    <span 
    {...attributes}>
      {children}
    </span>
  );
};

[ayozebarrera]

I have this working on production

const Element = ({ attributes, children, element }) => {
  const style = { textAlign: element.align };
  switch (element.type) {
    case 'bulleted-list':
      return (
        <ul style={style} {...attributes}>
          {children}
        </ul>
      );
    case 'heading-one':
      return (
        <h1 style={style} {...attributes}>
          {children}
        </h1>
      );
    case 'heading-two':
      return (
        <h2 style={style} {...attributes}>
          {children}
        </h2>
      );
    case 'list-item':
      return (
        <li style={style} {...attributes}>
          {children}
        </li>
      );
    case 'numbered-list':
      return (
        <ol style={style} {...attributes}>
          {children}
        </ol>
      );
    default:
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      );
  }
};

const renderElement = useCallback(props => <Element {...props} />, []);

<Slate editor={editor} value={value} onChange={onChange}>
    <Toolbar />
    <Editable
        id={id}
        name={name}
        placeholder={placeholder}
        renderElement={renderElement}
        renderLeaf={renderLeaf}
        spellCheck
        onKeyDown={event => {
            for (const hotkey in HOTKEYS) {
            if (isHotkey(hotkey, event)) {
                event.preventDefault();
                const mark = HOTKEYS[hotkey];
                toggleMark(editor, mark);
            }
            }
        }}
    />
</Slate>

Hope this helps, tell me if you need more help!