add listing components

apps/web/src/components/ui/report/elements/BlockDraggable.tsx

@@ -23,9 +23,7 @@ import { cn } from '@/lib/utils';
 
 const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
 
-export const BlockDraggable: RenderNodeWrapper = (props) => {
-  const { editor, element, path } = props;
-
+export const BlockDraggable: RenderNodeWrapper = ({ editor, element, path }) => {
   const enabled = React.useMemo(() => {
     if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
       return true;
@@ -60,6 +58,7 @@ export const BlockDraggable: RenderNodeWrapper = (props) => {
 
   if (!enabled) return;
 
+  // Return a function that renders the Draggable component
   return (props) => <Draggable {...props} />;
 };
 
@@ -201,7 +200,7 @@ const DropLine = React.memo(function DropLine({
       className={cn(
         'slate-dropLine',
         'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',
-        'bg-brand/50',
+        'bg-primary/50',
         dropLine === 'top' && '-top-px',
         dropLine === 'bottom' && '-bottom-px',
         className

apps/web/src/components/ui/report/elements/BlockList.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+
+import type { TListElement } from 'platejs';
+
+import { isOrderedList } from '@platejs/list';
+import { useTodoListElement, useTodoListElementState } from '@platejs/list/react';
+import { type PlateElementProps, type RenderNodeWrapper, useReadOnly } from 'platejs/react';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+
+const config: Record<
+  string,
+  {
+    Li: React.FC<PlateElementProps>;
+    Marker: React.FC<PlateElementProps>;
+  }
+> = {
+  todo: {
+    Li: TodoLi,
+    Marker: TodoMarker
+  }
+};
+
+export const BlockList: RenderNodeWrapper = (props) => {
+  if (!props.element.listStyleType) return;
+
+  return (props) => <List {...props} />;
+};
+
+function List(props: PlateElementProps) {
+  const { listStart, listStyleType } = props.element as TListElement;
+  const { Li, Marker } = config[listStyleType] ?? {};
+  const List = isOrderedList(props.element) ? 'ol' : 'ul';
+
+  return (
+    <List className="relative m-0 p-0" style={{ listStyleType }} start={listStart}>
+      {Marker && <Marker {...props} />}
+      {Li ? <Li {...props} /> : <li>{props.children}</li>}
+    </List>
+  );
+}
+
+function TodoMarker(props: PlateElementProps) {
+  const state = useTodoListElementState({ element: props.element });
+  const { checkboxProps } = useTodoListElement(state);
+  const readOnly = useReadOnly();
+
+  return (
+    <div contentEditable={false}>
+      <Checkbox
+        className={cn('absolute top-1 -left-6', readOnly && 'pointer-events-none')}
+        {...checkboxProps}
+      />
+    </div>
+  );
+}
+
+function TodoLi(props: PlateElementProps) {
+  return (
+    <li
+      className={cn(
+        'list-none',
+        (props.element.checked as boolean) && 'text-muted-foreground line-through'
+      )}>
+      {props.children}
+    </li>
+  );
+}

apps/web/src/components/ui/report/elements/ColumnNode.tsx

@@ -115,7 +115,7 @@ function DropLine() {
     <div
       className={cn(
         'slate-dropLine',
-        'bg-brand/50 absolute',
+        'bg-primary/50 absolute',
         dropLine === 'left' && 'inset-y-0 left-[-10.5px] w-1 group-first/column:-left-1',
         dropLine === 'right' && 'inset-y-0 right-[-11px] w-1 group-last/column:-right-1'
       )}

apps/web/src/components/ui/report/plugins/line-height-kit.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { LineHeightPlugin } from '@platejs/basic-styles/react';
+import { KEYS } from 'platejs';
+
+export const LineHeightKit = [
+  LineHeightPlugin.configure({
+    inject: {
+      nodeProps: {
+        defaultNodeValue: 1.5,
+        validNodeValues: [1, 1.2, 1.5, 2, 3]
+      },
+      targetPlugins: [...KEYS.heading, KEYS.p]
+    }
+  })
+];

apps/web/src/components/ui/report/plugins/list-kit.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { ListPlugin } from '@platejs/list/react';
+import { KEYS } from 'platejs';
+
+import { IndentKit } from '../plugins/indent-kit';
+import { BlockList } from '../elements/BlockList';
+
+export const ListKit = [
+  ...IndentKit,
+  ListPlugin.configure({
+    inject: {
+      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.blockquote, KEYS.codeBlock, KEYS.toggle]
+    },
+    render: {
+      belowNodes: BlockList
+    }
+  })
+];

apps/web/src/components/ui/report/useReportEditor.tsx

@@ -14,6 +14,7 @@ import { BasicBlocksKit } from './plugins/basic-blocks-kit';
 import { BasicMarksKit } from './plugins/basic-markd-kit';
 import { BlockMenuKit } from './plugins/block-menu-kit';
 import { BlockPlaceholderKit } from './plugins/block-placeholder-kit';
+import { BlockSelectionKit } from './plugins/block-selection-kit';
 import { CalloutKit } from './plugins/callout-kit';
 import { CodeBlockKit } from './plugins/code-block-kit';
 import { ColumnKit } from './plugins/column-kit';
@@ -34,13 +35,18 @@ import { DndKit } from './plugins/dnd-kit';
 import { FloatingToolbarKit } from './plugins/floating-toolbar-kit';
 import { ExitBreakKit } from './plugins/exit-break-kit';
 import { MarkdownKit } from './plugins/markdown-kit';
+import { ListKit } from './plugins/list-kit';
+import { LineHeightKit } from './plugins/line-height-kit';
 
 export const editorPlugins: AnyPluginConfig[] = [
+  // Core functionality (must be first)
+  ...BlockSelectionKit, // Required for drag and drop
+  ...DndKit, // Drag and drop functionality
+
   // Elements
   ...BasicBlocksKit,
   ...CodeBlockKit,
   ...CalloutKit,
-  ...AlignKit,
   ...TableKit,
   ...ToggleKit,
   ...TocKit,
@@ -54,25 +60,27 @@ export const editorPlugins: AnyPluginConfig[] = [
   ...BasicMarksKit,
   ...FontKit,
 
+  //Block Styles
+  ...AlignKit,
+  ...ListKit,
+  ...LineHeightKit,
+
   // Editing
   ...SlashKit,
-  ...SuggestionKit,
   ...AutoformatKit,
-  ...BlockMenuKit,
   ...CursorOverlayKit,
+  ...BlockMenuKit,
   ...DndKit,
-  ...FloatingToolbarKit,
   ...EmojiKit,
   ...ExitBreakKit,
-
   TrailingBlockPlugin,
 
+  //Parsers
+  ...MarkdownKit,
+
   //UI
   ...BlockPlaceholderKit,
-  ...FloatingToolbarKit,
-
-  //Markdown
-  ...MarkdownKit
+  ...FloatingToolbarKit
 ];
 
 export const useReportEditor = ({