tiny-markdown-editor 0.2.28 → 0.2.29

package/README.md

@@ -16,7 +16,7 @@ TinyMDE can be used as a drop-in text area replacement.
 
 TinyMDE was motivated by wanting to improve on [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) which is extremely flexible but had two shortcomings:
 
-- EasyMDE depends on [Code Mirror](https://codemirror.net/) for editing and formatting. CodeMirror is a full fledged and customizable in-browser code editor, and has a price: EasyMDE's JS file is 280kb in size. TinyMDE is less than 70kb (less than a quarter of EasyMDE's size), the "tiny" version without the toolbar even below 60kb!
+- EasyMDE depends on [Code Mirror](https://codemirror.net/) for editing and formatting. CodeMirror is a full fledged and customizable in-browser code editor, and has a price: EasyMDE's JS file is 280kb in size. TinyMDE is less than 90kb (less than a third of EasyMDE's size), the "tiny" version without the toolbar even below 80kb!
 - CodeMirror doesn't work well on mobile, at least not for writing prose: mobile phone OS auto-correction functionality, which many people rely on to quickly type on mobile, is not supported by CodeMirror.
 
 ## Install TinyMDE

package/dist/demo.html

@@ -15,6 +15,9 @@
 [ref]: https://www.jefago.com
 [ref link]: </this has spaces> "and a title"
 
+- [ ] Task list item (click the box to toggle)
+- [x] Completed task with *inline* formatting
+
 
 Some <html> </tags> right here
 <html a="b" >
@@ -56,14 +59,15 @@ And another [ref link][].
 A valid [link to a ref][ref] here.
 An invalid [ref link][nope].
 An [inline link](/inline) here.
-Some [inline](<links>) [inline](<link link> "title title") [inline](<link link> (title title)) [inline](  <link link>   'title \\' title') ss
+Some valid [inline](<links>) [inline](<link link> "title \" title") [inline](<link link> (title title)) [inline](  <link link>   'title \' title') ss
 [Inline](  /with invalid title text  ) here.
 [Inline]( </with (complex) dest>  (and title text) ) here.
 [Inline](<> "") link with empty delimiters
 [Inline]() link completely empty
 [Valid link](")))") here
 [Valid link](<)))>) here
-[Invalid](  ( ) here
+[Invalid](  ( ) here  
+[Invalid](<link> "title \\" here")
 This one [is *a](link) over* here, but not an emphasis.
 Here [the [inner](one) is] the valid link.
 An ![image [can](have) a](link) inside it.
@@ -99,7 +103,11 @@ block
 - 
 
 1) OL
-2) OL</textarea>
+2) OL
+
+- [ ] Task list item (click the box to toggle)
+- [x] Completed task with *inline* formatting
+1. [ ] Ordered task item</textarea>
     </div>
     <div id="status" style="text-align:right">- : -</div>
     <script>

package/dist/tiny-mde.css

@@ -96,6 +96,53 @@
   color:#ff8080;
 }
 
+/* Task list checkbox: only the inner character (space/x/X) of `[ ]` / `[x]` is rendered as a drawn
+   checkbox. The character stays in the DOM as real, navigable text (its glyph is just hidden), so
+   the line's text content still equals its source. The surrounding `[` `]` keep the .TMMark style. */
+
+.TMMark_TMTask {
+  color: #e0e0e0;
+}
+
+.TMCheckbox {
+  position: relative;
+  color: transparent;
+  caret-color: #000000;
+  cursor: pointer;
+  font-family: monospace;
+}
+
+.TMCheckbox::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 0.85em;
+  height: 0.85em;
+  border: 1px solid #c0c0c0;
+  box-sizing: border-box;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.TMCheckbox_checked::before {
+  border-color: #2aa775;
+}
+
+.TMCheckbox_checked::after {
+  content: "✓";
+  color: #2aa775;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  text-align: center;
+  vertical-align: top;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
 .TMImage {
   text-decoration: underline;
   -webkit-text-decoration-color: #00ff00;