⚠️ 📖 DRAFT: <text-editor>

[snuggs]

Finishes #104

Related Links

• https://developer.mozilla.org/en/docs/Web/API/Document/execCommand

[snuggs]

@pachonk VERY interesting feature in the platform /cc @brandondees https://developer.mozilla.org/en/docs/Web/API/Document/execCommand

[snuggs]

@pachonk are we interested in "medium style" editing?

[brandondees]

I don't love it, but then again I'm a vim user and I prefer markdown.... maybe it's progress, I don't know. The A11y treatment is key for stuff like this.

[brandondees]

that's very interesting to see there's a whole set of features for supporting this. how feasible is it to effectively polyfill those instead of creating yet another api?

[snuggs]

@brandondees i mean do we care that much about Android browsers? Even Android users don't use the default browser for the most part. Usually use Chrome.

[grepsedawk]

Android doesn't ship with browser anymore, FWIW. 3rd party only.

…

On Sun, Jul 23, 2017, 1:10 PM snuggs ***@***.***> wrote: @brandondees <https://github.com/brandondees> i mean do we care that much about A [image: capture d ecran 2017-07-23 a 14 09 58] <https://user-images.githubusercontent.com/38223/28501754-bb3e5e58-6fb0-11e7-9b20-3ff2c8cc6705.png> ndroid browsers? Even Android users don't use the default browser for the most part. Usually use Chrome. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#115 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGaPSxyrQo4B_YpidlSlyZJz9Gd_OKZWks5sQ4ysgaJpZM4Oe-Di> .

[snuggs]

Exactly @pachonk. Great input

[brandondees]

d'oh, i was looking at MDN which says it's FF only. they really gotta figure out a better way to keep that info up to date...

so, no polyfill needed. let's do it.

[snuggs]

@brandondees @pachonk @mrbernnz @janz93 @kurtcagle @dcchuck @halorium @tmornini comparison table for our <text-editor> WYSIWYG (Actually 400Bytes brotli compressed but that would be showing off :-) ):

[snuggs]

<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>
</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>

[grepsedawk]

/bump
Hey, any [life] updates?