Skip to content

Commit 46c5bd8

Browse files
Kapu1178Kapu1178
authored
Fix issue preventing papercode basic html from functioning. (#914)
* fix over sanitization * port help menu from goon * yellow paper a tiny bit
1 parent e1fe2f1 commit 46c5bd8

File tree

2 files changed

+214
-10
lines changed

2 files changed

+214
-10
lines changed

‎code/modules/paperwork/paper.dm

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
drop_sound = 'sound/items/handling/paper_drop.ogg'
3939
pickup_sound = 'sound/items/handling/paper_pickup.ogg'
4040
grind_results = list(/datum/reagent/cellulose = 3)
41-
color = "white"
41+
42+
color = "#ffffe1"
4243
/// What's actually written on the paper.
4344
var/info = ""
4445
/**
@@ -304,7 +305,7 @@
304305
.["add_sign"] += style[ADD_INFO_SIGN]
305306

306307
.["max_length"] = MAX_PAPER_LENGTH
307-
.["paper_color"] = !color || color == "white" ? "#FFFFFF" : color // color might not be set
308+
.["paper_color"] = !color || color == "white" ? "#ffffff" : color // color might not be set
308309
.["paper_state"] = icon_state /// TODO: show the sheet will bloodied or crinkling?
309310
.["stamps"] = stamps
310311

‎tgui/packages/tgui/interfaces/PaperSheet.js

Lines changed: 211 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { classes } from 'common/react';
1313
import { Component } from 'inferno';
1414
import { marked } from 'marked';
1515
import { useBackend } from '../backend';
16-
import { Box, Flex, Tabs, TextArea } from '../components';
16+
import { Box, Flex, Tabs, TextArea, Table } from '../components';
1717
import { Window } from '../layouts';
1818
import { clamp } from 'common/math';
1919
import { sanitizeText } from '../sanitize';
@@ -30,13 +30,16 @@ const textWidth = (text, font, fontsize) => {
3030
return width;
3131
};
3232

33-
const setFontinText = (text, font, color, bold=false) => {
33+
const setFontinText = (text, font, color, bold=false, italics=false) => {
3434
return "<span style=\""
3535
+ "color:" + color + ";"
3636
+ "font-family:'" + font + "';"
3737
+ ((bold)
3838
? "font-weight: bold;"
3939
: "")
40+
+ ((italics)
41+
? "font-style: italic;"
42+
: "")
4043
+ "\">" + text + "</span>";
4144
};
4245

@@ -80,7 +83,7 @@ const createFields = (txt, font, fontsize, color, counter) => {
8083

8184
const signDocument = (txt, color, user) => {
8285
return txt.replace(sign_regex, () => {
83-
return setFontinText(user, "Times New Roman", color, true);
86+
return setFontinText(user, "Times New Roman", color, true, true);
8487
});
8588
};
8689

@@ -388,7 +391,7 @@ const createPreview = (
388391
// Fifth, we wrap the created text in the pin color, and font.
389392
// crayon is bold (<b> tags), maybe make fountain pin italic?
390393
const fonted_text = setFontinText(
391-
formatted_text, font, color, is_crayon);
394+
formatted_text, font, color, is_crayon, false);
392395
out.text += fonted_text;
393396
out.field_counter = fielded_text.counter;
394397
}
@@ -416,6 +419,7 @@ class PaperSheetEdit extends Component {
416419
counter: props.counter || 0,
417420
textarea_text: "",
418421
combined_text: props.value || "",
422+
showingHelpTip: false,
419423
};
420424
}
421425

@@ -482,7 +486,8 @@ class PaperSheetEdit extends Component {
482486
direction="column"
483487
fillPositionedParent>
484488
<Flex.Item>
485-
<Tabs>
489+
<Tabs
490+
size="100%">
486491
<Tabs.Tab
487492
key="marked_edit"
488493
textColor={'black'}
@@ -542,6 +547,19 @@ class PaperSheetEdit extends Component {
542547
}}>
543548
{this.state.previewSelected === "confirm" ? "Confirm" : "Save"}
544549
</Tabs.Tab>
550+
<Tabs.Tab
551+
key="marked_help"
552+
textColor={'black'}
553+
backgroundColor="white"
554+
icon="question-circle-o"
555+
onmouseover={() => {
556+
this.setState({ showingHelpTip: true });
557+
}}
558+
onmouseout={() => {
559+
this.setState({ showingHelpTip: false });
560+
}}>
561+
Help
562+
</Tabs.Tab>
545563
</Tabs>
546564
</Flex.Item>
547565
<Flex.Item
@@ -563,6 +581,9 @@ class PaperSheetEdit extends Component {
563581
textColor={textColor} />
564582
)}
565583
</Flex.Item>
584+
{this.state.showingHelpTip && (
585+
<HelpToolip />
586+
)}
566587
</Flex>
567588
);
568589
}
@@ -608,9 +629,6 @@ export const PaperSheet = (props, context) => {
608629
values.field_counter = processing.field_counter;
609630
}
610631
}
611-
else {
612-
values.text = sanitizeText(text);
613-
}
614632
const stamp_list = !stamps
615633
? []
616634
: stamps;
@@ -663,3 +681,188 @@ export const PaperSheet = (props, context) => {
663681
</Window>
664682
);
665683
};
684+
685+
const HelpToolip = () => {
686+
const signature_text = {
687+
__html: '<span style="color:#000000;font-family:\'Verdana\';"><span style="color:#000000;font-family:\'Times New Roman\';font-weight: bold;font-style: italic;">Your Name Here</span></span>',
688+
};
689+
const input_field = {
690+
__html: '<input></input>',
691+
};
692+
return (
693+
<Box
694+
position="absolute"
695+
left="10px"
696+
top="25px"
697+
width="300px"
698+
height="370px"
699+
backgroundColor="#E8E4C9" // offset from paper color
700+
textAlign="center">
701+
<h3>
702+
Papercode Syntax
703+
</h3>
704+
<Table>
705+
<Table.Row>
706+
<Table.Cell>
707+
Signature: %s
708+
</Table.Cell>
709+
<Table.Cell
710+
dangerouslySetInnerHTML={signature_text}
711+
/>
712+
</Table.Row>
713+
714+
<Table.Row>
715+
<Table.Cell>
716+
{'[_____]'}
717+
</Table.Cell>
718+
<Table.Cell
719+
dangerouslySetInnerHTML={input_field}
720+
/>
721+
</Table.Row>
722+
723+
<Table.Row>
724+
<Table.Cell>
725+
<Box>
726+
Heading
727+
</Box>
728+
=====
729+
</Table.Cell>
730+
<Table.Cell>
731+
<h2>
732+
Heading
733+
</h2>
734+
</Table.Cell>
735+
</Table.Row>
736+
737+
<Table.Row>
738+
<Table.Cell>
739+
<Box>
740+
Sub Heading
741+
</Box>
742+
------
743+
</Table.Cell>
744+
<Table.Cell>
745+
<h4>
746+
Sub Heading
747+
</h4>
748+
</Table.Cell>
749+
</Table.Row>
750+
751+
<Table.Row>
752+
<Table.Cell>
753+
_Italic Text_
754+
</Table.Cell>
755+
<Table.Cell>
756+
<i>
757+
Italic Text
758+
</i>
759+
</Table.Cell>
760+
</Table.Row>
761+
762+
<Table.Row>
763+
<Table.Cell>
764+
**Bold Text**
765+
</Table.Cell>
766+
<Table.Cell>
767+
<b>
768+
Bold Text
769+
</b>
770+
</Table.Cell>
771+
</Table.Row>
772+
773+
<Table.Row>
774+
<Table.Cell>
775+
`Code Text`
776+
</Table.Cell>
777+
<Table.Cell>
778+
<code>
779+
Code Text
780+
</code>
781+
</Table.Cell>
782+
</Table.Row>
783+
784+
<Table.Row>
785+
<Table.Cell>
786+
~~Strikethrough Text~~
787+
</Table.Cell>
788+
<Table.Cell>
789+
<s>
790+
Strikethrough Text
791+
</s>
792+
</Table.Cell>
793+
</Table.Row>
794+
795+
<Table.Row>
796+
<Table.Cell>
797+
<Box>
798+
Horizontal Rule
799+
</Box>
800+
---
801+
</Table.Cell>
802+
<Table.Cell>
803+
Horizontal Rule
804+
<hr />
805+
</Table.Cell>
806+
</Table.Row>
807+
808+
<Table.Row>
809+
<Table.Cell>
810+
<Table>
811+
<Table.Row>
812+
* List Element 1
813+
</Table.Row>
814+
<Table.Row>
815+
* List Element 2
816+
</Table.Row>
817+
<Table.Row>
818+
* Etc...
819+
</Table.Row>
820+
</Table>
821+
</Table.Cell>
822+
<Table.Cell>
823+
<ul>
824+
<li>
825+
List Element 1
826+
</li>
827+
<li>
828+
List Element 2
829+
</li>
830+
<li>
831+
Etc...
832+
</li>
833+
</ul>
834+
</Table.Cell>
835+
</Table.Row>
836+
837+
<Table.Row>
838+
<Table.Cell>
839+
<Table>
840+
<Table.Row>
841+
1. List Element 1
842+
</Table.Row>
843+
<Table.Row>
844+
2. List Element 2
845+
</Table.Row>
846+
<Table.Row>
847+
3. Etc...
848+
</Table.Row>
849+
</Table>
850+
</Table.Cell>
851+
<Table.Cell>
852+
<ol>
853+
<li>
854+
List Element 1
855+
</li>
856+
<li>
857+
List Element 2
858+
</li>
859+
<li>
860+
Etc...
861+
</li>
862+
</ol>
863+
</Table.Cell>
864+
</Table.Row>
865+
</Table>
866+
</Box>
867+
);
868+
};

0 commit comments

Comments
 (0)