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

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

@@ -9,7 +9,7 @@ local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "t
 local Button = TS.import(script, script.Parent.Parent.Parent, "button").Button
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local ToggleButtonGroup = TS.import(script, script.Parent.Parent.Parent, "toggleButton").ToggleButtonGroup
 local htmlToMarkdown = TS.import(script, script.Parent.Parent, "htmlToMarkdown").htmlToMarkdown
 local Markdown = TS.import(script, script.Parent, "Markdown").default
@@ -25,6 +25,18 @@ local MODE_OPTIONS = { {
 	label = "Preview",
 	value = "preview",
 } }
+local function isBlank(value)
+	for i = 1, #value do
+		local _value = value
+		local _i = i
+		local _i_1 = i
+		local ch = string.sub(_value, _i, _i_1)
+		if ch ~= " " and ch ~= "\t" and ch ~= "\n" and ch ~= "\r" then
+			return false
+		end
+	end
+	return true
+end
 local function looksLikeHtml(text)
 	local lower = string.lower(text)
 	return (string.find(lower, "<p", 1, true)) ~= nil or (string.find(lower, "<h1", 1, true)) ~= nil or (string.find(lower, "<h2", 1, true)) ~= nil or (string.find(lower, "<div", 1, true)) ~= nil or (string.find(lower, "<ul", 1, true)) ~= nil or (string.find(lower, "<ol", 1, true)) ~= nil or (string.find(lower, "<pre", 1, true)) ~= nil or (string.find(lower, "<blockquote", 1, true)) ~= nil or (string.find(lower, "<strong", 1, true)) ~= nil
@@ -70,6 +82,8 @@ local function MarkdownEditor(props)
 	local fullscreenState, setFullscreenState = useState(false)
 	local draft, setDraft = useState(value)
 	local htmlDraft, setHtmlDraft = useState(nil)
+	local htmlError, setHtmlError = useState(nil)
+	local panelHeight, setPanelHeight = useState(0)
 	local heightState, setHeightState = useState(defaultHeight)
 	local dragging, setDragging = useState(false)
 	local focused = useRef(false)
@@ -87,15 +101,23 @@ local function MarkdownEditor(props)
 	end
 	local height = clampEditorHeight(_condition_1, minHeight, maxHeight)
 	local compact = theme.density == "compact"
+	local toolbarHeight = if compact then 32 else 36
+	local gripped = resizable == true and fullscreen ~= true
 	local styles = useMarkdownEditorStyles({
 		fullscreen = fullscreen,
 		compact = compact,
+		gripped = gripped,
 	})
 	useEffect(function()
 		if not focused.current then
 			setDraft(value)
 		end
 	end, { value })
+	useEffect(function()
+		if htmlDraft == nil then
+			setPanelHeight(0)
+		end
+	end, { htmlDraft })
 	local setMode = function(modeNext)
 		if modeProp == nil then
 			setModeState(modeNext)
@@ -172,7 +194,8 @@ local function MarkdownEditor(props)
 	local _exp_3 = React.createElement("uipadding", _attributes_6)
 	local _attributes_7 = table.clone(styles.toolbarRow)
 	setmetatable(_attributes_7, nil)
-	local _exp_4 = React.createElement("frame", _attributes_5, _exp_3, React.createElement("uilistlayout", _attributes_7), React.createElement(ToggleButtonGroup, {
+	local _exp_4 = React.createElement("uilistlayout", _attributes_7)
+	local _exp_5 = React.createElement(ToggleButtonGroup, {
 		value = mode,
 		options = MODE_OPTIONS,
 		size = if compact then "small" else "medium",
@@ -182,7 +205,8 @@ local function MarkdownEditor(props)
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
 		},
-	}), React.createElement(Button, {
+	})
+	local _exp_6 = React.createElement(Button, {
 		text = "Paste HTML",
 		variant = "text",
 		size = if compact then "small" else "medium",
@@ -195,122 +219,167 @@ local function MarkdownEditor(props)
 			if looksLikeHtml(value) then
 				onChange(htmlToMarkdown(value))
 			else
+				setHtmlError(nil)
 				setHtmlDraft("")
 			end
 		end,
-	}), React.createElement(IconButton, {
-		icon = Icons.Expanded,
-		size = "sm",
-		tint = theme.palette.text.secondary,
-		selected = fullscreen,
-		onClick = function()
-			return setFullscreen(not fullscreen)
-		end,
-		className = {
-			LayoutOrder = 99,
-		},
-	}))
-	local _exp_5 = htmlDraft ~= nil and (React.createElement("frame", {
-		key = "HtmlPaste",
-		Size = UDim2.new(1, 0, 0, 96),
-		BackgroundColor3 = theme.palette.surface.elevated,
-		BorderSizePixel = 0,
-		LayoutOrder = 1,
-	}, React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, theme.padding.calc(1)),
-		PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-		PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-		PaddingRight = UDim.new(0, theme.padding.calc(1)),
-	}), React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Vertical,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Padding = UDim.new(0, theme.padding.calc(1)),
-	}), React.createElement("textbox", {
-		key = "HtmlField",
-		Size = UDim2.new(1, 0, 0, 48),
-		BackgroundColor3 = theme.palette.surface.input,
-		BorderSizePixel = 0,
-		ClearTextOnFocus = false,
-		MultiLine = true,
-		Text = htmlDraft,
-		PlaceholderText = "Paste HTML here",
-		TextXAlignment = Enum.TextXAlignment.Left,
-		TextYAlignment = Enum.TextYAlignment.Top,
-		TextSize = theme.typography.fontSizes.caption,
-		TextColor3 = theme.palette.text.primary,
-		Font = Enum.Font.RobotoMono,
-		Change = {
-			Text = function(rbx)
-				return setHtmlDraft(rbx.Text)
-			end,
-		},
-		LayoutOrder = 1,
-	}), React.createElement("frame", {
-		key = "HtmlActions",
-		Size = UDim2.new(1, 0, 0, 28),
-		BackgroundTransparency = 1,
-		LayoutOrder = 2,
-	}, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		Padding = UDim.new(0, theme.padding.calc(1)),
-		SortOrder = Enum.SortOrder.LayoutOrder,
-	}), React.createElement(Button, {
-		text = "Convert",
-		size = "small",
-		className = {
-			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-		onLeftClick = function()
-			onChange(htmlToMarkdown(htmlDraft))
-			setHtmlDraft(nil)
-			setMode("preview")
-		end,
-	}), React.createElement(Button, {
-		text = "Cancel",
-		variant = "text",
-		size = "small",
-		className = {
-			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-		},
-		onLeftClick = function()
-			return setHtmlDraft(nil)
-		end,
-	}))))
+	})
 	local _attributes_8 = {
-		key = "Body",
+		id = "Fullscreen",
+		glyph = "expand",
 	}
-	for _k, _v in styles.body do
-		_attributes_8[_k] = _v
+	local _result = (styles.toolbarGlyph).Size
+	if _result ~= nil then
+		_result = _result.X.Offset
 	end
-	_attributes_8.LayoutOrder = 3
-	local _condition_3 = mode == "split"
-	if _condition_3 then
-		local _attributes_9 = table.clone(styles.split)
-		setmetatable(_attributes_9, nil)
-		_condition_3 = React.createElement("uilistlayout", _attributes_9)
+	local _condition_3 = _result
+	if _condition_3 == nil then
+		_condition_3 = 16
 	end
-	local _condition_4 = showEdit
+	_attributes_8.iconSize = _condition_3
+	_attributes_8.tint = (styles.toolbarGlyph).ImageColor3
+	_attributes_8.className = styles.toolbarIcon
+	_attributes_8.onClick = function()
+		return setFullscreen(not fullscreen)
+	end
+	local _exp_7 = React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, React.createElement(IconButton, _attributes_8))
+	local _condition_4 = htmlDraft ~= nil
 	if _condition_4 then
 		local _attributes_9 = {
-			key = "EditPane",
+			key = "HtmlPaste",
 		}
-		for _k, _v in (if mode == "split" then styles.pane else styles.paneFull) do
+		for _k, _v in styles.htmlWrap do
 			_attributes_9[_k] = _v
 		end
-		_attributes_9.LayoutOrder = 1
+		_attributes_9.Change = {
+			AbsoluteSize = function(rbx)
+				return setPanelHeight(rbx.AbsoluteSize.Y)
+			end,
+		}
+		local _attributes_10 = table.clone(styles.htmlGap)
+		setmetatable(_attributes_10, nil)
+		local _exp_8 = React.createElement("uipadding", _attributes_10)
+		local _attributes_11 = {
+			key = "Surface",
+		}
+		for _k, _v in styles.htmlSurface do
+			_attributes_11[_k] = _v
+		end
+		local _attributes_12 = table.clone(styles.htmlStroke)
+		setmetatable(_attributes_12, nil)
+		local _exp_9 = React.createElement("uistroke", _attributes_12)
+		local _attributes_13 = table.clone(styles.htmlCorner)
+		setmetatable(_attributes_13, nil)
+		local _exp_10 = React.createElement("uicorner", _attributes_13)
+		local _attributes_14 = table.clone(styles.htmlPad)
+		setmetatable(_attributes_14, nil)
+		local _exp_11 = React.createElement("uipadding", _attributes_14)
+		local _attributes_15 = table.clone(styles.htmlStack)
+		setmetatable(_attributes_15, nil)
+		local _exp_12 = React.createElement("uilistlayout", _attributes_15)
+		local _attributes_16 = {
+			key = "Hint",
+		}
+		for _k, _v in styles.htmlHint do
+			_attributes_16[_k] = _v
+		end
+		_attributes_16.Text = "Paste HTML to convert to markdown"
+		local _exp_13 = React.createElement("textlabel", _attributes_16)
+		local _exp_14 = React.createElement(Input, {
+			text = htmlDraft,
+			placeholder = "Paste HTML here",
+			multiline = true,
+			minRows = 4,
+			variant = "outlined",
+			width = UDim.new(1, 0),
+			hasError = htmlError ~= nil,
+			helperText = htmlError,
+			className = {
+				LayoutOrder = 2,
+			},
+			onInput = function(text)
+				setHtmlDraft(text)
+				setHtmlError(nil)
+			end,
+			onTextChanged = function(text)
+				return setHtmlDraft(text)
+			end,
+		})
+		local _attributes_17 = {
+			key = "HtmlActions",
+		}
+		for _k, _v in styles.htmlActions do
+			_attributes_17[_k] = _v
+		end
+		local _attributes_18 = table.clone(styles.htmlActionsRow)
+		setmetatable(_attributes_18, nil)
+		_condition_4 = (React.createElement("frame", _attributes_9, _exp_8, React.createElement("frame", _attributes_11, _exp_9, _exp_10, _exp_11, _exp_12, _exp_13, _exp_14, React.createElement("frame", _attributes_17, React.createElement("uilistlayout", _attributes_18), React.createElement(Button, {
+			text = "Convert",
+			size = if compact then "small" else "medium",
+			disabled = isBlank(htmlDraft),
+			className = {
+				LayoutOrder = 1,
+				AutomaticSize = Enum.AutomaticSize.XY,
+				Size = UDim2.fromScale(0, 0),
+			},
+			onLeftClick = function()
+				local converted = htmlToMarkdown(htmlDraft)
+				if isBlank(converted) then
+					setHtmlError("Couldn't convert that HTML")
+					return nil
+				end
+				onChange(converted)
+				setHtmlError(nil)
+				setHtmlDraft(nil)
+				setMode("preview")
+			end,
+		}), React.createElement(Button, {
+			text = "Cancel",
+			variant = "text",
+			size = if compact then "small" else "medium",
+			className = {
+				LayoutOrder = 2,
+				AutomaticSize = Enum.AutomaticSize.XY,
+				Size = UDim2.fromScale(0, 0),
+			},
+			onLeftClick = function()
+				setHtmlError(nil)
+				setHtmlDraft(nil)
+			end,
+		})))))
+	end
+	local _attributes_9 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_9[_k] = _v
+	end
+	_attributes_9.Size = UDim2.new(1, 0, 1, -(toolbarHeight + panelHeight))
+	_attributes_9.LayoutOrder = 3
+	local _condition_5 = mode == "split"
+	if _condition_5 then
+		local _attributes_10 = table.clone(styles.split)
+		setmetatable(_attributes_10, nil)
+		_condition_5 = React.createElement("uilistlayout", _attributes_10)
+	end
+	local _condition_6 = showEdit
+	if _condition_6 then
 		local _attributes_10 = {
+			key = "EditPane",
+		}
+		for _k, _v in (if mode == "split" then styles.pane else styles.paneFull) do
+			_attributes_10[_k] = _v
+		end
+		_attributes_10.LayoutOrder = 1
+		local _attributes_11 = {
 			key = "Editor",
 		}
 		for _k, _v in styles.editor do
-			_attributes_10[_k] = _v
+			_attributes_11[_k] = _v
 		end
-		_attributes_10.Text = draft
-		_attributes_10.PlaceholderText = placeholder
-		_attributes_10.Change = {
+		_attributes_11.Text = draft
+		_attributes_11.PlaceholderText = placeholder
+		_attributes_11.Change = {
 			Text = function(rbx)
 				setDraft(rbx.Text)
 				if focused.current and rbx.Text ~= value then
@@ -318,7 +387,7 @@ local function MarkdownEditor(props)
 				end
 			end,
 		}
-		_attributes_10.Event = {
+		_attributes_11.Event = {
 			Focused = function()
 				focused.current = true
 			end,
@@ -328,47 +397,47 @@ local function MarkdownEditor(props)
 				onChange(rbx.Text)
 			end,
 		}
-		local _attributes_11 = table.clone(styles.editorPad)
-		setmetatable(_attributes_11, nil)
-		_condition_4 = (React.createElement("frame", _attributes_9, React.createElement("textbox", _attributes_10, React.createElement("uipadding", _attributes_11))))
+		local _attributes_12 = table.clone(styles.editorPad)
+		setmetatable(_attributes_12, nil)
+		_condition_6 = (React.createElement("frame", _attributes_10, React.createElement("textbox", _attributes_11, React.createElement("uipadding", _attributes_12))))
 	end
-	local _condition_5 = mode == "split"
-	if _condition_5 then
-		local _attributes_9 = {
+	local _condition_7 = mode == "split"
+	if _condition_7 then
+		local _attributes_10 = {
 			key = "SplitRule",
 		}
 		for _k, _v in styles.divider do
-			_attributes_9[_k] = _v
+			_attributes_10[_k] = _v
 		end
-		_condition_5 = React.createElement("frame", _attributes_9)
+		_condition_7 = React.createElement("frame", _attributes_10)
 	end
-	local _condition_6 = showPreview
-	if _condition_6 then
-		local _attributes_9 = {
+	local _condition_8 = showPreview
+	if _condition_8 then
+		local _attributes_10 = {
 			key = "PreviewPane",
 		}
 		for _k, _v in styles.previewScroll do
-			_attributes_9[_k] = _v
+			_attributes_10[_k] = _v
 		end
-		_attributes_9.Size = if mode == "split" then UDim2.fromScale(0.5, 1) else UDim2.fromScale(1, 1)
-		_attributes_9.LayoutOrder = 3
-		local _attributes_10 = table.clone(styles.previewPad)
-		setmetatable(_attributes_10, nil)
-		_condition_6 = (React.createElement("scrollingframe", _attributes_9, React.createElement("uipadding", _attributes_10), previewNode))
+		_attributes_10.Size = if mode == "split" then UDim2.fromScale(0.5, 1) else UDim2.fromScale(1, 1)
+		_attributes_10.LayoutOrder = 3
+		local _attributes_11 = table.clone(styles.previewPad)
+		setmetatable(_attributes_11, nil)
+		_condition_8 = (React.createElement("scrollingframe", _attributes_10, React.createElement("uipadding", _attributes_11), previewNode))
 	end
-	local _exp_6 = React.createElement("frame", _attributes_3, _exp_2, _exp_4, _exp_5, React.createElement("frame", _attributes_8, _condition_3, _condition_4, _condition_5, _condition_6))
-	local _condition_7 = resizable and not fullscreen
-	if _condition_7 then
-		local _attributes_9 = {
+	local _exp_8 = React.createElement("frame", _attributes_3, _exp_2, _exp_7, _condition_4, React.createElement("frame", _attributes_9, _condition_5, _condition_6, _condition_7, _condition_8))
+	local _condition_9 = resizable and not fullscreen
+	if _condition_9 then
+		local _attributes_10 = {
 			key = "ResizeGrip",
 		}
 		for _k, _v in styles.resizeGrip do
-			_attributes_9[_k] = _v
+			_attributes_10[_k] = _v
 		end
-		_attributes_9.Text = ""
-		_attributes_9.Active = true
-		_attributes_9.Selectable = true
-		_attributes_9.Event = {
+		_attributes_10.Text = ""
+		_attributes_10.Active = true
+		_attributes_10.Selectable = true
+		_attributes_10.Event = {
 			InputBegan = function(_, input)
 				if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
 					dragStart.current = input.Position.Y
@@ -381,34 +450,34 @@ local function MarkdownEditor(props)
 				end
 			end,
 		}
-		local _attributes_10 = {
+		local _attributes_11 = {
 			key = "Long",
 		}
 		for _k, _v in styles.resizeMark do
-			_attributes_10[_k] = _v
+			_attributes_11[_k] = _v
 		end
-		_attributes_10.Position = UDim2.fromOffset(4, 14)
-		_attributes_10.Size = UDim2.fromOffset(12, 2)
-		local _exp_7 = React.createElement("frame", _attributes_10)
-		local _attributes_11 = {
+		_attributes_11.Position = UDim2.fromOffset(4, 14)
+		_attributes_11.Size = UDim2.fromOffset(12, 2)
+		local _exp_9 = React.createElement("frame", _attributes_11)
+		local _attributes_12 = {
 			key = "Short",
 		}
 		for _k, _v in styles.resizeMark do
-			_attributes_11[_k] = _v
+			_attributes_12[_k] = _v
 		end
-		_attributes_11.Position = UDim2.fromOffset(10, 10)
-		_attributes_11.Size = UDim2.fromOffset(6, 2)
-		_condition_7 = (React.createElement("textbutton", _attributes_9, _exp_7, React.createElement("frame", _attributes_11)))
+		_attributes_12.Position = UDim2.fromOffset(10, 10)
+		_attributes_12.Size = UDim2.fromOffset(6, 2)
+		_condition_9 = (React.createElement("textbutton", _attributes_10, _exp_9, React.createElement("frame", _attributes_12)))
 	end
-	local _condition_8 = dragging
-	if _condition_8 then
-		local _attributes_9 = {
+	local _condition_10 = dragging
+	if _condition_10 then
+		local _attributes_10 = {
 			key = "ResizeOverlay",
 		}
 		for _k, _v in styles.resizeOverlay do
-			_attributes_9[_k] = _v
+			_attributes_10[_k] = _v
 		end
-		_attributes_9.Event = {
+		_attributes_10.Event = {
 			InputChanged = function(_, input)
 				if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
 					setHeight(heightStart.current + input.Position.Y - dragStart.current)
@@ -423,9 +492,9 @@ local function MarkdownEditor(props)
 				return setDragging(false)
 			end,
 		}
-		_condition_8 = (React.createElement("frame", _attributes_9))
+		_condition_10 = (React.createElement("frame", _attributes_10))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_6, _condition_7, _condition_8)
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_8, _condition_9, _condition_10)
 end
 local default = MarkdownEditor
 return {

package/out/ui/packages/markdown/components/MarkdownEditor.styles.d.ts

@@ -2,5 +2,6 @@ export type MarkdownEditorMode = "split" | "edit" | "preview";
 declare const useMarkdownEditorStyles: (props: {
     fullscreen?: boolean;
     compact?: boolean;
+    gripped?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useMarkdownEditorStyles;