markupeditor 0.9.6 → 0.9.8

package/config/behaviorconfig.json

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

package/config/keymapconfig.json

@@ -2,7 +2,6 @@
     "undo": "Mod-z",
     "redo": "Shift-Mod-z",
     "link": ["Mod-K", "Mod-k"],
-    "image": ["Mod-G", "Mod-g"],
     "p": "Ctrl-Shift-0",
     "h1": "Ctrl-Shift-1",
     "h2": "Ctrl-Shift-2",

package/dist/custom-elements.json

@@ -138,7 +138,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ activeConfig, activeView, addButton, addCol, addDiv, addHeader, addRow, borderTable, cancelSearch, consoleLog, cutImage, deactivateSearch, deleteLink, deleteTableArea, doRedo, doUndo, emptyDocument, focus, focusOn, focused, getDataImages, getHTML, getHeight, getImageAttributes, getLinkAttributes, getSelectionState, getTestHTML, indent, insertImage, insertLink, insertTable, loadUserFiles, modifyImage, openImageDialog, openLinkDialog, outdent, padBottom, pasteHTML, pasteText, removeAllDivs, removeButton, removeDiv, resetSelection, savedDataImage, searchFor, setActiveView, setHTML, setStyle, setTestHTML, setTopLevelAttributes, testBlockquoteEnter, testExtractContents, testListEnter, testPasteHTMLPreprocessing, testPasteTextPreprocessing, toggleBold, toggleCode, toggleItalic, toggleListItem, toggleStrike, toggleSubscript, toggleSuperscript, toggleUnderline, // Helpers to create custom toolbar items MenuItem, Dropdown, DropdownSubmenu, cmdItem, renderGrouped, renderDropdownItems, toggleSearch, // Config access ToolbarConfig, KeymapConfig, BehaviorConfig, // Registry access registerAugmentation, registerConfig, registerDelegate, registerMessageHandler, }",
+          "default": "{ activeConfig, activeView, addButton, addCol, addDiv, addHeader, addRow, borderTable, cancelSearch, canUndo, canRedo, consoleLog, cutImage, deactivateSearch, deleteLink, deleteTableArea, doRedo, doUndo, emptyDocument, focus, focusOn, focused, getDataImages, getHTML, getHeight, getImageAttributes, getLinkAttributes, getSelectionState, getTestHTML, indent, insertImage, insertLink, insertTable, loadUserFiles, modifyImage, openImageDialog, openLinkDialog, outdent, padBottom, pasteHTML, pasteText, removeAllDivs, removeButton, removeDiv, resetSelection, savedDataImage, searchFor, setActiveView, setHTML, setStyle, setTestHTML, setTopLevelAttributes, testBlockquoteEnter, testExtractContents, testListEnter, testPasteHTMLPreprocessing, testPasteTextPreprocessing, toggleBold, toggleCode, toggleItalic, toggleListItem, toggleStrike, toggleSubscript, toggleSuperscript, toggleUnderline, // Helpers to create custom toolbar items MenuItem, Dropdown, DropdownSubmenu, cmdItem, renderGrouped, renderDropdownItems, toggleSearch, // Config access ToolbarConfig, KeymapConfig, BehaviorConfig, // Registry access registerAugmentation, registerConfig, registerDelegate, registerMessageHandler, }",
           "description": "The object whose methods comprise the MarkupEditor API."
         }
       ],
@@ -803,6 +803,16 @@
           "name": "doUndo",
           "description": "Undo the previous action."
         },
+        {
+          "kind": "function",
+          "name": "canUndo",
+          "description": "Return true if we can undo in the current state; else false."
+        },
+        {
+          "kind": "function",
+          "name": "canRedo",
+          "description": "Return true if we can redo in the current state; else false."
+        },
         {
           "kind": "function",
           "name": "doRedo",
@@ -1551,6 +1561,22 @@
             "module": "src/markup.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "canUndo",
+          "declaration": {
+            "name": "canUndo",
+            "module": "src/markup.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "canRedo",
+          "declaration": {
+            "name": "canRedo",
+            "module": "src/markup.js"
+          }
+        },
         {
           "kind": "js",
           "name": "doRedo",
@@ -2727,6 +2753,18 @@
           "description": "Represents the search MenuItem in the toolbar, which hides/shows the search bar and maintains its state.",
           "name": "SearchItem",
           "members": [
+            {
+              "kind": "method",
+              "name": "matchesKey",
+              "parameters": [
+                {
+                  "name": "event"
+                },
+                {
+                  "name": "keyStrings"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "showing"
@@ -2762,7 +2800,18 @@
             },
             {
               "kind": "method",
-              "name": "hideSearchbar"
+              "name": "hideSearchbar",
+              "parameters": [
+                {
+                  "name": "state"
+                },
+                {
+                  "name": "dispatch"
+                },
+                {
+                  "name": "view"
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2911,6 +2960,11 @@
                 "text": "boolean"
               },
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "keymap",
+              "default": "keymap"
             }
           ]
         },
@@ -3569,7 +3623,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "KeymapConfig contains static utility methods to obtain a JavaScript object with properties \nthat define the key mapping configuration of the MarkupEditor toolbar. The class makes it convenient \nto write and use the utility methods, but an instance of KeymapConfig itself is not meaningful.\n\n`KeymapConfig.standard()` is the default for the MarkupEditor. It can be overridden by \npassing a new KeymapConfig by name using the `keymap` attribute of the `<markup-editor>` \nelement. You can use the pre-defined static methods like `standard()` and customize what \nit returns, or you can use your own KeymapConfig.\n\nTo customize the key mapping, for example, in a `userscript` named `mykeymap.js`:\n\n```\nimport {MU} from \"src/markup-editor.js\"\nlet keymapConfig = MU.KeymapConfig.standard();    // Grab the standard keymap config as a baseline\nkeymapConfig.link = [\"Ctrl-L\", \"Ctrl-l\"];         // Use Control+L instead of Command+k\nMU.registerConfig(keymapConfig, \"MyKeymapConfig\") // Register the instance by name so we can reference it\n```\n\nThen, where you insert the `<markup-editor>` element, set the KeymapConfig by name:\n\n```\n<markup-editor userscript=\"mykeymap.js\" keymap=\"MyKeymapConfig\">\n```\n   \nNote that the key mapping will exist and work regardless of whether you disable a toolbar \nor a specific item in a menu. For example, undo/redo by default map to Mod-z/Shift-Mod-z even  \nthough the \"correctionBar\" is off by default in the MarkupEditor. You can remove a key mapping \nby setting its value to null or an empty string. \n\nThe following properties are supported:\n\n```\n{\n   // Correction\n   \"undo\": \"Mod-z\",\n   \"redo\": \"Shift-Mod-z\",\n   // Insert\n   \"link\": [\"Mod-K\", \"Mod-k\"],\n   \"image\": [\"Mod-G\", \"Mod-g\"],\n   //\"table\": [\"Mod-T\", \"Mod-t\"],  // Does not work\n   // Stylemenu\n   \"p\": \"Ctrl-Shift-0\",\n   \"h1\": \"Ctrl-Shift-1\",\n   \"h2\": \"Ctrl-Shift-2\",\n   \"h3\": \"Ctrl-Shift-3\",\n   \"h4\": \"Ctrl-Shift-4\",\n   \"h5\": \"Ctrl-Shift-5\",\n   \"h6\": \"Ctrl-Shift-6\",\n   // Stylebar\n   \"bullet\": [\"Ctrl-U\", \"Ctrl-u\"],\n   \"number\": [\"Ctrl-O\", \"Ctrl-o\"],\n   \"indent\": [\"Mod-]\", \"Ctrl-q\"],\n   \"outdent\": [\"Mod-[\", \"Shift-Ctrl-q\"],\n   // Format\n   \"bold\": [\"Mod-B\", \"Mod-b\"],\n   \"italic\": [\"Mod-I\", \"Mod-i\"],\n   \"underline\": [\"Mod-U\", \"Mod-u\"],\n   \"strikethrough\": [\"Ctrl-S\", \"Ctrl-s\"],\n   \"code\": \"Mod-`\",\n   \"subscript\": \"Ctrl-Mod--\",\n   \"superscript\": \"Ctrl-Mod-+\",\n   // Search\n   \"search\": [\"Ctrl-F\", \"Ctrl-f\"],\n}\n```",
+          "description": "KeymapConfig contains static utility methods to obtain a JavaScript object with properties \nthat define the key mapping configuration of the MarkupEditor toolbar. The class makes it convenient \nto write and use the utility methods, but an instance of KeymapConfig itself is not meaningful.\n\n`KeymapConfig.standard()` is the default for the MarkupEditor. It can be overridden by \npassing a new KeymapConfig by name using the `keymap` attribute of the `<markup-editor>` \nelement. You can use the pre-defined static methods like `standard()` and customize what \nit returns, or you can use your own KeymapConfig.\n\nTo customize the key mapping, for example, in a `userscript` named `mykeymap.js`:\n\n```\nimport {MU} from \"src/markup-editor.js\"\nlet keymapConfig = MU.KeymapConfig.standard();    // Grab the standard keymap config as a baseline\nkeymapConfig.link = [\"Ctrl-L\", \"Ctrl-l\"];         // Use Control+L instead of Command+k\nMU.registerConfig(keymapConfig, \"MyKeymapConfig\") // Register the instance by name so we can reference it\n```\n\nThen, where you insert the `<markup-editor>` element, set the KeymapConfig by name:\n\n```\n<markup-editor userscript=\"mykeymap.js\" keymap=\"MyKeymapConfig\">\n```\n   \nNote that the key mapping will exist and work regardless of whether you disable a toolbar \nor a specific item in a menu. For example, undo/redo by default map to Mod-z/Shift-Mod-z even  \nthough the \"correctionBar\" is off by default in the MarkupEditor. You can remove a key mapping \nby setting its value to null or an empty string. \n\nThe following properties are supported:\n\n```\n{\n   // Correction\n   \"undo\": \"Mod-z\",\n   \"redo\": \"Shift-Mod-z\",\n   // Insert (no hotkeys for image or table)\n   \"link\": [\"Mod-K\", \"Mod-k\"],\n   // Stylemenu\n   \"p\": \"Ctrl-Shift-0\",\n   \"h1\": \"Ctrl-Shift-1\",\n   \"h2\": \"Ctrl-Shift-2\",\n   \"h3\": \"Ctrl-Shift-3\",\n   \"h4\": \"Ctrl-Shift-4\",\n   \"h5\": \"Ctrl-Shift-5\",\n   \"h6\": \"Ctrl-Shift-6\",\n   // Stylebar\n   \"bullet\": [\"Ctrl-U\", \"Ctrl-u\"],\n   \"number\": [\"Ctrl-O\", \"Ctrl-o\"],\n   \"indent\": [\"Mod-]\", \"Ctrl-q\"],\n   \"outdent\": [\"Mod-[\", \"Shift-Ctrl-q\"],\n   // Format\n   \"bold\": [\"Mod-B\", \"Mod-b\"],\n   \"italic\": [\"Mod-I\", \"Mod-i\"],\n   \"underline\": [\"Mod-U\", \"Mod-u\"],\n   \"strikethrough\": [\"Ctrl-S\", \"Ctrl-s\"],\n   \"code\": \"Mod-`\",\n   \"subscript\": \"Ctrl-Mod--\",\n   \"superscript\": \"Ctrl-Mod-+\",\n   // Search\n   \"search\": [\"Ctrl-F\", \"Ctrl-f\"],\n}\n```",
           "name": "KeymapConfig",
           "members": [
             {
@@ -3656,7 +3710,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "BehaviorConfig contains static utility methods to obtain a JavaScript object with properties \nthat define the behavior configuration of the MarkupEditor. The class makes it convenient \nto write and use the utility methods, but an instance of BehaviorConfig itself is not meaningful.\n\n`BehaviorConfig.standard()` is the default for the MarkupEditor. It can be overridden by \npassing a new BehaviorConfig by name using the `behavior` attribute of the `<markup-editor> `\nelement. You can use the pre-defined static methods like `standard()` and customize what \nit returns, or you can use your own BehaviorConfig.\n\nTo customize the behavior config, for example, in a `userscript` named `mybehavior.js`:\n\n```\nimport {MU} from \"src/markup-editor.js\"\nlet behaviorConfig = MU.BehaviorConfig.desktop()        // Use the desktop config as a baseline\nMU.registerConfig(behaviorConfig, \"MyBehaviorConfig\")   // Register the instance by name so we can reference it\n```\n\nThen, where you insert the `<markup-editor>` element, set the BehaviorConfig by name:\n\n```\n<markup-editor userscript=\"mybehavior.js\" behavior=\"MyBehaviorConfig\">\n```\n   \nBehaviorConfig lets you control whether the editor takes focus immediately or not, and\nallows you to defer to the MarkupDelegate for insert options, so you can use your own \n(perhaps \"native\") dialogs for file selection, link insertion, and image insertion.\n\nThe following properties are supported:\n\n```\n{\n   \"focusAfterLoad\": true,     // Whether the editor should take focus after loading\n   \"selectImage\": false,       // Whether to show a \"Select...\" button in the Insert Image dialog\n   \"insertLink\": false,        // Whether to defer to the MarkupDelegate rather than use the default LinkDialog\n   \"insertImage\": false,       // Whether to defer to the MarkupDelagate rather than use the default ImageDialog\n}\n```",
+          "description": "BehaviorConfig contains static utility methods to obtain a JavaScript object with properties \nthat define the behavior configuration of the MarkupEditor. The class makes it convenient \nto write and use the utility methods, but an instance of BehaviorConfig itself is not meaningful.\n\n`BehaviorConfig.standard()` is the default for the MarkupEditor. It can be overridden by \npassing a new BehaviorConfig by name using the `behavior` attribute of the `<markup-editor> `\nelement. You can use the pre-defined static methods like `standard()` and customize what \nit returns, or you can use your own BehaviorConfig.\n\nTo customize the behavior config, for example, in a `userscript` named `mybehavior.js`:\n\n```\nimport {MU} from \"src/markup-editor.js\"\nlet behaviorConfig = MU.BehaviorConfig.desktop()        // Use the desktop config as a baseline\nMU.registerConfig(behaviorConfig, \"MyBehaviorConfig\")   // Register the instance by name so we can reference it\n```\n\nThen, where you insert the `<markup-editor>` element, set the BehaviorConfig by name:\n\n```\n<markup-editor userscript=\"mybehavior.js\" behavior=\"MyBehaviorConfig\">\n```\n   \nBehaviorConfig lets you control whether the editor takes focus immediately or not, and\nallows you to defer to the MarkupDelegate for insert options, so you can use your own \n(perhaps \"native\") dialogs for file selection, link insertion, and image insertion.\n\nThe following properties are supported:\n\n```\n{\n   \"focusAfterLoad\": true,     // Whether the editor should take focus after loading\n   \"selectImage\": false,       // Whether to show a \"Select...\" button in the Insert Image dialog\n   \"insertLink\": false,        // Whether to defer to the MarkupDelegate rather than use the default LinkDialog\n   \"insertImage\": false,       // Whether to defer to the MarkupDelagate rather than use the default ImageDialog\n   \"showStyle\": true           // Whether to show the selected style in a labeled drop-down rather than a (smaller) icon\n}\n```",
           "name": "BehaviorConfig",
           "members": [
             {

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: inline-block;\n  padding: 0 4px;\n  min-width: 3.0em;\n  height: inherit;\n  border-radius: 4px;\n  background: inherit;\n}\n\n.Markup-menu-dropdown-icon-wrap {\n  display: inline-block;\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.Markup-menu-dropdown {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 3.0em;\n  height: inherit;\n  background: inherit;\n  position: absolute;\n}\n\n.Markup-menu-dropdown-icon {\n  display: inline-flex;\n  justify-content: space-between;\n  width: 1.8em;\n  cursor: pointer;\n  position: absolute;\n}\n\n.Markup-menu-dropdown-indicator, .Markup-menu-dropdown-icon-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: 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  width: 2.9em;\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}");
 
 /**
  * The registry used to hold delegates, configs, handlers, and
@@ -17920,6 +17920,9 @@ function _getSelectionState() {
     state['sub'] = markTypes.has(schema.marks.sub);
     state['sup'] = markTypes.has(schema.marks.sup);
     state['code'] = markTypes.has(schema.marks.code);
+    // Undo/redo availability
+    state['canundo'] = canUndo();
+    state['canredo'] = canRedo();
     return state;
 }
 /**
@@ -18115,10 +18118,11 @@ function _getTableAttributes(state) {
 }
 
 /**
- * Return the paragraph style at the selection.
+ * Return the paragraph style at the selection. 
+ * If the selection contains multiple styles, return the first one with a "+" after it.
  * 
  * @ignore
- * @returns {string}   {Tag name | 'Multiple'} that represents the selected paragraph style.
+ * @returns {string}   {Tag name} that represents the selected paragraph style.
  */
 function _getParagraphStyle() {
     const view = activeView();
@@ -18128,11 +18132,15 @@ function paragraphStyle(state) {
     const selection = state.selection;
     const nodeTypes = new Set();
     state.doc.nodesBetween(selection.from, selection.to, node => {
-        if (node.isBlock) { 
+        if (_paragraphStyleFor(node)) { 
             nodeTypes.add(node.type);
-        }        return false;   // We only need top-level nodes
+            return false
+        } else {
+            return node.isBlock   // Keep traversing if we are in a block
+        }
     });
-    return (nodeTypes.size <= 1) ? _paragraphStyleFor(selection.$anchor.parent) : 'Multiple';
+    let firstStyle = _paragraphStyleFor(selection.$anchor.parent);
+    return (nodeTypes.size <= 1) ? firstStyle : firstStyle + '+'
 }
 
 /**
@@ -18390,6 +18398,18 @@ function doUndo() {
     return result
 }
 
+/** Return true if we can undo in the current state; else false. */
+function canUndo() {
+    const view = activeView();
+    return undoCommand()(view.state)
+}
+
+/** Return true if we can redo in the current state; else false. */
+function canRedo() {
+    const view = activeView();
+    return redoCommand()(view.state)
+}
+
 /**
  * Return a command to undo and do the proper callbacks.
  * 
@@ -19705,10 +19725,6 @@ var link = [
 	"Mod-K",
 	"Mod-k"
 ];
-var image = [
-	"Mod-G",
-	"Mod-g"
-];
 var p = "Ctrl-Shift-0";
 var h1 = "Ctrl-Shift-1";
 var h2 = "Ctrl-Shift-2";
@@ -19759,7 +19775,6 @@ var keymapConfig = {
 	undo: undo,
 	redo: redo,
 	link: link,
-	image: image,
 	p: p,
 	h1: h1,
 	h2: h2,
@@ -19818,10 +19833,8 @@ var keymapConfig = {
  *    // Correction
  *    "undo": "Mod-z",
  *    "redo": "Shift-Mod-z",
- *    // Insert
+ *    // Insert (no hotkeys for image or table)
  *    "link": ["Mod-K", "Mod-k"],
- *    "image": ["Mod-G", "Mod-g"],
- *    //"table": ["Mod-T", "Mod-t"],  // Does not work
  *    // Stylemenu
  *    "p": "Ctrl-Shift-0",
  *    "h1": "Ctrl-Shift-1",
@@ -19910,11 +19923,13 @@ 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
+	insertImage: insertImage,
+	showStyle: showStyle
 };
 
 /**
@@ -19953,6 +19968,7 @@ 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
  * }
  * ```
  */
@@ -22114,6 +22130,22 @@ class SearchItem {
     this.item = cmdItem(this.command, options);
     this.text = '';
     this.caseSensitive = false;
+    this.keymap = keymap;
+  }
+
+  matchesKey(event, keyStrings) {
+    let keys = keyStrings instanceof Array ? keyStrings : (keyStrings ? [keyStrings] : []);
+    return keys.some(ks => {
+      let parts = ks.split('-');
+      let key = parts[parts.length - 1];
+      let modifiers = parts.slice(0, -1);
+      if (event.key !== key) return false
+      if (modifiers.includes('Ctrl') && !event.ctrlKey) return false
+      if (modifiers.includes('Mod') && !(event.metaKey || event.ctrlKey)) return false
+      if (modifiers.includes('Shift') && !event.shiftKey) return false
+      if (modifiers.includes('Alt') && !event.altKey) return false
+      return true
+    })
   }
 
   showing() {
@@ -22134,15 +22166,14 @@ class SearchItem {
   toggleSearch(state, dispatch, view) {
     setActiveView(view);
     if (this.showing()) {
-      this.hideSearchbar();
+      this.hideSearchbar(state, dispatch, view);
     } else {
       this.showSearchbar(state, dispatch, view);
     }
     this.update && this.update(state);
   }
 
-  hideSearchbar() {
-    let view = activeView();
+  hideSearchbar(state, dispatch, view) {
     if (view) {
       let searchbar = getSearchbar(view);
       searchbar.parentElement.removeChild(searchbar);
@@ -22170,6 +22201,9 @@ class SearchItem {
         } else {
           this.searchBackwardCommand(view.state, view.dispatch, view);
         }
+      } else if (this.matchesKey(e, this.keymap.search)) {
+        e.preventDefault();
+        this.hideSearchbar(view.state, view.dispatch, view);
       }
     });
     input.addEventListener('input', e => {    // Use input so e.target.value contains what was typed
@@ -22181,6 +22215,7 @@ class SearchItem {
     this.addSearchButtons(view, searchbar);
     let beforeTarget = getToolbarMore(view) ? getToolbarMore(view).nextSibling : toolbar.nextSibling;
     toolbar.parentElement.insertBefore(searchbar, beforeTarget);
+    input.focus();
   }
 
   setStatus() {
@@ -22859,7 +22894,6 @@ function formatItem(markType, markName, options) {
  */
 function styleMenuItems(config, schema) {
   let keymap = config.keymap;
-  let icons = config.toolbar.icons;
   let items = [];
   let { p, h1, h2, h3, h4, h5, h6, pre } = config.toolbar.styleMenu;
   if (p) items.push(new ParagraphStyleItem(schema.nodes.paragraph, 'P', { label: p, keymap: baseKeyString('p', keymap) }));
@@ -22869,8 +22903,21 @@ function styleMenuItems(config, schema) {
   if (h4) items.push(new ParagraphStyleItem(schema.nodes.heading, 'H4', { label: h4, keymap: baseKeyString('h4', keymap), attrs: { level: 4 }}));
   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 }));
-  return [new Dropdown(items, { title: 'Set paragraph style', icon: icons.paragraphStyle })]
+  if (pre) items.push(new ParagraphStyleItem(schema.nodes.code_block, 'PRE', { label: pre, keymap: baseKeyString('pre', keymap) }));
+  if (config.behavior.showStyle) {
+    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];
+      return label ? (multiple ? label + '+' : label) : styleElement
+    };
+    return [new Dropdown(items, { title: 'Set paragraph style', label: 'Style', titleUpdate: titleUpdate})]
+  } else {
+    let icons = config.toolbar.icons;
+    return [new Dropdown(items, { title: 'Set paragraph style', icon: icons.paragraphStyle })]
+  }
 }
 
 /**
@@ -24733,6 +24780,8 @@ const MU = {
     addRow,
     borderTable,
     cancelSearch,
+    canUndo,
+    canRedo,
     consoleLog,
     cutImage,
     deactivateSearch,

package/package.json

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

package/styles/toolbar.css

@@ -174,16 +174,18 @@
 }
 
 .Markup-menu-dropdown-wrap {
-  display: inline-block;
+  display: flex;
+  justify-content: space-between;
   padding: 0 4px;
-  min-width: 3.0em;
+  width: 2.9em;
   height: inherit;
   border-radius: 4px;
   background: inherit;
 }
 
 .Markup-menu-dropdown-icon-wrap {
-  display: inline-block;
+  display: flex;
+  justify-content: space-between;
   padding-right: 4px;
   width: 1.8em;
   height: inherit;
@@ -200,24 +202,34 @@
   background: inherit;
 }
 
+/* For the paragraph style dropdown with a label, make the font smaller */
 .Markup-menu-dropdown {
-  display: inline-flex;
+  display: flex;
   justify-content: space-between;
-  min-width: 3.0em;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: 0.8em;
+  width: inherit;
   height: inherit;
   background: inherit;
   position: absolute;
 }
 
+/* But for the indicator, bump size up to match the icon-style dropdown */
+.Markup-menu-dropdown .Markup-menu-dropdown-indicator {
+  font-size: 1.25em;
+}
+
 .Markup-menu-dropdown-icon {
   display: inline-flex;
   justify-content: space-between;
-  width: 1.8em;
+  font-size: inherit;
+  width: inherit;
   cursor: pointer;
   position: absolute;
 }
 
-.Markup-menu-dropdown-indicator, .Markup-menu-dropdown-icon-indicator{
+.Markup-menu-dropdown-indicator {
   opacity: .6;
 }