@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/markdown/components/MarkdownEditor.styles.luau

@@ -2,19 +2,23 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
+local grip = 22
 local useMarkdownEditorStyles = componentStyles("MarkdownEditor", function(theme, _param)
 	local fullscreen = _param.fullscreen
 	local compact = _param.compact
+	local gripped = _param.gripped
 	local pad = if compact == true or theme.density == "compact" then theme.padding.calc(1) else theme.padding.calc(1.5)
-	local _object = {
+	local glyph = controlMetrics(theme.density, if compact == true then "small" else nil).icon
+	return createStyles({
 		root = {
 			Size = if fullscreen == true then UDim2.fromScale(1, 1) else UDim2.new(1, 0, 1, 0),
 			BackgroundColor3 = theme.palette.surface.paper,
 			BorderSizePixel = 0,
 		},
 		content = {
-			Size = UDim2.fromScale(1, 1),
+			Size = UDim2.new(1, 0, 1, if gripped == true then -grip else 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -50,7 +54,80 @@ local useMarkdownEditorStyles = componentStyles("MarkdownEditor", function(theme
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, theme.spacing.calc(1)),
+		},
+		toolbarIcon = {
+			Size = UDim2.fromOffset(glyph + theme.padding.calc(2), glyph + theme.padding.calc(2)),
+			LayoutOrder = 3,
+		},
+		toolbarGlyph = {
+			Size = UDim2.fromOffset(glyph, glyph),
+			ImageColor3 = theme.palette.text.secondary,
+		},
+		htmlWrap = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			LayoutOrder = 2,
+		},
+		htmlGap = {
+			PaddingTop = UDim.new(0, theme.spacing.calc(1)),
+			PaddingLeft = UDim.new(0, theme.spacing.calc(1)),
+			PaddingRight = UDim.new(0, theme.spacing.calc(1)),
+		},
+		htmlSurface = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BorderSizePixel = 0,
+		},
+		htmlStroke = {
+			Color = theme.palette.divider,
+			Thickness = 1,
+			Transparency = 0,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+		htmlCorner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		htmlPad = {
+			PaddingTop = UDim.new(0, theme.padding.calc(2)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(2)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		htmlStack = {
+			FillDirection = Enum.FillDirection.Vertical,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.spacing.calc(1)),
+		},
+		htmlHint = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.primary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
+			LayoutOrder = 1,
+		},
+		htmlActions = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			LayoutOrder = 3,
+		},
+		htmlActionsRow = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Right,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.spacing.calc(1)),
 		},
 		spacer = {
 			Size = UDim2.new(1, 0, 1, 0),
@@ -74,86 +151,79 @@ local useMarkdownEditorStyles = componentStyles("MarkdownEditor", function(theme
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
-	}
-	local _left = "editor"
-	local _object_1 = {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundColor3 = theme.palette.surface.input,
-		BorderSizePixel = 0,
-		ClearTextOnFocus = false,
-		MultiLine = true,
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		TextWrapped = true,
-		Font = Enum.Font.RobotoMono,
-	}
-	local _left_1 = "TextSize"
-	local _condition = theme.typography.fontSizes.caption
-	if _condition == nil then
-		_condition = theme.typography.fontSizes.body
-	end
-	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
-	_object_1.PlaceholderColor3 = theme.palette.text.secondary
-	_object[_left] = _object_1
-	_object.editorPad = {
-		PaddingTop = UDim.new(0, pad),
-		PaddingBottom = UDim.new(0, pad),
-		PaddingLeft = UDim.new(0, pad),
-		PaddingRight = UDim.new(0, pad),
-	}
-	_object.previewScroll = {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		ScrollBarThickness = 4,
-		CanvasSize = UDim2.new(0, 0, 0, 0),
-		AutomaticCanvasSize = Enum.AutomaticSize.Y,
-	}
-	_object.previewPad = {
-		PaddingTop = UDim.new(0, pad),
-		PaddingBottom = UDim.new(0, pad),
-		PaddingLeft = UDim.new(0, pad),
-		PaddingRight = UDim.new(0, pad),
-	}
-	_object.split = {
-		FillDirection = Enum.FillDirection.Horizontal,
-		HorizontalAlignment = Enum.HorizontalAlignment.Left,
-		VerticalAlignment = Enum.VerticalAlignment.Top,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, 0),
-	}
-	_object.divider = {
-		Size = UDim2.new(0, 1, 1, 0),
-		BackgroundColor3 = theme.palette.divider,
-		BorderSizePixel = 0,
-		LayoutOrder = 2,
-	}
-	_object.resizeGrip = {
-		AnchorPoint = Vector2.new(1, 1),
-		Position = UDim2.fromScale(1, 1),
-		Size = UDim2.fromOffset(22, 22),
-		BackgroundColor3 = theme.palette.surface.elevated,
-		BackgroundTransparency = 0.15,
-		BorderSizePixel = 0,
-		AutoButtonColor = false,
-		ZIndex = 20,
-	}
-	_object.resizeMark = {
-		AnchorPoint = Vector2.new(0.5, 0.5),
-		BackgroundColor3 = theme.palette.text.secondary,
-		BorderSizePixel = 0,
-		Rotation = -45,
-		ZIndex = 21,
-	}
-	_object.resizeOverlay = {
-		Size = UDim2.fromScale(1, 1),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		Active = true,
-		ZIndex = 30,
-	}
-	return createStyles(_object)
+		editor = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			ClearTextOnFocus = false,
+			MultiLine = true,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextYAlignment = Enum.TextYAlignment.Top,
+			TextWrapped = true,
+			Font = Enum.Font.RobotoMono,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.primary,
+			PlaceholderColor3 = theme.palette.text.secondary,
+		},
+		editorPad = {
+			PaddingTop = UDim.new(0, pad),
+			PaddingBottom = UDim.new(0, pad),
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
+		},
+		previewScroll = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScrollBarThickness = 4,
+			ScrollingDirection = Enum.ScrollingDirection.XY,
+			CanvasSize = UDim2.new(0, 0, 0, 0),
+			AutomaticCanvasSize = Enum.AutomaticSize.XY,
+		},
+		previewPad = {
+			PaddingTop = UDim.new(0, pad),
+			PaddingBottom = UDim.new(0, pad),
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
+		},
+		split = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		},
+		divider = {
+			Size = UDim2.new(0, 1, 1, 0),
+			BackgroundColor3 = theme.palette.divider,
+			BorderSizePixel = 0,
+			LayoutOrder = 2,
+		},
+		resizeGrip = {
+			AnchorPoint = Vector2.new(1, 1),
+			Position = UDim2.fromScale(1, 1),
+			Size = UDim2.fromOffset(grip, grip),
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BackgroundTransparency = 0.15,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			ZIndex = 20,
+		},
+		resizeMark = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = theme.palette.text.secondary,
+			BorderSizePixel = 0,
+			Rotation = -45,
+			ZIndex = 21,
+		},
+		resizeOverlay = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Active = true,
+			ZIndex = 30,
+		},
+	})
 end)
 local default = useMarkdownEditorStyles
 return {

package/out/ui/packages/markdown/index.d.ts

@@ -3,6 +3,6 @@ export type { MarkdownProps } from "./components/Markdown";
 export { default as MarkdownEditor } from "./components/MarkdownEditor";
 export type { MarkdownEditorProps } from "./components/MarkdownEditor";
 export type { MarkdownEditorMode } from "./components/MarkdownEditor.styles";
-export { parseMarkdown, inlinesToPlain, inlinesToRichText } from "./parseMarkdown";
-export type { MdBlock, MdInline } from "./parseMarkdown";
+export { parseMarkdown, inlinesToPlain, inlinesToRichText, inlinePieces, markdownLinkPayload } from "./parseMarkdown";
+export type { MdBlock, MdInline, MdPiece, MarkdownLinkPayload, CodeLanguage } from "./parseMarkdown";
 export { htmlToMarkdown } from "./htmlToMarkdown";

package/out/ui/packages/markdown/init.luau

@@ -7,5 +7,7 @@ local _parseMarkdown = TS.import(script, script, "parseMarkdown")
 exports.parseMarkdown = _parseMarkdown.parseMarkdown
 exports.inlinesToPlain = _parseMarkdown.inlinesToPlain
 exports.inlinesToRichText = _parseMarkdown.inlinesToRichText
+exports.inlinePieces = _parseMarkdown.inlinePieces
+exports.markdownLinkPayload = _parseMarkdown.markdownLinkPayload
 exports.htmlToMarkdown = TS.import(script, script, "htmlToMarkdown").htmlToMarkdown
 return exports

package/out/ui/packages/markdown/parseMarkdown.d.ts

@@ -15,6 +15,8 @@ export type MdInline = {
     text: string;
     href: string;
 };
+export type MdAlign = "left" | "center" | "right";
+export type CodeLanguage = "luau" | "ts" | "json" | "text";
 export type MdBlock = {
     kind: "heading";
     level: number;
@@ -25,18 +27,44 @@ export type MdBlock = {
 } | {
     kind: "code";
     text: string;
+    language: CodeLanguage;
 } | {
     kind: "list";
     ordered: boolean;
     items: MdInline[][];
 } | {
     kind: "blockquote";
-    inlines: MdInline[];
+    paragraphs: MdInline[][];
+} | {
+    kind: "table";
+    align: MdAlign[];
+    header: MdInline[][];
+    rows: MdInline[][][];
 } | {
     kind: "hr";
 };
 /** Small markdown subset → blocks. Unsupported syntax stays plain text. */
 export declare function parseMarkdown(source: string): MdBlock[];
 export declare function inlinesToPlain(inlines: MdInline[]): string;
-/** Turn inline nodes into Roblox RichText. Links become colored label + (url). */
+/** Turn inline nodes into Roblox RichText. Links stay the label only. */
 export declare function inlinesToRichText(inlines: MdInline[]): string;
+export interface MarkdownLinkPayload {
+    text: string;
+    href: string;
+}
+/** Click payload for a link inline. Other inlines are not activatable. */
+export declare function markdownLinkPayload(inline: MdInline): MarkdownLinkPayload | undefined;
+export type MdPiece = {
+    kind: "word";
+    text: string;
+} | {
+    kind: "link";
+    text: string;
+    href: string;
+} | {
+    kind: "break";
+};
+/** Split a line into words and link payloads so a link can take a click. */
+export declare function inlinePieces(inlines: MdInline[]): MdPiece[];
+/** Line index of each piece. A piece wraps only when it does not fit beside the previous one. */
+export declare function inlineLines(pieces: MdPiece[], maxWidth: number, gap?: number): number[];