⚠️ 📖 DRAFT: <text-editor>

examples/index.html

@@ -41,9 +41,6 @@ <h3 id=html>Custom Elements</h3>
   <li>
     <a title='<input-output>' href=/examples/input-output.html>&lt;input-output&gt;</a>
 
-  <li>
-    <a title='<to-do>' href=/examples/to-do>&lt;to-do&gt;</a>
-
   <li>
     <a title='<multiple-choice>' href=/examples/multiple-choice>&lt;multiple-choice&gt;</a>
 
@@ -83,6 +80,10 @@ <h3 id=components>Components</h3>
 
 <ul>
   <li>
+    <a title='<to-do>' href=/examples/to-do>&lt;to-do&gt;</a>
+
+  <li>
+    <a href=/examples/text-editor>&lt;text-editor&gt;</a>
 
 </ul>
 

examples/text-editor/README.md

@@ -0,0 +1,66 @@
+# `<text-editor>`
+
+## Example:
+
+```html
+<link rel=import href=https://snuggsi.es/text-editor>
+<text-editor></text-editor>
+```
+
+## Browser Support
+
+  * IE 9+
+  * Chrome 5+
+  * Firefox 4+
+  * Safari 5+
+  * Opera 11.6+
+
+## Comparisons
+
+| library             | size (min+gzip) | size (min) | jquery | bootstrap |
+|---------------------|-----------------|------------|--------|-----------|
+| &lt;text-editor&gt; | 540Bytes        | 1.55kB     |        |           |
+| pell                | 1.11kB          | 2.85kB     |        |           |
+| medium-editor       | 27kB            | 105kB      |        |           |
+| quill               | 43kB            | 205kB      |        |           |
+| ckeditor            | 163kB           | 551kB      |        |           |
+| summernote          | 26kB            | 93kB       | x      | x         |
+| froala              | 52kB            | 186kB      | x      |           |
+| tinymce             | 157kB           | 491kB      | x      |           |
+
+
+## Actions
+
+  - Bold
+  - Italic
+  - Underline
+  - Strike-through
+  - Heading 1
+  - Heading 2
+  - Paragraph
+  - Quote
+  - Ordered List
+  - Unordered List
+  - Horizontal Rule
+  - Link
+
+## Roadmap
+
+  - Subscript
+  - Superscript
+  - Font Name
+  - Font Size
+  - Indent
+  - Outdent
+  - Clear Formatting
+  - Undo
+  - Redo
+
+## Quirks
+
+https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md
+
+
+### License
+
+MIT

examples/text-editor/index.html

@@ -0,0 +1,86 @@
+<title>&lt;text-editor&gt;</title>
+
+<!--
+<link rel=stylesheet href=https://devpunks.herokuapp.com/typography.css>
+<link rel=stylesheet href=https://devpunks.herokuapp.com/form.css>
+-->
+
+<script src=/snuggsi.es></script>
+<script name=polyfill src=//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0/webcomponents-hi-ce.js></script>
+
+<link rel=import href=/examples/header-group>
+
+<header-group>
+  <h2 slot=header>&lt;text-editor&gt;</h2>
+  <a  slot=subheader title='See more component examples' href=/examples>See more component examples</a>
+</header-group>
+
+<text-editor>
+
+  <menu onclick=execute>
+  <template name=actions>
+    <button name={name} icon={icon} title={title}>{title}</button>
+  </template>
+  </menu>
+
+  <article contenteditable>This is default text for article</article>
+
+<style>
+
+text-editor > article {
+  display: block;
+  width: 90vw;
+  height: 60vh;
+  margin: 0 auto
+}
+text-editor > article:hover,
+text-editor > article:focus
+  { outline: 2px dashed rgba(20, 20, 20, 0.2) }
+
+text-editor > article:focus {
+  background: rgba(255, 255, 0, 0.2)
+}
+
+</style>
+</text-editor>
+
+<script defer>
+
+Element `text-editor`
+
+(class extends HTMLElement {
+
+  execute (event, button = event.target, action = this.find (button.name)) {
+    (HTMLButtonElement === button.constructor)
+      && document.execCommand (action.command, false, action.value)
+  }
+
+  find (name) {
+    for (var i = 0; i < this.actions.length; i++)
+      if (name === this.actions [i].name)
+          return this.actions [i]
+  }
+
+  get actions () {
+    return [
+      { icon: '¶', name: 'bold', title: 'Bold Text', command: 'bold' }
+    , { icon: '¶', name: 'italic', title: 'Italicize Text', command: 'italic' }
+    , { icon: '¶', name: 'underline', title: 'Underline Text', command: 'underline' }
+    , { icon: '¶', name: 'left', title: 'Left Justify Text', command: 'justifyLeft' }
+    , { icon: '¶', name: 'center', title: 'Center Justify Text', command: 'justifyCenter' }
+    , { icon: '¶', name: 'right', title: 'Right Justify Text', command: 'justifyRight' }
+    , { icon: '¶', name: 'strikethrough', title: 'Strikethrough Text', command: 'strikeThrough' }
+    , { icon: '¶', name: 'paragraph', title: 'Convert Text to Paragraph', command: 'insertParagraph' }
+    , { icon: '¶', name: 'ulist', title: 'Convert to Unordered List', command: 'insertUnorderedist' }
+    , { icon: '¶', name: 'olist', title: 'Convert to Ordered List', command: 'insertOrderedist' }
+    , { icon: '¶', name: 'line', title: 'Insert Horizontal Rule', command: 'insertHorizontalRule' }
+    , { icon: '¶', name: 'link', title: 'Create URL Link', command: 'createLink' }
+    , { icon: '¶', name: 'header', title: 'Create Header', command: 'formatBlock', value: '<h1>' }
+    , { icon: '¶', name: 'subheader', title: 'Create Sub-Header', command: 'formatBlock', value: '<h2>' }
+    ]
+  }
+})
+
+</script>
+
+<script src=/browser-sync.es></script>

index.html

@@ -667,9 +667,6 @@ <h3>Further Learning</h3>
         <li>
           <a href=/examples/input-output.html>&lt;input-output&gt;</a>
 
-        <li>
-          <a href=/examples/to-do>&lt;to-do&gt;</a>
-
         <li>
           <a href=/examples/multiple-choice>&lt;multiple-choice&gt;</a>
 
@@ -711,6 +708,11 @@ <h3>Further Learning</h3>
     <nav>
       <ul>
         <li>
+          <a href=/examples/to-do>&lt;to-do&gt;</a>
+
+        <li>
+          <a href=/examples/text-editor>&lt;text-editor&gt;</a>
+
     </nav>
 
   </details>