View Javadoc

1   /**
2    * This file Copyright (c) 2008-2011 Magnolia International
3    * Ltd.  (http://www.magnolia-cms.com). All rights reserved.
4    *
5    *
6    * This file is dual-licensed under both the Magnolia
7    * Network Agreement and the GNU General Public License.
8    * You may elect to use one or the other of these licenses.
9    *
10   * This file is distributed in the hope that it will be
11   * useful, but AS-IS and WITHOUT ANY WARRANTY; without even the
12   * implied warranty of MERCHANTABILITY or FITNESS FOR A
13   * PARTICULAR PURPOSE, TITLE, or NONINFRINGEMENT.
14   * Redistribution, except as permitted by whichever of the GPL
15   * or MNA you select, is prohibited.
16   *
17   * 1. For the GPL license (GPL), you can redistribute and/or
18   * modify this file under the terms of the GNU General
19   * Public License, Version 3, as published by the Free Software
20   * Foundation.  You should have received a copy of the GNU
21   * General Public License, Version 3 along with this program;
22   * if not, write to the Free Software Foundation, Inc., 51
23   * Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
24   *
25   * 2. For the Magnolia Network Agreement (MNA), this file
26   * and the accompanying materials are made available under the
27   * terms of the MNA which accompanies this distribution, and
28   * is available at http://www.magnolia-cms.com/mna.html
29   *
30   * Any modifications to this file must keep this entire header
31   * intact.
32   *
33   */
34  package info.magnolia.cms.gui.dialog;
35  
36  import info.magnolia.cms.core.NodeData;
37  import info.magnolia.cms.gui.control.Edit;
38  import info.magnolia.cms.gui.misc.CssConstants;
39  import info.magnolia.cms.util.BooleanUtil;
40  
41  import java.io.IOException;
42  import java.io.Writer;
43  import java.util.HashMap;
44  import java.util.Map;
45  
46  import javax.jcr.PropertyType;
47  
48  import org.apache.commons.lang.StringUtils;
49  import org.slf4j.Logger;
50  import org.slf4j.LoggerFactory;
51  
52  
53  /**
54   * Turns a textarea into a basic code editor using <a href="http://codemirror.net/">CodeMirror</a>. If no <code>language</code> option is explicitly configured, it will try to guess
55   * the correct syntax highlighter by either looking at the resource extension or the <code>mgnl:template</code> metadata property. Defaults to a <code>generic</code> syntax parser which
56   * will highlight html, javascript and css.
57   * <p>
58   * Configuration options are:
59   * <ul>
60   * <li><strong>useCodeHighlighter</strong>: activate/deactivate the editor with code highlighting. Default value is
61   * <code>true</code>. If set as <code>false</code>, falls back to a plain textarea.
62   * <li><strong>language</strong>: one of the supported languages (e.g. <em>css</em>, <em>javascript</em> or <em>js</em>, <em>html</em>, <em>freemarker</em> or <em>ftl</em>, <em>groovy</em>) supported.
63   *  Default value is <code>generic</code>.
64   * <li><strong>readOnly</strong>: make the editor read-only. Default value is <code>false</code>.
65   * <li><strong>lineNumbers</strong>: shows/hide line numbers. Default value is <code>true</code>.
66   * </ul>
67   * @author tmiyar
68   * @author fgrilli
69   */
70  public class DialogEditCode extends DialogBox {
71  
72      /**
73       * Used to make sure that the javascript files are loaded only once.
74       */
75      private static final String ATTRIBUTE_CODEMIRROR_LOADED = "info.magnolia.cms.gui.dialog.codemirror.loaded";
76  
77      private static final Logger log = LoggerFactory.getLogger(DialogEditCode.class);
78      /**
79       * Valid values are <code>js, javascript, processedJs, css, processedCss, html, freemarker, ftl, groovy, generic</code>.
80       */
81      public static final Map<String,String> availableParsers = new HashMap<String,String>();
82  
83      static {
84          availableParsers.put("js", "JSParser");
85          availableParsers.put("javascript", "JSParser");
86          availableParsers.put("processedJs", "JSParser");
87          availableParsers.put("css", "CSSParser");
88          availableParsers.put("processedCss", "CSSParser");
89          availableParsers.put("html", "HTMLMixedParser");
90          availableParsers.put("freemarker", "FreemarkerParser");
91          availableParsers.put("ftl", "FreemarkerParser");
92          availableParsers.put("groovy", "GroovyParser");
93          availableParsers.put("generic", "HTMLMixedParser");
94      }
95  
96      /**
97       * @see info.magnolia.cms.gui.dialog.DialogControl#drawHtml(Writer)
98       */
99      public void drawHtml(Writer out) throws IOException {
100         final Edit control = new Edit(this.getName(), this.getValue());
101         control.setType(this.getConfigValue("type", PropertyType.TYPENAME_STRING));
102         control.setCssClass(CssConstants.CSSCLASS_EDIT);
103         if (this.getConfigValue("saveInfo").equals("false")) {
104             control.setSaveInfo(false);
105         }
106 
107         boolean useHighlighter = BooleanUtil.toBoolean(this.getConfigValue("useCodeHighlighter"), true);
108         log.debug("useHighlighter? {}",useHighlighter);
109         if(!useHighlighter){
110             drawSimpleEditor(out, control);
111             return;
112         }
113 
114         final String language = this.getConfigValue("language");
115         String parser = null;
116         if(StringUtils.isNotBlank(language)){
117             parser = getAvailableParser(language.trim());
118             if(parser == null){
119                 log.warn("no suitable parser found for language {}. No syntax highlighting will be available. Look at the documentation for the supported languages. ", language);
120                 drawSimpleEditor(out, control);
121                 return;
122             }
123         }
124         drawEditorWithSyntaxHighligher(out, control, parser);
125     }
126 
127     private void drawSimpleEditor(Writer out, Edit control) throws IOException {
128         control.setRows(this.getConfigValue("rows", "1"));
129         control.setCssStyles("width", this.getConfigValue("width", "100%"));
130         control.setCssStyles("font-family", "Courier New, monospace");
131         control.setCssStyles("font-size", "14px");
132         if (this.getConfigValue("onchange", null) != null) {
133             control.setEvent("onchange", this.getConfigValue("onchange"));
134         }
135         this.drawHtmlPre(out);
136         out.write(control.getHtml());
137         this.drawHtmlPost(out);
138     }
139 
140     private void drawEditorWithSyntaxHighligher(Writer out, Edit control, String parser) throws IOException{
141         final String pathToCodeMirror =  this.getRequest().getContextPath() + "/.resources/js/codemirror/";
142         if(parser == null) {
143             //let's try to guess the language by the resource extension
144             final NodeData extNodeData = this.getStorageNode().getNodeData("extension");
145 
146             if(extNodeData.isExist()){
147                 final String ext = extNodeData.getString();
148                 parser = getAvailableParser(ext);
149             } else {
150                 //try with the template property
151                 final String template = this.getStorageNode().getMetaData().getTemplate();
152                 parser = getAvailableParser(template);
153             }
154             if(parser == null){
155                 log.debug("No suitable parser found. Falling back to generic.");
156                 parser = getAvailableParser("generic");
157             }
158         }
159 
160         control.setRows(this.getConfigValue("rows", "25"));
161         control.setRows(this.getConfigValue("cols", "100"));
162 
163         this.drawHtmlPre(out);
164         // load the script once if there are multiple instances
165         if (getRequest().getAttribute(ATTRIBUTE_CODEMIRROR_LOADED) == null) {
166             out.write("<script type=\"text/javascript\" src=\""+ pathToCodeMirror + "codemirror-min.js\"></script>");
167             getRequest().setAttribute(ATTRIBUTE_CODEMIRROR_LOADED, true);
168         }
169 
170         final StringBuilder inlineStyle = new StringBuilder("<style>\n");
171         inlineStyle.append(".CodeMirror-line-numbers {\n");
172         inlineStyle.append("background-color: #eee;\n");
173         inlineStyle.append("text-align: right;\n");
174         inlineStyle.append("font-family: monospace;\n");
175         inlineStyle.append("font-size: 10pt;\n");
176         inlineStyle.append("color: #aaa;\n");
177         inlineStyle.append("line-height: 16px;\n");
178         inlineStyle.append("padding: .4em;\n");
179         inlineStyle.append("width: 2.2em;\n");
180         inlineStyle.append("</style>\n");
181         out.write(inlineStyle.toString());
182 
183         out.write("<div class=\"editorWrapper\" style=\"border: 1px solid #999; padding: 3px;\">");
184         out.write(control.getHtml());
185 
186         final boolean lineNumbers = BooleanUtil.toBoolean(this.getConfigValue("lineNumbers"), true);
187         final boolean readOnly = BooleanUtil.toBoolean(this.getConfigValue("readOnly"), false);
188         final String editorVar = "editor"+this.getName();
189 
190         out.write("\n<script>\n");
191         out.write("MgnlDHTMLUtil.addOnLoad(function(){\n");
192         String codeMirrorEditor = "var " + editorVar +" = CodeMirror.fromTextArea(\""+this.getName()+"\", {\n"+
193         "     path: \"" + pathToCodeMirror + "\",\n" +
194         "     textWrapping: false,\n" +
195         "     height: \"420px\",\n" +
196         "     basefiles: [\"codemirror-base.min.js\"],\n" +
197         "     parserfile: [\"allinone.js\"],\n" +
198         "     stylesheet: [\""+ pathToCodeMirror +"css/jscolors.css\",\""+ pathToCodeMirror +"css/csscolors.css\",\""+
199         pathToCodeMirror +"css/xmlcolors.css\",\""+ pathToCodeMirror +"css/freemarkercolors.css\",\""+ pathToCodeMirror +"css/groovycolors.css\"],\n" +
200         (lineNumbers ? "     lineNumbers:true,\n":"") +
201         (readOnly ? "     readOnly:true,\n":"") +
202         "     initCallback:function(e){ \n"+
203         "            e.setParser('"+ parser +"');\n"+
204         "            e.focus();\n"+
205         "     } \n"+
206         "});\n";
207 
208         out.write(codeMirrorEditor);
209 
210         out.write("    var b = document.getElementById('mgnlSaveButton');\n");
211         out.write("    var existingOnClick = b.onclick;\n");
212         out.write("    b.onclick=function(){\n");
213         // on submit put the code into a hidden field.
214         out.write("        document.getElementById('cm_hidden_"+ this.getName() + "').value = " + editorVar + ".getCode();\n");
215         out.write("        existingOnClick.apply(this);\n");
216         out.write("    }\n});\n");
217         out.write("</script>\n");
218         out.write("<input type=\"hidden\" name=\"" + this.getName() + "\" id=\"cm_hidden_" + this.getName() + "\" />\n");
219         out.write("</div><!-- closing editorWrapper -->\n");
220 
221         this.drawHtmlPost(out);
222     }
223 
224     private String getAvailableParser(String language){
225         final String parser = availableParsers.get(language);
226         log.debug("language is {}, parser is {}", language, parser);
227         return parser;
228     }
229 }