[Release] Codemirror6 Plugin

Plugins
,
#147

I tested autocomplete with the other codemirror6 and it was not working :frowning:

1 Like
#148

If my AutoComplete plugin is not working with any plugin you’re aware of feel free to report it to me (preferably in the thread) and when I have the time I’ll (make an attempt to) ensure it’s compatible :slight_smile:

#149

I did take a look at it just now, and the completions are really great, including some features that codemirror6 doesn’t have yet. I’ve never used any other completion plugins, so I haven’t done any compatibility testing yet. Sorry

For codemirror6’s completions, I thought it was necessary to give a brief introduction, so I spent an hour writing a short article.

Use autocompletion from CodeMirror6 to speed up your writing

Tag Autocompletion

  • When you type #, you’ll see a list of all your tags. Continue pressing Ctrl+j to quickly move to the next one. Of course, arrow keys work as well. Select the tag you want, then press Enter or Tab (mouse clicks are supported too). Your tiddler will then have the new tag added.

Try typing wiki to see what pops up!

Template Selection

  • When you type @t, a series of popups will appear. If this is your first time using it, you’ll see a tip—don’t hesitate, accept the current autocompletion. This should create a new tiddler titled $:/templates/new. In the tiddler’s text input field, type something, then return to your previous tiddler. When you type @t again, you’ll see the newly created tiddler. Accept the current autocompletion, and it will copy all the necessary fields from that tiddler to your current one. Be careful, as it will clear the current input box.

Tips: The template autocompletion window includes all tiddlers starting with $:/templates/ or $:/tags/TextEditor/Template.

Code Snippets

  • If you have content you need to input repeatedly, you may want to use code snippets.

  • When you type /, a list of code snippets should appear.

  • If you suddenly want to add a new code snippet while writing, just press @#add. A popup for adding a new snippet will appear. Click it, and you can quickly create a code snippet.

  • If you want to dynamically replace some content, you can use #{placeholder} or ${placeholder} instead. (One of my favorite features!)

<!-- for example -->
Your name is #{name1}, I am ${name2}

Images, Macros, and Other Autocompletions

  • As everyone knows, TiddlyWiki supports macros, widgets, image syntax, and embedding syntax. If you start typing these again, you’ll notice more autocompletion suggestions.

Emoji Autocompletion

  • Codemirror6 supports plugin extensions. You need to install tiddlywiki-cmp-emoji, then type : to select the emoji you want.

Autocompletion Cheat Sheet

Too many shortcut keys to remember? Just type /? to see all available autocompletion triggers.

For Vim Users

  • Codemirror6 autocompletion is so powerful, how could it not have a Vim mode? Enable Vim mode in your Codemirror settings. Of course, Vim lovers can set the jk shortcut too.

More Features

  • Codemirror6 has a lot of features. You can explore more details by visiting its settings page.

Bug Reporting

  • You might have noticed that Codemirror6 comes with a set of built-in commands. Type @#bug and press Enter to quickly submit an issue to the developer.
4 Likes
#150

Thank you @oeyoews. Please also add this to the CodeMirror6 tutorial.

Small questions: where and how can I do the below adjustments?

  1. If I want to show the editor background and border like codemirror 5?
  2. If I want to add more commands?
#151

Can I turn off syntax highlighting for TiddlyWiki itself? I mean the TW5 scripts not other languages.

#152

I created a plugin called neotw-play-sound that looks like it would work well with the codemirror6 plugin. If you manually toggle the codemirror6 config, you should hear an extra sound. It can also be turned off, and it is off by default.

image
image1801×784 37.4 KB

2 Likes
#153

That woop sound as you open and close the menu is quite mesmerising!

1 Like
#154

You found me, haha. I think this sound brings me some fun in tiddlywiki

2 Likes
#155

For sure it does - i love it!

#156

This can certainly be supported, such as action, but I can’t think of any other usage scenarios for now. Can you give some examples?

#157

Thank you! One example is applying templates!
For example in the Mehregan edition, I use people, source, reading, idea, and journal templates.
So, I like to be able to apply the template to a tiddler using commands.

@linonetwo has also an edition using templates but it shows templates below fields in edit mode and one

can click on a template of choice to apply a template. That is easy but the UI is a little crowded with different objects.

CM6 commands can help to hide all these UI elements. :wink:

#158

Just input @t, and all lists starting with $:/template/ will appear. You can choose any switch and apply it to the current tiddler. Is this the effect you want?

image
image1711×1119 70.2 KB

image
image1917×1146 147 KB

1 Like
Edit Toolbar: Apply Template
#159

This is wonderful. Now it works like a charm.
Thank you.

#160

image
image873×376 19.2 KB

Since it is not so easy to distinguish between tab, whitespace and newline in tiddlywik, I also integrated this visualization into codemirror.

3 Likes
#161

Hi @oeyoews

Enhancing the templates

Please see Edit Toolbar: Apply Template - Tips & Tricks - Talk TW

What I want to propose here is to handle the meta tags, fields. This way a template can have any name and any number of fields, BUT the code will require a meta tag like $:/tags/Template to recognize a template and two meta fields: tpl-caption to store a short name and tpl-description to store a longer description. The code when applies a template takes care of meta fields/tags to remove them. You can see in $:/kookma/ui/Buttons/apply-templates how meta fields/tags are removed.

#162

I discovered Codemirror recently. I wonder if there is a way to get autocomplete suggestions for macros defined by other plugins. For example, I have Tamasha installed on the same wiki. It defines a presenter macro but it doesn’t seem to be available in the Codemirror autocomplete dropdown for macros.

#163

image
image1920×1029 248 KB

Currently the plugin only supports querying js macros, not wikitext macros. Others seem to have used regular expressions to achieve this function.

#164

Thank you for the information. I understand that the best way to achieve this would be to use the Autocomplete plugin and to define custom triggers. Which does make a lot of sense, by the way.

#165

Unfortunately, AutoComplete does not work with CodeMirror 6.

#166

I did look at the regular expression matching of autocomplete, and obviously as the autocomplete plugin said, this implementation is not perfect, and the best way is to support it directly through tiddlywiki core. I haven’t had time to study this yet.