Global

The object whose methods comprise the MarkupEditor API.

Return the active editor's configurations as one object keyed to the config type.

Return the active editor's view.

Add a column before or after the current selection, whether it's in the header or body.

In MarkupEditor, the header is always colspanned fully, so we need to merge the headers if adding a column in created a new element in the header row.

Add a div with id to parentId.

Note that divs that contain a static button group are created in a single call that includes the buttonGroupJSON. However, button groups can also be added and removed dynamically. In that case, a button group div is added to a parent div using this call, and the parent has to already exist so that we can find it.

Add a header to the table at the selection.

Add a row before or after the current selection, whether it's in the header or body. For rows, AFTER = below; otherwise above.

Set the class of the table to style it using CSS. The default draws a border around everything.

Cancel searching, resetting search state.

Return a MenuItem that runs the command when selected.

The label is the same as the title, and the MenuItem will be enabled/disabled based on what cmd(state) returns unless otherwise specified in options.

Callback to show a string in the console, like console.log(), but for environments like Xcode.

Cut the selected image from the document.

Copy before deleting the image is done via a callback, which avoids potential CORS issues. Similarly, copying of an image (e.g., Ctrl-C) is all done by the side holding the copy buffer, not via JavaScript.

Deactivate search mode, stop intercepting Enter to search.

Remove the link at the selection, maintaining the same selection.

The selection can be at any point within the link or contain the full link, but cannot include areas outside of the link.

Delete the area at the table selection, either the row, col, or the entire table.

Redo the previously undone action.

Undo the previous action.

Clean out the document and replace it with an empty paragraph

Return the HTML that is contained in an empty document.

Focus immediately, leaving range alone.

Focus on the DIV with id.

Set the active document and report focus.

Return an array of src attributes for images that are encoded as data, empty if there are none.

Get the contents of the div with id divID or of the full doc.

Note: Clean is needed to avoid the selected ResizableImage from being passed-back with spans around it, which is what are used internally to represent the resizing handles and box around the selected image. However, this content of the DOM is only for visualization within the MarkupEditor and should not be included with the HTML contents. It is available here with clean !== true as an option in case it's needed for debugging.

Return the height of the editor element that encloses the text.

The padding-block is set in CSS to allow touch selection outside of text on iOS. An unfortunate side-effect of that setting is that getBoundingClientRect() returns a height that has nothing to do with the actual text, because it's been padded. A workaround for this is to get the computed style for editor using window.getComputedStyle(editor, null), and then asking that for the height. It does not include padding. This kind of works, except that I found the height changed as soon as I add a single character to the text. So, for example, it shows 21px when it opens with just a single <p>Foo</p>, but once you add a character to the text, the height shows up as 36px. If you remove padding-block, then the behavior goes away. To work around the problem, we set the padding block to 0 before getting height, and then set it back afterward. With this change, both the touch-outside-of-text works and the height is reported accurately. Height needs to be reported accurately for auto-sizing of a WKWebView based on its contents.

Return the image attributes at the selection

Return the link attributes at the selection.

Populate a dictionary of properties about the current selection and return it in a JSON form. This is the primary means that the find out what the selection is in the document, so we can tell if the selection is in a bolded word or a list or a table, etc.

Get the HTML contents and mark the selection from/to using the text identified by sel.

Do a context-sensitive indent.

If in a list, indent the item to a more nested level in the list if appropriate. If in a blockquote, add another blockquote to indent further. Else, put into a blockquote to indent.

Insert the image at src with alt text, signaling state changed when done loading. We leave the selection after the inserted image.

Insert a link to url. When the selection is collapsed, the url is inserted at the selection point as a link.

When done, leave the link selected.

Insert an empty table with the specified number of rows and cols.

Called to load user script and CSS before loading html.

The scriptFile and cssFile are loaded in sequence, with the single 'loadedUserFiles' callback only happening after their load events trigger. If neither scriptFile nor cssFile are specified, then the 'loadedUserFiles' callback happens anyway, since this ends up driving the loading process further.

Modify the attributes of the image at selection.

Open the default dialog to insert/edit images.

Open the default dialog to insert/edit links.

Do a context-sensitive outdent.

If in a list, outdent the item to a less nested level in the list if appropriate. If in a blockquote, remove a blockquote to outdent further. Else, do nothing.

Note that outdenting of a top-level list with a sublist doesn't work. TBH, I'm not sure why, but liftTarget returns null at the top-level in that case. As a result, the outdenting has to be done at least twice, the first of which splits the sublist from the top level. When this happens, we should probably just do the equivalent of toggleListType.

Pad the bottom of the text in editor to fill fullHeight.

Setting padBottom pads the editor all the way to the bottom, so that the focus area occupies the entire view. This allows long-press on iOS to bring up the context menu anywhere on the screen, even when text only occupies a small portion of the screen.

Paste html at the selection, replacing the selection as-needed.

Do a custom paste operation of "text only", which we will extract from the html ourselves. First we get a node that conforms to the schema, which by definition only includes elements in a form we recognize, no spans, styles, etc. The trick here is that we want to use the same code to paste text as we do for HTML, but we want to paste something that is the MarkupEditor-equivalent of unformatted text.

Add the toolbar to the registry. A toolbar holds cmdItems that can either be prepended or appended to the normal MarkupEditor toolbar.

If name is supplied, it is used to track it; else, the class of toolbar, derived using toolbar.constructor.name is used.

Add the config to the registry. If name is supplied, it is used to track it; else, the class of config, derived using config.constructor.name is used.

Add the delegate to the registry. If name is supplied, it is used to track it; else, the class of delegate, derived using delegate.constructor.name is used.

Add the handler to the registry. If name is supplied, it is used to track it; else, the class of handler, derived using handler.constructor.name is used.

Remove all divs in the document.

Remove the HTMLButton element with the given id.

Remove the div with the given id, and restore the selection to what it was before it is removed.

Render the items in a Dropdown in the view.

Render the content in view as a group of MenuItems.

Reset the selection to the beginning of the document.

We saved an image at a new location or translated it from data to a file reference, so we need to update the document to reflect it.

Search for text in direction.

When text is empty, search is canceled.

CAUTION: When activate is "true", search must be cancelled once started, or Enter will be intercepted to mean searcher.searchForward()/searchBackward()

Set the active editor's active view.

Set the contents of the editor.

The exported placeholderText is set after setting the contents.

Set the paragraph style at the selection to style

Set the HTML contents and select the text identified by sel, removing the sel markers in the process.

Note that because we run multiple tests against a given view, and we use setTestHTML to set the contents, we need to reset the view state completely each time. Otherwise, the history can be left in a state where an undo will work because the previous test executed redo.

Called to set attributes to the editor div, typically to , set spellcheck and autocorrect. Note that contenteditable should not be set for the editor element, even if it is included in the jsonString attributes. The same attributes are used for contenteditable divs, and the attribute is relevant in that case.

For testing purposes, invoke _doBlockquoteEnter programmatically.

TODO: Implement

For testing purposes, invoke extractContents() on the selected range to make sure the selection is as expected.

TODO: Implement

For testing purposes, invoke the splitCommand programmatically.

For testing purposes, create a ProseMirror Node that conforms to the MarkupEditor schema and return the resulting html as a string. Testing in this way lets us do simple pasteHTML tests with clean HTML and test the effect of schema-conformance on HTML contents separately. The html passed here is (typically) obtained from the paste buffer.

Use the same approach as testPasteHTMLPreprocessing, but augment with _minimalHTML to get a MarkupEditor-equivalent of unformatted text.

Toggle the selection to/from bold.

Toggle the selection to/from code.

Toggle the selection to/from italic.

Turn the list tag on and off for the selection, doing the right thing for different cases of selection.

If the selection is in a list of type listType, then outdent the items in the selection.

If the selection is in a list type that is different than listType, then wrap it in a new list.

We use a single command returned by multiWrapInList because the command can be assigned to a single button in JavaScript.

Toggle the search bar off and on.

Toggle the selection to/from strikethrough.

Toggle the selection to/from subscript.

Toggle the selection to/from superscript.

Toggle the selection to/from underline.