⚠️ 📖 DRAFT: <text-editor> #115
Conversation
|
@pachonk VERY interesting feature in the platform /cc @brandondees https://developer.mozilla.org/en/docs/Web/API/Document/execCommand |
|
@pachonk are we interested in "medium style" editing? |
|
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. |
|
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? |
|
@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.
|
|
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>
.
|
|
Exactly @pachonk. Great input |
|
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. |
|
@brandondees @pachonk @mrbernnz @janz93 @kurtcagle @dcchuck @halorium @tmornini comparison table for our |
<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> |
|
/bump |
Finishes #104
Related Links