Custom abbreviations - Githubissues

pulse00 commented 11 years ago

There's a settings page called Abbreviations, but i'm not sure if what i'm trying to do is possible with it.

We're using a framework which has custom XHTML attributes, e.g. <div wicket:id="foo" class="bar"/>", where the wicket:id attribute is used by the framework and will be removed from the rendered HTML.

Is it possible to create a custom abbreviation which inserts a wicket:id attribute inside an html tag?

For example

div.bar?foo will be expanded to <div wicket:id="foo" class="bar"></div> , using the ? character as the token for the custom abbreviation.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/1290462-custom-abbreviations?utm_campaign=plugin&utm_content=tracker%2F311127&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F311127&utm_medium=issues&utm_source=github).

sergeche commented 11 years ago

There are two options how to do this:

Create “snippet” (not “abbreviation”), for example, with name dw and the following content: <div wicket:id="${id}" class="${class}"></div>. You can use it as follows: dw#some-id.some-class. But it’s a static snippet, e.g. you can’t add new attributes, you have to create new snippet for each element etc.
Create a new filter. A filter can take parsed abbreviation tree and update it. I recommend you use syntax like div#:foo e.g. prefix ID attribute with :. You can then find all nodes whose ID values starts with : and update attribute name. Filters are written in JavaScript and should be placed at Extensions dir.

You can take a look how user used custom filter to use abbreviations in PHP: https://github.com/sergeche/emmet-sublime/issues/365

pulse00 commented 11 years ago

@sergeche thanks a lot for your feedback. The examples you posted should get me started to work with filters, but i can't find the Extensions directory to put the JS filters. I've been searching in the plugins and features folders of the eclipse instance where emmet is installed.

Any hint where the Extensions directory is located?

sergeche commented 11 years ago

Check out Emmet section in Eclipse preferences

pulse00 commented 11 years ago

I've tried to get the PHP example from sergeche/emmet-sublime#365 working in eclipse, the following way:

Create an emmet directory in the eclipse folder and select this as the extension dir in the emmet eclipse preferences
Place a php.js javascript file in the emmet directory with the following content:

emmet.require('filters').add('php', function process(tree) {

    _.each(tree.children, function(node) {

        // define variable name
        if (node.name() == 'data' && node.parent == ''){
            node.start = '\\$this->request->data';
        }else{
            node.start = (node.parent == '' ? '\\$' : '') + node.name();
        }

        // define object keys
        var className = node.attribute('class');
        if (className) {
            node.start += className
                .split(' ')
                .map(function(c) {return "['" + c + "']";})
                .join('');
        }

        node.start += node.children.length == 0 ? '' : '->';
        node.end = '';
        process(node);
    });

    return tree;
});

Create a snippets.json file in the emmet dir with the following content:

{
    "php": {
        "filters": "html, php"
    }    
}

Now when i open a foo.php file in eclipse and expand the abbreviation this>Model>data.Model.id, i see the regular html output of emmet:

<this>
    <model>
        <data class="Model id"></data>
    </model>
</this>

It seems emmet/eclipse doesn't pick up the filter i've placed in the extensions dir. Is there an .options file directive so i can launch eclipse in -debug mode and see what's going on under the hood when expanding abbreviations?

sergeche commented 11 years ago

Try to call php filter explicitly, e.g. this>Model>data.Model.id|php. Eclipse doesn’t provide a common interface for detecting syntaxes so it has to be programmed individually for each syntax/plugin.

pulse00 commented 11 years ago

@sergeche nope, also with the explicit filter syntax, the expanded text is the same as before.