On this page ...

Previous

 

Next

Now at last, we come to the part you have been waiting for: adding the editor to the webpage. Because of all the previous work, this is now easy. Add a single line to your Svelte component, and add a single line to the showUnit function in the WebappConfigurator. The rest of the showUnit function is merely administration to keep some of the state variables in sync.

// IntegrationExample/webapp/src/lib/main-app/WebappLayout.svelte#L64-L64

<FreonComponent editor={WebappConfigurator.getInstance().editorEnvironment?.editor} />

// IntegrationExample/webapp/src/lib/language/WebappConfigurator.ts#L158-L158

this.editorEnvironment.editor.rootElement = newUnit;

But wait, we are forgetting the styling.

The choice for the Flowbite UI library means that we must work with Tailwind as a CSS framework. Furthermore, the dark mode button provided by Flowbite depends on dark mode being toggled based on a CSS selector instead of the prefers-color-scheme media query (see Tailwind Dark mode). So we need to adjust our CSS files.

For this we have copied the CSS files from the @freon4dsl/core-svelte package and imported them in the main CSS file.

// IntegrationExample/webapp/src/app.css#L5-L8

@import '../static/freon.css';
@import '../static/freon-dark.css';
@import '../static/freon-light.css';

Furthermore, in the CSS for the dark mode every entry has been prefixed with .dark.

// IntegrationExample/webapp/static/freon-dark.css#L7-L12

.dark .freon-component {
    color: whitesmoke;
    background-color: darkslategray;
    --md-sys-color-primary: whitesmoke;
    --md-sys-color-on-surface-variant: whitesmoke; /* color for the one that is not checked */
}

Now, drum roll, please! Here is the Freon editor integrated in the webpage of your choice!

Figure 1. Webpage showing the Freon editor

Previous

 

Next