37:I[3994,["7513","static/chunks/b6eb3486-df1bae131da191bb.js","7547","static/chunks/7547-7fbb79598e587741.js","5486","static/chunks/5486-37701c54a74cd980.js","915","static/chunks/915-a268354dc85322c8.js","1110","static/chunks/1110-9af6d887e4ab1348.js","5487","static/chunks/5487-d84c69d2dbf3cb4e.js","7700","static/chunks/7700-ae0a9a8d54dd57e4.js","448","static/chunks/448-8500b9bdf42a375b.js","8955","static/chunks/8955-9a5fb3923b4ff472.js","4950","static/chunks/4950-a9b85c738862ca40.js","679","static/chunks/679-bcb27f54d6fdc722.js","4036","static/chunks/4036-410f678a8286098b.js","5634","static/chunks/5634-aa207deffab9ab71.js","7369","static/chunks/7369-52503b4b8b6a8275.js","7256","static/chunks/7256-9ed3a3977fac773b.js","7006","static/chunks/7006-4b864bad3a7de601.js","8365","static/chunks/8365-9be9047e47857a03.js","1249","static/chunks/1249-b992ee59c5b04196.js","1090","static/chunks/1090-92115e0839b38a4e.js","851","static/chunks/851-63491d0d0bb396ab.js","6717","static/chunks/6717-b7947465e55fded8.js","1731","static/chunks/1731-cfcffe537970438b.js","3994","static/chunks/3994-02cbc7a4d4a56cff.js","9623","static/chunks/9623-b76053c6be00ed84.js","8320","static/chunks/8320-7bbfe0c4fd7214a0.js","7668","static/chunks/7668-7147c1e5665a87bd.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-826026f5822c6d9e.js"],"DocContent"] 38:I[24469,["7513","static/chunks/b6eb3486-df1bae131da191bb.js","7547","static/chunks/7547-7fbb79598e587741.js","5486","static/chunks/5486-37701c54a74cd980.js","915","static/chunks/915-a268354dc85322c8.js","1110","static/chunks/1110-9af6d887e4ab1348.js","5487","static/chunks/5487-d84c69d2dbf3cb4e.js","7700","static/chunks/7700-ae0a9a8d54dd57e4.js","448","static/chunks/448-8500b9bdf42a375b.js","8955","static/chunks/8955-9a5fb3923b4ff472.js","4950","static/chunks/4950-a9b85c738862ca40.js","679","static/chunks/679-bcb27f54d6fdc722.js","4036","static/chunks/4036-410f678a8286098b.js","5634","static/chunks/5634-aa207deffab9ab71.js","7369","static/chunks/7369-52503b4b8b6a8275.js","7256","static/chunks/7256-9ed3a3977fac773b.js","7006","static/chunks/7006-4b864bad3a7de601.js","8365","static/chunks/8365-9be9047e47857a03.js","1249","static/chunks/1249-b992ee59c5b04196.js","1090","static/chunks/1090-92115e0839b38a4e.js","851","static/chunks/851-63491d0d0bb396ab.js","6717","static/chunks/6717-b7947465e55fded8.js","1731","static/chunks/1731-cfcffe537970438b.js","3994","static/chunks/3994-02cbc7a4d4a56cff.js","9623","static/chunks/9623-b76053c6be00ed84.js","8320","static/chunks/8320-7bbfe0c4fd7214a0.js","7668","static/chunks/7668-7147c1e5665a87bd.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-826026f5822c6d9e.js"],"ComponentInstallation"] 39:Tbdf,import { BaseListPlugin, isOrderedList, ListType } from '@platejs/list'; import { CheckIcon } from 'lucide-react'; import type { RenderStaticNodeWrapper } from 'platejs'; import * as React from 'react'; import { cn } from '@/lib/utils'; type ListWrapper = RenderStaticNodeWrapper; type BlockListProps = Parameters>>[0] & { indent?: number; listStart?: number; listStyle?: string; listType: ListType; }; const config: Record< string, { Li: React.FC; Marker: React.FC; } > = { task: { Li: TodoLiStatic, Marker: TodoMarkerStatic, }, }; export const BlockListStatic: ListWrapper = (props) => { const { indent, listStyle, listType } = props.element; if (!listType || listType === ListType.Bulleted) return undefined; return function BlockListStaticWrapper(innerProps) { return ( ); }; }; function List(props: BlockListProps) { const { indent, listStart, listStyle, listType } = props; const { Li, Marker } = config[listType] ?? {}; const InnerList = isOrderedList(props.element) ? 'ol' : 'ul'; const markerStyle = listStyle ?? (listType === ListType.Numbered ? 'decimal' : 'none'); // Apply margin-left for indent (24px per level) for DOCX export compatibility const marginLeft = indent ? `${indent * 24}px` : undefined; return ( {Marker && } {Li ?

{props.children}

} ); } function TodoMarkerStatic(props: BlockListProps) { const checked = props.element.checked === true; return (

); } function TodoLiStatic(props: BlockListProps) { return (

{props.children}

); } 3a:T73c2,

import { BaseListPlugin, isOrderedList, ListType } from '@platejs/list';
import { CheckIcon } from 'lucide-react';
import type { RenderStaticNodeWrapper } from 'platejs';
import * as React from 'react';

import { cn } from '@/lib/utils';

type ListWrapper = RenderStaticNodeWrapper<typeof BaseListPlugin>;
type BlockListProps = Parameters<NonNullable<ReturnType<ListWrapper>>>[0] & {
  indent?: number;
  listStart?: number;
  listStyle?: string;
  listType: ListType;
};

const config: Record<
  string,
  {
    Li: React.FC<BlockListProps>;
    Marker: React.FC<BlockListProps>;
  }
> = {
  task: {
    Li: TodoLiStatic,
    Marker: TodoMarkerStatic,
  },
};

export const BlockListStatic: ListWrapper = (props) => {
  const { indent, listStyle, listType } = props.element;

  if (!listType || listType === ListType.Bulleted) return undefined;

  return function BlockListStaticWrapper(innerProps) {
    return (
      <List
        {...innerProps}
        indent={typeof indent === 'number' ? indent : undefined}
        listStart={innerProps.editor
          .plugin(BaseListPlugin)
          .read.ordinal(innerProps.element)}
        listStyle={listStyle}
        listType={listType}
      />
    );
  };
};

function List(props: BlockListProps) {
  const { indent, listStart, listStyle, listType } = props;
  const { Li, Marker } = config[listType] ?? {};
  const InnerList = isOrderedList(props.element) ? 'ol' : 'ul';
  const markerStyle =
    listStyle ?? (listType === ListType.Numbered ? 'decimal' : 'none');

  // Apply margin-left for indent (24px per level) for DOCX export compatibility
  const marginLeft = indent ? `${indent * 24}px` : undefined;

  return (
    <InnerList
      className="relative m-0 p-0"
      style={{ listStyleType: markerStyle, marginLeft }}
      start={listType === ListType.Numbered ? listStart : undefined}
    >
      {Marker && <Marker {...props} />}
      {Li ? <Li {...props} /> : <li>{props.children}</li>}
    </InnerList>
  );
}

function TodoMarkerStatic(props: BlockListProps) {
  const checked = props.element.checked === true;

  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: BlockListProps) {
  return (
    <li
      className={cn(
        'list-none',
        props.element.checked === true && 'text-muted-foreground line-through'
      )}
    >
      {props.children}
    </li>
  );
}

3b:Tbdf,import { BaseListPlugin, isOrderedList, ListType } from '@platejs/list'; import { CheckIcon } from 'lucide-react'; import type { RenderStaticNodeWrapper } from 'platejs'; import * as React from 'react'; import { cn } from '@/lib/utils'; type ListWrapper = RenderStaticNodeWrapper; type BlockListProps = Parameters>>[0] & { indent?: number; listStart?: number; listStyle?: string; listType: ListType; }; const config: Record< string, { Li: React.FC; Marker: React.FC; } > = { task: { Li: TodoLiStatic, Marker: TodoMarkerStatic, }, }; export const BlockListStatic: ListWrapper = (props) => { const { indent, listStyle, listType } = props.element; if (!listType || listType === ListType.Bulleted) return undefined; return function BlockListStaticWrapper(innerProps) { return ( ); }; }; function List(props: BlockListProps) { const { indent, listStart, listStyle, listType } = props; const { Li, Marker } = config[listType] ?? {}; const InnerList = isOrderedList(props.element) ? 'ol' : 'ul'; const markerStyle = listStyle ?? (listType === ListType.Numbered ? 'decimal' : 'none'); // Apply margin-left for indent (24px per level) for DOCX export compatibility const marginLeft = indent ? `${indent * 24}px` : undefined; return ( {Marker && } {Li ?

{props.children}

} ); } function TodoMarkerStatic(props: BlockListProps) { const checked = props.element.checked === true; return (

); } function TodoLiStatic(props: BlockListProps) { return (

{props.children}

); } 1c:["$","$L37",null,{"category":"component","dependencies":["@platejs/list"],"files":[{"path":"components/editor/block-list-static.tsx","type":"registry:component"}],"name":"block-list-static","registryDependencies":[],"type":"registry:component","doc":{"docs":[],"slug":"/docs/components/block-list-static"},"neighbours":{"next":null,"previous":null},"children":["$","$L38",null,{"name":"block-list-static","dependencies":["@platejs/list"],"examples":"$undefined","highlightedFiles":[{"path":"block-list-static.tsx","content":"$39","type":"registry:component","target":"@components/editor/block-list-static.tsx","highlightedContent":"$3a"}],"item":{"name":"block-list-static","dependencies":["@platejs/list"],"registryDependencies":[],"files":[{"path":"block-list-static.tsx","content":"$3b","type":"registry:component","target":"@components/editor/block-list-static.tsx"}],"type":"registry:component"},"tree":[{"children":[{"children":[{"name":"block-list-static.tsx","path":"@components/editor/block-list-static.tsx"}],"name":"editor"}],"name":"@components"}],"usage":"$undefined"}]}]

Block List Static

Installation

Block List Static

Installation