@pixpilot/formily-shadcn 2.1.1 → 2.2.1

package/dist/components/date-picker/DatePicker.d.cts

@@ -1,12 +1,12 @@
-import * as react2 from "react";
+import * as react0 from "react";
 import { DatePickerProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/date-picker/DatePicker.d.ts
 
-declare const DatePicker: react2.ForwardRefExoticComponent<Partial<{
+declare const DatePicker: react0.ForwardRefExoticComponent<Partial<{
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
-} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react2.RefAttributes<unknown>>;
+} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react0.RefAttributes<unknown>>;
 //#endregion
 export { DatePicker };

package/dist/components/date-picker/DatePicker.d.ts

@@ -1,12 +1,12 @@
-import * as react2 from "react";
+import * as react0 from "react";
 import { DatePickerProps } from "@pixpilot/shadcn-ui";
 
 //#region src/components/date-picker/DatePicker.d.ts
 
-declare const DatePicker$1: react2.ForwardRefExoticComponent<Partial<{
+declare const DatePicker$1: react0.ForwardRefExoticComponent<Partial<{
   value?: Date;
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
-} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react2.RefAttributes<unknown>>;
+} & Omit<DatePickerProps, "onSelect" | "selected" | "mode">> & react0.RefAttributes<unknown>>;
 //#endregion
 export { DatePicker$1 as DatePicker };

package/dist/components/dialog-item/ConnectedDialogItem.d.cts

@@ -1,5 +1,5 @@
 import { DialogItemProps } from "./BaseDialogItem.cjs";
-import * as react4 from "react";
+import * as react1 from "react";
 
 //#region src/components/dialog-item/ConnectedDialogItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react4 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const DialogItem: react4.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
-  children?: react4.ReactNode | undefined;
-}>, "ref"> & react4.RefAttributes<unknown>>;
+declare const DialogItem: react1.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
+  children?: react1.ReactNode | undefined;
+}>, "ref"> & react1.RefAttributes<unknown>>;
 //#endregion
 export { DialogItem };

package/dist/components/dialog-item/ConnectedDialogItem.d.ts

@@ -1,5 +1,5 @@
 import { DialogItemProps } from "./BaseDialogItem.js";
-import * as react0 from "react";
+import * as react1 from "react";
 
 //#region src/components/dialog-item/ConnectedDialogItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react0 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const DialogItem: react0.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
-  children?: react0.ReactNode | undefined;
-}>, "ref"> & react0.RefAttributes<unknown>>;
+declare const DialogItem: react1.ForwardRefExoticComponent<Omit<Partial<DialogItemProps & {
+  children?: react1.ReactNode | undefined;
+}>, "ref"> & react1.RefAttributes<unknown>>;
 //#endregion
 export { DialogItem };

package/dist/components/drawer-item/ConnectedDrawerItem.d.cts

@@ -1,5 +1,5 @@
 import { DrawerItemProps } from "./BaseDrawerItem.cjs";
-import * as react7 from "react";
+import * as react4 from "react";
 
 //#region src/components/drawer-item/ConnectedDrawerItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react7 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const DrawerItem: react7.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
-  children?: react7.ReactNode | undefined;
-}>, "ref"> & react7.RefAttributes<unknown>>;
+declare const DrawerItem: react4.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
+  children?: react4.ReactNode | undefined;
+}>, "ref"> & react4.RefAttributes<unknown>>;
 //#endregion
 export { DrawerItem };

package/dist/components/form/Form.d.cts

@@ -2,7 +2,7 @@ import { FormContextStates } from "../context/form-context.cjs";
 import "../context/index.cjs";
 import React from "react";
 import { Form } from "@formily/core";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/form/Form.d.ts
 interface IFormProps extends FormContextStates {
@@ -27,6 +27,6 @@ declare function Form$1({
   onAutoSubmit,
   layout,
   settings
-}: IFormProps): react_jsx_runtime3.JSX.Element;
+}: IFormProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Form$1 as Form, IFormProps };

package/dist/components/form/Form.d.ts

@@ -1,7 +1,7 @@
 import { FormContextStates } from "../context/form-context.js";
 import "../context/index.js";
 import React from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Form } from "@formily/core";
 
 //#region src/components/form/Form.d.ts
@@ -27,6 +27,6 @@ declare function Form$1({
   onAutoSubmit,
   layout,
   settings
-}: IFormProps): react_jsx_runtime1.JSX.Element;
+}: IFormProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Form$1 as Form, IFormProps };

package/dist/components/form/mcp.js

@@ -14,11 +14,48 @@ const meta = {
 		},
 		layout: "Optional layout configuration passed through the Formily shadcn form context.",
 		onAutoSubmit: "Called with submitted values after the underlying Formily form submit succeeds.",
-		settings: "Optional form settings passed through the Formily shadcn form context."
+		settings: "Optional form-wide settings passed through the Formily shadcn form context. Each key holds default props applied to every instance of that component in the form (field-level x-component-props still override them). Notably `settings.richTextEditor` accepts the full RichTextEditorProps, so you can register TipTap `extensions` (and their toolbar buttons) once for all RichTextEditor fields. See the \"RichTextEditor extensions via form settings\" example."
 	}),
 	examples: [{
 		title: "Basic Formily form",
 		code: "<Form form={form} onSubmit={(values) => save(values)}><SchemaField schema={schema} /></Form>"
+	}, {
+		title: "RichTextEditor extensions via form settings",
+		code: `import { Mark, mergeAttributes } from '@tiptap/core';
+
+// Register a custom TipTap extension (or an official package like
+// @tiptap/extension-highlight) once for every RichTextEditor field in the form.
+const Highlight = Mark.create({
+  name: 'highlight',
+  parseHTML() {
+    return [{ tag: 'mark' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['mark', mergeAttributes(HTMLAttributes), 0];
+  },
+});
+
+<Form
+  form={form}
+  settings={{
+    richTextEditor: {
+      extensions: [Highlight],
+      toolbarItems: [
+        'bold',
+        'italic',
+        '|',
+        {
+          icon: '🖍️',
+          tooltip: 'Highlight',
+          onClick: (editor) => editor.chain().focus().toggleMark('highlight').run(),
+          isActive: (editor) => editor.isActive('highlight'),
+        },
+      ],
+    },
+  }}
+>
+  <SchemaField schema={schema} />
+</Form>`
 	}],
 	keywords: [
 		"formily",

package/dist/components/form-grid/FormGrid.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form-grid/FormGrid.d.ts
 interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -7,6 +7,6 @@ declare function FormGrid({
   className,
   children,
   ...rest
-}: IFormGridProps): react_jsx_runtime4.JSX.Element;
+}: IFormGridProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FormGrid, IFormGridProps };

package/dist/components/form-grid/FormGrid.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/form-grid/FormGrid.d.ts
 interface IFormGridProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -7,6 +7,6 @@ declare function FormGrid({
   className,
   children,
   ...rest
-}: IFormGridProps): react_jsx_runtime0.JSX.Element;
+}: IFormGridProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { FormGrid, IFormGridProps };

package/dist/components/form-item/ConnectedFormItem.d.cts

@@ -1,13 +1,13 @@
 import { FormItemProps } from "./form-item-types.cjs";
-import * as react1585 from "react";
+import * as react1583 from "react";
 
 //#region src/components/form-item/ConnectedFormItem.d.ts
 /**
  * FormItem component connected to Formily field state.
  * Automatically maps field validation state to component props.
  */
-declare const FormItem: react1585.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
-  children?: react1585.ReactNode | undefined;
-}>, "ref"> & react1585.RefAttributes<unknown>>;
+declare const FormItem: react1583.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1583.ReactNode | undefined;
+}>, "ref"> & react1583.RefAttributes<unknown>>;
 //#endregion
 export { FormItem };

package/dist/components/popover-item/ConnectedPopoverItem.d.cts

@@ -1,5 +1,5 @@
 import { PopoverItemProps } from "./BasePopoverItem.cjs";
-import * as react0 from "react";
+import * as react7 from "react";
 
 //#region src/components/popover-item/ConnectedPopoverItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react0 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const PopoverItem: react0.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
-  children?: react0.ReactNode | undefined;
-}>, "ref"> & react0.RefAttributes<unknown>>;
+declare const PopoverItem: react7.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
+  children?: react7.ReactNode | undefined;
+}>, "ref"> & react7.RefAttributes<unknown>>;
 //#endregion
 export { PopoverItem };

package/dist/components/radio/Radio.d.cts

@@ -1,5 +1,5 @@
 import { ComponentProps, FC } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { RadioGroup } from "@pixpilot/shadcn";
 
 //#region src/components/radio/Radio.d.ts
@@ -15,7 +15,7 @@ type RadioProps = {
 /**
  * Radio component with options rendering
  */
-declare function Radio(props: RadioProps): react_jsx_runtime1.JSX.Element;
+declare function Radio(props: RadioProps): react_jsx_runtime2.JSX.Element;
 declare namespace Radio {
   var displayName: string;
 }

package/dist/components/rich-text-editor/mcp.js

@@ -11,7 +11,7 @@ const meta = {
 		editable: "Forwarded to the underlying UI component.",
 		editorProps: "Forwarded to the underlying UI component.",
 		immediatelyRender: "Forwarded to the underlying UI component.",
-		extensions: "Forwarded to the underlying UI component.",
+		extensions: "Additional TipTap extensions forwarded to the underlying UI component, appended to the built-in ones (StarterKit, Link, TextAlign, Placeholder). Accepts any TipTap Extension, Node, or Mark. In schema forms pass them via `x-component-props.extensions`. See the \"Add a custom extension\" example.",
 		slots: "Slot props for customizing internal rendered parts.",
 		showToolbar: "Forwarded to the underlying UI component.",
 		toolbarItems: "Forwarded to the underlying UI component.",
@@ -20,12 +20,14 @@ const meta = {
 		allowLinkTarget: "Forwarded to the underlying UI component.",
 		openOnClick: "Forwarded to the underlying UI component."
 	}),
-	examples: [{
-		title: "Declarative schema field",
-		code: `<SchemaField.String name="richTextEditor" title="RichTextEditor" x-decorator="FormItem" x-component="RichTextEditor" />`
-	}, {
-		title: "JSON schema for form renderer",
-		code: `{
+	examples: [
+		{
+			title: "Declarative schema field",
+			code: `<SchemaField.String name="richTextEditor" title="RichTextEditor" x-decorator="FormItem" x-component="RichTextEditor" />`
+		},
+		{
+			title: "JSON schema for form renderer",
+			code: `{
   type: 'object',
   properties: {
     richTextEditor: {
@@ -36,7 +38,50 @@ const meta = {
     },
   },
 }`
-	}],
+		},
+		{
+			title: "Add a custom extension via x-component-props",
+			code: `import { Mark, mergeAttributes } from '@tiptap/core';
+
+// Any Mark.create / Node.create / Extension.create result (or an official
+// package like @tiptap/extension-highlight) can be passed to \`extensions\`.
+const Highlight = Mark.create({
+  name: 'highlight',
+  parseHTML() {
+    return [{ tag: 'mark' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['mark', mergeAttributes(HTMLAttributes), 0];
+  },
+});
+
+const schema = {
+  type: 'object',
+  properties: {
+    richText: {
+      type: 'string',
+      title: 'Rich Text Editor',
+      'x-decorator': 'FormItem',
+      'x-component': 'RichTextEditor',
+      'x-component-props': {
+        extensions: [Highlight],
+        toolbarItems: [
+          'bold',
+          'italic',
+          '|',
+          {
+            icon: '🖍️',
+            tooltip: 'Highlight',
+            onClick: (editor) => editor.chain().focus().toggleMark('highlight').run(),
+            isActive: (editor) => editor.isActive('highlight'),
+          },
+        ],
+      },
+    },
+  },
+};`
+		}
+	],
 	keywords: [
 		"formily",
 		"rich text",

package/dist/components/row/Row.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/row/Row.d.ts
 interface IRowProps {
@@ -36,6 +36,6 @@ interface IRowProps {
 declare function Row({
   className,
   children
-}: IRowProps): react_jsx_runtime0.JSX.Element;
+}: IRowProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { IRowProps, Row };

package/dist/utils/transform-schema.cjs

@@ -26,13 +26,33 @@ const inputSchemaMap = {
 	},
 	object: { "x-component": "ObjectContainer" }
 };
-function transformSchema(schema, fieldsDecorators) {
-	let normalizedSchema;
-	try {
-		normalizedSchema = JSON.parse(JSON.stringify(schema));
-	} catch {
-		normalizedSchema = JSON.parse(JSON.stringify(schema));
+/**
+* Deep-clone the plain-object/array structure of a schema while keeping any
+* non-plain values (functions, class instances such as TipTap extensions,
+* Dates, etc.) by reference.
+*
+* A plain `JSON.parse(JSON.stringify(...))` clone silently drops function
+* values, which breaks `x-component-props` that carry callbacks (e.g. custom
+* toolbar `onClick` handlers) or class instances (e.g. TipTap `extensions`,
+* whose `parseHTML`/`renderHTML` methods would be stripped). This clone only
+* copies plain objects and arrays — the parts `transformSchema` actually
+* mutates — and leaves everything else untouched.
+*/
+function cloneSchemaPreservingRefs(value) {
+	if (Array.isArray(value)) return value.map((item) => cloneSchemaPreservingRefs(item));
+	if (value !== null && typeof value === "object") {
+		const proto = Object.getPrototypeOf(value);
+		if (proto === Object.prototype || proto === null) {
+			const source = value;
+			const out = {};
+			for (const key of Object.keys(source)) out[key] = cloneSchemaPreservingRefs(source[key]);
+			return out;
+		}
 	}
+	return value;
+}
+function transformSchema(schema, fieldsDecorators) {
+	const normalizedSchema = cloneSchemaPreservingRefs(schema);
 	(0, json_schema_traverse.default)(normalizedSchema, { allKeys: true }, (currentSchema, _jsonPtr, _rootSchema, _parentJSONPtr, parentKeyword, _parentSchema, _keyIndex) => {
 		const { type } = currentSchema;
 		const xComponent = currentSchema["x-component"];

package/dist/utils/transform-schema.js

@@ -24,13 +24,33 @@ const inputSchemaMap = {
 	},
 	object: { "x-component": "ObjectContainer" }
 };
-function transformSchema(schema, fieldsDecorators) {
-	let normalizedSchema;
-	try {
-		normalizedSchema = JSON.parse(JSON.stringify(schema));
-	} catch {
-		normalizedSchema = JSON.parse(JSON.stringify(schema));
+/**
+* Deep-clone the plain-object/array structure of a schema while keeping any
+* non-plain values (functions, class instances such as TipTap extensions,
+* Dates, etc.) by reference.
+*
+* A plain `JSON.parse(JSON.stringify(...))` clone silently drops function
+* values, which breaks `x-component-props` that carry callbacks (e.g. custom
+* toolbar `onClick` handlers) or class instances (e.g. TipTap `extensions`,
+* whose `parseHTML`/`renderHTML` methods would be stripped). This clone only
+* copies plain objects and arrays — the parts `transformSchema` actually
+* mutates — and leaves everything else untouched.
+*/
+function cloneSchemaPreservingRefs(value) {
+	if (Array.isArray(value)) return value.map((item) => cloneSchemaPreservingRefs(item));
+	if (value !== null && typeof value === "object") {
+		const proto = Object.getPrototypeOf(value);
+		if (proto === Object.prototype || proto === null) {
+			const source = value;
+			const out = {};
+			for (const key of Object.keys(source)) out[key] = cloneSchemaPreservingRefs(source[key]);
+			return out;
+		}
 	}
+	return value;
+}
+function transformSchema(schema, fieldsDecorators) {
+	const normalizedSchema = cloneSchemaPreservingRefs(schema);
 	traverse(normalizedSchema, { allKeys: true }, (currentSchema, _jsonPtr, _rootSchema, _parentJSONPtr, parentKeyword, _parentSchema, _keyIndex) => {
 		const { type } = currentSchema;
 		const xComponent = currentSchema["x-component"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/formily-shadcn",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Formily integration for shadcn/ui components",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -48,26 +48,27 @@
     "@pixpilot/string": "^3.0.1",
     "json-schema-traverse": "^1.0.0",
     "lucide-react": "^0.562.0",
-    "pretty-bytes": "^7.1.0",
+    "pretty-bytes": "^7.1.1",
     "zod": "^4.3.6",
     "@pixpilot/shadcn": "2.1.0",
-    "@pixpilot/shadcn-ui": "3.5.1"
+    "@pixpilot/shadcn-ui": "3.6.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
     "@testing-library/react": "^16.3.2",
+    "@tiptap/core": "^3.22.3",
     "@types/node": "^22.19.17",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsdown": "^0.15.12",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/mcp": "0.0.0",
     "@internal/prettier-config": "0.0.1",
+    "@internal/mcp": "0.0.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"