notra-editor 0.5.0 → 0.6.0

package/dist/notra-reader.cjs

@@ -23,17 +23,46 @@ __export(notra_reader_exports, {
 module.exports = __toCommonJS(notra_reader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@tiptap/static-renderer/pm/react");
-var import_code_block_view = require("./components/code-block-view");
+var import_code_block_shell = require("./components/code-block-view/code-block-shell");
 var import_extensions = require("./extensions");
+var import_code_block = require("./extensions/code-block");
+var import_highlight_code_to_html = require("./lib/highlight-code-to-html");
+var import_languages = require("./lib/languages");
 var import_markdown_to_json = require("./utils/markdown-to-json");
-function NotraReader({ content, className }) {
+function NotraReader({
+  content,
+  className,
+  lowlight = import_code_block.defaultLowlight
+}) {
   const json = (0, import_markdown_to_json.markdownToJSON)(content);
   const rendered = (0, import_react.renderToReactElement)({
     extensions: import_extensions.sharedExtensions,
     content: json,
     options: {
       nodeMapping: {
-        codeBlock: ({ node, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_code_block_view.CodeBlockShell, { value: node.textContent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children }) })
+        codeBlock: ({ node }) => {
+          const language = node.attrs.language ?? "";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_code_block_shell.CodeBlockShell,
+            {
+              languageSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (0, import_languages.getLanguageLabel)(language) }),
+              value: node.textContent,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "code",
+                {
+                  dangerouslySetInnerHTML: {
+                    __html: (0, import_highlight_code_to_html.highlightCodeToHtml)(
+                      node.textContent,
+                      language,
+                      lowlight
+                    )
+                  },
+                  className: "hljs"
+                }
+              )
+            }
+          );
+        }
       }
     }
   });

package/dist/notra-reader.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/notra-reader.tsx"],"sourcesContent":["import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\n\nimport { CodeBlockShell } from './components/code-block-view';\nimport { sharedExtensions } from './extensions';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraReader({ content, className }: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json,\n\t\toptions: {\n\t\t\tnodeMapping: {\n\t\t\t\tcodeBlock: ({ node, children }) => (\n\t\t\t\t\t<CodeBlockShell value={node.textContent}>\n\t\t\t\t\t\t<code>{children}</code>\n\t\t\t\t\t</CodeBlockShell>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBM;AAvBN,mBAAqC;AAErC,6BAA+B;AAC/B,wBAAiC;AACjC,8BAA+B;AASxB,SAAS,YAAY,EAAE,SAAS,UAAU,GAAqB;AACrE,QAAM,WAAO,wCAAe,OAAO;AAEnC,QAAM,eAAW,mCAAqB;AAAA,IACrC,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,MACR,aAAa;AAAA,QACZ,WAAW,CAAC,EAAE,MAAM,SAAS,MAC5B,4CAAC,yCAAe,OAAO,KAAK,aAC3B,sDAAC,UAAM,UAAS,GACjB;AAAA,MAEF;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,aAAa,CAAC,SAAS,gBAAgB,SAAS,EACpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEV,SAAO,4CAAC,SAAI,WAAW,YAAa,oBAAS;AAC9C;","names":[]}
+{"version":3,"sources":["../src/notra-reader.tsx"],"sourcesContent":["import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\nimport { type createLowlight } from 'lowlight';\n\nimport { CodeBlockShell } from './components/code-block-view/code-block-shell';\nimport { sharedExtensions } from './extensions';\nimport { defaultLowlight } from './extensions/code-block';\nimport { highlightCodeToHtml } from './lib/highlight-code-to-html';\nimport { getLanguageLabel } from './lib/languages';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\ntype Lowlight = ReturnType<typeof createLowlight>;\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n\t/**\n\t * Optional lowlight instance for syntax highlighting. Defaults to the same\n\t * `defaultLowlight` (createLowlight(common)) used by `CodeBlockExtension`.\n\t * Pass a custom instance if you configured the editor with\n\t * `createCodeBlockExtension(myLowlight)` and want the reader to highlight\n\t * the same superset of languages.\n\t */\n\tlowlight?: Lowlight;\n}\n\nexport function NotraReader({\n\tcontent,\n\tclassName,\n\tlowlight = defaultLowlight\n}: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json,\n\t\toptions: {\n\t\t\tnodeMapping: {\n\t\t\t\tcodeBlock: ({ node }) => {\n\t\t\t\t\tconst language = (node.attrs.language as string) ?? '';\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CodeBlockShell\n\t\t\t\t\t\t\tlanguageSlot={<span>{getLanguageLabel(language)}</span>}\n\t\t\t\t\t\t\tvalue={node.textContent}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<code\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: highlightCodeToHtml(\n\t\t\t\t\t\t\t\t\t\tnode.textContent,\n\t\t\t\t\t\t\t\t\t\tlanguage,\n\t\t\t\t\t\t\t\t\t\tlowlight\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\tclassName=\"hljs\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CodeBlockShell>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CqB;AA5CrB,mBAAqC;AAGrC,8BAA+B;AAC/B,wBAAiC;AACjC,wBAAgC;AAChC,oCAAoC;AACpC,uBAAiC;AACjC,8BAA+B;AAmBxB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,WAAW;AACZ,GAAqB;AACpB,QAAM,WAAO,wCAAe,OAAO;AAEnC,QAAM,eAAW,mCAAqB;AAAA,IACrC,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,MACR,aAAa;AAAA,QACZ,WAAW,CAAC,EAAE,KAAK,MAAM;AACxB,gBAAM,WAAY,KAAK,MAAM,YAAuB;AAEpD,iBACC;AAAA,YAAC;AAAA;AAAA,cACA,cAAc,4CAAC,UAAM,iDAAiB,QAAQ,GAAE;AAAA,cAChD,OAAO,KAAK;AAAA,cAEZ;AAAA,gBAAC;AAAA;AAAA,kBACA,yBAAyB;AAAA,oBACxB,YAAQ;AAAA,sBACP,KAAK;AAAA,sBACL;AAAA,sBACA;AAAA,oBACD;AAAA,kBACD;AAAA,kBACA,WAAU;AAAA;AAAA,cACX;AAAA;AAAA,UACD;AAAA,QAEF;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,aAAa,CAAC,SAAS,gBAAgB,SAAS,EACpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEV,SAAO,4CAAC,SAAI,WAAW,YAAa,oBAAS;AAC9C;","names":[]}

package/dist/notra-reader.d.cts

@@ -1,11 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { createLowlight } from 'lowlight';
 
+type Lowlight = ReturnType<typeof createLowlight>;
 interface NotraReaderProps {
     /** Markdown content to render */
     content: string;
     /** Additional CSS class on the wrapper element */
     className?: string;
+    /**
+     * Optional lowlight instance for syntax highlighting. Defaults to the same
+     * `defaultLowlight` (createLowlight(common)) used by `CodeBlockExtension`.
+     * Pass a custom instance if you configured the editor with
+     * `createCodeBlockExtension(myLowlight)` and want the reader to highlight
+     * the same superset of languages.
+     */
+    lowlight?: Lowlight;
 }
-declare function NotraReader({ content, className }: NotraReaderProps): react_jsx_runtime.JSX.Element;
+declare function NotraReader({ content, className, lowlight }: NotraReaderProps): react_jsx_runtime.JSX.Element;
 
 export { NotraReader, type NotraReaderProps };

package/dist/notra-reader.d.ts

@@ -1,11 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { createLowlight } from 'lowlight';
 
+type Lowlight = ReturnType<typeof createLowlight>;
 interface NotraReaderProps {
     /** Markdown content to render */
     content: string;
     /** Additional CSS class on the wrapper element */
     className?: string;
+    /**
+     * Optional lowlight instance for syntax highlighting. Defaults to the same
+     * `defaultLowlight` (createLowlight(common)) used by `CodeBlockExtension`.
+     * Pass a custom instance if you configured the editor with
+     * `createCodeBlockExtension(myLowlight)` and want the reader to highlight
+     * the same superset of languages.
+     */
+    lowlight?: Lowlight;
 }
-declare function NotraReader({ content, className }: NotraReaderProps): react_jsx_runtime.JSX.Element;
+declare function NotraReader({ content, className, lowlight }: NotraReaderProps): react_jsx_runtime.JSX.Element;
 
 export { NotraReader, type NotraReaderProps };

package/dist/notra-reader.mjs

@@ -1,16 +1,45 @@
 import { jsx } from "react/jsx-runtime";
 import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
-import { CodeBlockShell } from "./components/code-block-view";
+import { CodeBlockShell } from "./components/code-block-view/code-block-shell";
 import { sharedExtensions } from "./extensions";
+import { defaultLowlight } from "./extensions/code-block";
+import { highlightCodeToHtml } from "./lib/highlight-code-to-html";
+import { getLanguageLabel } from "./lib/languages";
 import { markdownToJSON } from "./utils/markdown-to-json";
-function NotraReader({ content, className }) {
+function NotraReader({
+  content,
+  className,
+  lowlight = defaultLowlight
+}) {
   const json = markdownToJSON(content);
   const rendered = renderToReactElement({
     extensions: sharedExtensions,
     content: json,
     options: {
       nodeMapping: {
-        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(CodeBlockShell, { value: node.textContent, children: /* @__PURE__ */ jsx("code", { children }) })
+        codeBlock: ({ node }) => {
+          const language = node.attrs.language ?? "";
+          return /* @__PURE__ */ jsx(
+            CodeBlockShell,
+            {
+              languageSlot: /* @__PURE__ */ jsx("span", { children: getLanguageLabel(language) }),
+              value: node.textContent,
+              children: /* @__PURE__ */ jsx(
+                "code",
+                {
+                  dangerouslySetInnerHTML: {
+                    __html: highlightCodeToHtml(
+                      node.textContent,
+                      language,
+                      lowlight
+                    )
+                  },
+                  className: "hljs"
+                }
+              )
+            }
+          );
+        }
       }
     }
   });

package/dist/notra-reader.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/notra-reader.tsx"],"sourcesContent":["import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\n\nimport { CodeBlockShell } from './components/code-block-view';\nimport { sharedExtensions } from './extensions';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraReader({ content, className }: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json,\n\t\toptions: {\n\t\t\tnodeMapping: {\n\t\t\t\tcodeBlock: ({ node, children }) => (\n\t\t\t\t\t<CodeBlockShell value={node.textContent}>\n\t\t\t\t\t\t<code>{children}</code>\n\t\t\t\t\t</CodeBlockShell>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n"],"mappings":"AAuBM;AAvBN,SAAS,4BAA4B;AAErC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AASxB,SAAS,YAAY,EAAE,SAAS,UAAU,GAAqB;AACrE,QAAM,OAAO,eAAe,OAAO;AAEnC,QAAM,WAAW,qBAAqB;AAAA,IACrC,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,MACR,aAAa;AAAA,QACZ,WAAW,CAAC,EAAE,MAAM,SAAS,MAC5B,oBAAC,kBAAe,OAAO,KAAK,aAC3B,8BAAC,UAAM,UAAS,GACjB;AAAA,MAEF;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,aAAa,CAAC,SAAS,gBAAgB,SAAS,EACpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEV,SAAO,oBAAC,SAAI,WAAW,YAAa,oBAAS;AAC9C;","names":[]}
+{"version":3,"sources":["../src/notra-reader.tsx"],"sourcesContent":["import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\nimport { type createLowlight } from 'lowlight';\n\nimport { CodeBlockShell } from './components/code-block-view/code-block-shell';\nimport { sharedExtensions } from './extensions';\nimport { defaultLowlight } from './extensions/code-block';\nimport { highlightCodeToHtml } from './lib/highlight-code-to-html';\nimport { getLanguageLabel } from './lib/languages';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\ntype Lowlight = ReturnType<typeof createLowlight>;\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n\t/**\n\t * Optional lowlight instance for syntax highlighting. Defaults to the same\n\t * `defaultLowlight` (createLowlight(common)) used by `CodeBlockExtension`.\n\t * Pass a custom instance if you configured the editor with\n\t * `createCodeBlockExtension(myLowlight)` and want the reader to highlight\n\t * the same superset of languages.\n\t */\n\tlowlight?: Lowlight;\n}\n\nexport function NotraReader({\n\tcontent,\n\tclassName,\n\tlowlight = defaultLowlight\n}: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json,\n\t\toptions: {\n\t\t\tnodeMapping: {\n\t\t\t\tcodeBlock: ({ node }) => {\n\t\t\t\t\tconst language = (node.attrs.language as string) ?? '';\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CodeBlockShell\n\t\t\t\t\t\t\tlanguageSlot={<span>{getLanguageLabel(language)}</span>}\n\t\t\t\t\t\t\tvalue={node.textContent}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<code\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: highlightCodeToHtml(\n\t\t\t\t\t\t\t\t\t\tnode.textContent,\n\t\t\t\t\t\t\t\t\t\tlanguage,\n\t\t\t\t\t\t\t\t\t\tlowlight\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\tclassName=\"hljs\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CodeBlockShell>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n"],"mappings":"AA4CqB;AA5CrB,SAAS,4BAA4B;AAGrC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAmBxB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,WAAW;AACZ,GAAqB;AACpB,QAAM,OAAO,eAAe,OAAO;AAEnC,QAAM,WAAW,qBAAqB;AAAA,IACrC,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,MACR,aAAa;AAAA,QACZ,WAAW,CAAC,EAAE,KAAK,MAAM;AACxB,gBAAM,WAAY,KAAK,MAAM,YAAuB;AAEpD,iBACC;AAAA,YAAC;AAAA;AAAA,cACA,cAAc,oBAAC,UAAM,2BAAiB,QAAQ,GAAE;AAAA,cAChD,OAAO,KAAK;AAAA,cAEZ;AAAA,gBAAC;AAAA;AAAA,kBACA,yBAAyB;AAAA,oBACxB,QAAQ;AAAA,sBACP,KAAK;AAAA,sBACL;AAAA,sBACA;AAAA,oBACD;AAAA,kBACD;AAAA,kBACA,WAAU;AAAA;AAAA,cACX;AAAA;AAAA,UACD;AAAA,QAEF;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,aAAa,CAAC,SAAS,gBAAgB,SAAS,EACpD,OAAO,OAAO,EACd,KAAK,GAAG;AAEV,SAAO,oBAAC,SAAI,WAAW,YAAa,oBAAS;AAC9C;","names":[]}

package/dist/styles/globals.css

@@ -223,6 +223,10 @@
     width: calc(var(--nt-spacing) * 3);
     height: calc(var(--nt-spacing) * 3);
   }
+  .nt\:size-4 {
+    width: calc(var(--nt-spacing) * 4);
+    height: calc(var(--nt-spacing) * 4);
+  }
   .nt\:size-6 {
     width: calc(var(--nt-spacing) * 6);
     height: calc(var(--nt-spacing) * 6);
@@ -254,18 +258,27 @@
   .nt\:h-9 {
     height: calc(var(--nt-spacing) * 9);
   }
+  .nt\:h-full {
+    height: 100%;
+  }
   .nt\:h-px {
     height: 1px;
   }
   .nt\:max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
+  .nt\:max-h-\[300px\] {
+    max-height: 300px;
+  }
   .nt\:w-\(--radix-dropdown-menu-trigger-width\) {
     width: var(--radix-dropdown-menu-trigger-width);
   }
   .nt\:w-72 {
     width: calc(var(--nt-spacing) * 72);
   }
+  .nt\:w-\[200px\] {
+    width: 200px;
+  }
   .nt\:w-auto {
     width: auto;
   }
@@ -284,6 +297,9 @@
   .nt\:min-w-\[96px\] {
     min-width: 96px;
   }
+  .nt\:flex-1 {
+    flex: 1;
+  }
   .nt\:shrink-0 {
     flex-shrink: 0;
   }
@@ -296,12 +312,18 @@
   .nt\:cursor-default {
     cursor: default;
   }
+  .nt\:scroll-py-1 {
+    scroll-padding-block: calc(var(--nt-spacing) * 1);
+  }
   .nt\:flex-col {
     flex-direction: column;
   }
   .nt\:items-center {
     align-items: center;
   }
+  .nt\:justify-between {
+    justify-content: space-between;
+  }
   .nt\:justify-center {
     justify-content: center;
   }
@@ -314,6 +336,9 @@
   .nt\:gap-1\.5 {
     gap: calc(var(--nt-spacing) * 1.5);
   }
+  .nt\:gap-2 {
+    gap: calc(var(--nt-spacing) * 2);
+  }
   .nt\:overflow-hidden {
     overflow: hidden;
   }
@@ -339,6 +364,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .nt\:border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .nt\:border-none {
     --tw-border-style: none;
     border-style: none;
@@ -346,6 +375,12 @@
   .nt\:border-border {
     border-color: var(--border);
   }
+  .nt\:border-foreground\/10 {
+    border-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+    }
+  }
   .nt\:border-input {
     border-color: var(--input);
   }
@@ -379,6 +414,9 @@
   .nt\:bg-clip-padding {
     background-clip: padding-box;
   }
+  .nt\:p-0 {
+    padding: calc(var(--nt-spacing) * 0);
+  }
   .nt\:p-1 {
     padding: calc(var(--nt-spacing) * 1);
   }
@@ -400,6 +438,15 @@
   .nt\:py-1 {
     padding-block: calc(var(--nt-spacing) * 1);
   }
+  .nt\:py-1\.5 {
+    padding-block: calc(var(--nt-spacing) * 1.5);
+  }
+  .nt\:py-3 {
+    padding-block: calc(var(--nt-spacing) * 3);
+  }
+  .nt\:py-6 {
+    padding-block: calc(var(--nt-spacing) * 6);
+  }
   .nt\:\!pt-9 {
     padding-top: calc(var(--nt-spacing) * 9) !important;
   }
@@ -409,6 +456,9 @@
   .nt\:pl-1\.5 {
     padding-left: calc(var(--nt-spacing) * 1.5);
   }
+  .nt\:text-center {
+    text-align: center;
+  }
   .nt\:text-base {
     font-size: var(--nt-text-base);
     line-height: var(--tw-leading, var(--nt-text-base--line-height));
@@ -441,6 +491,9 @@
   .nt\:text-destructive {
     color: var(--destructive);
   }
+  .nt\:text-foreground {
+    color: var(--foreground);
+  }
   .nt\:text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -459,6 +512,15 @@
   .nt\:underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .nt\:opacity-0 {
+    opacity: 0%;
+  }
+  .nt\:opacity-50 {
+    opacity: 50%;
+  }
+  .nt\:opacity-100 {
+    opacity: 100%;
+  }
   .nt\:shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -816,6 +878,16 @@
       color: var(--tt-brand-color-500);
     }
   }
+  .nt\:data-\[disabled\=true\]\:pointer-events-none {
+    &[data-disabled="true"] {
+      pointer-events: none;
+    }
+  }
+  .nt\:data-\[disabled\=true\]\:opacity-50 {
+    &[data-disabled="true"] {
+      opacity: 50%;
+    }
+  }
   .nt\:data-\[orientation\=horizontal\]\:h-px {
     &[data-orientation="horizontal"] {
       height: 1px;
@@ -836,6 +908,16 @@
       width: 1px;
     }
   }
+  .nt\:data-\[selected\=true\]\:bg-accent {
+    &[data-selected="true"] {
+      background-color: var(--accent);
+    }
+  }
+  .nt\:data-\[selected\=true\]\:text-accent-foreground {
+    &[data-selected="true"] {
+      color: var(--accent-foreground);
+    }
+  }
   .nt\:data-\[state\=closed\]\:overflow-hidden {
     &[data-state="closed"] {
       overflow: hidden;
@@ -968,6 +1050,33 @@
       }
     }
   }
+  .nt\:\[\&_\[cmdk-group-heading\]\]\:px-2 {
+    & [cmdk-group-heading] {
+      padding-inline: calc(var(--nt-spacing) * 2);
+    }
+  }
+  .nt\:\[\&_\[cmdk-group-heading\]\]\:py-1\.5 {
+    & [cmdk-group-heading] {
+      padding-block: calc(var(--nt-spacing) * 1.5);
+    }
+  }
+  .nt\:\[\&_\[cmdk-group-heading\]\]\:text-xs {
+    & [cmdk-group-heading] {
+      font-size: var(--nt-text-xs);
+      line-height: var(--tw-leading, var(--nt-text-xs--line-height));
+    }
+  }
+  .nt\:\[\&_\[cmdk-group-heading\]\]\:font-medium {
+    & [cmdk-group-heading] {
+      --tw-font-weight: var(--nt-font-weight-medium);
+      font-weight: var(--nt-font-weight-medium);
+    }
+  }
+  .nt\:\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
+    & [cmdk-group-heading] {
+      color: var(--muted-foreground);
+    }
+  }
   .nt\:\[\&_svg\]\:pointer-events-none {
     & svg {
       pointer-events: none;

package/dist/themes/default/shared.css

@@ -341,14 +341,13 @@
    ===================== */
 .notra .tiptap pre,
 .notra-reader pre {
-	background-color: var(--notra-codeblock-bg);
-	color: var(--notra-codeblock-text);
 	border: 1px solid var(--notra-codeblock-border);
 	margin-top: 1.5em;
 	margin-bottom: 1.5em;
-	padding: 1em;
 	font-size: 1rem;
 	border-radius: var(--notra-radius);
+	overflow: hidden;
+	font-family: var(--notra-font-mono);
 }
 
 .notra .tiptap pre code,
@@ -356,8 +355,136 @@
 	background-color: transparent;
 	border: none;
 	border-radius: 0;
-	color: inherit;
-	padding: 0;
+	padding: 1em;
+	display: block;
+	overflow-x: auto;
+	font-size: 0.875em;
+	line-height: 1.5;
+}
+
+/* =====================
+   Code — Highlight (Atom One Light, default)
+   ===================== */
+.notra .hljs {
+	color: #383a42;
+	background: #fafafa;
+}
+.notra .hljs-comment,
+.notra .hljs-quote {
+	color: #a0a1a7;
+	font-style: italic;
+}
+.notra .hljs-doctag,
+.notra .hljs-formula,
+.notra .hljs-keyword {
+	color: #a626a4;
+}
+.notra .hljs-deletion,
+.notra .hljs-name,
+.notra .hljs-section,
+.notra .hljs-selector-tag,
+.notra .hljs-subst {
+	color: #e45649;
+}
+.notra .hljs-literal {
+	color: #0184bb;
+}
+.notra .hljs-addition,
+.notra .hljs-attribute,
+.notra .hljs-meta .hljs-string,
+.notra .hljs-regexp,
+.notra .hljs-string {
+	color: #50a14f;
+}
+.notra .hljs-built_in,
+.notra .hljs-class .hljs-title,
+.notra .hljs-title.class_ {
+	color: #c18401;
+}
+.notra .hljs-attr,
+.notra .hljs-number,
+.notra .hljs-selector-attr,
+.notra .hljs-selector-class,
+.notra .hljs-selector-pseudo,
+.notra .hljs-template-variable,
+.notra .hljs-type,
+.notra .hljs-variable {
+	color: #986801;
+}
+.notra .hljs-bullet,
+.notra .hljs-link,
+.notra .hljs-meta,
+.notra .hljs-selector-id,
+.notra .hljs-symbol,
+.notra .hljs-title {
+	color: #4078f2;
+}
+.notra .hljs-emphasis {
+	font-style: italic;
+}
+.notra .hljs-strong {
+	font-weight: bold;
+}
+.notra .hljs-link {
+	text-decoration: underline;
+}
+
+/* =====================
+   Code — Highlight (Atom One Dark, .dark override)
+   ===================== */
+.dark .notra .hljs {
+	color: #abb2bf;
+	background: #282c34;
+}
+.dark .notra .hljs-comment,
+.dark .notra .hljs-quote {
+	color: #5c6370;
+	font-style: italic;
+}
+.dark .notra .hljs-doctag,
+.dark .notra .hljs-formula,
+.dark .notra .hljs-keyword {
+	color: #c678dd;
+}
+.dark .notra .hljs-deletion,
+.dark .notra .hljs-name,
+.dark .notra .hljs-section,
+.dark .notra .hljs-selector-tag,
+.dark .notra .hljs-subst {
+	color: #e06c75;
+}
+.dark .notra .hljs-literal {
+	color: #56b6c2;
+}
+.dark .notra .hljs-addition,
+.dark .notra .hljs-attribute,
+.dark .notra .hljs-meta .hljs-string,
+.dark .notra .hljs-regexp,
+.dark .notra .hljs-string {
+	color: #98c379;
+}
+.dark .notra .hljs-built_in,
+.dark .notra .hljs-class .hljs-title,
+.dark .notra .hljs-title.class_ {
+	color: #e6c07b;
+}
+.dark .notra .hljs-attr,
+.dark .notra .hljs-number,
+.dark .notra .hljs-selector-attr,
+.dark .notra .hljs-selector-class,
+.dark .notra .hljs-selector-pseudo,
+.dark .notra .hljs-template-variable,
+.dark .notra .hljs-type,
+.dark .notra .hljs-variable {
+	color: #d19a66;
+}
+.dark .notra .hljs-bullet,
+.dark .notra .hljs-link,
+.dark .notra .hljs-meta,
+.dark .notra .hljs-selector-id,
+.dark .notra .hljs-symbol,
+.dark .notra .hljs-title {
+	color: #61aeee;
 }
 
 /* =====================

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notra-editor",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A Markdown-first rich text editor for React",
   "license": "MIT",
   "keywords": [
@@ -42,6 +42,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@tiptap/core": "^3.22.4",
     "@tiptap/extension-code-block": "^3.22.4",
+    "@tiptap/extension-code-block-lowlight": "^3.22.4",
     "@tiptap/extension-image": "^3.22.4",
     "@tiptap/extension-link": "^3.22.4",
     "@tiptap/extension-list": "^3.22.4",
@@ -51,6 +52,9 @@
     "@tiptap/static-renderer": "^3.22.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "hast-util-to-html": "^9.0.5",
+    "lowlight": "^3.3.0",
     "lucide-react": "^1.9.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",

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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,17 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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":[]}