Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ordered list #3077

Merged
merged 5 commits into from
Mar 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rude-laws-stare.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@udecode/plate-indent-list": patch
---

Fix ordered list regression.
8 changes: 2 additions & 6 deletions apps/www/src/registry/default/example/playground-demo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ import {
FireMarker,
} from '@/registry/default/plate-ui/indent-fire-marker-component';
import {
IndentTodoLiComponent,
TodoLi,
TodoMarker,
} from '@/registry/default/plate-ui/indent-todo-marker-component';
import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox';
Expand Down Expand Up @@ -242,14 +242,10 @@ export const usePlaygroundPlugins = ({
enabled: id === 'indentlist' || !!enabled.listStyleType,
options: {
listStyleTypes: {
['upper-roman']: {
type: 'upper-roman',
isNumbered: true,
},
todo: {
type: 'todo',
markerComponent: TodoMarker,
liComponent: IndentTodoLiComponent,
liComponent: TodoLi,
},
fire: {
type: 'fire',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { TIndentElement } from '@udecode/plate-indent';
import {
LiComponentProps,
MarkerComponentProps,
} from '@udecode/plate-indent-list';
import { LiFC, MarkerFC } from '@udecode/plate-indent-list';

export const FireMarker = (props: MarkerComponentProps) => {
export const FireMarker: MarkerFC = (props) => {
const { element } = props;

return (
Expand All @@ -16,7 +13,8 @@ export const FireMarker = (props: MarkerComponentProps) => {
);
};

export const FireLiComponent = (props: LiComponentProps) => {
export const FireLiComponent: LiFC = (props) => {
const { children } = props;

return <span>{children}</span>;
};
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import { cn } from '@udecode/cn';
import {
LiComponentProps,
MarkerComponentProps,
} from '@udecode/plate-indent-list';
import { LiFC, MarkerFC } from '@udecode/plate-indent-list';
import { setNodes } from '@udecode/slate';
import { findNodePath } from '@udecode/slate-react';

import { Checkbox } from './checkbox';

export const TodoMarker = (props: MarkerComponentProps) => {
export const TodoMarker: MarkerFC = (props) => {
const { editor, element } = props;

const onChange = (v: boolean) => {
Expand All @@ -27,8 +24,9 @@ export const TodoMarker = (props: MarkerComponentProps) => {
);
};

export const IndentTodoLiComponent = (props: LiComponentProps) => {
export const TodoLi: LiFC = (props) => {
const { element, children } = props;

return (
<span
className={cn(
Expand Down
12 changes: 8 additions & 4 deletions packages/indent-list/src/createIndentListPlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
getPluginType,
isHtmlBlockElement,
KEY_DESERIALIZE_HTML,
PlateRenderElementProps,
postCleanHtml,
TElement,
traverseHtmlElements,
Expand All @@ -12,7 +13,7 @@ import {
import { injectIndentListComponent } from './injectIndentListComponent';
import { onKeyDownIndentList } from './onKeyDownIndentList';
import { GetSiblingIndentListOptions } from './queries/getSiblingIndentList';
import { LiComponentProps, ListStyleType, MarkerComponentProps } from './types';
import { ListStyleType } from './types';
import { withIndentList } from './withIndentList';

export const KEY_LIST_STYLE_TYPE = 'listStyleType';
Expand All @@ -21,6 +22,9 @@ export const KEY_LIST_RESTART = 'listRestart';
export const KEY_LIST_CHECKED = 'checked';
export const KEY_TODO_STYLE_TYPE = 'todo';

export type MarkerFC = React.FC<Omit<PlateRenderElementProps, 'children'>>;
export type LiFC = React.FC<PlateRenderElementProps>;

export interface IndentListPlugin {
getSiblingIndentListOptions?: GetSiblingIndentListOptions<TElement>;

Expand All @@ -33,9 +37,9 @@ export interface IndentListPlugin {
string,
{
type: string;
markerComponent?: React.FC<MarkerComponentProps>;
liComponent?: React.FC<LiComponentProps>;
isNumbered?: boolean;
markerComponent?: MarkerFC;
liComponent?: LiFC;
isOrdered?: boolean;
}
>;
}
Expand Down
52 changes: 31 additions & 21 deletions packages/indent-list/src/injectIndentListComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@ import {
KEY_LIST_START,
KEY_LIST_STYLE_TYPE,
} from './createIndentListPlugin';
import { ULIST_STYLE_TYPES } from './types';

export const injectIndentListComponent = (
props: InjectComponentProps
injectProps: InjectComponentProps
): InjectComponentReturnType => {
const { element } = props;
const { element } = injectProps;

const listStyleType = element[KEY_LIST_STYLE_TYPE] as string;
const listStart = element[KEY_LIST_START] as number;
Expand All @@ -29,35 +30,44 @@ export const injectIndentListComponent = (
position: 'relative',
};

return function Ul({ editor, children }) {
return function Component({ children, ...props }) {
const { editor } = props;

const { listStyleTypes = {} } = getPluginOptions<IndentListPlugin>(
editor,
KEY_LIST_STYLE_TYPE
);

const targetList = listStyleTypes[listStyleType] ?? {};
const isNumbered = targetList ? targetList.isNumbered : false;
let listOptions = listStyleTypes[listStyleType];

className = isNumbered
? clsx(className, 'slate-list-number')
: clsx(className, 'slate-list-bullet');
let isOrdered = true;

const {
markerComponent = null,
// eslint-disable-next-line @typescript-eslint/no-shadow
liComponent = ({ children }: any) => <li>{children}</li>,
} = targetList;
if (listOptions) {
isOrdered = !!listOptions.isOrdered;
} else {
if (ULIST_STYLE_TYPES.includes(listStyleType as any)) {
isOrdered = false;
}
listOptions = {} as any;
}

className = isOrdered
? clsx(className, 'slate-ol')
: clsx(className, 'slate-ul');

const Wrap = isNumbered ? 'ol' : 'ul';
const List = isOrdered ? 'ol' : 'ul';

const {
markerComponent: Marker = () => null,
liComponent: Li = (liProps) => <li>{liProps.children}</li>,
} = listOptions;

return (
<Wrap style={style} className={className} start={listStart}>
{markerComponent && markerComponent({ editor, element })}
{liComponent({
children,
element,
})}
</Wrap>
<List style={style} className={className} start={listStart}>
<Marker {...props} />

<Li {...props}>{children}</Li>
</List>
);
};
}
Expand Down
120 changes: 52 additions & 68 deletions packages/indent-list/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,83 +1,67 @@
import { PlateEditor, TElement, Value } from '@udecode/plate-common';

export enum ListStyleType {
// The marker is traditional Armenian numbering
Armenian = 'armenian',

// The marker is a circle
Circle = 'circle',

// The marker is plain ideographic numbers
CjkIdeographic = 'cjk-ideographic',

// The marker is a number. This is default for <ol>
Decimal = 'decimal',

// The marker is a number with leading zeros (01, 02, 03, etc.)
DecimalLeadingZero = 'decimal-leading-zero',

// The marker is a filled circle. This is default for <ul>
Disc = 'disc',

// The marker is traditional Georgian numbering
ArabicIndic = 'arabic-indic',
Armenian = 'armenian',
UpperArmenian = 'upper-armenian',
LowerArmenian = 'lower-armenian',
Bengali = 'bengali',
Cambodian = 'cambodian',
Khmer = 'khmer',
CjkDecimal = 'cjk-decimal',
Devanagari = 'devanagari',
Georgian = 'georgian',

// The marker is traditional Hebrew numbering
Gujarati = 'gujarati',
Gurmukhi = 'gurmukhi',
Hebrew = 'hebrew',

// The marker is traditional Hiragana numbering
Kannada = 'kannada',
Lao = 'lao',
Malayalam = 'malayalam',
Mongolian = 'mongolian',
Myanmar = 'myanmar',
Oriya = 'oriya',
Persian = 'persian',
LowerRoman = 'lower-roman',
UpperRoman = 'upper-roman',
Tamil = 'tamil',
Telugu = 'telugu',
Thai = 'thai',
Tibetan = 'tibetan',
LowerAlpha = 'lower-alpha',
LowerLatin = 'lower-latin',
UpperAlpha = 'upper-alpha',
UpperLatin = 'upper-latin',
LowerGreek = 'lower-greek',
Hiragana = 'hiragana',

// The marker is traditional Hiragana iroha numbering
HiraganaIroha = 'hiragana-iroha',

// The marker is traditional Katakana numbering
Katakana = 'katakana',

// The marker is traditional Katakana iroha numbering
KatakanaIroha = 'katakana-iroha',

// The marker is lower-alpha (a, b, c, d, e, etc.)
LowerAlpha = 'lower-alpha',

// The marker is lower-greek
LowerGreek = 'lower-greek',

// The marker is lower-latin (a, b, c, d, e, etc.)
LowerLatin = 'lower-latin',

// The marker is lower-roman (i, ii, iii, iv, v, etc.)
LowerRoman = 'lower-roman',

// No marker is shown
CjkEarthlyBranch = 'cjk-earthly-branch',
CjkHeavenlyStem = 'cjk-heavenly-stem',
JapaneseInformal = 'japanese-informal',
JapaneseFormal = 'japanese-formal',
KoreanHangulFormal = 'korean-hangul-formal',
KoreanHanjaInformal = 'korean-hanja-informal',
KoreanHanjaFormal = 'korean-hanja-formal',
SimpChineseInformal = 'simp-chinese-informal',
SimpChineseFormal = 'simp-chinese-formal',
TradChineseInformal = 'trad-chinese-informal',
TradChineseFormal = 'trad-chinese-formal',
EthiopicNumeric = 'ethiopic-numeric',
DisclosureOpen = 'disclosure-open',
DisclosureClosed = 'disclosure-closed',
None = 'none',

// The marker is a square
Circle = 'circle',
Disc = 'disc',
Square = 'square',

// The marker is upper-alpha (A, B, C, D, E, etc.)
UpperAlpha = 'upper-alpha',

// The marker is upper-latin (A, B, C, D, E, etc.)
UpperLatin = 'upper-latin',

// The marker is upper-roman (I, II, III, IV, V, etc.)
UpperRoman = 'upper-roman',

// Sets this property to its default value. Read about initial
Initial = 'initial',

// Inherits this property from its parent element. Read about inherit
Inherit = 'inherit',
}

export interface LiComponentProps {
element: TElement;
children: any;
}

export interface MarkerComponentProps {
onChange?: (checked: boolean) => void;
element: TElement;
editor: PlateEditor<Value>;
}
export const ULIST_STYLE_TYPES = [
ListStyleType.Disc,
ListStyleType.Circle,
ListStyleType.Square,
ListStyleType.DisclosureOpen,
ListStyleType.DisclosureClosed,
] as const;