Since we started the code editor in Webpop, we felt the need for a code completion feature. I've personally used it on several programming IDE's and think this feature will help you learn and somewhat understand our pop tags. Our first step was the Tag Explorer, located at the top right icon in the code editor. The Tag Explorer is a great feature to speed up development and get a glimpse of the tags you can use. Anyway, when we first saw the great work done by Quplo on their Common Sense Code Completion we said: "Hey! That's exactly what we need for our code completion".

So, that's it. :-) We got our hands dirty and some days ago we deployed the first version of our take on the Common Sense Code Completion. We also fixed some issues from the original code and then added a few features, like support for context aware tags. Context aware tags only appear inside a certain context, for example in HTML you can only get "optgroup" and "option" tags inside a "select" element. For Webpop tags, we extended the context awareness to actually even read the content of the site and suggest the correct tags and values!

We are releasing these changes in Github. Please feel free to fork it and contribute! Main contributions to the original Quplo CSCC are in the master branch. The webpop branch includes tags and features specific to Webpop. You can checkout the webpop branch to take a look at how we have implemented our tags.

Webpop features

We added a bunch of exciting features to CSCC, the most obvious being the completion of Webpop tags. You can see the code completion in action in the following screenshot:

But! (drumroll please...) we also extended the code to actually read the content of the site, so it's able to suggest sections you can take content or entries from. Take a look at the following screenshot:

As you can see, we actually suggest the names of the sections you can pop content from! No guessing, no switching back and forth between the content and design tabs — everything right at your fingertips. We were so excited about this feature that we extended it to suggest the href and src of images, javascripts and css files. Take a look:

We suggest all *.js files you've used in the design, and we've included some of the most popular javascript libraries for you to choose from. (They all are pulled from the Google Library API CDN).

Changes to the code base

If you're only interested on the CSCC code base, head over to our Git repository. Clone it to use the full cscc code with the following fixes:

• Updated CodeMirror to version 0.93
• Added context aware tags, so you will get suggestions based on previous wrapped tags. For example, you will only get "optgroup" and "option" inside a "select". Currently, the only supported tags are "head" (for meta, link, style and title) and "select" (for optgroup and option).
• Added an additional "options" parameter to the cscc.init function so that you can configure cscc and the CodeMirror instance.
• Added an option "dontStyle" so that cscc doesn't add a hardcoded <style> into the document. (You'll need to style the cscc popup yourself).
• Added an option "xhtmlAware" so that self closing tags will close with a slash. Example: <br />
• Added self closing tags so that closing an img no longer produces <img></img>
• Added support for "smart quotes". Inside html attribute values, the editor won't insert a new quote if you type it and the following character is already a closing quote.

And many more! Please see the Git repository for a full history of changes. We plan to use this repository as our main repository for Webpop cscc so you can find all futures changes there.