xF1 Add-on CodeMirror code editor for admin CP HTML/CSS inputs 1.0.1

Product places a CodeMirror editor with toolbars in admin CP pages with HTML/CSS inputs. Active in Template Edit and Template Create pages (forum and admin), Template Modifications (forum and admin), Notices and BB Code.

Features:

• Fully phrased
  
• Shows read-only version for the original template in Template Modifications
  
• All versions expand to full size
  
• All features available in full size versions
• Template names and phrase names are prefixed with "tce_"
• Uses the latest version of CodeMirror (5.9.1)

CodeMirror is an ongoing project by Marijn Haverbeke and others. It has many more features than those described here.

CodeMirror toolbars is a CodeMirror extension I created.

Features:

• search and replace
  • expandable input fields
  • regular expression searching
  • replace all
• highlight matching (finds matches for selected code/text)
  
• undo/redo
  
• font size selection
  
• mode selection (CSS, HTML, JavaScript, PHP, SQL)
  
• position (line, character)
  
• go to line
  
• tab size
  
• tabs or spaces
  
• drag and drop
  
• automatic indent
  
• formatting of minified code
  
• line wrapping
• code collapsing (click in the line numbers column in two locations and the code between collapses.)

Toolbars uses XenForo admin CP colors and other style features. If you want to change anything see template tce_codemirror_toolbar.css. Don't mess with the css files in the CodeMirror file group. To try different settings see the "options" in js/nerbert/codemirror_init.js.

Known bugs:

• CodeMirror sometimes does not show the last few characters of the longest line. I cannot consistently reproduce this problem and I'm not competent to fix it. Use line wrapping to view the last few characters and place a few blank spaces at the end if you are going to modify the template anyway
• The CodeMirror syntax highlighting is not designed to handle XenForo template syntax. Under some conditions HTML tags show bright red to indicate mismatching. This can be caused by unclosed elements within a template conditional.
• Formatting (CodeMirror-5.9/addon/misc/formatting.js) is my best effort to uncompress minified files. It doesn't always work. If you format a file, save it only at your own risk!
• Drag and drop does not auto-scroll. Use code collapsing to place origin and destination locations near each other.

Installation:

Upload the provided files to your form root folder and upload the product XML file in your admin CP. There is no control panel for this product