Codemirror Documentation

[Stephen Kimmel]

Among the tiddlytools I've used the most were the Quick Editor tools. I've been looking at standins until such time as tiddlytools is updated for TW5. Among the items I've looked at is the Codemirror plugin. http://tiddlywiki.com/plugins/tiddlywiki/codemirror/ Following the link http://codemirror.net/ it looks like it ought to be able to do a good deal more like search and replace. You couldn't prove that by my experience. As close as I can tell, it adds line numbers.

The Tiddlywiki documentation for this plugin boils down to "Try editing the tiddler LoremIpsum to try out the editor." Given that the visually obvious difference from the Tiddlywiki editor is minimal, this isn't helpful. The Codemirror site's documentation appears to be written in English but once you get past the opening page strikes me as being almost incomprehensible.

Is there someone out there who is using the Tiddlywiki CodeMirror Plugin on Firefox in a Windows environment who can tell me if this plugin actually does anything helpful? If this plug-in is really just for Linux systems, then could we update the documentation to say as much?

I've watched the group here for some time and there seems to be a generic issue here. I hope I don't offend anyone but a lot of the Tiddlywiki documentation seems to be written by insiders for insiders. I'm sure Danielo and Eric and many of the others understand what is being said but there seem to be far to many people who are mystified by it. And I'll wager that most would be users never get far enough to even find this group. As an experiment, try handing a copy of Tiddlywiki to your mother (or someone else you wouldn't describe as a "power user") and see how long they last. The documentation should be pitched at their level.

Stephen

[Danielo Rodríguez]

I made very similar questions while I started to use codemirror.

After reading the documentation I realized how can I took more from the plugin.

Basically, you have to add the features you want to the config tiddler, but you are limited to the default ones. If you want others, you have to add the needed js libary to tiddlywiki.

I make some experiments, let me search for them and I will post them here

[Danielo Rodríguez]

Hello again,

Here is a codemirror plugin version where I included some themes and some useful tools like match-bracket

https://www.dropbox.com/s/jfz48v01rnec9l2/%24__plugins_tiddlywiki_codemirror.tid?dl=0

I don't know if it works with never versions of TW5, just try it with tw5.0.15 or so. 

[Danielo Rodríguez]

Here you have an example of a configuration tiddler:

	tags: configuration
	title: $:/config/CodeMirror
	type: application/json
	{
	"require": [
	"$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
	"$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
	"$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",
	"$:/plugins/tiddlywiki/codemirror/keymap/vim.js",
	"$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js",
	"$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js",
	"$:/plugins/tiddlywiki/codemirror/keymap/sublime.js"
	],
	"configuration": {
	"keyMap": "sublime",
	"showCursorWhenSelecting": true,
	"matchBrackets":true,
	"autoCloseBrackets" : true,
	"theme": "erlang-dark"
	}
	}

[Danielo Rodríguez]

I checked again the codemirror plugin documentation.

Did you read it? Try to create the $:/config/CodeMirror tiddler as descirbed and try to edit a javascript,html or JSON tiddler.

You should see a big difference.

[Stephen Kimmel]

I checked again the codemirror plugin documentation.

Did you read it? Try to create the $:/config/CodeMirror tiddler as descirbed and try to edit a javascript, html or JSON tiddler.

You should see a big difference.

While I am grateful that you are spending the time trying to help me with this, to be honest I am more mystified than I was before.

http://tiddlywiki.com/plugins/tiddlywiki/codemirror/ contains two regular tiddlers that I can see; "Hello There" and "LoremIpsum". Neither of those qualify as documentation. In the main Tiddlywiki site, there is a tiddler "CodeMirror Plugin" which mostly references what the plugin is and where to find it. Where is the documentation you mentioned? Which I guess means I didn't read it.

And what does it say about the documentation if a reasonably competent user can't find it?

[PMario]

On Tuesday, September 30, 2014 3:47:05 PM UTC+2, Stephen Kimmel wrote:

And what does it say about the documentation if a reasonably competent user can't find it?

It's well hidden ;)

Honestly -- At the moment there is only a plugin readme, which can be seen if you click the plugin more ">" icon at the $:/ControlPanel: Plugin tab.
The demo edition [1] just contains the bare minimum to see if the plugin initializes.

If there is no documentation, it just means, that nobody in the community did it. ... that's all.
So I'm sure any help, is highly appreciated!

Information how to contribute can be found here: http://tiddlywiki.com/#Contributing:Contributing%20[[Improving%20TiddlyWiki%20Documentation]]

have fun!
-mario

[1] http://tiddlywiki.com/plugins/tiddlywiki/codemirror/

[Jeremy Ruston]

I think that Stephen is asking for the purpose of the CodeMirror plugin. I'm away from my computer on my phone so would be grateful if someone else can step in with the necessary information,

Many thanks

Jeremy

—
jeremy...@gmail.com

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Danielo Rodríguez]

Hello Stephan,

I'm sorry about not pointing you to the right place. I am so used to the codemirror plugin that I forgot how difficult was to me to find some documentation. 

Here you have a direct link to plugins documentation:

http://tiddlywiki.com/plugins/tiddlywiki/codemirror/#%24%3A%2Fplugins%2Ftiddlywiki%2Fcodemirror%2Freadme

Basically you have to create a tiddler as described there. You can try directly from the demo tiddlywiki. Create a new tiddler with the given content, tag it as described and set the type (at the very bottom of the edit mode) to application/json

Let me know if you need further help with this.

[TheDiveO]

Now that is interesting! I wondered too all the time how to bring the codemirror editor to real life. I've tried this and I notice some changes, but there are also problems. First, closebrackets.js is not present in the stock TW5 tiddlywiki/codemirror plugin. Second, while I notice that matching brackets get highlighted in JavaScript code, I don't get any syntax coloring. I'm editing a tiddler of type application/javascript.

Any idea of what went wrong?

I would like to unleash the codemirror plugin in with my ThirdFlow demo+docu wiki, as this will surely demonstrate the incredible power of TW5 and its extensions.

Regards,
-- TheDiveO

[Stephen Kimmel]

Here is a codemirror plugin version where I included some themes and some useful tools like match-bracket

https://www.dropbox.com/s/jfz48v01rnec9l2/%24__plugins_tiddlywiki_codemirror.tid?dl=0

I don't know if it works with never versions of TW5, just try it with tw5.0.15 or so.

 I just got the opportunity to download this file, Danielo, and it is probably a sign of the way this project is going for me but... since I work in a Firefox in Windows environment, how do I use a .tid file? I see from the http://tiddlywiki.com/ site that it is a file associated with Node.js which means very little to me. The file appears to be plain text. Is there someway I should be able to build useful tiddlers out of this type of file?

Stephen

[TheDiveO]

Stephen,

simply drag the .tid into your TW5 that runs inside the browser. Tid files are just TW5's uniform way to store and transport tiddlers. In this case you don't need to worry about Node.js. A .tid file contains either a single tiddler or a plugin and the plugin in turn contains multiple (shadow) tiddlers.

Regards,
TheDiveO

[Stephen Kimmel]

simply drag the .tid into your TW5 that runs inside the browser. Tid files are just TW5's uniform way to store and transport tiddlers. In this case you don't need to worry about Node.js. A .tid file contains either a single tiddler or a plugin and the plugin in turn contains multiple (shadow) tiddlers.

Regards,
TheDiveO

That was the first thing I tried. The current version blocked it and the only older version I've tried it with was 5.0.13 which didn't seem to recognize it as anything more than one really large tiddler.

On the plus side, following Danielo's instructions and fighting my way past ... I've lost count how many... red alerts of death, I finally got a wiki that would start up and showed the editor showing an assortment of different colors and matched brackets and such. Now if I could just figure out how to do something mundane like, say, enter letters. I can move the flashing green cursor around but that's about it.

Stephen

[Danielo Rodríguez]

Hello Stephen,

Please download this repository as zip and check it out. There are several ready to test tiddlywiky files with different implementations of Codemirror :

https://github.com/danielo515/TW5-CodemirrorPluginTest

They are pretty old, but maybe can help you to see it is useful for you.

The reason you can not write is probably because you have vim mode selected. Try hitting the i key. Or you can just remove the key mapping from the config Codemirror plugin.

[Danielo Rodríguez]

Hello theDive0

I oopened a thread at tiddlywiky Dev with that exact idea: to make tiddlywiky its own development environment. No one was interested. I made some experiments including more libraries into Codemirror from the official Codemirror repository, so maybe I can help you to include it in your plugin. Check this repo and let me know what do you think :

https://www.dropbox.com/sh/xl7k4qe0ef8p14z/AAA0pKVOD95oM8ud8VYQAJEka?dl=0

[TheDiveO]

I vaguely remember seeing your post some time ago. Time wasn't ripe then I'm afraid. And it is still a long way to go; one stumbling block is at least limited hot plugging of plugins. But above that level we could probably get some low hanging fruits, hoping that they're not sour.

[TheDiveO]

I'll take a closer look in the next days probably. At the moment I would like to get the core plugin version to show my colored javascript though. At the moment I get syntax highlighting in TW's rendered view, but the codemirror editor doesn't show syntax highlighting, except indicating paranthesis.

Any idea what went wrong?

Regards,
TheDiveO

On Wednesday, October 1, 2014 7:10:25 PM UTC+2, Danielo Rodríguez wrote:

[Stephen Kimmel]

Danielo, TheDiveO, et al,

I hope this hasn't been as frustrating for you as it has been for me but I finally see the light at the end of the tunnel. I got CodeMirror up and running in TW5.1.2 ... at least enough to get the idea of what is going on with it. It does act a bit differently than the classic editing functions in an ordinary Windows textbox. But I see a lot of potential here. I'll download the repository this evening and see where all you went with it.

Part of the problem was the VIM keyboard mapping. When I changed it to Sublime, things started to work for me.

TheDiveO - The CodeMirror folks have a number of javascript support modules that can be added in and one of those may be what you need. Adding one of the modules isn't too bad once you figure out the trick. Take a look at their website http://codemirror.net/doc/manual.html#addons and see if one of those does what you're looking for. hint/javascript-hint.js for example.

I am more interested in enhancing the tiddler editing environment and with some work CodeMirror might be a good step in that direction. And, if need be, I'll update the documentation for this plugin myself.

Stephen

[TheDiveO]

Well, for me the basic syntax highlighting doesn't work. I've running a recent TW5 5.1.3prerelease core and plugin repo clone. I've added a code mirror configuration tiddler. I'm pulling in Javascript support ... no errors, but also no syntax highlighting, no colored code. Nada, nothing.

[Stephen Kimmel]

Danielo,

Do you know how to make keysnippets work with CodeMirror or how to map the CodeMirror keys to have the sort of "add bold marks before and after the selection" functionality?

[TheDiveO]

Danielo,

I now find some time to look at your dropbox repo. One minor thing I noticed is that it uses the pre TW5.1.x CSS tagging instead of the recent $:/tags/Stylesheet. Playing around with your configuration I finally found the reason why I saw no syntax coloring ... until this very moment I didn't realized that the themes also bring in the syntax coloring and that the core TW5 distribution is lacking the more colorful styles. So I added a stylesheet to my ThirdFlow plugin to be used for codemirror syntax coloring. I will now try to bring the syntax coloring between the codemirror and highlight plugins into sync, if possible.

On Wednesday, October 1, 2014 7:10:25 PM UTC+2, Danielo Rodríguez wrote:

[Danielo Rodríguez]

I tried it several times and I found it so difficult that I have created a plugin for doing that. You can check it at braintest.tiddlyspot.com .it is very useful for me

[Stephen Kimmel]

Danielo,

I use your key routine all the time and have made it part of my set of standard tiddlywiki modifications. Among the functions I would like to see added to tiddlywiki is the search and replace like Eric had with the quick edit functions. I might not have bothered with CodeMirror at all if it didn't have that.

If I could get your keysnippets to work with codemirror or get codemirror to do the before-after insert I think I would have what I want. But it looks like the group, especially Pmario, have gone down this trail before. It may not be worth the effort.

Stephen

[Erwan Dano]

Hi everyone,

I also had trouble using CodeMirror, and couldn't find any good documentation. The basic configuration given on tiddlywiki doesn't even work for me :/
But I spent a fair amount of time testing configurations and got some things to work. Ideally I'd follow the steps given to improve Tiddlywiki documentation, but I won't, for 2 reasons :

1. I'm just a student trying to share a little bit of knowledge, improving the documentation means following 11 steps. Here I just have to write a post and send it. So it's easier for me.
   
2. I had to come to this google group to find the codemirror documentation given on tiddlywiki, so I think my post will have more visibility here.

So I'll just start describing the configurations I have found now.

Convention

• In the rest of this post, when I'll say add a tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js" for codemirror with this code : http://codemirror.net/addon/edit/closebrackets.js , that will mean :

1. Create the tiddler "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js".
2. Add a field : "module-type", and fill it with "library".
3. Select the type : "application/javascript".
4. Copy the code given from the link in the text field of the tiddler.

• In addition when I'll give a configuration like this :

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js"
  ],
  "configuration": {
      "showCursorWhenSelecting": true
  }
}

That means you have to edit (or create if it doesn't exist yet) the tiddler : "$:/config/CodeMirror" and put the given configuration in the text field. You also have to set the type of the tiddler to : "application/json". Finally, you have to reload the page to apply the new configuration.




Basic configuration

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",

      "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js"
  ],
  "configuration": {
      "matchBrackets":true,
      "showCursorWhenSelecting": true
  }
}

Consequences:

When editing a tiddler, no matter what the type of the tiddler is set to, you should see matching brackets being highlighted whenever the cursor is next to one of them.

Adding closing brackets

Add a tiddler "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js" for codemirror with this code : http://codemirror.net/addon/edit/closebrackets.js 

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",

      "$:/plugins/tiddlywiki/codemirror/addon/edit/matchbrackets.js",
      "$:/plugins/tiddlywiki/codemirror/addon/edit/closebrackets.js"
  ],

  "configuration": {

      "showCursorWhenSelecting": true,
      "matchBrackets":true,
      "autoCloseBrackets":true
  }
}

Consequences:

• Now if you try to edit any tiddler and write : "if(", you should see the bracket closing itself automatically (you'll get "if()"). It works with (), [], and {}.

• If you try and edit a tiddler with the type "application/javascript", it'll auto-close (),[],{},'' and ""

Adding HTML coloring

Add a tiddler "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js" for codemirror with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/xml/xml.js

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",

      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js"
  ],

  "configuration": {
      "showCursorWhenSelecting": true
  }
}

Consequences:

Edit a tiddler, set the type to : "text/html", and add this text :

<html>
    <body>
      <div id="test">     
      </div>
    </body>
</html>

You should see the tags being coloured in green.

Adding closing tags

• Add the tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js" for codemirror with this code : http://codemirror.net/addon/edit/closetag.js 

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",

      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",

      "$:/plugins/tiddlywiki/codemirror/addon/edit/closetags.js"
  ],
  "configuration": {
      "showCursorWhenSelecting": true,
      "autoCloseTags":true
  }
}

Consequences:

If you edit a tiddler with the type "text/html" and write :

<html>

Then the closing tag </html> should appear.

Adding matching tags

Add the tiddler : "$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js" for codemirror with this code: http://codemirror.net/addon/edit/matchtags.js

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",

      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",

      "$:/plugins/tiddlywiki/codemirror/addon/edit/matchtags.js"
  ],
  "configuration": {
      "showCursorWhenSelecting": true,
      "matchTags": {"bothTags": true},
      "extraKeys": {"Ctrl-J": "toMatchingTag"}
  }
}

Consequences:

If you edit a tiddler that has the type : "text/html" and write this code :

<html>
      <div id="click here and press CTRL+J">
      <ul>
        <li>
        </li>
      </ul>
   </div>
</html>

Then if you click on a tag and press CTRL+J, your cursor will select the matching tag. Supposedly, it should highlight the pair when clicking a tag. However, that part doesn't work, I don't know why yet. I suspect this is because of some missing css, but I haven't found it.

Adding folding tags

Add the following tiddlers for codemirror :

 - "$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js" with this code : http://codemirror.net/addon/fold/foldcode.js

- "$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js" with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/fold/xml-fold.js

- "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js" with this code : http://codemirror.net/addon/fold/foldgutter.js

Then add the following tiddler "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.css" BUT IT IS NOT FOR CODEMIRROR. Add the tag : "$:/tags/Stylesheet" to it and fill the text field with this code : http://codemirror.net/addon/fold/foldgutter.css.

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",

      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",

      "$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js"
  ],
  "configuration": {
      "showCursorWhenSelecting": true,
      "matchTags": {"bothTags": true},
      "foldGutter": true,
      "gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  }
}

Consequences:

Now if you type the below code in a tiddler with the type : "text/html" :

<html>
   <div>
      <ul>

      </ul>
   </div>
</html>

You should see little arrows just next to the line numbers. Clicking on it will have the effect to fold the code (or unfold it).

That's it for today. I hope this helps some of you.

Kind Regards,

Erwan

[Hugo Disanv]

Hello,
Do you know how to add syntax coloring for tiddlywiki type tiddlers ?
Thanks.

[Erwan Dano]

Hi Hugo,

I have written some notes about adding syntax coloring for the C language. Thanks to these you should be able to do the same for tiddlywiki type tiddlers.
I'm sorry it's not exactly what you are looking for but I can't answer you more precisely for now.

Here you go:

Adding syntax colouring for C

• Add this tiddler for codemirror $:/plugins/tiddlywiki/codemirror/mode/clike/clike.js with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/clike/clike.js

Configuration:

{
  "require": [
      "$:/plugins/tiddlywiki/codemirror/mode/javascript/javascript.js",
      "$:/plugins/tiddlywiki/codemirror/mode/clike/clike.js",
      

"$:/plugins/tiddlywiki/codemirror/mode/xml/xml.js",
      "$:/plugins/tiddlywiki/codemirror/addon/dialog/dialog.js",
      "$:/plugins/tiddlywiki/codemirror/addon/search/searchcursor.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/foldcode.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/xml-fold.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/foldgutter.js"

,
      "$:/plugins/tiddlywiki/codemirror/addon/fold/brace-fold.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/comment-fold.js",
      "$:/plugins/tiddlywiki/codemirror/addon/fold/indent-fold.js"

  ],
  "configuration": {
      "showCursorWhenSelecting": true,
      "matchTags": {"bothTags": true},
      "foldGutter": true,
      "gutters": ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  }
}

1. Find the matching MIME type. If you go on the CodeMirror documentation for language modes you can see the documentation for the c-like mode. In this documentation, at the end you will be told the MIME types defined. Here it's text/x-csrc.
2. Add the matching EditorTypeMappings. Add the tiddler : $:/config/EditorTypeMappings/text/x-csrc and fill the text field with : codemirror.
3. Reload the page
4. Edit a tiddler with the type : text/x-csrc

Consequences:

You should see your code being coloured.


For your particular use Hugo, you should use this code https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/tiddlywiki/tiddlywiki.js instead of the clike/clike.js I gave.
And you should also add a css sheet (a tiddler with the tag $:/tags/Stylesheet containing the css code) with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/tiddlywiki/tiddlywiki.css

I haven tested it with the tiddlywiki mode though.

Hope this helps

Erwan

[PMario]

On Monday, November 10, 2014 1:15:43 PM UTC+1, Erwan Dano wrote:

For your particular use Hugo, you should use this code https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/tiddlywiki/tiddlywiki.js instead of the clike/clike.js I gave.
And you should also add a css sheet (a tiddler with the tag $:/tags/Stylesheet containing the css code) with this code : https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/tiddlywiki/tiddlywiki.css

I haven tested it with the tiddlywiki mode though.

This is syntax highlighting for TW classic. There is no TW5 syntax highlighter yet.

-m

[Danielo Rodríguez]

Hello Erwan,

Would you consider contributing to code-mirror plugin documentation with your detailed explanation? I find it very concise and useful and it is already wrote. 

Regards.

[Erwan Dano]

Hi Danielo,

To be honest, I originally intended on contributing to the documentation. Then I was scared off by the amount of steps I had to follow.
I don't mind somebody else doing a copy-paste of what I have written and doing a pull request to improve the documentation. So if someone feels like doing it that would be great.
But sure, I'll definitely give it a try later this week when I have some spare time.

Regards

[Danielo Rodríguez]

Hello Erwang

Is not as difficult as you think. On the info section of each tiddler you have a link to github. You can edit that tiddler on GitHub at it will create a fork for you. Regards

[Robert Edwards]

I realize I'm replying to an old post.....

I've just run across this discussion and reference to CodeMirror it looks intriguing but I'm also having great difficulty figure out what I can do with it and how. For instance Danielo mentions in this post to which I'm replying that perhaps Stephen is in vi(m) editing mode. How would I enable that? I use vim day-to-day and it would make my life easier to use it in TW!

What documentation I've found so far has been either sparse, somewhat obtuse, or (e.g. the official CM docs) too generic for me to understand how it works specifically in the context of TW.

Thanks!

[Hegart Dmishiv]

Hi Robert,

I went through the whole "banging my head against TiddlyWiki's implementation of CodeMirror" a short while ago. The answer I received then was that the version of CM in TW is out of date, and someone with the know-how will need to look into it. I see there are currently 12 open issues relating to CodeMirror for TiddlyWiki in GitHub, so hopefully someone is working on this. I have basic bracket matching working, but not automatic bracket closing yet, and there is much more I'd like to do with CM in TW as well. Mainly, I'd love to see WikiText syntax highlighting. That would be awesome.

Hegart.

[BJ]

Hi Robert,

you need to look at the tiddler $:/plugins/tiddlywiki/codemirror/usage to see how to setup using a config tiddler ($:/config/CodeMirror),

However, the external files mentioned are not the correct ones for the version used in the tw plugin (which is 4.1.1)

in place of files like
http://codemirror.net/addon/edit/closebrackets.js
you need to use
https://raw.githubusercontent.com/codemirror/CodeMirror/295c1aff82ad31e465c7ba391dde51d818b45a7c/addon/edit/closebrackets.js

all the best
BJ

[Robert Edwards]

Thanks BJ & Hegart.

I managed to get vi mode working. One gotcha I've found is that to change modes in vi from insertion to command, the key is the escape key. This is also the key TW uses to abandon a tiddler. It brings up an "Abandon changes to this tiddler?" dialog. If I cancel it, it returns me to the editor but fortunately also switches to command. Annoying but liveable I think.....

[BJ]

Good stuff. The keyboard shortcut for cancel edit is control via this tiddler

$:/config/shortcuts/cancel-edit-tiddler

all the best

[Robert Edwards]

Good to know. Thanks!