IceBeat

Lenguaje para Autocompleter.Editor

Para crear un lenguaje solo tenemos que seguir unas pautas ya predefinidas, teniendo en cuenta los hashes y las matrices todo ira viento en popa.

Lo primero que tenemos que hacer es crear el objeto language para contener el lenguaje.

if(!language) var language = {};

A continuación le ponemos nombre a la criatura.

language.HTML = {
charCodes: [],
snippets: $H({}),
selections: {},
tooltips: $H({}),
tokens: $H({})
};

Este es el pilar básico del lenguaje.

charCodes: Su función es comprobar si los tokens se disparan o no, los tres que tenemos para CSS son un espacio en blanco, un salto de linea o un ;, os preguntareis para que esto, pero si nos movemos con el cursor y coincide un token ya completado no es plan que vuelva a salir.

snippets: son los trozos de códigos que sustituimos cuando tabulamos, no hay que olvidar poner $H() porque el script captura las keys para comprobar que existe el snippet.
Hay dos tipos de snippets, los directos y los desplegables. Los directos son aquellos que contiene una matriz y los desplegables los que contiene otro objeto con keys y values.

"{" : ["{n    ",'',"n}"]

Esto seria un snippet directo, la matriz esta compuesta por 3 elementos, [contenido antes de la selección, la selección, y contenido después de la selección].

El desplegable actúa igual pero es creando un $H().

Selections: Podemos también ejecutar funciones con las selección del texto, por motivos de compatibilidad con safari y firefox solo tenemos las teclas del 0 al 9, pero vamos como se puede desplegar opciones viene sobrao. A la función se le pasa el texto seleccionado, luego solo hay que devolver la matriz que hemos hablado antes.

tooltips: Muy parecido a los snippets pero estos devuelven un tooltips informativo, en vez de crear una matriz es una cadena.

tokens: Pueden resultar algo complejos pero existen dos tipos, el token directo y el token buscando un patrón.

El token directo es aquel que se dispara cuando el carácter coincide con el token, es decir si escribimos ”@” el token se dispara.
El otro busca la cadena hacia atrás para encontrar la comparación, imagina que tienes tu CMS y tus etiquetas empiezan por cms:, si quieres disparar la coincidencia tendrás que poner como token : y luego buscar si coincide con cms. Puede tener varias coincidencias el mismo token pero no hay problemas con ellas.

Veamos un ejemplo:

if(!language) var language = {};

	
language.HTML = {
//caracteres permitidos despus del token
charCodes: [10,32],
//snippets: funcionan escribiendo la palabra clave y dando al tabulador
snippets: $H({
//snippets sin tooltips, se reemplazan directamente
"=" : ['="','','"'],
"div" : $H({
"id" : ['<div id="','','"></div>'],
"class" : ['<div class="','','"></div>']
})
}),
//seleciones: funcionan con crtl+shift+ un numero del 0 al 9
selections: {
//sustituci&#243;n directa de la seleccion
"0": function(sel) {
//convertir a entidades
var mtoc = /<([^<>]*)>/g;
return ['',sel.replace(mtoc,"&lt ;$1&gt ;"),''];
},
//muestra un tooltip para elegir la opcion
"1": $H({
<a href="[function(sel">toUpperCase</a>) {
return ['',sel.toUpperCase(),''];
}],
<a href="[function(sel">toLowerCase</a>) {
return ['',sel.toLowerCase(),''];
}]
})
},
//despliegan un tooltip informativo, funcion dando al escape despues de la palsbra clave
tooltips: $H({
"a" : "noinfo",
"strong" : "noinfo"
}),
//tokens que se disparan si encuentra el caracter
tokens: $H({
//autocompletado buscando un patron
":" : $H({
// coincida con a:
"<cms:" : $H({
"post" : ['<cms:post>','','</cms:post>'],
"title" : ['<cms:title />','','']
})
}),
//autocompletado directo
"<" : $H({
"a" : ['<a href="','http://www.com','" title=""></a>'],
"strong" : ['<strong>','','</strong>']
})
})
};

Ver código: tutorial.js

Teniendo un poco de paciencia puedes conseguir maravillas, incluso unir varios lenguajes en uno con las funciones de prototype.