Open snuggs opened 7 years ago
@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 notifications@github.com 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 https://github.com/devpunks/snuggsi/pull/115#issuecomment-317271264, 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>
WYSIWYG (Actually 400Bytes brotli compressed but that would be showing off :-) ):
<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 Hey, any [life] updates?
Finishes #104
Related Links