Integrate contentEditable into can.Component/can.view.tag?

Hi All!

I'm attempting to determine the best route method to use to integrate Scribe and can.Component.
A wee bit of context. Scribe wraps a raw element, either a fragment, or a node inserted into the Dom which has it's contenteditable attr set to true, with normalizing logic to clear up cross browser inconsistencies. However, due to the way it works live binding doesn't work.

The approch I'm am currently taking is to use can.view.tag to define a tag and wrap it with scribe. However, I am encountering some pitfalls. The can.view.tag api yields the raw mustache/stash context, not a context based on the attributes passed in. This means I have duplicated code likely already present in the canjs code base.

My goal here is to collect feedback on how best to implement this component.

Here is my current attempt.

1. define(
2.     ['can', '../viewModels/scribe-editor','scribe'],
3.     function(can, ScribeEditorVM, Scribe)
4. {
5.    
6.     var commands = ['createLink'],
7.         attributes = ['content'];
8.        
9.     function getValidValue(map, name){
10.         if(name[0] === '{' && name[name.length-1] === '}'){
11.             return map.attr(name.substr(1, name.length-2));
12.         } else {
13.             return map.attr(name);
14.         }
15.     }
16.        
17.     can.view.tag('scribe-editor', function(el, context){
18.        
19.         var vm = new ScribeEditorVM(), scribe = new Scribe(el);
20.        
21.         attributes.forEach(function(attrName){
22.             var attr = el.getAttribute(attrName);
23.             // Specifically this feels like duplication of code, is there a better way?
    
24.             vm.attr(attrName, getValidValue(context.scope, attr));
25.         });
26.        
27.         scribe.setContent(vm.attr('content'));
28.        
29.         vm.on('change', function(){
30.             console.log('context changed');
31.             console.log(arguments);
32.         })
33.        
34.        
35.         function checkCommandState(commandName){
36.             var selection = new scribe.api.Selection(),
37.                 command = scribe.getCommand(commandName);
38.                
39.             if(selection.range && command.queryEnabled()){
40.                 scope.attr(commandName, command.queryState());
41.             }  
42.            
43.         }
44.        
45.         scribe.on('content-changed', function(){
46.             vm.attr('content', scribe.getContent());
47.             commands.forEach(checkCommandState);
48.         });
49.        
50.     })
51.    
52. });