Adding editor shortcuts to edit-text widget

#1

I’m hoping some CSS wizard can point me in the right direction. I’m building a custom outliner which is going well, but I’d really like to add some of the native editor shortcuts back into a normal <$edit-text/> widget - specifically the insert link (ctrl-l). I want to add the functionality without adjusting the look. Unfortunately I think the best we can do is to instead change the look back, and thus I need to figure out the css that gets me there.

Here is a non-enhanced, simplified example that shows basic code and what I want it to look like:

<ul>
<li>First Item</li>
<li><$edit-text tiddler="test" tag="input"/></li>
<li>Third Item</li>
</ul>

image

Here’s a functional but very ugly version that needs css

<ul>
<li>First Item</li>
<li>
<$edit-text tiddler="test" tag="input">
<$list filter="[[$:/core/ui/EditorToolbar/link]]">
<$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline"/>
</$list>
</$edit-text>
</li>
<li>Third Item</li>
</ul>

image

So I need to remove the button, and fix the rest of the spacing. I can hide the button with something like div.tc-editor-toolbar {display:none;} but then the shortcut stops working, so that’s not an option. I saw someone say surrounding something with <template></template> would hide the button but keep it functional but for me the functionality goes away. Any ideas?

#2

The problem in your functional example is how is created the input, it is embed in iframe and this element has a height, you would have to change it.

But I think you could use the keyboard-driven-input macro or something similar for your case.

It consists of an edit-text widget wrapped in keyboard widgets.

#3

Here’s a slightly-modified version of the macro I use for full-featured text areas:

\define edit-text(tiddler, field:"text", class:"", default:"", placeholder:"", editor:"$:/tags/EditorToolbar", btnClass:"")
<$edit-text
    tiddler=<<__tiddler__>>
    field=<<__field__>>
    tag=input
    class="$class$" 
    placeholder=<<__placeholder__>>
    default=<<__default__>>
>
<div class="$btnClass$">
<$list filter="[all[shadows+tiddlers]tag[$editor$]!has[draft.of]]">
<$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline" />
</$list>
</div>
</$edit-text>
\end

I have it set up so that I can specify the classes to be applied to the input/toolbar each time I call it, e.g.

<style>
.hide { display: none; }
.fixed-height { height: 1.75em; vertical-align: top; }
</style>

* test
* <<edit-text "test" class:"fixed-height" btnClass:"hide">>

image

You could bake your preferred styles right into the macro–and, of course, the same thing ought to work outside of a macro, too.

#4

Thanks @etardiff, from a visual standpoint, your vertical-align: top; helped with a bullet alignment I was stuck on. And I finally figured out the bit of extra vertical space with li > div.tc-editor-toolbar { margin-top: 0px; } that came with the toolbar. But, with these changes the actual functionality of the ctrl-l doesn’t work anymore, same as where I was stuck before. Experimentally, because the “insert hyperlink” seems to launch at the coordinates of the button, I think the process of hiding the button itself necessarily breaks the functionality. Are you not finding that to be the case for you? Or maybe you’re only using non-popup things like bold where it wouldn’t be an issue?

#5

That is precisely the issue. You can hide the buttons with CSS and the keyboard shortcuts will still work as long as the buttons are still there in the DOM. However, all of the popups use the buttons as anchors for their positioning and therefore will not work.

Edit: I suspect you could create a custom toolbar button that triggers a popup using <$action-popup/> and use CSS to get the correct positioning.

#6

Thanks @Alvaro, I thought that looked promising too, but my understanding of it is that this adds drop down magic to the WHOLE edit-text box, whereas I am trying to add multiple links inline with other text. For example each of these boxes represents a note like “I need to talk to [[John Smith]] about [[Project ABC]] tomorrow”. For each of those links I’m hoping to hit the shortcut and have something like the link drop-down experience to text-insert the link. I haven’t used it though, maybe I’m wrong. I’ll dig deeper here.

#7

Thanks @saqimtiaz. I’ll read up on the <$action-popup>. Ideally I can figure out how to skip the button by more directly calling it. In the real example that edit-text is surrounded by about a dozen <$keyboard> widgets for all sorts of stuff, but I’m pretty sure that mechanism won’t work for inline text replacement. From what I read I’m stuck with logic going inside the <$edit> widget in some way.

#8

Another thing to keep in mind is that the core link dropdown is not able to be positioned at the caret, that is where you are typing, for that you might consider the AutoComplete plugin.

Right, so you need to use the edit-text operations and those can only be triggered from within the $edit-text widget. You should be able to create an invisible toolbar button (CSS visibility:hidden) that is triggered by a keyboard shortcut and then triggers a popup that is also defined within the $edit-text widget. The catch is going to be that it will always show up at a fixed location and not where you are typing in the editor.

#9

Interesting, that gives me some things to explore - thanks!

#10

Ah, sorry, I see the issue. I use the wrapping functions a lot, but the popups hardly ever; I’d forgotten to test that one.

I’m glad @saqimtiaz was able to give you some more helpful pointers!