@noirmd/previewer 1.1.0 → 1.2.0

package/editor.css

@@ -0,0 +1,179 @@
+/* ============================================================
+   NoirMD Editor CSS
+
+   Self-contained styles for the CodeMirror-based editor
+   (toolbar, fold toggle, mode buttons, split layout).
+
+   Pure CSS — no Tailwind dependency. Every rule uses CSS
+   variables with reference-palette fallbacks, so the host's
+   theme wins when defined and the editor still looks right
+   when it isn't.
+
+   Usage:
+     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');
+
+/* ── Editor root layout ───────────────────────────────────── */
+
+.nr-editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+/* ── Toolbar ──────────────────────────────────────────────── */
+
+.nr-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--color-border, #334155) 50%, transparent);
+  background-color: color-mix(in srgb, var(--color-background-secondary-solid, #1e293b) 60%, transparent);
+  border-radius: 16px 16px 0 0;
+  flex-shrink: 0;
+}
+
+.nr-editor-toolbar-left,
+.nr-editor-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.nr-toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  color: var(--color-text-secondary, #94a3b8);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  font-family: inherit;
+}
+.nr-toolbar-btn:hover {
+  color: var(--color-text-primary, #e2e8f0);
+  background-color: color-mix(in srgb, var(--color-accent-primary, #38bdf8) 10%, transparent);
+}
+.nr-toolbar-btn:active {
+  transform: scale(0.96);
+}
+
+.nr-toolbar-btn .nr-toolbar-label {
+  display: none;
+}
+@media (min-width: 640px) {
+  .nr-toolbar-btn .nr-toolbar-label {
+    display: inline;
+  }
+}
+
+/* Fold (collapse all) button */
+.nr-toolbar-btn-fold {
+  padding: 0.25rem;
+}
+.nr-toolbar-btn-fold .material-symbols-rounded {
+  font-size: 15px;
+}
+.nr-toolbar-btn-fold:hover {
+  color: var(--color-accent-primary, #38bdf8);
+}
+
+/* Mode group — Editor / Split / Preview */
+.nr-toolbar-mode-group {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 0.5rem;
+  background-color: color-mix(in srgb, var(--color-base, #0f172a) 40%, transparent);
+}
+.nr-toolbar-btn-mode {
+  padding: 0.125rem 0.375rem;
+  font-size: 11px;
+  border-radius: 0.375rem;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+.nr-toolbar-btn-mode .material-symbols-rounded {
+  font-size: 13px;
+}
+.nr-toolbar-btn-mode--active {
+  color: var(--color-accent-primary, #38bdf8);
+  background-color: color-mix(in srgb, var(--color-accent-primary, #38bdf8) 20%, transparent);
+  font-weight: 600;
+}
+@media (max-width: 639px) {
+  .nr-toolbar-btn-split {
+    display: none !important;
+  }
+}
+
+/* Right-side small buttons (Guía / Configurar) */
+.nr-toolbar-btn-sm {
+  padding: 0.125rem 0.375rem;
+  font-size: 11px;
+  gap: 0.25rem;
+  font-weight: 500;
+}
+.nr-toolbar-btn-sm .material-symbols-rounded {
+  font-size: 13px;
+}
+.nr-toolbar-btn-guide:hover,
+.nr-toolbar-btn-config:hover {
+  color: var(--color-accent-primary, #38bdf8);
+}
+
+/* Vertical divider */
+.nr-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background-color: color-mix(in srgb, var(--color-border, #334155) 60%, transparent);
+  flex-shrink: 0;
+}
+
+/* ── Content area — editor / split / preview ──────────────── */
+
+.nr-editor-body {
+  display: flex;
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+.nr-editor-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+}
+.nr-editor-pane--half {
+  width: 50%;
+  border-right: 1px solid color-mix(in srgb, var(--color-border, #334155) 30%, transparent);
+}
+
+.nr-editor-preview {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+.nr-editor-preview--half {
+  width: 50%;
+}
+
+.nr-editor-prose {
+  height: 100%;
+  overflow: auto;
+  padding: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noirmd/previewer",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "Framework-agnostic markdown parser with React renderer, directives, cards, modals, and Tailwind styling",
   "main": "./dist/index.cjs",
@@ -44,11 +44,13 @@
       "require": "./dist/NReditor.cjs",
       "default": "./dist/NReditor.js"
     },
+    "./editor.css": "./dist/editor.css",
     "./markdown.css": "./markdown.css"
   },
   "files": [
     "dist",
-    "markdown.css"
+    "markdown.css",
+    "editor.css"
   ],
   "scripts": {
     "build": "tsup",
@@ -71,7 +73,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/NOIR-DexPrkr/NoirMD.git",
+    "url": "git+https://github.com/NOIR-DexPrkr/NoirMD.git",
     "directory": "markdown-v2"
   },
   "homepage": "https://github.com/NOIR-DexPrkr/NoirMD#readme",