mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-26 07:13:15 +00:00
Code Issues Releases Wiki Activity

Added support for typed blocks in wikitext

Browse Source 
This allows embedded blocks of another mime type to appear in a
tiddler, useful for syntax highlighting fragments of javascript
This commit is contained in:
Jeremy Ruston 2012-03-03 12:29:13 +00:00
parent 12c6239bf5
commit 3bfab9f9da
5 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/App.js
View File

@ -27,9 +27,9 @@ var App = function() {
this.store = new WikiStore();
// Register the parsers
this.store.registerParser("text/x-tiddlywiki",new WikiTextParser({store: this.store}));
this.store.registerParser(["image/svg+xml","image/jpg","image/jpeg","image/png","image/gif"],new ImageParser({store: this.store}));
this.store.registerParser("application/javascript",new JavaScriptParser({store: this.store}));
this.store.registerParser("application/json",new JSONParser({store: this.store}));
this.store.registerParser(["image/svg+xml",".svg","image/jpg",".jpg","image/jpeg",".jpeg","image/png",".png","image/gif",".gif"],new ImageParser({store: this.store}));
this.store.registerParser(["application/javascript",".js"],new JavaScriptParser({store: this.store}));
this.store.registerParser(["application/json",".json"],new JSONParser({store: this.store}));
// Register the standard tiddler serializers and deserializers
tiddlerInput.register(this.store);
tiddlerOutput.register(this.store);

28
js/WikiTextRules.js
View File

@ -397,6 +397,34 @@ var rules = [
}
},
{
name: "typedBlock",
match: "^\\$\\$\\$(?:.*)\\n",
lookaheadRegExp: /^\$\$\$(.*)\n((?:.|\n)*?)\$\$\$/mg,
handler: function(w)
{
var lookaheadMatch = this.lookaheadRegExp.exec(w.source);
if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
// The wikitext parsing infrastructure is horribly unre-entrant
var mimeType = lookaheadMatch[1],
content = lookaheadMatch[2],
oldOutput = w.output,
oldSource = w.source,
oldNextMatch = w.nextMatch,
oldChildren = w.children,
oldDependencies = w.dependencies,
parseTree = w.store.parseText(mimeType,content);
w.output = oldOutput;
w.source = oldSource;
w.nextMatch = oldNextMatch;
w.children = oldChildren;
w.dependencies = oldDependencies;
w.output.push.apply(w.output,parseTree.tree);
w.nextMatch = this.lookaheadRegExp.lastIndex;
}
}
},
{
name: "wikifyComment",
match: "^(?:/\\*\\*\\*|<!---)\\n",

14
readme.md
View File

@ -10,17 +10,17 @@ node tiddlywiki.js --load mywiki.html --savetiddlers tmp/tiddlers
</pre>The story macro looks for a list of tiddler titles in the tiddler <code>MyStoryTiddler</code>, and displays them in sequence. The subtle part is that subsequently, if <code>MyStoryTiddler</code> changes, the <code>&lt;&lt;story&gt;&gt;</code> macro is selectively re-rendered. So, to navigate to a new tiddler, code merely needs to add the name of the tiddler and a line break to the top of <code>MyStoryTiddler</code>:<br><pre>var storyTiddler = store.getTiddler(&quot;MyStoryTiddler&quot;);
store.addTiddler(new Tiddler(storyTiddler,{text: navigateTo + &quot;\n&quot; + storyTiddler.text}));
</pre>The mechanisms that allow all of this to work are fairly intricate. The sections below progressively build the key architectural concepts of <a href='TiddlyWiki5' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>TiddlyWiki5</a> in a way that should provide a good basis for exploring the code directly.<br><h2> Tiddlers</h2>Tiddlers are an immutable dictionary of name:value pairs called fields.<br><br>The only field that is required is the <code>title</code> field, but useful tiddlers also have a <code>text</code> field, and some or all of the standard fields <code>modified</code>, <code>modifier</code>, <code>created</code>, <code>creator</code>, <code>tags</code> and <code>type</code>.<br><br>Hardcoded in the system is the knowledge that the <code>tags</code> field is a string array, and that the <code>modified</code> and <code>created</code> fields are <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> <code>Date</code> objects. All other fields are strings.<br><br>The <code>type</code> field identifies the representation of the tiddler text with a MIME type.<br><h2> WikiStore</h2>Groups of uniquely titled tiddlers are contained in <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> objects.<br><br>The <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> also manages the plugin modules used for macros, and operations like serializing, deserializing, parsing and rendering tiddlers.<br><br>Each <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> is connected to another shadow store that is used to provide default content. Under usual circumstances, when an attempt is made to retrieve a tiddler that doesn't exist in the store, the search continues into its shadow store (and so on, if the shadow store itself has a shadow store).<br><h2> WikiStore Events</h2>Clients can register event handlers with the <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> object. Event handlers can be registered to be triggered for modifications to any tiddler in the store, or with a filter to only be invoked when a particular tiddler or set of tiddlers changes.<br><br>Whenever a change is made to a tiddler, the wikistore registers a <code>nexttick</code> handler (if it hasn't already done so). The <code>nexttick</code> handler looks back at all the tiddler changes, and dispatches any matching event handlers. <br><h2> Parsing and Compiling</h2><a href='TiddlyWiki' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-resolves'>TiddlyWiki</a> parses the content of tiddlers to build an internal tree representation that is used for several purposes:<br><ul><li> Rendering a tiddler to other formats (e.g. converting wikitext to HTML)</li><li> Detecting outgoing links from a tiddler, and from them...</li><li> ...computing incoming links to a tiddler</li><li> Detecting tiddlers that are orphans with no incoming links</li><li> Detecting tiddlers that are referred to but missing</li></ul>The parse tree is built when needed, and then cached by the <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> until the tiddler changes.<br><br><a href='TiddlyWiki5' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>TiddlyWiki5</a> uses multiple parsers:<br><ul><li> Wikitext (<code>text/x-tiddlywiki</code>) in <code>js/WikiTextParser.js</code></li><li> <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> (<code>text/javascript</code>) in <code>js/JavaScriptParser.js</code></li><li> Images (<code>image/png</code> and <code>image/jpg</code>) in <code>js/ImageParser.js</code></li><li> JSON (<code>application/json</code>) in <code>js/JSONParser.js</code></li></ul>Additional parsers are planned:<br><ul><li> CSS (<code>text/css</code>)</li><li> Recipe (<code>text/x-tiddlywiki-recipe</code>)</li></ul>One global instance of each parser is instantiated in <code>js/App.js</code> and registered with the main <a href='WikiStore' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiStore</a> object. In some cases the constructors require special parameters or options (eg, the <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> parser requires the <a href='PEG.JS' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>PEG.JS</a> <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> parser text).<br><br>The parsers are all used the same way:<br><pre>var parseTree = parser.parse(type,text) // Parses the text and returns a parse tree object
</pre>The parse tree object exposes the following fields:<br><pre>var renderer = parseTree.compile(type); // Compiles the parse tree into a renderer for the specified MIME type
console.log(parseTree.toString(type)); // Returns a readable string representation of the parse tree (either `text/html` or `text/plain`)
var dependencies = parseTree.dependencies; // Gets the dependencies of the parse tree (see below)
</pre>The dependencies are returned as an object like this:<br><pre>{
</pre>The parse tree object exposes the following fields:<br><pre class='javascript-source'><span class='javascript-keyword'>var</span> <span class='javascript-identifier'>renderer</span> <span class='javascript-punctuator'>=</span> <span class='javascript-identifier'>parseTree</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>compile</span><span class='javascript-punctuator'>(</span><span class='javascript-identifier'>type</span><span class='javascript-punctuator'>)</span><span class='javascript-punctuator'>;</span> <span class='javascript-comment javascript-line-comment'>// Compiles the parse tree into a renderer for the specified MIME type
</span><span class='javascript-identifier'>console</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>log</span><span class='javascript-punctuator'>(</span><span class='javascript-identifier'>parseTree</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>toString</span><span class='javascript-punctuator'>(</span><span class='javascript-identifier'>type</span><span class='javascript-punctuator'>)</span><span class='javascript-punctuator'>)</span><span class='javascript-punctuator'>;</span> <span class='javascript-comment javascript-line-comment'>// Returns a readable string representation of the parse tree (either <code>text/html</code> or <code>text/plain</code>)
</span><span class='javascript-keyword'>var</span> <span class='javascript-identifier'>dependencies</span> <span class='javascript-punctuator'>=</span> <span class='javascript-identifier'>parseTree</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>dependencies</span><span class='javascript-punctuator'>;</span> <span class='javascript-comment javascript-line-comment'>// Gets the dependencies of the parse tree (see below)
</span></pre><br>The dependencies are returned as an object like this:<br><pre>{
link: {&quot;tiddlertitle1&quot;: 2, &quot;tiddlertitle2&quot;: 3},
include: {&quot;tiddlertitle3&quot;: 5},
dependentAll: false
}
</pre>The <code>link</code> and <code>include</code> fields are hashmaps of the title of each tiddler that is linked or included in the current one. For the tiddler to be subsequently rendered correctly, the linked tiddlers must be present, at least in skinny form, and the included tiddlers must be fully loaded.<br><br>The <code>dependentAll</code> field is used to indicate that the tiddler contains a macro that scans the entire pool of tiddlers (for example the <code>&lt;&lt;list&gt;&gt;</code> macro), and is potentially dependent on any of them. The effect is that the tiddler should be rerendered whenever any other tiddler changes.<br><h2> Rendering</h2>The <code>parseTree.compile(type)</code> method returns a renderer object that contains a <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> function that generates the new representation of the original parsed text.<br><br>The renderer is invoked as follows:<br><pre>var renderer = parseTree.compile(&quot;text/html&quot;);
var html = renderer.render(tiddler,store);
</pre>The <code>tiddler</code> parameter to the <code>render</code> method identifies the tiddler that is acting as the context for this rendering &mdash; for example, it provides the fields displayed by the <code>&lt;&lt;view&gt;&gt;</code> macro. The <code>store</code> parameter is used to resolve any references to other tiddlers.<br><h2> Rerendering</h2>When rendering to the HTML/SVG DOM in the browser, <a href='TiddlyWiki5' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>TiddlyWiki5</a> also allows a previous rendering to be selectively updated in response to changes in dependent tiddlers. At the moment, only the <a href='WikiTextRenderer' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiTextRenderer</a> supports rerendering.<br><br>The rerender method on the renderer is called as follows:<br><pre>var node = document.getElementById(&quot;myNode&quot;);
</pre>The <code>link</code> and <code>include</code> fields are hashmaps of the title of each tiddler that is linked or included in the current one. For the tiddler to be subsequently rendered correctly, the linked tiddlers must be present, at least in skinny form, and the included tiddlers must be fully loaded.<br><br>The <code>dependentAll</code> field is used to indicate that the tiddler contains a macro that scans the entire pool of tiddlers (for example the <code>&lt;&lt;list&gt;&gt;</code> macro), and is potentially dependent on any of them. The effect is that the tiddler should be rerendered whenever any other tiddler changes.<br><h2> Rendering</h2>The <code>parseTree.compile(type)</code> method returns a renderer object that contains a <a href='JavaScript' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>JavaScript</a> function that generates the new representation of the original parsed text.<br><br>The renderer is invoked as follows:<br><pre class='javascript-source'><span class='javascript-keyword'>var</span> <span class='javascript-identifier'>renderer</span> <span class='javascript-punctuator'>=</span> <span class='javascript-identifier'>parseTree</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>compile</span><span class='javascript-punctuator'>(</span><span class='javascript-string'>&quot;text/html&quot;</span><span class='javascript-punctuator'>)</span><span class='javascript-punctuator'>;</span>
<span class='javascript-keyword'>var</span> <span class='javascript-identifier'>html</span> <span class='javascript-punctuator'>=</span> <span class='javascript-identifier'>renderer</span><span class='javascript-punctuator'>.</span><span class='javascript-identifier'>render</span><span class='javascript-punctuator'>(</span><span class='javascript-identifier'>tiddler</span><span class='javascript-punctuator'>,</span><span class='javascript-identifier'>store</span><span class='javascript-punctuator'>)</span><span class='javascript-punctuator'>;</span>
</pre><br>The <code>tiddler</code> parameter to the <code>render</code> method identifies the tiddler that is acting as the context for this rendering &mdash; for example, it provides the fields displayed by the <code>&lt;&lt;view&gt;&gt;</code> macro. The <code>store</code> parameter is used to resolve any references to other tiddlers.<br><h2> Rerendering</h2>When rendering to the HTML/SVG DOM in the browser, <a href='TiddlyWiki5' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>TiddlyWiki5</a> also allows a previous rendering to be selectively updated in response to changes in dependent tiddlers. At the moment, only the <a href='WikiTextRenderer' class='tw-tiddlylink tw-tiddlylink-internal tw-tiddlylink-missing'>WikiTextRenderer</a> supports rerendering.<br><br>The rerender method on the renderer is called as follows:<br><pre>var node = document.getElementById(&quot;myNode&quot;);
var renderer = parseTree.compile(&quot;text/html&quot;);
myNode.innerHTML = renderer.render(tiddler,store);
// And then, later:

8
tiddlywiki5/tiddlers/TiddlyWikiArchitecture.tid
View File

@ -61,11 +61,11 @@ The parsers are all used the same way:
var parseTree = parser.parse(type,text) // Parses the text and returns a parse tree object
}}}
The parse tree object exposes the following fields:
{{{
$$$.js
var renderer = parseTree.compile(type); // Compiles the parse tree into a renderer for the specified MIME type
console.log(parseTree.toString(type)); // Returns a readable string representation of the parse tree (either `text/html` or `text/plain`)
var dependencies = parseTree.dependencies; // Gets the dependencies of the parse tree (see below)
}}}
$$$
The dependencies are returned as an object like this:
{{{
{
@ -81,10 +81,10 @@ The `dependentAll` field is used to indicate that the tiddler contains a macro t
The `parseTree.compile(type)` method returns a renderer object that contains a JavaScript function that generates the new representation of the original parsed text.
The renderer is invoked as follows:
{{{
$$$.js
var renderer = parseTree.compile("text/html");
var html = renderer.render(tiddler,store);
}}}
$$$
The `tiddler` parameter to the `render` method identifies the tiddler that is acting as the context for this rendering -- for example, it provides the fields displayed by the `<<view>>` macro. The `store` parameter is used to resolve any references to other tiddlers.
!! Rerendering
When rendering to the HTML/SVG DOM in the browser, TiddlyWiki5 also allows a previous rendering to be selectively updated in response to changes in dependent tiddlers. At the moment, only the WikiTextRenderer supports rerendering.

13
tiddlywiki5/tiddlers/TypedBlockTests.tid Normal file
View File

@ -0,0 +1,13 @@
title: TypedBlockTests
Here's an example of a typed block containing JavaScript source code:
$$$.js
return 2+2;
$$$
Here's an example of a typed block containing an SVG image:
$$$image/svg+xml
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
$$$