@richhtmleditor/themes 1.1.1 → 1.1.2

package/README.md

@@ -2,13 +2,13 @@
 
 Shared CSS for Rich HTML Editor — toolbar, content area, outline panel, selection mini-toolbar, tables, and dark mode tokens. Pair with [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) or any framework wrapper.
 
-**Current release: 1.1.1**
+**Current release: 1.1.2**
 
 **Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
 
 **Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
 
-### What's in 1.1.1
+### What's in 1.1.2
 
 - **`richhtmleditor.css`** — complete editor chrome (toolbar rows, buttons, dropdowns, content area)
 - **Dark mode** — `.de-root--dark` class toggled when `dark: true` is passed to `createEditor`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@richhtmleditor/themes",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CSS themes for Rich HTML Editor.",
   "type": "module",
   "style": "./src/richhtmleditor.css",

package/src/richhtmleditor.css

@@ -584,6 +584,48 @@
   text-decoration: none;
   color: inherit;
 }
+#richhtmleditor-root .de-content nav.de-toc .de-toc__list li[data-level="2"] { padding-left: 1rem; }
+#richhtmleditor-root .de-content nav.de-toc .de-toc__list li[data-level="3"] { padding-left: 2rem; }
+
+/* ── Spellcheck ──────────────────────────────────────── */
+.de-spell-error {
+  border-bottom: 2px solid #dc2626;
+  cursor: pointer;
+  border-radius: 1px;
+}
+.de-spell-popover {
+  background: var(--de-toolbar-bg, #fff);
+  border: 1px solid var(--de-border, #e2e8f0);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.12);
+  padding: 4px;
+  min-width: 130px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  font-size: 0.875rem;
+}
+.de-spell-popover__item {
+  text-align: left;
+  padding: 6px 10px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--de-text-primary, #0f172a);
+  white-space: nowrap;
+}
+.de-spell-popover__item:hover { background: var(--de-primary-hover, #eff6ff); }
+.de-spell-popover__item--muted {
+  color: var(--de-text-muted, #64748b);
+  font-style: italic;
+  border-top: 1px solid var(--de-border, #e2e8f0);
+  margin-top: 2px;
+  padding-top: 8px;
+}
 
 #richhtmleditor-root .de-content details {
   --de-acc-pad-x: 0.75rem;
@@ -1776,6 +1818,8 @@ del.de-track-delete,
   min-width: 188px;
   max-height: 70vh;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--de-text-muted) 30%, transparent) transparent;
   padding: 8px;
   background: var(--de-toolbar-bg);
   border: 1px solid var(--de-border);
@@ -1789,6 +1833,16 @@ del.de-track-delete,
   font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
   color: var(--de-text-primary);
 }
+.de-toolbar__overflow-menu::-webkit-scrollbar {
+  width: 4px;
+}
+.de-toolbar__overflow-menu::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--de-text-muted) 30%, transparent);
+  border-radius: 4px;
+}
+.de-toolbar__overflow-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
 
 .de-toolbar__overflow-menu--dark {
   --de-toolbar-bg: #1e293b;
@@ -3537,10 +3591,16 @@ del.de-track-delete,
 #richhtmleditor-root .de-section[data-style-id^="columns-"] > .de-section__title {
   display: none;
 }
+#richhtmleditor-root .de-section[data-style-id^="columns-"] {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
 
 #richhtmleditor-root .de-section[data-style-id="columns-2"] { column-count: 2; column-gap: 2em; }
 #richhtmleditor-root .de-section[data-style-id="columns-3"] { column-count: 3; column-gap: 1.5em; }
 
+.de-section[data-style-id^="columns-"] > .de-section__title { display: none; }
+.de-section[data-style-id^="columns-"] { overflow-wrap: break-word; word-break: break-word; }
 .de-section[data-style-id="columns-2"] { column-count: 2; column-gap: 2em; }
 .de-section[data-style-id="columns-3"] { column-count: 3; column-gap: 1.5em; }
 
@@ -3980,9 +4040,11 @@ del.de-track-delete,
 /* ── Slash command menu ──────────────────────────────── */
 .de-slash-menu {
   z-index: 10001;
-  width: 240px;
-  max-height: 320px;
+  width: 270px;
+  max-height: 380px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,.15) transparent;
   padding: 6px;
   background: var(--de-toolbar-bg, #fff);
   border: 1px solid var(--de-border, #e2e8f0);
@@ -3996,11 +4058,9 @@ del.de-track-delete,
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px 10px;
+  padding: 7px 10px;
   border-radius: 7px;
   cursor: pointer;
-  font-size: 0.8125rem;
-  font-weight: 500;
   color: var(--de-text-primary, #0f172a);
   transition: background 0.12s;
 }
@@ -4012,8 +4072,8 @@ del.de-track-delete,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   border-radius: 6px;
   background: var(--de-secondary, #f1f5f9);
   font-size: 0.75rem;
@@ -4021,8 +4081,27 @@ del.de-track-delete,
   color: var(--de-text-muted, #64748b);
   flex-shrink: 0;
 }
-.de-slash-menu__label {
+.de-slash-menu__icon svg { display: block; }
+.de-slash-menu__text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
   flex: 1;
+  min-width: 0;
+}
+.de-slash-menu__label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+.de-slash-menu__desc {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: var(--de-text-muted, #64748b);
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .de-slash-menu__empty {
   padding: 16px 10px;
@@ -4040,6 +4119,16 @@ del.de-track-delete,
   background: #334155;
   color: #94a3b8;
 }
+.de-root--dark .de-slash-menu {
+  scrollbar-color: rgba(255,255,255,.15) transparent;
+}
+.de-slash-menu::-webkit-scrollbar { width: 5px; }
+.de-slash-menu::-webkit-scrollbar-track { background: transparent; }
+.de-slash-menu::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,.15);
+  border-radius: 99px;
+}
+.de-root--dark .de-slash-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
 
 /* ── Fields / mail-merge placeholders ── */
 #richhtmleditor-root .de-content .de-field {
@@ -4309,6 +4398,18 @@ del.de-track-delete,
   padding: 12px;
   max-height: 280px;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--de-text-muted) 30%, transparent) transparent;
+}
+.de-shape-picker__body::-webkit-scrollbar {
+  width: 4px;
+}
+.de-shape-picker__body::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--de-text-muted) 30%, transparent);
+  border-radius: 4px;
+}
+.de-shape-picker__body::-webkit-scrollbar-track {
+  background: transparent;
 }
 .de-shape-picker__grid {
   display: grid;