"Slash command" with autocomplete menu

#1

Hello,

I’d like to reproduce in TW something like Notions’ slash command, basically an autocompletion popup menu that does not only insert a snippet in the focus field, but that can do any $action.
I would use this typically to set fields or tags without leaving the text field (e.g. typing /todo could add a field status=TODO), when writing “inline” notes with Streams, to have a date selector popup to insert the date at the caret, without clicking a button or remembering a keyboard shortcut.
Is that doable with EvidentlyCube/Autocomplete, or another existing plugin, or should I do it from scratch?
I’m guessing that it may use of the inputActions parameter of $edit-text, but where to add such inputAction to any text input field?

Thanks!

#2

You would need to modify the edit template. You will also need some custom JavaScript to position the popup at the cursor.

This might be of interest in terms of inspiration:
https://groups.google.com/g/tiddlywiki/c/yc23dgmiOo4/m/h4JypjbCAQAJ

It never went much further due to lack of a solid proposal to implement positioning the popup at the cursor in the core:

Incidentally, I have been discussing the fundamental needs discussed in the above linked comment again last week and have an idea that might be feasible, but it will be a while before I will have the chance to explore it.

This bug is also due to the same underlying issue.

#3

Looks like you’ll like tiddlywiki codemirror6 plugin My TiddlyWiki — a non-linear personal web notebook

1 Like
#4

Thanks @saqimtiaz, I’ll be following that topic! Unfortunately I don’t think I can be of much help on the technical aspects. Codemirror6 is probably a much easier way forward for me :sweat_smile:

#5

Thanks @oeyoews, codemirror6 does indeed look like something I should be using.
I’m still pretty new to TW and I tried Codemirror6 last month, but I could not figure out how to install your version on nodejs/Bob so I went with GitHub - BurningTreeC/tiddlywiki-codemirror-6 instead, even though your version looks more advanced (but a bit less documented).

Trying again now, I have the same troubles, and I would love more documentation on your project.
I’ve seen conflicting information about installing plugins via drag and drop into nodejs/Bob servers, mostly advising against drag and drop, but after copying the 4 plugins from your Github’s /src folder (containing plugin.info files), I run into a red JS error screen. Drag and drop to install it seems to work, until I try to create a new Stream tiddler and get a red JS error.

So here are a few questions to get me started with codemirror6 (most of which I could probably figure out by diving into its source code, but I’m not fluent yet in JS or wikitext):

  1. What is the best way to install it on Bob?
  2. What does $:/plugins/oeyoews/tiddlywiki-cmp do? there is no readme.
  3. Once installed, how do I change the style of the editor’s buttons to go back to the standard TW style?
  4. How do I get a frame again around the text field?
  5. How can I customize the autocompletion keywords and popup contents, to add e.g. snippets or actions?
  6. (Bonus question, how would I implement a datepicker? :slight_smile: )
#6

Use CPL to install. And try TidGi if you are new to TW and want to use nodejs, it has codemirror6 preinstalled.

#7

Thanks @linonetwo - same question number 1, how do I install CPL on nodejs/Bob? drag and drop?

(I’ve tried CPL on a standalone wiki before, and I tried TidGi, but TidGi does too many things I could not understand or easily configure.)

#8

To install CPL, drag it from https://tw-cpl.netlify.app/ .

BTW, TidGi is for new users that don’t want to waste time config things, this is essential for let most of users accept tiddlywiki before they leave. If you are a power user, you surely could config things from the ground up with empty edition.

#9

All right, I’ve installed CPL and reinstalled codemirror-6 from CPL.

Unfortunately I’m still getting the Internal Javascript error RangeError: Maximum call stack size exceeded from transclude.js when creating or editing a Streams child tiddler (and Uncaught TypeError: Cannot read properties of undefined (reading 'fields') from streams-edit but I guess it might be due to the previous error)

@saqimtiaz @oeyoews are you aware of conflicts between Streams and Codemirror-6? Or is it related to my own configuration? Let me know what I can look for to troubleshoot.

#10

I know, so I created Streams outliner, now works as a procedure, use it as a library in your plugin

1 Like
#11

Thanks.
After disabling Streams and installing Streams Outliner (or is it Component?), I don’t see the Streams Component tab in Settings as I see in your demo wiki, although not a big deal because I can access this configuration from the plugin itself.

The rest works fine, thanks! and no conflictanymore with codemirror-6 :+1:

#12

Hi again,
After digging a bit in the JS source code, I’m slowly figuring out how to customize some things in codemirror6, gathering some notes about it, and I plan to eventually propose some improvements to the readme in github.

However, I have no idea how to address my point number 6, which is one of the key features I use in Logseq: typing /date opens a date selector calendar in a pop-up, in which I can navigate with the keyboard’s arrows, and which inserts a link to the journal tiddler of the selected day (e.g. [[2025-03-14, Thu]] ). The same can be done to add a date in a field called scheduled or deadline for example.

I suppose I could use any of kixam’s datepicker, @linonetwo 's TW_calendar or @hoopyfrood 's eventcalendar, but I’d appreciate some guidance on a possible implementation :pray: