feat: add new autoformat and drag-and-drop functionality to the editor, refactor list handling and update dependencies

surfsense_web/components/ui/block-list-static.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import type { RenderStaticNodeWrapper, TListElement } from 'platejs';
+import type { SlateRenderElementProps } from 'platejs/static';
+
+import { isOrderedList } from '@platejs/list';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const config: Record<
+  string,
+  {
+    Li: React.FC<SlateRenderElementProps>;
+    Marker: React.FC<SlateRenderElementProps>;
+  }
+> = {
+  todo: {
+    Li: TodoLiStatic,
+    Marker: TodoMarkerStatic,
+  },
+};
+
+export const BlockListStatic: RenderStaticNodeWrapper = (props) => {
+  if (!props.element.listStyleType) return;
+
+  return (props) => <List {...props} />;
+};
+
+function List(props: SlateRenderElementProps) {
+  const { indent, listStart, listStyleType } = props.element as TListElement & {
+    indent?: number;
+  };
+  const { Li, Marker } = config[listStyleType] ?? {};
+  const List = isOrderedList(props.element) ? 'ol' : 'ul';
+
+  // Apply margin-left for indent (24px per level) for DOCX export compatibility
+  const marginLeft = indent ? `${indent * 24}px` : undefined;
+
+  return (
+    <List
+      className="relative m-0 p-0"
+      style={{ listStyleType, marginLeft }}
+      start={listStart}
+    >
+      {Marker && <Marker {...props} />}
+      {Li ? <Li {...props} /> : <li>{props.children}</li>}
+    </List>
+  );
+}
+
+function TodoMarkerStatic(props: SlateRenderElementProps) {
+  const checked = props.element.checked as boolean;
+
+  return (
+    <div contentEditable={false}>
+      <button
+        className={cn(
+          'peer -left-6 pointer-events-none absolute top-1 size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+          props.className
+        )}
+        data-state={checked ? 'checked' : 'unchecked'}
+        type="button"
+      >
+        <div className={cn('flex items-center justify-center text-current')}>
+          {checked && <CheckIcon className="size-4" />}
+        </div>
+      </button>
+    </div>
+  );
+}
+
+function TodoLiStatic(props: SlateRenderElementProps) {
+  return (
+    <li
+      className={cn(
+        'list-none',
+        (props.element.checked as boolean) &&
+          'text-muted-foreground line-through'
+      )}
+    >
+      {props.children}
+    </li>
+  );
+}