markupeditor 0.9.8 → 0.9.10

package/dist/custom-elements.json

@@ -138,7 +138,7 @@
           "type": {
             "text": "object"
           },
-          "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, }",
+          "default": "{ activeConfig, activeView, addButton, addCol, addDiv, addHeader, addRow, borderTable, callbackSelectImage, 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."
         }
       ],
@@ -722,6 +722,11 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "callbackSelectImage",
+          "description": "Callback to signal that the user wants to select an image from a file.\n\nThe messageHandler will need to do something like bring up a file picker\nand in turn execute insertImage."
+        },
         {
           "kind": "function",
           "name": "searchedCallback",
@@ -1505,6 +1510,14 @@
             "module": "src/markup.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "callbackSelectImage",
+          "declaration": {
+            "name": "callbackSelectImage",
+            "module": "src/markup.js"
+          }
+        },
         {
           "kind": "js",
           "name": "searchedCallback",
@@ -2379,18 +2392,7 @@
             {
               "kind": "method",
               "name": "selectImage",
-              "parameters": [
-                {
-                  "name": "state"
-                },
-                {
-                  "name": "dispatch"
-                },
-                {
-                  "name": "view"
-                }
-              ],
-              "description": "Tell the delegate to select an image to insert, because we don't know how to do that"
+              "description": "Call back to the messageHandler after closing the dialog. The message handler should \nlet the delegate deal with bringing up a file picker of some kind."
             },
             {
               "kind": "method",

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  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}");
+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}");
 
 /**
  * The registry used to hold delegates, configs, handlers, and
@@ -16150,6 +16150,121 @@ A command function that redoes the last undone change, if any.
 */
 const redo$1 = buildCommand(true, true);
 
+/**
+ * 
+ * @param {EditorView}  view
+ * @param {string} text Text to be translated
+ * @returns {string}    The translated text if the view supports it
+ */
+function translate(view, text) {
+    return view._props.translate ? view._props.translate(text) : text;
+}
+/**
+ * Add or remove a class from the element.
+ * 
+ * Apparently a workaround for classList.toggle being broken in IE11
+ * 
+ * @param {HTMLElement}  dom 
+ * @param {string}          cls The class name to add or remove
+ * @param {boolean}         on  True to add the class name to the `classList`
+ */
+function setClass(dom, cls, on) {
+    if (on)
+        dom.classList.add(cls);
+    else
+        dom.classList.remove(cls);
+}
+
+/**
+ * DOMAccess provides access to the MarkupToolbar and other well-known elements.
+ */
+class DOMAccess {
+
+    constructor(prefix) {
+        this.prefix = prefix ?? 'Markup';
+    }
+
+    setPrefix(prefix) {
+        this.prefix = prefix;
+    }
+
+    /**
+     * Return the toolbar div in `view`
+     * @param {EditorView} view 
+     * @returns {HTMLDivElement}  The toolbar div in the view
+     */
+    getToolbar(view) {
+        return view.dom.getRootNode().getElementById(this.prefix + "-toolbar")
+    }
+
+    getSearchItem(view) {
+        return view.dom.getRootNode().getElementById(this.prefix + '-searchitem')
+    }
+
+    getSearchbar(view) {
+        return view.dom.getRootNode().getElementById(this.prefix + "-searchbar")
+    }
+
+    getToolbarMore(view) {
+        return view.dom.getRootNode().getElementById(this.prefix + "-toolbar-more")
+    }
+
+    getWrapper(view) {
+        return this.getToolbar(view)?.parentElement
+    }
+
+    /** Adding promptShowing class on wrapper lets us suppress scroll while the prompt is showing */
+    addPromptShowing(view) {
+        setClass(getWrapper(view), promptShowing(), true);
+    }
+
+    /** Removing promptShowing class on wrapper lets wrapper scroll again */
+    removePromptShowing(view) {
+        setClass(getWrapper(view), promptShowing(), false);
+    }
+
+    promptShowing() {
+        return this.prefix + "-prompt-showing"
+    }
+
+    searchInput() {
+        return this.prefix + "-searchinput"
+    }
+
+    searchbarShowing() {
+        return this.prefix + "-searchbar-showing"
+    }
+
+    searchbarHidden() {
+        return this.prefix + "-searchbar-hidden"
+    }
+
+    isSearchFocused(view) {
+        return view?.dom.getRootNode().getElementById(this.searchInput())?.matches(':focus') ?? false
+    }
+
+    isPromptShowing(view) {
+        return (view) ? this.getWrapper(view)?.classList.contains(this.promptShowing()) ?? false : false
+    }
+
+}
+
+const _domAccess = new DOMAccess();
+const prefix = _domAccess.prefix;
+const setPrefix = _domAccess.setPrefix.bind(_domAccess);
+const getToolbar = _domAccess.getToolbar.bind(_domAccess);
+_domAccess.getSearchItem.bind(_domAccess);
+const getSearchbar = _domAccess.getSearchbar.bind(_domAccess);
+const getToolbarMore = _domAccess.getToolbarMore.bind(_domAccess);
+const getWrapper = _domAccess.getWrapper.bind(_domAccess);
+const addPromptShowing = _domAccess.addPromptShowing.bind(_domAccess);
+const removePromptShowing = _domAccess.removePromptShowing.bind(_domAccess);
+const promptShowing = _domAccess.promptShowing.bind(_domAccess);
+const searchbarShowing = _domAccess.searchbarShowing.bind(_domAccess);
+const searchbarHidden = _domAccess.searchbarHidden.bind(_domAccess);
+const isSearchFocused = _domAccess.isSearchFocused.bind(_domAccess);
+const isPromptShowing = _domAccess.isPromptShowing.bind(_domAccess);
+
 /**
  * Define various arrays of tags used to represent MarkupEditor-specific concepts.
  *
@@ -17868,9 +17983,12 @@ function _getSelectionState() {
     // absolutely reflects the selection state at the time of the call regardless
     // of whether it is editable or not.
     const contentEditable = _getContentEditable();
+    const view = activeView();
     state['divid'] = contentEditable.id;            // Will be 'editor' or a div ID
-    state['valid'] = contentEditable.editable;      // Valid means the selection is in something editable
-    if (!contentEditable.editable) return state;    // No need to do more with state if it's not editable
+    // Valid means the selection is in something editable and 
+    // neither search is focused nor is a prompt showing
+    state['valid'] = contentEditable.editable && !(isSearchFocused(view) || isPromptShowing(view));
+    if (!state['valid']) return state;    // No need to do more with state if it's not editable
 
     // Selected text
     state['selection'] = _getSelectionText();
@@ -18198,6 +18316,17 @@ function _getIndented(state) {
 function callbackInput(element) {
     _callback('input' + (selectedID() ?? ''), element);
 }
+/**
+ * Callback to signal that the user wants to select an image from a file.
+ * 
+ * The messageHandler will need to do something like bring up a file picker
+ * and in turn execute insertImage.
+ */
+function callbackSelectImage() {
+    let messageDict = { 'messageType' : 'selectImage' };
+    _callback(JSON.stringify(messageDict));
+}
+
 /**
  * Callback to signal that user-provided CSS and/or script files have
  * been loaded.
@@ -20806,107 +20935,6 @@ function add(elt, child) {
   }
 }
 
-/**
- * 
- * @param {EditorView}  view
- * @param {string} text Text to be translated
- * @returns {string}    The translated text if the view supports it
- */
-function translate(view, text) {
-    return view._props.translate ? view._props.translate(text) : text;
-}
-/**
- * Add or remove a class from the element.
- * 
- * Apparently a workaround for classList.toggle being broken in IE11
- * 
- * @param {HTMLElement}  dom 
- * @param {string}          cls The class name to add or remove
- * @param {boolean}         on  True to add the class name to the `classList`
- */
-function setClass(dom, cls, on) {
-    if (on)
-        dom.classList.add(cls);
-    else
-        dom.classList.remove(cls);
-}
-
-/**
- * DOMAccess provides access to the MarkupToolbar and other well-known elements.
- */
-class DOMAccess {
-
-    constructor(prefix) {
-        this.prefix = prefix ?? 'Markup';
-    }
-
-    setPrefix(prefix) {
-        this.prefix = prefix;
-    }
-
-    /**
-     * Return the toolbar div in `view`
-     * @param {EditorView} view 
-     * @returns {HTMLDivElement}  The toolbar div in the view
-     */
-    getToolbar(view) {
-        return view.dom.getRootNode().getElementById(this.prefix + "-toolbar");
-    }
-
-    getSearchItem(view) {
-        return view.dom.getRootNode().getElementById(this.prefix + '-searchitem')
-    }
-
-    getSearchbar(view) {
-        return view.dom.getRootNode().getElementById(this.prefix + "-searchbar");
-    }
-
-    getToolbarMore(view) {
-        return view.dom.getRootNode().getElementById(this.prefix + "-toolbar-more")
-    }
-
-    getWrapper(view) {
-        return this.getToolbar(view).parentElement;
-    }
-
-    /** Adding promptShowing class on wrapper lets us suppress scroll while the prompt is showing */
-    addPromptShowing(view) {
-        setClass(getWrapper(view), promptShowing(), true);
-    }
-
-    /** Removing promptShowing class on wrapper lets wrapper scroll again */
-    removePromptShowing(view) {
-        setClass(getWrapper(view), promptShowing(), false);
-    }
-
-    promptShowing() {
-        return this.prefix + "-prompt-showing"
-    }
-
-    searchbarShowing() {
-        return this.prefix + "-searchbar-showing"
-    }
-
-    searchbarHidden() {
-        return this.prefix + "-searchbar-hidden"
-    }
-
-}
-
-const _domAccess = new DOMAccess();
-const prefix = _domAccess.prefix;
-const setPrefix = _domAccess.setPrefix.bind(_domAccess);
-const getToolbar = _domAccess.getToolbar.bind(_domAccess);
-_domAccess.getSearchItem.bind(_domAccess);
-const getSearchbar = _domAccess.getSearchbar.bind(_domAccess);
-const getToolbarMore = _domAccess.getToolbarMore.bind(_domAccess);
-const getWrapper = _domAccess.getWrapper.bind(_domAccess);
-const addPromptShowing = _domAccess.addPromptShowing.bind(_domAccess);
-const removePromptShowing = _domAccess.removePromptShowing.bind(_domAccess);
-const promptShowing = _domAccess.promptShowing.bind(_domAccess);
-const searchbarShowing = _domAccess.searchbarShowing.bind(_domAccess);
-const searchbarHidden = _domAccess.searchbarHidden.bind(_domAccess);
-
 function getIcon(root, icon) {
     let doc = (root.nodeType == 9 ? root : root.ownerDocument) || document;
     let node = doc.createElement("span");
@@ -21044,6 +21072,7 @@ class Dropdown {
    * | `Function(EditorState): string`  | `titleUpdate` | Function to execute that returns a label based on `state`. |
    * | `Function(): boolean`            | `enable`      | Function to return true if MenuItem is enabled, else false |
    * | `string`                         | `label`       | The string to show in the MenuItem |
+   * | `string[]`                       | `labels`      | All possible label strings; used to size the dropdown to the widest label at render time. |
    * | `KeymapConfig`                   | `keymap`      | The KeymapConfig to use for the MenuItem |
    * | `Command`                        | `run`         | The Command to run when the item is pressed |
    * | `Function(): boolean`            | `active`      | Function to return true if MenuItem is active, else false. |
@@ -21087,6 +21116,18 @@ class Dropdown {
     let iconWrapClass = this.options.indicator ? "-dropdown-icon-wrap" : "-dropdown-icon-wrap-noindicator";
     let wrapClass = (this.options.icon) ? this.prefix + iconWrapClass : this.prefix + "-dropdown-wrap";
     let wrap = crelt("span", { class: wrapClass }, label);
+    if (!this.options.icon && options.labels && options.labels.length > 0) {
+      let container = getToolbar(view) || view.dom.parentNode || document.body;
+      let sizer = crelt("span", { style: "visibility:hidden;position:absolute;white-space:nowrap;font-size:0.8em" });
+      container.appendChild(sizer);
+      let maxWidth = 0;
+      for (let lbl of options.labels) {
+        sizer.textContent = lbl + "\u25BE";
+        maxWidth = Math.max(maxWidth, sizer.getBoundingClientRect().width);
+      }
+      container.removeChild(sizer);
+      wrap.style.width = Math.ceil(maxWidth) + "px";
+    }
     let open = null;
     let listeningOnClose = null;
     let close = () => {
@@ -21270,8 +21311,9 @@ class DialogItem {
      * @param {EditorView} view 
      */
     openDialog(state, dispatch, view) {
-      setActiveView(view);
+        setActiveView(view);
         this.createDialog(view);
+        selectionChanged();    // Since it's pseudo modal, we can do it once
         this.dialog.show();
     }
 
@@ -21358,6 +21400,7 @@ class DialogItem {
      */
     closeDialog() {
         removePromptShowing(activeView());
+        selectionChanged();    // Since it's pseudo modal, we can do it once
         this.toolbarOverlay?.parentElement?.removeChild(this.toolbarOverlay);
         this.overlay?.parentElement?.removeChild(this.overlay);
         this.selectionDiv?.parentElement?.removeChild(this.selectionDiv);
@@ -21579,7 +21622,8 @@ class LinkItem extends DialogItem {
     if (localRefItems.length == 0) { return null }
     return new Dropdown(localRefItems, {
       title: 'Insert link to header',
-      label: 'H1-6'
+      label: 'H1-6',
+      labels: ['H1-6']
       // Note: enable doesn't work for Dropdown
     })
   }
@@ -21852,10 +21896,10 @@ class ImageItem extends DialogItem {
     this.dialog.appendChild(buttonsDiv);
 
     // When local images are allowed, we insert a "Select..." button that will bring up a 
-    // file chooser. However, the MarkupEditor can't do that itself, so it invokes the 
-    // delegate's `markupSelectImage` method if it exists. Thus, when `selectImage` is 
-    // true in BehaviorConfig, that method should exist. It should bring up a file chooser
-    // and then invoke `MU.insertImage`.
+    // file chooser. However, the MarkupEditor can't do that itself, so it calls back to 
+    // the messageHandler, which in turn should invoke the delegate's `markupSelectImage` 
+    // method if it exists. Thus, when `selectImage` is true in BehaviorConfig, that method 
+    // should exist. It should bring up a file chooser and then invoke `MU.insertImage`.
     if (this.config.behavior.selectImage) {
       this.preview = null;
       let selectItem = cmdItem(this.selectImage.bind(this), {
@@ -21953,10 +21997,13 @@ class ImageItem extends DialogItem {
     return this.altArea.value
   }
 
-  /** Tell the delegate to select an image to insert, because we don't know how to do that */
-  selectImage(state, dispatch, view) {
+  /** 
+   * Call back to the messageHandler after closing the dialog. The message handler should 
+   * let the delegate deal with bringing up a file picker of some kind.
+  */
+  selectImage() {
     this.closeDialog();
-    if (this.config.delegate?.markupSelectImage) this.config.delegate?.markupSelectImage(state, dispatch, view);
+    callbackSelectImage();
   }
 
   /**
@@ -22192,7 +22239,8 @@ class SearchItem {
   showSearchbar(state, dispatch, view) {
     let toolbar = getToolbar(view);
     if (!toolbar) return;
-    let input = crelt('input', { type: 'search', placeholder: 'Search document...' });
+    let inputId = prefix + "-searchinput";
+    let input = crelt('input', { id: inputId, type: 'search', placeholder: 'Search document...' });
     input.addEventListener('keydown', e => {   // Use keydown because 'input' isn't triggered for Enter
       if (e.key === 'Enter') {
         let direction = (e.shiftKey) ? 'backward' : 'forward';
@@ -22210,6 +22258,12 @@ class SearchItem {
       this.text = e.target.value;
       this.stopSearching(false);              // Stop searching but leave focus in the input field
     });
+    input.addEventListener('focus', () => {
+      selectionChanged();
+    });
+    input.addEventListener('blur', () => {
+      selectionChanged();
+    });
     let idClass = prefix + "-searchbar";
     let searchbar = crelt("div", { class: idClass, id: idClass }, input);
     this.addSearchButtons(view, searchbar);
@@ -22913,7 +22967,8 @@ function styleMenuItems(config, schema) {
       let label = config.toolbar.styleMenu[singleElement];
       return label ? (multiple ? label + '+' : label) : styleElement
     };
-    return [new Dropdown(items, { title: 'Set paragraph style', label: 'Style', titleUpdate: titleUpdate})]
+    let allLabels = [p, h1, h2, h3, h4, h5, h6, pre].filter(Boolean).flatMap(l => [l, l + '+']);
+    return [new Dropdown(items, { title: 'Set paragraph style', label: 'Style', titleUpdate: titleUpdate, labels: allLabels})]
   } else {
     let icons = config.toolbar.icons;
     return [new Dropdown(items, { title: 'Set paragraph style', icon: icons.paragraphStyle })]
@@ -24325,6 +24380,9 @@ class MessageHandler {
             case 'copyImage':
                 console.log('fix copyImage ' + messageData.src);
                 return
+            case 'selectImage':
+                delegate?.markupSelectImage && delegate?.markupSelectImage();
+                return
             case 'addedImage': {
                 if (!delegate?.markupImageAdded) return;
                 let divId = messageData.divId;
@@ -24779,6 +24837,7 @@ const MU = {
     addHeader,
     addRow,
     borderTable,
+    callbackSelectImage,
     cancelSearch,
     canUndo,
     canRedo,

package/package.json

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

package/styles/toolbar.css

@@ -177,7 +177,6 @@
   display: flex;
   justify-content: space-between;
   padding: 0 4px;
-  width: 2.9em;
   height: inherit;
   border-radius: 4px;
   background: inherit;