Fix newline issues (1.0.2)

README.md

@@ -1,12 +1,12 @@
 <div>
     <img src="https://i.imgur.com/YgpbX7G.png" align="left" width="128"/>
-    <h1>Zircon (Beta)</h1>
+    <h1>ZIRCON</h1>
     <h3>A clean, sleek, runtime debugging console for Roblox</h3>
     <a href="https://npmjs.com/package/@rbxts/zircon"><img src="https://badge.fury.io/js/@rbxts%2Fzircon.svg"/></a>
     <br/>
 </div>
 
-<img src="./assets/Example2.png"/>
+<img src="https://raw.githubusercontent.com/roblox-aurora/zircon/master/assets/Example2.png"/>
 
 ## Setup
 To begin, it is recommended to do
@@ -102,7 +102,7 @@ This will create a global `print_message` that all players can run.
 
 Then if run in Zircon:
 
-<img src="./assets/Example1.png"/>
+<img src="https://raw.githubusercontent.com/roblox-aurora/zircon/master/assets/Example1.png"/>
 
 The first argument of `RegisterFunction` takes a `ZirconFunctionBuilder` - which is the easiest way to build a function. `AddArguments` takes any number of arguments for types you want, in built types in Zircon you can use a string for. Otherwise you supply the type validator object.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/zircon",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "out/init.lua",
   "scripts": {

src/Client/BuiltInConsole/UI/DockedConsole.tsx

@@ -3,7 +3,7 @@ import { SingleMotor, Spring } from "@rbxts/flipper";
 import { connect } from "@rbxts/roact-rodux";
 import { ConsoleActionName, ConsoleReducer, DEFAULT_FILTER } from "../Store/_reducers/ConsoleReducer";
 import ZirconSyntaxTextBox from "../../Components/SyntaxTextBox";
-import { ZirconIconButton } from "../../Components/Icon";
+import ZirconIcon, { ZirconIconButton } from "../../Components/Icon";
 import Remotes, { RemoteId } from "../../../Shared/Remotes";
 import { ClientSenderEvent } from "@rbxts/net/out/client/ClientEvent";
 import ZirconOutput from "../../../Client/Components/Output";
@@ -185,7 +185,8 @@ class ZirconConsoleComponent extends Roact.Component<DockedConsoleProps, DockedC
 								ItemSelected={(value) => this.setState({ context: value.Id })}
 							/>
 						)}
-						<ZirconIconButton Size={new UDim2(0, 16, 0, 28)} Icon="RightArrow" OnClick={() => {}} />
+						{/* <ZirconIconButton Size={new UDim2(0, 16, 0, 28)} Icon="Zirconium" OnClick={() => {}} /> */}
+						<ZirconIcon Size={new UDim2(0, 16, 0, 28)} Icon="RightArrow" />
 						<ZirconSyntaxTextBox
 							RefocusOnSubmit={this.props.autoFocus}
 							AutoFocus={this.props.autoFocus}

src/Client/Components/Icon.tsx

@@ -73,6 +73,7 @@ export type IconEnum = keyof typeof IconsV2;
 interface IconProps {
 	Icon: IconEnum;
 	Position?: UDim2;
+	Size?: UDim2;
 	ZIndex?: number;
 }
 
@@ -82,24 +83,56 @@ export default class ZirconIcon extends Roact.PureComponent<IconProps> {
 	}
 	public render() {
 		const icon = IconsV2[this.props.Icon];
-		return (
-			<ThemeContext.Consumer
-				render={(theme) => {
-					return (
-						<imagelabel
-							Size={new UDim2(0, 16, 0, 16)}
-							BackgroundTransparency={1}
-							Image={theme.IconAssetUri}
-							ImageColor3={theme.IconColor3}
-							ImageRectOffset={icon.Offset}
-							Position={this.props.Position}
-							ZIndex={this.props.ZIndex}
-							ImageRectSize={new Vector2(16, 16)}
-						/>
-					);
-				}}
-			/>
-		);
+
+		if (this.props.Size) {
+			return (
+				<ThemeContext.Consumer
+					render={(theme) => {
+						return (
+							<imagebutton
+								Image=""
+								BackgroundTransparency={1}
+								BackgroundColor3={theme.PrimaryBackgroundColor3}
+								BorderColor3={theme.SecondaryBackgroundColor3}
+								Size={this.props.Size}
+								ZIndex={this.props.ZIndex}
+								Position={this.props.Position}
+							>
+								<uilistlayout VerticalAlignment="Center" HorizontalAlignment="Center" />
+								<imagelabel
+									Size={new UDim2(0, 16, 0, 16)}
+									BackgroundTransparency={1}
+									Image={theme.IconAssetUri}
+									ImageColor3={theme.IconColor3}
+									ImageRectOffset={icon.Offset}
+									ZIndex={this.props.ZIndex}
+									ImageRectSize={new Vector2(16, 16)}
+								/>
+							</imagebutton>
+						);
+					}}
+				/>
+			);
+		} else {
+			return (
+				<ThemeContext.Consumer
+					render={(theme) => {
+						return (
+							<imagelabel
+								Size={new UDim2(0, 16, 0, 16)}
+								BackgroundTransparency={1}
+								Image={theme.IconAssetUri}
+								ImageColor3={theme.IconColor3}
+								ImageRectOffset={icon.Offset}
+								Position={this.props.Position}
+								ZIndex={this.props.ZIndex}
+								ImageRectSize={new Vector2(16, 16)}
+							/>
+						);
+					}}
+				/>
+			);
+		}
 	}
 }
 

src/Client/Components/StructuredLogMessage.tsx

@@ -1,15 +1,13 @@
 import { LogEvent, LogLevel } from "@rbxts/log";
-import { MessageTemplateParser } from "@rbxts/message-templates";
+import { MessageTemplateParser, PlainTextMessageTemplateRenderer } from "@rbxts/message-templates";
 import Roact from "@rbxts/roact";
-import RoactHooks from "@rbxts/roact-hooks";
 import { ZirconStructuredMessageTemplateRenderer } from "Client/Format/ZirconStructuredMessageTemplate";
 import { ZirconContext } from "Client/Types";
 import ThemeContext, { getRichTextColor3, italicize } from "Client/UIKit/ThemeContext";
-import Flipper from "@rbxts/flipper";
+import Flipper, { Instant } from "@rbxts/flipper";
 import Padding from "./Padding";
 import { formatRichText } from "Client/Format";
-import RoactRodux, { connect } from "@rbxts/roact-rodux";
-import ZirconClientStore from "Client/BuiltInConsole/Store";
+import { connect } from "@rbxts/roact-rodux";
 import { ConsoleReducer } from "Client/BuiltInConsole/Store/_reducers/ConsoleReducer";
 
 function sanitise(input: string) {
@@ -26,6 +24,7 @@ export interface StructuredLogMessageProps extends MappedProps {
 }
 export interface StructuredLogMessageState {
 	viewDetails: boolean;
+	minHeight: number;
 }
 
 const keys: (keyof LogEvent)[] = ["Template", "Level", "Timestamp"];
@@ -47,11 +46,31 @@ class StructuredLogMessageComponent extends Roact.Component<StructuredLogMessage
 
 	public constructor(props: StructuredLogMessageProps) {
 		super(props);
-		[this.height, this.setHeight] = Roact.createBinding(25);
+		this.state = {
+			viewDetails: false,
+			minHeight: 25,
+		};
+
+		[this.height, this.setHeight] = Roact.createBinding(this.state.minHeight);
 		this.heightMotor = new Flipper.SingleMotor(this.height.getValue());
 		this.heightMotor.onStep((value) => this.setHeight(value));
 	}
 
+	public didMount() {
+		const logEvent = this.props.LogEvent;
+		const tokens = MessageTemplateParser.GetTokens(logEvent.Template);
+		const plainText = new PlainTextMessageTemplateRenderer(tokens);
+		const result = plainText.Render(logEvent);
+
+		this.setState({ minHeight: result.split("\n").size() * 25 });
+	}
+
+	public didUpdate(_: {}, prevState: StructuredLogMessageState) {
+		if (prevState.minHeight !== this.state.minHeight) {
+			this.heightMotor.setGoal(new Instant(this.state.minHeight));
+		}
+	}
+
 	public willUnmount() {
 		this.heightMotor.destroy();
 	}
@@ -67,8 +86,12 @@ class StructuredLogMessageComponent extends Roact.Component<StructuredLogMessage
 		return (
 			<ThemeContext.Consumer
 				render={(theme) => {
-					const renderer = new ZirconStructuredMessageTemplateRenderer(tokens, theme);
-					const text = renderer.Render(LogEvent);
+					const highlightRenderer = new ZirconStructuredMessageTemplateRenderer(tokens, theme);
+					const text = highlightRenderer
+						.Render(LogEvent)
+						.split("\n")
+						.map((f, i) => (i > 0 ? `${" ".rep(6)}${f}` : f))
+						.join("\n");
 
 					if (Level === LogLevel.Information) {
 						messages.push(getRichTextColor3(theme, "Cyan", "INFO "));
@@ -108,9 +131,11 @@ class StructuredLogMessageComponent extends Roact.Component<StructuredLogMessage
 									if (!this.props.logDetailsPaneEnabled) return;
 
 									if (this.state.viewDetails) {
-										this.heightMotor.setGoal(new Flipper.Spring(25));
+										this.heightMotor.setGoal(new Flipper.Spring(this.state.minHeight));
 									} else {
-										this.heightMotor.setGoal(new Flipper.Spring(25 + evtProps.size() * 30 + 5));
+										this.heightMotor.setGoal(
+											new Flipper.Spring(this.state.minHeight + evtProps.size() * 30 + 5),
+										);
 									}
 
 									this.setState({ viewDetails: !this.state.viewDetails });
@@ -129,7 +154,7 @@ class StructuredLogMessageComponent extends Roact.Component<StructuredLogMessage
 							<textlabel
 								RichText
 								Position={new UDim2(0, 10, 0, 0)}
-								Size={new UDim2(1, -15, 0, 25)}
+								Size={new UDim2(1, -15, 0, this.state.minHeight)}
 								Text={messages.join(" ")}
 								BackgroundTransparency={1}
 								Font={theme.ConsoleFont}
@@ -138,17 +163,13 @@ class StructuredLogMessageComponent extends Roact.Component<StructuredLogMessage
 								TextSize={20}
 							/>
 							<frame
-								Position={new UDim2(0, 30, 0, 25)}
+								Position={new UDim2(0, 30, 0, this.state.minHeight)}
 								ClipsDescendants
 								BorderSizePixel={0}
 								BackgroundTransparency={1}
 								Size={this.height.map((v) => new UDim2(1, -35, 0, v - 25))}
 							>
 								<uilistlayout Padding={new UDim(0, 5)} />
-								{/* <uigridlayout
-									CellPadding={new UDim2(0, 5, 0, 5)}
-									CellSize={new UDim2(0.5, -5, 0, 25)}
-								/> */}
 								{this.props.logDetailsPaneEnabled &&
 									this.state.viewDetails &&
 									evtProps.map(([key, value]) => {

src/Client/Components/SyntaxTextBox.tsx

@@ -4,7 +4,6 @@ import { ZrRichTextHighlighter } from "@rbxts/zirconium/out/Ast";
 import ThemeContext, { convertColorObjectToHex, ThemeSyntaxColors } from "../../Client/UIKit/ThemeContext";
 import Maid from "@rbxts/maid";
 import { UserInputService } from "@rbxts/services";
-import { $print } from "rbxts-transform-debug";
 
 interface SyntaxTextBoxState {
 	source: string;
@@ -187,7 +186,6 @@ export default class ZirconSyntaxTextBox extends Roact.Component<SyntaxTextBoxPr
 									},
 									InputChanged: (rbx, io) => {
 										if (io.UserInputType === Enum.UserInputType.Keyboard) {
-											print("pressKey", io.KeyCode);
 											if (this.props.CancelKeyCodes?.includes(io.KeyCode)) {
 												rbx.ReleaseFocus();
 											}