@flanksource/clicky-ui 0.3.6 → 0.3.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/dist/components/DateField.d.ts +1 -1
- package/dist/components/DatePicker.d.ts +1 -1
- package/dist/components/DateTimePicker.d.ts +1 -1
- package/dist/components/FormLookupProvider.cjs +12 -0
- package/dist/components/FormLookupProvider.cjs.map +1 -0
- package/dist/components/FormLookupProvider.d.ts +7 -0
- package/dist/components/FormLookupProvider.d.ts.map +1 -0
- package/dist/components/FormLookupProvider.js +12 -0
- package/dist/components/FormLookupProvider.js.map +1 -0
- package/dist/components/JsonSchemaForm.cjs +2 -2
- package/dist/components/JsonSchemaForm.cjs.map +1 -1
- package/dist/components/JsonSchemaForm.js +1 -1
- package/dist/components/JsonSchemaForm.js.map +1 -1
- package/dist/components/ListMenu.cjs +145 -0
- package/dist/components/ListMenu.cjs.map +1 -0
- package/dist/components/ListMenu.d.ts +54 -0
- package/dist/components/ListMenu.d.ts.map +1 -0
- package/dist/components/ListMenu.js +145 -0
- package/dist/components/ListMenu.js.map +1 -0
- package/dist/components/MdxEditorField.cjs +128 -0
- package/dist/components/MdxEditorField.cjs.map +1 -0
- package/dist/components/MdxEditorField.d.ts +4 -0
- package/dist/components/MdxEditorField.d.ts.map +1 -0
- package/dist/components/MdxEditorField.js +106 -0
- package/dist/components/MdxEditorField.js.map +1 -0
- package/dist/components/MdxEditorToolbar.cjs +76 -0
- package/dist/components/MdxEditorToolbar.cjs.map +1 -0
- package/dist/components/MdxEditorToolbar.d.ts +8 -0
- package/dist/components/MdxEditorToolbar.d.ts.map +1 -0
- package/dist/components/MdxEditorToolbar.js +76 -0
- package/dist/components/MdxEditorToolbar.js.map +1 -0
- package/dist/components/button-variants.d.ts +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/form-lookup-context.cjs +1 -8
- package/dist/components/form-lookup-context.cjs.map +1 -1
- package/dist/components/form-lookup-context.d.ts +1 -5
- package/dist/components/form-lookup-context.d.ts.map +1 -1
- package/dist/components/form-lookup-context.js +1 -8
- package/dist/components/form-lookup-context.js.map +1 -1
- package/dist/components/jotai-bindings-core.cjs +197 -0
- package/dist/components/jotai-bindings-core.cjs.map +1 -0
- package/dist/components/jotai-bindings-core.d.ts +45 -0
- package/dist/components/jotai-bindings-core.d.ts.map +1 -0
- package/dist/components/jotai-bindings-core.js +197 -0
- package/dist/components/jotai-bindings-core.js.map +1 -0
- package/dist/components/jotai-bindings.cjs +17 -0
- package/dist/components/jotai-bindings.cjs.map +1 -0
- package/dist/components/jotai-bindings.d.ts +4 -0
- package/dist/components/jotai-bindings.d.ts.map +1 -0
- package/dist/components/jotai-bindings.js +17 -0
- package/dist/components/jotai-bindings.js.map +1 -0
- package/dist/components/json-schema-form-fields.cjs +37 -0
- package/dist/components/json-schema-form-fields.cjs.map +1 -1
- package/dist/components/json-schema-form-fields.d.ts +6 -0
- package/dist/components/json-schema-form-fields.d.ts.map +1 -1
- package/dist/components/json-schema-form-fields.js +38 -1
- package/dist/components/json-schema-form-fields.js.map +1 -1
- package/dist/components/json-schema-form-render.cjs +3 -1
- package/dist/components/json-schema-form-render.cjs.map +1 -1
- package/dist/components/json-schema-form-render.d.ts.map +1 -1
- package/dist/components/json-schema-form-render.js +4 -2
- package/dist/components/json-schema-form-render.js.map +1 -1
- package/dist/components/json-schema-form-resolve.cjs +9 -0
- package/dist/components/json-schema-form-resolve.cjs.map +1 -1
- package/dist/components/json-schema-form-resolve.d.ts.map +1 -1
- package/dist/components/json-schema-form-resolve.js +9 -0
- package/dist/components/json-schema-form-resolve.js.map +1 -1
- package/dist/components/json-schema-form-types.d.ts +4 -1
- package/dist/components/json-schema-form-types.d.ts.map +1 -1
- package/dist/components/mdx-editor-field-plugins.cjs +124 -0
- package/dist/components/mdx-editor-field-plugins.cjs.map +1 -0
- package/dist/components/mdx-editor-field-plugins.d.ts +6 -0
- package/dist/components/mdx-editor-field-plugins.d.ts.map +1 -0
- package/dist/components/mdx-editor-field-plugins.js +124 -0
- package/dist/components/mdx-editor-field-plugins.js.map +1 -0
- package/dist/components/mdx-editor-options.d.ts +77 -0
- package/dist/components/mdx-editor-options.d.ts.map +1 -0
- package/dist/components/use-list-menu-selection.cjs +77 -0
- package/dist/components/use-list-menu-selection.cjs.map +1 -0
- package/dist/components/use-list-menu-selection.d.ts +40 -0
- package/dist/components/use-list-menu-selection.d.ts.map +1 -0
- package/dist/components/use-list-menu-selection.js +77 -0
- package/dist/components/use-list-menu-selection.js.map +1 -0
- package/dist/components.cjs +10 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.ts +4 -1
- package/dist/components.d.ts.map +1 -1
- package/dist/components.js +10 -1
- package/dist/components.js.map +1 -1
- package/dist/data/MarkdownEditor.model.d.ts +1 -1
- package/dist/data/PromptBanner.cjs +199 -0
- package/dist/data/PromptBanner.cjs.map +1 -0
- package/dist/data/PromptBanner.d.ts +17 -0
- package/dist/data/PromptBanner.d.ts.map +1 -0
- package/dist/data/PromptBanner.js +199 -0
- package/dist/data/PromptBanner.js.map +1 -0
- package/dist/data/PromptBanner.model.cjs +132 -0
- package/dist/data/PromptBanner.model.cjs.map +1 -0
- package/dist/data/PromptBanner.model.d.ts +23 -0
- package/dist/data/PromptBanner.model.d.ts.map +1 -0
- package/dist/data/PromptBanner.model.js +132 -0
- package/dist/data/PromptBanner.model.js.map +1 -0
- package/dist/data/PromptDialog.cjs +43 -0
- package/dist/data/PromptDialog.cjs.map +1 -0
- package/dist/data/PromptDialog.d.ts +14 -0
- package/dist/data/PromptDialog.d.ts.map +1 -0
- package/dist/data/PromptDialog.js +43 -0
- package/dist/data/PromptDialog.js.map +1 -0
- package/dist/data/TaskManager.cjs +8 -1
- package/dist/data/TaskManager.cjs.map +1 -1
- package/dist/data/TaskManager.d.ts.map +1 -1
- package/dist/data/TaskManager.js +8 -1
- package/dist/data/TaskManager.js.map +1 -1
- package/dist/data/TaskProgress.cjs +15 -2
- package/dist/data/TaskProgress.cjs.map +1 -1
- package/dist/data/TaskProgress.d.ts +0 -10
- package/dist/data/TaskProgress.d.ts.map +1 -1
- package/dist/data/TaskProgress.js +15 -2
- package/dist/data/TaskProgress.js.map +1 -1
- package/dist/data/ai/ChatWindow.cjs +53 -9
- package/dist/data/ai/ChatWindow.cjs.map +1 -1
- package/dist/data/ai/ChatWindow.d.ts.map +1 -1
- package/dist/data/ai/ChatWindow.js +53 -9
- package/dist/data/ai/ChatWindow.js.map +1 -1
- package/dist/data/ai/ToolPreferences.cjs +232 -39
- package/dist/data/ai/ToolPreferences.cjs.map +1 -1
- package/dist/data/ai/ToolPreferences.d.ts +4 -7
- package/dist/data/ai/ToolPreferences.d.ts.map +1 -1
- package/dist/data/ai/ToolPreferences.js +234 -41
- package/dist/data/ai/ToolPreferences.js.map +1 -1
- package/dist/data/chat/clickyOperationsToTools.cjs +89 -3
- package/dist/data/chat/clickyOperationsToTools.cjs.map +1 -1
- package/dist/data/chat/clickyOperationsToTools.d.ts +1 -1
- package/dist/data/chat/clickyOperationsToTools.d.ts.map +1 -1
- package/dist/data/chat/clickyOperationsToTools.js +89 -3
- package/dist/data/chat/clickyOperationsToTools.js.map +1 -1
- package/dist/data/chat/types.cjs.map +1 -1
- package/dist/data/chat/types.d.ts +7 -1
- package/dist/data/chat/types.d.ts.map +1 -1
- package/dist/data/chat/types.js.map +1 -1
- package/dist/data/task-status.cjs +19 -12
- package/dist/data/task-status.cjs.map +1 -1
- package/dist/data/task-status.d.ts +2 -1
- package/dist/data/task-status.d.ts.map +1 -1
- package/dist/data/task-status.js +19 -12
- package/dist/data/task-status.js.map +1 -1
- package/dist/data/test-runner/TestRunner.fixtures.d.ts +11 -4
- package/dist/data/test-runner/TestRunner.fixtures.d.ts.map +1 -1
- package/dist/data/version-info.cjs +3 -3
- package/dist/data/version-info.js +3 -3
- package/dist/data.cjs +7 -0
- package/dist/data.cjs.map +1 -1
- package/dist/data.d.ts +3 -0
- package/dist/data.d.ts.map +1 -1
- package/dist/data.js +7 -0
- package/dist/data.js.map +1 -1
- package/dist/hooks/use-prompts.cjs +83 -0
- package/dist/hooks/use-prompts.cjs.map +1 -0
- package/dist/hooks/use-prompts.d.ts +43 -0
- package/dist/hooks/use-prompts.d.ts.map +1 -0
- package/dist/hooks/use-prompts.js +83 -0
- package/dist/hooks/use-prompts.js.map +1 -0
- package/dist/hooks.cjs +3 -0
- package/dist/hooks.cjs.map +1 -1
- package/dist/hooks.d.ts +1 -0
- package/dist/hooks.d.ts.map +1 -1
- package/dist/hooks.js +3 -0
- package/dist/hooks.js.map +1 -1
- package/dist/index.cjs +17 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +17 -1
- package/dist/index.js.map +1 -1
- package/dist/jotai.cjs +9 -0
- package/dist/jotai.cjs.map +1 -0
- package/dist/jotai.d.ts +4 -0
- package/dist/jotai.d.ts.map +1 -0
- package/dist/jotai.js +9 -0
- package/dist/jotai.js.map +1 -0
- package/dist/lib/utils.cjs +18 -1
- package/dist/lib/utils.cjs.map +1 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +18 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/mdx-editor.cjs +5 -0
- package/dist/mdx-editor.cjs.map +1 -0
- package/dist/mdx-editor.css +2 -0
- package/dist/mdx-editor.d.ts +2 -0
- package/dist/mdx-editor.d.ts.map +1 -0
- package/dist/mdx-editor.js +5 -0
- package/dist/mdx-editor.js.map +1 -0
- package/dist/rpc/apiClient.cjs +1 -1
- package/dist/rpc/apiClient.cjs.map +1 -1
- package/dist/rpc/apiClient.js +1 -1
- package/dist/rpc/apiClient.js.map +1 -1
- package/dist/rpc/surfaceIconMap.cjs +12 -1
- package/dist/rpc/surfaceIconMap.cjs.map +1 -1
- package/dist/rpc/surfaceIconMap.d.ts.map +1 -1
- package/dist/rpc/surfaceIconMap.js +12 -1
- package/dist/rpc/surfaceIconMap.js.map +1 -1
- package/dist/rpc/types.cjs.map +1 -1
- package/dist/rpc/types.d.ts +1 -0
- package/dist/rpc/types.d.ts.map +1 -1
- package/dist/rpc/types.js.map +1 -1
- package/dist/styles.css +1 -1
- package/oxlint-plugins/README.md +148 -0
- package/oxlint-plugins/clicky-ui-no-adhoc-overlay.js +88 -0
- package/oxlint-plugins/clicky-ui-prefer-components.js +46 -0
- package/oxlint-plugins/clicky-ui-prefer-icons.js +121 -0
- package/oxlint-plugins/clicky-ui-prefer-tailwind.js +98 -0
- package/oxlint-plugins/clicky-ui-prefer-theme.js +134 -0
- package/oxlint-plugins/clicky-ui-shared.js +132 -0
- package/oxlint-plugins/clicky-ui.js +34 -0
- package/oxlint-plugins/no-iconify-names.js +37 -0
- package/package.json +24 -4
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { Button } from "./button.js";
|
|
4
|
+
import { ListMenuSelectionContext, useListMenuSelectionContext } from "./use-list-menu-selection.js";
|
|
5
|
+
function ListMenu({
|
|
6
|
+
className,
|
|
7
|
+
selection,
|
|
8
|
+
showCheckboxes = true,
|
|
9
|
+
children,
|
|
10
|
+
...props
|
|
11
|
+
}) {
|
|
12
|
+
const menu = /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border", className), ...props, children });
|
|
13
|
+
if (!selection) return menu;
|
|
14
|
+
return /* @__PURE__ */ jsx(ListMenuSelectionContext.Provider, { value: { selection, showCheckboxes }, children: menu });
|
|
15
|
+
}
|
|
16
|
+
function ListMenuSection({ className, ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx("div", { className, ...props });
|
|
18
|
+
}
|
|
19
|
+
function ListMenuHeader({ className, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: cn(
|
|
24
|
+
"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
|
|
25
|
+
className
|
|
26
|
+
),
|
|
27
|
+
...props
|
|
28
|
+
}
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
function ListMenuItem({
|
|
32
|
+
active = false,
|
|
33
|
+
selected = false,
|
|
34
|
+
accentClassName = "border-transparent",
|
|
35
|
+
interactive = true,
|
|
36
|
+
itemKey,
|
|
37
|
+
hideCheckbox = false,
|
|
38
|
+
className,
|
|
39
|
+
onClick,
|
|
40
|
+
children,
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
const ctx = useListMenuSelectionContext();
|
|
44
|
+
const selectable = ctx !== null && itemKey !== void 0;
|
|
45
|
+
const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;
|
|
46
|
+
const handleClick = (event) => {
|
|
47
|
+
if (selectable && event.shiftKey) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
ctx.selection.toggle(itemKey, { shiftKey: true });
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
onClick == null ? void 0 : onClick(event);
|
|
53
|
+
};
|
|
54
|
+
const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;
|
|
55
|
+
const body = selectable && showCheckbox ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
|
|
56
|
+
/* @__PURE__ */ jsx(
|
|
57
|
+
"input",
|
|
58
|
+
{
|
|
59
|
+
type: "checkbox",
|
|
60
|
+
className: "mt-0.5 size-4 shrink-0 rounded border-input",
|
|
61
|
+
checked: rowSelected,
|
|
62
|
+
"aria-label": "Select item",
|
|
63
|
+
onClick: (event) => {
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
if (event.shiftKey) {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
ctx.selection.toggle(itemKey, { shiftKey: true });
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
onChange: () => ctx.selection.toggle(itemKey)
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
|
|
74
|
+
] }) : children;
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
className: cn(
|
|
79
|
+
"min-w-0 overflow-hidden border-l-2 transition-colors",
|
|
80
|
+
interactive && "cursor-pointer",
|
|
81
|
+
active ? "border-primary bg-primary/10" : rowSelected ? "border-primary/40 bg-primary/5 hover:bg-primary/10" : cn(accentClassName, interactive && "hover:bg-muted"),
|
|
82
|
+
className
|
|
83
|
+
),
|
|
84
|
+
onClick: handleClick,
|
|
85
|
+
...props,
|
|
86
|
+
children: body
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
function ListMenuActionBar({
|
|
91
|
+
selection: selectionProp,
|
|
92
|
+
actions = [],
|
|
93
|
+
renderLabel,
|
|
94
|
+
hideWhenEmpty = true,
|
|
95
|
+
clearLabel = "Clear",
|
|
96
|
+
className,
|
|
97
|
+
children,
|
|
98
|
+
...props
|
|
99
|
+
}) {
|
|
100
|
+
const ctx = useListMenuSelectionContext();
|
|
101
|
+
const selection = selectionProp ?? (ctx == null ? void 0 : ctx.selection);
|
|
102
|
+
if (!selection) return null;
|
|
103
|
+
const { count } = selection;
|
|
104
|
+
if (hideWhenEmpty && count === 0) return null;
|
|
105
|
+
return /* @__PURE__ */ jsxs(
|
|
106
|
+
"div",
|
|
107
|
+
{
|
|
108
|
+
className: cn(
|
|
109
|
+
"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5",
|
|
110
|
+
className
|
|
111
|
+
),
|
|
112
|
+
...props,
|
|
113
|
+
children: [
|
|
114
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: renderLabel ? renderLabel(count) : `${count} selected` }),
|
|
115
|
+
/* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
|
|
116
|
+
actions.map((action, i) => /* @__PURE__ */ jsxs(
|
|
117
|
+
Button,
|
|
118
|
+
{
|
|
119
|
+
type: "button",
|
|
120
|
+
size: "sm",
|
|
121
|
+
variant: action.variant ?? "outline",
|
|
122
|
+
disabled: action.disabled || count === 0,
|
|
123
|
+
onClick: () => action.onClick(selection.selectedKeys),
|
|
124
|
+
children: [
|
|
125
|
+
action.icon,
|
|
126
|
+
action.label
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
i
|
|
130
|
+
)),
|
|
131
|
+
children,
|
|
132
|
+
clearLabel !== null && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => selection.clear(), children: clearLabel })
|
|
133
|
+
] })
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
export {
|
|
139
|
+
ListMenu,
|
|
140
|
+
ListMenuActionBar,
|
|
141
|
+
ListMenuHeader,
|
|
142
|
+
ListMenuItem,
|
|
143
|
+
ListMenuSection
|
|
144
|
+
};
|
|
145
|
+
//# sourceMappingURL=ListMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListMenu.js","sources":["../../src/components/ListMenu.tsx"],"sourcesContent":["import type { HTMLAttributes, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n ListMenuSelectionContext,\n useListMenuSelectionContext,\n type ListMenuSelection,\n} from \"./use-list-menu-selection\";\n\nexport type ListMenuProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * Enables multi-select. Pass the object returned by `useListMenuSelection`;\n * rows that set `itemKey` then become selectable via checkbox or Shift+Click.\n */\n selection?: ListMenuSelection;\n /** Render a leading checkbox on selectable rows (default true when `selection` is set). */\n showCheckboxes?: boolean;\n};\n\nexport function ListMenu({\n className,\n selection,\n showCheckboxes = true,\n children,\n ...props\n}: ListMenuProps) {\n const menu = (\n <div className={cn(\"divide-y divide-border\", className)} {...props}>\n {children}\n </div>\n );\n if (!selection) return menu;\n return (\n <ListMenuSelectionContext.Provider value={{ selection, showCheckboxes }}>\n {menu}\n </ListMenuSelectionContext.Provider>\n );\n}\n\nexport type ListMenuSectionProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuSection({ className, ...props }: ListMenuSectionProps) {\n return <div className={className} {...props} />;\n}\n\nexport type ListMenuHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function ListMenuHeader({ className, ...props }: ListMenuHeaderProps) {\n return (\n <div\n className={cn(\n \"sticky top-0 z-10 flex w-full items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport type ListMenuItemProps = HTMLAttributes<HTMLDivElement> & {\n /** Applies the primary selected-row treatment used for the open/detail row. */\n active?: boolean;\n /** Applies the softer selected treatment used for checkbox or multi-select rows. */\n selected?: boolean;\n /** Left-border class when neither active nor selected. */\n accentClassName?: string;\n /** Whether the row gets pointer and hover affordances. */\n interactive?: boolean;\n /** Stable key that opts the row into `ListMenu` multi-select. */\n itemKey?: string;\n /** Hide the leading checkbox for this row even when selection is enabled. */\n hideCheckbox?: boolean;\n};\n\nexport function ListMenuItem({\n active = false,\n selected = false,\n accentClassName = \"border-transparent\",\n interactive = true,\n itemKey,\n hideCheckbox = false,\n className,\n onClick,\n children,\n ...props\n}: ListMenuItemProps) {\n const ctx = useListMenuSelectionContext();\n const selectable = ctx !== null && itemKey !== undefined;\n const rowSelected = selectable ? ctx.selection.isSelected(itemKey) : selected;\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (selectable && event.shiftKey) {\n event.preventDefault();\n ctx.selection.toggle(itemKey, { shiftKey: true });\n return;\n }\n onClick?.(event);\n };\n\n const showCheckbox = selectable && ctx.showCheckboxes && !hideCheckbox;\n const body =\n selectable && showCheckbox ? (\n <div className=\"flex items-start gap-2\">\n <input\n type=\"checkbox\"\n className=\"mt-0.5 size-4 shrink-0 rounded border-input\"\n checked={rowSelected}\n aria-label=\"Select item\"\n onClick={(event) => {\n event.stopPropagation();\n if (event.shiftKey) {\n event.preventDefault();\n ctx.selection.toggle(itemKey, { shiftKey: true });\n }\n }}\n onChange={() => ctx.selection.toggle(itemKey)}\n />\n <div className=\"min-w-0 flex-1\">{children}</div>\n </div>\n ) : (\n children\n );\n\n return (\n <div\n className={cn(\n \"min-w-0 overflow-hidden border-l-2 transition-colors\",\n interactive && \"cursor-pointer\",\n active\n ? \"border-primary bg-primary/10\"\n : rowSelected\n ? \"border-primary/40 bg-primary/5 hover:bg-primary/10\"\n : cn(accentClassName, interactive && \"hover:bg-muted\"),\n className,\n )}\n onClick={handleClick}\n {...props}\n >\n {body}\n </div>\n );\n}\n\nexport type ListMenuAction = {\n label: ReactNode;\n /** Receives the currently selected keys (ordered as in the menu). */\n onClick: (selectedKeys: string[]) => void;\n icon?: ReactNode;\n disabled?: boolean;\n variant?: ButtonProps[\"variant\"];\n};\n\nexport type ListMenuActionBarProps = HTMLAttributes<HTMLDivElement> & {\n /** Selection to act on; falls back to the enclosing `ListMenu` selection context. */\n selection?: ListMenuSelection;\n /** Bulk actions executed across every selected key. */\n actions?: ListMenuAction[];\n /** Override the \"{n} selected\" summary. */\n renderLabel?: (count: number) => ReactNode;\n /** Hide the whole bar when nothing is selected (default true). */\n hideWhenEmpty?: boolean;\n /** Label for the clear button; pass null to hide it. */\n clearLabel?: ReactNode;\n};\n\nexport function ListMenuActionBar({\n selection: selectionProp,\n actions = [],\n renderLabel,\n hideWhenEmpty = true,\n clearLabel = \"Clear\",\n className,\n children,\n ...props\n}: ListMenuActionBarProps) {\n const ctx = useListMenuSelectionContext();\n const selection = selectionProp ?? ctx?.selection;\n if (!selection) return null;\n const { count } = selection;\n if (hideWhenEmpty && count === 0) return null;\n\n return (\n <div\n className={cn(\n \"flex items-center gap-2 border-b border-border bg-muted px-3 py-1.5\",\n className,\n )}\n {...props}\n >\n <span className=\"text-sm font-medium text-foreground\">\n {renderLabel ? renderLabel(count) : `${count} selected`}\n </span>\n <div className=\"ml-auto flex items-center gap-1\">\n {actions.map((action, i) => (\n <Button\n key={i}\n type=\"button\"\n size=\"sm\"\n variant={action.variant ?? \"outline\"}\n disabled={action.disabled || count === 0}\n onClick={() => action.onClick(selection.selectedKeys)}\n >\n {action.icon}\n {action.label}\n </Button>\n ))}\n {children}\n {clearLabel !== null && (\n <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => selection.clear()}>\n {clearLabel}\n </Button>\n )}\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAmBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,OACJ,oBAAC,OAAA,EAAI,WAAW,GAAG,0BAA0B,SAAS,GAAI,GAAG,OAC1D,SAAA,CACH;AAEF,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,EAAE,WAAW,eAAA,GACpD,UAAA,MACH;AAEJ;AAIO,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AAC7E,SAAO,oBAAC,OAAA,EAAI,WAAuB,GAAG,MAAA,CAAO;AAC/C;AAIO,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAiBO,SAAS,aAAa;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM,4BAAA;AACZ,QAAM,aAAa,QAAQ,QAAQ,YAAY;AAC/C,QAAM,cAAc,aAAa,IAAI,UAAU,WAAW,OAAO,IAAI;AAErE,QAAM,cAAc,CAAC,UAAsC;AACzD,QAAI,cAAc,MAAM,UAAU;AAChC,YAAM,eAAA;AACN,UAAI,UAAU,OAAO,SAAS,EAAE,UAAU,MAAM;AAChD;AAAA,IACF;AACA,uCAAU;AAAA,EACZ;AAEA,QAAM,eAAe,cAAc,IAAI,kBAAkB,CAAC;AAC1D,QAAM,OACJ,cAAc,eACZ,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QACX,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAA;AACN,cAAI,MAAM,UAAU;AAClB,kBAAM,eAAA;AACN,gBAAI,UAAU,OAAO,SAAS,EAAE,UAAU,MAAM;AAAA,UAClD;AAAA,QACF;AAAA,QACA,UAAU,MAAM,IAAI,UAAU,OAAO,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAE9C,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,EAAA,EAAA,CAC5C,IAEA;AAGJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf,SACI,iCACA,cACE,uDACA,GAAG,iBAAiB,eAAe,gBAAgB;AAAA,QACzD;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAwBO,SAAS,kBAAkB;AAAA,EAChC,WAAW;AAAA,EACX,UAAU,CAAA;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,MAAM,4BAAA;AACZ,QAAM,YAAY,kBAAiB,2BAAK;AACxC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,EAAE,UAAU;AAClB,MAAI,iBAAiB,UAAU,EAAG,QAAO;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,uCACb,UAAA,cAAc,YAAY,KAAK,IAAI,GAAG,KAAK,YAAA,CAC9C;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,UAAA,QAAQ,IAAI,CAAC,QAAQ,MACpB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,SAAS,OAAO,WAAW;AAAA,cAC3B,UAAU,OAAO,YAAY,UAAU;AAAA,cACvC,SAAS,MAAM,OAAO,QAAQ,UAAU,YAAY;AAAA,cAEnD,UAAA;AAAA,gBAAA,OAAO;AAAA,gBACP,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YARH;AAAA,UAAA,CAUR;AAAA,UACA;AAAA,UACA,eAAe,QACd,oBAAC,QAAA,EAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,SAAQ,SAAS,MAAM,UAAU,MAAA,GACtE,UAAA,WAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
25
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
26
|
+
const react = require("react");
|
|
27
|
+
const utils = require("../lib/utils.cjs");
|
|
28
|
+
const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
|
|
29
|
+
const mdxEditorFieldPlugins = require("./mdx-editor-field-plugins.cjs");
|
|
30
|
+
const EDITOR_MIN_HEIGHT_CLASS = {
|
|
31
|
+
xs: "min-h-32",
|
|
32
|
+
sm: "min-h-36",
|
|
33
|
+
md: "min-h-40",
|
|
34
|
+
lg: "min-h-48",
|
|
35
|
+
xl: "min-h-56"
|
|
36
|
+
};
|
|
37
|
+
let mdxEditorModulePromise = null;
|
|
38
|
+
function loadMdxEditorModule() {
|
|
39
|
+
mdxEditorModulePromise ?? (mdxEditorModulePromise = import("@mdxeditor/editor"));
|
|
40
|
+
return mdxEditorModulePromise;
|
|
41
|
+
}
|
|
42
|
+
function MdxEditorField({
|
|
43
|
+
id,
|
|
44
|
+
value = "",
|
|
45
|
+
onChange,
|
|
46
|
+
readOnly = false,
|
|
47
|
+
disabled = false,
|
|
48
|
+
size = "md",
|
|
49
|
+
placeholder,
|
|
50
|
+
className,
|
|
51
|
+
contentClassName,
|
|
52
|
+
textareaClassName,
|
|
53
|
+
"aria-label": ariaLabel,
|
|
54
|
+
commitInitialMarkdownNormalize = false,
|
|
55
|
+
...pluginOptions
|
|
56
|
+
}) {
|
|
57
|
+
const [mdx, setMdx] = react.useState(null);
|
|
58
|
+
const editorRef = react.useRef(null);
|
|
59
|
+
const lastValueRef = react.useRef(value);
|
|
60
|
+
const readonly = readOnly || disabled;
|
|
61
|
+
react.useEffect(() => {
|
|
62
|
+
let cancelled = false;
|
|
63
|
+
loadMdxEditorModule().then((mod) => {
|
|
64
|
+
if (!cancelled) setMdx(mod);
|
|
65
|
+
}).catch(() => {
|
|
66
|
+
if (!cancelled) setMdx(null);
|
|
67
|
+
});
|
|
68
|
+
return () => {
|
|
69
|
+
cancelled = true;
|
|
70
|
+
};
|
|
71
|
+
}, []);
|
|
72
|
+
react.useEffect(() => {
|
|
73
|
+
var _a;
|
|
74
|
+
if (!mdx || value === lastValueRef.current) return;
|
|
75
|
+
lastValueRef.current = value;
|
|
76
|
+
(_a = editorRef.current) == null ? void 0 : _a.setMarkdown(value);
|
|
77
|
+
}, [mdx, value]);
|
|
78
|
+
const commit = react.useCallback(
|
|
79
|
+
(next, initialMarkdownNormalize = false) => {
|
|
80
|
+
if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;
|
|
81
|
+
lastValueRef.current = next;
|
|
82
|
+
onChange == null ? void 0 : onChange(next);
|
|
83
|
+
},
|
|
84
|
+
[commitInitialMarkdownNormalize, onChange]
|
|
85
|
+
);
|
|
86
|
+
const plugins = react.useMemo(
|
|
87
|
+
() => mdx ? mdxEditorFieldPlugins.createMdxEditorPlugins(mdx, pluginOptions) : [],
|
|
88
|
+
[mdx, pluginOptions]
|
|
89
|
+
);
|
|
90
|
+
if (!mdx) {
|
|
91
|
+
const fallbackAriaLabel = ariaLabel ?? (id ? void 0 : "Markdown");
|
|
92
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
"textarea",
|
|
94
|
+
{
|
|
95
|
+
id,
|
|
96
|
+
"data-jsf-input": true,
|
|
97
|
+
rows: 6,
|
|
98
|
+
"aria-label": fallbackAriaLabel,
|
|
99
|
+
className: utils.cn(
|
|
100
|
+
jsonSchemaFormUtils.inputClass(size),
|
|
101
|
+
"h-auto resize-y font-mono",
|
|
102
|
+
EDITOR_MIN_HEIGHT_CLASS[size],
|
|
103
|
+
textareaClassName
|
|
104
|
+
),
|
|
105
|
+
value,
|
|
106
|
+
disabled: readonly,
|
|
107
|
+
placeholder: typeof placeholder === "string" ? placeholder : void 0,
|
|
108
|
+
onChange: (event) => commit(event.target.value)
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
const { MDXEditor } = mdx;
|
|
113
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { id, "data-jsf-input": true, className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
114
|
+
MDXEditor,
|
|
115
|
+
{
|
|
116
|
+
ref: editorRef,
|
|
117
|
+
markdown: value,
|
|
118
|
+
readOnly: readonly,
|
|
119
|
+
placeholder,
|
|
120
|
+
plugins,
|
|
121
|
+
className: utils.cn("clicky-mdx-editor-field", readonly && "clicky-mdx-editor-field-readonly", className),
|
|
122
|
+
contentEditableClassName: utils.cn("clicky-mdx-editor-content", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName),
|
|
123
|
+
onChange: commit
|
|
124
|
+
}
|
|
125
|
+
) });
|
|
126
|
+
}
|
|
127
|
+
exports.MdxEditorField = MdxEditorField;
|
|
128
|
+
//# sourceMappingURL=MdxEditorField.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorField.cjs","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n MdxEditorAdmonitionOptions,\n MdxEditorCodeBlockLanguage,\n MdxEditorCodeBlockOptions,\n MdxEditorCodeMirrorOptions,\n MdxEditorDiffModeOptions,\n MdxEditorFieldProps,\n MdxEditorHeadingLevel,\n MdxEditorImageOptions,\n MdxEditorImagePreviewHandler,\n MdxEditorImageUploadHandler,\n MdxEditorLinkOptions,\n MdxEditorPlugin,\n MdxEditorPluginOptions,\n MdxEditorToolbarOptions,\n MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n focus: () => void;\n getContentEditableHTML: () => string;\n getMarkdown: () => string;\n getSelectionMarkdown: () => string;\n insertMarkdown: (markdown: string) => void;\n setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n xs: \"min-h-32\",\n sm: \"min-h-36\",\n md: \"min-h-40\",\n lg: \"min-h-48\",\n xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n id,\n value = \"\",\n onChange,\n readOnly = false,\n disabled = false,\n size = \"md\",\n placeholder,\n className,\n contentClassName,\n textareaClassName,\n \"aria-label\": ariaLabel,\n commitInitialMarkdownNormalize = false,\n ...pluginOptions\n}: MdxEditorFieldProps) {\n const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n const editorRef = useRef<MdxEditorMethods>(null);\n const lastValueRef = useRef(value);\n const readonly = readOnly || disabled;\n\n useEffect(() => {\n let cancelled = false;\n loadMdxEditorModule()\n .then((mod) => {\n if (!cancelled) setMdx(mod);\n })\n .catch(() => {\n if (!cancelled) setMdx(null);\n });\n return () => {\n cancelled = true;\n };\n }, []);\n\n useEffect(() => {\n if (!mdx || value === lastValueRef.current) return;\n lastValueRef.current = value;\n editorRef.current?.setMarkdown(value);\n }, [mdx, value]);\n\n const commit = useCallback(\n (next: string, initialMarkdownNormalize = false) => {\n if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n lastValueRef.current = next;\n onChange?.(next);\n },\n [commitInitialMarkdownNormalize, onChange],\n );\n\n const plugins = useMemo(\n () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n [mdx, pluginOptions],\n );\n\n if (!mdx) {\n const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n return (\n <textarea\n id={id}\n data-jsf-input\n rows={6}\n aria-label={fallbackAriaLabel}\n className={cn(\n inputClass(size),\n \"h-auto resize-y font-mono\",\n EDITOR_MIN_HEIGHT_CLASS[size],\n textareaClassName,\n )}\n value={value}\n disabled={readonly}\n placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n onChange={(event) => commit(event.target.value)}\n />\n );\n }\n\n const { MDXEditor } = mdx;\n return (\n <div id={id} data-jsf-input className=\"min-w-0\">\n <MDXEditor\n ref={editorRef}\n markdown={value}\n readOnly={readonly}\n placeholder={placeholder}\n plugins={plugins}\n className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n onChange={commit}\n />\n </div>\n );\n}\n"],"names":["useState","useRef","useEffect","useCallback","useMemo","createMdxEditorPlugins","jsx","cn","inputClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA,SAAiC,IAAI;AAC3D,QAAM,YAAYC,MAAAA,OAAyB,IAAI;AAC/C,QAAM,eAAeA,MAAAA,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7BC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,QAAAA,UAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAASC,MAAAA;AAAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAUC,MAAAA;AAAAA,IACd,MAAO,MAAMC,sBAAAA,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAWC,MAAAA;AAAAA,UACTC,oBAAAA,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,wCACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAAF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAWC,MAAAA,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0BA,MAAAA,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { MdxEditorFieldProps } from './mdx-editor-options';
|
|
2
|
+
export type { MdxEditorAdmonitionOptions, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
|
|
3
|
+
export declare function MdxEditorField({ id, value, onChange, readOnly, disabled, size, placeholder, className, contentClassName, textareaClassName, "aria-label": ariaLabel, commitInitialMarkdownNormalize, ...pluginOptions }: MdxEditorFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
//# sourceMappingURL=MdxEditorField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorField.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAIhE,YAAY,EACV,0BAA0B,EAC1B,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AA0B9B,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,IAAW,EACX,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EAAE,SAAS,EACvB,8BAAsC,EACtC,GAAG,aAAa,EACjB,EAAE,mBAAmB,2CA6ErB"}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
|
3
|
+
import { cn } from "../lib/utils.js";
|
|
4
|
+
import { inputClass } from "./json-schema-form-utils.js";
|
|
5
|
+
import { createMdxEditorPlugins } from "./mdx-editor-field-plugins.js";
|
|
6
|
+
const EDITOR_MIN_HEIGHT_CLASS = {
|
|
7
|
+
xs: "min-h-32",
|
|
8
|
+
sm: "min-h-36",
|
|
9
|
+
md: "min-h-40",
|
|
10
|
+
lg: "min-h-48",
|
|
11
|
+
xl: "min-h-56"
|
|
12
|
+
};
|
|
13
|
+
let mdxEditorModulePromise = null;
|
|
14
|
+
function loadMdxEditorModule() {
|
|
15
|
+
mdxEditorModulePromise ?? (mdxEditorModulePromise = import("@mdxeditor/editor"));
|
|
16
|
+
return mdxEditorModulePromise;
|
|
17
|
+
}
|
|
18
|
+
function MdxEditorField({
|
|
19
|
+
id,
|
|
20
|
+
value = "",
|
|
21
|
+
onChange,
|
|
22
|
+
readOnly = false,
|
|
23
|
+
disabled = false,
|
|
24
|
+
size = "md",
|
|
25
|
+
placeholder,
|
|
26
|
+
className,
|
|
27
|
+
contentClassName,
|
|
28
|
+
textareaClassName,
|
|
29
|
+
"aria-label": ariaLabel,
|
|
30
|
+
commitInitialMarkdownNormalize = false,
|
|
31
|
+
...pluginOptions
|
|
32
|
+
}) {
|
|
33
|
+
const [mdx, setMdx] = useState(null);
|
|
34
|
+
const editorRef = useRef(null);
|
|
35
|
+
const lastValueRef = useRef(value);
|
|
36
|
+
const readonly = readOnly || disabled;
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
let cancelled = false;
|
|
39
|
+
loadMdxEditorModule().then((mod) => {
|
|
40
|
+
if (!cancelled) setMdx(mod);
|
|
41
|
+
}).catch(() => {
|
|
42
|
+
if (!cancelled) setMdx(null);
|
|
43
|
+
});
|
|
44
|
+
return () => {
|
|
45
|
+
cancelled = true;
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
var _a;
|
|
50
|
+
if (!mdx || value === lastValueRef.current) return;
|
|
51
|
+
lastValueRef.current = value;
|
|
52
|
+
(_a = editorRef.current) == null ? void 0 : _a.setMarkdown(value);
|
|
53
|
+
}, [mdx, value]);
|
|
54
|
+
const commit = useCallback(
|
|
55
|
+
(next, initialMarkdownNormalize = false) => {
|
|
56
|
+
if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;
|
|
57
|
+
lastValueRef.current = next;
|
|
58
|
+
onChange == null ? void 0 : onChange(next);
|
|
59
|
+
},
|
|
60
|
+
[commitInitialMarkdownNormalize, onChange]
|
|
61
|
+
);
|
|
62
|
+
const plugins = useMemo(
|
|
63
|
+
() => mdx ? createMdxEditorPlugins(mdx, pluginOptions) : [],
|
|
64
|
+
[mdx, pluginOptions]
|
|
65
|
+
);
|
|
66
|
+
if (!mdx) {
|
|
67
|
+
const fallbackAriaLabel = ariaLabel ?? (id ? void 0 : "Markdown");
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
"textarea",
|
|
70
|
+
{
|
|
71
|
+
id,
|
|
72
|
+
"data-jsf-input": true,
|
|
73
|
+
rows: 6,
|
|
74
|
+
"aria-label": fallbackAriaLabel,
|
|
75
|
+
className: cn(
|
|
76
|
+
inputClass(size),
|
|
77
|
+
"h-auto resize-y font-mono",
|
|
78
|
+
EDITOR_MIN_HEIGHT_CLASS[size],
|
|
79
|
+
textareaClassName
|
|
80
|
+
),
|
|
81
|
+
value,
|
|
82
|
+
disabled: readonly,
|
|
83
|
+
placeholder: typeof placeholder === "string" ? placeholder : void 0,
|
|
84
|
+
onChange: (event) => commit(event.target.value)
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
const { MDXEditor } = mdx;
|
|
89
|
+
return /* @__PURE__ */ jsx("div", { id, "data-jsf-input": true, className: "min-w-0", children: /* @__PURE__ */ jsx(
|
|
90
|
+
MDXEditor,
|
|
91
|
+
{
|
|
92
|
+
ref: editorRef,
|
|
93
|
+
markdown: value,
|
|
94
|
+
readOnly: readonly,
|
|
95
|
+
placeholder,
|
|
96
|
+
plugins,
|
|
97
|
+
className: cn("clicky-mdx-editor-field", readonly && "clicky-mdx-editor-field-readonly", className),
|
|
98
|
+
contentEditableClassName: cn("clicky-mdx-editor-content", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName),
|
|
99
|
+
onChange: commit
|
|
100
|
+
}
|
|
101
|
+
) });
|
|
102
|
+
}
|
|
103
|
+
export {
|
|
104
|
+
MdxEditorField
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=MdxEditorField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorField.js","sources":["../../src/components/MdxEditorField.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport { inputClass } from \"./json-schema-form-utils\";\nimport { createMdxEditorPlugins } from \"./mdx-editor-field-plugins\";\nimport type { MdxEditorFieldProps } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nexport type {\n MdxEditorAdmonitionOptions,\n MdxEditorCodeBlockLanguage,\n MdxEditorCodeBlockOptions,\n MdxEditorCodeMirrorOptions,\n MdxEditorDiffModeOptions,\n MdxEditorFieldProps,\n MdxEditorHeadingLevel,\n MdxEditorImageOptions,\n MdxEditorImagePreviewHandler,\n MdxEditorImageUploadHandler,\n MdxEditorLinkOptions,\n MdxEditorPlugin,\n MdxEditorPluginOptions,\n MdxEditorToolbarOptions,\n MdxEditorViewMode,\n} from \"./mdx-editor-options\";\n\ninterface MdxEditorMethods {\n focus: () => void;\n getContentEditableHTML: () => string;\n getMarkdown: () => string;\n getSelectionMarkdown: () => string;\n insertMarkdown: (markdown: string) => void;\n setMarkdown: (markdown: string) => void;\n}\n\nconst EDITOR_MIN_HEIGHT_CLASS: Record<FormSize, string> = {\n xs: \"min-h-32\",\n sm: \"min-h-36\",\n md: \"min-h-40\",\n lg: \"min-h-48\",\n xl: \"min-h-56\",\n};\n\nlet mdxEditorModulePromise: Promise<MdxEditorModule> | null = null;\n\nfunction loadMdxEditorModule(): Promise<MdxEditorModule> {\n mdxEditorModulePromise ??= import(\"@mdxeditor/editor\");\n return mdxEditorModulePromise;\n}\n\nexport function MdxEditorField({\n id,\n value = \"\",\n onChange,\n readOnly = false,\n disabled = false,\n size = \"md\",\n placeholder,\n className,\n contentClassName,\n textareaClassName,\n \"aria-label\": ariaLabel,\n commitInitialMarkdownNormalize = false,\n ...pluginOptions\n}: MdxEditorFieldProps) {\n const [mdx, setMdx] = useState<MdxEditorModule | null>(null);\n const editorRef = useRef<MdxEditorMethods>(null);\n const lastValueRef = useRef(value);\n const readonly = readOnly || disabled;\n\n useEffect(() => {\n let cancelled = false;\n loadMdxEditorModule()\n .then((mod) => {\n if (!cancelled) setMdx(mod);\n })\n .catch(() => {\n if (!cancelled) setMdx(null);\n });\n return () => {\n cancelled = true;\n };\n }, []);\n\n useEffect(() => {\n if (!mdx || value === lastValueRef.current) return;\n lastValueRef.current = value;\n editorRef.current?.setMarkdown(value);\n }, [mdx, value]);\n\n const commit = useCallback(\n (next: string, initialMarkdownNormalize = false) => {\n if (initialMarkdownNormalize && !commitInitialMarkdownNormalize) return;\n lastValueRef.current = next;\n onChange?.(next);\n },\n [commitInitialMarkdownNormalize, onChange],\n );\n\n const plugins = useMemo(\n () => (mdx ? createMdxEditorPlugins(mdx, pluginOptions) : []),\n [mdx, pluginOptions],\n );\n\n if (!mdx) {\n const fallbackAriaLabel = ariaLabel ?? (id ? undefined : \"Markdown\");\n return (\n <textarea\n id={id}\n data-jsf-input\n rows={6}\n aria-label={fallbackAriaLabel}\n className={cn(\n inputClass(size),\n \"h-auto resize-y font-mono\",\n EDITOR_MIN_HEIGHT_CLASS[size],\n textareaClassName,\n )}\n value={value}\n disabled={readonly}\n placeholder={typeof placeholder === \"string\" ? placeholder : undefined}\n onChange={(event) => commit(event.target.value)}\n />\n );\n }\n\n const { MDXEditor } = mdx;\n return (\n <div id={id} data-jsf-input className=\"min-w-0\">\n <MDXEditor\n ref={editorRef}\n markdown={value}\n readOnly={readonly}\n placeholder={placeholder}\n plugins={plugins}\n className={cn(\"clicky-mdx-editor-field\", readonly && \"clicky-mdx-editor-field-readonly\", className)}\n contentEditableClassName={cn(\"clicky-mdx-editor-content\", EDITOR_MIN_HEIGHT_CLASS[size], contentClassName)}\n onChange={commit}\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAoCA,MAAM,0BAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAI,yBAA0D;AAE9D,SAAS,sBAAgD;AACvD,sDAA2B,OAAO,mBAAmB;AACrD,SAAO;AACT;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,iCAAiC;AAAA,EACjC,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,KAAK,MAAM,IAAI,SAAiC,IAAI;AAC3D,QAAM,YAAY,OAAyB,IAAI;AAC/C,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,wBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,QAAO,GAAG;AAAA,IAC5B,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,QAAO,IAAI;AAAA,IAC7B,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;;AACd,QAAI,CAAC,OAAO,UAAU,aAAa,QAAS;AAC5C,iBAAa,UAAU;AACvB,oBAAU,YAAV,mBAAmB,YAAY;AAAA,EACjC,GAAG,CAAC,KAAK,KAAK,CAAC;AAEf,QAAM,SAAS;AAAA,IACb,CAAC,MAAc,2BAA2B,UAAU;AAClD,UAAI,4BAA4B,CAAC,+BAAgC;AACjE,mBAAa,UAAU;AACvB,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,gCAAgC,QAAQ;AAAA,EAAA;AAG3C,QAAM,UAAU;AAAA,IACd,MAAO,MAAM,uBAAuB,KAAK,aAAa,IAAI,CAAA;AAAA,IAC1D,CAAC,KAAK,aAAa;AAAA,EAAA;AAGrB,MAAI,CAAC,KAAK;AACR,UAAM,oBAAoB,cAAc,KAAK,SAAY;AACzD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,kBAAc;AAAA,QACd,MAAM;AAAA,QACN,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,WAAW,IAAI;AAAA,UACf;AAAA,UACA,wBAAwB,IAAI;AAAA,UAC5B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV,aAAa,OAAO,gBAAgB,WAAW,cAAc;AAAA,QAC7D,UAAU,CAAC,UAAU,OAAO,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpD;AAEA,QAAM,EAAE,cAAc;AACtB,6BACG,OAAA,EAAI,IAAQ,kBAAc,MAAC,WAAU,WACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW,GAAG,2BAA2B,YAAY,oCAAoC,SAAS;AAAA,MAClG,0BAA0B,GAAG,6BAA6B,wBAAwB,IAAI,GAAG,gBAAgB;AAAA,MACzG,UAAU;AAAA,IAAA;AAAA,EAAA,GAEd;AAEJ;"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
function isEnabled(value, defaultValue = true) {
|
|
5
|
+
return value === void 0 ? defaultValue : value !== false;
|
|
6
|
+
}
|
|
7
|
+
function diffViewOptions(diffMode) {
|
|
8
|
+
return diffMode ? ["rich-text", "source", "diff"] : void 0;
|
|
9
|
+
}
|
|
10
|
+
function MdxEditorToolbar({
|
|
11
|
+
mdx,
|
|
12
|
+
options
|
|
13
|
+
}) {
|
|
14
|
+
const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;
|
|
15
|
+
const toolbarOptions = [
|
|
16
|
+
...isEnabled(options.codeBlocks) && isEnabled(options.codeMirror) ? [
|
|
17
|
+
{
|
|
18
|
+
when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock",
|
|
19
|
+
contents: () => /* @__PURE__ */ jsxRuntime.jsx(ChangeCodeMirrorLanguage, {})
|
|
20
|
+
}
|
|
21
|
+
] : [],
|
|
22
|
+
{
|
|
23
|
+
fallback: () => /* @__PURE__ */ jsxRuntime.jsx(DefaultToolbarContents, { mdx, options })
|
|
24
|
+
}
|
|
25
|
+
];
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ConditionalContents, { options: toolbarOptions });
|
|
27
|
+
}
|
|
28
|
+
function DefaultToolbarContents({
|
|
29
|
+
mdx,
|
|
30
|
+
options
|
|
31
|
+
}) {
|
|
32
|
+
const {
|
|
33
|
+
BlockTypeSelect,
|
|
34
|
+
BoldItalicUnderlineToggles,
|
|
35
|
+
CodeToggle,
|
|
36
|
+
CreateLink,
|
|
37
|
+
DiffSourceToggleWrapper,
|
|
38
|
+
InsertAdmonition,
|
|
39
|
+
InsertCodeBlock,
|
|
40
|
+
InsertFrontmatter,
|
|
41
|
+
InsertImage,
|
|
42
|
+
InsertTable,
|
|
43
|
+
InsertThematicBreak,
|
|
44
|
+
ListsToggle,
|
|
45
|
+
Separator,
|
|
46
|
+
UndoRedo
|
|
47
|
+
} = mdx;
|
|
48
|
+
const controls = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
49
|
+
/* @__PURE__ */ jsxRuntime.jsx(UndoRedo, {}),
|
|
50
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsx(BoldItalicUnderlineToggles, {}),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx(CodeToggle, {}),
|
|
53
|
+
isEnabled(options.headings) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
54
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsx(BlockTypeSelect, {})
|
|
56
|
+
] }),
|
|
57
|
+
isEnabled(options.lists) && /* @__PURE__ */ jsxRuntime.jsx(ListsToggle, {}),
|
|
58
|
+
isEnabled(options.links) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx(CreateLink, {})
|
|
61
|
+
] }),
|
|
62
|
+
isEnabled(options.images) && /* @__PURE__ */ jsxRuntime.jsx(InsertImage, {}),
|
|
63
|
+
(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
64
|
+
isEnabled(options.tables) && /* @__PURE__ */ jsxRuntime.jsx(InsertTable, {}),
|
|
65
|
+
isEnabled(options.thematicBreak) && /* @__PURE__ */ jsxRuntime.jsx(InsertThematicBreak, {}),
|
|
66
|
+
isEnabled(options.codeBlocks) && /* @__PURE__ */ jsxRuntime.jsx(InsertCodeBlock, {}),
|
|
67
|
+
(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
|
|
68
|
+
isEnabled(options.frontmatter) && /* @__PURE__ */ jsxRuntime.jsx(InsertFrontmatter, {}),
|
|
69
|
+
isEnabled(options.admonitions) && /* @__PURE__ */ jsxRuntime.jsx(InsertAdmonition, {})
|
|
70
|
+
] });
|
|
71
|
+
const viewOptions = diffViewOptions(options.diffMode);
|
|
72
|
+
if (!viewOptions) return controls;
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DiffSourceToggleWrapper, { options: viewOptions, children: controls });
|
|
74
|
+
}
|
|
75
|
+
exports.MdxEditorToolbar = MdxEditorToolbar;
|
|
76
|
+
//# sourceMappingURL=MdxEditorToolbar.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorToolbar.cjs","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n return diffMode ? [\"rich-text\", \"source\", \"diff\"] : undefined;\n}\n\nexport function MdxEditorToolbar({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n ? [\n {\n when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n contents: () => <ChangeCodeMirrorLanguage />,\n },\n ]\n : []),\n {\n fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n },\n ];\n return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const {\n BlockTypeSelect,\n BoldItalicUnderlineToggles,\n CodeToggle,\n CreateLink,\n DiffSourceToggleWrapper,\n InsertAdmonition,\n InsertCodeBlock,\n InsertFrontmatter,\n InsertImage,\n InsertTable,\n InsertThematicBreak,\n ListsToggle,\n Separator,\n UndoRedo,\n } = mdx;\n const controls = (\n <>\n <UndoRedo />\n <Separator />\n <BoldItalicUnderlineToggles />\n <CodeToggle />\n {isEnabled(options.headings) && (\n <>\n <Separator />\n <BlockTypeSelect />\n </>\n )}\n {isEnabled(options.lists) && <ListsToggle />}\n {isEnabled(options.links) && (\n <>\n <Separator />\n <CreateLink />\n </>\n )}\n {isEnabled(options.images) && <InsertImage />}\n {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n {isEnabled(options.tables) && <InsertTable />}\n {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n {isEnabled(options.admonitions) && <InsertAdmonition />}\n </>\n );\n\n const viewOptions = diffViewOptions(options.diffMode);\n if (!viewOptions) return controls;\n return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;AAC7F,SAAO,WAAW,CAAC,aAAa,UAAU,MAAM,IAAI;AACtD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAMA,+BAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAMA,2BAAAA,IAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAOA,2BAAAA,IAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,IAAAF,2BAAAA,IAAC,UAAA,EAAS;AAAA,mCACT,WAAA,EAAU;AAAA,mCACV,4BAAA,EAA2B;AAAA,mCAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,oCAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtBC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAF,2BAAAA,IAAC,WAAA,EAAU;AAAA,qCACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,qCAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,oCAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,oCAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,oCAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAMA,2BAAAA,IAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,oCAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,oCAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAOA,2BAAAA,IAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { MdxEditorPluginOptions } from './mdx-editor-options';
|
|
2
|
+
type MdxEditorModule = typeof import("@mdxeditor/editor");
|
|
3
|
+
export declare function MdxEditorToolbar({ mdx, options, }: {
|
|
4
|
+
mdx: MdxEditorModule;
|
|
5
|
+
options: MdxEditorPluginOptions;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=MdxEditorToolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorToolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,eAAe,GAAG,cAAc,mBAAmB,CAAC,CAAC;AAU1D,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
function isEnabled(value, defaultValue = true) {
|
|
3
|
+
return value === void 0 ? defaultValue : value !== false;
|
|
4
|
+
}
|
|
5
|
+
function diffViewOptions(diffMode) {
|
|
6
|
+
return diffMode ? ["rich-text", "source", "diff"] : void 0;
|
|
7
|
+
}
|
|
8
|
+
function MdxEditorToolbar({
|
|
9
|
+
mdx,
|
|
10
|
+
options
|
|
11
|
+
}) {
|
|
12
|
+
const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;
|
|
13
|
+
const toolbarOptions = [
|
|
14
|
+
...isEnabled(options.codeBlocks) && isEnabled(options.codeMirror) ? [
|
|
15
|
+
{
|
|
16
|
+
when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock",
|
|
17
|
+
contents: () => /* @__PURE__ */ jsx(ChangeCodeMirrorLanguage, {})
|
|
18
|
+
}
|
|
19
|
+
] : [],
|
|
20
|
+
{
|
|
21
|
+
fallback: () => /* @__PURE__ */ jsx(DefaultToolbarContents, { mdx, options })
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
return /* @__PURE__ */ jsx(ConditionalContents, { options: toolbarOptions });
|
|
25
|
+
}
|
|
26
|
+
function DefaultToolbarContents({
|
|
27
|
+
mdx,
|
|
28
|
+
options
|
|
29
|
+
}) {
|
|
30
|
+
const {
|
|
31
|
+
BlockTypeSelect,
|
|
32
|
+
BoldItalicUnderlineToggles,
|
|
33
|
+
CodeToggle,
|
|
34
|
+
CreateLink,
|
|
35
|
+
DiffSourceToggleWrapper,
|
|
36
|
+
InsertAdmonition,
|
|
37
|
+
InsertCodeBlock,
|
|
38
|
+
InsertFrontmatter,
|
|
39
|
+
InsertImage,
|
|
40
|
+
InsertTable,
|
|
41
|
+
InsertThematicBreak,
|
|
42
|
+
ListsToggle,
|
|
43
|
+
Separator,
|
|
44
|
+
UndoRedo
|
|
45
|
+
} = mdx;
|
|
46
|
+
const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
|
+
/* @__PURE__ */ jsx(UndoRedo, {}),
|
|
48
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
49
|
+
/* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
|
|
50
|
+
/* @__PURE__ */ jsx(CodeToggle, {}),
|
|
51
|
+
isEnabled(options.headings) && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
53
|
+
/* @__PURE__ */ jsx(BlockTypeSelect, {})
|
|
54
|
+
] }),
|
|
55
|
+
isEnabled(options.lists) && /* @__PURE__ */ jsx(ListsToggle, {}),
|
|
56
|
+
isEnabled(options.links) && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
57
|
+
/* @__PURE__ */ jsx(Separator, {}),
|
|
58
|
+
/* @__PURE__ */ jsx(CreateLink, {})
|
|
59
|
+
] }),
|
|
60
|
+
isEnabled(options.images) && /* @__PURE__ */ jsx(InsertImage, {}),
|
|
61
|
+
(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && /* @__PURE__ */ jsx(Separator, {}),
|
|
62
|
+
isEnabled(options.tables) && /* @__PURE__ */ jsx(InsertTable, {}),
|
|
63
|
+
isEnabled(options.thematicBreak) && /* @__PURE__ */ jsx(InsertThematicBreak, {}),
|
|
64
|
+
isEnabled(options.codeBlocks) && /* @__PURE__ */ jsx(InsertCodeBlock, {}),
|
|
65
|
+
(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && /* @__PURE__ */ jsx(Separator, {}),
|
|
66
|
+
isEnabled(options.frontmatter) && /* @__PURE__ */ jsx(InsertFrontmatter, {}),
|
|
67
|
+
isEnabled(options.admonitions) && /* @__PURE__ */ jsx(InsertAdmonition, {})
|
|
68
|
+
] });
|
|
69
|
+
const viewOptions = diffViewOptions(options.diffMode);
|
|
70
|
+
if (!viewOptions) return controls;
|
|
71
|
+
return /* @__PURE__ */ jsx(DiffSourceToggleWrapper, { options: viewOptions, children: controls });
|
|
72
|
+
}
|
|
73
|
+
export {
|
|
74
|
+
MdxEditorToolbar
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=MdxEditorToolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n return diffMode ? [\"rich-text\", \"source\", \"diff\"] : undefined;\n}\n\nexport function MdxEditorToolbar({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n ? [\n {\n when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n contents: () => <ChangeCodeMirrorLanguage />,\n },\n ]\n : []),\n {\n fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n },\n ];\n return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const {\n BlockTypeSelect,\n BoldItalicUnderlineToggles,\n CodeToggle,\n CreateLink,\n DiffSourceToggleWrapper,\n InsertAdmonition,\n InsertCodeBlock,\n InsertFrontmatter,\n InsertImage,\n InsertTable,\n InsertThematicBreak,\n ListsToggle,\n Separator,\n UndoRedo,\n } = mdx;\n const controls = (\n <>\n <UndoRedo />\n <Separator />\n <BoldItalicUnderlineToggles />\n <CodeToggle />\n {isEnabled(options.headings) && (\n <>\n <Separator />\n <BlockTypeSelect />\n </>\n )}\n {isEnabled(options.lists) && <ListsToggle />}\n {isEnabled(options.links) && (\n <>\n <Separator />\n <CreateLink />\n </>\n )}\n {isEnabled(options.images) && <InsertImage />}\n {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n {isEnabled(options.tables) && <InsertTable />}\n {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n {isEnabled(options.admonitions) && <InsertAdmonition />}\n </>\n );\n\n const viewOptions = diffViewOptions(options.diffMode);\n if (!viewOptions) return controls;\n return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":";AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;AAC7F,SAAO,WAAW,CAAC,aAAa,UAAU,MAAM,IAAI;AACtD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAM,oBAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAM,oBAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAO,oBAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAS;AAAA,wBACT,WAAA,EAAU;AAAA,wBACV,4BAAA,EAA2B;AAAA,wBAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,yBAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,0BAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,yBAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,yBAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAM,oBAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,yBAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,yBAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,oBAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const buttonVariants: (props?: ({
|
|
2
2
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
3
|
-
size?: "sm" | "lg" | "
|
|
3
|
+
size?: "sm" | "lg" | "icon" | "default" | null | undefined;
|
|
4
4
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
5
5
|
//# sourceMappingURL=button-variants.d.ts.map
|