diff --git a/package-lock.json b/package-lock.json
index d5bb02e..144b2ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3516,11 +3516,6 @@
}
}
},
- "classnames": {
- "version": "2.2.6",
- "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
- "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
- },
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3591,11 +3586,6 @@
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
- "code-prettify": {
- "version": "0.1.0",
- "resolved": "https://registry.npmjs.org/code-prettify/-/code-prettify-0.1.0.tgz",
- "integrity": "sha1-RocMyMGlDQm61TmzOpg9vUqjSx4="
- },
"codemirror": {
"version": "5.48.0",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
@@ -10428,14 +10418,6 @@
"scheduler": "^0.13.6"
}
},
- "react-dropdown": {
- "version": "1.6.4",
- "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.6.4.tgz",
- "integrity": "sha512-zTlNRZ6vzjEPsodBNgh6Xjp9IempEx9sReH3crT2Jw4S6KW2wS/BRIH3d/grYf/iXARadDRD91//uUCs9yjoLg==",
- "requires": {
- "classnames": "^2.2.3"
- }
- },
"react-error-overlay": {
"version": "5.1.6",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
diff --git a/package.json b/package.json
index 682312a..2fcf590 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,10 @@
"private": true,
"dependencies": {
"@kengorab/abra_wasm": "^0.6.9",
- "code-prettify": "^0.1.0",
"codemirror": "^5.48.0",
"react": "^16.8.6",
"react-codemirror2": "^6.0.0",
"react-dom": "^16.8.6",
- "react-dropdown": "^1.6.4",
"react-responsive": "^8.1.0",
"react-router-dom": "^5.0.1",
"react-router-hash-link": "^1.2.1",
diff --git a/src/@types/code-prettify.d.ts b/src/@types/code-prettify.d.ts
deleted file mode 100644
index 1bc5ef8..0000000
--- a/src/@types/code-prettify.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-declare module 'code-prettify' {
- type LexerRule = [string, RegExp] | [string, RegExp, null] | [string, RegExp, null, string | undefined]
-
- export class PR {
- prettyPrint()
-
- registerLangHandler(lexer: PRLexer, languages: string[])
-
- createSimpleLexer(
- shortcutStylePatterns: LexerRule[],
- fallthroughStylePatterns: LexerRule[]
- ): PRLexer
-
- PR_PLAIN: string
- PR_STRING: string
- PR_COMMENT: string
- PR_STRING: string
- PR_KEYWORD: string
- PR_LITERAL: string
- PR_TYPE: string
- PR_TAG: string
- PR_PLAIN: string
- PR_PUNCTUATION: string
- }
-
- declare global {
- interface Window {
- PR: PR
- }
- }
-
- interface PRLexer {
- }
-}
\ No newline at end of file
diff --git a/src/@types/react-snapshot.d.ts b/src/@types/react-snapshot.d.ts
deleted file mode 100644
index b0012cb..0000000
--- a/src/@types/react-snapshot.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module 'react-snapshot' {
- import { ReactElement } from 'react'
-
- export function render(
- element: ReactElement
,
- container: Element | null,
- callback?: () => void
- )
-}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 68ad4a3..d762c92 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Layout, Header, Main } from './components/Layout'
import HomePage from './pages/HomePage'
import Documentation from './pages/Documentation'
+import Manual from './pages/Manual'
import PlaygroundPage from './pages/PlaygroundPage'
export default function App() {
@@ -15,6 +16,7 @@ export default function App() {
+
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
index b7ba00a..3ac1b2a 100644
--- a/src/components/Code.tsx
+++ b/src/components/Code.tsx
@@ -1,47 +1,54 @@
import * as React from 'react'
import styled from 'styled-components'
-import { VsCodeThemeStyles } from '../prettier-languages'
-import 'code-prettify'
-import 'code-prettify/src/run_prettify'
+import Codemirror from 'codemirror'
+import 'codemirror/addon/runmode/runmode'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/material.css'
+import '../abra-lang/abra-mode'
interface Props {
children: string,
- language?: 'abra' | 'abrac',
- style?: React.CSSProperties
}
-export default function Code({ children, style, language = 'abra' }: Props) {
- const pre = React.createRef()
-
- // Split into lines, removing any empty lines at start and end (but keeping empty lines in middle)
- const codeLines = children.trimEnd()
- .split('\n')
- .filter((line, idx) => idx !== 0 || line.length)
- const indentation = codeLines[0] ? codeLines[0].length - codeLines[0].trimStart().length : 0
- const code = codeLines.map(line => line.substring(indentation, line.length)).join('\n')
+export default function Code({ children }: Props) {
+ const ref = React.createRef()
React.useLayoutEffect(() => {
- if (pre.current) {
- pre.current.classList.remove('prettyprinted')
- }
- window.PR.prettyPrint()
- }, [pre, code])
-
- return (
- <>
-
-
- {code}
-
-
- )
+ const code = unindent(children)
+
+ // @ts-ignore: this function is an addon, and isn't present in the type definitions
+ Codemirror.runMode(code, 'abra', ref.current)
+ }, [ref, children])
+
+ return
+}
+
+function unindent(str: string): string {
+ const lines = str.split('\n')
+
+ let startIdx = 0
+ for (; startIdx < lines.length; startIdx++) {
+ if (lines[startIdx].trim()) break
+ }
+ let endIdx = lines.length - 1
+ for (; endIdx >= 0; endIdx--) {
+ if (lines[endIdx].trim()) break
+ }
+
+ const firstLine = lines[startIdx]
+ if (!firstLine) return str
+ const indentation = firstLine.search(/\S/)
+
+ return lines.slice(startIdx, endIdx + 1)
+ .map(line => line.substring(indentation))
+ .join('\n')
}
const Pre = styled.pre`
- padding: 16px !important; // Need to override prettyprint's default for padding
+ height: auto !important; // Need to override codemirror's default 300px height
+ padding: 16px;
border-radius: 6px;
max-width: 100%;
max-height: 300px;
overflow: scroll;
`
-
diff --git a/src/img/refresh.svg b/src/img/refresh.svg
deleted file mode 100644
index a38ef8a..0000000
--- a/src/img/refresh.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/img/ui-play.svg b/src/img/ui-play.svg
deleted file mode 100644
index 3659592..0000000
--- a/src/img/ui-play.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index dbf119a..ea838aa 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
-import { registerAbracLang, registerAbraLang } from './prettier-languages'
import './index.css'
-registerAbraLang()
-registerAbracLang()
-
ReactDOM.render(, document.getElementById('root'))
diff --git a/src/pages/Manual.tsx b/src/pages/Manual.tsx
new file mode 100644
index 0000000..93aacaa
--- /dev/null
+++ b/src/pages/Manual.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Section } from '../components/Layout'
+
+export default function Manual() {
+ return (
+
+ Abra Manual
+ // TODO
+
+ )
+}
diff --git a/src/prettier-languages.ts b/src/prettier-languages.ts
deleted file mode 100644
index 3c5a94a..0000000
--- a/src/prettier-languages.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { createGlobalStyle } from 'styled-components'
-
-export const VsCodeThemeStyles = createGlobalStyle`
- pre.prettyprint { display: block; background-color: #1e1e1e; }
- pre .str { color: #ffa0a0; } // string
- pre .kwd { color: #569cd6; font-weight: bold; } // keyword
- pre .com { color: #6c9d5a; } // comment
- pre .typ { color: #4ec9b0; } // type
- pre .lit { color: #cd5c5c; } // literal
- pre .pun { color: #bfbfbf; } // punctuation
- pre .pln { color: #ffffff; } // plaintext / identifiers
- pre .dec { color: #b5cea8; } // decimal
-`
-
-export function registerAbraLang() {
- const { PR } = window
- const lexer = window.PR.createSimpleLexer(
- [
- // Whitespace
- [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
- ],
- [
- // Single-line comments
- [PR['PR_COMMENT'], /^\/\/(?:.*)/],
-
- // Multi-line comments
- [PR['PR_COMMENT'], /^\/\*[^*]*\*+(?:[^/*][^*]*\*+)*\//],
-
- // Double-quoted strings
- [PR['PR_STRING'], /^r?"("|(?:[^\n\r\f])*?[^\\]")/],
-
- // Keywords for constants
- [PR['PR_KEYWORD'], /^\b(?:false|true)\b/i],
-
- // Other keywords
- [PR['PR_KEYWORD'], /^\b(?:val|var|func|if|else|for|in|while|break|type|None|self|enum|import|from|export)\b/i],
-
- // Types are typically capitalized
- [PR['PR_TYPE'], /^[A-Z]\w*/],
-
- // Numbers
- [PR['PR_LITERAL'], /^\b\d+(?:\.\d*)?(?:e[+-]?\d+)?/i],
-
- // Identifiers
- [PR['PR_PLAIN'], /^[a-z_$][a-z0-9_]*/i],
-
- // Punctuation
- [PR['PR_PUNCTUATION'], /^[(){}[\],.:;=+\-*/]/]
- ]
- )
-
- PR.registerLangHandler(lexer, ['abra'])
-}
-
-export function registerAbracLang() {
- const { PR } = window
- const lexer = window.PR.createSimpleLexer(
- [
- // Whitespace
- [PR['PR_PLAIN'], /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0']
- ],
- [
- // Comments
- [PR['PR_COMMENT'], /;\s*.*/],
-
- // Labels
- [PR['PR_PLAIN'], /[a-z_$0-9]*:/],
-
- // Numbers
- [PR['PR_LITERAL'], /^\b\d+(?:\.\d*)?(?:e[+-]?\d+)?/i],
-
- // Instructions
- [PR['PR_KEYWORD'], /^[a-z_$][a-z0-9_]*/i],
- ]
- )
-
- PR.registerLangHandler(lexer, ['abrac'])
-}