notra-editor 0.4.0 → 0.6.0

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,9 +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;
   }
@@ -311,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;
   }
@@ -336,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;
@@ -343,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);
   }
@@ -376,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);
   }
@@ -397,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;
   }
@@ -406,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));
@@ -438,6 +491,9 @@
   .nt\:text-destructive {
     color: var(--destructive);
   }
+  .nt\:text-foreground {
+    color: var(--foreground);
+  }
   .nt\:text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -456,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);
@@ -813,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;
@@ -833,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;
@@ -965,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;
 }
 
 /* =====================
@@ -417,6 +544,24 @@
 	text-decoration: underline;
 }
 
+/* =====================
+   Images
+   ===================== */
+.notra .tiptap img,
+.notra-reader img {
+	max-width: 100%;
+	height: auto;
+	display: block;
+	margin: 1.5em 0;
+	border-radius: var(--notra-radius);
+}
+
+/* Selected image (NodeSelection) — only relevant in the editor */
+.notra .tiptap img.ProseMirror-selectednode {
+	outline: 2px solid var(--tt-brand-color-500);
+	outline-offset: 2px;
+}
+
 /* =====================
    Inline Text Decoration
    ===================== */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notra-editor",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A Markdown-first rich text editor for React",
   "license": "MIT",
   "keywords": [
@@ -42,6 +42,8 @@
     "@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",
     "@tiptap/pm": "^3.22.4",
@@ -50,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":[]}