What exactly is the state ID that xtext employs when saving resources?

I have integrated xtext's orion editor in an iframe within my Angular application. I am facing a challenge where I need to save the edited content from my Angular application to a backend Java application. Can someone guide me on the API calls or approach that I should take from the Angular side to successfully save the content written in the editor?

Here is what I have attempted so far:
1. I tried extracting content from the iframe in my Angular application, but the data extracted was limited to what is only visible through the iframe and not the entire scrollable content.
2. I attempted to make 'save' API calls similar to those made by xtext during saving, but encountered a requirement for a stateId in the request body. I am looking for clarification on what this state Id represents and how it is generated.

The following code snippet demonstrates the call being made from my Angular application:

_this.saveEditor = function(args) {
    var params = {
        requiredStateId: args.stateId
    }
    _this.saveUrl = XTEXT_URL + '/save?resource=' + args.resourceId;
    return $http({
        method: 'POST',
        url: _this.saveUrl,
        data: params
     });
};

The request body contains:

{"requiredStateId":"-80000000"}

The state Id mentioned above is obtained through a prior load API call which returns the state Id in its response.

Answer №1

If you're looking for assistance, this snippet might be helpful. However, I'm not sure how you can integrate it with your existing setup.

require(["orion/code_edit/built-codeEdit-amd"], function() {
        require(["xtext/xtext-orion"], function(xtext) {
            var editors = xtext.createEditor({
                baseUrl: baseUrl,
                syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
            }).done(function(editorViewer) {
                $("#save-button").click(function() {
                    editorViewer.xtextServices.saveResource();
                });
                $("#log-button").click(function() {
                    console.log(editorViewer.xtextServices.editorContext.getServerState());
                });
            });

        });
    });

Instead of the simple log statement, you can query and then manually trigger the save action.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Implement Animations with Angular 2 Directives

Incorporating a special Directive onto elements to monitor their current scroll position seems like a handy feature. Here's an example: @Directive({ selector: '[my-scroll-animation]' }) My goal is to make the element appear on screen ...

There seems to be an issue with locating the module '/opt/repo/ROOT/server.js'

Error in server.js on jelastic node.log file When attempting to publish a simple page created with Bootstrap using nodejs express and ejs, the server is returning a 504 Gateway timeout error and the application cannot run. The node.js log file is displayi ...

Screening new elements to be included in the array

When adding new items to an array in my App, I encountered a problem with filtering the newly added items. If I use .filter by state, it modifies the original array and I am unable to filter from the beginning (original array). I attempted to filter using ...

Using Fullcalendar Moment to retrieve the current time plus an additional 2 hours

Trying to tackle this seemingly simple task using moment.js in conjunction with Fullcalendar. My goal is to retrieve the current time and then add two hours to it. Within the select method (or whatever terminology you prefer), I currently have: select: f ...

Tips for receiving an ajax response in Vue.js 2

Here is the code snippet I am working with: <template> <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)"> <span class="fa fa-heart"></span>&nbsp;Favorite </a> &l ...

What is the best way to incorporate a formArray into a formGroup?

Before anything else, I want to apologize for any errors in my English. I seem to be having trouble adding an array field to a formGroup. My issue arises when attempting to use the push method to add a formArray to my rate formGroup. It appears that the ...

How to Implement Infinite Scrolling in Ionic Framework Using HTTP Requests

Recently, I started using the amazing ionic framework and I am new to angular. I have a web service up and running, and my app is supposed to load data. I have succeeded in retrieving data, however, the WordPress rest API sends data in the form of pages. I ...

After closing the box, make sure to hold it securely

After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open. I am looking ...

Waiting for Selenium in Javascript

I'm having trouble using Selenium Webdriver with Node.js to scrape Google Finance pages. The driver.wait function is not behaving as expected. I've configured my Mocha timeout at 10 seconds and the driver.wait timeout at 9 seconds. The test passe ...

Tips for implementing arraybuffer playback in video tags

I have been exploring ways to convert images from an HTML canvas into a video. After much research, I just want to be able to select a few images and turn them into a video. By passing multiple images to a library engine, I am able to receive an array buff ...

User form not triggering post requests

I have a unique react blog application embedded with a form for submitting intriguing blog posts. The setup includes a server, routes, model, and controllers for fetch requests. Surprisingly, everything functions impeccably when tested on Postman. However, ...

Save the click value for future use

My appointment form is divided into separate panels. At Step 1, if a user clicks on London (#Store1), I want to hide the Sunday and Monday options from the calendar in panel 5. Essentially, I need to save this click event so that when the user reaches th ...

incorporating a qml conditional statement when assigning a class

I have an item and I want to dynamically add a class based on a variable import "class1" import "class2" Item { id: myID property variant myVar: 0; anchors.fill: parent; function update() { switch(myID.myVar) { ...

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

In need of clarification on the topic of promises and async/await

I have been utilizing Promises and async/await in my code, and it seems like they are quite similar. Typically, I would wrap my promise and return it as needed. function someFetchThatTakesTime(){ // Converting the request into a Promise. return new ...

Passing parameters to an external function in order to display a message is proving difficult. An error of type TypeError is being encountered, specifying that the Class constructor AlertMessage cannot be called without using the

Every time I attempt to pass a message as an argument to the showAlert() function, an error is triggered: Error: An instance of the AlertMessage class cannot be created without using 'new' image: https://i.sstatic.net/d0GGD.jpg I am simply tryi ...

Rotating Images in 3D with CSS

I am looking for guidance on how to create a rotating image effect on a webpage using CSS/JS. The image should rotate into the plane of the page, similar to the example shown in this post. Can you assist me with this? To better illustrate what I'm tr ...

Limit the implementation of Angular Material's MomentDateAdapter to strictly within the confines of individual

Within my app, I have several components that utilize the mat-datepicker. However, there is one component where I specifically want to use the MomentDateAdapter. The issue arises when I provide it in this one component as it ends up affecting all the other ...

The React OnClick and onTouchStart event handlers are functioning properly on a desktop browser's mobile simulator, but they are not responsive when

I added a basic button tag to my next.js main page.js file that triggers an alert when clicked. Surprisingly, the onClick function is functional on desktop browsers but fails to work on any mobile browser. "use client"; export default function P ...