Code Block Roact Component

CodeBlock.lua

local plugin = script:FindFirstAncestorWhichIsA("Plugin")

local Lexer = require(script.Lexer) -- https://devforum.roblox.com/t/lexer-for-rbx-lua/183115/19?u=dog2puppy
local RichText = require(script.RichText) -- https://github.com/Mullets-Gavin/Roblox/blob/master/Shared/RichText.lua

local Roact = require(script.Parent.Parent.Modules.Roact)
local e = Roact.createElement

local CodeBlock = Roact.Component:extend("CodeBlock")

function CodeBlock:init()
	local theme = settings().Studio.Theme
	
	self.state = {
		theme = theme,
		colors = {
			keyword = theme:GetColor(Enum.StudioStyleGuideColor.ScriptLuauKeyword),
			builtin = theme:GetColor(Enum.StudioStyleGuideColor.ScriptBuiltInFunction),
			iden = theme:GetColor(Enum.StudioStyleGuideColor.ScriptText),
			["string"] = theme:GetColor(Enum.StudioStyleGuideColor.ScriptString),
			number = theme:GetColor(Enum.StudioStyleGuideColor.ScriptNumber),
			space = theme:GetColor(Enum.StudioStyleGuideColor.ScriptText),
			comment = theme:GetColor(Enum.StudioStyleGuideColor.ScriptComment),
			operator = theme:GetColor(Enum.StudioStyleGuideColor.ScriptOperator)
		}
	}

	self._themeChangedConnection = settings().Studio.ThemeChanged:Connect(function()
		local theme = settings().Studio.Theme
		
		self:setState({
			theme = theme,
			colors = {
				keyword = theme:GetColor(Enum.StudioStyleGuideColor.ScriptLuauKeyword),
				builtin = theme:GetColor(Enum.StudioStyleGuideColor.ScriptBuiltInFunction),
				iden = theme:GetColor(Enum.StudioStyleGuideColor.ScriptText),
				["string"] = theme:GetColor(Enum.StudioStyleGuideColor.ScriptString),
				number = theme:GetColor(Enum.StudioStyleGuideColor.ScriptNumber),
				space = theme:GetColor(Enum.StudioStyleGuideColor.ScriptText),
				comment = theme:GetColor(Enum.StudioStyleGuideColor.ScriptComment),
				operator = theme:GetColor(Enum.StudioStyleGuideColor.ScriptOperator)
			}
		})
	end)
end

function CodeBlock:willUnmount()
	self._themeChangedConnection:Disconnect()
end

function CodeBlock:render()
	local theme = self.state.theme
	local colors = self.state.colors
	local code = self.props.code
	local codeBlock = RichText.create()

	for token, source in Lexer.scan(code) do
		local color = colors[token] or theme:GetColor(Enum.StudioStyleGuideColor.ScriptText)

		codeBlock:Color(color)
		codeBlock:Append(source)
		codeBlock:Color(false)
	end

	return e("TextLabel", {
		RichText = true,
		Text = codeBlock:GetText(),
		TextXAlignment = Enum.TextXAlignment.Left,
		Font = Enum.Font.Ubuntu,
		BackgroundTransparency = 0,
		BackgroundColor3 = theme:GetColor(Enum.StudioStyleGuideColor.ScriptBackground),
		Size = self.props.Size,
		Position = self.props.Position,
		TextSize = 16,
		AutomaticSize = Enum.AutomaticSize.Y
	})
end

return CodeBlock