1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00

Add default settings for styled inline SPANs (#6877)

* add default settings for styled inline SPANs

* change color names in palettes and vanilla-base

* change parser behaviour if custom class is used

* tc-inline-style will only be set if no other custom setting is appliead

* Add tests for inline-styles

* add one more test

* remove space after if
This commit is contained in:
Mario Pietsch 2022-10-07 19:05:49 +02:00 committed by GitHub
parent f33c7e2aef
commit 23e0eeb556
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 62 additions and 5 deletions

View File

@ -41,9 +41,6 @@ exports.parse = function() {
var node = {
type: "element",
tag: "span",
attributes: {
"class": {type: "string", value: "tc-inline-style"}
},
children: tree
};
if(classString) {
@ -52,6 +49,9 @@ exports.parse = function() {
if(stylesString) {
$tw.utils.addAttributeToParseTreeNode(node,"style",stylesString);
}
if(!classString && !stylesString) {
$tw.utils.addClassToParseTreeNode(node,"tc-inline-style");
}
return [node];
};

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333333
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333353
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333333
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #00a
external-link-foreground: #00e
foreground: #000
highlight-background: #ffff00
highlight-foreground: #000000
message-background: <<colour foreground>>
message-border: <<colour background>>
message-foreground: <<colour background>>

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #00a
external-link-foreground: #00e
foreground: #fff
highlight-background: #ffff00
highlight-foreground: #000000
message-background: <<colour foreground>>
message-border: <<colour background>>
message-foreground: <<colour background>>

View File

@ -32,6 +32,8 @@ external-link-foreground-hover:
external-link-foreground-visited: #BF5AF2
external-link-foreground: #32D74B
foreground: #FFFFFF
highlight-background: #ffff78
highlight-foreground: #000000
menubar-background: #464646
menubar-foreground: #ffffff
message-background: <<colour background>>

View File

@ -36,6 +36,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333333
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -40,6 +40,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #313163
external-link-foreground: #555592
foreground: #2D2A23
highlight-background: #ffff00
highlight-foreground: #000000
menubar-background: #CDC2A6
menubar-foreground: #5A5446
message-background: #ECE5CF

View File

@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #d3869b
external-link-foreground: #8ec07c
foreground: #fbf1c7
highlight-background: #ffff79
highlight-foreground: #000000
menubar-background: #504945
menubar-foreground: <<colour foreground>>
message-background: #83a598

View File

@ -41,6 +41,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #5E81AC
external-link-foreground: #8FBCBB
foreground: #d8dee9
highlight-background: #ffff78
highlight-foreground: #000000
menubar-background: #2E3440
menubar-foreground: #d8dee9
message-background: #2E3440

View File

@ -34,6 +34,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333333
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -131,6 +131,8 @@ external-link-background-hover: inherit
external-link-background-visited: inherit
external-link-background: inherit
external-link-foreground-hover: inherit
highlight-background: #ffff00
highlight-foreground: #000000
message-border: #cfd6e6
modal-border: #999999
select-tag-background:

View File

@ -35,6 +35,8 @@ external-link-foreground: #268bd2
external-link-foreground-hover:
external-link-foreground-visited: #268bd2
foreground: #839496
highlight-background: #ffff78
highlight-foreground: #000000
message-background: #002b36
message-border: #586e75
message-foreground: #839496

View File

@ -35,6 +35,8 @@ external-link-foreground: #268bd2
external-link-foreground-hover: inherit
external-link-foreground-visited: #268bd2
foreground: #657b83
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #fdf6e3
message-border: #93a1a1
message-foreground: #657b83

View File

@ -34,6 +34,8 @@ external-link-foreground-hover:
external-link-foreground-visited:
external-link-foreground:
foreground: rgba(0, 0, 0, 0.87)
highlight-background: #ffff00
highlight-foreground: #000000
message-background: <<colour background>>
message-border: <<colour very-muted-foreground>>
message-foreground: rgba(0, 0, 0, 0.54)

View File

@ -34,6 +34,8 @@ external-link-foreground-hover:
external-link-foreground-visited: #7c318c
external-link-foreground: #9e3eb3
foreground: rgba(255, 255, 255, 0.7)
highlight-background: #ffff78
highlight-foreground: #000000
message-background: <<colour background>>
message-border: <<colour very-muted-foreground>>
message-foreground: rgba(255, 255, 255, 0.54)

View File

@ -43,6 +43,8 @@ external-link-foreground: rgb(179, 179, 255)
external-link-foreground-hover: inherit
external-link-foreground-visited: rgb(153, 153, 255)
foreground: rgb(179, 179, 179)
highlight-background: #ffff78
highlight-foreground: #000000
message-background: <<colour tag-foreground>>
message-border: #96ccff
message-foreground: <<colour tag-background>>

View File

@ -42,6 +42,8 @@ external-link-foreground-hover: inherit
external-link-foreground-visited: #0000aa
external-link-foreground: #0000ee
foreground: #333333
highlight-background: #ffff00
highlight-foreground: #000000
message-background: #ecf2ff
message-border: #cfd6e6
message-foreground: #547599

View File

@ -117,7 +117,7 @@ C'est un exemple de tiddler. Voir [[Macros Table des matières (Exemples)|Table-
<table class="doc-bad-example">
<tbody>
<tr class="evenRow">
<td><span class="tc-inline-style" style="font-size:1.5em;">&#9888;</span> Attention&nbsp;:<br> Ne faites pas comme ça !</td>
<td><span style="font-size:1.5em;">&#9888;</span> Attention&nbsp;:<br> Ne faites pas comme ça !</td>
<td>
$eg$

View File

@ -63,6 +63,22 @@ describe("WikiText tests", function() {
expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n<div>\n\nContent</div>\n@@")).toBe("<div style=\"color:red;\"><p>Content</p></div>");
expect(wiki.renderText("text/html","text/vnd-tiddlywiki","@@color:red;\n---\n@@")).toBe("<hr style=\"color:red;\">");
});
it("handles inline style wikitext notation", function() {
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@highlighted@@ text")).toBe('<p>some <span class="tc-inline-style">highlighted</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@color:green;.tc-inline-style 1 style and 1 class@@ text")).toBe('<p>some <span class=" tc-inline-style " style="color:green;">1 style and 1 class</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@background-color:red;red@@ text")).toBe('<p>some <span style="background-color:red;">red</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@.myClass class@@ text")).toBe('<p>some <span class=" myClass ">class</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@.myClass.secondClass 2 classes@@ text")).toBe('<p>some <span class=" myClass secondClass ">2 classes</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@background:red;.myClass style and class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;">style and class</span> text</p>');
expect(wiki.renderText("text/html","text/vnd-tiddlywiki",
"some @@background:red;color:white;.myClass 2 style and 1 class@@ text")).toBe('<p>some <span class=" myClass " style="background:red;color:white;">2 style and 1 class</span> text</p>');
});
});
})();

View File

@ -117,7 +117,7 @@ This is an example tiddler. See [[Table-of-Contents Macros (Examples)]].
<table class="doc-bad-example">
<tbody>
<tr class="evenRow">
<td><span class="tc-inline-style" style="font-size:1.5em;">&#9888;</span> Warning:<br> Don't do it this way!</td>
<td><span style="font-size:1.5em;">&#9888;</span> Warning:<br> Don't do it this way!</td>
<td>
$eg$

View File

@ -290,6 +290,11 @@ kbd {
color: <<colour selection-foreground>>;
}
.tc-inline-style {
background: <<colour highlight-background>>;
color: <<colour highlight-foreground>>;
}
form.tc-form-inline {
display: inline;
}