bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Anoop Nayak <anoopkna...@gmail.com>
Subject Re: [ASF-ICFOSS MENTORING COMDEV-92] Regarding Live Syntax Highlighting
Date Tue, 17 Sep 2013 14:43:02 GMT
Hi Gary,

I was working with the trunk till now. I'm trying to get it running on the
amazon server which i just signed up for(free tier). Could you explain more
about the plugins? I didnt quite get it. Currently I just modified some of
the files in trac and bloodhound to get the basic editor working up. It
currently highlights only the text formatting, links and headings. I will
just paste the patch below.
There are two external files which I had to place in the
bloodhound_dashboard/bhdashboard/htdocs/css and trac/trac/htdocs/js. The
codemirror.js and wikimarkup.js are placed in the latter and the
codemirror.css and wikimarkup.css are placed in the former. This was
because i couldn't get the css files loaded when places in the latter
directory i.e the common directory for trac.

I would like to have more information on how to proceed from here. The
patch i made is as follows:



Index: bloodhound_theme/bhtheme/templates/bh_wiki_edit.html
===================================================================
--- bloodhound_theme/bhtheme/templates/bh_wiki_edit.html (revision 1523937)
+++ bloodhound_theme/bhtheme/templates/bh_wiki_edit.html (working copy)
@@ -54,10 +54,16 @@
         }).get(0).scrollTop = $("#scroll_bar_pos").val();
         $("#editrows").change(function() {
           resizeTextArea("text", this.options[this.selectedIndex].value);
+          <py:if test="livesyntaxhighlight">/*<![CDATA[*/
+          editor.setSize(window.twidth,
this.options[this.selectedIndex].value*13);
+          </py:if>
         });
         $("#sidebyside").change(function() {
           $("#edit input[type=submit][name=preview]").click();
         });
+        $("#livesyntaxhighlight").change(function(){
+          $("#edit input[type=submit][name=preview]").click();
+        });
         <py:if test="not sidebyside and (action == 'preview' or diff)">
           $("#info").scrollToTop();
         </py:if>
@@ -89,6 +95,34 @@
           autoResizeText();
           $(window).resize(autoResizeText);
         /*]]>*/</py:if>
+        <py:if test="livesyntaxhighlight">/*<![CDATA[*/
+          window.twidth = $('#text').width();
+          window.theight = $('#text').height();
+          console.log($('#text').width() + ' '+ $('#text').height());
+          window.editor =
CodeMirror.fromTextArea(document.getElementById("text"), {
+                lineNumbers: true,
+                matchBrackets: true,
+                continueComments: "Enter",
+                extraKeys: {"Ctrl-Q": "toggleComment"}
+            });
+          resizeCodeMirror()
+          editor.refresh();
+          function resizeCodeMirror(){
+            console.log($('#text').width() + ' '+ $('#text').height());
+            var editor = window.editor;
+            var spanwidth = $('.span12').width()/2 - 15;
+            var cmwidth = window.twidth;
+            if ($('.span12').width() > 688 &&
document.getElementById('sidebyside').checked)
+              cmwidth = spanwidth;
+            else cmwidth = 2 * (spanwidth +15);
+            var cmheight = $('#text').height();
+            // if(document.getElementById('preview'))
+            //   cmheight = $('#preview').height();
+            editor.setSize(cmwidth, cmheight);
+            editor.refresh();
+          }
+          $(window).resize(resizeCodeMirror);
+        /*]]>*/</py:if>
         <py:if test="sidebyside and not diff">
           $("#text").autoPreview("${href.wiki_render()}", {
               realm: "${page.resource.realm}", id: "${page.resource.id}"
Index: bloodhound_theme/bhtheme/templates/bh_wiki_edit_form.html
===================================================================
--- bloodhound_theme/bhtheme/templates/bh_wiki_edit_form.html (revision
1523937)
+++ bloodhound_theme/bhtheme/templates/bh_wiki_edit_form.html (working copy)
@@ -46,6 +46,11 @@
           Edit side-by-side
           <input type="checkbox" name="sidebyside" id="sidebyside"
checked="$sidebyside" />
         </label>
+        <label for="livesyntaxhighlight" class="pull-right" title="Enable
the new Live Syntax Highlighting mode">
+          Enable Live Syntax Highlighting(Alfa)
+          <input type="checkbox" name="livesyntaxhighlight"
id="livesyntaxhighlight" checked="$livesyntaxhighlight" />
&nbsp;&nbsp;&nbsp;
+        </label>
+
         <br/>
       </div>
       <p><textarea id="text" class="wikitext${' trac-resizable' if not
sidebyside else None}"
Index: trac/trac/wiki/web_ui.py
===================================================================
--- trac/trac/wiki/web_ui.py (revision 1523937)
+++ trac/trac/wiki/web_ui.py (working copy)
@@ -504,14 +504,18 @@
         author = get_reporter_id(req, 'author')
         defaults = {'editrows': 20}
         prefs = dict((key, req.session.get('wiki_%s' % key,
defaults.get(key)))
-                     for key in ('editrows', 'sidebyside'))
+                     for key in ('editrows', 'sidebyside',
'livesyntaxhighlight'))

         if 'from_editor' in req.args:
             sidebyside = req.args.get('sidebyside') or None
             if sidebyside != prefs['sidebyside']:
                 req.session.set('wiki_sidebyside', int(bool(sidebyside)),
0)
+            livesyntaxhighlight = req.args.get('livesyntaxhighlight') or
None
+            if livesyntaxhighlight != prefs['livesyntaxhighlight']:
+                req.session.set('wiki_livesyntaxhighlight',
int(bool(livesyntaxhighlight)), 0)
         else:
             sidebyside = prefs['sidebyside']
+            livesyntaxhighlight = prefs['livesyntaxhighlight']

         if sidebyside:
             editrows = max(int(prefs['editrows']),
@@ -525,12 +529,19 @@
             else:
                 editrows = prefs['editrows']

+        if livesyntaxhighlight:
+            add_script(req, 'common/js/codemirror.js')
+            # had to put css in dashboard css folder as it was not
detecting in the common folder
+            add_stylesheet(req, 'dashboard/css/codemirror.css')
+            add_script(req, 'common/js/wikimarkup.js')
+            add_stylesheet(req, 'dashboard/css/wikimarkup.css')
+
         data = self._page_data(req, page, action)
         context = web_context(req, page.resource)
         data.update({
             'author': author,
             'comment': comment,
-            'edit_rows': editrows, 'sidebyside': sidebyside,
+            'edit_rows': editrows, 'sidebyside': sidebyside,
'livesyntaxhighlight': livesyntaxhighlight,
             'scroll_bar_pos': req.args.get('scroll_bar_pos', ''),
             'diff': None,
             'attachments':
AttachmentModule(self.env).attachment_data(context),



On Tue, Sep 17, 2013 at 3:17 PM, Gary Martin <gary.martin@wandisco.com>wrote:

> Anoop,
>
> A little off topic but have you tested your svn access yet? I can't see a
> branch for your work yet so, on the assumption that you need a full copy of
> bloodhound to play with, if you have the normal command line svn client
> installed you should be able to do something like this:
>
> svn cp https://svn.apache.org/repos/**asf/bloodhound/trunk<https://svn.apache.org/repos/asf/bloodhound/trunk>\
> https://svn.apache.org/repos/**asf/bloodhound/branches/**
> livesyntaxhighlighting<https://svn.apache.org/repos/asf/bloodhound/branches/livesyntaxhighlighting>\
>     -m "creating branch for live syntax highlighting ASF-ICFOSS project"
>
> If that works then you should then be able to check out the code with:
>
> svn co https://svn.apache.org/repos/**asf/bloodhound/branches/**
> livesyntaxhighlighting<https://svn.apache.org/repos/asf/bloodhound/branches/livesyntaxhighlighting>
>
> and you will then be able to write your code in that branch.
>
> I'll not try to guess your level of expertise in using subversion so if
> you need any help, let us know and we can give bits of advice and point you
> towards appropriate documentation. You will probably also want to know how
> to create a plugin for your work to go in - we have a number of examples of
> plugins that will be in the branch that you create, each of which are named
> like bloodhound_[something].
>
> You can also use Antonia's GSoC project as a guide. That will not be in
> your branch though you can find it here:
>
>    https://svn.apache.org/repos/**asf/bloodhound/branches/bep_**
> 0007_embeddable_objects/<https://svn.apache.org/repos/asf/bloodhound/branches/bep_0007_embeddable_objects/>
>
> and you can see that Antonia called her plugin
> "bloodhound_embedding_plugin" which has all (or at least the vast majority)
> of her code in.
>
> Again, please ask whenever you find that there is not enough information
> on things.
>
> Cheers,
>     Gary
>
>
>
> On 13/09/13 06:37, Anoop Nayak wrote:
>
>> Thanks Joe. I will try posting the question in a more specific way soon.
>>
>>
>>
>> On Thu, Sep 12, 2013 at 11:52 PM, Joachim Dreimann <
>> joachim.dreimann@wandisco.com> wrote:
>>
>>  Anoop,
>>>
>>> if you don't receive any responses here, please do get in touch with the
>>> CodeMirror community. They may be in a better position to help in your
>>> current situation:
>>> http://codemirror.net/#**community <http://codemirror.net/#community>
>>>
>>> Alternatively, lease let us know what your latest progress is and if you
>>> can figure out a more specific problem that blocks you from progressing.
>>> "I can't understand how the code is working around why it is written in
>>> that way." - That seems too generic for anyone here to really answer.
>>>
>>> Cheers,
>>> Joe
>>>
>>>
>>> On 6 September 2013 16:20, Anoop Nayak <anoopknayak@gmail.com> wrote:
>>>
>>>  Hi devs,
>>>>
>>>>
>>>> I tried looking at the CodeMirror <http://codemirror.net/> project
and
>>>> I
>>>> figured out that I need to write a new
>>>> mode<http://codemirror.net/**doc/manual.html#modeapi<http://codemirror.net/doc/manual.html#modeapi>>
>>>> for
>>>> codemirror which can highlight WikiMarkup. And there is already a mode
>>>>
>>> for
>>>
>>>> tikiMarkup <https://doc.tiki.org/Wiki-**Syntax+Text<https://doc.tiki.org/Wiki-Syntax+Text>>
>>>> which is another Wiki
>>>> style language as found here
>>>> https://github.com/marijnh/**CodeMirror/tree/master/mode/**tiki<https://github.com/marijnh/CodeMirror/tree/master/mode/tiki>.
>>>> But I can't
>>>> understand how the code is working around why it is written in that way.
>>>> The next option is to start from scratch which again will consume more
>>>>
>>> time
>>>
>>>> as I need to learn how a syntax highlighter works and an optimal
>>>> solution
>>>> to it. And so in the process I was trying to understand by the example
>>>>
>>> of a
>>>
>>>> mode given by the creator of the project itself in here
>>>> http://marijnhaverbeke.nl/**blog/codemirror-mode-system.**html<http://marijnhaverbeke.nl/blog/codemirror-mode-system.html>.
>>>> But again I
>>>>
>>> am
>>>
>>>> not able to relate it with the tikimarkup mode.
>>>>
>>>> Could anybody guide me on how to proceed with making a new mode.
>>>>
>>>> Awaiting a reply soon.
>>>>
>>>> Regards,
>>>>
>>>> --
>>>> Anoop Nayak
>>>>
>>>>
>>>
>>> --
>>> Joachim Dreimann | *User Experience Manager*
>>>
>>> WANdisco // *Non-Stop Data*
>>>
>>> e. joachim.dreimann@wandisco.com
>>> twitter @jdreimann <https://twitter.com/jdreimann**>
>>>
>>>
>>
>>
>


-- 
Anoop

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message