Context menu plugin - selection add-in

[fastfreddy]

Good day,

Based on the discussion in this thread, please see a work-in-progress add-in to @ahanniga’s context menu which provides additional menu options that take advantage of the user text selection (mouse highlight) of the rendered WikiText.

https://fastfreddy.gitlab.io/context-menu-selection-add-in/

Please do take time to read the limitations of this plugin in terms of quick-and-dirty formatting from view mode.

[fastfreddy]

hello @ahanniga @saqimtiaz : I am having challenges making the context menu selection add-in work within Streams nodes. The plugin isn’t getting the correct (node) tiddler title to be able to make the text replacement.

How would you recommend tweaking the $:/plugins/ahanniga/context-menu/ContextListener.js widget (and/or the current anchor of <$contextMenu> in $:/plugins/ahanniga/context-menu/view-template) for the context menu to work within Streams nodes?

I have tried a few different things (e.g. fetching data-node-title instead of data-tiddler-title and anchoring the widget in $:/plugins/sq/streams/templates/stream-row-template just below {{||$:/plugins/sq/streams/editor-template}}, but without success so far.

It seems the data-node-titleattribute returns null even if it appears to be well defined in $:/plugins/sq/streams/templates/stream-row-template everywhere.

Are there better approaches?

Cheers!

[saqimtiaz]

If I understand correctly, the challenge is to identify the node in which the selection has been made?

Off the top of my head I would try something along these lines in the event handler:

var node = event.target.closest("[data-node-title]");
var nodeTitle = node && node.dataset["node-title"];
if(nodeTitle) {
//selection was made in a streams node
}

Starting with the event target, you want to find the closest ancestor that has a data-node-title attribute and get that attribute.

[fastfreddy]

Thanks @saqimtiaz; insightful.

With this snippet

        var node = event.target.closest("[data-node-title]");
		console.log("node: "+node);
		//console.log("keys: "+ node.dataset.keys());
		var dataset = node && {...node.dataset};
		console.log("node ds: "+dataset);
        var nodeTitle = node && node.dataset["node-title"];
		console.log("node title: "+nodeTitle );

        targ = nodeTitle || event.currentTarget.getAttribute("data-tiddler-title"); //based on the div attribute in view template that contains currentTiddler
		console.log("current/tiddler: "+targ);

the $:/plugins/ahanniga/context-menu/ContextListener.js returns this data upon right-clicking a node. Seems as if the dataset doesn’t contain the node-title attribute, which is odd because the selector [data-node-title] should return the first node that has it (I have also not managed to get values or keys out of it).

[saqimtiaz]

Apologies, my oversight. When accessed via JavaScript, the data attributes are camel cased. Try this and make sure the context menu event is on a stream node. If the selection is in a stream node but the context menu event is triggered elsewhere, it will not work:

var node = event.target.closest("[data-node-title]");
var nodeTitle = node && node.dataset["nodeTitle"];
if(nodeTitle) {
//context menu was triggered in a streams node
}

You can also consider trying to identify the DOM node that the selection is in rather than using the context menu event target. This will prove similarly brittle if the selection spans DOM nodes.

[fastfreddy]

@fastfreddy

        var node = event.target.closest("[data-node-title]");
		console.log("node: "+node);
		//console.log("keys: "+ node.dataset.keys());
		var dataset = node && {...node.dataset};
		console.log("node ds: "+dataset);
        var nodeTitle = node && node.dataset["node-title"];
		console.log("node title: "+nodeTitle );

        targ = nodeTitle || event.currentTarget.getAttribute("data-tiddler-title"); //based on the div attribute in view template that contains currentTiddler
		console.log("current/tiddler: "+targ);

No apologies needed @saqimtiaz; this works perfectly.
I’ll be packaging the mods into a new version that is compatible with Streams ASAP (possibly only tomorrow unfortunately).

Much appreciated!

[fastfreddy]

Ok, released what I believe to be a Streams-compatible version. Not thoroughly tested (ran out of time), will QC tomorrow some more…

Next on the roadmap is:

• Basic undo/clear formatting done (with limitations discussed previously)
• Excise selection to new tiddler and replace with link (will require relink plugin I think) done
• Overhaul the way we warm users of multiple string matches (at least try something different) (pretty happy with current state, particularly now that we have clear formatting which can show a different number)
• Quick edit text selection, from a text field input box right in the context menu (stretch goal) since v.0.2.1
• Investigate if we can protect against markup changes in macros or transclusions using better regular expressions) experimental solution since v.0.2.4

[fastfreddy]

new version released that provides a basic “clear formatting” option, a very sweet configuration interface, and few other enhancements.

@Brian_Radspinner : thanks for the inspiration for the configuration screen in your tabs organizer. I managed to make the list draggable for ordering, it may inspire your tabs organizer back

[Brian_Radspinner]

Nice! Glad I could be of service.

D’n’D was on the todo list, and I also like the checkboxes for separators. It could come in handy for a Sidebar toolbar I am using.

[fastfreddy]

version 0.1.7 includes “excise to new” (and “leave link behind”) option, but requires the relink plugin so that you can change the title of the new tidder after creating it. Have also greatly improved the config UI (updated image above).
Make sure you enable relink if you rename the new tiddler:

[arunnbabu81]

@fastfreddy

“excise to new” (and “leave link behind”)

@fastfreddy Thank you. how did you managed to do that. I did only limited testing in my mobile. Will test more and give feedback.

Is there anything that can be done for the use of context menu in mobile. The current user experience is not that great because the context menu pop up is overlapping the text selection process.

Is it possible to create a cascading context menu. I am not sure of its usability in mobile. But it may reduce the length of the context menu by categorising using submenus. Just some thoughts.

[fastfreddy]

v 0.1.9 update with a new menu item (excise and transclude in addition to excise and link). This version provides interoperability with @saqimtiaz’s Links Context Menu Plugin for the first time, and repackages the original Print River menu item to work with this plugin’s condition field (and activate the menu item only when the PrintRiver plugin is also present).

[Mohammad]

What do you think if we can have kind of breadcrumbs?
I mean in context menu I can see list of open tiddler in story river and can click and jump to that tiddler!
There are some breadcrumbs solutions out there, one is tzk from @sobjornstad

[fastfreddy]

it’s probably doable @Mohammad, however I have been focusing my add-in to activities that operate on, or operate with, the user text selection. Seems a list of open tiddlers is a better fit for the original plugin?

I also have a lot of actions now and as a result it is already a giant context menu which does not work well on mobile as @arunnbabu81 reported. Even if you can hide away some of the options, users have suggested multi-level context menu. A list of open tiddlers would make that a bigger problem unless I could find a way to do multi-levels.

[arunnbabu81]

@fastfreddy

unless I could find a way to do multi-levels.

Implementing a contextmenu with wikitext

Turns out, adding the View Toolbar to the context menu is very simple. It is just another “button” with a submenu, just a few lines of code changed from what I posted above: \import [[$:/core/ui/ViewTemplate]] <!-- import is needed for the macros defined there --> <$reveal type="nomatch" text="2" default=<<menuLevel>> tag="button" class="tc-btn-invisible"> <$tiddler tiddler={{$:/HistoryList!!current-tiddler}} > <$let menuLevel="2" > {{$:/core/images/options-button}} <span class="tc-btn…

From the image posted in this link, it looks like @Yaisog have implemented multilevel context menu in his wikitext based context menu. May be you can get some hints from it.

[fastfreddy]

“quick edit” experimental option added (can be disabled in user preferences). Modifier key(s) to override context menu and show the default browser context menu now configurable.

[arunnbabu81]

Quick edit works fine in my mobile…edit gets saved on pressing enter button on the keyboard on mobile.

[arunnbabu81]

@fastfreddy I am getting this error message on using copy to clipboard option in the context menu. I even tried this on the demo site.

[fastfreddy]

Hi @arunnbabu81

There is an error in my plugin’s packaged $:/plugins/ahanniga/context-menu/ContextListener.js tiddler.

In that tiddler, please remove line 236 text = $tw.wiki.getTiddlerText(targ);
and change line 237 to this.dispatchEvent({ type: action, param: selection });

If you then reload, you should be ok.

I’ll push an update to the plugin ASAP (likely this evening).

[HistoryBuff]

Hey @fastfreddy!

I just started using your plugin today and am finding it very useful. Thanks!

Question: is it possible to add a context menu item that could be used to add a field or tag to the existing tiddler with the value being either something that’s highlighted or input in a form somewhere? Is it possible to add a menu item that would create a new tiddler with certain fields prepopulated with certain values?

Thanks in advance.