Simple Javascript insertion in tiddlers (text/vnd.tiddlywiki)

[Jimmy Armand]

Hi,

I've been playing with tiddly wiki for about a week now and let me say that it is really great!

But something simple I want to do but I cannot manage to find how to do it: Insert Javascript into a tiddler. What I want to do is use jquery datatable on a table I've created. First, I've put the "datatable.js" into the

...tw2\source\tiddlywiki\jquery folder (don't know if it should be there tough...) and what I would like to do is put the following code:

<script type="text/javascript">

$(document).ready(function() {

    $(table).DataTable();

} );

</script>

somewhere so all my tables gets the "datatable touch". From what I understand, you cannot do that with macros since macros cannot modify the DOM. Am I right?

So, what is the easiest way to acheive that without playing into tiddlywiki core?

Thanks!

[Stephen Kimmel]

Jimmy,

The $Macrocall is the main pathway to a complex javascript. When I did my marathoning tiddler, I used a number of different ways of creating tables using the $macrocall javascripts. One approach was to have each cell make the $macrocall passing the appropriate parameters to the javascript. The other approach was to have a single $macrocall in the destination tiddler where I wanted the table and have the javascript create the table as its output. There are weaknesses to both approaches and I'm certain that there are more elegant ways of accomplishing that.

One possibility you might want to consider using, depending on just what you want to accomplish, is Danielo's Editable-Tables. In that approach, each line of the table refers to a separate tiddler and each cell is a field stored in that tiddler. I use the editable-tables a lot.

[Jimmy Armand]

K. Thx. I will go with the Editable-Tables

[PMario]

Hi Jimmy,

TiddlyWiki 5 doesn't use jQuery anymore.

script tags in the tiddler source are not executed, due to security restrictions.

The tw2/source tree is only there to test the TWclassic build procedure.

Can you explain, what you want to achieve?

-mario

[Tobias Beer]

I never actually looked at the core to find what disables script tags. I'd be curious to figure out how to enable them. Anyone wanting to mess with your data would do the same thing. I prefer to know myself how that's done.

Best wishes, Tobias.

[Stephan Hradek]

Go to tiddlywiki.com

Create a New Tiddler

Paste this into the tiddler:

<script type="text/javascript">
alert("Hooray");
</script>

Set the type to "text/html"

Finish editing

Hooray!

[Stephan Hradek]

Am Mittwoch, 28. Januar 2015 12:49:27 UTC+1 schrieb Jeremy Ruston:

Note that script tags are allowed in text/html tiddlers because they are safely sandboxed in an iframe.

I'm not sure, whether or not I understand "sandboxed" correctly.

Please go to tiddlywiki.com

Set a username

Create a New Tiddler

Paste this into the tiddler:

<script type="text/javascript">
alert("hooray!\n\n"
  + "Your username is '"
  + window.parent.$tw.wiki.getTiddlerText("$:/status/UserName") + "'\n\n" +
  + "And this wiki is called '"
  + window.parent.$tw.wiki.getTiddlerText("$:/SiteTitle")+"'");
</script>

[Jeremy Ruston]

Hi Stephan

Good catch. It seems to depend on the browser: Firefox seems to allow the cross domain access, but Safari and Chrome do not allow it in my tests. I'll investigate whether adding the sandbox attribute improves things.

Best wishes

Jeremy.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Jimmy Armand]

In fact what would be nice is to be able to import javascript directly in the tiddler, like we can do with the <style></style> tags. With css it's easy: Create a tiddler put your css et voilà

The same would have been nice (a major nice to have IMO) to have

[Jimmy Armand]

Yeah but I think that this method is not really nice since I want to put the javascript in a tiddler (text/vnd.tiddlywiki)

[Jeremy Ruston]

TiddlyWiki is designed to block JavaScript in wiki text content to make sure that it is safe to share wiki text content. It's necessary so that we can explore multi-user server configurations and federation. If the act of viewing content authored by someone else causes executable JS code to run then it becomes possible for a malicious actor to, for example, craft a message that actually contains code to steal or delete your personal information.

So, in TW5, there is a strict distinction between wiki text tiddlers (text/vnd.tiddlywiki) and JavaScript module tiddlers (type text/javascript, and with a module-type field). That allows us to filter content from other sources to ensure that we don't allow executable code.

Obviously, these aren't concerns for many users who are working privately. We can serve their needs with a plugin that explicitly enables inline JavaScript, but it's not something that will ever be supported directly by the core.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Jimmy Armand]

It make sens. Thanks!

[Tobias Beer]

Hi Stephan,

 

Go to tiddlywiki.com
Create a New Tiddler
Paste this into the tiddler:

<script type="text/javascript">
alert("Hooray");
</script>

Set the type to "text/html"

Yes, that will do things in an encapsulaed iframe, but not in the context of TiddlyWiki.

Best wishes, Tobias. 

[Tobias Beer]

It's not hard to find. If you search the source tree for "script" (including quotes) you'll see this in config.js...

Thanks for the pointers.

[Stephan Hradek]

Please look further down the thread. The "encapsulated" javascript can access window.parent.$tw and its children.

[Jimmy Armand]

That would be great. Thanks

On Wednesday, 28 January 2015 11:25:39 UTC-5, Jeremy Ruston wrote:

[Jimmy Armand]

Sorry but I'm not sure to understand what you mean. Is it that there's a parameter named script that will help me do what I want? Because in the config.js, there's no "script" configuration to be found.

[BJ]

you are looking for

exports.htmlUnsafeElements = "script".split(",");

but I think it would be better to include a couple of macros to switch scripting on and off:

create a tiddler (any name will do) and set the type to "application/json"
add field "module-type" with value "macro"

and insert in it

(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

/*
Information about this macro
*/

exports.name = "enablescript";

exports.params = [
];

/*
Run the macro
*/
exports.run = function() {
	$tw.config.htmlUnsafeElements = "";
return "";
};
})();

then another tiddler with the type to "application/json"
add field "module-type" with value "macro"

(function(){
/*jslint node: true, browser: true */
/*global $tw: false */

/*
Information about this macro
returns value of key in a data json tiddler
note that macros are not connected with the refresh mechanism -use with caution.
*/
exports.name = "disablescript";
exports.params = [

];

/*
Run the macro
*/
exports.run = function() {
$tw.config.htmlUnsafeElements = "script".split(",");
return "";
}
})();

then use in a tiddler like this

<<enablescript>>

<script type="text/javascript">
alert("Hooray");
</script>

<<disablescript>>
<script type="text/javascript">
alert("Hooray2");
</script>

cheers

BJ

[Tobias Beer]

Hi BJ,

Did you test this or is it a hypothetical?

Addendum: Ok, I just did, it works.

Best wishes, Tobias.

[Tobias Beer]

While having no plans of using this (yet),

however, seeing how that cat is out of the box anyhow,

here's a single script macro to toggle <script> tags on and off, BJ style:

http://fiddle.tiddlyspot.com

Best wishes, Tobias.

[Jimmy Armand]

Thanks!!!! Will try this today

[Jimmy Armand]

Oh. nice solution. Will try this one too.

Thanks!

[Jeremy Ruston]

Hi Tobi

On Wed, Jan 28, 2015 at 2:00 AM, Tobias Beer <beert...@gmail.com> wrote:

I never actually looked at the core to find what disables script tags. I'd be curious to figure out how to enable them. Anyone wanting to mess with your data would do the same thing. I prefer to know myself how that's done.

It's not hard to find. If you search the source tree for "script" (including quotes) you'll see this in config.js:

exports.htmlUnsafeElements = "script".split(",");

Then search for "htmlUnsafeElements" to find where it is used in $:/core/modules/widgets/element.js:

var tag = this.parseTreeNode.tag;

if($tw.config.htmlUnsafeElements.indexOf(tag) !== -1) {

tag = "safe-" + tag;

}

var domNode = this.document.createElementNS(this.namespace,tag);

Note that script tags are allowed in text/html tiddlers because they are safely sandboxed in an iframe.

Best wishes

Jeremy.

 

Best wishes, Tobias.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Matt Groth]

I'd like to insert some javascript into my tiddlywiki but I am having trouble.

The script I want to insert is:

<script src="https://www.reddit.com/.embed?limit=5" type="text/javascript"></script>

See it in use in JSFiddle

It doesn't work if I set a tiddler type to "text/html".

It also doesn't work with Tobias' plugin (though his examples did work, so I know I've installed correctly).

Anyone know what might be causing this issue?

[Ton Gerner]

Hi Matt

<script src="https://www.reddit.com/.embed?limit=5" type="text/javascript"></script>

Create a tiddler, tagged with $:/tags/RawMarkup, with the above script in it. Do not set a type, or set the type to text/vnd.tiddlywiki (without type it defaults to that).
The embedded 'reddit' will be shown at the end of the story river.

 

Cheers,

Ton

[Matt Groth]

Hi Ton,

Thank you, but I don't think the $:/tags/RawMarkup method works.  I tried on both mine and tiddlywiki.com and tried both leaving the type blank and setting it to text/vnd.tiddlywiki. Also, I wasn't sure if you meant to do this with Tobias' plugin, but I tried that and it still didn't work.

Best,

Matt

[Jed Carty]

You have to save and reload the wiki after adding the tag. You can't put in any javascript after the wiki is loaded and have it take effect for safety reasons.

[Ton Gerner]

Hi Matt,

It *does* work although not in a very practical way.
You *cannot* test it at http://tiddlywiki.com/ since you need to save/reload. The tag $:/tags/RawMarkup let the script be put in the head section of TW; therefore it only works after save/reload. Thereafter the embedded 'reddit' will be shown at the end of the story river (if you close all tiddlers, it will shift to the top).
But it is shown over the full width, so it is not very practical.

Cheers,

Ton

 

[Matt Groth]

Got it to work! Thanks again, Ton. You're right, its not very practical in the end.

You can't put in any javascript after the wiki is loaded and have it take effect for safety reasons.

I regularly backup my wiki so I'd be interested to know if this is at all hackable. I'm also somewhat confused about why we have javascript macros then, and what the difference is there. Though at this point I should probably study the code a lot more so I know what I'm talking about. I'll be back!

[Jed Carty]

I probably didn't say that very clearly, you can open a wiki and add javascript to it, but the javascript won't take affect until after the wiki has been saved and reloaded with the new content. And then it has to be either in a tiddler tagged with $:/tags/RawMarkup, inside a properly made javascript macro or inside a widget.

But the saving and reloading has to happen before any javascript charges take affect. I think that this can be changed but it generally isn't recommended.

[BJ]

you could try an ifame in a normal tid

<iframe sandbox = "allow-same-origin allow-scripts allow-popups allow-forms"  src= """data:text/html;charset=utf-8,<script src="http://www.reddit.com/.embed?limit=5" type="text/javascript"></script>"""/>

[PMario]

On Sunday, March 5, 2017 at 1:55:08 AM UTC+1, Matt Groth wrote:

I regularly backup my wiki so I'd be interested to know if this is at all hackable.

TW sanitizes javascript within normal tiddlers, for security reasons.
 

I'm also somewhat confused about why we have javascript macros then, and what the difference is there.

Standard macros are defined with \define ... \end .. Those macros are "text substitutions". Everything between the "define - end" is wikitext, which is powerful but still limited, compared to javascript.

javascript macros can use all the possibilities of javascript, but are still limited to return text. So they work exactly the same way as wiki-text macros. ... macros are not able to "refresh" the rendered output, like widgets. Therefore they are simpler to use and define but you still have to use a developer setting.
 

Though at this point I should probably study the code a lot more so I know what I'm talking about. I'll be back!

The js-macros have been introduced, because we needed them for some edge cases. But it turns out, that tw wikitext is very powerful, so they are only used for some core stuff.

hope that helps
mario

[Jeremy Ruston]

Hi Matt

Just to add to the answers from others,

I'm also somewhat confused about why we have javascript macros then, and what the difference is there.

The objective of TiddlyWiki’s security restrictions is to make it possible to safely share content between users. That requires that JavaScript code be clearly identified so that the recipient can decide whether to trust it enough to execute it or not; if we allowed inline JavaScript within fragments of wikitext then a recipient couldn’t know whether they could safely render incoming wikitext.

So, JavaScript macros are permitted because they are readily identified as such, and can be blocked when required.

The other factor in TiddlyWiki’s design that affects the use of third party JavaScript libraries is that TiddlyWiki doesn’t support the traditional web development paradigm of keeping state data in the DOM (this is the paradigm popularised a decade ago by jQuery). Instead, TiddlyWiki uses a virtual DOM and differential updates (this is the paradigm used by recent frameworks like React). The net effect is that TiddlyWiki generally doesn’t support just dropping in a <script> tag like traditional web pages. Having said that, the TiddlyWiki plugin library contains numerous examples of properly integrating third party libraries.

Best wishes

Jeremy

[tejjyid]

Edge cases???? I can see that you might be able to do a lot with the wiki-text macros, but ... for anything complex they get pretty *unreadable pretty quickly! And it's not like they use a language you might use somewhere else. IMO, more, not less, use should be made of JS macros.

I'm just about to rework the lexer/parser you helped me with a few years ago into TW5 - but it'll stay in JS. I hope you'll be on standby once again :-)

Cheers, Andrew

*I mean that in a nice way

[PMario]

On Monday, March 6, 2017 at 11:20:58 AM UTC+1, tejjyid wrote:

Edge cases????

There are 11 js macros in the core and 860 macro \define statements in the UI and templates. ~200 of them are duplicated in the language editions. So macros are all over in the core, and we only had 11 exceptions, that where done in js. The rest it pure wikitext. ... IMO that's impressive.
 

I can see that you might be able to do a lot with the wiki-text macros, but ... for anything complex they get pretty *unreadable pretty quickly!

Readability is a problem, since whitespace matters. .... But many of the core macros could have better readability, without side-effects in the DOM.
 

And it's not like they use a language you might use somewhere else.

They use wikitext. ??
 

IMO, more, not less, use should be made of JS macros.

js macros can't be modified by most users. Standard macros can be modified by every user. That's a huge difference.

 

I'm just about to rework the lexer/parser you helped me with a few years ago into TW5 - but it'll stay in JS. I hope you'll be on standby once again :-)

If you want to implement stuff like this, you clearly have to go with javascript. ...

There is a big difference between TWc macros and TW5 macros. They are completely different things.

TW5 macros are simple text-substutions, with no built-in "refresh" mechanism. TWc macros are more like TW5 widgets now. .. parsing and rendering a domain specific language (DLC) is a complete different topic again, but doable. We have such plugins already.

eg:
railroad-plugin, markdown-plugin, katex-plugin, .. which may give you hints :)

have fun!
mario

[tejjyid]

On Monday, 6 March 2017 22:23:58 UTC+11, PMario wrote:

On Monday, March 6, 2017 at 11:20:58 AM UTC+1, tejjyid wrote:

Edge cases????

There are 11 js macros in the core and 860 macro \define statements in the UI and templates. ~200 of them are duplicated in the language editions. So macros are all over in the core, and we only had 11 exceptions, that where done in js. The rest it pure wikitext. ... IMO that's impressive.

Well, I agree. That IS impressive.

 

I can see that you might be able to do a lot with the wiki-text macros, but ... for anything complex they get pretty *unreadable pretty quickly!

Readability is a problem, since whitespace matters. .... But many of the core macros could have better readability, without side-effects in the DOM.
 

And it's not like they use a language you might use somewhere else.

They use wikitext. ??

Maybe we are slightly at cross purposes on what wkitext is; but $cmd; !!, {{{, [[[ (for example) constitute a syntax never used outside TW. I taught meyself JS to use TWc & since then I've written an Android app in it, amongst other things. That made the pain of the learning curve good value.

 

IMO, more, not less, use should be made of JS macros.

js macros can't be modified by most users. Standard macros can be modified by every user. That's a huge difference.

There's possibly a difference here between system macros & user macros. The TW pros write a kind of expert JS that is hard to decode without experience, that's true. But simple procedural type JS is easy. It takes as much effort to learn how to use widgets as it does to learn the fragments of JS that are required for most of my macros. In fact, it takes more, because the documentation of widgets is not supported by a community as large as the JS community.

 

I'm just about to rework the lexer/parser you helped me with a few years ago into TW5 - but it'll stay in JS. I hope you'll be on standby once again :-)

If you want to implement stuff like this, you clearly have to go with javascript. ...

I recognize that's not part of the argument :-)

There is a big difference between TWc macros and TW5 macros. They are completely different things.

TW5 macros are simple text-substutions, with no built-in "refresh" mechanism. TWc macros are more like TW5 widgets now. .. parsing and rendering a domain specific language (DLC) is a complete different topic again, but doable. We have such plugins already.

eg:
railroad-plugin, markdown-plugin, katex-plugin, .. which may give you hints :)

I will look into them, for sure.

have fun!
mario

[Matt Groth]

This is perfect, thanks!

[Matt Groth]

Hi Jeremy,

It's interesting that you choose to restrict javascript usage to make it more safe to share content. Thanks for the explanation.

Best,

Matt

[Martian]

Finally! 

Great way to easily debugging and playing with JavaScript external libraries in TW5, instead of wrapping them each time into plugin