notra-editor 0.4.0 → 0.6.0

package/dist/components/code-block-view/code-block-shell.cjs

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_block_shell_exports = {};
+__export(code_block_shell_exports, {
+  CodeBlockShell: () => CodeBlockShell
+});
+module.exports = __toCommonJS(code_block_shell_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_copy_button = require("../copy-button");
+const CodeBlockShell = ({
+  value,
+  languageSlot,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "nt:relative", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "nt:absolute nt:inset-x-0 nt:top-0 nt:flex nt:h-9 nt:items-center nt:justify-between nt:px-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nt:min-w-0 nt:flex-1", children: languageSlot }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_button.CopyButton, { value })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "nt:!pt-9 hljs", children })
+] });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlockShell
+});
+//# sourceMappingURL=code-block-shell.cjs.map

package/dist/components/code-block-view/code-block-shell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/code-block-shell.tsx"],"sourcesContent":["import { CopyButton } from '../copy-button';\n\nimport type { ReactNode } from 'react';\n\ninterface CodeBlockShellProps {\n\tvalue: string;\n\tlanguageSlot: ReactNode;\n\tchildren: ReactNode;\n}\n\n// Visual frame shared by the editor (NodeView) and reader (nodeMapping).\n// `languageSlot` lets each consumer plug its own widget into the top bar:\n// the editor passes <LanguageSelect>, the reader passes a static label.\n// `children` is the <code> element (NodeViewContent in the editor, a\n// dangerouslySetInnerHTML <code> in the reader).\nexport const CodeBlockShell = ({\n\tvalue,\n\tlanguageSlot,\n\tchildren\n}: CodeBlockShellProps) => (\n\t<div className=\"nt:relative\">\n\t\t<div className=\"nt:absolute nt:inset-x-0 nt:top-0 nt:flex nt:h-9 nt:items-center nt:justify-between nt:px-2\">\n\t\t\t<div className=\"nt:min-w-0 nt:flex-1\">{languageSlot}</div>\n\t\t\t<CopyButton value={value} />\n\t\t</div>\n\t\t<pre className=\"nt:!pt-9 hljs\">{children}</pre>\n\t</div>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBE;AArBF,yBAA2B;AAepB,MAAM,iBAAiB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,MACC,6CAAC,SAAI,WAAU,eACd;AAAA,+CAAC,SAAI,WAAU,+FACd;AAAA,gDAAC,SAAI,WAAU,wBAAwB,wBAAa;AAAA,IACpD,4CAAC,iCAAW,OAAc;AAAA,KAC3B;AAAA,EACA,4CAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GAC1C;","names":[]}

package/dist/components/code-block-view/code-block-shell.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface CodeBlockShellProps {
+    value: string;
+    languageSlot: ReactNode;
+    children: ReactNode;
+}
+declare const CodeBlockShell: ({ value, languageSlot, children }: CodeBlockShellProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlockShell };

package/dist/components/code-block-view/code-block-shell.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface CodeBlockShellProps {
+    value: string;
+    languageSlot: ReactNode;
+    children: ReactNode;
+}
+declare const CodeBlockShell: ({ value, languageSlot, children }: CodeBlockShellProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlockShell };

package/dist/components/code-block-view/code-block-shell.mjs

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyButton } from "../copy-button";
+const CodeBlockShell = ({
+  value,
+  languageSlot,
+  children
+}) => /* @__PURE__ */ jsxs("div", { className: "nt:relative", children: [
+  /* @__PURE__ */ jsxs("div", { className: "nt:absolute nt:inset-x-0 nt:top-0 nt:flex nt:h-9 nt:items-center nt:justify-between nt:px-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "nt:min-w-0 nt:flex-1", children: languageSlot }),
+    /* @__PURE__ */ jsx(CopyButton, { value })
+  ] }),
+  /* @__PURE__ */ jsx("pre", { className: "nt:!pt-9 hljs", children })
+] });
+export {
+  CodeBlockShell
+};
+//# sourceMappingURL=code-block-shell.mjs.map

package/dist/components/code-block-view/code-block-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/code-block-shell.tsx"],"sourcesContent":["import { CopyButton } from '../copy-button';\n\nimport type { ReactNode } from 'react';\n\ninterface CodeBlockShellProps {\n\tvalue: string;\n\tlanguageSlot: ReactNode;\n\tchildren: ReactNode;\n}\n\n// Visual frame shared by the editor (NodeView) and reader (nodeMapping).\n// `languageSlot` lets each consumer plug its own widget into the top bar:\n// the editor passes <LanguageSelect>, the reader passes a static label.\n// `children` is the <code> element (NodeViewContent in the editor, a\n// dangerouslySetInnerHTML <code> in the reader).\nexport const CodeBlockShell = ({\n\tvalue,\n\tlanguageSlot,\n\tchildren\n}: CodeBlockShellProps) => (\n\t<div className=\"nt:relative\">\n\t\t<div className=\"nt:absolute nt:inset-x-0 nt:top-0 nt:flex nt:h-9 nt:items-center nt:justify-between nt:px-2\">\n\t\t\t<div className=\"nt:min-w-0 nt:flex-1\">{languageSlot}</div>\n\t\t\t<CopyButton value={value} />\n\t\t</div>\n\t\t<pre className=\"nt:!pt-9 hljs\">{children}</pre>\n\t</div>\n);\n"],"mappings":"AAqBE,SACC,KADD;AArBF,SAAS,kBAAkB;AAepB,MAAM,iBAAiB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,MACC,qBAAC,SAAI,WAAU,eACd;AAAA,uBAAC,SAAI,WAAU,+FACd;AAAA,wBAAC,SAAI,WAAU,wBAAwB,wBAAa;AAAA,IACpD,oBAAC,cAAW,OAAc;AAAA,KAC3B;AAAA,EACA,oBAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA,GAC1C;","names":[]}

package/dist/components/{code-block-view.cjs → code-block-view/code-block-view.cjs}

@@ -19,21 +19,29 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var code_block_view_exports = {};
 __export(code_block_view_exports, {
-  CodeBlockShell: () => CodeBlockShell,
   CodeBlockView: () => CodeBlockView
 });
 module.exports = __toCommonJS(code_block_view_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@tiptap/react");
-var import_copy_button = require("./copy-button");
-const CodeBlockShell = ({ value, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "nt:relative", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "nt:absolute nt:inset-x-0 nt:top-0 nt:flex nt:h-9 nt:items-center nt:justify-end nt:px-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_copy_button.CopyButton, { value }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "nt:!pt-9", children })
-] });
-const CodeBlockView = ({ node }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlockShell, { value: node.textContent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.NodeViewContent, { as: "code" }) }) });
+var import_code_block_shell = require("./code-block-shell");
+var import_language_select = require("./language-select");
+const CodeBlockView = ({ node, updateAttributes }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.NodeViewWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_code_block_shell.CodeBlockShell,
+  {
+    languageSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_language_select.LanguageSelect,
+      {
+        language: node.attrs.language ?? "",
+        onLanguageChange: (language) => updateAttributes({ language })
+      }
+    ),
+    value: node.textContent,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.NodeViewContent, { as: "code", className: "hljs" })
+  }
+) });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CodeBlockShell,
   CodeBlockView
 });
 //# sourceMappingURL=code-block-view.cjs.map

package/dist/components/code-block-view/code-block-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/code-block-view.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tNodeViewContent,\n\tNodeViewWrapper,\n\ttype NodeViewProps\n} from '@tiptap/react';\n\nimport { CodeBlockShell } from './code-block-shell';\nimport { LanguageSelect } from './language-select';\n\n// Editor-side React NodeView. Tiptap mounts content-editable DOM directly\n// onto the <code> rendered by NodeViewContent. lowlight decorates that\n// content with <span class=\"hljs-*\"> spans on every transaction.\nexport const CodeBlockView = ({ node, updateAttributes }: NodeViewProps) => (\n\t<NodeViewWrapper>\n\t\t<CodeBlockShell\n\t\t\tlanguageSlot={\n\t\t\t\t<LanguageSelect\n\t\t\t\t\tlanguage={(node.attrs.language as string) ?? ''}\n\t\t\t\t\tonLanguageChange={(language) => updateAttributes({ language })}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tvalue={node.textContent}\n\t\t>\n\t\t\t<NodeViewContent<'code'> as=\"code\" className=\"hljs\" />\n\t\t</CodeBlockShell>\n\t</NodeViewWrapper>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAhBJ,mBAIO;AAEP,8BAA+B;AAC/B,6BAA+B;AAKxB,MAAM,gBAAgB,CAAC,EAAE,MAAM,iBAAiB,MACtD,4CAAC,gCACA;AAAA,EAAC;AAAA;AAAA,IACA,cACC;AAAA,MAAC;AAAA;AAAA,QACA,UAAW,KAAK,MAAM,YAAuB;AAAA,QAC7C,kBAAkB,CAAC,aAAa,iBAAiB,EAAE,SAAS,CAAC;AAAA;AAAA,IAC9D;AAAA,IAED,OAAO,KAAK;AAAA,IAEZ,sDAAC,gCAAwB,IAAG,QAAO,WAAU,QAAO;AAAA;AACrD,GACD;","names":[]}

package/dist/components/code-block-view/code-block-view.d.cts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+declare const CodeBlockView: ({ node, updateAttributes }: NodeViewProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlockView };

package/dist/components/code-block-view/code-block-view.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+declare const CodeBlockView: ({ node, updateAttributes }: NodeViewProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlockView };

package/dist/components/code-block-view/code-block-view.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  NodeViewContent,
+  NodeViewWrapper
+} from "@tiptap/react";
+import { CodeBlockShell } from "./code-block-shell";
+import { LanguageSelect } from "./language-select";
+const CodeBlockView = ({ node, updateAttributes }) => /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(
+  CodeBlockShell,
+  {
+    languageSlot: /* @__PURE__ */ jsx(
+      LanguageSelect,
+      {
+        language: node.attrs.language ?? "",
+        onLanguageChange: (language) => updateAttributes({ language })
+      }
+    ),
+    value: node.textContent,
+    children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code", className: "hljs" })
+  }
+) });
+export {
+  CodeBlockView
+};
+//# sourceMappingURL=code-block-view.mjs.map

package/dist/components/code-block-view/code-block-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/code-block-view.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tNodeViewContent,\n\tNodeViewWrapper,\n\ttype NodeViewProps\n} from '@tiptap/react';\n\nimport { CodeBlockShell } from './code-block-shell';\nimport { LanguageSelect } from './language-select';\n\n// Editor-side React NodeView. Tiptap mounts content-editable DOM directly\n// onto the <code> rendered by NodeViewContent. lowlight decorates that\n// content with <span class=\"hljs-*\"> spans on every transaction.\nexport const CodeBlockView = ({ node, updateAttributes }: NodeViewProps) => (\n\t<NodeViewWrapper>\n\t\t<CodeBlockShell\n\t\t\tlanguageSlot={\n\t\t\t\t<LanguageSelect\n\t\t\t\t\tlanguage={(node.attrs.language as string) ?? ''}\n\t\t\t\t\tonLanguageChange={(language) => updateAttributes({ language })}\n\t\t\t\t/>\n\t\t\t}\n\t\t\tvalue={node.textContent}\n\t\t>\n\t\t\t<NodeViewContent<'code'> as=\"code\" className=\"hljs\" />\n\t\t</CodeBlockShell>\n\t</NodeViewWrapper>\n);\n"],"mappings":";AAkBI;AAhBJ;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AAEP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAKxB,MAAM,gBAAgB,CAAC,EAAE,MAAM,iBAAiB,MACtD,oBAAC,mBACA;AAAA,EAAC;AAAA;AAAA,IACA,cACC;AAAA,MAAC;AAAA;AAAA,QACA,UAAW,KAAK,MAAM,YAAuB;AAAA,QAC7C,kBAAkB,CAAC,aAAa,iBAAiB,EAAE,SAAS,CAAC;AAAA;AAAA,IAC9D;AAAA,IAED,OAAO,KAAK;AAAA,IAEZ,8BAAC,mBAAwB,IAAG,QAAO,WAAU,QAAO;AAAA;AACrD,GACD;","names":[]}

package/dist/components/code-block-view/language-select.cjs

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var language_select_exports = {};
+__export(language_select_exports, {
+  LanguageSelect: () => LanguageSelect
+});
+module.exports = __toCommonJS(language_select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_languages = require("../../lib/languages");
+var import_utils = require("../../lib/utils");
+var import_button = require("../ui/button");
+var import_command = require("../ui/command");
+var import_popover = require("../ui/popover");
+const LanguageSelect = ({
+  language,
+  onLanguageChange
+}) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const current = language || "auto";
+  const label = (0, import_languages.getLanguageLabel)(current);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_button.Button,
+      {
+        "aria-expanded": open,
+        className: "nt:h-7 nt:gap-1 nt:px-2 nt:text-xs",
+        size: "sm",
+        tabIndex: -1,
+        type: "button",
+        variant: "ghost",
+        children: [
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDownIcon, { className: "nt:size-3 nt:opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, { align: "start", className: "nt:w-[200px] nt:p-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.Command, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandInput, { placeholder: "Search language..." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_command.CommandList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandEmpty, { children: "No language found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_command.CommandGroup, { children: import_languages.LANGUAGES.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_command.CommandItem,
+          {
+            value: item.value,
+            onSelect: (value) => {
+              onLanguageChange(value);
+              setOpen(false);
+            },
+            children: [
+              item.label,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_lucide_react.CheckIcon,
+                {
+                  className: (0, import_utils.cn)(
+                    "nt:ml-auto nt:size-4",
+                    current === item.value ? "nt:opacity-100" : "nt:opacity-0"
+                  )
+                }
+              )
+            ]
+          },
+          item.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LanguageSelect
+});
+//# sourceMappingURL=language-select.cjs.map

package/dist/components/code-block-view/language-select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/language-select.tsx"],"sourcesContent":["'use client';\n\nimport { CheckIcon, ChevronDownIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { LANGUAGES, getLanguageLabel } from '../../lib/languages';\nimport { cn } from '../../lib/utils';\nimport { Button } from '../ui/button';\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandInput,\n\tCommandItem,\n\tCommandList\n} from '../ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\n\nexport interface LanguageSelectProps {\n\t/** Current language value (e.g. \"typescript\"); empty / \"auto\" → \"Auto\" label */\n\tlanguage: string;\n\t/** Called with the new value when the user picks a language */\n\tonLanguageChange: (language: string) => void;\n}\n\nexport const LanguageSelect = ({\n\tlanguage,\n\tonLanguageChange\n}: LanguageSelectProps) => {\n\tconst [open, setOpen] = useState(false);\n\tconst current = language || 'auto';\n\tconst label = getLanguageLabel(current);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\tclassName=\"nt:h-7 nt:gap-1 nt:px-2 nt:text-xs\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t\t<ChevronDownIcon className=\"nt:size-3 nt:opacity-50\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent align=\"start\" className=\"nt:w-[200px] nt:p-0\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Search language...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>No language found.</CommandEmpty>\n\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t{LANGUAGES.map((item) => (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tonSelect={(value) => {\n\t\t\t\t\t\t\t\t\t\tonLanguageChange(value);\n\t\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'nt:ml-auto nt:size-4',\n\t\t\t\t\t\t\t\t\t\t\tcurrent === item.value ? 'nt:opacity-100' : 'nt:opacity-0'\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCI;AAlCJ,0BAA2C;AAC3C,mBAAyB;AAEzB,uBAA4C;AAC5C,mBAAmB;AACnB,oBAAuB;AACvB,qBAOO;AACP,qBAAwD;AASjD,MAAM,iBAAiB,CAAC;AAAA,EAC9B;AAAA,EACA;AACD,MAA2B;AAC1B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,UAAU,YAAY;AAC5B,QAAM,YAAQ,mCAAiB,OAAO;AAEtC,SACC,6CAAC,0BAAQ,MAAY,cAAc,SAClC;AAAA,gDAAC,iCAAe,SAAO,MAAC,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACzD;AAAA,MAAC;AAAA;AAAA,QACA,iBAAe;AAAA,QACf,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QAEP;AAAA;AAAA,UACD,4CAAC,uCAAgB,WAAU,2BAA0B;AAAA;AAAA;AAAA,IACtD,GACD;AAAA,IACA,4CAAC,iCAAe,OAAM,SAAQ,WAAU,uBACvC,uDAAC,0BACA;AAAA,kDAAC,+BAAa,aAAY,sBAAqB;AAAA,MAC/C,6CAAC,8BACA;AAAA,oDAAC,+BAAa,gCAAkB;AAAA,QAChC,4CAAC,+BACC,qCAAU,IAAI,CAAC,SACf;AAAA,UAAC;AAAA;AAAA,YAEA,OAAO,KAAK;AAAA,YACZ,UAAU,CAAC,UAAU;AACpB,+BAAiB,KAAK;AACtB,sBAAQ,KAAK;AAAA,YACd;AAAA,YAEC;AAAA,mBAAK;AAAA,cACN;AAAA,gBAAC;AAAA;AAAA,kBACA,eAAW;AAAA,oBACV;AAAA,oBACA,YAAY,KAAK,QAAQ,mBAAmB;AAAA,kBAC7C;AAAA;AAAA,cACD;AAAA;AAAA;AAAA,UAbK,KAAK;AAAA,QAcX,CACA,GACF;AAAA,SACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;","names":[]}

package/dist/components/code-block-view/language-select.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LanguageSelectProps {
+    /** Current language value (e.g. "typescript"); empty / "auto" → "Auto" label */
+    language: string;
+    /** Called with the new value when the user picks a language */
+    onLanguageChange: (language: string) => void;
+}
+declare const LanguageSelect: ({ language, onLanguageChange }: LanguageSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { LanguageSelect, type LanguageSelectProps };

package/dist/components/code-block-view/language-select.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LanguageSelectProps {
+    /** Current language value (e.g. "typescript"); empty / "auto" → "Auto" label */
+    language: string;
+    /** Called with the new value when the user picks a language */
+    onLanguageChange: (language: string) => void;
+}
+declare const LanguageSelect: ({ language, onLanguageChange }: LanguageSelectProps) => react_jsx_runtime.JSX.Element;
+
+export { LanguageSelect, type LanguageSelectProps };

package/dist/components/code-block-view/language-select.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { LANGUAGES, getLanguageLabel } from "../../lib/languages";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+const LanguageSelect = ({
+  language,
+  onLanguageChange
+}) => {
+  const [open, setOpen] = useState(false);
+  const current = language || "auto";
+  const label = getLanguageLabel(current);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-expanded": open,
+        className: "nt:h-7 nt:gap-1 nt:px-2 nt:text-xs",
+        size: "sm",
+        tabIndex: -1,
+        type: "button",
+        variant: "ghost",
+        children: [
+          label,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "nt:size-3 nt:opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "nt:w-[200px] nt:p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search language..." }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: "No language found." }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: LANGUAGES.map((item) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: item.value,
+            onSelect: (value) => {
+              onLanguageChange(value);
+              setOpen(false);
+            },
+            children: [
+              item.label,
+              /* @__PURE__ */ jsx(
+                CheckIcon,
+                {
+                  className: cn(
+                    "nt:ml-auto nt:size-4",
+                    current === item.value ? "nt:opacity-100" : "nt:opacity-0"
+                  )
+                }
+              )
+            ]
+          },
+          item.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  LanguageSelect
+};
+//# sourceMappingURL=language-select.mjs.map

package/dist/components/code-block-view/language-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-view/language-select.tsx"],"sourcesContent":["'use client';\n\nimport { CheckIcon, ChevronDownIcon } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { LANGUAGES, getLanguageLabel } from '../../lib/languages';\nimport { cn } from '../../lib/utils';\nimport { Button } from '../ui/button';\nimport {\n\tCommand,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandInput,\n\tCommandItem,\n\tCommandList\n} from '../ui/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\n\nexport interface LanguageSelectProps {\n\t/** Current language value (e.g. \"typescript\"); empty / \"auto\" → \"Auto\" label */\n\tlanguage: string;\n\t/** Called with the new value when the user picks a language */\n\tonLanguageChange: (language: string) => void;\n}\n\nexport const LanguageSelect = ({\n\tlanguage,\n\tonLanguageChange\n}: LanguageSelectProps) => {\n\tconst [open, setOpen] = useState(false);\n\tconst current = language || 'auto';\n\tconst label = getLanguageLabel(current);\n\n\treturn (\n\t\t<Popover open={open} onOpenChange={setOpen}>\n\t\t\t<PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={open}\n\t\t\t\t\tclassName=\"nt:h-7 nt:gap-1 nt:px-2 nt:text-xs\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t\t<ChevronDownIcon className=\"nt:size-3 nt:opacity-50\" />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent align=\"start\" className=\"nt:w-[200px] nt:p-0\">\n\t\t\t\t<Command>\n\t\t\t\t\t<CommandInput placeholder=\"Search language...\" />\n\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t<CommandEmpty>No language found.</CommandEmpty>\n\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t{LANGUAGES.map((item) => (\n\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\t\t\tonSelect={(value) => {\n\t\t\t\t\t\t\t\t\t\tonLanguageChange(value);\n\t\t\t\t\t\t\t\t\t\tsetOpen(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'nt:ml-auto nt:size-4',\n\t\t\t\t\t\t\t\t\t\t\tcurrent === item.value ? 'nt:opacity-100' : 'nt:opacity-0'\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t</CommandList>\n\t\t\t\t</Command>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n};\n"],"mappings":";AAoCI,SASC,KATD;AAlCJ,SAAS,WAAW,uBAAuB;AAC3C,SAAS,gBAAgB;AAEzB,SAAS,WAAW,wBAAwB;AAC5C,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AASjD,MAAM,iBAAiB,CAAC;AAAA,EAC9B;AAAA,EACA;AACD,MAA2B;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,UAAU,YAAY;AAC5B,QAAM,QAAQ,iBAAiB,OAAO;AAEtC,SACC,qBAAC,WAAQ,MAAY,cAAc,SAClC;AAAA,wBAAC,kBAAe,SAAO,MAAC,SAAS,CAAC,MAAM,EAAE,gBAAgB,GACzD;AAAA,MAAC;AAAA;AAAA,QACA,iBAAe;AAAA,QACf,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QAEP;AAAA;AAAA,UACD,oBAAC,mBAAgB,WAAU,2BAA0B;AAAA;AAAA;AAAA,IACtD,GACD;AAAA,IACA,oBAAC,kBAAe,OAAM,SAAQ,WAAU,uBACvC,+BAAC,WACA;AAAA,0BAAC,gBAAa,aAAY,sBAAqB;AAAA,MAC/C,qBAAC,eACA;AAAA,4BAAC,gBAAa,gCAAkB;AAAA,QAChC,oBAAC,gBACC,oBAAU,IAAI,CAAC,SACf;AAAA,UAAC;AAAA;AAAA,YAEA,OAAO,KAAK;AAAA,YACZ,UAAU,CAAC,UAAU;AACpB,+BAAiB,KAAK;AACtB,sBAAQ,KAAK;AAAA,YACd;AAAA,YAEC;AAAA,mBAAK;AAAA,cACN;AAAA,gBAAC;AAAA;AAAA,kBACA,WAAW;AAAA,oBACV;AAAA,oBACA,YAAY,KAAK,QAAQ,mBAAmB;AAAA,kBAC7C;AAAA;AAAA,cACD;AAAA;AAAA;AAAA,UAbK,KAAK;AAAA,QAcX,CACA,GACF;AAAA,SACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;","names":[]}

package/dist/components/image-popover/image-popover.cjs

@@ -0,0 +1,161 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_popover_exports = {};
+__export(image_popover_exports, {
+  ImagePopover: () => ImagePopover
+});
+module.exports = __toCommonJS(image_popover_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_use_image_popover = require("./use-image-popover");
+var import_button = require("../ui/button");
+var import_input = require("../ui/input");
+var import_popover = require("../ui/popover");
+var import_separator = require("../ui/separator");
+const ImagePopover = (0, import_react.forwardRef)(
+  ({ editor, ...buttonProps }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+    const {
+      url,
+      setUrl,
+      alt,
+      setAlt,
+      isActive,
+      canSet,
+      setImage,
+      removeImage,
+      wasSelectionMove
+    } = (0, import_use_image_popover.useImagePopover)({ editor });
+    (0, import_react.useEffect)(() => {
+      if (isActive && wasSelectionMove) {
+        setIsOpen(true);
+      }
+    }, [isActive, wasSelectionMove]);
+    const handleSetImage = (0, import_react.useCallback)(() => {
+      setImage();
+      setIsOpen(false);
+    }, [setImage]);
+    const handleRemoveImage = (0, import_react.useCallback)(() => {
+      removeImage();
+      setIsOpen(false);
+    }, [removeImage]);
+    const handleKeyDown = (0, import_react.useCallback)(
+      (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          handleSetImage();
+        }
+      },
+      [handleSetImage]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          ref,
+          "aria-label": "Image",
+          "aria-pressed": isActive,
+          "data-active-state": isActive ? "on" : "off",
+          disabled: !canSet,
+          size: "icon",
+          tabIndex: -1,
+          type: "button",
+          variant: "ghost",
+          ...buttonProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.ImageIcon,
+            {
+              className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_popover.PopoverContent,
+        {
+          align: "start",
+          className: "nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input.Input,
+              {
+                autoFocus: true,
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Paste image URL...",
+                type: "url",
+                value: url,
+                onChange: (e) => setUrl(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_input.Input,
+              {
+                className: "nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0",
+                placeholder: "Alt text (optional)",
+                type: "text",
+                value: alt,
+                onChange: (e) => setAlt(e.target.value),
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "nt:flex nt:items-center nt:justify-end nt:gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.Button,
+                {
+                  "aria-label": "Apply image",
+                  disabled: !url && !isActive,
+                  size: "icon-sm",
+                  tabIndex: -1,
+                  type: "button",
+                  variant: "ghost",
+                  onClick: handleSetImage,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CornerDownLeft, {})
+                }
+              ),
+              isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, { className: "nt:h-5", orientation: "vertical" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_button.Button,
+                  {
+                    "aria-label": "Remove image",
+                    size: "icon-sm",
+                    tabIndex: -1,
+                    type: "button",
+                    variant: "ghost",
+                    onClick: handleRemoveImage,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash2, {})
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ImagePopover.displayName = "ImagePopover";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImagePopover
+});
+//# sourceMappingURL=image-popover.cjs.map

package/dist/components/image-popover/image-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/image-popover/image-popover.tsx"],"sourcesContent":["'use client';\n\nimport { CornerDownLeft, ImageIcon, Trash2 } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { useImagePopover } from './use-image-popover';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';\nimport { Separator } from '../ui/separator';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ImagePopoverProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nexport const ImagePopover = forwardRef<HTMLButtonElement, ImagePopoverProps>(\n\t({ editor, ...buttonProps }, ref) => {\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\n\t\tconst {\n\t\t\turl,\n\t\t\tsetUrl,\n\t\t\talt,\n\t\t\tsetAlt,\n\t\t\tisActive,\n\t\t\tcanSet,\n\t\t\tsetImage,\n\t\t\tremoveImage,\n\t\t\twasSelectionMove\n\t\t} = useImagePopover({ editor });\n\n\t\t// Auto-open popover when cursor moves onto an existing image (selection-only transaction)\n\t\tuseEffect(() => {\n\t\t\tif (isActive && wasSelectionMove) {\n\t\t\t\tsetIsOpen(true);\n\t\t\t}\n\t\t}, [isActive, wasSelectionMove]);\n\n\t\tconst handleSetImage = useCallback(() => {\n\t\t\tsetImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [setImage]);\n\n\t\tconst handleRemoveImage = useCallback(() => {\n\t\t\tremoveImage();\n\t\t\tsetIsOpen(false);\n\t\t}, [removeImage]);\n\n\t\tconst handleKeyDown = useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\t\t\tif (event.key === 'Enter') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSetImage();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[handleSetImage]\n\t\t);\n\n\t\treturn (\n\t\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"Image\"\n\t\t\t\t\t\taria-pressed={isActive}\n\t\t\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\t\t\tdisabled={!canSet}\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ImageIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</PopoverTrigger>\n\t\t\t\t<PopoverContent\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tclassName=\"nt:flex nt:w-72 nt:flex-col nt:gap-1 nt:p-1\"\n\t\t\t\t>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Paste image URL...\"\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tvalue={url}\n\t\t\t\t\t\tonChange={(e) => setUrl(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"nt:h-7 nt:border-none nt:shadow-none nt:focus-visible:ring-0\"\n\t\t\t\t\t\tplaceholder=\"Alt text (optional)\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tvalue={alt}\n\t\t\t\t\t\tonChange={(e) => setAlt(e.target.value)}\n\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"nt:flex nt:items-center nt:justify-end nt:gap-1\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\taria-label=\"Apply image\"\n\t\t\t\t\t\t\tdisabled={!url && !isActive}\n\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tonClick={handleSetImage}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CornerDownLeft />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{isActive && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Separator className=\"nt:h-5\" orientation=\"vertical\" />\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\taria-label=\"Remove image\"\n\t\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tonClick={handleRemoveImage}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Trash2 />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</PopoverContent>\n\t\t\t</Popover>\n\t\t);\n\t}\n);\n\nImagePopover.displayName = 'ImagePopover';\n"],"mappings":"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","names":[]}

package/dist/components/image-popover/image-popover.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface ImagePopoverProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+}
+declare const ImagePopover: react.ForwardRefExoticComponent<ImagePopoverProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ImagePopover, type ImagePopoverProps };

package/dist/components/image-popover/image-popover.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/core';
+
+interface ImagePopoverProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+}
+declare const ImagePopover: react.ForwardRefExoticComponent<ImagePopoverProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { ImagePopover, type ImagePopoverProps };