mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
Add Internals plugin
Adds a live preview of the raw JSON of the parse tree or widget tree generated from a tiddler.
This commit is contained in:
parent
7daebba46b
commit
3ae0f3666a
@ -13,6 +13,12 @@ type: text/vnd.tiddlywiki
|
|||||||
|
|
||||||
The experimental Evernote plugin allows notes and images from `.enex` files to be imported into TiddlyWiki. Install it through the "Plugins" tab of control panel.
|
The experimental Evernote plugin allows notes and images from `.enex` files to be imported into TiddlyWiki. Install it through the "Plugins" tab of control panel.
|
||||||
|
|
||||||
|
!! "Internals" Plugin Introduction
|
||||||
|
|
||||||
|
The new `tiddlywiki/internals` plugin provides features to help understand the internal operation of TiddlyWiki, including:
|
||||||
|
|
||||||
|
* New preview modes in the editor showing both the parse and widget trees of the current tiddler
|
||||||
|
|
||||||
!! Text-Slicer Plugin Improvements
|
!! Text-Slicer Plugin Improvements
|
||||||
|
|
||||||
* [[Added|https://github.com/Jermolene/TiddlyWiki5/commit/176d2ccd76856b10aadd5e71af587574e7bcd447]] support for sticky notes within documents
|
* [[Added|https://github.com/Jermolene/TiddlyWiki5/commit/176d2ccd76856b10aadd5e71af587574e7bcd447]] support for sticky notes within documents
|
||||||
@ -33,7 +39,7 @@ The experimental Evernote plugin allows notes and images from `.enex` files to b
|
|||||||
|
|
||||||
!! Hackability Improvements
|
!! Hackability Improvements
|
||||||
|
|
||||||
* TBD
|
* [[Extended|https://github.com/Jermolene/TiddlyWiki5/commit/<TODO>]] editor preview pane to allow plugins to add further types of preview (see the new `tiddlywiki/internals` plugin for an example)
|
||||||
|
|
||||||
!! Bug Fixes
|
!! Bug Fixes
|
||||||
|
|
||||||
|
@ -7,7 +7,9 @@
|
|||||||
"tiddlywiki/browser-sniff",
|
"tiddlywiki/browser-sniff",
|
||||||
"tiddlywiki/help",
|
"tiddlywiki/help",
|
||||||
"tiddlywiki/stacked-view",
|
"tiddlywiki/stacked-view",
|
||||||
"tiddlywiki/powered-by-tiddlywiki"
|
"tiddlywiki/powered-by-tiddlywiki",
|
||||||
|
"tiddlywiki/internals",
|
||||||
|
"tiddlywiki/highlight"
|
||||||
],
|
],
|
||||||
"themes": [
|
"themes": [
|
||||||
"tiddlywiki/vanilla",
|
"tiddlywiki/vanilla",
|
||||||
|
9
plugins/tiddlywiki/internals/editpreviews/parse-tree.tid
Normal file
9
plugins/tiddlywiki/internals/editpreviews/parse-tree.tid
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
title: $:/core/ui/EditTemplate/body/preview/parse-tree
|
||||||
|
tags: $:/tags/EditPreview
|
||||||
|
caption: parse tree
|
||||||
|
|
||||||
|
\define preview(mode,output)
|
||||||
|
<$parse-tree mode="$mode$" output="$output$"/>
|
||||||
|
\end
|
||||||
|
|
||||||
|
{{||$:/core/ui/EditTemplate/body/preview/shared}}
|
25
plugins/tiddlywiki/internals/editpreviews/shared.tid
Normal file
25
plugins/tiddlywiki/internals/editpreviews/shared.tid
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
title: $:/core/ui/EditTemplate/body/preview/shared
|
||||||
|
|
||||||
|
\define body()
|
||||||
|
|
||||||
|
Mode: <$select tiddler="$(tv-mode-configuration)$" default="block">
|
||||||
|
<option value="inline">Inline</option>
|
||||||
|
<option value="block">Block</option>
|
||||||
|
</$select>
|
||||||
|
|
||||||
|
<$macrocall $name="preview" mode={{$(tv-mode-configuration)$}} output={{$(tv-output-configuration)$}}/>
|
||||||
|
\end
|
||||||
|
|
||||||
|
<div class="tc-internal-tree-preview-wrapper">
|
||||||
|
|
||||||
|
<div class="tc-internal-tree-preview">
|
||||||
|
|
||||||
|
<$vars tv-mode-configuration=<<qualify "$:/state/internals/preview/mode">>>
|
||||||
|
|
||||||
|
<<body>>
|
||||||
|
|
||||||
|
</$vars>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
@ -0,0 +1,9 @@
|
|||||||
|
title: $:/core/ui/EditTemplate/body/preview/widget-tree
|
||||||
|
tags: $:/tags/EditPreview
|
||||||
|
caption: widget tree
|
||||||
|
|
||||||
|
\define preview(mode,output)
|
||||||
|
<$widget-tree mode="$mode$" output="$output$"/>
|
||||||
|
\end
|
||||||
|
|
||||||
|
{{||$:/core/ui/EditTemplate/body/preview/shared}}
|
7
plugins/tiddlywiki/internals/plugin.info
Normal file
7
plugins/tiddlywiki/internals/plugin.info
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"title": "$:/plugins/tiddlywiki/internals",
|
||||||
|
"description": "Tools for exploring the internals of TiddlyWiki",
|
||||||
|
"author": "JeremyRuston",
|
||||||
|
"core-version": ">=5.0.0",
|
||||||
|
"list": "readme"
|
||||||
|
}
|
4
plugins/tiddlywiki/internals/styles.tid
Normal file
4
plugins/tiddlywiki/internals/styles.tid
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
title: $:/plugins/tiddlywiki/internals/styles
|
||||||
|
tags: $:/tags/Stylesheet
|
||||||
|
|
||||||
|
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
|
75
plugins/tiddlywiki/internals/widgets/parse-tree.js
Normal file
75
plugins/tiddlywiki/internals/widgets/parse-tree.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
/*\
|
||||||
|
title: $:/core/modules/widgets/parse-tree.js
|
||||||
|
type: application/javascript
|
||||||
|
module-type: widget
|
||||||
|
|
||||||
|
Widget to render the parse tree of a tiddler
|
||||||
|
|
||||||
|
\*/
|
||||||
|
(function(){
|
||||||
|
|
||||||
|
/*jslint node: true, browser: true */
|
||||||
|
/*global $tw: false */
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
||||||
|
|
||||||
|
var ParseTreeWidget = function(parseTreeNode,options) {
|
||||||
|
this.initialise(parseTreeNode,options);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Inherit from the base widget class
|
||||||
|
*/
|
||||||
|
ParseTreeWidget.prototype = new Widget();
|
||||||
|
|
||||||
|
/*
|
||||||
|
Render this widget into the DOM
|
||||||
|
*/
|
||||||
|
ParseTreeWidget.prototype.render = function(parent,nextSibling) {
|
||||||
|
var self = this;
|
||||||
|
this.parentDomNode = parent;
|
||||||
|
this.computeAttributes();
|
||||||
|
this.execute();
|
||||||
|
this.renderChildren(parent,nextSibling);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Compute the internal state of the widget
|
||||||
|
*/
|
||||||
|
ParseTreeWidget.prototype.execute = function() {
|
||||||
|
// Get our parameters
|
||||||
|
this.parseTreeTitle = this.getAttribute("tiddler",this.getVariable("currentTiddler"));
|
||||||
|
this.parseTreeInlineMode = this.getAttribute("mode","block") === "inline";
|
||||||
|
// Compute the parse tree
|
||||||
|
var parser = this.wiki.parseTiddler(this.parseTreeTitle,{parseAsInline: this.parseTreeInlineMode}),
|
||||||
|
parseTreeNodes = [];
|
||||||
|
if(parser) {
|
||||||
|
parseTreeNodes = [{
|
||||||
|
type: "codeblock",
|
||||||
|
attributes: {
|
||||||
|
code: {type: "string", value: JSON.stringify(parser.tree,0,$tw.config.preferences.jsonSpaces)},
|
||||||
|
language: {type: "string", value: "json"}
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
// Make the child widgets
|
||||||
|
this.makeChildWidgets(parseTreeNodes);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
|
||||||
|
*/
|
||||||
|
ParseTreeWidget.prototype.refresh = function(changedTiddlers) {
|
||||||
|
var changedAttributes = this.computeAttributes();
|
||||||
|
// Completely rerender if any of our attributes have changed
|
||||||
|
if(changedAttributes.tiddler || changedAttributes.mode || changedTiddlers[this.parseTreeTitle]) {
|
||||||
|
this.refreshSelf();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
exports["parse-tree"] = ParseTreeWidget;
|
||||||
|
|
||||||
|
})();
|
107
plugins/tiddlywiki/internals/widgets/widget-tree.js
Normal file
107
plugins/tiddlywiki/internals/widgets/widget-tree.js
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
/*\
|
||||||
|
title: $:/core/modules/widgets/widget-tree.js
|
||||||
|
type: application/javascript
|
||||||
|
module-type: widget
|
||||||
|
|
||||||
|
Widget to render the widget tree of a tiddler
|
||||||
|
|
||||||
|
\*/
|
||||||
|
(function(){
|
||||||
|
|
||||||
|
/*jslint node: true, browser: true */
|
||||||
|
/*global $tw: false */
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var Widget = require("$:/core/modules/widgets/widget.js").widget;
|
||||||
|
|
||||||
|
var WidgetTreeWidget = function(parseTreeNode,options) {
|
||||||
|
this.initialise(parseTreeNode,options);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Inherit from the base widget class
|
||||||
|
*/
|
||||||
|
WidgetTreeWidget.prototype = new Widget();
|
||||||
|
|
||||||
|
/*
|
||||||
|
Render this widget into the DOM
|
||||||
|
*/
|
||||||
|
WidgetTreeWidget.prototype.render = function(parent,nextSibling) {
|
||||||
|
var self = this;
|
||||||
|
this.parentDomNode = parent;
|
||||||
|
this.computeAttributes();
|
||||||
|
this.execute();
|
||||||
|
this.renderChildren(parent,nextSibling);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Compute the internal state of the widget
|
||||||
|
*/
|
||||||
|
WidgetTreeWidget.prototype.execute = function() {
|
||||||
|
// Get our parameters
|
||||||
|
this.widgetTreeTitle = this.getAttribute("tiddler",this.getVariable("currentTiddler"));
|
||||||
|
this.widgetTreeInlineMode = this.getAttribute("mode","block") === "inline";
|
||||||
|
// Compute the widget tree
|
||||||
|
var parser = this.wiki.parseTiddler(this.widgetTreeTitle,{parseAsInline: this.widgetTreeInlineMode}),
|
||||||
|
results;
|
||||||
|
if(parser) {
|
||||||
|
var widgetNode = this.wiki.makeWidget(parser,{
|
||||||
|
parentWidget: this
|
||||||
|
}),
|
||||||
|
container = $tw.fakeDocument.createElement("div"),
|
||||||
|
copyNode = function(widgetNode,resultNode) {
|
||||||
|
var type = widgetNode.parseTreeNode.type;
|
||||||
|
resultNode.type = type;
|
||||||
|
switch(type) {
|
||||||
|
case "element":
|
||||||
|
resultNode.tag = widgetNode.parseTreeNode.tag;
|
||||||
|
break;
|
||||||
|
case "text":
|
||||||
|
resultNode.text = widgetNode.parseTreeNode.text;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if(Object.keys(widgetNode.attributes || {}).length > 0) {
|
||||||
|
resultNode.attributes = {};
|
||||||
|
$tw.utils.each(widgetNode.attributes,function(attr,attrName) {
|
||||||
|
resultNode.attributes[attrName] = widgetNode.getAttribute(attrName);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if(Object.keys(widgetNode.children || {}).length > 0) {
|
||||||
|
resultNode.children = [];
|
||||||
|
$tw.utils.each(widgetNode.children,function(widgetChildNode) {
|
||||||
|
var node = {};
|
||||||
|
resultNode.children.push(node);
|
||||||
|
copyNode(widgetChildNode,node);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
widgetNode.render(container,null);
|
||||||
|
results = {};
|
||||||
|
copyNode(widgetNode,results);
|
||||||
|
}
|
||||||
|
// Make the child widgets
|
||||||
|
this.makeChildWidgets([{
|
||||||
|
type: "codeblock",
|
||||||
|
attributes: {
|
||||||
|
code: {type: "string", value: (results && results.children) ? JSON.stringify(results.children,0,$tw.config.preferences.jsonSpaces) : ""},
|
||||||
|
language: {type: "string", value: "json"}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
|
||||||
|
*/
|
||||||
|
WidgetTreeWidget.prototype.refresh = function(changedTiddlers) {
|
||||||
|
var changedAttributes = this.computeAttributes();
|
||||||
|
// Completely rerender if any of our attributes have changed
|
||||||
|
if(changedAttributes.tiddler || changedAttributes.mode || changedTiddlers[this.widgetTreeTitle]) {
|
||||||
|
this.refreshSelf();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
exports["widget-tree"] = WidgetTreeWidget;
|
||||||
|
|
||||||
|
})();
|
Loading…
Reference in New Issue
Block a user