CodeEditor + Next.js?

[phstc]

I'm trying to run the code for the example page with a Next.js application. The editor loads correctly, but I don't get syntax highlighting or errors, or warnings.

Any idea of what it could be? I don't see any related error in the console.

[just-boris]

Did you import CSS files for the themes like it is shown in our example? Only explicitly imported themes will work.

You may also configure lazy-loading for theming assets via ace.config.set("basePath", "/some/folder"); config, but it would require manually copying files into the target folder, not sure if you can do it with next.js

[phstc]

Hi @just-boris

Yes, I did. It's pretty much a copy and paste from the example, unless I missed something.

The code I'm using 👇

import { CodeEditor, Header } from "@cloudscape-design/components";
import "ace-builds/css/ace.css";
import "ace-builds/css/theme/dawn.css";
import "ace-builds/css/theme/tomorrow_night_bright.css";
import { withSSRContext } from "aws-amplify";
import React from "react";

const i18nStrings = {
  loadingState: "Loading code editor",
  errorState: "There was an error loading the code editor.",
  errorStateRecovery: "Retry",

  editorGroupAriaLabel: "Code editor",
  statusBarGroupAriaLabel: "Status bar",

  cursorPosition: (row, column) => `Ln ${row}, Col ${column}`,
  errorsTab: "Errors",
  warningsTab: "Warnings",
  preferencesButtonAriaLabel: "Preferences",

  paneCloseButtonAriaLabel: "Close",

  preferencesModalHeader: "Preferences",
  preferencesModalCancel: "Cancel",
  preferencesModalConfirm: "Confirm",
  preferencesModalWrapLines: "Wrap lines",
  preferencesModalTheme: "Theme",
  preferencesModalLightThemes: "Light themes",
  preferencesModalDarkThemes: "Dark themes",
};

type CodeEditorSnippetProps = {
  resourceResponse: any;
  id: string;
};

type CodeEditorSnippetState = {
  ace: any;
  value: string;
  language: string;
  preferences: any;
  loading: boolean;
};

export default class CodeEditorSnippet extends React.PureComponent<
  CodeEditorSnippetProps,
  CodeEditorSnippetState
> {
  constructor(props) {
    super(props);
    this.state = {
      ace: undefined,
      value: JSON.stringify(props.resourceResponse.data, null, 2),
      language: "json",
      preferences: undefined,
      loading: true,
    };
    this.onChange = this.onChange.bind(this);
    this.onPreferencesChange = this.onPreferencesChange.bind(this);
  }

  componentDidMount() {
    this.setState({ loading: true });

    import("ace-builds")
      .then((ace) =>
        import("ace-builds/webpack-resolver")
          .then(() => {
            ace.config.set("useStrictCSP", true);
            ace.config.set("loadWorkerFromBlob", false);
            this.setState({ ace, loading: false });
          })
          .catch(() => this.setState({ loading: false }))
      )
      .catch(() => this.setState({ loading: false }));
  }

  onChange(e) {
    this.setState({ value: e.detail.value });
  }

  onPreferencesChange(e) {
    this.setState({ preferences: e.detail });
  }

  render() {
    return (
      <>
        <Header variant="h1">{this.props.id}</Header>
        <CodeEditor
          ace={this.state.ace}
          value={this.state.value}
          language={this.state.language}
          onChange={this.onChange}
          preferences={this.state.preferences}
          onPreferencesChange={this.onPreferencesChange}
          loading={this.state.loading}
          i18nStrings={i18nStrings}
        />
      </>
    );
  }
}

[just-boris]

Converted this into an issue #703. Let's move the conversation here