notra-editor 0.2.0 → 0.4.0

package/README.md

@@ -19,7 +19,6 @@ npm install notra-editor
 
 ```tsx
 import { NotraEditor } from 'notra-editor';
-import 'notra-editor/themes/default/shared.css';
 import 'notra-editor/themes/default/editor.css';
 import { useState } from 'react';
 
@@ -40,7 +39,6 @@ function App() {
 
 ```tsx
 import { NotraReader } from 'notra-editor';
-import 'notra-editor/themes/default/shared.css';
 import 'notra-editor/themes/default/reader.css';
 
 function Article({ markdown }: { markdown: string }) {
@@ -77,16 +75,14 @@ function Article({ markdown }: { markdown: string }) {
 
 ## Themes
 
-Import theme CSS files to style the editor and reader:
+Import theme CSS files to style the editor and reader. Each entry already
+includes the shared base styles, so a single import is enough:
 
 ```ts
-// Shared styles (required for both editor and reader)
-import 'notra-editor/themes/default/shared.css';
-
-// Editor-specific styles
+// Editor styles (includes shared base)
 import 'notra-editor/themes/default/editor.css';
 
-// Reader-specific styles
+// Reader styles (includes shared base)
 import 'notra-editor/themes/default/reader.css';
 ```
 

package/dist/components/blockquote-button/blockquote-button.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 blockquote_button_exports = {};
+__export(blockquote_button_exports, {
+  BlockquoteButton: () => BlockquoteButton
+});
+module.exports = __toCommonJS(blockquote_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_button = require("../ui/button");
+function canToggleBlockquote(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleWrap("blockquote") || editor.can().clearNodes();
+}
+const BlockquoteButton = (0, import_react.forwardRef)(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const update = () => {
+      setIsActive(editor.isActive("blockquote"));
+      setCanToggle(canToggleBlockquote(editor));
+    };
+    update();
+    editor.on("selectionUpdate", update);
+    editor.on("transaction", update);
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("transaction", update);
+    };
+  }, [editor]);
+  const handleClick = (0, import_react.useCallback)(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!editor) return;
+      if (editor.isActive("blockquote")) {
+        editor.chain().focus().lift("blockquote").run();
+      } else {
+        editor.chain().focus().clearNodes().wrapIn("blockquote").run();
+      }
+    },
+    [editor, onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      ref,
+      "aria-label": "Blockquote",
+      "aria-pressed": isActive,
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle,
+      size: "icon",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: handleClick,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_lucide_react.TextQuote,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+BlockquoteButton.displayName = "BlockquoteButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlockquoteButton
+});
+//# sourceMappingURL=blockquote-button.cjs.map

package/dist/components/blockquote-button/blockquote-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blockquote-button/blockquote-button.tsx"],"sourcesContent":["'use client';\n\nimport { TextQuote } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { Button } from '../ui/button';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface BlockquoteButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nfunction canToggleBlockquote(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn editor.can().toggleWrap('blockquote') || editor.can().clearNodes();\n}\n\nexport const BlockquoteButton = forwardRef<\n\tHTMLButtonElement,\n\tBlockquoteButtonProps\n>(({ editor, onClick, ...buttonProps }, ref) => {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst update = () => {\n\t\t\tsetIsActive(editor.isActive('blockquote'));\n\t\t\tsetCanToggle(canToggleBlockquote(editor));\n\t\t};\n\n\t\tupdate();\n\n\t\teditor.on('selectionUpdate', update);\n\t\teditor.on('transaction', update);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', update);\n\t\t\teditor.off('transaction', update);\n\t\t};\n\t}, [editor]);\n\n\tconst handleClick = useCallback(\n\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\tonClick?.(event);\n\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (!editor) return;\n\n\t\t\tif (editor.isActive('blockquote')) {\n\t\t\t\teditor.chain().focus().lift('blockquote').run();\n\t\t\t} else {\n\t\t\t\t// clearNodes first to convert any block type to paragraph,\n\t\t\t\t// then wrap in blockquote\n\t\t\t\teditor.chain().focus().clearNodes().wrapIn('blockquote').run();\n\t\t\t}\n\t\t},\n\t\t[editor, onClick]\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\taria-label=\"Blockquote\"\n\t\t\taria-pressed={isActive}\n\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\tdisabled={!canToggle}\n\t\t\tsize=\"icon\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={handleClick}\n\t\t\t{...buttonProps}\n\t\t>\n\t\t\t<TextQuote\n\t\t\t\tclassName={isActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined}\n\t\t\t/>\n\t\t</Button>\n\t);\n});\n\nBlockquoteButton.displayName = 'BlockquoteButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiFG;AA/EH,0BAA0B;AAC1B,mBAA6D;AAE7D,oBAAuB;AAWvB,SAAS,oBAAoB,QAAgC;AAC5D,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SAAO,OAAO,IAAI,EAAE,WAAW,YAAY,KAAK,OAAO,IAAI,EAAE,WAAW;AACzE;AAEO,MAAM,uBAAmB,yBAG9B,CAAC,EAAE,QAAQ,SAAS,GAAG,YAAY,GAAG,QAAQ;AAC/C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,SAAS,MAAM;AACpB,kBAAY,OAAO,SAAS,YAAY,CAAC;AACzC,mBAAa,oBAAoB,MAAM,CAAC;AAAA,IACzC;AAEA,WAAO;AAEP,WAAO,GAAG,mBAAmB,MAAM;AACnC,WAAO,GAAG,eAAe,MAAM;AAE/B,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,MAAM;AACpC,aAAO,IAAI,eAAe,MAAM;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,kBAAc;AAAA,IACnB,CAAC,UAA+C;AAC/C,gBAAU,KAAK;AAEf,UAAI,MAAM,iBAAkB;AAE5B,UAAI,CAAC,OAAQ;AAEb,UAAI,OAAO,SAAS,YAAY,GAAG;AAClC,eAAO,MAAM,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,IAAI;AAAA,MAC/C,OAAO;AAGN,eAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,YAAY,EAAE,IAAI;AAAA,MAC9D;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,qBAAmB,WAAW,OAAO;AAAA,MACrC,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,wCAAwC;AAAA;AAAA,MAC/D;AAAA;AAAA,EACD;AAEF,CAAC;AAED,iBAAiB,cAAc;","names":[]}

package/dist/components/blockquote-button/blockquote-button.d.cts

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

package/dist/components/blockquote-button/blockquote-button.d.ts

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

package/dist/components/blockquote-button/blockquote-button.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { TextQuote } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+function canToggleBlockquote(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleWrap("blockquote") || editor.can().clearNodes();
+}
+const BlockquoteButton = forwardRef(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = useState(false);
+  const [canToggle, setCanToggle] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    const update = () => {
+      setIsActive(editor.isActive("blockquote"));
+      setCanToggle(canToggleBlockquote(editor));
+    };
+    update();
+    editor.on("selectionUpdate", update);
+    editor.on("transaction", update);
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("transaction", update);
+    };
+  }, [editor]);
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!editor) return;
+      if (editor.isActive("blockquote")) {
+        editor.chain().focus().lift("blockquote").run();
+      } else {
+        editor.chain().focus().clearNodes().wrapIn("blockquote").run();
+      }
+    },
+    [editor, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      "aria-label": "Blockquote",
+      "aria-pressed": isActive,
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle,
+      size: "icon",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: handleClick,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx(
+        TextQuote,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+BlockquoteButton.displayName = "BlockquoteButton";
+export {
+  BlockquoteButton
+};
+//# sourceMappingURL=blockquote-button.mjs.map

package/dist/components/blockquote-button/blockquote-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blockquote-button/blockquote-button.tsx"],"sourcesContent":["'use client';\n\nimport { TextQuote } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { Button } from '../ui/button';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface BlockquoteButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nfunction canToggleBlockquote(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn editor.can().toggleWrap('blockquote') || editor.can().clearNodes();\n}\n\nexport const BlockquoteButton = forwardRef<\n\tHTMLButtonElement,\n\tBlockquoteButtonProps\n>(({ editor, onClick, ...buttonProps }, ref) => {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst update = () => {\n\t\t\tsetIsActive(editor.isActive('blockquote'));\n\t\t\tsetCanToggle(canToggleBlockquote(editor));\n\t\t};\n\n\t\tupdate();\n\n\t\teditor.on('selectionUpdate', update);\n\t\teditor.on('transaction', update);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', update);\n\t\t\teditor.off('transaction', update);\n\t\t};\n\t}, [editor]);\n\n\tconst handleClick = useCallback(\n\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\tonClick?.(event);\n\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (!editor) return;\n\n\t\t\tif (editor.isActive('blockquote')) {\n\t\t\t\teditor.chain().focus().lift('blockquote').run();\n\t\t\t} else {\n\t\t\t\t// clearNodes first to convert any block type to paragraph,\n\t\t\t\t// then wrap in blockquote\n\t\t\t\teditor.chain().focus().clearNodes().wrapIn('blockquote').run();\n\t\t\t}\n\t\t},\n\t\t[editor, onClick]\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\taria-label=\"Blockquote\"\n\t\t\taria-pressed={isActive}\n\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\tdisabled={!canToggle}\n\t\t\tsize=\"icon\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={handleClick}\n\t\t\t{...buttonProps}\n\t\t>\n\t\t\t<TextQuote\n\t\t\t\tclassName={isActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined}\n\t\t\t/>\n\t\t</Button>\n\t);\n});\n\nBlockquoteButton.displayName = 'BlockquoteButton';\n"],"mappings":";AAiFG;AA/EH,SAAS,iBAAiB;AAC1B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AAE7D,SAAS,cAAc;AAWvB,SAAS,oBAAoB,QAAgC;AAC5D,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SAAO,OAAO,IAAI,EAAE,WAAW,YAAY,KAAK,OAAO,IAAI,EAAE,WAAW;AACzE;AAEO,MAAM,mBAAmB,WAG9B,CAAC,EAAE,QAAQ,SAAS,GAAG,YAAY,GAAG,QAAQ;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,SAAS,MAAM;AACpB,kBAAY,OAAO,SAAS,YAAY,CAAC;AACzC,mBAAa,oBAAoB,MAAM,CAAC;AAAA,IACzC;AAEA,WAAO;AAEP,WAAO,GAAG,mBAAmB,MAAM;AACnC,WAAO,GAAG,eAAe,MAAM;AAE/B,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,MAAM;AACpC,aAAO,IAAI,eAAe,MAAM;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc;AAAA,IACnB,CAAC,UAA+C;AAC/C,gBAAU,KAAK;AAEf,UAAI,MAAM,iBAAkB;AAE5B,UAAI,CAAC,OAAQ;AAEb,UAAI,OAAO,SAAS,YAAY,GAAG;AAClC,eAAO,MAAM,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,IAAI;AAAA,MAC/C,OAAO;AAGN,eAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,YAAY,EAAE,IAAI;AAAA,MAC9D;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,qBAAmB,WAAW,OAAO;AAAA,MACrC,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,wCAAwC;AAAA;AAAA,MAC/D;AAAA;AAAA,EACD;AAEF,CAAC;AAED,iBAAiB,cAAc;","names":[]}

package/dist/components/code-block-button/code-block-button.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 code_block_button_exports = {};
+__export(code_block_button_exports, {
+  CodeBlockButton: () => CodeBlockButton
+});
+module.exports = __toCommonJS(code_block_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_button = require("../ui/button");
+function canToggleCodeBlock(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleNode("codeBlock", "paragraph") || editor.can().clearNodes();
+}
+const CodeBlockButton = (0, import_react.forwardRef)(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const update = () => {
+      setIsActive(editor.isActive("codeBlock"));
+      setCanToggle(canToggleCodeBlock(editor));
+    };
+    update();
+    editor.on("selectionUpdate", update);
+    editor.on("transaction", update);
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("transaction", update);
+    };
+  }, [editor]);
+  const handleClick = (0, import_react.useCallback)(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!editor) return;
+      if (editor.isActive("codeBlock")) {
+        editor.chain().focus().setNode("paragraph").run();
+      } else {
+        editor.chain().focus().clearNodes().toggleNode("codeBlock", "paragraph").run();
+      }
+    },
+    [editor, onClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.Button,
+    {
+      ref,
+      "aria-label": "Code Block",
+      "aria-pressed": isActive,
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle,
+      size: "icon",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: handleClick,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_lucide_react.SquareCode,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+CodeBlockButton.displayName = "CodeBlockButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeBlockButton
+});
+//# sourceMappingURL=code-block-button.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-button/code-block-button.tsx"],"sourcesContent":["'use client';\n\nimport { SquareCode } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { Button } from '../ui/button';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface CodeBlockButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nfunction canToggleCodeBlock(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleNode('codeBlock', 'paragraph') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport const CodeBlockButton = forwardRef<\n\tHTMLButtonElement,\n\tCodeBlockButtonProps\n>(({ editor, onClick, ...buttonProps }, ref) => {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst update = () => {\n\t\t\tsetIsActive(editor.isActive('codeBlock'));\n\t\t\tsetCanToggle(canToggleCodeBlock(editor));\n\t\t};\n\n\t\tupdate();\n\n\t\teditor.on('selectionUpdate', update);\n\t\teditor.on('transaction', update);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', update);\n\t\t\teditor.off('transaction', update);\n\t\t};\n\t}, [editor]);\n\n\tconst handleClick = useCallback(\n\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\tonClick?.(event);\n\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (!editor) return;\n\n\t\t\tif (editor.isActive('codeBlock')) {\n\t\t\t\teditor.chain().focus().setNode('paragraph').run();\n\t\t\t} else {\n\t\t\t\t// clearNodes first to convert any block type to paragraph,\n\t\t\t\t// then toggle to codeBlock\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.clearNodes()\n\t\t\t\t\t.toggleNode('codeBlock', 'paragraph')\n\t\t\t\t\t.run();\n\t\t\t}\n\t\t},\n\t\t[editor, onClick]\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\taria-label=\"Code Block\"\n\t\t\taria-pressed={isActive}\n\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\tdisabled={!canToggle}\n\t\t\tsize=\"icon\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={handleClick}\n\t\t\t{...buttonProps}\n\t\t>\n\t\t\t<SquareCode\n\t\t\t\tclassName={isActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined}\n\t\t\t/>\n\t\t</Button>\n\t);\n});\n\nCodeBlockButton.displayName = 'CodeBlockButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyFG;AAvFH,0BAA2B;AAC3B,mBAA6D;AAE7D,oBAAuB;AAWvB,SAAS,mBAAmB,QAAgC;AAC3D,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,aAAa,WAAW,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,MAAM,sBAAkB,yBAG7B,CAAC,EAAE,QAAQ,SAAS,GAAG,YAAY,GAAG,QAAQ;AAC/C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,SAAS,MAAM;AACpB,kBAAY,OAAO,SAAS,WAAW,CAAC;AACxC,mBAAa,mBAAmB,MAAM,CAAC;AAAA,IACxC;AAEA,WAAO;AAEP,WAAO,GAAG,mBAAmB,MAAM;AACnC,WAAO,GAAG,eAAe,MAAM;AAE/B,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,MAAM;AACpC,aAAO,IAAI,eAAe,MAAM;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,kBAAc;AAAA,IACnB,CAAC,UAA+C;AAC/C,gBAAU,KAAK;AAEf,UAAI,MAAM,iBAAkB;AAE5B,UAAI,CAAC,OAAQ;AAEb,UAAI,OAAO,SAAS,WAAW,GAAG;AACjC,eAAO,MAAM,EAAE,MAAM,EAAE,QAAQ,WAAW,EAAE,IAAI;AAAA,MACjD,OAAO;AAGN,eACE,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,aAAa,WAAW,EACnC,IAAI;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,qBAAmB,WAAW,OAAO;AAAA,MACrC,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,wCAAwC;AAAA;AAAA,MAC/D;AAAA;AAAA,EACD;AAEF,CAAC;AAED,gBAAgB,cAAc;","names":[]}

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

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

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

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

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

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { SquareCode } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+function canToggleCodeBlock(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleNode("codeBlock", "paragraph") || editor.can().clearNodes();
+}
+const CodeBlockButton = forwardRef(({ editor, onClick, ...buttonProps }, ref) => {
+  const [isActive, setIsActive] = useState(false);
+  const [canToggle, setCanToggle] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    const update = () => {
+      setIsActive(editor.isActive("codeBlock"));
+      setCanToggle(canToggleCodeBlock(editor));
+    };
+    update();
+    editor.on("selectionUpdate", update);
+    editor.on("transaction", update);
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("transaction", update);
+    };
+  }, [editor]);
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!editor) return;
+      if (editor.isActive("codeBlock")) {
+        editor.chain().focus().setNode("paragraph").run();
+      } else {
+        editor.chain().focus().clearNodes().toggleNode("codeBlock", "paragraph").run();
+      }
+    },
+    [editor, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      "aria-label": "Code Block",
+      "aria-pressed": isActive,
+      "data-active-state": isActive ? "on" : "off",
+      disabled: !canToggle,
+      size: "icon",
+      tabIndex: -1,
+      type: "button",
+      variant: "ghost",
+      onClick: handleClick,
+      ...buttonProps,
+      children: /* @__PURE__ */ jsx(
+        SquareCode,
+        {
+          className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+        }
+      )
+    }
+  );
+});
+CodeBlockButton.displayName = "CodeBlockButton";
+export {
+  CodeBlockButton
+};
+//# sourceMappingURL=code-block-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/code-block-button/code-block-button.tsx"],"sourcesContent":["'use client';\n\nimport { SquareCode } from 'lucide-react';\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { Button } from '../ui/button';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface CodeBlockButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n}\n\nfunction canToggleCodeBlock(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleNode('codeBlock', 'paragraph') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport const CodeBlockButton = forwardRef<\n\tHTMLButtonElement,\n\tCodeBlockButtonProps\n>(({ editor, onClick, ...buttonProps }, ref) => {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst update = () => {\n\t\t\tsetIsActive(editor.isActive('codeBlock'));\n\t\t\tsetCanToggle(canToggleCodeBlock(editor));\n\t\t};\n\n\t\tupdate();\n\n\t\teditor.on('selectionUpdate', update);\n\t\teditor.on('transaction', update);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', update);\n\t\t\teditor.off('transaction', update);\n\t\t};\n\t}, [editor]);\n\n\tconst handleClick = useCallback(\n\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\tonClick?.(event);\n\n\t\t\tif (event.defaultPrevented) return;\n\n\t\t\tif (!editor) return;\n\n\t\t\tif (editor.isActive('codeBlock')) {\n\t\t\t\teditor.chain().focus().setNode('paragraph').run();\n\t\t\t} else {\n\t\t\t\t// clearNodes first to convert any block type to paragraph,\n\t\t\t\t// then toggle to codeBlock\n\t\t\t\teditor\n\t\t\t\t\t.chain()\n\t\t\t\t\t.focus()\n\t\t\t\t\t.clearNodes()\n\t\t\t\t\t.toggleNode('codeBlock', 'paragraph')\n\t\t\t\t\t.run();\n\t\t\t}\n\t\t},\n\t\t[editor, onClick]\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tref={ref}\n\t\t\taria-label=\"Code Block\"\n\t\t\taria-pressed={isActive}\n\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\tdisabled={!canToggle}\n\t\t\tsize=\"icon\"\n\t\t\ttabIndex={-1}\n\t\t\ttype=\"button\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={handleClick}\n\t\t\t{...buttonProps}\n\t\t>\n\t\t\t<SquareCode\n\t\t\t\tclassName={isActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined}\n\t\t\t/>\n\t\t</Button>\n\t);\n});\n\nCodeBlockButton.displayName = 'CodeBlockButton';\n"],"mappings":";AAyFG;AAvFH,SAAS,kBAAkB;AAC3B,SAAS,YAAY,aAAa,WAAW,gBAAgB;AAE7D,SAAS,cAAc;AAWvB,SAAS,mBAAmB,QAAgC;AAC3D,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,aAAa,WAAW,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,MAAM,kBAAkB,WAG7B,CAAC,EAAE,QAAQ,SAAS,GAAG,YAAY,GAAG,QAAQ;AAC/C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,SAAS,MAAM;AACpB,kBAAY,OAAO,SAAS,WAAW,CAAC;AACxC,mBAAa,mBAAmB,MAAM,CAAC;AAAA,IACxC;AAEA,WAAO;AAEP,WAAO,GAAG,mBAAmB,MAAM;AACnC,WAAO,GAAG,eAAe,MAAM;AAE/B,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,MAAM;AACpC,aAAO,IAAI,eAAe,MAAM;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc;AAAA,IACnB,CAAC,UAA+C;AAC/C,gBAAU,KAAK;AAEf,UAAI,MAAM,iBAAkB;AAE5B,UAAI,CAAC,OAAQ;AAEb,UAAI,OAAO,SAAS,WAAW,GAAG;AACjC,eAAO,MAAM,EAAE,MAAM,EAAE,QAAQ,WAAW,EAAE,IAAI;AAAA,MACjD,OAAO;AAGN,eACE,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,aAAa,WAAW,EACnC,IAAI;AAAA,MACP;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,cAAW;AAAA,MACX,gBAAc;AAAA,MACd,qBAAmB,WAAW,OAAO;AAAA,MACrC,UAAU,CAAC;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,wCAAwC;AAAA;AAAA,MAC/D;AAAA;AAAA,EACD;AAEF,CAAC;AAED,gBAAgB,cAAc;","names":[]}

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

@@ -0,0 +1,39 @@
+"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 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" }) }) });
+// 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.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/code-block-view.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tNodeViewContent,\n\tNodeViewWrapper,\n\ttype NodeViewProps\n} from '@tiptap/react';\n\nimport { CopyButton } from './copy-button';\n\nimport type { ReactNode } from 'react';\n\ninterface CodeBlockShellProps {\n\tvalue: string;\n\tchildren: ReactNode;\n}\n\n// Visual structure shared by editor (NodeView) and reader (nodeMapping).\n// Children is the <code> element (or <NodeViewContent as=\"code\"/>); the\n// shell does not wrap it because each consumer mounts <code> differently.\nexport const CodeBlockShell = ({ value, children }: 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-end nt:px-2\">\n\t\t\t<CopyButton value={value} />\n\t\t</div>\n\t\t<pre className=\"nt:!pt-9\">{children}</pre>\n\t</div>\n);\n\n// Editor-side React NodeView. Tiptap mounts content-editable DOM directly\n// onto the <code> rendered by NodeViewContent.\nexport const CodeBlockView = ({ node }: NodeViewProps) => (\n\t<NodeViewWrapper>\n\t\t<CodeBlockShell value={node.textContent}>\n\t\t\t<NodeViewContent<'code'> as=\"code\" />\n\t\t</CodeBlockShell>\n\t</NodeViewWrapper>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBC;AAnBD,mBAIO;AAEP,yBAA2B;AAYpB,MAAM,iBAAiB,CAAC,EAAE,OAAO,SAAS,MAChD,6CAAC,SAAI,WAAU,eACd;AAAA,8CAAC,SAAI,WAAU,2FACd,sDAAC,iCAAW,OAAc,GAC3B;AAAA,EACA,4CAAC,SAAI,WAAU,YAAY,UAAS;AAAA,GACrC;AAKM,MAAM,gBAAgB,CAAC,EAAE,KAAK,MACpC,4CAAC,gCACA,sDAAC,kBAAe,OAAO,KAAK,aAC3B,sDAAC,gCAAwB,IAAG,QAAO,GACpC,GACD;","names":[]}

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

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

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

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

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  NodeViewContent,
+  NodeViewWrapper
+} from "@tiptap/react";
+import { CopyButton } from "./copy-button";
+const CodeBlockShell = ({ value, children }) => /* @__PURE__ */ jsxs("div", { className: "nt:relative", children: [
+  /* @__PURE__ */ 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__ */ jsx(CopyButton, { value }) }),
+  /* @__PURE__ */ jsx("pre", { className: "nt:!pt-9", children })
+] });
+const CodeBlockView = ({ node }) => /* @__PURE__ */ jsx(NodeViewWrapper, { children: /* @__PURE__ */ jsx(CodeBlockShell, { value: node.textContent, children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) }) });
+export {
+  CodeBlockShell,
+  CodeBlockView
+};
+//# sourceMappingURL=code-block-view.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/code-block-view.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tNodeViewContent,\n\tNodeViewWrapper,\n\ttype NodeViewProps\n} from '@tiptap/react';\n\nimport { CopyButton } from './copy-button';\n\nimport type { ReactNode } from 'react';\n\ninterface CodeBlockShellProps {\n\tvalue: string;\n\tchildren: ReactNode;\n}\n\n// Visual structure shared by editor (NodeView) and reader (nodeMapping).\n// Children is the <code> element (or <NodeViewContent as=\"code\"/>); the\n// shell does not wrap it because each consumer mounts <code> differently.\nexport const CodeBlockShell = ({ value, children }: 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-end nt:px-2\">\n\t\t\t<CopyButton value={value} />\n\t\t</div>\n\t\t<pre className=\"nt:!pt-9\">{children}</pre>\n\t</div>\n);\n\n// Editor-side React NodeView. Tiptap mounts content-editable DOM directly\n// onto the <code> rendered by NodeViewContent.\nexport const CodeBlockView = ({ node }: NodeViewProps) => (\n\t<NodeViewWrapper>\n\t\t<CodeBlockShell value={node.textContent}>\n\t\t\t<NodeViewContent<'code'> as=\"code\" />\n\t\t</CodeBlockShell>\n\t</NodeViewWrapper>\n);\n"],"mappings":";AAqBC,SAEE,KAFF;AAnBD;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AAEP,SAAS,kBAAkB;AAYpB,MAAM,iBAAiB,CAAC,EAAE,OAAO,SAAS,MAChD,qBAAC,SAAI,WAAU,eACd;AAAA,sBAAC,SAAI,WAAU,2FACd,8BAAC,cAAW,OAAc,GAC3B;AAAA,EACA,oBAAC,SAAI,WAAU,YAAY,UAAS;AAAA,GACrC;AAKM,MAAM,gBAAgB,CAAC,EAAE,KAAK,MACpC,oBAAC,mBACA,8BAAC,kBAAe,OAAO,KAAK,aAC3B,8BAAC,mBAAwB,IAAG,QAAO,GACpC,GACD;","names":[]}

package/dist/components/copy-button.cjs

@@ -0,0 +1,49 @@
+"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 copy_button_exports = {};
+__export(copy_button_exports, {
+  CopyButton: () => CopyButton
+});
+module.exports = __toCommonJS(copy_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_use_copy_to_clipboard = require("../hooks/use-copy-to-clipboard");
+var import_button = require("./ui/button");
+const CopyButton = ({ value, className }) => {
+  const { isCopied, copyToClipboard } = (0, import_use_copy_to_clipboard.useCopyToClipboard)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_button.Button,
+    {
+      className,
+      size: "icon",
+      variant: "ghost",
+      onClick: () => copyToClipboard(value),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "nt:sr-only", children: "Copy" }),
+        isCopied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, {})
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CopyButton
+});
+//# sourceMappingURL=copy-button.cjs.map

package/dist/components/copy-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Copy } from 'lucide-react';\n\nimport { useCopyToClipboard } from '../hooks/use-copy-to-clipboard';\nimport { Button } from './ui/button';\n\ninterface CopyButtonProps {\n\tvalue: string;\n\tclassName?: string;\n}\n\nexport const CopyButton = ({ value, className }: CopyButtonProps) => {\n\tconst { isCopied, copyToClipboard } = useCopyToClipboard();\n\n\treturn (\n\t\t<Button\n\t\t\tclassName={className}\n\t\t\tsize=\"icon\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={() => copyToClipboard(value)}\n\t\t>\n\t\t\t<span className=\"nt:sr-only\">Copy</span>\n\t\t\t{isCopied ? <Check /> : <Copy />}\n\t\t</Button>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBE;AAdF,0BAA4B;AAE5B,mCAAmC;AACnC,oBAAuB;AAOhB,MAAM,aAAa,CAAC,EAAE,OAAO,UAAU,MAAuB;AACpE,QAAM,EAAE,UAAU,gBAAgB,QAAI,iDAAmB;AAEzD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS,MAAM,gBAAgB,KAAK;AAAA,MAEpC;AAAA,oDAAC,UAAK,WAAU,cAAa,kBAAI;AAAA,QAChC,WAAW,4CAAC,6BAAM,IAAK,4CAAC,4BAAK;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}

package/dist/components/copy-button.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CopyButtonProps {
+    value: string;
+    className?: string;
+}
+declare const CopyButton: ({ value, className }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { CopyButton };

package/dist/components/copy-button.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CopyButtonProps {
+    value: string;
+    className?: string;
+}
+declare const CopyButton: ({ value, className }: CopyButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { CopyButton };

package/dist/components/copy-button.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
+import { Button } from "./ui/button";
+const CopyButton = ({ value, className }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className,
+      size: "icon",
+      variant: "ghost",
+      onClick: () => copyToClipboard(value),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "nt:sr-only", children: "Copy" }),
+        isCopied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+      ]
+    }
+  );
+};
+export {
+  CopyButton
+};
+//# sourceMappingURL=copy-button.mjs.map

package/dist/components/copy-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Copy } from 'lucide-react';\n\nimport { useCopyToClipboard } from '../hooks/use-copy-to-clipboard';\nimport { Button } from './ui/button';\n\ninterface CopyButtonProps {\n\tvalue: string;\n\tclassName?: string;\n}\n\nexport const CopyButton = ({ value, className }: CopyButtonProps) => {\n\tconst { isCopied, copyToClipboard } = useCopyToClipboard();\n\n\treturn (\n\t\t<Button\n\t\t\tclassName={className}\n\t\t\tsize=\"icon\"\n\t\t\tvariant=\"ghost\"\n\t\t\tonClick={() => copyToClipboard(value)}\n\t\t>\n\t\t\t<span className=\"nt:sr-only\">Copy</span>\n\t\t\t{isCopied ? <Check /> : <Copy />}\n\t\t</Button>\n\t);\n};\n"],"mappings":";AAgBE,SAMC,KAND;AAdF,SAAS,OAAO,YAAY;AAE5B,SAAS,0BAA0B;AACnC,SAAS,cAAc;AAOhB,MAAM,aAAa,CAAC,EAAE,OAAO,UAAU,MAAuB;AACpE,QAAM,EAAE,UAAU,gBAAgB,IAAI,mBAAmB;AAEzD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAS,MAAM,gBAAgB,KAAK;AAAA,MAEpC;AAAA,4BAAC,UAAK,WAAU,cAAa,kBAAI;AAAA,QAChC,WAAW,oBAAC,SAAM,IAAK,oBAAC,QAAK;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}