@noirmd/previewer 1.2.0 → 2.0.0

package/editor.css

@@ -13,7 +13,34 @@
      import '@noirmd/previewer/editor.css';
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');
+/* ── Material Icons Round (self-hosted) ────────────────────
+   Toolbar buttons render icons via `material-icons-round`
+   ligatures. Self-hosted so icons work offline and without
+   host dependencies. */
+
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url('./fonts/material-icons-round.woff2') format('woff2');
+}
+
+.material-icons-round {
+  font-family: 'Material Icons Round';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
 
 /* ── Editor root layout ───────────────────────────────────── */
 
@@ -21,8 +48,9 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 1 1 0%;
-  min-height: 0;
+  flex: 1 1 auto;
+  height: auto;
+  min-height: var(--nr-editor-min-height, 300px);
 }
 
 /* ── Toolbar ──────────────────────────────────────────────── */
@@ -81,7 +109,7 @@
 .nr-toolbar-btn-fold {
   padding: 0.25rem;
 }
-.nr-toolbar-btn-fold .material-symbols-rounded {
+.nr-toolbar-btn-fold .material-icons-round {
   font-size: 15px;
 }
 .nr-toolbar-btn-fold:hover {
@@ -104,7 +132,7 @@
   gap: 0.25rem;
   font-weight: 500;
 }
-.nr-toolbar-btn-mode .material-symbols-rounded {
+.nr-toolbar-btn-mode .material-icons-round {
   font-size: 13px;
 }
 .nr-toolbar-btn-mode--active {
@@ -125,7 +153,7 @@
   gap: 0.25rem;
   font-weight: 500;
 }
-.nr-toolbar-btn-sm .material-symbols-rounded {
+.nr-toolbar-btn-sm .material-icons-round {
   font-size: 13px;
 }
 .nr-toolbar-btn-guide:hover,
@@ -146,14 +174,14 @@
 
 .nr-editor-body {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1 1 auto;
   min-height: 0;
 }
 
 .nr-editor-pane {
   display: flex;
   flex-direction: column;
-  flex: 1 1 0%;
+  flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
 }
@@ -162,8 +190,27 @@
   border-right: 1px solid color-mix(in srgb, var(--color-border, #334155) 30%, transparent);
 }
 
+/* CodeMirror grows with its content — no fixed height. The uiw wrapper
+   is a plain block with no height of its own, so let the whole chain
+   size to the content and the root `min-height` (--nr-editor-min-height)
+   guarantees the editor never collapses. Self-contained: works in any
+   host, no Tailwind required. */
+.nr-editor-pane .cm-theme {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+}
+.nr-editor-pane .cm-editor {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+}
+
 .nr-editor-preview {
-  flex: 1 1 0%;
+  flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   overflow: auto;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@noirmd/previewer",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
-  "description": "Framework-agnostic markdown parser with React renderer, directives, cards, modals, and Tailwind styling",
+  "description": "Framework-agnostic markdown renderer: one vanilla DOM engine with thin React/Vue wrappers, directives, cards, modals, and pure CSS styling",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -44,18 +44,17 @@
       "require": "./dist/NReditor.cjs",
       "default": "./dist/NReditor.js"
     },
-    "./editor.css": "./dist/editor.css",
-    "./markdown.css": "./markdown.css"
+    "./editor.css": "./dist/editor.css"
   },
   "files": [
     "dist",
-    "markdown.css",
     "editor.css"
   ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test:editor": "node test/build.mjs"
   },
   "keywords": [
     "markdown",
@@ -81,7 +80,6 @@
     "url": "https://github.com/NOIR-DexPrkr/NoirMD/issues"
   },
   "peerDependencies": {
-    "@base-ui/react": ">=1.0.0",
     "@codemirror/language": ">=6.0.0",
     "@codemirror/state": ">=6.0.0",
     "@codemirror/view": ">=6.0.0",
@@ -92,9 +90,6 @@
     "vue": ">=3.0.0"
   },
   "peerDependenciesMeta": {
-    "@base-ui/react": {
-      "optional": true
-    },
     "vue": {
       "optional": true
     },

package/markdown.css

@@ -1,344 +0,0 @@
-/* NRpreviewer — Markdown typography
-   These styles work standalone without Tailwind.
-   If consumer has Tailwind, utility classes in JSX still apply on top. */
-
-.md-h1 {
-  font-size: 1.5rem;
-  font-weight: 800;
-  letter-spacing: -0.025em;
-  line-height: 1.2;
-  margin: 1.5rem 0 0.75rem;
-}
-@media (min-width: 640px) {
-  .md-h1 { font-size: 1.875rem; }
-}
-@media (min-width: 768px) {
-  .md-h1 { font-size: 2.25rem; }
-}
-
-.md-h2 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  line-height: 1.25;
-  margin: 1.25rem 0 0.625rem;
-}
-@media (min-width: 640px) {
-  .md-h2 { font-size: 1.5rem; }
-}
-@media (min-width: 768px) {
-  .md-h2 { font-size: 1.875rem; }
-}
-
-.md-h3 {
-  font-size: 1.125rem;
-  font-weight: 700;
-  line-height: 1.3;
-  margin: 1rem 0 0.5rem;
-}
-@media (min-width: 640px) {
-  .md-h3 { font-size: 1.25rem; }
-}
-@media (min-width: 768px) {
-  .md-h3 { font-size: 1.5rem; }
-}
-
-.md-h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.35;
-  margin: 0.75rem 0 0.375rem;
-}
-@media (min-width: 640px) {
-  .md-h4 { font-size: 1.125rem; }
-}
-@media (min-width: 768px) {
-  .md-h4 { font-size: 1.25rem; }
-}
-
-.md-h5 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0.625rem 0 0.25rem;
-}
-@media (min-width: 640px) {
-  .md-h5 { font-size: 1rem; }
-}
-@media (min-width: 768px) {
-  .md-h5 { font-size: 1.125rem; }
-}
-
-.md-h6 {
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0.5rem 0 0.25rem;
-}
-@media (min-width: 640px) {
-  .md-h6 { font-size: 0.875rem; }
-}
-@media (min-width: 768px) {
-  .md-h6 { font-size: 1rem; }
-}
-
-.md-p {
-  font-size: 0.875rem;
-  line-height: 1.625;
-  margin: 0.75rem 0;
-}
-@media (min-width: 640px) {
-  .md-p { font-size: 1rem; }
-}
-
-/* ── Links ── */
-.nr-prose a {
-  text-decoration: none !important;
-  color: var(--color-accent-primary, #0ea5e9);
-  transition: color 0.15s;
-}
-.nr-prose a:hover {
-  text-decoration: underline !important;
-  color: var(--color-accent-hover, #38bdf8);
-}
-
-/* ── Lists ── */
-.nr-prose ul,
-.nr-prose ol {
-  list-style-type: disc;
-  margin: 0.75rem 0;
-  padding-left: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-prose ul, .nr-prose ol { font-size: 1rem; }
-}
-
-.nr-prose ol {
-  list-style-type: decimal;
-}
-
-.nr-prose li {
-  margin: 0.25rem 0;
-  line-height: 1.625;
-  display: list-item;
-}
-
-.nr-prose li::marker {
-  color: var(--color-text-secondary, #64748b);
-}
-
-/* Nested lists */
-.nr-prose li > ul,
-.nr-prose li > ol {
-  margin: 0.25rem 0;
-}
-
-/* ── Tables ── */
-.nr-prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-@media (min-width: 640px) {
-  .nr-prose table { font-size: 1rem; }
-}
-
-.nr-prose thead {
-  border-bottom: 2px solid var(--color-border, #e2e8f0);
-}
-
-.nr-prose th {
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  font-weight: 700;
-  font-size: 0.75rem;
-  background: var(--color-background-secondary-solid, #f1f5f9);
-  border-bottom: 1px solid var(--color-border, #e2e8f0);
-}
-
-.nr-prose td {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--color-border, #e2e8f0);
-}
-
-.nr-prose tbody tr:last-child td {
-  border-bottom: none;
-}
-
-/* ── Blockquotes ── */
-.nr-prose blockquote {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
-  border-left: 4px solid var(--color-accent-primary, #0ea5e9);
-  color: var(--color-text-secondary, #64748b);
-  font-style: italic;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-prose blockquote { font-size: 1rem; }
-}
-
-.nr-prose blockquote p {
-  margin: 0.25rem 0;
-}
-
-/* ── Inline code ── */
-.nr-prose :not(pre) > code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.875em;
-  background: var(--color-background-secondary-solid, #f1f5f9);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  color: var(--color-text-primary, #0f172a);
-}
-
-/* ── Code blocks ── */
-.nr-prose pre {
-  margin: 1rem 0;
-  padding: 1rem;
-  overflow-x: auto;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  border-radius: 0.75rem;
-  background: var(--color-background-secondary-solid, #f1f5f9);
-}
-
-@media (min-width: 640px) {
-  .nr-prose pre { font-size: 0.875rem; }
-}
-
-/* ── Inline formatting ── */
-.nr-prose strong,
-.nr-prose b {
-  font-weight: 700;
-}
-
-.nr-prose em,
-.nr-prose i {
-  font-style: italic;
-}
-
-.nr-prose del,
-.nr-prose s {
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-
-/* ── Highlight ── */
-.nr-prose mark {
-  background: rgba(250, 204, 21, 0.2);
-  padding: 0 0.125rem;
-  border-radius: 0.125rem;
-}
-
-/* ── Horizontal rules ── */
-.nr-prose hr {
-  border: none;
-  border-top: 1px solid var(--color-border, #e2e8f0);
-  margin: 2rem 0;
-}
-
-/* ── Spoiler ── */
-.nr-prose .spoiler,
-.nr-prose [class*="bg-text-primary"][class*="text-bg-primary"] {
-  background: var(--color-text-primary, #0f172a);
-  color: var(--color-text-primary, #0f172a);
-  border-radius: 0.25rem;
-  padding: 0 0.25rem;
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.nr-prose .spoiler:hover,
-.nr-prose [class*="bg-text-primary"][class*="text-bg-primary"]:hover {
-  background: transparent;
-  color: inherit;
-}
-
-/* ── Images ── */
-.nr-prose img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 0.5rem;
-}
-
-/* ── Scrollbar (for code blocks and tables) ── */
-.nr-prose pre::-webkit-scrollbar,
-.nr-prose .overflow-x-auto::-webkit-scrollbar {
-  height: 4px;
-}
-.nr-prose pre::-webkit-scrollbar-thumb,
-.nr-prose .overflow-x-auto::-webkit-scrollbar-thumb {
-  background: var(--color-border, #e2e8f0);
-  border-radius: 2px;
-}
-
-/* ── highlight.js theme — NoirMD ── */
-.hljs {
-  color: #e2e8f0;
-  background: transparent;
-}
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-section,
-.hljs-link {
-  color: #c084fc;
-  font-weight: 600;
-}
-.hljs-function .hljs-keyword {
-  color: #c084fc;
-}
-.hljs-string,
-.hljs-title,
-.hljs-name,
-.hljs-type,
-.hljs-attribute,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #4ade80;
-}
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion,
-.hljs-meta {
-  color: #64748b;
-  font-style: italic;
-}
-.hljs-number,
-.hljs-regexp,
-.hljs-literal,
-.hljs-built_in {
-  color: #fb923c;
-}
-.hljs-params {
-  color: #e2e8f0;
-}
-.hljs-attr {
-  color: #38bdf8;
-}
-.hljs-property {
-  color: #0ea5e9;
-}
-.hljs-selector-class,
-.hljs-selector-id {
-  color: #fbbf24;
-}
-.hljs-tag {
-  color: #f87171;
-}
-.hljs-emphasis {
-  font-style: italic;
-}
-.hljs-strong {
-  font-weight: 700;
-}