From a17708ac1ddcfa8dd53ff7be9bfb0e5ba43a0cea Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 30 Jun 2021 11:42:41 +0200 Subject: Convert to React app --- language-web/src/main/html/index.html | 45 +++------------------- .../src/main/js/components/XtextCodeMirror.jsx | 32 +++++++++++++++ language-web/src/main/js/index.js | 12 ------ language-web/src/main/js/index.jsx | 43 +++++++++++++++++++++ 4 files changed, 81 insertions(+), 51 deletions(-) create mode 100644 language-web/src/main/js/components/XtextCodeMirror.jsx delete mode 100644 language-web/src/main/js/index.js create mode 100644 language-web/src/main/js/index.jsx (limited to 'language-web/src') diff --git a/language-web/src/main/html/index.html b/language-web/src/main/html/index.html index 915234d3..01b4e536 100644 --- a/language-web/src/main/html/index.html +++ b/language-web/src/main/html/index.html @@ -5,44 +5,11 @@ Example Web Editor -
-
-

Example Problem Web Editor

-
-
- 
class Family {
-  contains Person[] members
-}
-
-class Person {
-  Person[] children opposite parent
-  Person[0..1] parent opposite children
-  int age
-  TaxStatus taxStatus
-}
-
-enum TaxStatus {
-  child, student, adult, retired
-}
-
-% A child cannot have any dependents.
-error invalidTaxStatus(Person p) :-
-  taxStatus(p, child), children(p, _q).
-
-Family('family').
-members('family', anne).
-members('family', bob).
-members('family', ciri).
-children(anne, ciri).
-?children(bob, ciri).
-taxStatus(anne, adult).
-age(anne, 35).
-bobAge: 27.
-age(bob, bobAge).
-!age(ciri, bobAge).
-
-scope Family = 1, Person += 5..10.
-
-
+ +
diff --git a/language-web/src/main/js/components/XtextCodeMirror.jsx b/language-web/src/main/js/components/XtextCodeMirror.jsx new file mode 100644 index 00000000..75a20daa --- /dev/null +++ b/language-web/src/main/js/components/XtextCodeMirror.jsx @@ -0,0 +1,32 @@ +import React, { useCallback, useState } from 'react'; +import { Controlled as CodeMirror } from 'react-codemirror2'; +import 'mode-problem'; +import { createServices, removeServices } from 'xtext/xtext-codemirror'; + +export default function XtextCodeMirror({ initialValue }) { + const [value, setValue] = useState(initialValue); + + const codeMirrorOptions = { + mode: 'xtext/problem', + indentUnit: 2, + }; + + const xtextOptions = { + xtextLang: 'problem', + enableFormattingAction: true, + }; + + const onBeforeChange = useCallback((_editor, _data, newValue) => { + setValue(newValue); + }, [setValue]); + + return ( + createServices(editor, xtextOptions)} + editorWillUnmount={removeServices} + onBeforeChange={onBeforeChange} + /> + ); +}; diff --git a/language-web/src/main/js/index.js b/language-web/src/main/js/index.js deleted file mode 100644 index b4cd450e..00000000 --- a/language-web/src/main/js/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import xtext from 'xtext/xtext-codemirror'; -import 'mode-problem'; - -import '../css/index.scss'; - -xtext.createEditor({ - baseUrl: '/', - xtextLang: 'problem', - enableFormattingAction: true, - sendFullText: false, - indentUnit: 2, -}); diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.jsx new file mode 100644 index 00000000..48c0baeb --- /dev/null +++ b/language-web/src/main/js/index.jsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { render } from 'react-dom'; + +import XtextCodeMirror from "./components/XtextCodeMirror"; + +import '../css/index.scss'; + +const initialValue = `class Family { + contains Person[] members +} + +class Person { + Person[] children opposite parent + Person[0..1] parent opposite children + int age + TaxStatus taxStatus +} + +enum TaxStatus { + child, student, adult, retired +} + +% A child cannot have any dependents. +error invalidTaxStatus(Person p) :- + taxStatus(p, child), children(p, _q). + +Family('family'). +members('family', anne). +members('family', bob). +members('family', ciri). +children(anne, ciri). +?children(bob, ciri). +taxStatus(anne, adult). +age(anne, 35). +bobAge: 27. +age(bob, bobAge). +!age(ciri, bobAge). + +scope Family = 1, Person += 5..10. +`; +const app = ; + +render(app, document.getElementById('app')); -- cgit v1.2.3-70-g09d2