@udecode/plate-indent-list - npm Package Compare versions

Comparing version 31.1.3 to 31.2.0

dist/index.d.ts

 import * as _udecode_plate_core from '@udecode/plate-core';
 import * as _udecode_slate from '@udecode/slate';
-import { EElement, Value, TNodeEntry, EElementOrText, TNode, TEditor, EElementEntry, TElement, InjectComponentProps, InjectComponentReturnType, ENodeEntry, PlateEditor, WithPlatePlugin, KeyboardHandlerReturnType } from '@udecode/plate-common';
+import { EElement, Value, TNodeEntry, EElementOrText, TNode, TEditor, EElementEntry, TElement, PlateEditor, InjectComponentProps, InjectComponentReturnType, ENodeEntry, WithPlatePlugin, KeyboardHandlerReturnType } from '@udecode/plate-common';
 import { SetIndentOptions } from '@udecode/plate-indent';
@@ -53,2 +53,11 @@ import { Path } from 'slate';
 }
+interface LiComponentProps {
+    element: TElement;
+    children: any;
+}
+interface MarkerComponentProps {
+    onChange?: (checked: boolean) => void;
+    element: TElement;
+    editor: PlateEditor<Value>;
+}
 
@@ -66,8 +75,9 @@ declare const KEY_LIST_STYLE_TYPE = "listStyleType";
     getListStyleType?: (element: HTMLElement) => ListStyleType;
-    markerComponent?: React.FC<IMarkerComponentProps>;
+    listStyleTypes?: Record<string, {
+        type: string;
+        markerComponent?: React.FC<MarkerComponentProps>;
+        liComponent?: React.FC<LiComponentProps>;
+        isNumbered?: boolean;
+    }>;
 }
-interface IMarkerComponentProps {
-    onChange: (checked: boolean) => void;
-    checked: boolean;
-}
 declare const createIndentListPlugin: <OP = IndentListPlugin, OV extends _udecode_slate.Value = _udecode_slate.Value, OE extends _udecode_plate_core.PlateEditor<OV> = _udecode_plate_core.PlateEditor<OV>>(override?: Partial<_udecode_plate_core.PlatePlugin<_udecode_plate_core.NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: _udecode_plate_core.OverrideByKey<OV, OE> | undefined) => _udecode_plate_core.PlatePlugin<_udecode_plate_core.NoInfer<OP>, OV, OE>;
@@ -214,2 +224,2 @@
 
-export { type GetIndentListSiblingsOptions, type GetSiblingIndentListOptions, type IMarkerComponentProps, type IndentListOptions, type IndentListPlugin, KEY_LIST_CHECKED, KEY_LIST_RESTART, KEY_LIST_START, KEY_LIST_STYLE_TYPE, KEY_TODO_STYLE_TYPE, ListStyleType, areEqListStyleType, createIndentListPlugin, getIndentListSiblings, getNextIndentList, getPreviousIndentList, getSiblingIndentList, getSiblingListStyleType, indentList, indentTodo, injectIndentListComponent, normalizeFirstIndentListStart, normalizeIndentList, normalizeIndentListNotIndented, normalizeIndentListStart, normalizeNextIndentListStart, onKeyDownIndentList, outdentList, setIndentListNode, setIndentListNodes, setIndentListSiblingNodes, setIndentTodoNode, someIndentList, toggleIndentList, toggleIndentListSet, toggleIndentListUnset, useIndentListToolbarButton, useIndentListToolbarButtonState, useIndentTodoToolBarButton, useIndentTodoToolBarButtonState, withIndentList };
+export { type GetIndentListSiblingsOptions, type GetSiblingIndentListOptions, type IndentListOptions, type IndentListPlugin, KEY_LIST_CHECKED, KEY_LIST_RESTART, KEY_LIST_START, KEY_LIST_STYLE_TYPE, KEY_TODO_STYLE_TYPE, type LiComponentProps, ListStyleType, type MarkerComponentProps, areEqListStyleType, createIndentListPlugin, getIndentListSiblings, getNextIndentList, getPreviousIndentList, getSiblingIndentList, getSiblingListStyleType, indentList, indentTodo, injectIndentListComponent, normalizeFirstIndentListStart, normalizeIndentList, normalizeIndentListNotIndented, normalizeIndentListStart, normalizeNextIndentListStart, onKeyDownIndentList, outdentList, setIndentListNode, setIndentListNodes, setIndentListSiblingNodes, setIndentTodoNode, someIndentList, toggleIndentList, toggleIndentListSet, toggleIndentListUnset, useIndentListToolbarButton, useIndentListToolbarButtonState, useIndentTodoToolBarButton, useIndentTodoToolBarButtonState, withIndentList };

dist/index.js

@@ -108,3 +108,43 @@ "use strict";
 var import_clsx = require("clsx");
+var injectIndentListComponent = (props) => {
+  const { element } = props;
+  const listStyleType = element[KEY_LIST_STYLE_TYPE];
+  const listStart = element[KEY_LIST_START];
+  if (listStyleType) {
+    let className = (0, import_clsx.clsx)(`slate-${KEY_LIST_STYLE_TYPE}-${listStyleType}`);
+    const style = {
+      padding: 0,
+      margin: 0,
+      listStyleType,
+      position: "relative"
+    };
+    return function Ul({ editor, children }) {
+      var _a;
+      const { listStyleTypes = {} } = (0, import_plate_common.getPluginOptions)(
+        editor,
+        KEY_LIST_STYLE_TYPE
+      );
+      const targetList = (_a = listStyleTypes[listStyleType]) != null ? _a : {};
+      const isNumbered = targetList ? targetList.isNumbered : false;
+      className = isNumbered ? (0, import_clsx.clsx)(className, "slate-list-number") : (0, import_clsx.clsx)(className, "slate-list-bullet");
+      const {
+        markerComponent = null,
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        liComponent = ({ children: children2 }) => /* @__PURE__ */ import_react.default.createElement("li", null, children2)
+      } = targetList;
+      const Wrap = isNumbered ? "ol" : "ul";
+      return /* @__PURE__ */ import_react.default.createElement(Wrap, { style, className, start: listStart }, markerComponent && markerComponent({ editor, element }), liComponent({
+        children,
+        element
+      }));
+    };
+  }
+};
 
+// src/onKeyDownIndentList.ts
+var import_plate_common10 = require("@udecode/plate-common");
+
+// src/transforms/indentList.ts
+var import_plate_indent = require("@udecode/plate-indent");
+
 // src/types.ts
@@ -138,68 +178,3 @@ var ListStyleType = /* @__PURE__ */ ((ListStyleType2) => {
 
-// src/injectIndentListComponent.tsx
-var injectIndentListComponent = (props) => {
-  const { element } = props;
-  const listStyleType = element[KEY_LIST_STYLE_TYPE];
-  const listStart = element[KEY_LIST_START];
-  const isTodo = element.hasOwnProperty(KEY_LIST_CHECKED) && listStyleType === KEY_TODO_STYLE_TYPE;
-  if (listStyleType && !isTodo) {
-    let className = (0, import_clsx.clsx)(`slate-${KEY_LIST_STYLE_TYPE}-${listStyleType}`);
-    const style = {
-      padding: 0,
-      margin: 0,
-      listStyleType
-    };
-    if (["disc" /* Disc */, "circle" /* Circle */, "square" /* Square */].includes(
-      listStyleType
-    )) {
-      className = (0, import_clsx.clsx)(className, "slate-list-bullet");
-      return function Ul({ children }) {
-        return /* @__PURE__ */ import_react.default.createElement("ul", { style, className }, /* @__PURE__ */ import_react.default.createElement("li", null, children));
-      };
-    }
-    className = (0, import_clsx.clsx)(className, "slate-list-number");
-    return function Ol({ children }) {
-      return /* @__PURE__ */ import_react.default.createElement("ol", { style, className, start: listStart }, /* @__PURE__ */ import_react.default.createElement("li", null, children));
-    };
-  }
-  if (isTodo) {
-    const className = (0, import_clsx.clsx)("slate-list-todo");
-    const checked = element[KEY_LIST_CHECKED];
-    const style = {
-      position: "relative",
-      padding: 0,
-      margin: 0
-    };
-    return function Ol({ children, editor }) {
-      const { markerComponent } = (0, import_plate_common.getPluginOptions)(
-        editor,
-        KEY_LIST_STYLE_TYPE
-      );
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${className}`, style }, /* @__PURE__ */ import_react.default.createElement("div", { contentEditable: false }, markerComponent ? markerComponent({
-        checked,
-        onChange: (v) => {
-          const path = (0, import_plate_common.findNodePath)(editor, element);
-          (0, import_plate_common.setNodes)(editor, { checked: v }, { at: path });
-        }
-      }) : /* @__PURE__ */ import_react.default.createElement(
-        "input",
-        {
-          type: "checkbox",
-          style: { position: "absolute", left: -19, top: 6 },
-          checked,
-          onChange: (v) => {
-            const path = (0, import_plate_common.findNodePath)(editor, element);
-            (0, import_plate_common.setNodes)(editor, { checked: v.target.checked }, { at: path });
-          }
-        }
-      )), /* @__PURE__ */ import_react.default.createElement("span", null, children));
-    };
-  }
-};
-
-// src/onKeyDownIndentList.ts
-var import_plate_common10 = require("@udecode/plate-common");
-
 // src/transforms/indentList.ts
-var import_plate_indent = require("@udecode/plate-indent");
 var indentList = (editor, _a = {}) => {
@@ -206,0 +181,0 @@ var _b = _a, { listStyleType = "disc" /* Disc */ } = _b, options = __objRest(_b, ["listStyleType"]);

package.json

 {
   "name": "@udecode/plate-indent-list",
-  "version": "31.1.3",
+  "version": "31.2.0",
   "description": "Indent list plugin for Plate",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Worsened metrics

Total package byte prevSize

220406

decreased by-2.03%

Lines of code

2288

decreased by-1.8%

No dependency changes