Update preview pane programmatically

Developers
#1

Sometimes I use the Firefox Add-On Textern to edit a tiddler in vim. Textern works like that: Whenever you edit a div or a textarea, you can press a certain shortcut to open the content of that div or textarea in your favorite editor. After saving the temporary file in the editor, all changes show up in your browser.

But there is one problem, when I use Textern in TiddlyWiki: The tiddler content gets updated, but the preview pane doesn’t notice that the text has changed. See Textern issue #60 (no additional link allowed).

How to simply reproduce without this plugin:

  1. Open https://tiddlywiki.com in your browser.
  2. Click on the + button to create a new tiddler.
  3. Click on the “eye” button to show a preview pane.
  4. Enter some text in your new tiddler. (The new text should show up in the preview.)
  5. Open the Web Developer Tools (Firefox) or however this is called in your browser.
  6. Enter:
var textarea = document.getElementsByTagName('textarea')[0];
textarea.value += 'new text';

new text will be added to the tiddler but it doesn’t show up in the preview pane. Only after typing in more text, new text will become visible in the preview pane.

How can I update the preview pane programmatically? I mean like simulating that new text has been typed in. I have tried this, without success:

textarea.onkeypress();
var event = new Event('keydown');
textarea.dispatchEvent(event);
textarea.dispatchEvent(new KeyboardEvent('keypress',{'key': 'a'}))
document.dispatchEvent(new KeyboardEvent('keypress',{'key': 'a'}))

Best regards,
Max

#2

I know that this is not what you asked but maybe you could use GhostText instead ? I use this with vscode / vscodium and the preview get updated. It support vim too !

#3

Hi @MaxGyver83 I haven’t had a chance to try it out, but I’d hope that sending a DOM “input” event to the textarea would trigger TiddlyWiki’s update mechanism.

#4

@telumire : I think I have tried GhostText some while ago. I don’t remember why I kept using Textern. Maybe there was just no advantage and in doubt, I prefer the simpler software/tool/add-on/… If the patch for Textern that I’m going to create gets declined, I’ll give GhostText another try.

@jeremyruston : Thank you, indeed this is what I was looking for!

Full example:

var textarea = document.getElementsByTagName('textarea')[0];
textarea.value += 'new text';
textarea.dispatchEvent(new Event('input', {}));

(I don’t know why but sometimes these steps don’t work. Then textarea.value and the tiddler content differ.)

1 Like
#5

GhostText seems to work for me (Firefox, Windows 10, VSCode) although it didn’t when I was using “Remote Explorer”.