markupeditor 0.9.25 → 0.9.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupeditor",
-  "version": "0.9.25",
+  "version": "0.9.27",
   "description": "A web component and API for WYSIWYG HTML editing.",
   "keywords": [
     "wysiwyg",
@@ -31,6 +31,7 @@
   "dependencies": {
     "crelt": "^1.0.6",
     "express": "^5.1.0",
+    "highlight.js": "^11.11.1",
     "prosemirror-commands": "^1.0.0",
     "prosemirror-dropcursor": "^1.8.1",
     "prosemirror-gapcursor": "^1.3.2",
@@ -48,14 +49,15 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/js": "^9.35.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "eslint": "^9.35.0",
     "jsdoc": "^4.0.5",
     "jsdom": "^27.0.1",
     "modern-jsdoc-template": "^1.0.0",
     "rollup": "^4.31.0",
-    "rollup-plugin-import-css": "4.0.1", 
+    "rollup-plugin-import-css": "4.0.1",
     "vitest": "^3.2.4"
   },
   "scripts": {

package/styles/markup.css

@@ -265,6 +265,46 @@ img {
     color: #ccc;
 }
 
+/* Scoped to :has() rather than styling pre unconditionally, since a code_block's
+   <pre> should only become a positioning context when it's actually carrying the
+   language overlay (highlightCode on, block selected) — not for every code block. */
+pre:has(.Markup-code-language-overlay) {
+    position: relative;
+}
+
+.Markup-code-language-overlay {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    font-size: 0.75rem;
+    padding: 2px 6px;
+    border: none;
+    border-radius: 4px 4px 0 0;
+    cursor: pointer;
+    opacity: 0.6;
+    color: white;
+    background: var(--Markup-accent-color, blue);
+}
+
+.Markup-code-language-overlay:hover {
+    opacity: 0.9;
+}
+
+/* Applied (setup/index.js, hasRoomAboveOverlay) when the code_block is too close to
+   the top of the view for the label to fit above it — attach to the bottom instead. */
+.Markup-code-language-overlay-below {
+    bottom: auto;
+    top: 100%;
+    border-radius: 0 0 4px 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .Markup-code-language-overlay {
+    background: var(--Markup-accent-color, lightblue);
+    color: black;
+  }
+}
+
 /* Classes set by prosemirror-search module, modified for MarkupEditor */
 /* Note the dark and light mode are the same */
 

package/styles/toolbar.css

@@ -267,6 +267,16 @@
   padding: 2px 8px 2px 4px;
 }
 
+.Markup-menu-dropdown-separator {
+  border-top: 1px solid var(--Markup-border-color, lightgray);
+  margin: 4px 0;
+}
+@media (prefers-color-scheme: dark) {
+  .Markup-menu-dropdown-separator {
+    border-top: 1px solid var(--Markup-border-color, gray);
+  }
+}
+
 /* Used to overlfow and ellipsis-truncate text in Dropdown menu items */
 .Markup-menuitem-clipped {
   white-space: nowrap;  /* Required for text-overflow */
@@ -519,6 +529,11 @@
   width: 300px;
 }
 
+.Markup-prompt-language {
+  height: 96px;
+  width: 300px;
+}
+
 .Markup-prompt img {
   display: inline-block;
   vertical-align: middle;