@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.2

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\n\nexport type { ParsedMarkdown };\n\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    isDarkMode,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return function CodeWrapper(props: ComponentProps<'code'>) {\n    return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\n\nexport type { ParsedMarkdown };\n\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    isDarkMode,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"scale-80 rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return function CodeWrapper(props: ComponentProps<'code'>) {\n    return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/MarkdownEditor.mjs

@@ -0,0 +1,113 @@
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { EditorCommand, EditorCommandList } from "./novel/components/editor-command.mjs";
+import { EditorContent, EditorRoot } from "./novel/components/editor.mjs";
+import { EditorBubble } from "./novel/components/editor-bubble.mjs";
+import { EditorCommandEmpty, EditorCommandItem } from "./novel/components/editor-command-item.mjs";
+import { ImageResizer } from "./novel/extensions/image-resizer.mjs";
+import { handleCommandNavigation } from "./novel/extensions/slash-command.mjs";
+import { handleImageDrop, handleImagePaste } from "./novel/plugins/upload-images.mjs";
+import { createEditorUploadFn } from "./imageUpload.mjs";
+import { defaultExtensions } from "./extensions.mjs";
+import { GenerativeMenuSwitch } from "./generative/GenerativeMenuSwitch.mjs";
+import { ColorSelector } from "./selectors/ColorSelector.mjs";
+import { LinkSelector } from "./selectors/LinkSelector.mjs";
+import { NodeSelector } from "./selectors/NodeSelector.mjs";
+import { TextButtons } from "./selectors/TextButtons.mjs";
+import { createSlashCommand } from "./slashCommand.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/MarkdownEditor.tsx
+const Divider = () => /* @__PURE__ */ jsx("div", { className: "h-full w-px shrink-0 bg-border" });
+/**
+* Notion-style WYSIWYG markdown editor built on Novel / Tiptap.
+*
+* Features a slash command menu, a formatting bubble menu (node / link / color
+* / inline marks), image upload (drop / paste / slash), and an optional
+* AI assistant wired to the Intlayer AI backend.
+*
+* The value contract is markdown: pass `defaultValue` as a markdown string and
+* read changes from `onChange`.
+*/
+const MarkdownEditor = ({ defaultValue, onChange, editable = true, enableAI = true, uploadImage, maxImageSizeMb, className }) => {
+	const [openAI, setOpenAI] = useState(false);
+	const content = useIntlayer("markdown-editor");
+	const uploadFn = useMemo(() => createEditorUploadFn({
+		uploadImage,
+		maxSizeMb: maxImageSizeMb
+	}), [uploadImage, maxImageSizeMb]);
+	const { extensions, suggestionItems } = useMemo(() => {
+		const { slashCommand, suggestionItems: items } = createSlashCommand(uploadFn, content);
+		return {
+			extensions: [...defaultExtensions, slashCommand],
+			suggestionItems: items
+		};
+	}, [uploadFn, content]);
+	const initialContent = defaultValue ?? "";
+	const handleUpdate = ({ editor }) => {
+		onChange?.(editor.storage.markdown.getMarkdown());
+	};
+	const toolbar = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(NodeSelector, {}),
+		/* @__PURE__ */ jsx(Divider, {}),
+		/* @__PURE__ */ jsx(LinkSelector, {}),
+		/* @__PURE__ */ jsx(Divider, {}),
+		/* @__PURE__ */ jsx(TextButtons, {}),
+		/* @__PURE__ */ jsx(Divider, {}),
+		/* @__PURE__ */ jsx(ColorSelector, {})
+	] });
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full",
+		children: /* @__PURE__ */ jsx(EditorRoot, { children: /* @__PURE__ */ jsxs(EditorContent, {
+			immediatelyRender: false,
+			editable,
+			initialContent,
+			extensions,
+			className: cn("min-h-[350px] w-full max-w-full", className),
+			editorProps: {
+				handleDOMEvents: { keydown: (_view, event) => handleCommandNavigation(event) },
+				handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
+				handleDrop: (view, event, _slice, moved) => handleImageDrop(view, event, moved, uploadFn),
+				attributes: { class: "max-w-full pl-6 focus:outline-none" }
+			},
+			onUpdate: handleUpdate,
+			slotAfter: /* @__PURE__ */ jsx(ImageResizer, {}),
+			children: [/* @__PURE__ */ jsxs(EditorCommand, {
+				className: "z-50 h-auto max-h-[330px] overflow-y-auto px-1 py-2 shadow-md transition-all",
+				children: [/* @__PURE__ */ jsx(EditorCommandEmpty, {
+					className: "px-2 text-muted-foreground",
+					children: content.noResults.value
+				}), /* @__PURE__ */ jsx(EditorCommandList, { children: suggestionItems.map((item) => /* @__PURE__ */ jsxs(EditorCommandItem, {
+					value: item.title,
+					onCommand: (val) => item.command?.(val),
+					className: "flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex size-10 items-center justify-center rounded-md border border-card bg-background",
+						children: item.icon
+					}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: item.title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: item.description
+					})] })]
+				}, item.title)) })]
+			}), enableAI ? /* @__PURE__ */ jsx(GenerativeMenuSwitch, {
+				open: openAI,
+				onOpenChange: setOpenAI,
+				children: toolbar
+			}) : /* @__PURE__ */ jsx(EditorBubble, {
+				options: { placement: "top" },
+				className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+				children: toolbar
+			})]
+		}) })
+	});
+};
+
+//#endregion
+export { MarkdownEditor };
+//# sourceMappingURL=MarkdownEditor.mjs.map

package/dist/esm/components/MarkdownEditor/MarkdownEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useMemo, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { defaultExtensions } from './extensions';\nimport { GenerativeMenuSwitch } from './generative/GenerativeMenuSwitch';\nimport {\n  type CreateEditorUploadFnOptions,\n  createEditorUploadFn,\n} from './imageUpload';\nimport {\n  EditorBubble,\n  EditorCommand,\n  EditorCommandEmpty,\n  EditorCommandItem,\n  EditorCommandList,\n  EditorContent,\n  type EditorInstance,\n  EditorRoot,\n  handleCommandNavigation,\n  handleImageDrop,\n  handleImagePaste,\n  ImageResizer,\n  type JSONContent,\n} from './novel';\nimport { ColorSelector } from './selectors/ColorSelector';\nimport { LinkSelector } from './selectors/LinkSelector';\nimport { NodeSelector } from './selectors/NodeSelector';\nimport { TextButtons } from './selectors/TextButtons';\nimport { createSlashCommand } from './slashCommand';\n\nconst Divider = () => <div className=\"h-full w-px shrink-0 bg-border\" />;\n\nexport type MarkdownEditorProps = {\n  /** Initial markdown value. */\n  defaultValue?: string;\n  /** Called with the serialized markdown on every change. */\n  onChange?: (markdown: string) => void;\n  /** Whether the document can be edited. Defaults to `true`. */\n  editable?: boolean;\n  /** Enables the AI bubble menu (\"Ask AI\"). Defaults to `true`. */\n  enableAI?: boolean;\n  /**\n   * Custom image uploader. When omitted, images are embedded inline as base64\n   * data URLs (no backend required).\n   */\n  uploadImage?: CreateEditorUploadFnOptions['uploadImage'];\n  /** Maximum allowed image size in megabytes. Defaults to `20`. */\n  maxImageSizeMb?: number;\n  /** Class applied to the editor surface. */\n  className?: string;\n};\n\n/**\n * Notion-style WYSIWYG markdown editor built on Novel / Tiptap.\n *\n * Features a slash command menu, a formatting bubble menu (node / link / color\n * / inline marks), image upload (drop / paste / slash), and an optional\n * AI assistant wired to the Intlayer AI backend.\n *\n * The value contract is markdown: pass `defaultValue` as a markdown string and\n * read changes from `onChange`.\n */\nexport const MarkdownEditor: FC<MarkdownEditorProps> = ({\n  defaultValue,\n  onChange,\n  editable = true,\n  enableAI = true,\n  uploadImage,\n  maxImageSizeMb,\n  className,\n}) => {\n  const [openAI, setOpenAI] = useState(false);\n  const content = useIntlayer('markdown-editor');\n\n  const uploadFn = useMemo(\n    () => createEditorUploadFn({ uploadImage, maxSizeMb: maxImageSizeMb }),\n    [uploadImage, maxImageSizeMb]\n  );\n\n  const { extensions, suggestionItems } = useMemo(() => {\n    const { slashCommand, suggestionItems: items } = createSlashCommand(\n      uploadFn,\n      content\n    );\n\n    return {\n      extensions: [...defaultExtensions, slashCommand],\n      suggestionItems: items,\n    };\n  }, [uploadFn, content]);\n\n  const initialContent = (defaultValue ?? '') as unknown as JSONContent;\n\n  const handleUpdate = ({ editor }: { editor: EditorInstance }) => {\n    onChange?.(editor.storage.markdown.getMarkdown() as string);\n  };\n\n  const toolbar = (\n    <>\n      <NodeSelector />\n      <Divider />\n      <LinkSelector />\n      <Divider />\n      <TextButtons />\n      <Divider />\n      <ColorSelector />\n    </>\n  );\n\n  return (\n    <div className=\"relative w-full\">\n      <EditorRoot>\n        <EditorContent\n          immediatelyRender={false}\n          editable={editable}\n          initialContent={initialContent}\n          extensions={extensions}\n          className={cn('min-h-[350px] w-full max-w-full', className)}\n          editorProps={{\n            handleDOMEvents: {\n              keydown: (_view, event) => handleCommandNavigation(event),\n            },\n            handlePaste: (view, event) =>\n              handleImagePaste(view, event, uploadFn),\n            handleDrop: (view, event, _slice, moved) =>\n              handleImageDrop(view, event, moved, uploadFn),\n            attributes: {\n              // Content typography (headings, lists, spacing) is defined in\n              // `markdown-editor.css`, scoped to `.ProseMirror` — this project\n              // has no Tailwind `prose` plugin.\n              class: 'max-w-full pl-6 focus:outline-none',\n            },\n          }}\n          onUpdate={handleUpdate}\n          slotAfter={<ImageResizer />}\n        >\n          <EditorCommand className=\"z-50 h-auto max-h-[330px] overflow-y-auto px-1 py-2 shadow-md transition-all\">\n            <EditorCommandEmpty className=\"px-2 text-muted-foreground\">\n              {content.noResults.value}\n            </EditorCommandEmpty>\n            <EditorCommandList>\n              {suggestionItems.map((item) => (\n                <EditorCommandItem\n                  value={item.title}\n                  onCommand={(val) => item.command?.(val)}\n                  className=\"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent\"\n                  key={item.title}\n                >\n                  <div className=\"flex size-10 items-center justify-center rounded-md border border-card bg-background\">\n                    {item.icon}\n                  </div>\n                  <div>\n                    <p className=\"font-medium\">{item.title}</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      {item.description}\n                    </p>\n                  </div>\n                </EditorCommandItem>\n              ))}\n            </EditorCommandList>\n          </EditorCommand>\n\n          {enableAI ? (\n            <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>\n              {toolbar}\n            </GenerativeMenuSwitch>\n          ) : (\n            <EditorBubble\n              options={{ placement: 'top' }}\n              className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n            >\n              {toolbar}\n            </EditorBubble>\n          )}\n        </EditorContent>\n      </EditorRoot>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,gBAAgB,oBAAC,OAAD,EAAK,WAAU,kCAAmC;;;;;;;;;;;AAgCxE,MAAa,kBAA2C,EACtD,cACA,UACA,WAAW,MACX,WAAW,MACX,aACA,gBACA,gBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,UAAU,YAAY,kBAAkB;CAE9C,MAAM,WAAW,cACT,qBAAqB;EAAE;EAAa,WAAW;EAAgB,CAAC,EACtE,CAAC,aAAa,eAAe,CAC9B;CAED,MAAM,EAAE,YAAY,oBAAoB,cAAc;EACpD,MAAM,EAAE,cAAc,iBAAiB,UAAU,mBAC/C,UACA,QACD;AAED,SAAO;GACL,YAAY,CAAC,GAAG,mBAAmB,aAAa;GAChD,iBAAiB;GAClB;IACA,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,iBAAkB,gBAAgB;CAExC,MAAM,gBAAgB,EAAE,aAAyC;AAC/D,aAAW,OAAO,QAAQ,SAAS,aAAa,CAAW;;CAG7D,MAAM,UACJ;EACE,oBAAC,cAAD,EAAgB;EAChB,oBAAC,SAAD,EAAW;EACX,oBAAC,cAAD,EAAgB;EAChB,oBAAC,SAAD,EAAW;EACX,oBAAC,aAAD,EAAe;EACf,oBAAC,SAAD,EAAW;EACX,oBAAC,eAAD,EAAiB;EAChB;AAGL,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,YAAD,YACE,qBAAC,eAAD;GACE,mBAAmB;GACT;GACM;GACJ;GACZ,WAAW,GAAG,mCAAmC,UAAU;GAC3D,aAAa;IACX,iBAAiB,EACf,UAAU,OAAO,UAAU,wBAAwB,MAAM,EAC1D;IACD,cAAc,MAAM,UAClB,iBAAiB,MAAM,OAAO,SAAS;IACzC,aAAa,MAAM,OAAO,QAAQ,UAChC,gBAAgB,MAAM,OAAO,OAAO,SAAS;IAC/C,YAAY,EAIV,OAAO,sCACR;IACF;GACD,UAAU;GACV,WAAW,oBAAC,cAAD,EAAgB;aAtB7B,CAwBE,qBAAC,eAAD;IAAe,WAAU;cAAzB,CACE,oBAAC,oBAAD;KAAoB,WAAU;eAC3B,QAAQ,UAAU;KACA,GACrB,oBAAC,mBAAD,YACG,gBAAgB,KAAK,SACpB,qBAAC,mBAAD;KACE,OAAO,KAAK;KACZ,YAAY,QAAQ,KAAK,UAAU,IAAI;KACvC,WAAU;eAHZ,CAME,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,GACN,qBAAC,OAAD,aACE,oBAAC,KAAD;MAAG,WAAU;gBAAe,KAAK;MAAU,GAC3C,oBAAC,KAAD;MAAG,WAAU;gBACV,KAAK;MACJ,EACA,IACY;OAXb,KAAK,MAWQ,CACpB,EACgB,EACN;OAEf,WACC,oBAAC,sBAAD;IAAsB,MAAM;IAAQ,cAAc;cAC/C;IACoB,IAEvB,oBAAC,cAAD;IACE,SAAS,EAAE,WAAW,OAAO;IAC7B,WAAU;cAET;IACY,EAEH;MACL;EACT"}

package/dist/esm/components/MarkdownEditor/extensions.mjs

@@ -0,0 +1,103 @@
+import CustomKeymap from "./novel/extensions/custom-keymap.mjs";
+import UpdatedImage from "./novel/extensions/updated-image.mjs";
+import { AIHighlight } from "./novel/extensions/ai-highlight.mjs";
+import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./novel/extensions/index.mjs";
+import { UploadImagesPlugin } from "./novel/plugins/upload-images.mjs";
+import { cx } from "class-variance-authority";
+import { CodeBlockShiki } from "tiptap-extension-code-block-shiki";
+
+//#region src/components/MarkdownEditor/extensions.ts
+const aiHighlight = AIHighlight;
+const tiptapLink = TiptapLink.configure({ HTMLAttributes: { class: cx("text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer") } });
+const tiptapImage = TiptapImage.extend({ addProseMirrorPlugins() {
+	return [UploadImagesPlugin({ imageClass: cx("opacity-40 rounded-lg border border-stone-200") })];
+} }).configure({
+	allowBase64: true,
+	HTMLAttributes: { class: cx("rounded-lg border border-muted") }
+});
+const updatedImage = UpdatedImage.configure({ HTMLAttributes: { class: cx("rounded-lg border border-muted") } });
+const taskList = TaskList.configure({ HTMLAttributes: { class: cx("not-prose pl-2") } });
+const taskItem = TaskItem.configure({
+	HTMLAttributes: { class: cx("flex gap-2 items-start my-4") },
+	nested: true
+});
+const horizontalRule = Horizontal.configure({ HTMLAttributes: { class: cx("mt-4 mb-6 border-t border-muted-foreground") } });
+const starterKit = StarterKit.configure({
+	bulletList: { HTMLAttributes: { class: cx("list-disc list-outside leading-3 -mt-2") } },
+	orderedList: { HTMLAttributes: { class: cx("list-decimal list-outside leading-3 -mt-2") } },
+	listItem: { HTMLAttributes: { class: cx("leading-normal -mb-2") } },
+	blockquote: { HTMLAttributes: { class: cx("border-l-4 border-primary") } },
+	codeBlock: false,
+	code: { HTMLAttributes: {
+		class: cx("rounded-md bg-muted px-1.5 py-1 font-mono font-medium"),
+		spellcheck: "false"
+	} },
+	horizontalRule: false,
+	dropcursor: {
+		color: "#DBEAFE",
+		width: 4
+	},
+	gapcursor: false
+});
+/**
+* Code block with syntax highlighting powered by shiki (the same highlighter
+* the rest of the design-system uses in `IDE/CodeBlockShiki` and
+* `MarkDownRender`). Languages are lazy-loaded on demand and the dual
+* `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that
+* `markdown-editor.css` toggles under `[data-theme="dark"]`.
+*/
+const codeBlock = CodeBlockShiki.configure({
+	defaultLanguage: null,
+	defaultTheme: "github-light",
+	themes: {
+		light: "github-light",
+		dark: "github-dark"
+	},
+	HTMLAttributes: { class: cx("rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium") }
+});
+const youtube = Youtube.configure({
+	HTMLAttributes: { class: cx("rounded-lg border border-muted") },
+	inline: false
+});
+const characterCount = CharacterCount.configure();
+const markdownExtension = MarkdownExtension.configure({
+	html: true,
+	tightLists: true,
+	tightListClass: "tight",
+	bulletListMarker: "-",
+	linkify: false,
+	breaks: false,
+	transformPastedText: false,
+	transformCopiedText: false
+});
+/**
+* Default Tiptap/Novel extensions powering the MarkdownEditor.
+*
+* The slash-command extension is intentionally not included here because it
+* needs a runtime image-upload handler; it is appended by the editor itself.
+*/
+const defaultExtensions = [
+	starterKit,
+	PlaceholderExtension,
+	tiptapLink,
+	tiptapImage,
+	updatedImage,
+	taskList,
+	taskItem,
+	horizontalRule,
+	aiHighlight,
+	codeBlock,
+	youtube,
+	characterCount,
+	TiptapUnderline,
+	markdownExtension,
+	HighlightExtension,
+	TextStyle,
+	Color,
+	CustomKeymap,
+	GlobalDragHandle
+];
+
+//#endregion
+export { defaultExtensions };
+//# sourceMappingURL=extensions.mjs.map

package/dist/esm/components/MarkdownEditor/extensions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.mjs","names":["HorizontalRule","Placeholder"],"sources":["../../../../src/components/MarkdownEditor/extensions.ts"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { CodeBlockShiki } from 'tiptap-extension-code-block-shiki';\nimport {\n  AIHighlight,\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  HorizontalRule,\n  MarkdownExtension,\n  Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  UploadImagesPlugin,\n  Youtube,\n} from './novel';\n\nconst aiHighlight = AIHighlight;\n\nconst tiptapLink = TiptapLink.configure({\n  HTMLAttributes: {\n    class: cx(\n      'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer'\n    ),\n  },\n});\n\nconst tiptapImage = TiptapImage.extend({\n  addProseMirrorPlugins() {\n    return [\n      UploadImagesPlugin({\n        imageClass: cx('opacity-40 rounded-lg border border-stone-200'),\n      }),\n    ];\n  },\n}).configure({\n  allowBase64: true,\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst updatedImage = UpdatedImage.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst taskList = TaskList.configure({\n  HTMLAttributes: {\n    class: cx('not-prose pl-2'),\n  },\n});\n\nconst taskItem = TaskItem.configure({\n  HTMLAttributes: {\n    class: cx('flex gap-2 items-start my-4'),\n  },\n  nested: true,\n});\n\nconst horizontalRule = HorizontalRule.configure({\n  HTMLAttributes: {\n    class: cx('mt-4 mb-6 border-t border-muted-foreground'),\n  },\n});\n\nconst starterKit = StarterKit.configure({\n  bulletList: {\n    HTMLAttributes: {\n      class: cx('list-disc list-outside leading-3 -mt-2'),\n    },\n  },\n  orderedList: {\n    HTMLAttributes: {\n      class: cx('list-decimal list-outside leading-3 -mt-2'),\n    },\n  },\n  listItem: {\n    HTMLAttributes: {\n      class: cx('leading-normal -mb-2'),\n    },\n  },\n  blockquote: {\n    HTMLAttributes: {\n      class: cx('border-l-4 border-primary'),\n    },\n  },\n  // Disabled in favor of the shiki-powered `codeBlock` extension below.\n  codeBlock: false,\n  code: {\n    HTMLAttributes: {\n      class: cx('rounded-md bg-muted px-1.5 py-1 font-mono font-medium'),\n      spellcheck: 'false',\n    },\n  },\n  horizontalRule: false,\n  dropcursor: {\n    color: '#DBEAFE',\n    width: 4,\n  },\n  gapcursor: false,\n});\n\n/**\n * Code block with syntax highlighting powered by shiki (the same highlighter\n * the rest of the design-system uses in `IDE/CodeBlockShiki` and\n * `MarkDownRender`). Languages are lazy-loaded on demand and the dual\n * `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that\n * `markdown-editor.css` toggles under `[data-theme=\"dark\"]`.\n */\nconst codeBlock = CodeBlockShiki.configure({\n  defaultLanguage: null,\n  defaultTheme: 'github-light',\n  themes: {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  HTMLAttributes: {\n    class: cx(\n      'rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium'\n    ),\n  },\n});\n\nconst youtube = Youtube.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n  inline: false,\n});\n\nconst characterCount = CharacterCount.configure();\n\nconst markdownExtension = MarkdownExtension.configure({\n  html: true,\n  tightLists: true,\n  tightListClass: 'tight',\n  bulletListMarker: '-',\n  linkify: false,\n  breaks: false,\n  transformPastedText: false,\n  transformCopiedText: false,\n});\n\n/**\n * Default Tiptap/Novel extensions powering the MarkdownEditor.\n *\n * The slash-command extension is intentionally not included here because it\n * needs a runtime image-upload handler; it is appended by the editor itself.\n */\nexport const defaultExtensions = [\n  starterKit,\n  Placeholder,\n  tiptapLink,\n  tiptapImage,\n  updatedImage,\n  taskList,\n  taskItem,\n  horizontalRule,\n  aiHighlight,\n  codeBlock,\n  youtube,\n  characterCount,\n  TiptapUnderline,\n  markdownExtension,\n  HighlightExtension,\n  TextStyle,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n];\n"],"mappings":";;;;;;;;;AAwBA,MAAM,cAAc;AAEpB,MAAM,aAAa,WAAW,UAAU,EACtC,gBAAgB,EACd,OAAO,GACL,6GACD,EACF,EACF,CAAC;AAEF,MAAM,cAAc,YAAY,OAAO,EACrC,wBAAwB;AACtB,QAAO,CACL,mBAAmB,EACjB,YAAY,GAAG,gDAAgD,EAChE,CAAC,CACH;GAEJ,CAAC,CAAC,UAAU;CACX,aAAa;CACb,gBAAgB,EACd,OAAO,GAAG,iCAAiC,EAC5C;CACF,CAAC;AAEF,MAAM,eAAe,aAAa,UAAU,EAC1C,gBAAgB,EACd,OAAO,GAAG,iCAAiC,EAC5C,EACF,CAAC;AAEF,MAAM,WAAW,SAAS,UAAU,EAClC,gBAAgB,EACd,OAAO,GAAG,iBAAiB,EAC5B,EACF,CAAC;AAEF,MAAM,WAAW,SAAS,UAAU;CAClC,gBAAgB,EACd,OAAO,GAAG,8BAA8B,EACzC;CACD,QAAQ;CACT,CAAC;AAEF,MAAM,iBAAiBA,WAAe,UAAU,EAC9C,gBAAgB,EACd,OAAO,GAAG,6CAA6C,EACxD,EACF,CAAC;AAEF,MAAM,aAAa,WAAW,UAAU;CACtC,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,yCAAyC,EACpD,EACF;CACD,aAAa,EACX,gBAAgB,EACd,OAAO,GAAG,4CAA4C,EACvD,EACF;CACD,UAAU,EACR,gBAAgB,EACd,OAAO,GAAG,uBAAuB,EAClC,EACF;CACD,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,4BAA4B,EACvC,EACF;CAED,WAAW;CACX,MAAM,EACJ,gBAAgB;EACd,OAAO,GAAG,wDAAwD;EAClE,YAAY;EACb,EACF;CACD,gBAAgB;CAChB,YAAY;EACV,OAAO;EACP,OAAO;EACR;CACD,WAAW;CACZ,CAAC;;;;;;;;AASF,MAAM,YAAY,eAAe,UAAU;CACzC,iBAAiB;CACjB,cAAc;CACd,QAAQ;EACN,OAAO;EACP,MAAM;EACP;CACD,gBAAgB,EACd,OAAO,GACL,6EACD,EACF;CACF,CAAC;AAEF,MAAM,UAAU,QAAQ,UAAU;CAChC,gBAAgB,EACd,OAAO,GAAG,iCAAiC,EAC5C;CACD,QAAQ;CACT,CAAC;AAEF,MAAM,iBAAiB,eAAe,WAAW;AAEjD,MAAM,oBAAoB,kBAAkB,UAAU;CACpD,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,qBAAqB;CACrB,qBAAqB;CACtB,CAAC;;;;;;;AAQF,MAAa,oBAAoB;CAC/B;CACAC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/esm/components/MarkdownEditor/generative/AICompletionCommands.mjs

@@ -0,0 +1,51 @@
+'use client';
+
+import { Command } from "../../Command/index.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { Check, TextQuote, TrashIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/generative/AICompletionCommands.tsx
+/**
+* Command list shown once the AI has produced a completion: replace the
+* selection, insert below, or discard.
+*/
+const AICompletionCommands = ({ completion, onDiscard }) => {
+	const { editor } = useEditor();
+	const content = useIntlayer("markdown-editor");
+	if (!editor) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Command.Group, { children: [/* @__PURE__ */ jsxs(Command.Item, {
+			value: "replace",
+			className: "gap-2 px-4",
+			onSelect: () => {
+				const { selection } = editor.view.state;
+				editor.chain().focus().insertContentAt({
+					from: selection.from,
+					to: selection.to
+				}, completion).run();
+			},
+			children: [/* @__PURE__ */ jsx(Check, { className: "size-4 text-muted-foreground" }), content.replaceSelection]
+		}), /* @__PURE__ */ jsxs(Command.Item, {
+			value: "insert",
+			className: "gap-2 px-4",
+			onSelect: () => {
+				const { selection } = editor.view.state;
+				editor.chain().focus().insertContentAt(selection.to + 1, completion).run();
+			},
+			children: [/* @__PURE__ */ jsx(TextQuote, { className: "size-4 text-muted-foreground" }), content.insertBelow]
+		})] }),
+		/* @__PURE__ */ jsx(Command.Separator, {}),
+		/* @__PURE__ */ jsx(Command.Group, { children: /* @__PURE__ */ jsxs(Command.Item, {
+			value: "discard",
+			className: "gap-2 px-4",
+			onSelect: onDiscard,
+			children: [/* @__PURE__ */ jsx(TrashIcon, { className: "size-4 text-muted-foreground" }), content.discard]
+		}) })
+	] });
+};
+
+//#endregion
+export { AICompletionCommands };
+//# sourceMappingURL=AICompletionCommands.mjs.map

package/dist/esm/components/MarkdownEditor/generative/AICompletionCommands.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AICompletionCommands.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/AICompletionCommands.tsx"],"sourcesContent":["'use client';\n\nimport { Command } from '@components/Command';\nimport { Check, TextQuote, TrashIcon } from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useEditor } from '../novel';\n\nexport type AICompletionCommandsProps = {\n  completion: string;\n  onDiscard: () => void;\n};\n\n/**\n * Command list shown once the AI has produced a completion: replace the\n * selection, insert below, or discard.\n */\nexport const AICompletionCommands = ({\n  completion,\n  onDiscard,\n}: AICompletionCommandsProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  return (\n    <>\n      <Command.Group>\n        <Command.Item\n          value=\"replace\"\n          className=\"gap-2 px-4\"\n          onSelect={() => {\n            const { selection } = editor.view.state;\n            editor\n              .chain()\n              .focus()\n              .insertContentAt(\n                { from: selection.from, to: selection.to },\n                completion\n              )\n              .run();\n          }}\n        >\n          <Check className=\"size-4 text-muted-foreground\" />\n          {content.replaceSelection}\n        </Command.Item>\n        <Command.Item\n          value=\"insert\"\n          className=\"gap-2 px-4\"\n          onSelect={() => {\n            const { selection } = editor.view.state;\n            editor\n              .chain()\n              .focus()\n              .insertContentAt(selection.to + 1, completion)\n              .run();\n          }}\n        >\n          <TextQuote className=\"size-4 text-muted-foreground\" />\n          {content.insertBelow}\n        </Command.Item>\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group>\n        <Command.Item\n          value=\"discard\"\n          className=\"gap-2 px-4\"\n          onSelect={onDiscard}\n        >\n          <TrashIcon className=\"size-4 text-muted-foreground\" />\n          {content.discard}\n        </Command.Item>\n      </Command.Group>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,wBAAwB,EACnC,YACA,gBAC+B;CAC/B,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,UAAU,YAAY,kBAAkB;AAE9C,KAAI,CAAC,OAAQ,QAAO;AAEpB,QACE;EACE,qBAAC,QAAQ,OAAT,aACE,qBAAC,QAAQ,MAAT;GACE,OAAM;GACN,WAAU;GACV,gBAAgB;IACd,MAAM,EAAE,cAAc,OAAO,KAAK;AAClC,WACG,OAAO,CACP,OAAO,CACP,gBACC;KAAE,MAAM,UAAU;KAAM,IAAI,UAAU;KAAI,EAC1C,WACD,CACA,KAAK;;aAZZ,CAeE,oBAAC,OAAD,EAAO,WAAU,gCAAiC,GACjD,QAAQ,iBACI;MACf,qBAAC,QAAQ,MAAT;GACE,OAAM;GACN,WAAU;GACV,gBAAgB;IACd,MAAM,EAAE,cAAc,OAAO,KAAK;AAClC,WACG,OAAO,CACP,OAAO,CACP,gBAAgB,UAAU,KAAK,GAAG,WAAW,CAC7C,KAAK;;aATZ,CAYE,oBAAC,WAAD,EAAW,WAAU,gCAAiC,GACrD,QAAQ,YACI;KACD;EAChB,oBAAC,QAAQ,WAAT,EAAqB;EACrB,oBAAC,QAAQ,OAAT,YACE,qBAAC,QAAQ,MAAT;GACE,OAAM;GACN,WAAU;GACV,UAAU;aAHZ,CAKE,oBAAC,WAAD,EAAW,WAAU,gCAAiC,GACrD,QAAQ,QACI;MACD;EACf"}

package/dist/esm/components/MarkdownEditor/generative/AISelector.mjs

@@ -0,0 +1,100 @@
+'use client';
+
+import { toast } from "../../Toaster/useToast.mjs";
+import { Loader } from "../../Loader/index.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Command, CommandRoot } from "../../Command/index.mjs";
+import { MarkdownRenderer as MarkdownRenderer$1 } from "../../MarkDownRender/MarkDownRender.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { addAIHighlight } from "../novel/extensions/ai-highlight.mjs";
+import { AICompletionCommands } from "./AICompletionCommands.mjs";
+import { AISelectorCommands } from "./AISelectorCommands.mjs";
+import { useAICompletion } from "./useAICompletion.mjs";
+import { useState } from "react";
+import { ArrowUp, Sparkles } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/generative/AISelector.tsx
+/**
+* The AI command palette shown inside the bubble menu. Lets the user run a
+* preset transformation or a free-form prompt against the current selection,
+* preview the markdown result, then replace / insert / discard it.
+*/
+const AISelector = ({ onOpenChange, sendButtonVariant = "default", sendButtonColor = "text" }) => {
+	const { editor } = useEditor();
+	const [inputValue, setInputValue] = useState("");
+	const content = useIntlayer("markdown-editor");
+	const { completion, complete, isLoading, reset } = useAICompletion((error) => toast({
+		variant: "error",
+		title: content.aiError.value,
+		description: error.message
+	}));
+	if (!editor) return null;
+	const hasCompletion = completion.length > 0;
+	const getSelectionMarkdown = () => {
+		const slice = editor.state.selection.content();
+		return editor.storage.markdown.serializer.serialize(slice.content);
+	};
+	return /* @__PURE__ */ jsxs(CommandRoot, {
+		className: "w-[350px]",
+		children: [
+			hasCompletion && /* @__PURE__ */ jsx("div", {
+				className: "flex max-h-[400px]",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "relative overflow-y-auto",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "prose prose-sm dark:prose-invert p-2 px-4",
+						children: /* @__PURE__ */ jsx(MarkdownRenderer$1, { children: completion })
+					})
+				})
+			}),
+			isLoading && /* @__PURE__ */ jsxs("div", {
+				className: "flex h-12 w-full items-center px-4 font-medium text-sm text-text",
+				children: [
+					/* @__PURE__ */ jsx(Sparkles, { className: "mr-2 size-4 shrink-0" }),
+					content.aiThinking,
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-1 ml-2",
+						children: /* @__PURE__ */ jsx(Loader, {})
+					})
+				]
+			}),
+			!isLoading && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-3 py-3",
+				children: [/* @__PURE__ */ jsx(Command.Input, {
+					value: inputValue,
+					onValueChange: setInputValue,
+					autoFocus: true,
+					placeholder: hasCompletion ? content.tellAI.value : content.askAIToEdit.value,
+					onFocus: () => addAIHighlight(editor)
+				}), /* @__PURE__ */ jsx(Button, {
+					label: content.send.value,
+					size: "icon-sm",
+					roundedSize: "full",
+					variant: sendButtonVariant,
+					color: sendButtonColor,
+					className: "size-7 shrink-0",
+					Icon: ArrowUp,
+					onClick: () => {
+						complete(completion || getSelectionMarkdown(), { body: {
+							option: "zap",
+							command: inputValue
+						} }).then(() => setInputValue(""));
+					}
+				})]
+			}), hasCompletion ? /* @__PURE__ */ jsx(AICompletionCommands, {
+				completion,
+				onDiscard: () => {
+					editor.chain().unsetHighlight().focus().run();
+					reset();
+					onOpenChange(false);
+				}
+			}) : /* @__PURE__ */ jsx(AISelectorCommands, { onSelect: (value, option) => complete(value, { body: { option } }) })] })
+		]
+	});
+};
+
+//#endregion
+export { AISelector };
+//# sourceMappingURL=AISelector.mjs.map

package/dist/esm/components/MarkdownEditor/generative/AISelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AISelector.mjs","names":["MarkdownRenderer"],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Command, CommandRoot } from '@components/Command';\nimport { Loader } from '@components/Loader';\nimport { MarkdownRenderer } from '@components/MarkDownRender';\nimport { toast } from '@components/Toaster';\nimport { ArrowUp, Sparkles } from 'lucide-react';\nimport { useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { addAIHighlight, useEditor } from '../novel';\nimport { AICompletionCommands } from './AICompletionCommands';\nimport { AISelectorCommands } from './AISelectorCommands';\nimport { useAICompletion } from './useAICompletion';\n\nexport type AISelectorProps = {\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant for the send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme for the send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * The AI command palette shown inside the bubble menu. Lets the user run a\n * preset transformation or a free-form prompt against the current selection,\n * preview the markdown result, then replace / insert / discard it.\n */\nexport const AISelector = ({\n  onOpenChange,\n  sendButtonVariant = 'default',\n  sendButtonColor = 'text',\n}: AISelectorProps) => {\n  const { editor } = useEditor();\n  const [inputValue, setInputValue] = useState('');\n  const content = useIntlayer('markdown-editor');\n\n  const { completion, complete, isLoading, reset } = useAICompletion((error) =>\n    toast({\n      variant: 'error',\n      title: content.aiError.value,\n      description: error.message,\n    })\n  );\n\n  if (!editor) return null;\n\n  const hasCompletion = completion.length > 0;\n\n  const getSelectionMarkdown = () => {\n    const slice = editor.state.selection.content();\n    return editor.storage.markdown.serializer.serialize(\n      slice.content\n    ) as string;\n  };\n\n  return (\n    <CommandRoot className=\"w-[350px]\">\n      {hasCompletion && (\n        <div className=\"flex max-h-[400px]\">\n          <div className=\"relative overflow-y-auto\">\n            <div className=\"prose prose-sm dark:prose-invert p-2 px-4\">\n              <MarkdownRenderer>{completion}</MarkdownRenderer>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {isLoading && (\n        <div className=\"flex h-12 w-full items-center px-4 font-medium text-sm text-text\">\n          <Sparkles className=\"mr-2 size-4 shrink-0\" />\n          {content.aiThinking}\n          <div className=\"mt-1 ml-2\">\n            <Loader />\n          </div>\n        </div>\n      )}\n\n      {!isLoading && (\n        <>\n          <div className=\"flex items-center gap-2 px-3 py-3\">\n            <Command.Input\n              value={inputValue}\n              onValueChange={setInputValue}\n              autoFocus\n              placeholder={\n                hasCompletion ? content.tellAI.value : content.askAIToEdit.value\n              }\n              onFocus={() => addAIHighlight(editor)}\n            />\n            <Button\n              label={content.send.value}\n              size=\"icon-sm\"\n              roundedSize=\"full\"\n              variant={sendButtonVariant}\n              color={sendButtonColor}\n              className=\"size-7 shrink-0\"\n              Icon={ArrowUp}\n              onClick={() => {\n                const text = completion || getSelectionMarkdown();\n                complete(text, {\n                  body: { option: 'zap', command: inputValue },\n                }).then(() => setInputValue(''));\n              }}\n            />\n          </div>\n          {hasCompletion ? (\n            <AICompletionCommands\n              completion={completion}\n              onDiscard={() => {\n                editor.chain().unsetHighlight().focus().run();\n                reset();\n                onOpenChange(false);\n              }}\n            />\n          ) : (\n            <AISelectorCommands\n              onSelect={(value, option) =>\n                complete(value, { body: { option } })\n              }\n            />\n          )}\n        </>\n      )}\n    </CommandRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,cAAc,EACzB,cACA,oBAAoB,WACpB,kBAAkB,aACG;CACrB,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,UAAU,YAAY,kBAAkB;CAE9C,MAAM,EAAE,YAAY,UAAU,WAAW,UAAU,iBAAiB,UAClE,MAAM;EACJ,SAAS;EACT,OAAO,QAAQ,QAAQ;EACvB,aAAa,MAAM;EACpB,CAAC,CACH;AAED,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,gBAAgB,WAAW,SAAS;CAE1C,MAAM,6BAA6B;EACjC,MAAM,QAAQ,OAAO,MAAM,UAAU,SAAS;AAC9C,SAAO,OAAO,QAAQ,SAAS,WAAW,UACxC,MAAM,QACP;;AAGH,QACE,qBAAC,aAAD;EAAa,WAAU;YAAvB;GACG,iBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAACA,oBAAD,YAAmB,YAA8B;MAC7C;KACF;IACF;GAGP,aACC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,UAAD,EAAU,WAAU,wBAAyB;KAC5C,QAAQ;KACT,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,QAAD,EAAU;MACN;KACF;;GAGP,CAAC,aACA,8CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAQ,OAAT;KACE,OAAO;KACP,eAAe;KACf;KACA,aACE,gBAAgB,QAAQ,OAAO,QAAQ,QAAQ,YAAY;KAE7D,eAAe,eAAe,OAAO;KACrC,GACF,oBAAC,QAAD;KACE,OAAO,QAAQ,KAAK;KACpB,MAAK;KACL,aAAY;KACZ,SAAS;KACT,OAAO;KACP,WAAU;KACV,MAAM;KACN,eAAe;AAEb,eADa,cAAc,sBAAsB,EAClC,EACb,MAAM;OAAE,QAAQ;OAAO,SAAS;OAAY,EAC7C,CAAC,CAAC,WAAW,cAAc,GAAG,CAAC;;KAElC,EACE;OACL,gBACC,oBAAC,sBAAD;IACc;IACZ,iBAAiB;AACf,YAAO,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK;AAC7C,YAAO;AACP,kBAAa,MAAM;;IAErB,IAEF,oBAAC,oBAAD,EACE,WAAW,OAAO,WAChB,SAAS,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAEvC,EAEH;GAEO"}

package/dist/esm/components/MarkdownEditor/generative/AISelectorCommands.mjs

@@ -0,0 +1,81 @@
+'use client';
+
+import { Command } from "../../Command/index.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { getPrevText } from "../novel/utils/index.mjs";
+import { ArrowDownWideNarrow, CheckCheck, RefreshCcwDot, StepForward, WrapText } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/generative/AISelectorCommands.tsx
+const options = [
+	{
+		value: "improve",
+		label: "Improve writing",
+		icon: RefreshCcwDot
+	},
+	{
+		value: "fix",
+		label: "Fix grammar",
+		icon: CheckCheck
+	},
+	{
+		value: "shorter",
+		label: "Make shorter",
+		icon: ArrowDownWideNarrow
+	},
+	{
+		value: "longer",
+		label: "Make longer",
+		icon: WrapText
+	}
+];
+/**
+* The default command list shown in the AI bubble before a completion exists:
+* transforms applied to the current selection plus "continue writing".
+*/
+const AISelectorCommands = ({ onSelect }) => {
+	const { editor } = useEditor();
+	const content = useIntlayer("markdown-editor");
+	if (!editor) return null;
+	const getOptionLabel = (value) => {
+		switch (value) {
+			case "improve": return content.improveWriting.value;
+			case "fix": return content.fixGrammar.value;
+			case "shorter": return content.makeShorter.value;
+			case "longer": return content.makeLonger.value;
+			default: return value;
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Command.Group, {
+			heading: content.editHeading.value,
+			children: options.map((option) => /* @__PURE__ */ jsxs(Command.Item, {
+				value: option.value,
+				className: "flex gap-2 px-4",
+				onSelect: (value) => {
+					const slice = editor.state.selection.content();
+					onSelect(editor.storage.markdown.serializer.serialize(slice.content), value);
+				},
+				children: [/* @__PURE__ */ jsx(option.icon, { className: "size-4 text-text" }), getOptionLabel(option.value)]
+			}, option.value))
+		}),
+		/* @__PURE__ */ jsx(Command.Separator, {}),
+		/* @__PURE__ */ jsx(Command.Group, {
+			heading: content.moreHeading.value,
+			children: /* @__PURE__ */ jsxs(Command.Item, {
+				value: "continue",
+				className: "gap-2 px-4",
+				onSelect: () => {
+					const pos = editor.state.selection.from;
+					onSelect(getPrevText(editor, pos), "continue");
+				},
+				children: [/* @__PURE__ */ jsx(StepForward, { className: "size-4 text-text" }), content.continueWriting]
+			})
+		})
+	] });
+};
+
+//#endregion
+export { AISelectorCommands };
+//# sourceMappingURL=AISelectorCommands.mjs.map

package/dist/esm/components/MarkdownEditor/generative/AISelectorCommands.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AISelectorCommands.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/AISelectorCommands.tsx"],"sourcesContent":["'use client';\n\nimport { Command } from '@components/Command';\nimport {\n  ArrowDownWideNarrow,\n  CheckCheck,\n  RefreshCcwDot,\n  StepForward,\n  WrapText,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getPrevText, useEditor } from '../novel';\nimport type { AICompletionOption } from './useAICompletion';\n\nconst options: {\n  value: Exclude<AICompletionOption, 'zap'>;\n  label: string;\n  icon: typeof RefreshCcwDot;\n}[] = [\n  { value: 'improve', label: 'Improve writing', icon: RefreshCcwDot },\n  { value: 'fix', label: 'Fix grammar', icon: CheckCheck },\n  { value: 'shorter', label: 'Make shorter', icon: ArrowDownWideNarrow },\n  { value: 'longer', label: 'Make longer', icon: WrapText },\n];\n\nexport type AISelectorCommandsProps = {\n  onSelect: (value: string, option: AICompletionOption) => void;\n};\n\n/**\n * The default command list shown in the AI bubble before a completion exists:\n * transforms applied to the current selection plus \"continue writing\".\n */\nexport const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const getOptionLabel = (value: string) => {\n    switch (value) {\n      case 'improve':\n        return content.improveWriting.value;\n      case 'fix':\n        return content.fixGrammar.value;\n      case 'shorter':\n        return content.makeShorter.value;\n      case 'longer':\n        return content.makeLonger.value;\n      default:\n        return value;\n    }\n  };\n\n  return (\n    <>\n      <Command.Group heading={content.editHeading.value}>\n        {options.map((option) => (\n          <Command.Item\n            key={option.value}\n            value={option.value}\n            className=\"flex gap-2 px-4\"\n            onSelect={(value) => {\n              const slice = editor.state.selection.content();\n              const text = editor.storage.markdown.serializer.serialize(\n                slice.content\n              );\n              onSelect(text, value as AICompletionOption);\n            }}\n          >\n            <option.icon className=\"size-4 text-text\" />\n            {getOptionLabel(option.value)}\n          </Command.Item>\n        ))}\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading={content.moreHeading.value}>\n        <Command.Item\n          value=\"continue\"\n          className=\"gap-2 px-4\"\n          onSelect={() => {\n            const pos = editor.state.selection.from;\n            const text = getPrevText(editor, pos);\n            onSelect(text, 'continue');\n          }}\n        >\n          <StepForward className=\"size-4 text-text\" />\n          {content.continueWriting}\n        </Command.Item>\n      </Command.Group>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,UAIA;CACJ;EAAE,OAAO;EAAW,OAAO;EAAmB,MAAM;EAAe;CACnE;EAAE,OAAO;EAAO,OAAO;EAAe,MAAM;EAAY;CACxD;EAAE,OAAO;EAAW,OAAO;EAAgB,MAAM;EAAqB;CACtE;EAAE,OAAO;EAAU,OAAO;EAAe,MAAM;EAAU;CAC1D;;;;;AAUD,MAAa,sBAAsB,EAAE,eAAwC;CAC3E,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,UAAU,YAAY,kBAAkB;AAE9C,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,kBAAkB,UAAkB;AACxC,UAAQ,OAAR;GACE,KAAK,UACH,QAAO,QAAQ,eAAe;GAChC,KAAK,MACH,QAAO,QAAQ,WAAW;GAC5B,KAAK,UACH,QAAO,QAAQ,YAAY;GAC7B,KAAK,SACH,QAAO,QAAQ,WAAW;GAC5B,QACE,QAAO;;;AAIb,QACE;EACE,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aACzC,QAAQ,KAAK,WACZ,qBAAC,QAAQ,MAAT;IAEE,OAAO,OAAO;IACd,WAAU;IACV,WAAW,UAAU;KACnB,MAAM,QAAQ,OAAO,MAAM,UAAU,SAAS;AAI9C,cAHa,OAAO,QAAQ,SAAS,WAAW,UAC9C,MAAM,QAEK,EAAE,MAA4B;;cAT/C,CAYE,oBAAC,OAAO,MAAR,EAAa,WAAU,oBAAqB,GAC3C,eAAe,OAAO,MAAM,CAChB;MAbR,OAAO,MAaC,CACf;GACY;EAChB,oBAAC,QAAQ,WAAT,EAAqB;EACrB,oBAAC,QAAQ,OAAT;GAAe,SAAS,QAAQ,YAAY;aAC1C,qBAAC,QAAQ,MAAT;IACE,OAAM;IACN,WAAU;IACV,gBAAgB;KACd,MAAM,MAAM,OAAO,MAAM,UAAU;AAEnC,cADa,YAAY,QAAQ,IACpB,EAAE,WAAW;;cAN9B,CASE,oBAAC,aAAD,EAAa,WAAU,oBAAqB,GAC3C,QAAQ,gBACI;;GACD;EACf"}

package/dist/esm/components/MarkdownEditor/generative/GenerativeMenuSwitch.mjs

@@ -0,0 +1,47 @@
+'use client';
+
+import { Button } from "../../Button/Button.mjs";
+import { EditorBubble } from "../novel/components/editor-bubble.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { removeAIHighlight } from "../novel/extensions/ai-highlight.mjs";
+import { AISelector } from "./AISelector.mjs";
+import { Fragment, useEffect } from "react";
+import { Sparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx
+/**
+* Bubble menu that toggles between the regular formatting toolbar (its
+* `children`) and the AI command palette.
+*/
+const GenerativeMenuSwitch = ({ children, open, onOpenChange, sendButtonVariant, sendButtonColor }) => {
+	const { editor } = useEditor();
+	const content = useIntlayer("markdown-editor");
+	useEffect(() => {
+		if (!open && editor) removeAIHighlight(editor);
+	}, [open, editor]);
+	return /* @__PURE__ */ jsxs(EditorBubble, {
+		options: { placement: open ? "bottom-start" : "top" },
+		className: "flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+		children: [open && /* @__PURE__ */ jsx(AISelector, {
+			onOpenChange,
+			sendButtonVariant,
+			sendButtonColor
+		}), !open && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			label: content.askAI.value,
+			variant: "hoverable",
+			color: "text",
+			size: "sm",
+			roundedSize: "none",
+			className: "gap-1 text-text",
+			Icon: Sparkles,
+			onClick: () => onOpenChange(true),
+			children: content.askAI
+		}), children] })]
+	});
+};
+
+//#endregion
+export { GenerativeMenuSwitch };
+//# sourceMappingURL=GenerativeMenuSwitch.mjs.map

package/dist/esm/components/MarkdownEditor/generative/GenerativeMenuSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenerativeMenuSwitch.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  type ButtonColor,\n  type ButtonVariant,\n} from '@components/Button';\nimport { Sparkles } from 'lucide-react';\nimport { Fragment, type ReactNode, useEffect } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubble, removeAIHighlight, useEditor } from '../novel';\nimport { AISelector } from './AISelector';\n\nexport type GenerativeMenuSwitchProps = {\n  children: ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Visual variant forwarded to the AI send button. @default \"default\" */\n  sendButtonVariant?: ButtonVariant;\n  /** Color theme forwarded to the AI send button. @default \"text\" */\n  sendButtonColor?: ButtonColor;\n};\n\n/**\n * Bubble menu that toggles between the regular formatting toolbar (its\n * `children`) and the AI command palette.\n */\nexport const GenerativeMenuSwitch = ({\n  children,\n  open,\n  onOpenChange,\n  sendButtonVariant,\n  sendButtonColor,\n}: GenerativeMenuSwitchProps) => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!open && editor) removeAIHighlight(editor);\n  }, [open, editor]);\n\n  return (\n    <EditorBubble\n      options={{ placement: open ? 'bottom-start' : 'top' }}\n      className=\"flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl\"\n    >\n      {open && (\n        <AISelector\n          onOpenChange={onOpenChange}\n          sendButtonVariant={sendButtonVariant}\n          sendButtonColor={sendButtonColor}\n        />\n      )}\n      {!open && (\n        <Fragment>\n          <Button\n            label={content.askAI.value}\n            variant=\"hoverable\"\n            color=\"text\"\n            size=\"sm\"\n            roundedSize=\"none\"\n            className=\"gap-1 text-text\"\n            Icon={Sparkles}\n            onClick={() => onOpenChange(true)}\n          >\n            {content.askAI}\n          </Button>\n          {children}\n        </Fragment>\n      )}\n    </EditorBubble>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,MAAa,wBAAwB,EACnC,UACA,MACA,cACA,mBACA,sBAC+B;CAC/B,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,UAAU,YAAY,kBAAkB;AAE9C,iBAAgB;AACd,MAAI,CAAC,QAAQ,OAAQ,mBAAkB,OAAO;IAC7C,CAAC,MAAM,OAAO,CAAC;AAElB,QACE,qBAAC,cAAD;EACE,SAAS,EAAE,WAAW,OAAO,iBAAiB,OAAO;EACrD,WAAU;YAFZ,CAIG,QACC,oBAAC,YAAD;GACgB;GACK;GACF;GACjB,GAEH,CAAC,QACA,qBAAC,UAAD,aACE,oBAAC,QAAD;GACE,OAAO,QAAQ,MAAM;GACrB,SAAQ;GACR,OAAM;GACN,MAAK;GACL,aAAY;GACZ,WAAU;GACV,MAAM;GACN,eAAe,aAAa,KAAK;aAEhC,QAAQ;GACF,GACR,SACQ,IAEA"}