How to use the @uifabric/monaco-editor.languages function in @uifabric/monaco-editor

To help you get started, we’ve selected a few @uifabric/monaco-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / tsx-editor / src / components / TsxEditor.tsx View on Github external
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;
github OfficeDev / office-ui-fabric-react / packages / tsx-editor / src / transpiler / transpile.ts View on Github external
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) {

@uifabric/monaco-editor

Version of monaco-editor with configuration helpers and transformed CSS files

MIT
Latest version published 3 years ago

Package Health Score

70 / 100
Full package analysis

Similar packages