notra-editor 0.7.0 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "notra-editor",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A Markdown-first rich text editor for React",
   "license": "MIT",
   "keywords": [
@@ -23,7 +23,6 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./themes/default/shared.css": "./dist/themes/default/shared.css",
     "./themes/default/editor.css": "./dist/themes/default/editor.css",
     "./themes/default/reader.css": "./dist/themes/default/reader.css",
     "./styles/globals.css": "./dist/styles/globals.css"
@@ -71,6 +70,7 @@
     "postcss-cli": "^11.0.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "sass": "^1.99.0",
     "shadcn": "^4.6.0",
     "tailwindcss": "^4.2.4",
     "tsup": "^8.4.0",
@@ -80,7 +80,7 @@
   },
   "scripts": {
     "build": "tsup && pnpm build:css",
-    "build:css": "postcss src/styles/globals.css -o dist/styles/globals.css",
+    "build:css": "sass --no-source-map --style=expanded src/themes/default/editor.scss:dist/themes/default/editor.css src/themes/default/reader.scss:dist/themes/default/reader.css && postcss src/styles/globals.css -o dist/styles/globals.css",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",

package/dist/themes/default/shared.css

@@ -1,609 +0,0 @@
-/* =====================
-   CSS Custom Properties
-   ===================== */
-.notra {
-	--notra-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
-	--notra-font-mono: 'JetBrains Mono NL', ui-monospace, 'SF Mono', monospace;
-	--notra-font-size: 1rem;
-	--notra-line-height: 1.6;
-
-	/* Light mode colors */
-	--notra-color-text: rgba(29, 30, 32, 0.98);
-	--notra-color-bg: #ffffff;
-	--notra-color-border: rgba(37, 39, 45, 0.1);
-	--notra-color-link: rgba(98, 41, 255, 1);
-
-	/* Code */
-	--notra-code-bg: rgba(15, 22, 36, 0.05);
-	--notra-code-text: rgba(35, 37, 42, 0.87);
-	--notra-code-border: rgba(37, 39, 45, 0.1);
-	--notra-codeblock-bg: rgba(56, 56, 56, 0.04);
-	--notra-codeblock-text: rgba(30, 32, 36, 0.95);
-	--notra-codeblock-border: rgba(37, 39, 45, 0.1);
-
-	/* Blockquote */
-	--notra-blockquote-bar: rgba(29, 30, 32, 0.98);
-
-	/* Horizontal rule */
-	--notra-hr-color: rgba(37, 39, 45, 0.1);
-
-	/* Task list */
-	--notra-checklist-bg: rgba(15, 22, 36, 0.05);
-	--notra-checklist-bg-active: rgba(29, 30, 32, 0.98);
-	--notra-checklist-border: rgba(37, 39, 45, 0.1);
-	--notra-checklist-border-active: rgba(29, 30, 32, 0.98);
-	--notra-checklist-check-color: #ffffff;
-	--notra-checklist-text-active: rgba(52, 55, 60, 0.64);
-
-	--notra-radius: 6px;
-}
-
-/* =====================
-   Dark Mode Overrides
-   ===================== */
-.dark .notra {
-	/* Dark mode colors */
-	--notra-color-text: rgba(255, 255, 255, 0.96);
-	--notra-color-bg: rgba(14, 14, 17, 1);
-	--notra-color-border: rgba(238, 238, 246, 0.11);
-	--notra-color-link: rgba(122, 82, 255, 1);
-
-	/* Code */
-	--notra-code-bg: rgba(231, 231, 243, 0.07);
-	--notra-code-text: rgba(251, 251, 254, 0.75);
-	--notra-code-border: rgba(238, 238, 246, 0.11);
-	--notra-codeblock-bg: rgba(232, 232, 253, 0.05);
-	--notra-codeblock-text: rgba(253, 253, 253, 0.88);
-	--notra-codeblock-border: rgba(238, 238, 246, 0.11);
-
-	/* Blockquote */
-	--notra-blockquote-bar: rgba(245, 245, 245, 1);
-
-	/* Horizontal rule */
-	--notra-hr-color: rgba(238, 238, 246, 0.11);
-
-	/* Task list */
-	--notra-checklist-bg: rgba(231, 231, 243, 0.07);
-	--notra-checklist-bg-active: rgba(255, 255, 255, 0.96);
-	--notra-checklist-border: rgba(238, 238, 246, 0.11);
-	--notra-checklist-border-active: rgba(255, 255, 255, 0.96);
-	--notra-checklist-check-color: rgba(14, 14, 17, 1);
-	--notra-checklist-text-active: rgba(236, 238, 253, 0.5);
-}
-
-/* =====================
-   Base Typography
-   ===================== */
-.notra .tiptap,
-.notra-reader {
-	font-family: var(--notra-font-body);
-	font-size: var(--notra-font-size);
-	line-height: var(--notra-line-height);
-	color: var(--notra-color-text);
-}
-
-/* =====================
-   Paragraphs
-   ===================== */
-.notra .tiptap p:not(:first-child):not(td p):not(th p),
-.notra-reader p:not(:first-child) {
-	font-size: 1rem;
-	line-height: 1.6;
-	font-weight: normal;
-	margin-top: 20px;
-}
-
-/* =====================
-   Headings
-   ===================== */
-.notra .tiptap h1,
-.notra .tiptap h2,
-.notra .tiptap h3,
-.notra .tiptap h4,
-.notra .tiptap h5,
-.notra .tiptap h6,
-.notra-reader h1,
-.notra-reader h2,
-.notra-reader h3,
-.notra-reader h4,
-.notra-reader h5,
-.notra-reader h6 {
-	position: relative;
-	color: inherit;
-	font-style: inherit;
-}
-
-.notra .tiptap > h1:first-child,
-.notra .tiptap > h2:first-child,
-.notra .tiptap > h3:first-child,
-.notra .tiptap > h4:first-child,
-.notra-reader > h1:first-child,
-.notra-reader > h2:first-child,
-.notra-reader > h3:first-child,
-.notra-reader > h4:first-child {
-	margin-top: 0;
-}
-
-.notra .tiptap h1,
-.notra-reader h1 {
-	font-size: 1.5em;
-	font-weight: 700;
-	margin-top: 3em;
-}
-
-.notra .tiptap h2,
-.notra-reader h2 {
-	font-size: 1.25em;
-	font-weight: 700;
-	margin-top: 2.5em;
-}
-
-.notra .tiptap h3,
-.notra-reader h3 {
-	font-size: 1.125em;
-	font-weight: 600;
-	margin-top: 2em;
-}
-
-.notra .tiptap h4,
-.notra-reader h4 {
-	font-size: 1em;
-	font-weight: 600;
-	margin-top: 2em;
-}
-
-.notra .tiptap h5,
-.notra-reader h5 {
-	font-size: 0.875em;
-	font-weight: 600;
-	margin-top: 1.5em;
-}
-
-.notra .tiptap h6,
-.notra-reader h6 {
-	font-size: 0.75em;
-	font-weight: 600;
-	margin-top: 1.5em;
-}
-
-/* =====================
-   Lists — Common
-   ===================== */
-.notra .tiptap ol,
-.notra .tiptap ul,
-.notra-reader ol,
-.notra-reader ul {
-	margin-top: 1.5em;
-	margin-bottom: 1.5em;
-	padding-left: 1.5em;
-}
-
-.notra .tiptap ol:first-child,
-.notra .tiptap ul:first-child,
-.notra-reader ol:first-child,
-.notra-reader ul:first-child {
-	margin-top: 0;
-}
-
-.notra .tiptap ol:last-child,
-.notra .tiptap ul:last-child,
-.notra-reader ol:last-child,
-.notra-reader ul:last-child {
-	margin-bottom: 0;
-}
-
-.notra .tiptap ol ol,
-.notra .tiptap ol ul,
-.notra .tiptap ul ol,
-.notra .tiptap ul ul,
-.notra-reader ol ol,
-.notra-reader ol ul,
-.notra-reader ul ol,
-.notra-reader ul ul {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.notra .tiptap li p,
-.notra-reader li p {
-	margin-top: 0;
-	line-height: 1.6;
-}
-
-/* =====================
-   Ordered Lists — Nested styles
-   ===================== */
-.notra .tiptap ol,
-.notra-reader ol {
-	list-style: decimal;
-}
-
-.notra .tiptap ol ol,
-.notra-reader ol ol {
-	list-style: lower-alpha;
-}
-
-.notra .tiptap ol ol ol,
-.notra-reader ol ol ol {
-	list-style: lower-roman;
-}
-
-/* =====================
-   Unordered Lists — Nested styles
-   ===================== */
-.notra .tiptap ul:not([data-type='taskList']),
-.notra-reader ul:not([data-type='taskList']) {
-	list-style: disc;
-}
-
-.notra .tiptap ul:not([data-type='taskList']) ul,
-.notra-reader ul:not([data-type='taskList']) ul {
-	list-style: circle;
-}
-
-.notra .tiptap ul:not([data-type='taskList']) ul ul,
-.notra-reader ul:not([data-type='taskList']) ul ul {
-	list-style: square;
-}
-
-/* =====================
-   Task Lists
-   ===================== */
-.notra .tiptap ul[data-type='taskList'],
-.notra-reader ul[data-type='taskList'] {
-	padding-left: 0.25em;
-	list-style: none;
-}
-
-.notra .tiptap ul[data-type='taskList'] li,
-.notra-reader ul[data-type='taskList'] li {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-}
-
-.notra .tiptap ul[data-type='taskList'] li[data-checked='true'] > div > p,
-.notra-reader ul[data-type='taskList'] li[data-checked='true'] > div > p {
-	opacity: 0.5;
-	text-decoration: line-through;
-}
-
-.notra .tiptap ul[data-type='taskList'] li label,
-.notra-reader ul[data-type='taskList'] li label {
-	position: relative;
-	padding-top: 0.375rem;
-	padding-right: 0.5rem;
-}
-
-.notra .tiptap ul[data-type='taskList'] li label input[type='checkbox'],
-.notra-reader ul[data-type='taskList'] li label input[type='checkbox'] {
-	position: absolute;
-	opacity: 0;
-	width: 0;
-	height: 0;
-}
-
-.notra .tiptap ul[data-type='taskList'] li label span,
-.notra-reader ul[data-type='taskList'] li label span {
-	display: block;
-	width: 1em;
-	height: 1em;
-	border: 1px solid var(--notra-checklist-border);
-	border-radius: 0.25rem;
-	position: relative;
-	cursor: pointer;
-	background-color: var(--notra-checklist-bg);
-	transition:
-		background-color 80ms ease-out,
-		border-color 80ms ease-out;
-}
-
-.notra .tiptap ul[data-type='taskList'] li label span::before,
-.notra-reader ul[data-type='taskList'] li label span::before {
-	content: '';
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	width: 0.75em;
-	height: 0.75em;
-	background-color: var(--notra-checklist-check-color);
-	opacity: 0;
-	-webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4142 4.58579C22.1953 5.36683 22.1953 6.63317 21.4142 7.41421L10.4142 18.4142C9.63317 19.1953 8.36684 19.1953 7.58579 18.4142L2.58579 13.4142C1.80474 12.6332 1.80474 11.3668 2.58579 10.5858C3.36683 9.80474 4.63317 9.80474 5.41421 10.5858L9 14.1716L18.5858 4.58579C19.3668 3.80474 20.6332 3.80474 21.4142 4.58579Z' fill='currentColor'/%3E%3C/svg%3E")
-		center / contain no-repeat;
-	mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4142 4.58579C22.1953 5.36683 22.1953 6.63317 21.4142 7.41421L10.4142 18.4142C9.63317 19.1953 8.36684 19.1953 7.58579 18.4142L2.58579 13.4142C1.80474 12.6332 1.80474 11.3668 2.58579 10.5858C3.36683 9.80474 4.63317 9.80474 5.41421 10.5858L9 14.1716L18.5858 4.58579C19.3668 3.80474 20.6332 3.80474 21.4142 4.58579Z' fill='currentColor'/%3E%3C/svg%3E")
-		center / contain no-repeat;
-}
-
-.notra
-	.tiptap
-	ul[data-type='taskList']
-	li
-	label
-	input[type='checkbox']:checked
-	+ span,
-.notra-reader
-	ul[data-type='taskList']
-	li
-	label
-	input[type='checkbox']:checked
-	+ span {
-	background: var(--notra-checklist-bg-active);
-	border-color: var(--notra-checklist-border-active);
-}
-
-.notra
-	.tiptap
-	ul[data-type='taskList']
-	li
-	label
-	input[type='checkbox']:checked
-	+ span::before,
-.notra-reader
-	ul[data-type='taskList']
-	li
-	label
-	input[type='checkbox']:checked
-	+ span::before {
-	opacity: 1;
-}
-
-.notra .tiptap ul[data-type='taskList'] li div,
-.notra-reader ul[data-type='taskList'] li div {
-	flex: 1 1 0%;
-	min-width: 0;
-}
-
-/* =====================
-   Code — Inline
-   ===================== */
-.notra .tiptap code,
-.notra-reader code {
-	background-color: var(--notra-code-bg);
-	color: var(--notra-code-text);
-	border: 1px solid var(--notra-code-border);
-	font-family: var(--notra-font-mono);
-	font-size: 0.875em;
-	line-height: 1.4;
-	border-radius: var(--notra-radius);
-	padding: 0.1em 0.2em;
-}
-
-/* =====================
-   Code — Block
-   ===================== */
-.notra .tiptap pre,
-.notra-reader pre {
-	border: 1px solid var(--notra-codeblock-border);
-	margin-top: 1.5em;
-	margin-bottom: 1.5em;
-	font-size: 1rem;
-	border-radius: var(--notra-radius);
-	overflow: hidden;
-	font-family: var(--notra-font-mono);
-}
-
-.notra .tiptap pre code,
-.notra-reader pre code {
-	background-color: transparent;
-	border: none;
-	border-radius: 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;
-}
-
-/* =====================
-   Blockquote
-   ===================== */
-.notra .tiptap blockquote,
-.notra-reader blockquote {
-	position: relative;
-	padding-left: 1em;
-	padding-top: 0.375em;
-	padding-bottom: 0.375em;
-	margin: 1.5rem 0;
-}
-
-.notra .tiptap blockquote p,
-.notra-reader blockquote p {
-	margin-top: 0;
-}
-
-.notra .tiptap blockquote::before,
-.notra-reader blockquote::before {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	top: 0;
-	height: 100%;
-	width: 0.25em;
-	background-color: var(--notra-blockquote-bar);
-	content: '';
-	border-radius: 0;
-}
-
-/* =====================
-   Horizontal Rule
-   ===================== */
-.notra .tiptap hr,
-.notra-reader hr {
-	border: none;
-	height: 1px;
-	background-color: var(--notra-hr-color);
-}
-
-.notra .tiptap [data-type='horizontalRule'],
-.notra-reader [data-type='horizontalRule'] {
-	margin-top: 2.25em;
-	margin-bottom: 2.25em;
-	padding-top: 0.75rem;
-	padding-bottom: 0.75rem;
-}
-
-/* =====================
-   Links
-   ===================== */
-.notra .tiptap a,
-.notra-reader a {
-	color: var(--notra-color-link);
-	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
-   ===================== */
-.notra .tiptap a span,
-.notra-reader a span {
-	text-decoration: underline;
-}
-
-.notra .tiptap s span,
-.notra-reader s span {
-	text-decoration: line-through;
-}