Line based tiddlers and editor can you help?

Developers
#1

Folks, imagin I have a dictionary tiddler, or line delimited text tiddler, the text field is not normaly wikitext rendered because its main use is by reference from other tiddlers. Any wikitext or tiddlywiki script if it exists can only be valid within a single line.

I would love to have a line editor (for want of a better name) that allows you to view the tiddler, then clicking somewhere in the tiddler allows you to edit a line at a time. Lets call this current line, On enter save the line back to its place in the text field and edit the next line. Similarly hit insert to add a line after the current line or at the end to add lines to the bottom.

Edited

perhaps this solution could be extended to a cell editor such as in a csv, table cell etc,

I raise this here because amongst our developer comuniity I suspect there are some who may find it trivial to implement this.

  • I would hope to use a view template cascade to triger this on a subset of tiddlers meeting a desired filter condition.

Idealy one could programaticaly invoke the perline editor and add aditional tiddlywiki script before and after so the designer could implement other code against each line, both in view and edit modes. eg delete line, insert line above/below, add something to the front of the line, wrapp [[ ]] round the line etc…

  • Perhaps if we could change the line delimiter from new line to other delimiters another set of possibilities open up? or even JavaScript data.
  • Could we use a toolbar when editing each line?
  • Could we drag and drop reorder lines in view mode?

Why?

This would provide a useful editor for the editing of such line based tiddlers as already exist in tiddlywiki but also others that may be designed to leverage it. eg edit a dictionary tiddler item, pallet tiddlers, csv etc…

It seems to me an interface that is missing from tiddlywiki, although codemirror is similar in its operation, although not obviously so. Perhaps we could leverage codemirror code?

#2

If you are indeed dealing with dictionary tiddlers, you may be interested in @vilc’s Dictionary Table and my modification (quoted in the same thread), which allows click-to-edit for index values while in view mode.

If you’re not using true dictionary tiddlers, or you want a more general line editor, perhaps it may serve as a jumping-off point for your own enhancements.

My modified Dictionary Table template uses a simple $edit-text widget with tag=input, since I wanted a simple single-line editor. But you could replace it (or any $edit-text, really; I use a similar technique for all my textareas) with an edit-text widget that mimics the one used in the edit template. To try it out, replace this line:

<$edit-text tiddler=<<temp>> tag=input class="tc-max-width" default=<<value>> />

with the following:

<$tiddler tiddler=<<temp>>>
<$edit-text field=text tag=textarea class="tc-max-width" autoHeight="yes" minHeight="1em" default=<<value>> >
<$let targetTiddler=<<currentTiddler>>>
<div>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]">
<$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline" />
</$list>
</div>
</$let>
</$edit-text>
</$tiddler>

If you want only a subset of the buttons used by the standard editor toolbar, you can tag all the buttons you want to use with an additional tag of your choice and then replace tag[$:/tags/EditorToolbar] with your chosen tag.

2 Likes
#3

It sounds a little bit like what I tried to do with Bullets (Bullets plugin - first look - Plugins - Talk TW). For that I essentially split the text of a tiddler by line and then look for lines starting with # or * characters and then allow line-level editing.

Behind the scenes, clicking the bullet button takes the raw text and splits based on newlines into temp tiddlers to store values and replaces the line with an edit box that has lots of keyboard shortcuts. Then when you click “accept” it re-assembles the lines back into the text field.

It’s missing some things you’re looking for, but thought you might want to have that as reference. You’ll notice in the post / site that I originally planned on doing a table version of it as well which was closer to what you’re thinking of. I may circle back to that someday, but I’m working on other things.

1 Like
#4

I did create a video series some time ago, where I did show how to create the Script Manager Edition. It should have been named Link Manager, because that’s what I use it now on a daily basis.

There is an element on the page, that allows to edit data-tiddlers line by line. Instead of a line based index, it uses a date-based index, to manage the data-tiddler. So TW default filters can be used to manipulate the tiddler.

  • It lets you open several lines at the same time.
  • It also has a cancel-button. So changes are only saved back, if Done is activated.
  • It has a delete line button
  • It has a New button to add elements.

The videos can be found at YouTube. So you can create that element on your own or use the script-manager if it fits.

The intro thread is still at Google Groups: https://groups.google.com/g/tiddlywiki/c/_VQw8yIKWn8/m/G8TO8h6MCAAJ

1 Like
#5

Thanks Mario. I am looking at the script manager edition and in the first video, see how you have scroll bars to edit only the content between tripple back ticks, you mention this can be filter driven?

I am now reviewing the second video with a view to the line editor you suggest this is like.

#6

I cant find this @pmario