Skip to content

Instantly share code, notes, and snippets.

@bantic
Forked from knownasilya/components.template-tag.js
Last active April 6, 2017 22:37
Show Gist options
  • Save bantic/394d5bf2b8894e0de391ebbf76249891 to your computer and use it in GitHub Desktop.
Save bantic/394d5bf2b8894e0de391ebbf76249891 to your computer and use it in GitHub Desktop.
mobiledoc template fill in
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'span',
classNames: ['template-tag'],
click() {
let tag = this.get('tag');
let promise = this.get('onClick')(tag);
promise.then((tagVal) => {
tag.setProperties({
tag: tagVal,
value: tagVal
});
});
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['template-tags-input'],
attributeBindings: ['contenteditable'],
contenteditable: true,
init() {
this._super(...arguments);
this.templateItems = [];
},
didInsertElement() {
// see https://github.com/bustlelabs/mobiledoc-kit#dom-parsing-hooks
let pastedTextPlugin = function(node, builder, {addSection, addMarkerable, nodeFinished}) {
if (node.nodeType === Node.TEXT_NODE) {
let text = node.textContent;
if (text.indexOf('{email}') !== -1) {
let [before, after] = text.split('{email}');
// docs http://bustlelabs.github.io/mobiledoc-kit/demo/docs/PostNodeBuilder.html#createAtom
before = builder.createMarker(before);
after = builder.createMarker(after);
let atom = builder.createAtom('tag', 'email');
addMarkerable(before);
addMarkerable(atom);
addMarkerable(after);
nodeFinished();
}
}
};
let editor = new Mobiledoc.Editor({
html: 'hi',
autofocus: false,
parserPlugins: [pastedTextPlugin],
atoms: [
{
name: 'tag',
type: 'dom',
render: ({ value, env, payload }) => {
let span = document.createElement('span');
span.textContent = `{${value}}`;
span.classList.add('template-tag');
span.onclick = () => {
this.get('onShowTags')().then((tag) => {
if (tag !== null) {
env.save(tag, payload);
}
});
};
return span;
}
}
]
});
editor.onTextInput({
text: '{',
run: (editor) => {
let { range } = editor;
let position = editor.post.tailPosition();
this.get('onShowTags')().then((tag) => {
editor.selectRange(range);
editor.deleteAtPosition(range.head, -1, {});
editor.insertAtom('tag', tag);
});
}
});
editor.render(this.element);
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['template-tags'],
actions: {
openAndSelect(open, close, reposition) {
open();
reposition();
let defer = Ember.RSVP.defer();
this.set('defer', defer);
return defer.promise.then((tag) => {
close();
return tag;
});
},
setTag(tag) {
let defer = this.get('defer');
defer.resolve(tag);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
tags: ['firstName', 'lastName', 'email'],
template: ''
});
import Ember from 'ember';
export function eq([val1, val2]/*, hash*/) {
return val1 === val2;
}
export default Ember.Helper.helper(eq);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.template-tags-input {
background-color: #efefef;
line-height: 1.5;
}
.template-tag {
color: tomato;
}
<h1>template-tags</h1>
<p>
Start typing text in the input below. Use `{` character to
start adding a template value. Click on one of the options to select.
Try copying and pasting this text:
hello there {email} something else
</p>
<br>
{{template-tags template=template tags=tags onChange=(action (mut template))}}
<div id="ember-basic-dropdown-wormhole"></div>
{{yield}}
{{#basic-dropdown as |dropdown|}}
{{template-tags-input tags=tags template=template
onShowTags=(action 'openAndSelect' dropdown.actions.open dropdown.actions.close dropdown.actions.reposition)
onTagClick=(action 'openAndSelect' dropdown.actions.open dropdown.actions.close dropdown.actions.reposition)}}
{{#dropdown.content}}
<ul>
{{#each tags as |tag|}}
<li>
<a onclick={{action 'setTag' tag}}>{{tag}}</a>
</li>
{{/each}}
</ul>
{{/dropdown.content}}
{{/basic-dropdown}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0",
"mobiledoc-kit": "https://unpkg.com/mobiledoc-kit@0.10.15/dist/global/mobiledoc-kit.js"
},
"addons": {
"ember-data": "2.12.1",
"ember-basic-dropdown": "0.31.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment