markupeditor 0.9.9 → 0.9.11

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

@@ -14767,6 +14767,7 @@ let baseNodes = OrderedMap.from({
   div: {
     content: "block*",
     group: "block",
+    isolating: true,    // Prevent operations like lift from going outside of a div
     selectable: false,
     attrs: {
       id: {default: null},
@@ -14841,9 +14842,14 @@ let baseNodes = OrderedMap.from({
         }
       }
     }],
-    toDOM(node) { 
-      let {id, cssClass} = node.attrs; 
-      return ["button", { id: id, class: cssClass }, 0]
+    toDOM(node) {
+      let {id, cssClass, label} = node.attrs;
+      const button = document.createElement("button");
+      if (id) button.setAttribute("id", id);
+      if (cssClass) button.setAttribute("class", cssClass);
+      button.setAttribute("type", "button");
+      if (label) button.innerHTML = label;
+      return button;
     }
   }
 
@@ -16150,6 +16156,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.
  *
@@ -16954,7 +17075,7 @@ function _buttonGroupDiv(buttonGroupJSON) {
             buttonGroupDiv.setAttribute('editable', "false");   // Hardcode
             buttonGroup.buttons.forEach( buttonAttributes => {
                 let button = document.createElement('button');
-                button.appendChild(document.createTextNode(buttonAttributes.label));
+                button.innerHTML = buttonAttributes.label;
                 button.setAttribute('label', buttonAttributes.label);
                 button.setAttribute('type', 'button');
                 button.setAttribute('id', buttonAttributes.id);
@@ -17011,7 +17132,7 @@ function addButton(id, parentId, cssClass, label) {
     button.setAttribute('parentId', parentId);
     button.setAttribute('class', cssClass);
     button.setAttribute('type', 'button');
-    button.appendChild(document.createTextNode(label));
+    button.innerHTML = label;
     const buttonSlice = _sliceFromElement(button);
     const buttonNode = buttonNodeType.create({id, parentId, cssClass, label}, buttonSlice.content);
     const transaction = view.state.tr;
@@ -17868,9 +17989,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 +18322,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 +20941,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");
@@ -21283,8 +21317,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();
     }
 
@@ -21371,6 +21406,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);
@@ -21866,10 +21902,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), {
@@ -21967,10 +22003,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();
   }
 
   /**
@@ -22206,7 +22245,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';
@@ -22224,6 +22264,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);
@@ -24340,6 +24386,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;
@@ -24794,6 +24843,7 @@ const MU = {
     addHeader,
     addRow,
     borderTable,
+    callbackSelectImage,
     cancelSearch,
     canUndo,
     canRedo,

package/package.json

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