How to use @uifabric/monaco-editor - 7 common examples

React.useEffect(() => {
    const model = (modelRef.current = monaco.editor.createModel(code, language, filename ? monaco.Uri.parse(filename) : undefined));
    const editor = monaco.editor.create(divRef.current!, {
      minimap: { enabled: false },
      fontFamily: CODE_FONT_FAMILY,
      ariaLabel,
      accessibilityHelpUrl: 'https://github.com/Microsoft/monaco-editor/wiki/Monaco-Editor-Accessibility-Guide',
      // add editorOptions default value here (NOT in main destructuring) to avoid re-calling the effect
      ...(editorOptions || {}),
      model
    });

    // Handle changes (debounced)
    // tslint:disable-next-line:no-any due to mismatch between Node and browser typings
    let debounceTimeout: any;
    editor.onDidChangeModelContent(() => {
      // Destructure these locally to get the latest values
      const { debounceTime: currDebounceTime, onChange: currOnChange } = internalState.current!;
      if (!currOnChange) {

React.useEffect(() => {
    const model = (modelRef.current = monaco.editor.createModel(code, language, filename ? monaco.Uri.parse(filename) : undefined));
    const editor = monaco.editor.create(divRef.current!, {
      minimap: { enabled: false },
      fontFamily: CODE_FONT_FAMILY,
      ariaLabel,
      accessibilityHelpUrl: 'https://github.com/Microsoft/monaco-editor/wiki/Monaco-Editor-Accessibility-Guide',
      // add editorOptions default value here (NOT in main destructuring) to avoid re-calling the effect
      ...(editorOptions || {}),
      model
    });

    // Handle changes (debounced)
    // tslint:disable-next-line:no-any due to mismatch between Node and browser typings
    let debounceTimeout: any;
    editor.onDidChangeModelContent(() => {
      // Destructure these locally to get the latest values
      const { debounceTime: currDebounceTime, onChange: currOnChange } = internalState.current!;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as monaco from '@uifabric/monaco-editor';
import { LanguageServiceDefaultsImpl as TypescriptDefaults } from '@uifabric/monaco-editor/monaco-typescript.d';
import { getWindow } from 'office-ui-fabric-react/lib/Utilities';
import { ITsxEditorProps } from './TsxEditor.types';
import { transpileAndEval } from '../transpiler/transpile';
import { IMonacoTextModel, ICompilerOptions, IPackageGroup } from '../interfaces/index';
import { Editor } from './Editor';
import { SUPPORTED_PACKAGES } from '../utilities/index';
import { IEditorProps } from './Editor.types';

const typescript = monaco.languages.typescript;
const typescriptDefaults = typescript.typescriptDefaults as TypescriptDefaults;

const filePrefix = 'file:///';
const filename = filePrefix + 'main.tsx';

/**
 * Wrapper for rendering a Monaco instance and also transpiling/eval-ing the React example code inside.
 */
export const TsxEditor: React.FunctionComponent = (props: ITsxEditorProps) => {
  const { editorProps, onTransformFinished, compilerOptions, supportedPackages = SUPPORTED_PACKAGES } = props;

  // Hooks must be called unconditionally, so we have to create a backup ref here even if we
  // immediately throw it away to use the one passed in.
  const backupModelRef = React.useRef();
  const modelRef = editorProps.modelRef || backupModelRef;

export function transpile(model: IMonacoTextModel): Promise {
  const transpiledOutput: ITransformedCode = { error: undefined, output: undefined };
  const filename = model.uri.toString();
  return monaco.languages.typescript
    .getTypeScriptWorker()
    .then((getWorker: (uri: monaco.Uri) => Promise) => getWorker(model.uri))
    .then(worker => {
      return worker.getEmitOutput(filename).then((output: EmitOutput) => {
        // Get diagnostics to find out if there were any syntax errors (there's also getSemanticDiagnostics
        // for type errors etc, but it may be better to allow the user to just find and fix those
        // via intellisense rather than blocking compilation, since they may be non-fatal)
        return worker.getSyntacticDiagnostics(filename).then(syntacticDiagnostics => {
          syntacticDiagnostics = syntacticDiagnostics.filter(d => d.category === 1 /*error*/);

          if (syntacticDiagnostics.length) {
            // Don't try to run the example if there's a syntax error
            transpiledOutput.error = _getErrorMessages(syntacticDiagnostics, model.getValue());
          } else {
            transpiledOutput.output = output.outputFiles[0].text;
            if (win && win.transpileLogging) {

// @ts-check
const path = require('path');
const resources = require('@uifabric/build/webpack/webpack-resources');
const { addMonacoWebpackConfig } = require('@uifabric/monaco-editor/scripts/addMonacoWebpackConfig');

const BUNDLE_NAME = 'tsx-editor';
const IS_PRODUCTION = process.argv.indexOf('--production') > -1;

module.exports = resources.createConfig(
  BUNDLE_NAME,
  IS_PRODUCTION,
  addMonacoWebpackConfig({
    entry: {
      [BUNDLE_NAME]: './lib/index.js'
    },

    output: {
      libraryTarget: 'var',
      library: 'FabricTsxEditor'
    },

    externals: [{ react: 'React' }, { 'react-dom': 'ReactDOM' }],

    resolve: {
      alias: {
        '@uifabric/tsx-editor/src': path.join(__dirname, 'src'),
        '@uifabric/tsx-editor/lib': path.join(__dirname, 'lib'),
        '@uifabric/tsx-editor/dist': path.join(__dirname, 'dist'),

// @ts-check
const path = require('path');
const resources = require('@uifabric/build/webpack/webpack-resources');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { addMonacoWebpackConfig } = require('@uifabric/monaco-editor/scripts/addMonacoWebpackConfig');

const BUNDLE_NAME = 'demo-app';

module.exports = resources.createServeConfig(
  addMonacoWebpackConfig({
    entry: {
      [BUNDLE_NAME]: './src/demo/index.tsx'
    },

    output: {
      chunkFilename: `${BUNDLE_NAME}-[name].js`
    },

    devServer: {
      writeToDisk: true // for debugging
    },

    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    },

export function isEditorSupported(code: string, supportedPackages: IBasicPackageGroup[]): boolean {
  const win = getWindow();
  return (
    // Not server-side rendering
    !!win &&
    // Required environment config available
    !!isConfigAvailable() &&
    // Opt-out query param or session storage is not set
    getSetting('useEditor') !== '0' &&
    // Not IE 11
    !isIE11() &&
    // Web worker available
    typeof Worker !== 'undefined' &&
    // No immediate issues detected in example (or exceptions thrown from parsing)
    isExampleValid(code, supportedPackages)
  );
}