Merge pull request #347 from herby/snippet

Adding "declarative custom tags" into HTMLCanvas.

js/Canvas.deploy.js

@@ -1545,6 +1545,132 @@ return $1;
 smalltalk.HTMLCanvas.klass);
 
 
+smalltalk.addClass('HtmlSnippet', smalltalk.Object, ['snippets'], 'Canvas');
+smalltalk.addMethod(
+"_addSnippet_",
+smalltalk.method({
+selector: "addSnippet:",
+fn: function (anAssociation){
+var self=this;
+var snippet;
+return smalltalk.withContext(function($ctx1) { 
_st(_st(self)._snippets())._add_(anAssociation);
+snippet=_st(anAssociation)._value();
+_st(_st((smalltalk.ClassBuilder || ClassBuilder))._new())._installMethod_forClass_category_(_st(_st((function(htmlReceiver){
+return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snippet_(snippet);
+}, function($ctx2) {$ctx2.fillBlock({htmlReceiver:htmlReceiver},$ctx1)})}))._currySelf())._asCompiledMethod_(_st(anAssociation)._key()),(smalltalk.HTMLCanvas || HTMLCanvas),"**snippets");
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation,snippet:snippet}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_",
+smalltalk.method({
+selector: "at:",
+fn: function (aString){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1;
+$1=_st(self["@snippets"])._at_(aString);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:",{aString:aString}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_ifAbsent_",
+smalltalk.method({
+selector: "at:ifAbsent:",
+fn: function (aString,aBlock){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1;
+$1=_st(self["@snippets"])._at_ifAbsent_(aString,aBlock);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:ifAbsent:",{aString:aString,aBlock:aBlock}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_loadFromJQuery_",
+smalltalk.method({
+selector: "loadFromJQuery:",
+fn: function (aJQuery){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st(_st(_st(aJQuery)._find_("[data-snippet]"))._toArray())._do_((function(each){
+var jq,name;
+return smalltalk.withContext(function($ctx2) {
jq=_st(each)._asJQuery();
+jq;
+name=_st(jq)._attr_("data-snippet");
+name;
+$1=_st(name).__eq("*");
+if(! smalltalk.assert($1)){
+$2=_st(_st("^\x5c*")._asRegexp())._test_(name);
+if(smalltalk.assert($2)){
+name=_st(name)._allButFirst();
+name;
+_st(jq)._attr_put_("data-snippet","*");
+} else {
+_st(jq)._removeAttr_("data-snippet");
+};
+return _st(self)._addSnippet_(_st(name).__minus_gt(_st(_st(jq)._detach())._get_((0))));
+};
+}, function($ctx2) {$ctx2.fillBlock({each:each,jq:jq,name:name},$ctx1)})}));
+return self}, function($ctx1) {$ctx1.fill(self,"loadFromJQuery:",{aJQuery:aJQuery}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_snippets",
+smalltalk.method({
+selector: "snippets",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $2,$1;
+$2=self["@snippets"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@snippets"]=smalltalk.HashedCollection._fromPairs_([]);
+$1=self["@snippets"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"snippets",{}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+
+smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
+smalltalk.addMethod(
+"_current",
+smalltalk.method({
+selector: "current",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $2,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@current"]=_st(self)._new();
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})}
+}),
+smalltalk.HtmlSnippet.klass);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.klass.fn.prototype._initialize.apply(_st(self), []);
+_st(_st(self)._current())._loadFromJQuery_(_st(document)._asJQuery());
+return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HtmlSnippet.klass)})}
+}),
+smalltalk.HtmlSnippet.klass);
+
+
 smalltalk.addClass('TagBrush', smalltalk.Object, ['canvas', 'element'], 'Canvas');
 smalltalk.addMethod(
 "_accesskey_",
@@ -2453,6 +2579,20 @@ return self}, function($ctx1) {$ctx1.fill(self,"appendToJQuery:",{aJQuery:aJQuer
 }),
 smalltalk.BlockClosure);
 
+smalltalk.addMethod(
+"_asSnippet",
+smalltalk.method({
+selector: "asSnippet",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_(_st(self)._asString());
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"asSnippet",{}, smalltalk.CharacterArray)})}
+}),
+smalltalk.CharacterArray);
+
 smalltalk.addMethod(
 "_appendToBrush_",
 smalltalk.method({
@@ -2486,6 +2626,28 @@ return self}, function($ctx1) {$ctx1.fill(self,"asJQuery",{}, smalltalk.String)}
 }),
 smalltalk.String);
 
+smalltalk.addMethod(
+"_snippet_",
+smalltalk.method({
+selector: "snippet:",
+fn: function (anElement){
+var self=this;
+var clone,caret;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+clone=_st(_st(anElement)._asJQuery())._clone();
+_st(self)._with_(_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(clone,self));
+caret=_st(clone)._find_("[data-snippet=\x22*\x22]");
+$1=_st(_st(caret)._toArray())._isEmpty();
+if(smalltalk.assert($1)){
+caret=clone;
+caret;
+};
+$2=_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(_st(caret)._removeAttr_("data-snippet"),self);
+return $2;
+}, function($ctx1) {$ctx1.fill(self,"snippet:",{anElement:anElement,clone:clone,caret:caret}, smalltalk.HTMLCanvas)})}
+}),
+smalltalk.HTMLCanvas);
+
 smalltalk.addMethod(
 "_asJQuery",
 smalltalk.method({

js/Canvas.js

@@ -2135,6 +2135,168 @@ referencedClasses: []
 smalltalk.HTMLCanvas.klass);
 
 
+smalltalk.addClass('HtmlSnippet', smalltalk.Object, ['snippets'], 'Canvas');
+smalltalk.HtmlSnippet.comment="HtmlSnippet instance is the registry of html snippets.\x0aHtmlSnippet current is the public singleton instance.\x0a\x0aAt the beginning, it scans the document for any html elements\x0awith 'data-snippet=\x22foo\x22' attribute and takes them off the document,\x0aremembering them in the store under the specified name.\x0aIt also install method #foo into HTMLCanvas dynamically.\x0a\x0aEvery html snippet should mark a 'caret', a place where contents\x0acan be inserted, by 'data-snippet=\x22*\x22' (a special name for caret).\x0aFor example:\x0a\x0a<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>\x0a\x0adefines a list element with a link inside; the link itself is marked as a caret.\x0a\x0aYou can later issue\x0a\x0ahtml menuelement href: '/foo'; with: 'A foo'\x0a\x0ato insert the whole snippet and directly manipulate the caret, so it renders:\x0a\x0a<li class='...'><a href='/foo'>A foo</a></li>\x0a\x0aFor a self-careting tags (not very useful, but you do not need to fill class etc.\x0ayou can use\x0a\x0a<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>\x0a\x0aand in code later do:\x0a\x0ahtml bar with: [ xxx ]\x0a\x0ato render\x0a\x0a<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>\x0a"
+smalltalk.addMethod(
+"_addSnippet_",
+smalltalk.method({
+selector: "addSnippet:",
+category: 'snippet installation',
+fn: function (anAssociation){
+var self=this;
+var snippet;
+return smalltalk.withContext(function($ctx1) { 
_st(_st(self)._snippets())._add_(anAssociation);
+snippet=_st(anAssociation)._value();
+_st(_st((smalltalk.ClassBuilder || ClassBuilder))._new())._installMethod_forClass_category_(_st(_st((function(htmlReceiver){
+return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snippet_(snippet);
+}, function($ctx2) {$ctx2.fillBlock({htmlReceiver:htmlReceiver},$ctx1)})}))._currySelf())._asCompiledMethod_(_st(anAssociation)._key()),(smalltalk.HTMLCanvas || HTMLCanvas),"**snippets");
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation,snippet:snippet}, smalltalk.HtmlSnippet)})},
+args: ["anAssociation"],
+source: "addSnippet: anAssociation\x0a\x09| snippet |\x0a\x09self snippets add: anAssociation.\x0a    snippet := anAssociation value.\x0a    ClassBuilder new\x0a    \x09installMethod: ([ :htmlReceiver | htmlReceiver snippet: snippet ] currySelf asCompiledMethod: anAssociation key)\x0a        forClass: HTMLCanvas\x0a        category: '**snippets'",
+messageSends: ["add:", "snippets", "value", "installMethod:forClass:category:", "asCompiledMethod:", "key", "currySelf", "snippet:", "new"],
+referencedClasses: ["HTMLCanvas", "ClassBuilder"]
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_",
+smalltalk.method({
+selector: "at:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1;
+$1=_st(self["@snippets"])._at_(aString);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:",{aString:aString}, smalltalk.HtmlSnippet)})},
+args: ["aString"],
+source: "at: aString\x0a\x09^ snippets at: aString",
+messageSends: ["at:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_ifAbsent_",
+smalltalk.method({
+selector: "at:ifAbsent:",
+category: 'accessing',
+fn: function (aString,aBlock){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1;
+$1=_st(self["@snippets"])._at_ifAbsent_(aString,aBlock);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:ifAbsent:",{aString:aString,aBlock:aBlock}, smalltalk.HtmlSnippet)})},
+args: ["aString", "aBlock"],
+source: "at: aString ifAbsent: aBlock\x0a\x09^ snippets at: aString ifAbsent: aBlock",
+messageSends: ["at:ifAbsent:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_loadFromJQuery_",
+smalltalk.method({
+selector: "loadFromJQuery:",
+category: 'snippet installation',
+fn: function (aJQuery){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st(_st(_st(aJQuery)._find_("[data-snippet]"))._toArray())._do_((function(each){
+var jq,name;
+return smalltalk.withContext(function($ctx2) {
jq=_st(each)._asJQuery();
+jq;
+name=_st(jq)._attr_("data-snippet");
+name;
+$1=_st(name).__eq("*");
+if(! smalltalk.assert($1)){
+$2=_st(_st("^\x5c*")._asRegexp())._test_(name);
+if(smalltalk.assert($2)){
+name=_st(name)._allButFirst();
+name;
+_st(jq)._attr_put_("data-snippet","*");
+} else {
+_st(jq)._removeAttr_("data-snippet");
+};
+return _st(self)._addSnippet_(_st(name).__minus_gt(_st(_st(jq)._detach())._get_((0))));
+};
+}, function($ctx2) {$ctx2.fillBlock({each:each,jq:jq,name:name},$ctx1)})}));
+return self}, function($ctx1) {$ctx1.fill(self,"loadFromJQuery:",{aJQuery:aJQuery}, smalltalk.HtmlSnippet)})},
+args: ["aJQuery"],
+source: "loadFromJQuery: aJQuery\x0a\x09\x22Finds and takes out all snippets out of aJQuery.\x0a    Installs it into self.\x22\x0a\x09(aJQuery find: '[data-snippet]') toArray do: [ :each |\x0a    \x09| jq name |\x0a        jq := each asJQuery.\x0a        name := jq attr: 'data-snippet'.\x0a        name = '*' ifFalse: [\x0a        \x09('^\x5c*' asRegexp test: name) ifTrue: [ name := name allButFirst. jq attr: 'data-snippet' put: '*' ]\x0a          \x09\x09ifFalse: [ jq removeAttr: 'data-snippet' ].\x0a            self addSnippet: name -> (jq detach get: 0) ]]\x0a",
+messageSends: ["do:", "asJQuery", "attr:", "ifFalse:", "ifTrue:ifFalse:", "allButFirst", "attr:put:", "removeAttr:", "test:", "asRegexp", "addSnippet:", "->", "get:", "detach", "=", "toArray", "find:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_snippets",
+smalltalk.method({
+selector: "snippets",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $2,$1;
+$2=self["@snippets"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@snippets"]=smalltalk.HashedCollection._fromPairs_([]);
+$1=self["@snippets"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"snippets",{}, smalltalk.HtmlSnippet)})},
+args: [],
+source: "snippets\x0a\x09^snippets ifNil: [ snippets := #{} ]\x0a",
+messageSends: ["ifNil:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+
+smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
+smalltalk.addMethod(
+"_current",
+smalltalk.method({
+selector: "current",
+category: 'instance creation',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $2,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@current"]=_st(self)._new();
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})},
+args: [],
+source: "current\x0a\x09^ current ifNil: [ current := self new ]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet.klass);
+
+smalltalk.addMethod(
+"_initialize",
+smalltalk.method({
+selector: "initialize",
+category: 'initialization',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.klass.fn.prototype._initialize.apply(_st(self), []);
+_st(_st(self)._current())._loadFromJQuery_(_st(document)._asJQuery());
+return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HtmlSnippet.klass)})},
+args: [],
+source: "initialize\x0a\x09super initialize.\x0a\x09self current loadFromJQuery: document asJQuery",
+messageSends: ["initialize", "loadFromJQuery:", "asJQuery", "current"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet.klass);
+
+
 smalltalk.addClass('TagBrush', smalltalk.Object, ['canvas', 'element'], 'Canvas');
 smalltalk.addMethod(
 "_accesskey_",
@@ -3434,6 +3596,25 @@ referencedClasses: ["HTMLCanvas"]
 }),
 smalltalk.BlockClosure);
 
+smalltalk.addMethod(
+"_asSnippet",
+smalltalk.method({
+selector: "asSnippet",
+category: '*Canvas',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_(_st(self)._asString());
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"asSnippet",{}, smalltalk.CharacterArray)})},
+args: [],
+source: "asSnippet\x0a\x09^ HtmlSnippet current at: self asString",
+messageSends: ["at:", "asString", "current"],
+referencedClasses: ["HtmlSnippet"]
+}),
+smalltalk.CharacterArray);
+
 smalltalk.addMethod(
 "_appendToBrush_",
 smalltalk.method({
@@ -3482,6 +3663,33 @@ referencedClasses: []
 }),
 smalltalk.String);
 
+smalltalk.addMethod(
+"_snippet_",
+smalltalk.method({
+selector: "snippet:",
+category: '*Canvas',
+fn: function (anElement){
+var self=this;
+var clone,caret;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+clone=_st(_st(anElement)._asJQuery())._clone();
+_st(self)._with_(_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(clone,self));
+caret=_st(clone)._find_("[data-snippet=\x22*\x22]");
+$1=_st(_st(caret)._toArray())._isEmpty();
+if(smalltalk.assert($1)){
+caret=clone;
+caret;
+};
+$2=_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(_st(caret)._removeAttr_("data-snippet"),self);
+return $2;
+}, function($ctx1) {$ctx1.fill(self,"snippet:",{anElement:anElement,clone:clone,caret:caret}, smalltalk.HTMLCanvas)})},
+args: ["anElement"],
+source: "snippet: anElement\x0a\x09\x22Adds clone of anElement, finds [data-snippet=\x22\x22*\x22\x22] subelement\x0a    and returns TagBrush as if that subelement was just added.\x0a    \x0a    Rarely needed to use directly, use `html foo` dynamically installed method\x0a    for a snippet named foo.\x22\x0a    | clone caret |\x0a    clone := anElement asJQuery clone.\x0a    self with: (TagBrush fromJQuery: clone canvas: self).\x0a    caret := clone find: '[data-snippet=\x22*\x22]'.\x0a    caret toArray isEmpty ifTrue: [ caret := clone ].\x0a    ^TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self",
+messageSends: ["clone", "asJQuery", "with:", "fromJQuery:canvas:", "find:", "ifTrue:", "isEmpty", "toArray", "removeAttr:"],
+referencedClasses: ["TagBrush"]
+}),
+smalltalk.HTMLCanvas);
+
 smalltalk.addMethod(
 "_asJQuery",
 smalltalk.method({

st/Canvas.st

@@ -489,6 +489,101 @@ onJQuery: aJQuery
 		yourself
 ! !
 
+Object subclass: #HtmlSnippet
+	instanceVariableNames: 'snippets'
+	package: 'Canvas'!
+!HtmlSnippet commentStamp!
+HtmlSnippet instance is the registry of html snippets.
+HtmlSnippet current is the public singleton instance.
+
+At the beginning, it scans the document for any html elements
+with 'data-snippet="foo"' attribute and takes them off the document,
+remembering them in the store under the specified name.
+It also install method #foo into HTMLCanvas dynamically.
+
+Every html snippet should mark a 'caret', a place where contents
+can be inserted, by 'data-snippet="*"' (a special name for caret).
+For example:
+
+<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>
+
+defines a list element with a link inside; the link itself is marked as a caret.
+
+You can later issue
+
+html menuelement href: '/foo'; with: 'A foo'
+
+to insert the whole snippet and directly manipulate the caret, so it renders:
+
+<li class='...'><a href='/foo'>A foo</a></li>
+
+For a self-careting tags (not very useful, but you do not need to fill class etc.
+you can use
+
+<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>
+
+and in code later do:
+
+html bar with: [ xxx ]
+
+to render
+
+<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>!
+
+!HtmlSnippet methodsFor: 'accessing'!
+
+at: aString
+	^ snippets at: aString
+!
+
+at: aString ifAbsent: aBlock
+	^ snippets at: aString ifAbsent: aBlock
+!
+
+snippets
+	^snippets ifNil: [ snippets := #{} ]
+! !
+
+!HtmlSnippet methodsFor: 'snippet installation'!
+
+addSnippet: anAssociation
+	| snippet |
+	self snippets add: anAssociation.
+    snippet := anAssociation value.
+    ClassBuilder new
+    	installMethod: ([ :htmlReceiver | htmlReceiver snippet: snippet ] currySelf asCompiledMethod: anAssociation key)
+        forClass: HTMLCanvas
+        category: '**snippets'
+!
+
+loadFromJQuery: aJQuery
+	"Finds and takes out all snippets out of aJQuery.
+    Installs it into self."
+	(aJQuery find: '[data-snippet]') toArray do: [ :each |
+    	| jq name |
+        jq := each asJQuery.
+        name := jq attr: 'data-snippet'.
+        name = '*' ifFalse: [
+        	('^\*' asRegexp test: name) ifTrue: [ name := name allButFirst. jq attr: 'data-snippet' put: '*' ]
+          		ifFalse: [ jq removeAttr: 'data-snippet' ].
+            self addSnippet: name -> (jq detach get: 0) ]]
+! !
+
+HtmlSnippet class instanceVariableNames: 'current'!
+
+!HtmlSnippet class methodsFor: 'initialization'!
+
+initialize
+	super initialize.
+	self current loadFromJQuery: document asJQuery
+! !
+
+!HtmlSnippet class methodsFor: 'instance creation'!
+
+current
+	^ current ifNil: [ current := self new ]
+! !
+
 Object subclass: #TagBrush
 	instanceVariableNames: 'canvas element'
 	package: 'Canvas'!
@@ -868,6 +963,12 @@ appendToJQuery: aJQuery
     self value: (HTMLCanvas onJQuery: aJQuery)
 ! !
 
+!CharacterArray methodsFor: '*Canvas'!
+
+asSnippet
+	^ HtmlSnippet current at: self asString
+! !
+
 !String methodsFor: '*Canvas'!
 
 appendToBrush: aTagBrush
@@ -882,6 +983,22 @@ asJQuery
     <return jQuery(String(self))>
 ! !
 
+!HTMLCanvas methodsFor: '*Canvas'!
+
+snippet: anElement
+	"Adds clone of anElement, finds [data-snippet=""*""] subelement
+    and returns TagBrush as if that subelement was just added.
+    
+    Rarely needed to use directly, use `html foo` dynamically installed method
+    for a snippet named foo."
+    | clone caret |
+    clone := anElement asJQuery clone.
+    self with: (TagBrush fromJQuery: clone canvas: self).
+    caret := clone find: '[data-snippet="*"]'.
+    caret toArray isEmpty ifTrue: [ caret := clone ].
+    ^TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self
+! !
+
 !JSObjectProxy methodsFor: '*Canvas'!
 
 asJQuery