tiny-markdown-editor 0.2.17 → 0.2.19

package/README.md

@@ -126,6 +126,7 @@ Please note:
 | `editor`   | The DOM div element which the TinyMDE DOM element will modify (get created from). The `editor` attribute can be given as either an ID or the DOM element itself (i.e., the result of a call to `document.getElementById()`). Useful when you already have references to the element even before TinyMDE creation, or when you want to keep exact ordering of the DOM element among other sibling elements.                                                                                                                          |
 | `content`  | The initial content of the editor, given as a string. May contain newlines.                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `textarea` | The textarea that will be linked to the editor. The textarea can be given as an ID or as the DOM element itself (i.e., the result of a call to `document.getElementById()`). The content of the editor will be reflected in the value of the textarea at any given point in time. If `textarea` is given and `content` isn't, then the editor content will be initialized to the textarea's value. If `textarea` is given and `element` isn't, then the editor element will be created as the next sibling of the textarea element. |
+| `placeholder` | A placeholder string displayed when the editor is empty. If not given but a `textarea` with a `placeholder` attribute is linked, the textarea's placeholder will be used. The placeholder is shown in gray text and disappears as soon as content is entered. It can be styled via the `.TinyMDE.TinyMDE_empty::before` element in CSS. |
 | `customInlineGrammar` | An object containing custom inline grammar rules to extend TinyMDE's formatting capabilities. Each rule consists of a regular expression and HTML replacement string. See [Custom Inline Grammar](#custom-inline-grammar) for details. |
 
 If neither `element` not `textarea` are given, the editor element will be created as the last child element of the `body` element (probably not what you want in most cases, so you probably want to pass at least one of `element` or `textarea`).

package/dist/tiny-mde.css

@@ -8,6 +8,17 @@
   height: 100%;
 }
 
+.TinyMDE.TinyMDE_empty {
+  position: relative;
+}
+
+.TinyMDE.TinyMDE_empty::before {
+  content: attr(data-placeholder);
+  color: #a0a0a0;
+  pointer-events: none;
+  position: absolute;
+}
+
 .TMBlankLine {
   height:24px;
 }