Syntax highlighting works!

flipbook-labs · Dec 19, 2024 · 30f2f1a · 30f2f1a
1 parent d130e11
commit 30f2f1a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/Common/CodeBlock.luau b/src/Common/CodeBlock.luau
@@ -7,8 +7,6 @@ local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
 local useTheme = require("@root/Common/useTheme")
 
 local useMemo = React.useMemo
-local useRef = React.useRef
-local useEffect = React.useEffect
 
 local function getLineNumbers(str: string): string
 	return Sift.List.reduce(str:split("\n"), function(accumulator, _item, index)
@@ -22,21 +20,25 @@ export type Props = {
 	layoutOrder: number?,
 }
 
-local function StoryError(props: Props)
+local function CodeBlock(props: Props)
 	local theme = useTheme()
-	local ref = useRef(nil :: TextBox?)
 
 	local sourceColor = useMemo(function()
 		return if props.sourceColor then props.sourceColor else theme.text
 	end, { props.sourceColor })
 
-	useEffect(function()
-		Highlighter.matchStudioSettings()
-
-		Highlighter.highlight({
-			textObject = ref.current,
-		})
-	end, {})
+	local source = useMemo(function()
+		if props.sourceColor then
+			return props.source
+		else
+			return table.concat(
+				Highlighter.buildRichTextLines({
+					src = props.source,
+				}),
+				"\n"
+			)
+		end
+	end, { props.source })
 
 	return React.createElement("Frame", {
 		AutomaticSize = Enum.AutomaticSize.XY,
@@ -65,7 +67,7 @@ local function StoryError(props: Props)
 		LineNumbers = React.createElement("TextLabel", {
 			LayoutOrder = nextLayoutOrder(),
 			AutomaticSize = Enum.AutomaticSize.XY,
-			Text = getLineNumbers(props.source),
+			Text = getLineNumbers(source),
 			TextSize = theme.textSize,
 			LineHeight = 1,
 			BackgroundTransparency = 1,
@@ -75,18 +77,18 @@ local function StoryError(props: Props)
 		}),
 
 		SourceCode = React.createElement(SelectableTextLabel, {
+			RichText = true,
 			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(1, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
-			Text = props.source,
+			Text = source,
 			TextColor3 = sourceColor,
 			TextSize = theme.textSize,
 			TextWrapped = false,
 			LineHeight = 1,
 			Font = Enum.Font.RobotoMono,
-			ref = ref,
 		}),
 	})
 end
 
-return StoryError
+return CodeBlock
diff --git a/src/Storybook/StorybookError.luau b/src/Storybook/StorybookError.luau
@@ -1,5 +1,4 @@
 local React = require("@pkg/React")
-local Sift = require("@pkg/Sift")
 local Storyteller = require("@pkg/Storyteller")
 
 local CodeBlock = require("@root/Common/CodeBlock")
@@ -14,7 +13,7 @@ export type Props = {
 	layoutOrder: number?,
 }
 
-local function StoryError(props: Props)
+local function StorybookError(props: Props)
 	local theme = useTheme()
 
 	local storybookSource = props.unavailableStorybook.storybook.source.Source
@@ -109,4 +108,4 @@ local function StoryError(props: Props)
 	})
 end
 
-return StoryError
+return StorybookError