What is CodeSense

CodeSense is Recoda custom developed auto-complete / suggestions for Codemirror code editor and with deep integration with Oxygen Builder.
You can use it inside:
1.Stylesheets
2.Custom CSS
3.Custom JS
4.BlockPad Editor 
5.Command-line
Codesense features
Codesense for CSS
This is probably the most advanced Codesense area. Codesense uses our custom develeoped mechanism for suggestion to make writing CSS really fast (lot faster than clicking), without typo mistakes. 
Oxygen classes suggestion
Codesense is 100% integrated with Oxygen Builder, if class exist inside Oxygen it will show suggestion to you. And you don't need to type prefixes, just write part of name to get right suggestion.
Common CSS properties suggestion
We have hand picked CSS common properties so your suggestion will not be overhelming. If you use some uncommon properties you will probably search MDN so you don't need suggestion for things you probably won't write. This can really speed up writing.
Only related CSS properties options suggestion
OK, you are tired of default Codemirror suggestion, which suggest just everything, you want to have only suggestion for properties which you wrote earlier, see this:Suggestions and syntax highlighting are based on type of Codemirror token. So when CSS is valid it works, but what about Invalid CSS boxes where you write yours Custom-CSS and there is no selector in text to determine when property should be suggested. Keep reading.
Smart CSS property options suggestion
You see, it hints just options related to display property. And if you think more deeper you will see that writing display: flex with CodeSense is like:
1.type 'd'
2.Enter
3.type 'f'
4.Enter
Crazy fast, typo free. CodeSense is every developer dream hinting inside Oxygen Builder. But wait, we did something even more special.
​
Invalid CSS support - for Custom CSS box
When you write in Custom-CSS you write invalid CSS without selectors and Oxygen converts that into valid CSS. But Code editor does not know that, so we have created exceptions for invalid CSS so you can write yours Custom CSS with your favorite suggestions.
CodeSense Invalid CSS hints
How we have achived that?
1.We have used Codemirror native hinting mechanisms with our triggers.
2.We have wrote custom suggestion add-on for Codemirror 
3.We have handpicked CSS properties
4.We have mapped options related to each
5.We have created exception so our hint knows when you are writing valid and when you are writing invalid CSS.
Can we extend this with more options?
Sure we can. We have dedicated time to understand how Codemirror works underhood and develop suggestion in way we wanted without taking any compromise. So yes, we can extend this even more. We have lot of custom solution and expertise now in this field and we want to bring state-of-the-art suggestion inside Oxygen Builder, seriously. 
Adding new things which will improve writing CSS even further is not that hard anymore because we have our base which we can use to develop lot faster new options if they are needed. And suggestion is under ours full control. 
Codesense for JS
In CSS part we did lot work for context aware suggestion. That is type suggestion which depends on on where you are typing and look which things are needed to suggest.
JS part is little different
Here we did not take that much effort into developing custom things because two good things exists already as JS hinting add-ons.
1) Context code completion
This part is responsible for suggestions like: 
Context code completion
You can see that suggestion depends on first object (document). And this are the most common suggestions in JS. And if you are not familiar with hinting mechanisms you are probably thinking what would be opposite suggestion of this.
2) Context-aware code completion
Context aware completion or Intelligent code completion is type of mechanism you can see in all serious Code editors under different name (VS Code = IntelliSense, Atom = Completion +). This type does not care about where completion is, so it is context-aware type. That means if you define some variable and want use it again, First mechanism (context code completion) would not suggest it. On other hand Context-aware code completion looks for nearby variables and things and it suggest them to. You can se basic example of context-aware suggestion on the image below:
Context-aware code completion
Codesense for PHP/HTML
Currently context-aware code completion is only available here. We are working on integrating class suggestion and few other things which could. This is complex area and because of that CodeSense is not yet too powerful here for now.
Codesense add-ons
As part of Codesense we are using our custom developed add-ons which are explained earlier, but on other hand we are using some existing 
CSS Variables Hints (video)
Works with all CSS frameworks with CSS in Oxygens stylesheet. 
Hints are shown in Stylesheets, custom CSS, and Blockpad.
VIDEO: CSS Variables hints inside Codesense
Custom developed solution which gets all defined CSS variables from Oxygen and hints them. No extra setup required. 
VIDEO: CSS Variables hints inside input fields
Code folding 
CodeMirror add-on.
This will give you an option to fold parts of your code so you can have better code overview.
Code folding
Matching brackets
CodeMirror add-on.
This add-on will highlight matching brackets.
Match brackets
Brackets auto-close
CodeMirror add-on.
This add-on will auto-close brackets so you don't need type closing brackets and cursor will be placed between.
Auto-close brackets
​
Command line - Previous
Import GH Gist
Changelog
Last modified 5mo ago
Copy link
On this page
Codesense features
Codesense for CSS
Codesense for JS
Codesense for PHP/HTML
Codesense add-ons
CSS Variables Hints (video)
Code folding
Matching brackets
Brackets auto-close