markupeditor 0.9.13 → 0.9.15

package/config/behaviorconfig.json

@@ -2,6 +2,5 @@
     "focusAfterLoad": true,
     "selectImage": false,
     "insertLink": false,
-    "insertImage": false,
-    "showStyle": true
+    "insertImage": false
 }

package/config/keymapconfig.json

@@ -1,6 +1,6 @@
 {
     "undo": "Mod-z",
-    "redo": "Shift-Mod-z",
+    "redo": "Mod-Shift-z",
     "link": ["Mod-K", "Mod-k"],
     "p": "Ctrl-Shift-0",
     "h1": "Ctrl-Shift-1",
@@ -11,8 +11,8 @@
     "h6": "Ctrl-Shift-6",
     "bullet": ["Ctrl-U", "Ctrl-u"],
     "number": ["Ctrl-O", "Ctrl-o"],
-    "indent": ["Mod-]", "Ctrl-q"],
-    "outdent": ["Mod-[", "Shift-Ctrl-q"],
+    "indent": ["Mod->", "Mod-]"],
+    "outdent": ["Mod-<", "Mod-["],
     "bold": ["Mod-B", "Mod-b"],
     "italic": ["Mod-I", "Mod-i"],
     "underline": ["Mod-U", "Mod-u"],

package/config/toolbarconfig.json

@@ -16,6 +16,11 @@
         "formatBar": 50,
         "search": 60
     },
+    "menus": {
+        "styleName": true,
+        "tableHeader": true,
+        "tableBorder": true
+    },
     "insertBar": {
         "link": true,
         "image": true,
@@ -44,10 +49,6 @@
         "list": true,
         "dent": true
     },
-    "tableMenu": {
-        "header": true,
-        "border": true
-    },
     "help": {
         "style": "Set paragraph style",
         "bold": "Toggle bold",
@@ -75,6 +76,15 @@
         "prepend": null,
         "append": null
     },
+    "appearance": {
+        "accentColor": { "light": "blue", "dark": "lightblue" },
+        "toolbarBg":   { "light": "rgba(250, 249, 246, 0.95)", "dark": "rgba(40, 40, 43, 0.9)" },
+        "buttonBg":    { "light": "white", "dark": "black" },
+        "borderColor": { "light": "lightgray", "dark": "gray" },
+        "hoverBg":     { "light": "#f2f2f2", "dark": "rgb(80, 80, 80)" },
+        "buttonSize": "28px",
+        "buttonFontSize": "24px"
+    },
     "icons": {
         "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"/></svg>",
         "redo": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"/></svg>",

package/dist/markup-editor.js

@@ -2,7 +2,7 @@ const sheet$2 = new CSSStyleSheet();sheet$2.replaceSync("/**\n The CSS here was
 
 const sheet$1 = new CSSStyleSheet();sheet$1.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\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/* 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 = new CSSStyleSheet();sheet.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: 24px;\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: 0;\n  max-height: 38px;\n  padding: 2px 8px;\n  color: blue;\n  background: rgba(250, 249, 246, 0.95);\n  border-bottom: 1px solid lightgray;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-toolbar {\n    color: rgb(250, 249, 246);\n    background: rgba(40, 40, 43, 0.9);\n    border-bottom: 1px solid gray;\n  }\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: 28px;\n  height: 28px;\n  cursor: pointer;\n  margin-right: 4px;\n  border-radius: 4px;\n  color: blue;\n  border: 1px solid blue;\n  background: white;\n  fill: blue;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem {\n    color: lightblue;\n    border: 1px solid lightblue; \n    /* border: 1px solid #4183c4; */\n    background: black;\n    fill: lightblue;\n  }\n}\n\n.Markup-menuitem-active {\n  fill: white;\n  color: white;\n  background: blue;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: 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: 28px;\n  height: 28px;\n  border: 0;\n}\n\n.Markup-icon span {\n  vertical-align: middle;\n}\n\n.Markup-icon svg {\n  padding: 2px;\n  border: 0;\n  fill: inherit;\n}\n\n.Markup-menuseparator {\n  display: inline-block;\n  vertical-align: middle;\n  height: 28px;\n  border-right: 1px solid lightgray;\n  margin-right: 4px;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menuseparator {\n    border-right: 1px solid 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 gray;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid 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: #f2f2f2;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {\n    background: 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  /* background cannot be inherited because of hover highlighting in dropdown */\n  background: 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: 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 blue;\n  background: transparent;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-selection {\n    border: 1px solid 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: 24px;\n  vertical-align: middle;\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n  top: 35px;\n  max-height: 38px;\n  padding: 2px 8px;\n  color: blue;\n  background: rgba(250, 249, 246, 0.95);\n  border-bottom: 1px solid 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: rgb(250, 249, 246);\n    background: rgba(40, 40, 43, 0.9);\n    border-bottom: 1px solid gray;\n  }\n}\n\n/* Searchbar styling */\n\n.Markup-searchbar {\n  display: inline-block;\n  font-size: 24px;\n  vertical-align: middle;\n  position: sticky;\n  top: 35px;\n  width: 100%;\n  line-height: 30px;\n  height: 37px;\n  color: blue;\n  background: rgba(250, 249, 246, 0.95);\n  border-bottom: 1px solid 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: rgb(250, 249, 246);\n    background: rgba(40, 40, 43, 0.9);\n    border-bottom: 1px solid 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 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: 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: 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 gray;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-dropdown-menu, .Markup-menu-submenu {\n    border: 1px solid 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 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 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: blue;\n}\n@media (prefers-color-scheme: dark) {\n  .Markup-menu-tablesizer .Markup-menuitem-active {\n      fill: black;\n      color: black;\n      background: lightblue;\n  }\n}");
+const sheet = new CSSStyleSheet();sheet.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  /* 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 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}");
 
 /**
  * The registry used to hold delegates, configs, handlers, and
@@ -19574,6 +19574,11 @@ var ordering = {
 	formatBar: 50,
 	search: 60
 };
+var menus = {
+	styleName: true,
+	tableHeader: true,
+	tableBorder: true
+};
 var insertBar = {
 	link: true,
 	image: true,
@@ -19602,10 +19607,6 @@ var styleBar = {
 	list: true,
 	dent: true
 };
-var tableMenu = {
-	header: true,
-	border: true
-};
 var help = {
 	style: "Set paragraph style",
 	bold: "Toggle bold",
@@ -19633,6 +19634,30 @@ var augmentation = {
 	prepend: null,
 	append: null
 };
+var appearance = {
+	accentColor: {
+		light: "blue",
+		dark: "lightblue"
+	},
+	toolbarBg: {
+		light: "rgba(250, 249, 246, 0.95)",
+		dark: "rgba(40, 40, 43, 0.9)"
+	},
+	buttonBg: {
+		light: "white",
+		dark: "black"
+	},
+	borderColor: {
+		light: "lightgray",
+		dark: "gray"
+	},
+	hoverBg: {
+		light: "#f2f2f2",
+		dark: "rgb(80, 80, 80)"
+	},
+	buttonSize: "28px",
+	buttonFontSize: "24px"
+};
 var icons = {
 	undo: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"/></svg>",
 	redo: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z\"/></svg>",
@@ -19660,13 +19685,14 @@ var icons = {
 var toolbarConfig = {
 	visibility: visibility,
 	ordering: ordering,
+	menus: menus,
 	insertBar: insertBar,
 	formatBar: formatBar,
 	styleMenu: styleMenu,
 	styleBar: styleBar,
-	tableMenu: tableMenu,
 	help: help,
 	augmentation: augmentation,
+	appearance: appearance,
 	icons: icons
 };
 
@@ -19721,6 +19747,11 @@ var toolbarConfig = {
  *     "formatBar": 50,          // Format bar (b, i, u, etc) order if it is visible
  *     "search": 60,             // Search item (hide/show search bar) order if it is visible
  *   },
+ *   "menus": {
+ *     "styleName": true         // Whether to show the style name or just use a paragraph symbol
+ *     "tableHeader": true,      // Whether the "Header" item is visible in the "Table->Add" menu
+ *     "tableBorder": true,      // Whether the "Border" item is visible in the "Table" menu
+ *   },
  *   "insertBar": {
  *     "link": true,             // Whether the link menu item is visible
  *     "image": true,            // Whether the image menu item is visible
@@ -19749,14 +19780,19 @@ var toolbarConfig = {
  *     "list": true,             // Whether bullet and numbered list items are visible
  *     "dent": true,             // Whether indent and outdent items are visible
  *   },
- *   "tableMenu": {
- *     "header": true,           // Whether the "Header" item is visible in the "Table->Add" menu
- *     "border": true,           // Whether the "Border" item is visible in the "Table" menu
- *   },
  *   "augmentation": {
  *     "prepend": null,          // Name of a registered array of cmdItems to prepend
  *     "append": null            // Name of a registered array of cmdItems to append
  *   },
+ *   "appearance": {             // Colors (light and dark mode) and sizes, vars in toolbar.css
+ *     "accentColor": { "light": "blue", "dark": "lightblue" },
+ *     "toolbarBg":   { "light": "rgba(250, 249, 246, 0.95)", "dark": "rgba(40, 40, 43, 0.9)" },
+ *     "buttonBg":    { "light": "white", "dark": "black" },
+ *     "borderColor": { "light": "lightgray", "dark": "gray" },
+ *     "hoverBg":     { "light": "#f2f2f2", "dark": "rgb(80, 80, 80)" },
+ *     "buttonSize":  "28px",
+ *     "buttonFontSize":    "24px"
+ *   },
  *   "icons": {                  // Outlined 400 weight versions from https://fonts.google.com/icons
  *     // undo
  *     "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"/></svg>",
@@ -19893,7 +19929,7 @@ class ToolbarConfig {
 }
 
 var undo = "Mod-z";
-var redo = "Shift-Mod-z";
+var redo = "Mod-Shift-z";
 var link = [
 	"Mod-K",
 	"Mod-k"
@@ -19914,12 +19950,12 @@ var number = [
 	"Ctrl-o"
 ];
 var indent = [
-	"Mod-]",
-	"Ctrl-q"
+	"Mod->",
+	"Mod-]"
 ];
 var outdent = [
-	"Mod-[",
-	"Shift-Ctrl-q"
+	"Mod-<",
+	"Mod-["
 ];
 var bold = [
 	"Mod-B",
@@ -20096,13 +20132,11 @@ var focusAfterLoad = true;
 var selectImage = false;
 var insertLink = false;
 var insertImage = false;
-var showStyle = true;
 var behaviorConfig = {
 	focusAfterLoad: focusAfterLoad,
 	selectImage: selectImage,
 	insertLink: insertLink,
-	insertImage: insertImage,
-	showStyle: showStyle
+	insertImage: insertImage
 };
 
 /**
@@ -20141,7 +20175,6 @@ var behaviorConfig = {
  *    "selectImage": false,       // Whether to show a "Select..." button in the Insert Image dialog
  *    "insertLink": false,        // Whether to defer to the MarkupDelegate rather than use the default LinkDialog
  *    "insertImage": false,       // Whether to defer to the MarkupDelagate rather than use the default ImageDialog
- *    "showStyle": true           // Whether to show the selected style in a labeled drop-down rather than a (smaller) icon
  * }
  * ```
  */
@@ -22819,14 +22852,14 @@ function tableMenuItems(config) {
   let icons = config.toolbar.icons;
   let help = config.toolbar.help;
   let items = [];
-  let { header, border } = config.toolbar.tableMenu;
+  let { tableHeader, tableBorder } = config.toolbar.menus;
   items.push(new TableCreateSubmenu({title: 'Insert table', label: 'Insert'}));
   let addItems = [];
   addItems.push(tableEditItem(addRowCommand('BEFORE'), {label: 'Row above'}));
   addItems.push(tableEditItem(addRowCommand('AFTER'), {label: 'Row below'}));
   addItems.push(tableEditItem(addColCommand('BEFORE'), {label: 'Column before'}));
   addItems.push(tableEditItem(addColCommand('AFTER'), {label: 'Column after'}));
-  if (header) addItems.push(
+  if (tableHeader) addItems.push(
     tableEditItem(
       addHeaderCommand(), {
         label: 'Header',
@@ -22848,7 +22881,7 @@ function tableMenuItems(config) {
       label: 'Delete',
       enable: (state) => { return isTableSelected(state) }
     }));
-  if (border) {
+  if (tableBorder) {
     let borderItems = [];
     borderItems.push(tableBorderItem(setBorderCommand('cell'), {label: 'All'}));
     borderItems.push(tableBorderItem(setBorderCommand('outer'), {label: 'Outer'}));
@@ -22999,9 +23032,10 @@ function formatItem(markType, markName, options) {
  */
 function styleMenuItems(config, schema) {
   let keymap = config.keymap;
+  let toolbar = config.toolbar;
   let help = config.toolbar.help;
   let items = [];
-  let { p, h1, h2, h3, h4, h5, h6, pre } = config.toolbar.styleMenu;
+  let { p, h1, h2, h3, h4, h5, h6, pre } = toolbar.styleMenu;
   if (p) items.push(new ParagraphStyleItem(schema.nodes.paragraph, 'P', { label: p, keymap: baseKeyString('p', keymap) }));
   if (h1) items.push(new ParagraphStyleItem(schema.nodes.heading, 'H1', { label: h1, keymap: baseKeyString('h1', keymap), attrs: { level: 1 }}));
   if (h2) items.push(new ParagraphStyleItem(schema.nodes.heading, 'H2', { label: h2, keymap: baseKeyString('h2', keymap), attrs: { level: 2 }}));
@@ -23010,20 +23044,19 @@ function styleMenuItems(config, schema) {
   if (h5) items.push(new ParagraphStyleItem(schema.nodes.heading, 'H5', { label: h5, keymap: baseKeyString('h5', keymap), attrs: { level: 5 }}));
   if (h6) items.push(new ParagraphStyleItem(schema.nodes.heading, 'H6', { label: h6, keymap: baseKeyString('h6', keymap), attrs: { level: 6 }}));
   if (pre) items.push(new ParagraphStyleItem(schema.nodes.code_block, 'PRE', { label: pre, keymap: baseKeyString('pre', keymap) }));
-  if (config.behavior.showStyle) {
+  if (toolbar.menus.styleName) {
     let titleUpdate = (state) => {
       let styleElement = paragraphStyle(state).toLowerCase();
       // The paragraphStyle comes back with a trailing "+"" when across multiple styles
       let multiple = styleElement[styleElement.length - 1] == '+';
       let singleElement = multiple ? styleElement.slice(0, -1) : styleElement;
-      let label = config.toolbar.styleMenu[singleElement];
+      let label = toolbar.styleMenu[singleElement];
       return label ? (multiple ? label + '+' : label) : styleElement
     };
     let allLabels = [p, h1, h2, h3, h4, h5, h6, pre].filter(Boolean).flatMap(l => [l, l + '+']);
     return [new Dropdown(items, { title: help.style, label: 'Style', titleUpdate: titleUpdate, labels: allLabels})]
   } else {
-    let icons = config.toolbar.icons;
-    return [new Dropdown(items, { title: help.style, icon: icons.paragraphStyle })]
+    return [new Dropdown(items, { title: help.style, icon: toolbar.icons.paragraphStyle })]
   }
 }
 
@@ -23340,9 +23373,9 @@ function buildKeymap(config, schema) {
  */
 let toolbarView;
 
-function toolbar(content) {
+function toolbar(content, visible) {
   let view = function view(editorView) {
-    toolbarView = new ToolbarView(editorView, content);
+    toolbarView = new ToolbarView(editorView, content, visible);
     return toolbarView;
   };
   return new Plugin({view})
@@ -23350,7 +23383,7 @@ function toolbar(content) {
 
 class ToolbarView {
 
-  constructor(editorView, content) {
+  constructor(editorView, content, visible) {
     this.prefix = prefix + "-toolbar";
     this.editorView = editorView;
     this.content = content;
@@ -23358,11 +23391,13 @@ class ToolbarView {
 
     // Embed the toolbar and editorView in a wrapper.
     this.wrapper = crelt("div", {class: this.prefix + "-wrapper"});
-    this.toolbar = this.wrapper.appendChild(crelt("div", {class: this.prefix, id: this.prefix}));
+
+    // Handle the case where the toolbar is hidden initially.
+    let toolbarClass = visible ? this.prefix : this.prefix + "-hidden";
+    this.toolbar = this.wrapper.appendChild(crelt("div", {class: toolbarClass, id: this.prefix}));
     // Since the menu adjusts to fit using a `MoreItem` for contents that doesn't fit, 
     // we need to refresh how it is rendered when resizing takes place.
     window.addEventListener('resize', ()=>{ this.refresh(); });
-    this.toolbar.className = this.prefix;
     if (editorView.dom.parentNode)
       editorView.dom.parentNode.replaceChild(this.wrapper, editorView.dom);
     this.wrapper.appendChild(editorView.dom);
@@ -23676,11 +23711,9 @@ function markupSetup(config, schema) {
     gapCursor(),
   ];
 
-  // Only show the toolbar if the config indicates it is visible
-  if (config.toolbar.visibility.toolbar) {
-    let content = buildMenuItems(config, schema);
-    plugins.push(toolbar(content));
-  }
+  // Always build the toolbar, but only show it if the config indicates it is visible
+  let content = buildMenuItems(config, schema);
+  plugins.push(toolbar(content, config.toolbar.visibility.toolbar));
 
   plugins.push(history());
 
@@ -24877,6 +24910,17 @@ class MarkupEditor {
     }
 }
 
+/**
+ * Set the visibility of the toolbarView using the display property.
+ * 
+ * @param {boolean} visible True if the toolbar should be visible, else false.
+ */
+function setToolbarVisible(visible) {
+    if (toolbarView) {
+        toolbarView.toolbar.style.display = visible ? '' : 'none';
+    }
+}
+
 /**
  * The object whose methods comprise the MarkupEditor API.
  */
@@ -24934,6 +24978,7 @@ const MU = {
     setHTML,
     setStyle,
     setTestHTML,
+    setToolbarVisible,
     setTopLevelAttributes,
     testBlockquoteEnter,
     testExtractContents,
@@ -25158,6 +25203,34 @@ class MarkupEditorElement extends HTMLElement {
     // Create an editor instance and hold onto it here
     this.editor = new MarkupEditor(this.editorContainer, config);
 
+    // Apply toolbar appearance CSS custom properties if an appearance section is present
+    const appearance = this.editor.config?.toolbar?.appearance;
+    if (appearance) {
+      const canMatchMedia = typeof window.matchMedia === 'function';
+      const isDark = canMatchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const colorPairs = {
+        accentColor: '--Markup-accent-color',
+        toolbarBg:   '--Markup-toolbar-bg',
+        buttonBg:    '--Markup-button-bg',
+        borderColor: '--Markup-border-color',
+        hoverBg:     '--Markup-hover-bg',
+      };
+      const singleValues = {
+        buttonSize: '--Markup-button-size',
+        buttonFontSize: '--Markup-button-font-size',
+      };
+      for (const [field, varName] of Object.entries(colorPairs)) {
+        if (appearance[field] != null) {
+          this.style.setProperty(varName, isDark ? appearance[field].dark : appearance[field].light);
+        }
+      }
+      for (const [field, varName] of Object.entries(singleValues)) {
+        if (appearance[field] != null) {
+          this.style.setProperty(varName, appearance[field]);
+        }
+      }
+    }
+
     // Prepend and/or append any augmentations
     const prependItems = getAugmentation(config.prepend)?.menuItems;
     if (prependItems) prependToolbar(prependItems);

package/package.json

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

package/styles/toolbar.css

@@ -56,62 +56,66 @@
   position: sticky;
   overflow: visible;
   width: 100%;
-  font-size: 24px;
+  font-size: var(--Markup-button-font-size, 24px);
   vertical-align: middle;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
   top: 0;
-  max-height: 38px;
+  max-height: calc(var(--Markup-button-size, 28px) + 10px);
   padding: 2px 8px;
-  color: blue;
-  background: rgba(250, 249, 246, 0.95);
-  border-bottom: 1px solid lightgray;
+  color: var(--Markup-accent-color, blue);
+  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));
+  border-bottom: 1px solid var(--Markup-border-color, lightgray);
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 @media (prefers-color-scheme: dark) {
   .Markup-toolbar {
-    color: rgb(250, 249, 246);
-    background: rgba(40, 40, 43, 0.9);
-    border-bottom: 1px solid gray;
+    color: var(--Markup-accent-color, lightblue);
+    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));
+    border-bottom: 1px solid var(--Markup-border-color, gray);
   }
 }
 
+.Markup-toolbar-hidden {
+  display: none;
+}
+
 .Markup-menuitem {
   display: inline-block;
   flex-shrink: 0;  /* Otherwise, the drop-downs with icons shrink */
   overflow-y: visible;
   vertical-align: middle;
-  min-width: 28px;
-  height: 28px;
+  min-width: var(--Markup-button-size, 28px);
+  height: var(--Markup-button-size, 28px);
   cursor: pointer;
   margin-right: 4px;
   border-radius: 4px;
-  color: blue;
-  border: 1px solid blue;
-  background: white;
-  fill: blue;
+  color: var(--Markup-accent-color, blue);
+  border: 1px solid var(--Markup-accent-color, blue);
+  background: var(--Markup-button-bg, white);
+  fill: var(--Markup-accent-color, blue);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menuitem {
-    color: lightblue;
-    border: 1px solid lightblue; 
+    color: var(--Markup-accent-color, lightblue);
+    border: 1px solid var(--Markup-accent-color, lightblue);
     /* border: 1px solid #4183c4; */
-    background: black;
-    fill: lightblue;
+    background: var(--Markup-button-bg, black);
+    fill: var(--Markup-accent-color, lightblue);
   }
 }
 
 .Markup-menuitem-active {
   fill: white;
   color: white;
-  background: blue;
+  background: var(--Markup-accent-color, blue);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menuitem-active {
       fill: black;
       color: black;
-      background: lightblue;
+      background: var(--Markup-accent-color, lightblue);
   }
 }
 
@@ -127,8 +131,8 @@
 
 .Markup-icon {
   display: inline-block;
-  width: 28px;
-  height: 28px;
+  width: var(--Markup-button-size, 28px);
+  height: var(--Markup-button-size, 28px);
   border: 0;
 }
 
@@ -137,6 +141,8 @@
 }
 
 .Markup-icon svg {
+  width: var(--Markup-button-font-size, 24px);
+  height: var(--Markup-button-font-size, 24px);
   padding: 2px;
   border: 0;
   fill: inherit;
@@ -145,13 +151,13 @@
 .Markup-menuseparator {
   display: inline-block;
   vertical-align: middle;
-  height: 28px;
-  border-right: 1px solid lightgray;
+  height: var(--Markup-button-size, 28px);
+  border-right: 1px solid var(--Markup-border-color, lightgray);
   margin-right: 4px;
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menuseparator {
-    border-right: 1px solid gray;
+    border-right: 1px solid var(--Markup-border-color, gray);
   }
 }
 
@@ -243,11 +249,11 @@
   background: inherit;
   padding: 2px;
   background: inherit;
-  border: 1px solid gray;
+  border: 1px solid var(--Markup-border-color, gray);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-dropdown-menu, .Markup-menu-submenu {
-    border: 1px solid lightgray;
+    border: 1px solid var(--Markup-border-color, lightgray);
   }
 }
 
@@ -270,11 +276,11 @@
 }
 
 .Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {
-  background: #f2f2f2;
+  background: var(--Markup-hover-bg, #f2f2f2);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-dropdown-item:hover, .Markup-menu-submenu-wrap:hover {
-    background: rgb(80, 80, 80);
+    background: var(--Markup-hover-bg, rgb(80, 80, 80));
   }
 }
 
@@ -323,12 +329,12 @@
   left: 100%;
   top: -5px;
   /* background cannot be inherited because of hover highlighting in dropdown */
-  background: white;
+  background: var(--Markup-button-bg, white);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-submenu {
     /* background cannot be inherited because of hover highlighting in dropdown */
-    background: black;
+    background: var(--Markup-button-bg, black);
   }
 }
 
@@ -345,12 +351,12 @@
 
 .Markup-selection {
   position: absolute;
-  border: 1px solid blue;
+  border: 1px solid var(--Markup-accent-color, blue);
   background: transparent;
 }
 @media (prefers-color-scheme: dark) {
   .Markup-selection {
-    border: 1px solid lightblue;
+    border: 1px solid var(--Markup-accent-color, lightblue);
   }
 }
 
@@ -361,24 +367,24 @@
   position: sticky;
   overflow: visible;
   width: 100%;
-  font-size: 24px;
+  font-size: var(--Markup-button-font-size, 24px);
   vertical-align: middle;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
-  top: 35px;
-  max-height: 38px;
+  top: calc(var(--Markup-button-size, 28px) + 7px);
+  max-height: calc(var(--Markup-button-size, 28px) + 10px);
   padding: 2px 8px;
-  color: blue;
-  background: rgba(250, 249, 246, 0.95);
-  border-bottom: 1px solid lightgray;
+  color: var(--Markup-accent-color, blue);
+  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));
+  border-bottom: 1px solid var(--Markup-border-color, lightgray);
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 @media (prefers-color-scheme: dark) {
   .Markup-toolbar-more {
-    color: rgb(250, 249, 246);
-    background: rgba(40, 40, 43, 0.9);
-    border-bottom: 1px solid gray;
+    color: var(--Markup-accent-color, lightblue);
+    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));
+    border-bottom: 1px solid var(--Markup-border-color, gray);
   }
 }
 
@@ -386,25 +392,25 @@
 
 .Markup-searchbar {
   display: inline-block;
-  font-size: 24px;
+  font-size: var(--Markup-button-font-size, 24px);
   vertical-align: middle;
   position: sticky;
-  top: 35px;
+  top: calc(var(--Markup-button-size, 28px) + 7px);
   width: 100%;
   line-height: 30px;
   height: 37px;
-  color: blue;
-  background: rgba(250, 249, 246, 0.95);
-  border-bottom: 1px solid lightgray;
+  color: var(--Markup-accent-color, blue);
+  background: var(--Markup-toolbar-bg, rgba(250, 249, 246, 0.95));
+  border-bottom: 1px solid var(--Markup-border-color, lightgray);
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
 }
 @media (prefers-color-scheme: dark) {
   .Markup-searchbar {
-    color: rgb(250, 249, 246);
-    background: rgba(40, 40, 43, 0.9);
-    border-bottom: 1px solid gray;
+    color: var(--Markup-accent-color, lightblue);
+    background: var(--Markup-toolbar-bg, rgba(40, 40, 43, 0.9));
+    border-bottom: 1px solid var(--Markup-border-color, gray);
   }
 }
 
@@ -605,12 +611,12 @@
   left: 100%;
   top: -5px;
   /* background cannot be inherited because of hover highlighting in dropdown */
-  background: white;
+  background: var(--Markup-button-bg, white);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-tablesizer {
     /* background cannot be inherited because of hover highlighting in dropdown */
-    background: black;
+    background: var(--Markup-button-bg, black);
   }
 }
 
@@ -623,18 +629,18 @@
   background: inherit;
   padding: 2px;
   background: inherit;
-  border: 1px solid gray;
+  border: 1px solid var(--Markup-border-color, gray);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-dropdown-menu, .Markup-menu-submenu {
-    border: 1px solid lightgray;
+    border: 1px solid var(--Markup-border-color, lightgray);
   }
 }
 
 .Markup-menu-tablesizer .Markup-menu-dropdown-item {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  border: 1px solid blue;
+  border: 1px solid var(--Markup-accent-color, blue);
   width: 18px;
   height: 18px;
   padding: 0;
@@ -642,7 +648,7 @@
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-tablesizer .Markup-menu-dropdown-item {
-    border: 1px solid lightblue;
+    border: 1px solid var(--Markup-accent-color, lightblue);
   }
 }
 
@@ -651,12 +657,12 @@
     padding-top: 3px;
     fill: black;
     color: black;
-    background: blue;
+    background: var(--Markup-accent-color, blue);
 }
 @media (prefers-color-scheme: dark) {
   .Markup-menu-tablesizer .Markup-menuitem-active {
       fill: black;
       color: black;
-      background: lightblue;
+      background: var(--Markup-accent-color, lightblue);
   }
 }