markupeditor 0.9.26 → 0.9.27

package/dist/markup-editor.js

@@ -2,7 +2,7 @@ const sheet$4 = new CSSStyleSheet();sheet$4.replaceSync("/**\n The CSS here was
 
 const sheet$3 = new CSSStyleSheet();sheet$3.replaceSync("#editor, .editor {\n    font-family: system-ui, sans-serif;\n    background: white;\n    color: black;\n    background-clip: padding-box;\n    margin: -8px;        /* Set so that the .ProseMirror padding starts from edges */\n    --padBottom: 0;                     /* MU.padBottom() sets this value in px based on fullHeight */\n    padding-block: 0 var(--padBottom);\n    overflow-x: clip;\n    overflow-y: scroll;\n    height: 100vh;\n    padding-right: 12px;\n}\n@media (prefers-color-scheme: dark) {\n  #editor, .editor {\n    background: black;\n    color: white;\n  }\n}\n\nbody {\n    font-family: system-ui, sans-serif;\n}\n\na {\n    color: blue;\n    text-decoration: none;\n}\n@media (prefers-color-scheme: dark) {\n    a {\n        color: #4183c4;\n    }\n}\n\na:hover {\n    text-decoration: underline;\n}\n\np, pre {\n    font-size: 1.0rem;\n}\n\np, ul, ol, dl, table, pre {\n    margin: 0 0 15px;\n}\n\nul, ol {\n    padding-left: 30px;\n}\n\nh1 {\n    font-size: 2.5rem;\n}\n\nh2 {\n    font-size: 2.0rem;\n}\n\nh3 {\n    font-size: 1.5rem;\n}\n\nh4 {\n    font-size: 1.2rem;\n}\n\nh5 {\n    font-size: 1.0rem;\n}\n\nh6 {\n    font-size: .83rem;\n}\n\nh1, h2, h3, h4, h5, h6 {\n    font-weight: bold;\n    margin: 0 0 10px 0;\n}\n\nh1 + p, h2 + p, h3 + p {\n    margin-top: 10px;\n}\n\ntable {\n    table-layout: fixed;\n    border-collapse: collapse;\n    width: 100%;\n}\n\ntable th, table td {\n    padding: 4px;\n}\n\ntable th {\n    font-weight: normal;    /* The default is bold, but we want to use paragraph styles and formatting */\n}\n\n/* Make the styling compact inside of a table */\ntable p, table h1, table h2, table h3, table h4, table h5, table h6 {\n    margin: 0;\n}\n\n/* Table bordering options */\n.bordered-table-none {\n    border: none;\n}\n\n.bordered-table-outer, .bordered-table-header, .bordered-table-cell {\n    border: 1px solid #DDD;\n}\n\n.bordered-table-header th {   /* border th not thead to refresh properly */\n    border: 1px solid #DDD;\n}\n\n.bordered-table-cell th, .bordered-table-cell td {\n    border: 1px solid #DDD;\n}\n\n/* Default table bordering is same as .bordered-table-cell but is only used when not specified */\ntable:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) {\n    border: 1px solid #DDD;\n}\n\ntable:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) td {\n    border: 1px solid #DDD;\n}\n\ntable:not(.bordered-table-none, .bordered-table-outer, .bordered-table-header, .bordered-table-cell) th {\n    border: 1px solid #DDD;\n}\n\nli p {\n    margin: 0px 0;\n}\n\nli > ul, li > ol {\n    margin-bottom: 0;\n}\n\nli > h1, li > h2, li > h3, li > h4, li > h5, li > h6 {\n    margin-bottom: 0;\n}\n\nblockquote {\n    margin-right: 0px; /* Because nested blockquotes just keep getting narrower */\n}\n\ncode {\n    overflow-x: scroll;\n    display: block;\n    background-color: #F8F8F8;\n    border-radius: 3px;\n    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;\n    white-space: pre;\n}\n@media (prefers-color-scheme: dark) {\n    code {\n        background-color: #808080;\n    }\n}\n\np code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {\n    display: inline;\n}\n\n.resize-container {\n    position: relative;\n    display: inline-block;\n    margin: 0;\n}\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\n/* Provide a slightly darkened or lightened overlay while search is active */\n.searching {\n    background-color: rgba(0, 0, 0, 0.10);\n}\n@media (prefers-color-scheme: dark) {\n    .searching {\n        background: rgba(255, 255, 255, 0.10);\n    }\n}\n\n.resize-container img {\n    display: block;\n    outline: 1px black dashed;\n    outline-offset: 4px;\n    outline-width: 1px;\n}\n@media (prefers-color-scheme: dark) {\n    .resize-container img {\n        outline: 1px white dashed;\n    }\n}\n\n.resize-handle-nw,\n.resize-handle-ne,\n.resize-handle-sw,\n.resize-handle-se {\n    position: absolute;\n    display: block;\n    width: 6px;\n    height: 6px;\n    outline: 1px black solid;\n    background: white;\n    z-index: 999;\n}\n@media (prefers-color-scheme: dark) {\n    .resize-handle-nw,\n    .resize-handle-ne,\n    .resize-handle-sw,\n    .resize-handle-se {\n        outline: 1px white solid;\n        background: black;\n    }\n}\n\n/* A transparent child for each resize-handle that expands the clickable area */\n.resize-handle-nw:after,\n.resize-handle-ne:after,\n.resize-handle-sw:after,\n.resize-handle-se:after {\n  content: \"\";\n  position: absolute;\n  left: -5px;\n  top: -5px;\n  width: 16px;\n  height: 16px;\n}\n\n/* The *-resize cursors do not work, at least in MacCatalyst.\n * Still specifying them below. They default to a pointer instead\n */\n.resize-handle-nw {\n    cursor: nw-resize;\n    top: -8px;\n    left: -7px;\n}\n\n.resize-handle-ne {\n    cursor: ne-resize;\n    top: -8px;\n    right: -7px;\n}\n\n.resize-handle-sw {\n    cursor: sw-resize;\n    bottom: -8px;\n    left: -7px;\n}\n\n.resize-handle-se {\n    cursor: se-resize;\n    bottom: -8px;\n    right: -7px;\n}\n\n.placeholder[placeholder]:before {\n    content: attr(placeholder);\n    position: absolute;\n    color: #ccc;\n}\n\n/* Scoped to :has() rather than styling pre unconditionally, since a code_block's\n   <pre> should only become a positioning context when it's actually carrying the\n   language overlay (highlightCode on, block selected) — not for every code block. */\npre:has(.Markup-code-language-overlay) {\n    position: relative;\n}\n\n.Markup-code-language-overlay {\n    position: absolute;\n    bottom: 100%;\n    right: 0;\n    font-size: 0.75rem;\n    padding: 2px 6px;\n    border: none;\n    border-radius: 4px 4px 0 0;\n    cursor: pointer;\n    opacity: 0.6;\n    color: white;\n    background: var(--Markup-accent-color, blue);\n}\n\n.Markup-code-language-overlay:hover {\n    opacity: 0.9;\n}\n\n/* Applied (setup/index.js, hasRoomAboveOverlay) when the code_block is too close to\n   the top of the view for the label to fit above it — attach to the bottom instead. */\n.Markup-code-language-overlay-below {\n    bottom: auto;\n    top: 100%;\n    border-radius: 0 0 4px 4px;\n}\n\n@media (prefers-color-scheme: dark) {\n  .Markup-code-language-overlay {\n    background: var(--Markup-accent-color, lightblue);\n    color: black;\n  }\n}\n\n/* Classes set by prosemirror-search module, modified for MarkupEditor */\n/* Note the dark and light mode are the same */\n\n.ProseMirror-search-match {\n  background-color: yellow;\n  color: black;\n}\n\n.ProseMirror-active-search-match {\n  background-color: orange;\n  color: black;\n  outline: 1px orangered solid;\n  z-index: 2;\n}");
 
-const sheet$2 = new CSSStyleSheet();sheet$2.replaceSync("/* Spacing at the top */\n/* Note that toolbar-overlay below  is also set to these values */\n\n.Markup-searchbar-showing {\n  height: 38px;\n  top: 76px;\n}\n\n/* The wrapper lets us automatically embed a toolbar and scroll under it */\n.Markup-toolbar-wrapper {\n  margin-right: -12px;    /* Prevent side scroll even when menu fits */\n  height: inherit;\n  overflow-y: scroll;\n  position: relative; \n}\n\n/* We add Markup-prompt-showing to the wrapper to prevent scroll, and remove it when done */\n.Markup-prompt-showing {\n  overflow-y: hidden;\n}\n\n/* Z-indexes in one place */\n\n.body-content { \n  z-index: 1; \n}\n\n.Markup-prompt-overlay { \n  z-index: 2; \n}\n\n.Markup-prompt, .Markup-selection {\n  z-index: 3;\n}\n\n.Markup-searchbar {\n  z-index: 4;\n}\n\n.Markup-toolbar, .Markup-toolbar-more {\n  z-index: 5;\n}\n\n.Markup-toolbar-overlay { \n  z-index: 6; \n}\n\n.Markup-menu-dropdown-menu {\n  z-index: 7;\n}\n\n/* Toolbar, menu item, and dropdown styling */\n\n.Markup-toolbar {\n  display: inline-flex;\n  position: sticky;\n  overflow: visible;\n  width: 100%;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: 0;\n  max-height: calc(var(--Markup-button-size, 28px) + 10px);\n  padding: 2px 8px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-toolbar-hidden {\n  display: none;\n}\n\n.Markup-menuitem {\n  display: inline-block;\n  flex-shrink: 0;  /* Otherwise, the drop-downs with icons shrink */\n  overflow-y: visible;\n  vertical-align: middle;\n  min-width: var(--Markup-button-size, 28px);\n  height: var(--Markup-button-size, 28px);\n  cursor: pointer;\n  margin-right: 4px;\n  border-radius: 4px;\n  color: var(--Markup-accent-color, blue);\n  border: 1px solid var(--Markup-accent-color, blue);\n  background: var(--Markup-button-bg, white);\n  fill: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem {\n    color: var(--Markup-accent-color, lightblue);\n    border: 1px solid var(--Markup-accent-color, lightblue);\n    /* border: 1px solid #4183c4; */\n    background: var(--Markup-button-bg, black);\n    fill: var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menuitem-active {\n  fill: white;\n  color: white;\n  background: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menuitem-disabled {\n  cursor: default;\n  opacity: .3;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem-disabled {\n    opacity: .6;\n  }\n}\n\n.Markup-icon {\n  display: inline-block;\n  width: var(--Markup-button-size, 28px);\n  height: var(--Markup-button-size, 28px);\n  border: 0;\n}\n\n.Markup-icon span {\n  vertical-align: middle;\n}\n\n.Markup-icon svg {\n  width: var(--Markup-button-font-size, 24px);\n  height: var(--Markup-button-font-size, 24px);\n  padding: 2px;\n  border: 0;\n  fill: inherit;\n}\n\n.Markup-menuseparator {\n  display: inline-block;\n  vertical-align: middle;\n  height: var(--Markup-button-size, 28px);\n  border-right: 1px solid var(--Markup-border-color, lightgray);\n  margin-right: 4px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuseparator {\n    border-right: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-menu-disabled .Markup-icon {\n  cursor: default;\n}\n\n.Markup-menu-dropdown, .Markup-menu-dropdown-menu {\n  background: inherit;\n  text-align: left;\n  white-space: nowrap;\n}\n\n.Markup-menu-dropdown span {\n  vertical-align: middle;\n}\n\n.Markup-menu-dropdown-icon span {\n  vertical-align: middle;\n}\n\n.Markup-menu-dropdown-wrap {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 4px;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n.Markup-menu-dropdown-icon-wrap {\n  display: flex;\n  justify-content: space-between;\n  padding-right: 4px;\n  width: 1.8em;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n.Markup-menu-dropdown-icon-wrap-noindicator {\n  display: inline-flex;\n  padding-right: 4px;\n  width: 1em;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n/* For the paragraph style dropdown with a label, make the font smaller */\n.Markup-menu-dropdown {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  font-size: 0.8em;\n  width: inherit;\n  height: inherit;\n  background: inherit;\n  position: absolute;\n}\n\n/* But for the indicator, bump size up to match the icon-style dropdown */\n.Markup-menu-dropdown .Markup-menu-dropdown-indicator {\n  font-size: 1.25em;\n}\n\n.Markup-menu-dropdown-icon {\n  display: inline-flex;\n  justify-content: space-between;\n  font-size: inherit;\n  width: inherit;\n  cursor: pointer;\n  position: absolute;\n}\n\n.Markup-menu-dropdown-indicator {\n  opacity: .6;\n}\n\n.Markup-tooltip .Markup-menu {\n  width: -webkit-fit-content;\n  width: fit-content;\n  white-space: pre;\n}\n\n.Markup-menu-dropdown-menu, .Markup-menu-submenu {\n  position: absolute;\n  background: inherit;\n  padding: 2px;\n  background: inherit;\n  border: 1px solid var(--Markup-border-color, gray);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid var(--Markup-border-color, lightgray);\n  }\n}\n\n.Markup-menu-dropdown-menu {\n  margin-top: calc(1em + 6px);\n  min-width: 4em;\n}\n\n.Markup-menu-dropdown-item {\n  cursor: pointer;\n  padding: 2px 8px 2px 4px;\n}\n\n/* Used to overlfow and ellipsis-truncate text in Dropdown menu items */\n.Markup-menuitem-clipped {\n  white-space: nowrap;  /* Required for text-overflow */\n  overflow-x: hidden;   /* Required for text-overflow */\n  max-width: 30em;\n  text-overflow: ellipsis;\n}\n\n.Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {\n  background: var(--Markup-hover-bg, #f2f2f2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {\n    background: var(--Markup-hover-bg, rgb(80, 80, 80));\n  }\n}\n\n.Markup-menu-dropdown-item p, \n.Markup-menu-dropdown-item h1, \n.Markup-menu-dropdown-item h2, \n.Markup-menu-dropdown-item h3, \n.Markup-menu-dropdown-item h4, \n.Markup-menu-dropdown-item h5, \n.Markup-menu-dropdown-item h6, \n.Markup-menu-dropdown-item pre {\n  padding: 0;\n  margin: 0;\n  min-height: 24px;\n}\n\n.Markup-stylelabel {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  white-space: pre;\n  width: 100%;\n}\n\n.Markup-stylelabel-keymap {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 1.0rem;\n  font-weight: normal;\n  color: gray;\n}\n\n.Markup-menu-submenu-wrap:hover .Markup-menu-submenu, .Markup-menu-submenu-wrap-active .Markup-menu-submenu {\n  display: block;\n}\n\n.Markup-menu-submenu-wrap {\n  position: relative;\n  margin-right: -4px;\n  background: inherit;\n}\n\n.Markup-menu-submenu {\n  display: none;\n  min-width: 4em;\n  left: 100%;\n  top: -5px;\n  max-height: 80vh;\n  overflow-y: auto;\n  /* background cannot be inherited because of hover highlighting in dropdown */\n  background: var(--Markup-button-bg, white);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-submenu {\n    /* background cannot be inherited because of hover highlighting in dropdown */\n    background: var(--Markup-button-bg, black);\n  }\n}\n\n.Markup-menu-submenu-label:after {\n  content: \"\";\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 4px solid currentColor;\n  opacity: .6;\n  position: absolute;\n  right: 4px;\n  top: calc(50% - 4px);\n}\n\n.Markup-selection {\n  position: absolute;\n  border: 1px solid var(--Markup-accent-color, blue);\n  background: transparent;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-selection {\n    border: 1px solid var(--Markup-accent-color, lightblue);\n  }\n}\n\n/* Toolbar-more styling */\n\n.Markup-toolbar-more {\n  display: inline-flex;\n  position: sticky;\n  overflow: visible;\n  width: 100%;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: calc(var(--Markup-button-size, 28px) + 7px);\n  max-height: calc(var(--Markup-button-size, 28px) + 10px);\n  padding: 2px 8px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar-more {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n/* Searchbar styling */\n\n.Markup-searchbar {\n  display: inline-block;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  position: sticky;\n  top: calc(var(--Markup-button-size, 28px) + 7px);\n  width: 100%;\n  line-height: 30px;\n  height: 37px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-searchbar {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-searchbar input {\n  appearance: none; /* Otherwise, in Safari/WebKit, the height is small and fixed */\n  position: relative;\n  font-size: 18px;\n  line-height: 30px;\n  height: 30px;\n  width: calc(100% - 128px);\n  margin: 0 8px;\n  padding: 0 4px;\n  outline: none;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid lightgray;\n  border-radius: 6px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-searchbar input {\n    color: rgb(250, 249, 246);\n    background: rgb(40, 40, 43);\n    border: 1px solid gray;\n  }\n}\n\n.Markup-searchbar .Markup-searchbar-status {\n  position: absolute;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  white-space: nowrap;\n  font-size: 12px;\n  overflow-x: visible;\n  height: 28px;\n  top: 5px;\n  left: calc(100% - 13em);\n  width: 1px;\n  color: gray;\n  user-select: none;\n}\n\n/* Dialog/prompt styling for insert/edit actions */\n\n.Markup-prompt-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt-overlay {\n    background-color: rgba(255, 255, 255, 0.2);\n  }\n}\n\n.Markup-toolbar-overlay {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.1);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar-overlay {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.Markup-toolbar-overlay.Markup-searchbar-hidden {\n  height: 38px;\n}\n\n.Markup-toolbar-overlay.Markup-searchbar-showing {\n  height: 76px;\n}\n\n.Markup-prompt {\n  margin: 0;\n  font-size: 18px;\n  background: white;\n  padding: 8px;\n  border: 1px solid silver;\n  position: absolute;\n  border-radius: 3px;\n  box-shadow: -.5px 2px 5px rgba(0, 0, 0, 0.2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt {\n    background: black;\n    box-shadow: -.5px 2px 5px rgba(255, 255, 255, 0.8);\n  }\n}\n\n.Markup-prompt-link {\n  height: 96px;\n  width: 300px;\n}\n\n.Markup-prompt-image {\n  height: 130px;\n  width: 300px;\n}\n\n.Markup-prompt-language {\n  height: 96px;\n  width: 300px;\n}\n\n.Markup-prompt img {\n  display: inline-block;\n  vertical-align: middle;\n  min-width: 28px;\n  height: 28px;\n  margin-right: 4px;\n}\n\n.Markup-prompt p {\n  margin: 0 0 4px 0;\n  font-weight: normal;\n  color: black;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt p {\n    color: white;\n  }\n}\n\n.Markup-prompt input[type=\"text\"] {\n  font-size: 100%;\n  line-height: 28px;\n  margin-top: 2px;\n  padding: 1px 4px;\n  width: 100%;\n  appearance: none;\n  background: #eee;\n  outline: none;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid lightgray;\n  border-radius: 6px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt input[type=\"text\"] {\n    color: rgb(250, 249, 246);\n    background: rgb(40, 40, 43);\n    border: 1px solid gray;\n  }\n}\n\n.Markup-prompt input.invalid {\n  color: red;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt input.invalid {\n    color: pink;\n  }\n}\n\n.Markup-prompt-buttons {\n  display: flex;\n  vertical-align: middle;\n  justify-content: space-between;\n  justify-items: center;\n  line-height: 28px;\n  height: 28px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.Markup-prompt-buttongroup {\n  flex-shrink: 0;\n}\n\n.Markup-prompt-buttons img {\n  aspect-ratio: auto;\n  height: auto;\n  object-fit: contain;\n}\n\n.Markup-prompt-buttons .Markup-menuitem {\n  display: inline-flex;\n  padding-right: 4px;\n  padding-left: 4px;\n}\n\n/* The buttongroup contains OK and Cancel menuitems on the right */\n.Markup-prompt-buttongroup .Markup-menuitem {\n  margin-right: 0;\n  margin-left: 4px;\n}\n\n/* .Markup-menu-tablesizer is a specialized submenu */\n.Markup-menu-tablesizer {\n  display: none;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: 18px;\n  row-gap: 1px;\n  column-gap: 1px;\n  padding: 0;\n  left: 100%;\n  top: -5px;\n  /* background cannot be inherited because of hover highlighting in dropdown */\n  background: var(--Markup-button-bg, white);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer {\n    /* background cannot be inherited because of hover highlighting in dropdown */\n    background: var(--Markup-button-bg, black);\n  }\n}\n\n.Markup-menu-submenu-wrap:hover .Markup-menu-tablesizer, .Markup-menu-submenu-wrap-active .Markup-menu-tablesizer {\n  display: grid;\n}\n\n.Markup-menu-dropdown-menu, .Markup-menu-tablesizer {\n  position: absolute;\n  background: inherit;\n  padding: 2px;\n  background: inherit;\n  border: 1px solid var(--Markup-border-color, gray);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid var(--Markup-border-color, lightgray);\n  }\n}\n\n.Markup-menu-tablesizer .Markup-menu-dropdown-item {\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid var(--Markup-accent-color, blue);\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  font-size: 13px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer .Markup-menu-dropdown-item {\n    border: 1px solid var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menu-tablesizer .Markup-menuitem-active {\n    height: 13px;\n    padding-top: 3px;\n    fill: black;\n    color: black;\n    background: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: var(--Markup-accent-color, lightblue);\n  }\n}");
+const sheet$2 = new CSSStyleSheet();sheet$2.replaceSync("/* Spacing at the top */\n/* Note that toolbar-overlay below  is also set to these values */\n\n.Markup-searchbar-showing {\n  height: 38px;\n  top: 76px;\n}\n\n/* The wrapper lets us automatically embed a toolbar and scroll under it */\n.Markup-toolbar-wrapper {\n  margin-right: -12px;    /* Prevent side scroll even when menu fits */\n  height: inherit;\n  overflow-y: scroll;\n  position: relative; \n}\n\n/* We add Markup-prompt-showing to the wrapper to prevent scroll, and remove it when done */\n.Markup-prompt-showing {\n  overflow-y: hidden;\n}\n\n/* Z-indexes in one place */\n\n.body-content { \n  z-index: 1; \n}\n\n.Markup-prompt-overlay { \n  z-index: 2; \n}\n\n.Markup-prompt, .Markup-selection {\n  z-index: 3;\n}\n\n.Markup-searchbar {\n  z-index: 4;\n}\n\n.Markup-toolbar, .Markup-toolbar-more {\n  z-index: 5;\n}\n\n.Markup-toolbar-overlay { \n  z-index: 6; \n}\n\n.Markup-menu-dropdown-menu {\n  z-index: 7;\n}\n\n/* Toolbar, menu item, and dropdown styling */\n\n.Markup-toolbar {\n  display: inline-flex;\n  position: sticky;\n  overflow: visible;\n  width: 100%;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: 0;\n  max-height: calc(var(--Markup-button-size, 28px) + 10px);\n  padding: 2px 8px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-toolbar-hidden {\n  display: none;\n}\n\n.Markup-menuitem {\n  display: inline-block;\n  flex-shrink: 0;  /* Otherwise, the drop-downs with icons shrink */\n  overflow-y: visible;\n  vertical-align: middle;\n  min-width: var(--Markup-button-size, 28px);\n  height: var(--Markup-button-size, 28px);\n  cursor: pointer;\n  margin-right: 4px;\n  border-radius: 4px;\n  color: var(--Markup-accent-color, blue);\n  border: 1px solid var(--Markup-accent-color, blue);\n  background: var(--Markup-button-bg, white);\n  fill: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem {\n    color: var(--Markup-accent-color, lightblue);\n    border: 1px solid var(--Markup-accent-color, lightblue);\n    /* border: 1px solid #4183c4; */\n    background: var(--Markup-button-bg, black);\n    fill: var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menuitem-active {\n  fill: white;\n  color: white;\n  background: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menuitem-disabled {\n  cursor: default;\n  opacity: .3;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem-disabled {\n    opacity: .6;\n  }\n}\n\n.Markup-icon {\n  display: inline-block;\n  width: var(--Markup-button-size, 28px);\n  height: var(--Markup-button-size, 28px);\n  border: 0;\n}\n\n.Markup-icon span {\n  vertical-align: middle;\n}\n\n.Markup-icon svg {\n  width: var(--Markup-button-font-size, 24px);\n  height: var(--Markup-button-font-size, 24px);\n  padding: 2px;\n  border: 0;\n  fill: inherit;\n}\n\n.Markup-menuseparator {\n  display: inline-block;\n  vertical-align: middle;\n  height: var(--Markup-button-size, 28px);\n  border-right: 1px solid var(--Markup-border-color, lightgray);\n  margin-right: 4px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuseparator {\n    border-right: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-menu-disabled .Markup-icon {\n  cursor: default;\n}\n\n.Markup-menu-dropdown, .Markup-menu-dropdown-menu {\n  background: inherit;\n  text-align: left;\n  white-space: nowrap;\n}\n\n.Markup-menu-dropdown span {\n  vertical-align: middle;\n}\n\n.Markup-menu-dropdown-icon span {\n  vertical-align: middle;\n}\n\n.Markup-menu-dropdown-wrap {\n  display: flex;\n  justify-content: space-between;\n  padding: 0 4px;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n.Markup-menu-dropdown-icon-wrap {\n  display: flex;\n  justify-content: space-between;\n  padding-right: 4px;\n  width: 1.8em;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n.Markup-menu-dropdown-icon-wrap-noindicator {\n  display: inline-flex;\n  padding-right: 4px;\n  width: 1em;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n/* For the paragraph style dropdown with a label, make the font smaller */\n.Markup-menu-dropdown {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  font-size: 0.8em;\n  width: inherit;\n  height: inherit;\n  background: inherit;\n  position: absolute;\n}\n\n/* But for the indicator, bump size up to match the icon-style dropdown */\n.Markup-menu-dropdown .Markup-menu-dropdown-indicator {\n  font-size: 1.25em;\n}\n\n.Markup-menu-dropdown-icon {\n  display: inline-flex;\n  justify-content: space-between;\n  font-size: inherit;\n  width: inherit;\n  cursor: pointer;\n  position: absolute;\n}\n\n.Markup-menu-dropdown-indicator {\n  opacity: .6;\n}\n\n.Markup-tooltip .Markup-menu {\n  width: -webkit-fit-content;\n  width: fit-content;\n  white-space: pre;\n}\n\n.Markup-menu-dropdown-menu, .Markup-menu-submenu {\n  position: absolute;\n  background: inherit;\n  padding: 2px;\n  background: inherit;\n  border: 1px solid var(--Markup-border-color, gray);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid var(--Markup-border-color, lightgray);\n  }\n}\n\n.Markup-menu-dropdown-menu {\n  margin-top: calc(1em + 6px);\n  min-width: 4em;\n}\n\n.Markup-menu-dropdown-item {\n  cursor: pointer;\n  padding: 2px 8px 2px 4px;\n}\n\n.Markup-menu-dropdown-separator {\n  border-top: 1px solid var(--Markup-border-color, lightgray);\n  margin: 4px 0;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-separator {\n    border-top: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n/* Used to overlfow and ellipsis-truncate text in Dropdown menu items */\n.Markup-menuitem-clipped {\n  white-space: nowrap;  /* Required for text-overflow */\n  overflow-x: hidden;   /* Required for text-overflow */\n  max-width: 30em;\n  text-overflow: ellipsis;\n}\n\n.Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {\n  background: var(--Markup-hover-bg, #f2f2f2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {\n    background: var(--Markup-hover-bg, rgb(80, 80, 80));\n  }\n}\n\n.Markup-menu-dropdown-item p, \n.Markup-menu-dropdown-item h1, \n.Markup-menu-dropdown-item h2, \n.Markup-menu-dropdown-item h3, \n.Markup-menu-dropdown-item h4, \n.Markup-menu-dropdown-item h5, \n.Markup-menu-dropdown-item h6, \n.Markup-menu-dropdown-item pre {\n  padding: 0;\n  margin: 0;\n  min-height: 24px;\n}\n\n.Markup-stylelabel {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  white-space: pre;\n  width: 100%;\n}\n\n.Markup-stylelabel-keymap {\n  display: flex;\n  justify-content: flex-end;\n  font-size: 1.0rem;\n  font-weight: normal;\n  color: gray;\n}\n\n.Markup-menu-submenu-wrap:hover .Markup-menu-submenu, .Markup-menu-submenu-wrap-active .Markup-menu-submenu {\n  display: block;\n}\n\n.Markup-menu-submenu-wrap {\n  position: relative;\n  margin-right: -4px;\n  background: inherit;\n}\n\n.Markup-menu-submenu {\n  display: none;\n  min-width: 4em;\n  left: 100%;\n  top: -5px;\n  max-height: 80vh;\n  overflow-y: auto;\n  /* background cannot be inherited because of hover highlighting in dropdown */\n  background: var(--Markup-button-bg, white);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-submenu {\n    /* background cannot be inherited because of hover highlighting in dropdown */\n    background: var(--Markup-button-bg, black);\n  }\n}\n\n.Markup-menu-submenu-label:after {\n  content: \"\";\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 4px solid currentColor;\n  opacity: .6;\n  position: absolute;\n  right: 4px;\n  top: calc(50% - 4px);\n}\n\n.Markup-selection {\n  position: absolute;\n  border: 1px solid var(--Markup-accent-color, blue);\n  background: transparent;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-selection {\n    border: 1px solid var(--Markup-accent-color, lightblue);\n  }\n}\n\n/* Toolbar-more styling */\n\n.Markup-toolbar-more {\n  display: inline-flex;\n  position: sticky;\n  overflow: visible;\n  width: 100%;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: calc(var(--Markup-button-size, 28px) + 7px);\n  max-height: calc(var(--Markup-button-size, 28px) + 10px);\n  padding: 2px 8px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar-more {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n/* Searchbar styling */\n\n.Markup-searchbar {\n  display: inline-block;\n  font-size: var(--Markup-button-font-size, 24px);\n  vertical-align: middle;\n  position: sticky;\n  top: calc(var(--Markup-button-size, 28px) + 7px);\n  width: 100%;\n  line-height: 30px;\n  height: 37px;\n  color: var(--Markup-accent-color, blue);\n  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));\n  border-bottom: 1px solid var(--Markup-border-color, lightgray);\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-searchbar {\n    color: var(--Markup-accent-color, lightblue);\n    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));\n    border-bottom: 1px solid var(--Markup-border-color, gray);\n  }\n}\n\n.Markup-searchbar input {\n  appearance: none; /* Otherwise, in Safari/WebKit, the height is small and fixed */\n  position: relative;\n  font-size: 18px;\n  line-height: 30px;\n  height: 30px;\n  width: calc(100% - 128px);\n  margin: 0 8px;\n  padding: 0 4px;\n  outline: none;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid lightgray;\n  border-radius: 6px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-searchbar input {\n    color: rgb(250, 249, 246);\n    background: rgb(40, 40, 43);\n    border: 1px solid gray;\n  }\n}\n\n.Markup-searchbar .Markup-searchbar-status {\n  position: absolute;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  white-space: nowrap;\n  font-size: 12px;\n  overflow-x: visible;\n  height: 28px;\n  top: 5px;\n  left: calc(100% - 13em);\n  width: 1px;\n  color: gray;\n  user-select: none;\n}\n\n/* Dialog/prompt styling for insert/edit actions */\n\n.Markup-prompt-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt-overlay {\n    background-color: rgba(255, 255, 255, 0.2);\n  }\n}\n\n.Markup-toolbar-overlay {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.1);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar-overlay {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n.Markup-toolbar-overlay.Markup-searchbar-hidden {\n  height: 38px;\n}\n\n.Markup-toolbar-overlay.Markup-searchbar-showing {\n  height: 76px;\n}\n\n.Markup-prompt {\n  margin: 0;\n  font-size: 18px;\n  background: white;\n  padding: 8px;\n  border: 1px solid silver;\n  position: absolute;\n  border-radius: 3px;\n  box-shadow: -.5px 2px 5px rgba(0, 0, 0, 0.2);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt {\n    background: black;\n    box-shadow: -.5px 2px 5px rgba(255, 255, 255, 0.8);\n  }\n}\n\n.Markup-prompt-link {\n  height: 96px;\n  width: 300px;\n}\n\n.Markup-prompt-image {\n  height: 130px;\n  width: 300px;\n}\n\n.Markup-prompt-language {\n  height: 96px;\n  width: 300px;\n}\n\n.Markup-prompt img {\n  display: inline-block;\n  vertical-align: middle;\n  min-width: 28px;\n  height: 28px;\n  margin-right: 4px;\n}\n\n.Markup-prompt p {\n  margin: 0 0 4px 0;\n  font-weight: normal;\n  color: black;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt p {\n    color: white;\n  }\n}\n\n.Markup-prompt input[type=\"text\"] {\n  font-size: 100%;\n  line-height: 28px;\n  margin-top: 2px;\n  padding: 1px 4px;\n  width: 100%;\n  appearance: none;\n  background: #eee;\n  outline: none;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid lightgray;\n  border-radius: 6px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt input[type=\"text\"] {\n    color: rgb(250, 249, 246);\n    background: rgb(40, 40, 43);\n    border: 1px solid gray;\n  }\n}\n\n.Markup-prompt input.invalid {\n  color: red;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-prompt input.invalid {\n    color: pink;\n  }\n}\n\n.Markup-prompt-buttons {\n  display: flex;\n  vertical-align: middle;\n  justify-content: space-between;\n  justify-items: center;\n  line-height: 28px;\n  height: 28px;\n  margin-top: 8px;\n  margin-bottom: 8px;\n}\n\n.Markup-prompt-buttongroup {\n  flex-shrink: 0;\n}\n\n.Markup-prompt-buttons img {\n  aspect-ratio: auto;\n  height: auto;\n  object-fit: contain;\n}\n\n.Markup-prompt-buttons .Markup-menuitem {\n  display: inline-flex;\n  padding-right: 4px;\n  padding-left: 4px;\n}\n\n/* The buttongroup contains OK and Cancel menuitems on the right */\n.Markup-prompt-buttongroup .Markup-menuitem {\n  margin-right: 0;\n  margin-left: 4px;\n}\n\n/* .Markup-menu-tablesizer is a specialized submenu */\n.Markup-menu-tablesizer {\n  display: none;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: 18px;\n  row-gap: 1px;\n  column-gap: 1px;\n  padding: 0;\n  left: 100%;\n  top: -5px;\n  /* background cannot be inherited because of hover highlighting in dropdown */\n  background: var(--Markup-button-bg, white);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer {\n    /* background cannot be inherited because of hover highlighting in dropdown */\n    background: var(--Markup-button-bg, black);\n  }\n}\n\n.Markup-menu-submenu-wrap:hover .Markup-menu-tablesizer, .Markup-menu-submenu-wrap-active .Markup-menu-tablesizer {\n  display: grid;\n}\n\n.Markup-menu-dropdown-menu, .Markup-menu-tablesizer {\n  position: absolute;\n  background: inherit;\n  padding: 2px;\n  background: inherit;\n  border: 1px solid var(--Markup-border-color, gray);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid var(--Markup-border-color, lightgray);\n  }\n}\n\n.Markup-menu-tablesizer .Markup-menu-dropdown-item {\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n  border: 1px solid var(--Markup-accent-color, blue);\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  font-size: 13px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer .Markup-menu-dropdown-item {\n    border: 1px solid var(--Markup-accent-color, lightblue);\n  }\n}\n\n.Markup-menu-tablesizer .Markup-menuitem-active {\n    height: 13px;\n    padding-top: 3px;\n    fill: black;\n    color: black;\n    background: var(--Markup-accent-color, blue);\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: var(--Markup-accent-color, lightblue);\n  }\n}");
 
 const sheet$1 = new CSSStyleSheet();sheet$1.replaceSync("pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em\n}\ncode.hljs {\n  padding: 3px 5px\n}\n/*!\n  Theme: GitHub\n  Description: Light theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-light\n  Current colors taken from GitHub's CSS\n*/\n.hljs {\n  color: #24292e;\n  background: #ffffff\n}\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n  /* prettylights-syntax-keyword */\n  color: #d73a49\n}\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n  /* prettylights-syntax-entity */\n  color: #6f42c1\n}\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n  /* prettylights-syntax-constant */\n  color: #005cc5\n}\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n  /* prettylights-syntax-string */\n  color: #032f62\n}\n.hljs-built_in,\n.hljs-symbol {\n  /* prettylights-syntax-variable */\n  color: #e36209\n}\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n  /* prettylights-syntax-comment */\n  color: #6a737d\n}\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n  /* prettylights-syntax-entity-tag */\n  color: #22863a\n}\n.hljs-subst {\n  /* prettylights-syntax-storage-modifier-import */\n  color: #24292e\n}\n.hljs-section {\n  /* prettylights-syntax-markup-heading */\n  color: #005cc5;\n  font-weight: bold\n}\n.hljs-bullet {\n  /* prettylights-syntax-markup-list */\n  color: #735c0f\n}\n.hljs-emphasis {\n  /* prettylights-syntax-markup-italic */\n  color: #24292e;\n  font-style: italic\n}\n.hljs-strong {\n  /* prettylights-syntax-markup-bold */\n  color: #24292e;\n  font-weight: bold\n}\n.hljs-addition {\n  /* prettylights-syntax-markup-inserted */\n  color: #22863a;\n  background-color: #f0fff4\n}\n.hljs-deletion {\n  /* prettylights-syntax-markup-deleted */\n  color: #b31d28;\n  background-color: #ffeef0\n}\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n  /* purposely ignored */\n  \n}");
 
@@ -33796,7 +33796,7 @@ function codeBlockAtSelection(state) {
  * `state`'s selection, or null if the selection isn't in a code_block. `pos`
  * is the position just inside the code_block's content, where a widget
  * Decoration for the overlay should be anchored. `label` is "Language:
- * <Capitalized name>" or "Language: None" — display-only, the underlying
+ * <lowercase name>" or "Language: none" — display-only, the underlying
  * `language` attribute value is untouched.
  *
  * @ignore
@@ -33807,7 +33807,7 @@ function codeLanguageOverlayInfo(state) {
     const found = codeBlockAtSelection(state);
     if (!found) return null
     const language = found.node.attrs.language;
-    const label = language ? `Language: ${language.charAt(0).toUpperCase()}${language.slice(1)}` : 'Language: None';
+    const label = language ? `Language: ${language.toLowerCase()}` : 'Language: none';
     return { pos: found.pos + 1, label }
 }
 
@@ -37683,7 +37683,7 @@ class Dropdown {
    */
   render(view) {
     let options = this.options;
-    let content = renderDropdownItems(this.content, view);
+    let content = renderDropdownItems([this.content], view);
     let win = view.dom.ownerDocument.defaultView || window;
     let indicator = crelt("span", "\u25BE");
     setClass(indicator, this.prefix + "-dropdown-indicator", true);
@@ -37853,7 +37853,7 @@ class DropdownSubmenu {
   */
   render(view) {
     let options = this.options;
-    let items = renderDropdownItems(this.content, view);
+    let items = renderDropdownItems([this.content], view);
     let win = view.dom.ownerDocument.defaultView || window;
     let label = crelt("div", { class: this.prefix + "-submenu-label" }, translate(view, this.options.label || ""));
     let submenu = crelt("div", { class: this.prefix + "-submenu" }, items.dom);
@@ -38597,18 +38597,6 @@ class LanguageDialogItem extends DialogItem {
 
 }
 
-/**
- * Capitalize just the first character of `text`, leaving the rest as-is
- * (e.g. "html" -> "Html", "weirdLanguage" -> "WeirdLanguage"). Display-only —
- * the underlying language value stays exactly as entered/stored.
- *
- * @param {string} text
- * @returns {string}
- */
-function capitalized(text) {
-  return text ? text.charAt(0).toUpperCase() + text.slice(1) : text
-}
-
 /**
  * Find the code_block containing `state`'s selection and return its `language`
  * attribute, or null if the selection isn't in a code_block or the block has
@@ -38657,15 +38645,24 @@ class CodeLanguageSubmenu {
   }
 
   buildItems(view) {
-    let items = [];
-    items.push(cmdItem(() => { this.setLanguage(view, null); return true }, {
-      label: 'Language: None',
+    let noneItem = cmdItem(() => { this.setLanguage(view, null); return true }, {
+      label: 'Language: none',
       enable: () => true,
       active: (state) => currentCodeLanguage(state) == null
-    }));
+    });
+    let dialogItem = cmdItem(() => {
+      this.languageDialog.open(view, currentCodeLanguage(view.state) ?? '', (entered) => {
+        this.setLanguage(view, entered ? entered : null);
+      });
+      return true
+    }, {
+      label: 'Language...',
+      enable: () => true
+    });
+    let languageItems = [];
     for (let language of presentCodeLanguages(view.state.doc)) {
-      items.push(cmdItem(() => { this.setLanguage(view, language); return true }, {
-        label: `Language: ${capitalized(language)}`,
+      languageItems.push(cmdItem(() => { this.setLanguage(view, language); return true }, {
+        label: language.toLowerCase(),
         enable: () => true,
         // presentCodeLanguages lowercases its results for dedup, but the selected block's
         // own attribute value keeps whatever case was originally typed — compare case-
@@ -38673,16 +38670,9 @@ class CodeLanguageSubmenu {
         active: (state) => (currentCodeLanguage(state) ?? '').toLowerCase() === language
       }));
     }
-    items.push(cmdItem(() => {
-      this.languageDialog.open(view, currentCodeLanguage(view.state) ?? '', (entered) => {
-        this.setLanguage(view, entered ? entered : null);
-      });
-      return true
-    }, {
-      label: 'Language...',
-      enable: () => true
-    }));
-    return items
+    // Grouped so renderDropdownItems provides separators. Safe to pass languageItems
+    // even when empty — renderDropdownItems drops structurally empty groups.
+    return [[noneItem, dialogItem], languageItems]
   }
 
   render(view) {
@@ -39143,7 +39133,7 @@ class TableCreateSubmenu {
   render(view) {
     let resetSize = this.resetSize.bind(this);
     let options = this.options;
-    let items = renderDropdownItems(this.content, view);
+    let items = renderDropdownItems([this.content], view);
     this.itemsUpdate = items.update;  // Track the update method so we can update as the mouse is over items
     let win = view.dom.ownerDocument.defaultView || window;
     let label = crelt("div", { class: this.prefix + "-submenu-label" }, translate(view, this.options.label || ""));
@@ -39500,6 +39490,17 @@ function separator() {
     return crelt("span", { class: prefix + "-menuseparator" });
 }
 
+/**
+ * Return a div for a separator between groups of MenuItems in a dropdown-item list
+ * (vertical layout) — distinct from `separator()`, which is styled for the toolbar
+ * bar's horizontal layout.
+ *
+ * @private
+ */
+function dropdownSeparator() {
+    return crelt("div", { class: prefix + "-menu-dropdown-separator" });
+}
+
 /**
  * Return whether the selection in state is within a mark of type `markType`.
  * @private
@@ -39641,19 +39642,55 @@ function renderGroupedFit(view, content, wrapAtIndex) {
 }
 
 /**
- * Render the items in a Dropdown in the view.
- * 
- * @param {Array<MenuItem>} items The content to be rendered in a Dropdown
- * @param {EditorView} view       The EditorView to render the items in 
- * @returns {object}  An object containing the DOM for the Dropdown and an update function to display it
+ * Render the items in a Dropdown in the view, as a list of dropdown-item rows.
+ *
+ * `groups` is an array of arrays: each sub-array is a group of MenuItems, and a
+ * separator row is inserted between adjacent groups that both have content for
+ * the current state (auto-hidden otherwise). Mirrors `renderGrouped`'s toolbar-bar
+ * behavior, but keeps the dropdown-item row wrapper/CSS instead of switching to
+ * the toolbar's menuitem span.
+ *
+ * @param {Array<Array<MenuItem>>} groups The groups of MenuItems to be rendered in a Dropdown
+ * @param {EditorView} view              The EditorView to render the items in
+ * @returns {object}  An object containing the DOM (items and separators, in display order) for the Dropdown and an update function to display it
  */
-function renderDropdownItems(items, view) {
-    let rendered = [], updates = [];
-    for (let i = 0; i < items.length; i++) {
-        let { dom, update } = items[i].render(view);
-        rendered.push(crelt("div", { class: prefix + "-menu-dropdown-item" }, dom));
-        updates.push(update);
-    }    return { dom: rendered, update: combineUpdates(updates, rendered) };
+function renderDropdownItems(groups, view) {
+    // Drop structurally empty groups (e.g. no present languages) up front, so a
+    // separator is never placed next to a group that was never going to render
+    // anything — update() below only knows how to auto-hide a separator when the
+    // adjacent group rendered items that are merely inactive/disabled for the
+    // current state, not when the group had zero items to begin with.
+    let nonEmptyGroups = groups.filter(items => items.length > 0);
+    let rendered = [], updates = [], separators = [];
+    for (let i = 0; i < nonEmptyGroups.length; i++) {
+        let items = nonEmptyGroups[i], localUpdates = [], localNodes = [];
+        for (let j = 0; j < items.length; j++) {
+            let { dom, update } = items[j].render(view);
+            let div = crelt("div", { class: prefix + "-menu-dropdown-item" }, dom);
+            rendered.push(div);
+            localNodes.push(div);
+            localUpdates.push(update);
+        }
+        updates.push(combineUpdates(localUpdates, localNodes));
+        if (i < nonEmptyGroups.length - 1) {
+            let sep = dropdownSeparator();
+            rendered.push(sep);
+            separators.push(sep);
+        }
+    }
+    function update(state) {
+        let something = false, needSep = false;
+        for (let i = 0; i < updates.length; i++) {
+            let hasContent = updates[i](state);
+            if (i)
+                separators[i - 1].style.display = needSep && hasContent ? "" : "none";
+            needSep = hasContent;
+            if (hasContent)
+                something = true;
+        }
+        return something;
+    }
+    return { dom: rendered, update };
 }
 
 function combineUpdates(updates, nodes) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupeditor",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "description": "A web component and API for WYSIWYG HTML editing.",
   "keywords": [
     "wysiwyg",

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 */