markupeditor 0.9.3 → 0.9.5

package/README.md

@@ -63,6 +63,20 @@ a [VSCode extension](https://github.com/stevengharris/markupeditor-vs).
 You can try the MarkupEditor out right from the [project web site](https://stevengharris.github.io/markupeditor-base/). The web site has all 
 the information you need to use the MarkupEditor in your application.
 
+If you have `npx` installed, you can open the MarkupEditor on the demo page using 
+`npx markupeditor https://stevengharris.github.io/markupeditor-base/demo/demo.html`. 
+This uses the `muedit` script provided with the project and starts a node/express server 
+on port 3000 by default.
+
+```
+$ npx markupeditor https://stevengharris.github.io/markupeditor-base/demo/demo.html
+Need to install the following packages:
+markupeditor@0.9.4
+Ok to proceed? (y) y
+
+Server listening at http://localhost:3000
+```
+
 ## Install
 
 Clone the repository.
@@ -91,7 +105,7 @@ Build the project.
 ```
 $ npm run build
 
-> markupeditor@0.9.0 build
+> markupeditor@0.9.4 build
 > rollup -c
 
 
@@ -100,11 +114,11 @@ created dist/markup-editor.js in 300ms
 ```
 
 The installation identifies `muedit` in the package.json `bin` property. You can open the editor on a doc using node.js with 
-the `muedit` command, providing a filename to edit (and optionally a port for node.js). You can use the demo.html file that 
+the `npx muedit` command, providing a filename to edit (and optionally a port for node.js). You can use the demo.html file that 
 is part of the docs:
 
 ```
-$ muedit docs/demo/demo.html 
+$ npx muedit docs/demo/demo.html 
 Server listening at http://localhost:3000
 ```
 
@@ -122,7 +136,7 @@ contents of the "home" page.
 ```
 $ npm run docs
 
-> markupeditor@0.9.0 predocs
+> markupeditor@0.9.4 predocs
 > sh predocs.sh && jsdoc -c jsdoc.json
 
 Updating ./docs dependencies...
@@ -132,7 +146,7 @@ cp -f ./styles/markup.css ./docs/styles/markup.css
 cp -f ./styles/mirror.css ./docs/styles/mirror.css
 cp -f ./styles/toolbar.css ./docs/styles/toolbar.css
 
-> markupeditor@0.9.0 docs
+> markupeditor@0.9.4 docs
 > node ./docs/index.js
 
 Server listening at http://localhost:3000
@@ -145,8 +159,10 @@ test the web site locally.
 
 ## Resources
 
-Refer to the [Resources](https://stevengharris.github.io/markupeditor-base/#resources) section of the [project web site](https://stevengharris.github.io/markupeditor-base/)
-for links to documentation, demos, and other projects using the MarkupEditor.
+You can start with the [MarkupEditor Developer's Guide](https://stevengharris.github.io/markupeditor-base/guide/index.html), 
+or you can check out the [Resources](https://stevengharris.github.io/markupeditor-base/#resources) section of 
+the [project web site](https://stevengharris.github.io/markupeditor-base/) for links to documentation, demos, and 
+other projects using the MarkupEditor. 
 
 ## Acknowledgements
 

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, 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, 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."
         }
       ],
@@ -3750,6 +3750,20 @@
             }
           }
         },
+        {
+          "kind": "function",
+          "name": "setActiveView",
+          "parameters": [
+            {
+              "name": "view",
+              "description": "The ProseMirror EditorView that should be active.",
+              "type": {
+                "text": "EditorView"
+              }
+            }
+          ],
+          "description": "Set the active editor's active view."
+        },
         {
           "kind": "function",
           "name": "registerAugmentation",
@@ -3878,10 +3892,6 @@
           "kind": "variable",
           "name": "activeEditor"
         },
-        {
-          "kind": "variable",
-          "name": "setActiveView"
-        },
         {
           "kind": "variable",
           "name": "activeDocument"
@@ -3928,6 +3938,14 @@
             "module": "src/registry.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "setActiveView",
+          "declaration": {
+            "name": "setActiveView",
+            "module": "src/registry.js"
+          }
+        },
         {
           "kind": "js",
           "name": "registerAugmentation",
@@ -4048,14 +4066,6 @@
             "module": "src/registry.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "setActiveView",
-          "declaration": {
-            "name": "setActiveView",
-            "module": "src/registry.js"
-          }
-        },
         {
           "kind": "js",
           "name": "activeDocument",

package/dist/markup-editor.js

@@ -251,6 +251,13 @@ function activeConfig() {return _registry.activeConfig.bind(_registry)()}
  */
 function activeView() {return _registry.activeView.bind(_registry)()}
 
+/** 
+ * Set the active editor's active view. 
+ * 
+ * @param {EditorView}  view  The ProseMirror EditorView that should be active.
+ */
+function setActiveView(view) {_registry.setActiveView.bind(_registry)(view);}
+
 /** 
  * Add the `toolbar` to the registry.
  * A toolbar holds `cmdItems` that can either be prepended or appended to 
@@ -310,7 +317,6 @@ const getMessageHandler = _registry.getMessageHandler.bind(_registry);
 _registry.unregisterAugmentation.bind(_registry);
 const getAugmentation = _registry.getAugmentation.bind(_registry);
 _registry.activeEditor.bind(_registry);
-const setActiveView = _registry.setActiveView.bind(_registry);
 const activeDocument = _registry.activeDocument.bind(_registry);
 const setActiveDocument = _registry.setActiveDocument.bind(_registry);
 const activeEditorElement = _registry.activeEditorElement.bind(_registry);
@@ -21923,7 +21929,7 @@ class ImageItem extends DialogItem {
   /** Tell the delegate to select an image to insert, because we don't know how to do that */
   selectImage(state, dispatch, view) {
     this.closeDialog();
-    if (this.config.delegate?.markupSelectImage) this.config.delegate?.markupSelectImage(view);
+    if (this.config.delegate?.markupSelectImage) this.config.delegate?.markupSelectImage(state, dispatch, view);
   }
 
   /**
@@ -23013,31 +23019,27 @@ const undoInputRule = (state, dispatch) => {
 /**
 Converts double dashes to an emdash.
 */
-const emDash = new InputRule(/--$/, "—", { inCodeMark: false });
+new InputRule(/--$/, "—", { inCodeMark: false });
 /**
 Converts three dots to an ellipsis character.
 */
-const ellipsis = new InputRule(/\.\.\.$/, "…", { inCodeMark: false });
+new InputRule(/\.\.\.$/, "…", { inCodeMark: false });
 /**
 “Smart” opening double quotes.
 */
-const openDoubleQuote = new InputRule(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(")$/, "“", { inCodeMark: false });
+new InputRule(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(")$/, "“", { inCodeMark: false });
 /**
 “Smart” closing double quotes.
 */
-const closeDoubleQuote = new InputRule(/"$/, "”", { inCodeMark: false });
+new InputRule(/"$/, "”", { inCodeMark: false });
 /**
 “Smart” opening single quotes.
 */
-const openSingleQuote = new InputRule(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, "‘", { inCodeMark: false });
+new InputRule(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, "‘", { inCodeMark: false });
 /**
 “Smart” closing single quotes.
 */
-const closeSingleQuote = new InputRule(/'$/, "’", { inCodeMark: false });
-/**
-Smart-quote related input rules.
-*/
-const smartQuotes = [openDoubleQuote, closeDoubleQuote, openSingleQuote, closeSingleQuote];
+new InputRule(/'$/, "’", { inCodeMark: false });
 
 /**
 Build an input rule for automatically wrapping a textblock when a
@@ -23335,7 +23337,7 @@ function headingRule(nodeType, maxLevel) {
 // A set of input rules for creating the basic block quotes, lists,
 // code blocks, and heading.
 function buildInputRules(schema) {
-  let rules = smartQuotes.concat(ellipsis, emDash), type;
+  let rules = [], type;
   if (type = schema.nodes.blockquote) rules.push(blockQuoteRule(type));
   if (type = schema.nodes.ordered_list) rules.push(orderedListRule(type));
   if (type = schema.nodes.bullet_list) rules.push(bulletListRule(type));
@@ -24191,7 +24193,7 @@ class MessageHandler {
             // if it exists, and return. Input happens with every keystroke and editing operation, 
             // so generally delegate should be doing very little, except perhaps noting that the 
             // document has changed. However, what your delegate does is very application-specific.
-            delegate?.markupInput && delegate?.markupInput(this.editor);
+            delegate?.markupInput && delegate?.markupInput();
             return
         }
         switch (message) {
@@ -24206,18 +24208,18 @@ class MessageHandler {
                 delegate?.markupDidFocus && delegate?.markupDidFocus();
                 return
             case 'blur':
-                delegate?.markupDidFocus && delegate?.markupDidBlur();
+                delegate?.markupDidBlur && delegate?.markupDidBlur();
                 return
-            case "updateHeight":
+            case 'updateHeight':
                 delegate?.markupUpdateHeight && delegate?.markupUpdateHeight(getHeight());
                 return
-            case "selectionChanged":
+            case 'selectionChanged':
                 delegate?.markupSelectionChanged && delegate?.markupSelectionChanged();
                 return
-            case "clicked":
+            case 'clicked':
                 delegate?.markupClicked && delegate?.markupClicked();
                 return
-            case "searched":
+            case 'searched':
                 delegate?.markupSearched && delegate?.markupSearched();
                 return
             default:
@@ -24231,7 +24233,7 @@ class MessageHandler {
                     const messageData = JSON.parse(message);
                     this.receivedMessageData(messageData);
                 } catch {
-                    console.log("Unhandled message: " + message);
+                    console.log('Unhandled message: ' + message);
                 }
         }
     }
@@ -24247,44 +24249,44 @@ class MessageHandler {
         let delegate = config.delegate;
         let messageType = messageData.messageType;
         switch (messageType) {
-            case "log":
+            case 'log':
                 console.log(messageData.log);
                 return
-            case "error": {
+            case 'error': {
                 let code = messageData.code;
                 let message = messageData.message;
                 if (!code || !message) {
-                    console.log("Bad error message.");
+                    console.log('Bad error message.');
                     return
                 }
                 let info = messageData.info;
                 let alert = messageData.alert ?? true;
-                delegate?.markupError && delegate?.markupError(code, message, info, alert);
+                delegate?.markupError && delegate?.markupError(code, message, info, alert, this.editor);
                 return
             }
-            case "copyImage":
-                console.log("fix copyImage " + messageData.src);
+            case 'copyImage':
+                console.log('fix copyImage ' + messageData.src);
                 return
-            case "addedImage": {
+            case 'addedImage': {
                 if (!delegate?.markupImageAdded) return;
                 let divId = messageData.divId;
                 // Even if divid is identified, if it's empty or the editor element, then
                 // use the old call without divid to maintain compatibility with earlier versions
                 // that did not support multi-contenteditable divs.
-                if ((divId.length == 0) || (divId == "editor")) {
-                    delegate.markupImageAdded(messageData.src);
+                if ((divId.length == 0) || (divId == 'editor')) {
+                    delegate.markupImageAdded(messageData.src, 'editor');
                 } else if (!divId.length == 0) {
                     delegate.markupImageAdded(messageData.src, divId);
                 } else {
-                    console.log("Error: The div id for the image could not be decoded.");
+                    console.log('Error: The div id for the image could not be decoded.');
                 }
                 return
             }
-            case "deletedImage":
-                console.log("fix deletedImage " + messageData.src);
+            case 'deletedImage':
+                console.log('fix deletedImage ' + messageData.src);
                 return
-            case "buttonClicked":
-                console.log("fix deletedImage " + messageData.src);
+            case 'buttonClicked':
+                console.log('fix buttonClicked ' + messageData.src);
                 return
             default:
                 console.log(`Unknown message of type ${messageType}: ${messageData}.`);
@@ -24756,6 +24758,7 @@ const MU = {
     resetSelection,
     savedDataImage,
     searchFor,
+    setActiveView,
     setHTML,
     setStyle,
     setTestHTML,

package/package.json

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