import React from 'react'; import { Editor, EditorContent, EditorDocumentRendererProps, EditorToolbar, EditorToolbarButton, EditorToolbarLeft, EditorToolbarMenu, EditorToolbarRight, EditorToolbarText, Studio, TextArea, assertNotNull, showContextMenu, } from '@5minds/processcube_studio_sdk'; import { EditorDocumentExampleModel } from './EditorDocumentExampleModel'; import './EditorDocumentExampleRenderer.scss'; type BootstrapExampleProps = {}; type CustomCssExampleProps = { model: EditorDocumentExampleModel; }; export class EditorDocumentExampleRenderer extends React.Component { private studio: Studio; private model: EditorDocumentExampleModel | null = null; constructor(props: EditorDocumentRendererProps) { super(props); this.studio = props.studio; } async componentDidMount(): Promise { this.model = await this.studio.editors.getEditorDocumentModel(this.props.editorDocument); this.forceUpdate(); } private onDataChanged(value: string): void { // This is one of those situations where the TypeScript compiler complains about `this.model` possibly being `null`, // but you know this can't possibly be `null` because this method can only ever be called if the model is present. // // `assertNotNull` provides a utility function to both appease the compiler and give you the peace of mind that // if - for some unforeseen reason or future implementation change - `this.model` is `null` at this point, we fail // early and with a descriptive error message (which is why this is preferable to the bang operator). assertNotNull(this.model, 'this.model'); this.model.setValue(value); } render(): JSX.Element | null { if (this.model == null) { return null; } return (

You can use Bootstrap Out-of-the-Box!

Your text input Enter some text to enable the "Reset Content" command in the editor's toolbar!

); } } function BootstrapExample(props: BootstrapExampleProps): JSX.Element { return (

... or maybe stay with Bootstrap:

Your bill 3

Product name
Brief description
$12
Second product
Brief description
$8
Third item
Brief description
$5
Promo code
EXAMPLECODE
-$5
Total (USD) $20

Information Form

First name

Valid first name is required.

Last name

Valid last name is required.

Username

Your username is required.

Email (Optional)

Please enter a valid email address for shipping updates.

Shipping address is the same as my billing address

Save this information for next time

); } function CustomCssExample(props: CustomCssExampleProps): JSX.Element { return (

showContextMenu(event, 'editor-document-example/example-menu', [props.model])} >

This example also uses Custom CSS!!

(right click here for the registered menu as Contextmenu)

); }

You can use Bootstrap Out-of-the-Box!

... or maybe stay with Bootstrap:

Your bill 3

Product name

Second product

Third item

Promo code

Information Form

This example also uses Custom CSS!!

Lädt...