Components
Indent Todo Marker

Indent Todo Marker

Turn any block into a todo list item.

Indent ListIndent Todo Marker

Installation

npx @udecode/plate-ui@latest add indent-todo-marker -r plate-ui

Examples

Copilot

  1. Position your cursor at the end of a paragraph where you want to add or modify text.
  1. Press Control + Space to trigger Copilot
  1. Copilot will automatically suggest completions as you type.
  1. Choose from the suggested completions:
  • Tab:Accept the entire suggested completion
  • Command + Right Arrow: Complete one character at a time
  • Escape: Cancel the Copilot
import { cn } from '@udecode/cn';
import {
  useIndentTodoListElement,
  useIndentTodoListElementState,
} from '@udecode/plate-indent-list/react';
 
import { Checkbox } from './checkbox';
 
import type { PlateRenderElementProps } from '@udecode/plate-common/react';
 
export const TodoMarker = ({
  element,
}: Omit<PlateRenderElementProps, 'children'>) => {
  const state = useIndentTodoListElementState({ element });
  const { checkboxProps } = useIndentTodoListElement(state);
 
  return (
    <div contentEditable={false}>
      <Checkbox
        style={{ left: -24, position: 'absolute', top: 4 }}
        {...checkboxProps}
      />
    </div>
  );
};
 
export const TodoLi = (props: PlateRenderElementProps) => {
  const { children, element } = props;
 
  return (
    <span
      className={cn(
        (element.checked as boolean) && 'text-muted-foreground line-through'
      )}
    >
      {children}
    </span>
  );
};