tiny-markdown-editor 0.2.31 → 0.2.33

package/README.md

@@ -261,13 +261,34 @@ Here are some methods of the Editor object that might be useful in general inter
 | `getSelection(getAnchor)`                 | Gets the current selection / cursor position inside the editor. The parameter `getAnchor` (defaults to false) determines if the anchor (starting point) of the selection should be returned—if `getAnchor` is false (or omitted), the focus (end point) is returned, otherwise the starting point. If the selection is not inside the editor, `null` is returned. The method returns an object with the attributes `row` and `col` which contain the zero-based row (line) and column number of the selection position. |
 | `setSelection(focus, anchor)`             | Sets the selection within the editor. The parameters `focus` and `offset` are both of the format returned by `getSelection()` (containing attributes `row` and `col`). If `anchor` is `null` or omitted, a single-point selection (cursor position) will be set.                                                                                                                                                                                                                                                        |
 | `paste(text, anchor, focus)`              | Pastes / inserts text over either the current selection (if `anchor` and `focus` are null or omitted) or a specific range (if `anchor` and `focus` are passed in in the format as returned by `getSelection()`).                                                                                                                                                                                                                                                                                                        |
-| `wrapSelection(pre, post, anchor, focus)` | Wraps the current selection (if `anchor` and `focus` are `null` or omitted) or a specific selection (if `anchor` and `focus` are given) in the strings `pre` and `post`. For example, `wrapSelection('[', '](https://www.github.com)')` will wrap the selection with a link to GitHub.                                                                                                                                                                                                                                  |
+| `wrapSelection(pre, post, anchor, focus)` | Wraps the current selection (if `anchor` and `focus` are `null` or omitted) or a specific selection (if `anchor` and `focus` are given) in the strings `pre` and `post`. For example, `wrapSelection('[', '](https://www.github.com)')` will wrap the selection with a link to GitHub. Fires a `change` event (and updates the linked textarea, if any). Does nothing if the selection spans more than one line.                                                                                                             |
 | `addEventListener(type, listener)`        | Adds an [event listener](#event-listeners) to the editor. `type` is a string denoting the type (`change` or `selection`), and `listener` is a function which takes one parameter, the event.                                                                                                                                                                                                                                                                                                                            |
+| `removeEventListener(type, listener)`     | Removes an [event listener](#event-listeners) previously added with `addEventListener()`. The `listener` has to be the same function object that was passed to `addEventListener()`.                                                                                                                                                                                                                                                                                                                                    |
+| `destroy()`                               | Tears the editor down: removes every event listener it registered (including the one on `document`, which would otherwise keep the editor alive for the lifetime of the page), removes the editor element if TinyMDE created it, and shows the linked textarea again. An editor element you passed in yourself is left in the DOM, emptied and restored to the state it was in before. Safe to call more than once; the editor must not be used afterwards. Does **not** destroy a linked CommandBar—see [below](#commandbar-methods). |
 | `undo()`                                  | Undoes the last action.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `redo()`                                  | Redoes the last undone action.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `canUndo`                                 | `true` if there is an action that can be undone                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `canRedo`                                 | `true` if there is an action that can be redone                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
+### CommandBar methods
+
+| Method            | Description                                                                                                                                                                                                                                                                                        |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `setEditor(editor)` | Links the command bar to an editor, detaching it from the editor it was previously linked to (if any).                                                                                                                                                                                            |
+| `destroy()`       | Tears the command bar down: removes every event listener it registered (including the one on `document`), detaches from its editor, and removes the command bar element from the DOM. Safe to call more than once; the command bar must not be used afterwards.                                      |
+
+### Tearing down an editor
+
+If you create and destroy editors repeatedly—for example in a component-based framework such as React, Vue or Svelte, where the component holding the editor is mounted and unmounted as the user navigates—call `destroy()` when you are done with an instance. Both `Editor` and `CommandBar` register listeners on `document` that live as long as the page does otherwise.
+
+Editor and CommandBar are destroyed independently, so destroy both:
+
+```js
+// on unmount
+commandBar.destroy();
+editor.destroy();
+```
+
 ### Event listeners
 
 There are two event listener types that can be registered on the editor: `change` and `selection`.

package/dist/tiny-mde.css

@@ -5,7 +5,15 @@
   line-height:24px;
   outline: none;
   padding:5px;
-  height: 100%;
+  /* Count the padding towards the height below, so a fixed-height container
+     doesn't end up 10px short of fitting its own editor. Also makes the box
+     behave the same whether or not the embedding page has a border-box reset. */
+  box-sizing: border-box;
+  /* min-height rather than height so the editor fills a fixed-height container
+     when it's near-empty, but still grows with the content when it overflows.
+     With height:100% the box stayed at the container's height and the
+     background stopped painting at the fold (#182). */
+  min-height: 100%;
 }
 
 .TinyMDE.TinyMDE_empty {
@@ -145,14 +153,13 @@
 
 .TMImage {
   text-decoration: underline;
-  -webkit-text-decoration-color: #00ff00;
-          text-decoration-color: #00ff00;
+  text-decoration-color: #00ff00;
 }
 
+
 .TMLink {
   text-decoration: underline;
-  -webkit-text-decoration-color: #0000ff;
-          text-decoration-color: #0000ff;
+  text-decoration-color: #0000ff;
 }
 
 .TMLinkLabel {