npm - @flanksource/clicky-ui - Versions diffs - 0.3.21 → 0.3.23 - Mend

@flanksource/clicky-ui 0.3.21 → 0.3.23

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.

Files changed (1627) hide show

package/dist/components/JsonSchemaForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n cssLength,\n DEFAULT_COLUMN_MIN_WIDTH,\n normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n DEFAULT_PREFERENCES_STORAGE_KEY,\n readPreferences,\n writePreferences,\n type FormPreferences,\n type LayoutMode,\n type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n layout: FormLayout \| undefined,\n inline: boolean,\n modeOverride: LayoutMode \| undefined,\n): FormLayout {\n const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n const mode = modeOverride ?? baseMode;\n const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n const help = layout?.help ? { help: layout.help } : {};\n if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n return {\n mode: \"inline\",\n labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n valueMaxWidth,\n ...help,\n };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n schema,\n value,\n onChange,\n errors = [],\n readOnly = false,\n inline = false,\n layout,\n size = DEFAULT_FORM_SIZE,\n idPrefix,\n hideReadOnlyFields = false,\n hiddenKeys,\n requiredFirst = false,\n title,\n pre,\n post,\n showPreferencesMenu = true,\n persistPreferences = true,\n preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n lookupFetcher,\n}: JsonSchemaFormProps) {\n // When the menu is hidden, never touch localStorage and start from an empty\n // override so behaviour is identical to before this feature existed.\n const [prefs, setPrefs] = useState<FormPreferences>(() =>\n showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n );\n // The field filter is transient view state (a \"find\" over the fields), never\n // persisted — reopening the form should never start with fields hidden.\n const [fieldFilter, setFieldFilter] = useState(\"\");\n\n const effectiveSize = prefs.size ?? size;\n const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n const applyPrefs = (next: FormPreferences) => {\n setPrefs(next);\n if (persistPreferences) writePreferences(preferencesStorageKey, next);\n };\n\n // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n // pointers) is resolved once into a self-contained tree the renderer walks\n // directly; a non-bundled schema passes through untouched.\n const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n const preExtensions = pre ?? [];\n const unmatchedErrors = useMemo(\n () =>\n unmatchedFormErrors({\n schema: resolvedSchema,\n value: effectiveValue,\n errors,\n hideReadOnlyFields,\n pre: preExtensions,\n ...(hiddenKeys ? { hiddenKeys } : {}),\n ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n }),\n [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\n );\n // Defaults are part of the submitted form value, not only presentation. This\n // is especially important for required discriminator fields whose default\n // selects an if/then branch.\n useEffect(() => {\n if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n }, [effectiveValue, onChange, readOnly, value]);\n\n const ctx: RenderContext = {\n readOnly,\n hideReadOnlyFields,\n layout: resolvedLayout,\n size: effectiveSize,\n sortMode: effectiveSortMode,\n pre: preExtensions,\n post: post ?? [],\n rootValue: effectiveValue,\n onRootChange: onChange,\n instancePath: \"\",\n errors,\n depth: 0,\n render: renderApi,\n ...(idPrefix ? { idPrefix } : {}),\n ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n };\n // A schema may name a discriminator property whose value selects a \"kind\"; the\n // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n const inPickerPhase = discKey != null && (effectiveValue[discKey] == null \|\| effectiveValue[discKey] === \"\");\n\n const objectRows = discKey\n ? null\n : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n return (\n <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n {showPreferencesMenu && !inPickerPhase && (\n <PreferencesMenu\n size={effectiveSize}\n layoutMode={resolvedLayout.mode}\n sortMode={effectiveSortMode}\n fieldFilter={fieldFilter}\n onFilterChange={setFieldFilter}\n onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n />\n )}\n {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n <FormErrorSummary errors={unmatchedErrors} />\n <FieldsGrid\n layout={resolvedLayout}\n size={effectiveSize}\n columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n : {})}\n {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n >\n {discKey ? (\n <DiscriminatedForm\n schema={resolvedSchema}\n value={effectiveValue}\n onChange={onChange}\n ctx={ctx}\n discKey={discKey}\n />\n ) : (\n objectRows\n )}\n </FieldsGrid>\n {noMatches && (\n <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n No fields match “{fieldFilter.trim()}”.\n </p>\n )}\n </div>\n </FormLookupProvider>\n );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n { value: \"xs\", label: \"Extra small\" },\n { value: \"sm\", label: \"Small\" },\n { value: \"md\", label: \"Medium\" },\n { value: \"lg\", label: \"Large\" },\n { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n { value: \"stacked\", label: \"Stacked\" },\n { value: \"inline\", label: \"Inline\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n { value: \"schema\", label: \"Schema order\" },\n { value: \"required-first\", label: \"Required first\" },\n { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n size,\n layoutMode,\n sortMode,\n fieldFilter,\n onFilterChange,\n onSelectSize,\n onSelectLayout,\n onSelectSort,\n}: {\n size: FormSize;\n layoutMode: LayoutMode;\n sortMode: SortMode;\n fieldFilter: string;\n onFilterChange: (value: string) => void;\n onSelectSize: (size: FormSize) => void;\n onSelectLayout: (mode: LayoutMode) => void;\n onSelectSort: (mode: SortMode) => void;\n}) {\n const filterActive = fieldFilter.trim() !== \"\";\n return (\n <DropdownMenu\n align=\"right\"\n menuLabel=\"Form display options\"\n className=\"absolute right-0 top-0 z-10\"\n trigger={\n <button\n type=\"button\"\n aria-label=\"Form display options\"\n aria-haspopup=\"menu\"\n className={cn(\n \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n </button>\n }\n >\n {(closeMenu) => (\n <>\n <div className=\"px-2 pb-1.5 pt-1\">\n <div className=\"relative\">\n <Icon\n icon={UiSearch}\n className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n />\n <input\n type=\"text\"\n aria-label=\"Filter fields\"\n placeholder=\"Filter fields…\"\n value={fieldFilter}\n onChange={(e) => onFilterChange(e.target.value)}\n // Keep arrow/space/enter keys inside the input instead of driving\n // the menu's list navigation or closing it.\n onKeyDown={(e) => e.stopPropagation()}\n className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring\"\n />\n {filterActive && (\n <button\n type=\"button\"\n aria-label=\"Clear filter\"\n onClick={() => onFilterChange(\"\")}\n className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n >\n <Icon icon={UiClose} className=\"text-xs\" />\n </button>\n )}\n </div>\n </div>\n <PreferenceSection title=\"Size\" />\n {SIZE_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === size}\n onSelect={() => {\n onSelectSize(opt.value);\n closeMenu();\n }}\n />\n ))}\n <PreferenceSection title=\"Layout\" />\n {LAYOUT_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === layoutMode}\n onSelect={() => {\n onSelectLayout(opt.value);\n closeMenu();\n }}\n />\n ))}\n <PreferenceSection title=\"Sort\" />\n {SORT_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === sortMode}\n onSelect={() => {\n onSelectSort(opt.value);\n closeMenu();\n }}\n />\n ))}\n </>\n )}\n </DropdownMenu>\n );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n return (\n <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n {title}\n </div>\n );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n return (\n <button\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n onClick={onSelect}\n >\n <span className=\"flex w-3.5 shrink-0 justify-center\">\n {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n </span>\n {label}\n </button>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n cssLength,\n DEFAULT_COLUMN_MIN_WIDTH,\n normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n DEFAULT_PREFERENCES_STORAGE_KEY,\n readPreferences,\n writePreferences,\n type FormPreferences,\n type LayoutMode,\n type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n layout: FormLayout \| undefined,\n inline: boolean,\n modeOverride: LayoutMode \| undefined,\n): FormLayout {\n const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n const mode = modeOverride ?? baseMode;\n const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n const help = layout?.help ? { help: layout.help } : {};\n if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n return {\n mode: \"inline\",\n labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n valueMaxWidth,\n ...help,\n };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n schema,\n value,\n onChange,\n errors = [],\n readOnly = false,\n inline = false,\n layout,\n size = DEFAULT_FORM_SIZE,\n idPrefix,\n hideReadOnlyFields = false,\n hiddenKeys,\n requiredFirst = false,\n title,\n pre,\n post,\n showPreferencesMenu = true,\n persistPreferences = true,\n preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n lookupFetcher,\n}: JsonSchemaFormProps) {\n // When the menu is hidden, never touch localStorage and start from an empty\n // override so behaviour is identical to before this feature existed.\n const [prefs, setPrefs] = useState<FormPreferences>(() =>\n showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n );\n // The field filter is transient view state (a \"find\" over the fields), never\n // persisted — reopening the form should never start with fields hidden.\n const [fieldFilter, setFieldFilter] = useState(\"\");\n\n const effectiveSize = prefs.size ?? size;\n const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n const applyPrefs = (next: FormPreferences) => {\n setPrefs(next);\n if (persistPreferences) writePreferences(preferencesStorageKey, next);\n };\n\n // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n // pointers) is resolved once into a self-contained tree the renderer walks\n // directly; a non-bundled schema passes through untouched.\n const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n const preExtensions = pre ?? [];\n const unmatchedErrors = useMemo(\n () =>\n unmatchedFormErrors({\n schema: resolvedSchema,\n value: effectiveValue,\n errors,\n hideReadOnlyFields,\n pre: preExtensions,\n ...(hiddenKeys ? { hiddenKeys } : {}),\n ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n }),\n [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\n );\n // Defaults are part of the submitted form value, not only presentation. This\n // is especially important for required discriminator fields whose default\n // selects an if/then branch.\n useEffect(() => {\n if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n }, [effectiveValue, onChange, readOnly, value]);\n\n const ctx: RenderContext = {\n readOnly,\n hideReadOnlyFields,\n layout: resolvedLayout,\n size: effectiveSize,\n sortMode: effectiveSortMode,\n pre: preExtensions,\n post: post ?? [],\n rootValue: effectiveValue,\n onRootChange: onChange,\n instancePath: \"\",\n errors,\n depth: 0,\n render: renderApi,\n ...(idPrefix ? { idPrefix } : {}),\n ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n };\n // A schema may name a discriminator property whose value selects a \"kind\"; the\n // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n const inPickerPhase = discKey != null && (effectiveValue[discKey] == null \|\| effectiveValue[discKey] === \"\");\n\n const objectRows = discKey\n ? null\n : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n return (\n <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n <div className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n {showPreferencesMenu && !inPickerPhase && (\n <PreferencesMenu\n size={effectiveSize}\n layoutMode={resolvedLayout.mode}\n sortMode={effectiveSortMode}\n fieldFilter={fieldFilter}\n onFilterChange={setFieldFilter}\n onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n />\n )}\n {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n <FormErrorSummary errors={unmatchedErrors} />\n <FieldsGrid\n layout={resolvedLayout}\n size={effectiveSize}\n columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n : {})}\n {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n >\n {discKey ? (\n <DiscriminatedForm\n schema={resolvedSchema}\n value={effectiveValue}\n onChange={onChange}\n ctx={ctx}\n discKey={discKey}\n />\n ) : (\n objectRows\n )}\n </FieldsGrid>\n {noMatches && (\n <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n No fields match “{fieldFilter.trim()}”.\n </p>\n )}\n </div>\n </FormLookupProvider>\n );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n { value: \"xs\", label: \"Extra small\" },\n { value: \"sm\", label: \"Small\" },\n { value: \"md\", label: \"Medium\" },\n { value: \"lg\", label: \"Large\" },\n { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n { value: \"stacked\", label: \"Stacked\" },\n { value: \"inline\", label: \"Inline\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n { value: \"schema\", label: \"Schema order\" },\n { value: \"required-first\", label: \"Required first\" },\n { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n size,\n layoutMode,\n sortMode,\n fieldFilter,\n onFilterChange,\n onSelectSize,\n onSelectLayout,\n onSelectSort,\n}: {\n size: FormSize;\n layoutMode: LayoutMode;\n sortMode: SortMode;\n fieldFilter: string;\n onFilterChange: (value: string) => void;\n onSelectSize: (size: FormSize) => void;\n onSelectLayout: (mode: LayoutMode) => void;\n onSelectSort: (mode: SortMode) => void;\n}) {\n const filterActive = fieldFilter.trim() !== \"\";\n return (\n <DropdownMenu\n align=\"right\"\n menuLabel=\"Form display options\"\n className=\"absolute right-0 top-0 z-10\"\n trigger={\n <button\n type=\"button\"\n aria-label=\"Form display options\"\n aria-haspopup=\"menu\"\n className={cn(\n \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n </button>\n }\n >\n {(closeMenu) => (\n <>\n <div className=\"px-2 pb-1.5 pt-1\">\n <div className=\"relative\">\n <Icon\n icon={UiSearch}\n className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n />\n <input\n type=\"text\"\n aria-label=\"Filter fields\"\n placeholder=\"Filter fields…\"\n value={fieldFilter}\n onChange={(e) => onFilterChange(e.target.value)}\n // Keep arrow/space/enter keys inside the input instead of driving\n // the menu's list navigation or closing it.\n onKeyDown={(e) => e.stopPropagation()}\n className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring\"\n />\n {filterActive && (\n <button\n type=\"button\"\n aria-label=\"Clear filter\"\n onClick={() => onFilterChange(\"\")}\n className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n >\n <Icon icon={UiClose} className=\"text-xs\" />\n </button>\n )}\n </div>\n </div>\n <PreferenceSection title=\"Size\" />\n {SIZE_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === size}\n onSelect={() => {\n onSelectSize(opt.value);\n closeMenu();\n }}\n />\n ))}\n <PreferenceSection title=\"Layout\" />\n {LAYOUT_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === layoutMode}\n onSelect={() => {\n onSelectLayout(opt.value);\n closeMenu();\n }}\n />\n ))}\n <PreferenceSection title=\"Sort\" />\n {SORT_OPTIONS.map((opt) => (\n <PreferenceItem\n key={opt.value}\n label={opt.label}\n selected={opt.value === sortMode}\n onSelect={() => {\n onSelectSort(opt.value);\n closeMenu();\n }}\n />\n ))}\n </>\n )}\n </DropdownMenu>\n );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n return (\n <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n {title}\n </div>\n );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n return (\n <button\n type=\"button\"\n role=\"menuitemradio\"\n aria-checked={selected}\n className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n onClick={onSelect}\n >\n <span className=\"flex w-3.5 shrink-0 justify-center\">\n {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n </span>\n {label}\n </button>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/MdxEditorCallout.cjs ADDED Viewed

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Callout = require("../data/Callout.cjs");
+const utils = require("../lib/utils.cjs");
+const mdxEditorCalloutModel = require("./mdx-editor-callout-model.cjs");
+const mdxEditorJsxAttributes = require("./mdx-editor-jsx-attributes.cjs");
+const UiSpeaker = require("../icons/components/UiSpeaker.cjs");
+const SELECT_CLASS = "h-6 rounded border border-border bg-background px-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
+const INPUT_CLASS = utils.cn(SELECT_CLASS, "w-24 placeholder:text-placeholder");
+const WIDE_INPUT_CLASS = utils.cn(SELECT_CLASS, "w-56 placeholder:text-placeholder");
+function AttributeControl({
+  attribute,
+  value,
+  onChange
+}) {
+  if (attribute === "emphasis") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value !== "" && value !== "false",
+          onChange: (event) => onChange(event.target.checked ? "true" : "")
+        }
+      ),
+      "emphasis"
+    ] });
+  }
+  const options = mdxEditorCalloutModel.CALLOUT_ATTRIBUTE_OPTIONS[attribute];
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+    attribute,
+    options ? /* @__PURE__ */ jsxRuntime.jsxs("select", { className: SELECT_CLASS, value, onChange: (event) => onChange(event.target.value), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "—" }),
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: attribute === "title" ? WIDE_INPUT_CLASS : INPUT_CLASS,
+        value,
+        placeholder: "—",
+        onChange: (event) => onChange(event.target.value)
+      }
+    )
+  ] });
+}
+function CalloutJsxEditor({
+  mdx,
+  mdastNode
+}) {
+  const NestedLexicalEditor = mdx.NestedLexicalEditor;
+  const updateNode = mdx.useMdastNodeUpdater();
+  const attributes = mdxEditorCalloutModel.readCalloutAttributes(mdastNode.attributes);
+  const setAttribute = (attribute) => (next) => {
+    updateNode({ attributes: mdxEditorJsxAttributes.writeJsxAttribute(mdastNode.attributes, attribute, next) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2", "data-callout-editor": attributes.variant ?? "default", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex flex-wrap items-center gap-3 rounded-t border border-border bg-muted/40 px-2 py-1", children: mdxEditorCalloutModel.CALLOUT_ATTRIBUTES.map((attribute) => /* @__PURE__ */ jsxRuntime.jsx(
+      AttributeControl,
+      {
+        attribute,
+        value: attributes[attribute] ?? "",
+        onChange: setAttribute(attribute)
+      },
+      attribute
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Callout.Callout,
+      {
+        badge: attributes.badge,
+        emphasis: attributes.emphasis,
+        icon: attributes.icon,
+        label: attributes.label,
+        source: attributes.source,
+        title: attributes.title,
+        variant: attributes.variant ?? "default",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          NestedLexicalEditor,
+          {
+            block: true,
+            getContent: (node) => node.children ?? [],
+            getUpdatedMdastNode: (node, children) => ({ ...node, children })
+          }
+        )
+      }
+    )
+  ] });
+}
+function InsertCalloutButton({ mdx, name }) {
+  const ButtonWithTooltip = mdx.ButtonWithTooltip;
+  const insertJsx = mdx.usePublisher(mdx.insertJsx$);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ButtonWithTooltip,
+    {
+      title: "Insert callout",
+      onClick: () => insertJsx({
+        name,
+        kind: "flow",
+        props: { variant: "note" },
+        children: [{ type: "paragraph", children: [] }]
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(UiSpeaker.UiSpeaker, { size: "1em" })
+    }
+  );
+}
+exports.CalloutJsxEditor = CalloutJsxEditor;
+exports.InsertCalloutButton = InsertCalloutButton;
+//# sourceMappingURL=MdxEditorCallout.cjs.map

package/dist/components/MdxEditorCallout.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MdxEditorCallout.cjs","sources":["../../src/components/MdxEditorCallout.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { Callout } from \"../data/Callout\";\nimport type { CalloutTone, CalloutVariant } from \"../data/callout-tones\";\nimport { UiSpeaker } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n CALLOUT_ATTRIBUTE_OPTIONS,\n CALLOUT_ATTRIBUTES,\n readCalloutAttributes,\n type CalloutAttribute,\n} from \"./mdx-editor-callout-model\";\nimport { writeJsxAttribute } from \"./mdx-editor-jsx-attributes\";\nimport type {\n MdxEditorInsertJsx,\n MdxEditorJsxAttribute,\n MdxEditorJsxNode,\n MdxEditorRuntime,\n} from \"./mdx-editor-options\";\n\n/**\n * `NestedLexicalEditor` narrowed to what a callout body needs. The library types\n * it over the full mdast `RootContent` union; a callout only ever hands its own\n * children straight back, so the narrower shape says the same thing without\n * pulling mdast types into this entry point.\n */\ntype NestedEditor = ComponentType<{\n block?: boolean;\n getContent: (node: MdxEditorJsxNode) => unknown[];\n getUpdatedMdastNode: (node: MdxEditorJsxNode, children: unknown[]) => MdxEditorJsxNode;\n}>;\n\n// The five members `MdxEditorRuntime` declares, at the types this file uses\n// them. They are cast rather than declared on the interface so a consumer's own\n// @mdxeditor/editor install stays assignable — see MdxEditorRuntime.\ntype NodeUpdater = () => (node: { attributes?: MdxEditorJsxAttribute[] }) => void;\ntype JsxInserter = (signal: unknown) => (value: MdxEditorInsertJsx) => void;\ntype TooltipButton = ComponentType<{ title: string; onClick: () => void; children?: ReactNode }>;\n\nconst SELECT_CLASS =\n \"h-6 rounded border border-border bg-background px-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\";\nconst INPUT_CLASS = cn(SELECT_CLASS, \"w-24 placeholder:text-placeholder\");\n// The title is a sentence, not a token, so it gets room the other text fields do not.\nconst WIDE_INPUT_CLASS = cn(SELECT_CLASS, \"w-56 placeholder:text-placeholder\");\n\n/** `variant` and `icon` are enumerations, `emphasis` is a flag, the rest are free text. */\nfunction AttributeControl({\n attribute,\n value,\n onChange,\n}: {\n attribute: CalloutAttribute;\n value: string;\n onChange: (next: string) => void;\n}) {\n if (attribute === \"emphasis\") {\n return (\n <label className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n <input\n type=\"checkbox\"\n checked={value !== \"\" && value !== \"false\"}\n onChange={(event) => onChange(event.target.checked ? \"true\" : \"\")}\n />\n emphasis\n </label>\n );\n }\n\n const options = CALLOUT_ATTRIBUTE_OPTIONS[attribute];\n return (\n <label className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n {attribute}\n {options ? (\n <select className={SELECT_CLASS} value={value} onChange={(event) => onChange(event.target.value)}>\n <option value=\"\">—</option>\n {options.map((option) => (\n <option key={option} value={option}>\n {option}\n </option>\n ))}\n </select>\n ) : (\n <input\n className={attribute === \"title\" ? WIDE_INPUT_CLASS : INPUT_CLASS}\n value={value}\n placeholder=\"—\"\n onChange={(event) => onChange(event.target.value)}\n />\n )}\n </label>\n );\n}\n\n/**\n * The callout as the author sees it while editing: the rendered box, with the\n * attributes that decide its tone on a control strip above it.\n *\n * MDXEditor's `GenericJsxEditor` draws a bare form of text inputs instead, so\n * the author cannot see which of the six variants they picked and a tone typo\n * only surfaces at render time. Drawing the real `Callout` around the nested\n * editor is the reason to register a descriptor of our own.\n *\n * `useLexicalComposerContext` must not be called anywhere under here — MDXEditor\n * mounts node editors under its own composer and that hook throws. The nested\n * editor primitive and the mdast updater are the supported access points.\n *\n * The MDXEditor module arrives as a prop because it is an optional peer\n * dependency; `calloutJsxDescriptor` binds it before handing the descriptor over.\n */\nexport function CalloutJsxEditor({\n mdx,\n mdastNode,\n}: {\n mdx: MdxEditorRuntime;\n mdastNode: MdxEditorJsxNode;\n}) {\n const NestedLexicalEditor = mdx.NestedLexicalEditor as NestedEditor;\n const updateNode = (mdx.useMdastNodeUpdater as NodeUpdater)();\n const attributes = readCalloutAttributes(mdastNode.attributes);\n const setAttribute = (attribute: CalloutAttribute) => (next: string) => {\n updateNode({ attributes: writeJsxAttribute(mdastNode.attributes, attribute, next) });\n };\n\n return (\n <div className=\"my-2\" data-callout-editor={attributes.variant ?? \"default\"}>\n <div className=\"mb-1 flex flex-wrap items-center gap-3 rounded-t border border-border bg-muted/40 px-2 py-1\">\n {CALLOUT_ATTRIBUTES.map((attribute) => (\n <AttributeControl\n key={attribute}\n attribute={attribute}\n value={attributes[attribute] ?? \"\"}\n onChange={setAttribute(attribute)}\n />\n ))}\n </div>\n <Callout\n badge={attributes.badge}\n emphasis={attributes.emphasis}\n icon={attributes.icon as CalloutTone | undefined}\n label={attributes.label}\n source={attributes.source}\n title={attributes.title}\n variant={(attributes.variant as CalloutVariant | undefined) ?? \"default\"}\n >\n <NestedLexicalEditor\n block\n getContent={(node) => node.children ?? []}\n getUpdatedMdastNode={(node, children) => ({ ...node, children })}\n />\n </Callout>\n </div>\n );\n}\n\n/** A toolbar button inserting an empty note callout at the cursor. */\nexport function InsertCalloutButton({ mdx, name }: { mdx: MdxEditorRuntime; name: string }) {\n const ButtonWithTooltip = mdx.ButtonWithTooltip as TooltipButton;\n const insertJsx = (mdx.usePublisher as JsxInserter)(mdx.insertJsx$);\n return (\n <ButtonWithTooltip\n title=\"Insert callout\"\n onClick={() =>\n insertJsx({\n name,\n kind: \"flow\",\n props: { variant: \"note\" },\n children: [{ type: \"paragraph\", children: [] }],\n })\n }\n >\n <UiSpeaker size=\"1em\" />\n </ButtonWithTooltip>\n );\n}\n"],"names":["cn","jsxs","jsx","CALLOUT_ATTRIBUTE_OPTIONS","readCalloutAttributes","writeJsxAttribute","CALLOUT_ATTRIBUTES","Callout","UiSpeaker"],"mappings":"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"}

package/dist/components/MdxEditorCallout.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { MdxEditorJsxNode, MdxEditorRuntime } from './mdx-editor-options';
+/**
+ * The callout as the author sees it while editing: the rendered box, with the
+ * attributes that decide its tone on a control strip above it.
+ *
+ * MDXEditor's `GenericJsxEditor` draws a bare form of text inputs instead, so
+ * the author cannot see which of the six variants they picked and a tone typo
+ * only surfaces at render time. Drawing the real `Callout` around the nested
+ * editor is the reason to register a descriptor of our own.
+ *
+ * `useLexicalComposerContext` must not be called anywhere under here — MDXEditor
+ * mounts node editors under its own composer and that hook throws. The nested
+ * editor primitive and the mdast updater are the supported access points.
+ *
+ * The MDXEditor module arrives as a prop because it is an optional peer
+ * dependency; `calloutJsxDescriptor` binds it before handing the descriptor over.
+ */
+export declare function CalloutJsxEditor({ mdx, mdastNode, }: {
+    mdx: MdxEditorRuntime;
+    mdastNode: MdxEditorJsxNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** A toolbar button inserting an empty note callout at the cursor. */
+export declare function InsertCalloutButton({ mdx, name }: {
+    mdx: MdxEditorRuntime;
+    name: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MdxEditorCallout.d.ts.map

package/dist/components/MdxEditorCallout.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MdxEditorCallout.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorCallout.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAGV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AA2E9B;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAS,GACV,EAAE;IACD,GAAG,EAAE,gBAAgB,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;CAC7B,2CAqCA;AAED,sEAAsE;AACtE,wBAAgB,mBAAmB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;IAAE,GAAG,EAAE,gBAAgB,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,2CAkBzF"}

package/dist/components/MdxEditorCallout.js ADDED Viewed

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Callout } from "../data/Callout.js";
+import { cn } from "../lib/utils.js";
+import { readCalloutAttributes, CALLOUT_ATTRIBUTES, CALLOUT_ATTRIBUTE_OPTIONS } from "./mdx-editor-callout-model.js";
+import { writeJsxAttribute } from "./mdx-editor-jsx-attributes.js";
+import { UiSpeaker } from "../icons/components/UiSpeaker.js";
+const SELECT_CLASS = "h-6 rounded border border-border bg-background px-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring";
+const INPUT_CLASS = cn(SELECT_CLASS, "w-24 placeholder:text-placeholder");
+const WIDE_INPUT_CLASS = cn(SELECT_CLASS, "w-56 placeholder:text-placeholder");
+function AttributeControl({
+  attribute,
+  value,
+  onChange
+}) {
+  if (attribute === "emphasis") {
+    return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: value !== "" && value !== "false",
+          onChange: (event) => onChange(event.target.checked ? "true" : "")
+        }
+      ),
+      "emphasis"
+    ] });
+  }
+  const options = CALLOUT_ATTRIBUTE_OPTIONS[attribute];
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+    attribute,
+    options ? /* @__PURE__ */ jsxs("select", { className: SELECT_CLASS, value, onChange: (event) => onChange(event.target.value), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "—" }),
+      options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+    ] }) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: attribute === "title" ? WIDE_INPUT_CLASS : INPUT_CLASS,
+        value,
+        placeholder: "—",
+        onChange: (event) => onChange(event.target.value)
+      }
+    )
+  ] });
+}
+function CalloutJsxEditor({
+  mdx,
+  mdastNode
+}) {
+  const NestedLexicalEditor = mdx.NestedLexicalEditor;
+  const updateNode = mdx.useMdastNodeUpdater();
+  const attributes = readCalloutAttributes(mdastNode.attributes);
+  const setAttribute = (attribute) => (next) => {
+    updateNode({ attributes: writeJsxAttribute(mdastNode.attributes, attribute, next) });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "my-2", "data-callout-editor": attributes.variant ?? "default", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 flex flex-wrap items-center gap-3 rounded-t border border-border bg-muted/40 px-2 py-1", children: CALLOUT_ATTRIBUTES.map((attribute) => /* @__PURE__ */ jsx(
+      AttributeControl,
+      {
+        attribute,
+        value: attributes[attribute] ?? "",
+        onChange: setAttribute(attribute)
+      },
+      attribute
+    )) }),
+    /* @__PURE__ */ jsx(
+      Callout,
+      {
+        badge: attributes.badge,
+        emphasis: attributes.emphasis,
+        icon: attributes.icon,
+        label: attributes.label,
+        source: attributes.source,
+        title: attributes.title,
+        variant: attributes.variant ?? "default",
+        children: /* @__PURE__ */ jsx(
+          NestedLexicalEditor,
+          {
+            block: true,
+            getContent: (node) => node.children ?? [],
+            getUpdatedMdastNode: (node, children) => ({ ...node, children })
+          }
+        )
+      }
+    )
+  ] });
+}
+function InsertCalloutButton({ mdx, name }) {
+  const ButtonWithTooltip = mdx.ButtonWithTooltip;
+  const insertJsx = mdx.usePublisher(mdx.insertJsx$);
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: "Insert callout",
+      onClick: () => insertJsx({
+        name,
+        kind: "flow",
+        props: { variant: "note" },
+        children: [{ type: "paragraph", children: [] }]
+      }),
+      children: /* @__PURE__ */ jsx(UiSpeaker, { size: "1em" })
+    }
+  );
+}
+export {
+  CalloutJsxEditor,
+  InsertCalloutButton
+};
+//# sourceMappingURL=MdxEditorCallout.js.map

package/dist/components/MdxEditorCallout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MdxEditorCallout.js","sources":["../../src/components/MdxEditorCallout.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { Callout } from \"../data/Callout\";\nimport type { CalloutTone, CalloutVariant } from \"../data/callout-tones\";\nimport { UiSpeaker } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n CALLOUT_ATTRIBUTE_OPTIONS,\n CALLOUT_ATTRIBUTES,\n readCalloutAttributes,\n type CalloutAttribute,\n} from \"./mdx-editor-callout-model\";\nimport { writeJsxAttribute } from \"./mdx-editor-jsx-attributes\";\nimport type {\n MdxEditorInsertJsx,\n MdxEditorJsxAttribute,\n MdxEditorJsxNode,\n MdxEditorRuntime,\n} from \"./mdx-editor-options\";\n\n/**\n * `NestedLexicalEditor` narrowed to what a callout body needs. The library types\n * it over the full mdast `RootContent` union; a callout only ever hands its own\n * children straight back, so the narrower shape says the same thing without\n * pulling mdast types into this entry point.\n */\ntype NestedEditor = ComponentType<{\n block?: boolean;\n getContent: (node: MdxEditorJsxNode) => unknown[];\n getUpdatedMdastNode: (node: MdxEditorJsxNode, children: unknown[]) => MdxEditorJsxNode;\n}>;\n\n// The five members `MdxEditorRuntime` declares, at the types this file uses\n// them. They are cast rather than declared on the interface so a consumer's own\n// @mdxeditor/editor install stays assignable — see MdxEditorRuntime.\ntype NodeUpdater = () => (node: { attributes?: MdxEditorJsxAttribute[] }) => void;\ntype JsxInserter = (signal: unknown) => (value: MdxEditorInsertJsx) => void;\ntype TooltipButton = ComponentType<{ title: string; onClick: () => void; children?: ReactNode }>;\n\nconst SELECT_CLASS =\n \"h-6 rounded border border-border bg-background px-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring\";\nconst INPUT_CLASS = cn(SELECT_CLASS, \"w-24 placeholder:text-placeholder\");\n// The title is a sentence, not a token, so it gets room the other text fields do not.\nconst WIDE_INPUT_CLASS = cn(SELECT_CLASS, \"w-56 placeholder:text-placeholder\");\n\n/** `variant` and `icon` are enumerations, `emphasis` is a flag, the rest are free text. */\nfunction AttributeControl({\n attribute,\n value,\n onChange,\n}: {\n attribute: CalloutAttribute;\n value: string;\n onChange: (next: string) => void;\n}) {\n if (attribute === \"emphasis\") {\n return (\n <label className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n <input\n type=\"checkbox\"\n checked={value !== \"\" && value !== \"false\"}\n onChange={(event) => onChange(event.target.checked ? \"true\" : \"\")}\n />\n emphasis\n </label>\n );\n }\n\n const options = CALLOUT_ATTRIBUTE_OPTIONS[attribute];\n return (\n <label className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n {attribute}\n {options ? (\n <select className={SELECT_CLASS} value={value} onChange={(event) => onChange(event.target.value)}>\n <option value=\"\">—</option>\n {options.map((option) => (\n <option key={option} value={option}>\n {option}\n </option>\n ))}\n </select>\n ) : (\n <input\n className={attribute === \"title\" ? WIDE_INPUT_CLASS : INPUT_CLASS}\n value={value}\n placeholder=\"—\"\n onChange={(event) => onChange(event.target.value)}\n />\n )}\n </label>\n );\n}\n\n/**\n * The callout as the author sees it while editing: the rendered box, with the\n * attributes that decide its tone on a control strip above it.\n *\n * MDXEditor's `GenericJsxEditor` draws a bare form of text inputs instead, so\n * the author cannot see which of the six variants they picked and a tone typo\n * only surfaces at render time. Drawing the real `Callout` around the nested\n * editor is the reason to register a descriptor of our own.\n *\n * `useLexicalComposerContext` must not be called anywhere under here — MDXEditor\n * mounts node editors under its own composer and that hook throws. The nested\n * editor primitive and the mdast updater are the supported access points.\n *\n * The MDXEditor module arrives as a prop because it is an optional peer\n * dependency; `calloutJsxDescriptor` binds it before handing the descriptor over.\n */\nexport function CalloutJsxEditor({\n mdx,\n mdastNode,\n}: {\n mdx: MdxEditorRuntime;\n mdastNode: MdxEditorJsxNode;\n}) {\n const NestedLexicalEditor = mdx.NestedLexicalEditor as NestedEditor;\n const updateNode = (mdx.useMdastNodeUpdater as NodeUpdater)();\n const attributes = readCalloutAttributes(mdastNode.attributes);\n const setAttribute = (attribute: CalloutAttribute) => (next: string) => {\n updateNode({ attributes: writeJsxAttribute(mdastNode.attributes, attribute, next) });\n };\n\n return (\n <div className=\"my-2\" data-callout-editor={attributes.variant ?? \"default\"}>\n <div className=\"mb-1 flex flex-wrap items-center gap-3 rounded-t border border-border bg-muted/40 px-2 py-1\">\n {CALLOUT_ATTRIBUTES.map((attribute) => (\n <AttributeControl\n key={attribute}\n attribute={attribute}\n value={attributes[attribute] ?? \"\"}\n onChange={setAttribute(attribute)}\n />\n ))}\n </div>\n <Callout\n badge={attributes.badge}\n emphasis={attributes.emphasis}\n icon={attributes.icon as CalloutTone | undefined}\n label={attributes.label}\n source={attributes.source}\n title={attributes.title}\n variant={(attributes.variant as CalloutVariant | undefined) ?? \"default\"}\n >\n <NestedLexicalEditor\n block\n getContent={(node) => node.children ?? []}\n getUpdatedMdastNode={(node, children) => ({ ...node, children })}\n />\n </Callout>\n </div>\n );\n}\n\n/** A toolbar button inserting an empty note callout at the cursor. */\nexport function InsertCalloutButton({ mdx, name }: { mdx: MdxEditorRuntime; name: string }) {\n const ButtonWithTooltip = mdx.ButtonWithTooltip as TooltipButton;\n const insertJsx = (mdx.usePublisher as JsxInserter)(mdx.insertJsx$);\n return (\n <ButtonWithTooltip\n title=\"Insert callout\"\n onClick={() =>\n insertJsx({\n name,\n kind: \"flow\",\n props: { variant: \"note\" },\n children: [{ type: \"paragraph\", children: [] }],\n })\n }\n >\n <UiSpeaker size=\"1em\" />\n </ButtonWithTooltip>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/MdxEditorField.cjs.map CHANGED Viewed

	@@ -1 +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 MdxEditorCodeBlockEditorContext,\n MdxEditorCodeBlockEditorDescriptor,\n MdxEditorCodeBlockEditorProps,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAuCA~~,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;;"}
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 MdxEditorCalloutOptions,\n MdxEditorCodeBlockEditorContext,\n MdxEditorCodeBlockEditorDescriptor,\n MdxEditorCodeBlockEditorProps,\n MdxEditorCodeBlockLanguage,\n MdxEditorCodeBlockOptions,\n MdxEditorCodeMirrorOptions,\n MdxEditorDiffModeOptions,\n MdxEditorFieldProps,\n MdxEditorHeadingLevel,\n MdxEditorImageOptions,\n MdxEditorImagePreviewHandler,\n MdxEditorImageUploadHandler,\n MdxEditorInsertJsx,\n MdxEditorJsxAttribute,\n MdxEditorJsxComponentDescriptor,\n MdxEditorJsxEditorProps,\n MdxEditorJsxNode,\n MdxEditorLinkOptions,\n MdxEditorPlugin,\n MdxEditorPluginOptions,\n MdxEditorRuntime,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,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;;"}

package/dist/components/MdxEditorField.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import { MdxEditorFieldProps } from './mdx-editor-options';
-export type { MdxEditorAdmonitionOptions, MdxEditorCodeBlockEditorContext, MdxEditorCodeBlockEditorDescriptor, MdxEditorCodeBlockEditorProps, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
+export type { MdxEditorAdmonitionOptions, MdxEditorCalloutOptions, MdxEditorCodeBlockEditorContext, MdxEditorCodeBlockEditorDescriptor, MdxEditorCodeBlockEditorProps, MdxEditorCodeBlockLanguage, MdxEditorCodeBlockOptions, MdxEditorCodeMirrorOptions, MdxEditorDiffModeOptions, MdxEditorFieldProps, MdxEditorHeadingLevel, MdxEditorImageOptions, MdxEditorImagePreviewHandler, MdxEditorImageUploadHandler, MdxEditorInsertJsx, MdxEditorJsxAttribute, MdxEditorJsxComponentDescriptor, MdxEditorJsxEditorProps, MdxEditorJsxNode, MdxEditorLinkOptions, MdxEditorPlugin, MdxEditorPluginOptions, MdxEditorRuntime, MdxEditorToolbarOptions, MdxEditorViewMode, } from './mdx-editor-options';
 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;
 //# sourceMappingURL=MdxEditorField.d.ts.map

package/dist/components/MdxEditorField.d.ts.map CHANGED Viewed

	@@ -1 +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,+BAA+B,EAC/B,kCAAkC,EAClC,6BAA6B,EAC7B,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"}
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,uBAAuB,EACvB,+BAA+B,EAC/B,kCAAkC,EAClC,6BAA6B,EAC7B,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,+BAA+B,EAC/B,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,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"}

package/dist/components/MdxEditorField.js.map CHANGED Viewed

	@@ -1 +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 MdxEditorCodeBlockEditorContext,\n MdxEditorCodeBlockEditorDescriptor,\n MdxEditorCodeBlockEditorProps,\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":";;;;;~~AAuCA~~,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;"}
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 MdxEditorCalloutOptions,\n MdxEditorCodeBlockEditorContext,\n MdxEditorCodeBlockEditorDescriptor,\n MdxEditorCodeBlockEditorProps,\n MdxEditorCodeBlockLanguage,\n MdxEditorCodeBlockOptions,\n MdxEditorCodeMirrorOptions,\n MdxEditorDiffModeOptions,\n MdxEditorFieldProps,\n MdxEditorHeadingLevel,\n MdxEditorImageOptions,\n MdxEditorImagePreviewHandler,\n MdxEditorImageUploadHandler,\n MdxEditorInsertJsx,\n MdxEditorJsxAttribute,\n MdxEditorJsxComponentDescriptor,\n MdxEditorJsxEditorProps,\n MdxEditorJsxNode,\n MdxEditorLinkOptions,\n MdxEditorPlugin,\n MdxEditorPluginOptions,\n MdxEditorRuntime,\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":";;;;;AA8CA,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;"}

package/dist/components/MdxEditorToolbar.cjs CHANGED Viewed

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const mdxEditorCallout = require("./mdx-editor-callout.cjs");
 function isEnabled(value, defaultValue = true) {
   return value === void 0 ? defaultValue : value !== false;
 }
+function optionObject(value) {
+  return typeof value === "object" && value !== null ? value : void 0;
+}
 function diffViewOptions(diffMode) {
   var _a;
   if (!diffMode) return void 0;
@@ -50,6 +54,8 @@ function DefaultToolbarContents({
     Separator,
     UndoRedo
   } = mdx;
+  const InsertCallout = mdxEditorCallout.calloutToolbarButton(mdx, optionObject(options.callouts) ?? {});
+  const extra = typeof options.toolbar === "object" ? options.toolbar.extra : void 0;
   const controls = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(UndoRedo, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
@@ -69,9 +75,11 @@ function DefaultToolbarContents({
     isEnabled(options.tables) && /* @__PURE__ */ jsxRuntime.jsx(InsertTable, {}),
     isEnabled(options.thematicBreak) && /* @__PURE__ */ jsxRuntime.jsx(InsertThematicBreak, {}),
     isEnabled(options.codeBlocks) && /* @__PURE__ */ jsxRuntime.jsx(InsertCodeBlock, {}),
-    (isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
+    (isEnabled(options.frontmatter) || isEnabled(options.admonitions) || isEnabled(options.callouts, false)) && /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
     isEnabled(options.frontmatter) && /* @__PURE__ */ jsxRuntime.jsx(InsertFrontmatter, {}),
-    isEnabled(options.admonitions) && /* @__PURE__ */ jsxRuntime.jsx(InsertAdmonition, {})
+    isEnabled(options.admonitions) && /* @__PURE__ */ jsxRuntime.jsx(InsertAdmonition, {}),
+    isEnabled(options.callouts, false) && /* @__PURE__ */ jsxRuntime.jsx(InsertCallout, {}),
+    extra
   ] });
   const viewOptions = diffViewOptions(options.diffMode);
   if (!viewOptions) return controls;

package/dist/components/MdxEditorToolbar.cjs.map CHANGED Viewed

	@@ -1 +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 if (!diffMode) return undefined;\n if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n return [...diffMode.viewModes];\n }\n return [\"rich-text\", \"source\", \"diff\"];\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,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,OAAO,aAAa,cAAY,cAAS,cAAT,mBAAoB,SAAQ;AAC9D,WAAO,CAAC,GAAG,SAAS,SAAS;AAAA,EAC/B;AACA,SAAO,CAAC,aAAa,UAAU,MAAM;AACvC;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;;"}
1	+ {"version":3,"file":"MdxEditorToolbar.cjs","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport { calloutToolbarButton } from \"./mdx-editor-callout\";\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 optionObject<T extends object>(value: boolean \| T \| undefined): T \| undefined {\n return typeof value === \"object\" && value !== null ? value : undefined;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] \| undefined {\n if (!diffMode) return undefined;\n if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n return [...diffMode.viewModes];\n }\n return [\"rich-text\", \"source\", \"diff\"];\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 InsertCallout = calloutToolbarButton(mdx, optionObject(options.callouts) ?? {});\n const extra = typeof options.toolbar === \"object\" ? options.toolbar.extra : undefined;\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) \|\| isEnabled(options.callouts, false)) && (\n <Separator />\n )}\n {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n {isEnabled(options.admonitions) && <InsertAdmonition />}\n {isEnabled(options.callouts, false) && <InsertCallout />}\n {extra}\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","calloutToolbarButton","jsxs","Fragment"],"mappings":"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"}

package/dist/components/MdxEditorToolbar.d.ts.map CHANGED Viewed

	@@ -1 +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;~~AAc1D~~,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}
1	+ {"version":3,"file":"MdxEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/components/MdxEditorToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,KAAK,eAAe,GAAG,cAAc,mBAAmB,CAAC,CAAC;AAkB1D,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,OAAO,GACR,EAAE;IACD,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,sBAAsB,CAAC;CACjC,2CAgBA"}

package/dist/components/MdxEditorToolbar.js CHANGED Viewed

@@ -1,7 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { calloutToolbarButton } from "./mdx-editor-callout.js";
 function isEnabled(value, defaultValue = true) {
   return value === void 0 ? defaultValue : value !== false;
 }
+function optionObject(value) {
+  return typeof value === "object" && value !== null ? value : void 0;
+}
 function diffViewOptions(diffMode) {
   var _a;
   if (!diffMode) return void 0;
@@ -48,6 +52,8 @@ function DefaultToolbarContents({
     Separator,
     UndoRedo
   } = mdx;
+  const InsertCallout = calloutToolbarButton(mdx, optionObject(options.callouts) ?? {});
+  const extra = typeof options.toolbar === "object" ? options.toolbar.extra : void 0;
   const controls = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(UndoRedo, {}),
     /* @__PURE__ */ jsx(Separator, {}),
@@ -67,9 +73,11 @@ function DefaultToolbarContents({
     isEnabled(options.tables) && /* @__PURE__ */ jsx(InsertTable, {}),
     isEnabled(options.thematicBreak) && /* @__PURE__ */ jsx(InsertThematicBreak, {}),
     isEnabled(options.codeBlocks) && /* @__PURE__ */ jsx(InsertCodeBlock, {}),
-    (isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && /* @__PURE__ */ jsx(Separator, {}),
+    (isEnabled(options.frontmatter) || isEnabled(options.admonitions) || isEnabled(options.callouts, false)) && /* @__PURE__ */ jsx(Separator, {}),
     isEnabled(options.frontmatter) && /* @__PURE__ */ jsx(InsertFrontmatter, {}),
-    isEnabled(options.admonitions) && /* @__PURE__ */ jsx(InsertAdmonition, {})
+    isEnabled(options.admonitions) && /* @__PURE__ */ jsx(InsertAdmonition, {}),
+    isEnabled(options.callouts, false) && /* @__PURE__ */ jsx(InsertCallout, {}),
+    extra
   ] });
   const viewOptions = diffViewOptions(options.diffMode);
   if (!viewOptions) return controls;