{"version":3,"sources":["../src/index.ts","../src/Editor.tsx","../src/Header.tsx","../src/EditorContent.tsx","../src/highlightSyntax.ts","../src/Settings.tsx","../src/themes/light.js","../src/Problems.tsx","../src/themes/dark.js","../src/languages/json.js","../src/languages/plainText.js"],"sourcesContent":["import Editor from './Editor';\n\nexport { Editor };\n","import { useEffect, useState } from 'react';\nimport Header from './Header';\nimport EditorContent from './EditorContent';\nimport Settings from './Settings';\nimport lightTheme from './themes/light';\nimport type { Config, EditorProps, EditorState, Lang, Theme } from './types';\nimport Problems from './Problems';\nimport darkTheme from './themes/dark';\nimport jsonLang from './languages/json';\nimport plainTextLang from './languages/plainText';\n\nexport default function Editor(props: EditorProps) {\n const languages: Lang[] = [\n jsonLang as unknown as Lang,\n plainTextLang,\n ...(props.languages || []),\n ];\n const themes = [lightTheme, darkTheme, ...(props.themes || [])];\n const config: Config = {\n indent: props.config?.indent || 'Space',\n indentSize: props.config?.indentSize || 2,\n textArea: props.config?.textArea || {},\n };\n const [state, setState] = useState({\n value: props.value,\n errors: [],\n warnings: [],\n showSettings: false,\n showProblems: false,\n theme: themes.find((i) => i.name === (props.theme || 'Light')) as Theme,\n lang: languages.find(\n (i) => i.name === (props.lang || 'Plain Text')\n ) as Lang,\n cursorPos: [0, 0],\n config,\n setCursor: false,\n });\n\n useEffect(() => {\n setState({\n ...state,\n value: props.value,\n });\n }, [props.value]);\n\n useEffect(() => {\n setState({\n ...state,\n theme: themes.find((i) => i.name === (props.theme || 'Light')) as Theme,\n });\n }, [props.theme]);\n\n useEffect(() => {\n setState({\n ...state,\n lang: languages.find(\n (i) => i.name === (props.lang || 'Plain Text')\n ) as Lang,\n });\n }, [props.lang]);\n\n const renderContent = () => {\n if (state.showSettings) {\n return (\n \n );\n }\n\n if (state.showProblems) {\n return ;\n }\n\n return null;\n };\n\n return (\n \n \n \n {renderContent()}\n \n );\n}\n","/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nimport prettier from 'prettier/esm/standalone.mjs';\n// @ts-ignore\nimport babelParser from 'prettier/esm/parser-babel.mjs';\n// @ts-ignore\nimport cssParser from 'prettier/esm/parser-postcss.mjs';\n// @ts-ignore\nimport graphqlParser from 'prettier/esm/parser-graphql.mjs';\n// @ts-ignore\nimport htmlParser from 'prettier/esm/parser-html.mjs';\n// @ts-ignore\nimport markdownParser from 'prettier/esm/parser-markdown.mjs';\n// @ts-ignore\nimport typescriptParser from 'prettier/esm/parser-typescript.mjs';\n// @ts-ignore\nimport yamlParser from 'prettier/esm/parser-yaml.mjs';\nimport type { EditorState } from './types';\nimport type { Dispatch } from 'react';\n\ninterface Props {\n title: string;\n state: EditorState;\n setState: Dispatch;\n onChange: (value: string) => void;\n}\n\nexport default function Header({ title, state, setState, onChange }: Props) {\n const handleFormat = () => {\n try {\n const value = prettier.format(state.value, {\n parser: state.lang.parser,\n plugins: [\n babelParser,\n cssParser,\n graphqlParser,\n htmlParser,\n markdownParser,\n typescriptParser,\n yamlParser,\n ],\n });\n if (onChange) {\n onChange(value);\n }\n setState({ ...state, value, errors: [] });\n } catch (error: unknown) {\n setState({ ...state, errors: [(error as Error).message] });\n }\n };\n return (\n \n \n {title}\n \n
\n {state.errors.length > 0 && (\n \n setState({ ...state, showProblems: !state.showProblems })\n }\n >\n \n \n \n {state.errors.length}\n \n \n \n {state.warnings.length}\n \n )}\n \n \n \n \n \n \n setState({\n ...state,\n showSettings: !state.showSettings,\n })\n }\n >\n \n \n \n \n
\n \n );\n}\n","import { Dispatch, KeyboardEvent, useLayoutEffect, useRef } from 'react';\nimport { insertAt } from '@opentf/utils';\nimport highlightSyntax from './highlightSyntax';\nimport type { EditorState } from './types';\n\ninterface Props {\n state: EditorState;\n setState: Dispatch;\n onChange: (value: string) => void;\n}\n\nexport default function EditorContent({ state, setState, onChange }: Props) {\n const textAreaRef = useRef(null);\n const hlCode = highlightSyntax(state);\n const newLinesMatch = [...hlCode.matchAll(/\\n/g)];\n\n useLayoutEffect(() => {\n if (textAreaRef.current !== null && state.setCursor) {\n textAreaRef.current.setSelectionRange(\n state.cursorPos[0],\n state.cursorPos[1]\n );\n setState({ ...state, setCursor: false });\n }\n }, [state.setCursor]);\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const indentChar = state.config.indent === 'Tab' ? '\\t' : ' ';\n const { selectionStart, selectionEnd } = e.target as HTMLTextAreaElement;\n\n if (e.key === 'Tab') {\n e.preventDefault();\n const value = insertAt(\n state.value,\n selectionStart,\n indentChar.repeat(state.config.indentSize)\n );\n if (onChange) {\n onChange(value);\n }\n setState({\n ...state,\n value,\n cursorPos: [\n selectionStart + state.config.indentSize,\n selectionEnd + state.config.indentSize,\n ],\n setCursor: true,\n });\n }\n\n const pairs = ['{', '}', '`', '`', '\"', '\"', \"'\", \"'\", '(', ')', '[', ']'];\n const index = pairs.findIndex((i) => i === e.key);\n\n if (index !== -1) {\n e.preventDefault();\n let value = insertAt(state.value, selectionStart, e.key);\n value = insertAt(value, selectionEnd + 1, pairs[index + 1]);\n if (onChange) {\n onChange(value);\n }\n setState({\n ...state,\n value,\n cursorPos: [selectionStart + 1, selectionEnd + 1],\n setCursor: true,\n });\n }\n };\n\n return (\n \n \n {new Array(newLinesMatch.length + 1).fill('').map((_a, i) => (\n \n {i + 1}\n \n ))}\n \n \n \n {\n if (onChange) {\n onChange(e.target.value);\n }\n setState({ ...state, value: e.target.value });\n }}\n onKeyDown={handleKeyDown}\n style={{\n margin: '0px',\n border: '0px',\n background: 'none',\n boxSizing: 'inherit',\n display: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontStyle: 'inherit',\n fontVariantLigatures: 'inherit',\n fontWeight: 'inherit',\n letterSpacing: 'inherit',\n lineHeight: 'inherit',\n tabSize: 'inherit',\n textIndent: 'inherit',\n textRendering: 'inherit',\n textTransform: 'inherit',\n position: 'absolute',\n top: '0px',\n left: '0px',\n height: '100%',\n width: '100%',\n resize: 'none',\n color: 'inherit',\n WebkitFontSmoothing: 'antialiased',\n WebkitTextFillColor: 'transparent',\n padding: '10px',\n outline: 'none',\n whiteSpace: 'pre',\n overflow: 'hidden',\n }}\n {...state.config.textArea}\n />\n \n \n );\n}\n","import type { EditorState, Theme, Token } from './types';\n\ntype CodeTokenObj = { t: string; v: string };\n\ntype CodeTokens = (CodeTokenObj | string)[];\n\nfunction render(codeTokens: CodeTokens, theme: Theme) {\n let out = '';\n codeTokens.forEach((ct) => {\n if (typeof ct !== 'string') {\n out += `${ct.v}`;\n return;\n }\n out += ct;\n });\n\n return out;\n}\n\nfunction matchTokens(s: string, tokens: Token[]) {\n const matchArr: CodeTokens = [];\n let match: RegExpMatchArray | null = null;\n const tk = tokens.find((tk) => {\n match = s.match(tk.p);\n return match !== null;\n });\n\n if (match) {\n const prefix = s.slice(0, (match as RegExpMatchArray).index);\n if (prefix) {\n const arr = matchTokens(prefix, tokens);\n if (arr.some((i) => typeof i === 'string')) {\n matchArr.push(s);\n return matchArr;\n }\n matchArr.push(...arr);\n }\n\n matchArr.push({ t: tk?.t as string, v: match[0] });\n\n const suffix = s.slice(\n ((match as RegExpMatchArray).index as number) +\n (match[0] as string).length\n );\n if (suffix) {\n const arr = matchTokens(suffix, tokens);\n matchArr.push(...arr);\n }\n } else {\n matchArr.push(s);\n }\n\n return matchArr;\n}\n\nfunction transform(code: string, tokens: Token[], codeTokens: CodeTokens) {\n let str = '';\n\n for (let i = 0; i < code.length; i++) {\n const char = code[i];\n\n if (char === '\\t') {\n codeTokens.push(char);\n continue;\n }\n\n if (char === ' ' || char === '\\n') {\n const arr = matchTokens(str + char, tokens);\n\n if (!arr.some((i) => typeof i === 'string')) {\n str = '';\n }\n\n arr.forEach((m) => {\n if (typeof m === 'string') {\n str = m;\n } else {\n codeTokens.push(m);\n }\n });\n\n if (str === char) {\n codeTokens.push(char);\n str = '';\n }\n continue;\n }\n\n str += char;\n }\n\n codeTokens.push(...matchTokens(str, tokens));\n}\n\nexport default function highlightSyntax(state: EditorState) {\n const codeTokens: CodeTokens = [];\n\n if (state.lang.tokens.length === 0) {\n return state.value;\n }\n\n transform(state.value, state.lang.tokens, codeTokens);\n\n return render(codeTokens, state.theme);\n}\n","import { Dispatch, FormEvent, useEffect, useRef } from 'react';\nimport type { EditorState, Indent, Lang, Theme } from './types';\ninterface Props {\n themes: Theme[];\n languages: Lang[];\n state: EditorState;\n setState: Dispatch;\n}\n\nexport default function Settings({\n themes,\n languages,\n state,\n setState,\n}: Props) {\n const settingsRef = useRef(null);\n\n const handleThemeChange = (e: FormEvent) => {\n const theme = themes.find(\n (i) => i.name === (e.target as HTMLSelectElement).value\n ) as Theme;\n setState({ ...state, theme });\n };\n\n useEffect(() => {\n if (settingsRef.current !== null) {\n settingsRef.current.focus();\n }\n }, []);\n\n return (\n {\n if (e.code === 'Escape') {\n e.stopPropagation();\n setState({ ...state, showSettings: false });\n }\n }}\n >\n

SETTINGS

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Theme: \n \n
Indent: \n \n setState({\n ...state,\n config: {\n ...state.config,\n indent: e.target.value as Indent,\n },\n })\n }\n >\n \n \n \n
Indent Size: \n \n setState({\n ...state,\n config: {\n ...state.config,\n indentSize: parseInt(e.target.value),\n },\n })\n }\n />\n
Languages: \n \n setState({\n ...state,\n lang: languages.find(\n (l) => l.name === e.target.value\n ) as Lang,\n })\n }\n >\n {languages.map((l, i) => (\n \n ))}\n \n
\n \n );\n}\n","export default {\n name: 'Light',\n color: '#111111',\n background: '#fff',\n getStyles: (className) => {\n switch (className) {\n case 'keyword':\n return 'color: #FF4136';\n case 'literal':\n return 'color: #F012BE';\n case 'attribute':\n return 'color: #FF851B;';\n case 'number':\n case 'operator':\n case 'regexp':\n return 'color: inherit';\n case 'string':\n return 'color: #2ECC40';\n case 'puntuation':\n return 'color: inherit;';\n default:\n return '';\n }\n },\n};\n","import { Dispatch, useEffect, useRef } from 'react';\nimport type { EditorState } from './types';\n\ninterface Props {\n state: EditorState;\n setState: Dispatch;\n}\n\nexport default function Problems({ state, setState }: Props) {\n const problemsRef = useRef(null);\n\n useEffect(() => {\n if (problemsRef.current !== null) {\n problemsRef.current.focus();\n }\n }, []);\n\n return (\n {\n if (e.code === 'Escape') {\n e.stopPropagation();\n setState({ ...state, showProblems: false });\n }\n }}\n >\n {state.errors.map((err, i) => (\n
\n 
{err}
\n
\n ))}\n {state.warnings.map((w, i) => (\n
\n {w}\n
\n ))}\n \n );\n}\n","export default {\n name: 'Dark',\n color: '#ffffff',\n background: '#111111',\n getStyles: (className) => {\n switch (className) {\n case 'keyword':\n return 'color: #FF4136';\n case 'literal':\n return 'color: #FFDC00';\n case 'attribute':\n return 'color: #FF851B;';\n case 'number':\n case 'operator':\n case 'regexp':\n return 'color: inherit';\n case 'string':\n return 'color: #01FF70';\n case 'puntuation':\n return 'color: inherit';\n default:\n return '';\n }\n },\n};\n","export default {\n name: 'JSON',\n parser: 'json',\n tokens: [\n {\n t: 'attribute',\n p: /\"[^\"]+?\"(?=:)/,\n s: true,\n b: '\"',\n },\n {\n t: 'string',\n p: /\"[^\\n]*?(?