troy351 / emmet-monaco-es Goto Github PK

View Code? Open in Web Editor NEW

75.0 3.0 14.0 597 KB

Emmet support for Monaco Editor

License: MIT License

JavaScript 2.49% TypeScript 88.10% HTML 9.41%

monaco-editor emmet emmet-plugin emmet-monaco

emmet-monaco-es's Introduction

emmet-monaco-es

Emmet Support for Monaco Editor, based on vscode-emmet-helper

Advantage

Almost the same as VSCode's built-in emmet, integrated with completion provider
Various languages support

Install

$ npm install emmet-monaco-es

Usage

NOTE

The emmet functionality was bound to language features not to a specific editor instance.

emmetHTML works for HTML compatible languages, like PHP, for html only by default
emmetCSS works for CSS compatible languages, like LESS / SCSS, for css only by default
emmetJSX works for JSX compatible languages, like JavaScript / TypeScript, for javascript only by default

Follow this guide to make Monaco Editor support TSX

Initialize emmet should BEFORE all monaco editor instance creation

ESM

import { emmetHTML, emmetCSS, emmetJSX, expandAbbreviation, registerCustomSnippets } from 'emmet-monaco-es'

// `emmetHTML` , `emmetCSS` and `emmetJSX` are used the same way
const dispose = emmetHTML(
  // monaco-editor it self. If not provided, will use window.monaco instead.
  // This could make the plugin support both ESM and AMD loaded monaco-editor
  monaco,
  // languages needs to support html markup emmet, should be lower case.
  ['html', 'php'],
)

// run it if you want to dispose emmetHTML.
// NOTE: all languages specified will be disposed.
dispose()

// internal expand API, if you want to extend functionality with emmet
// check out the emmet repo https://github.com/emmetio/emmet for how to use it
expandAbbreviation('a', { type: 'markup', syntax: 'html' }) // <a href=""></a>
expandAbbreviation('fz14', { type: 'stylesheet', syntax: 'css' }) // font-size: 14px;

// register custom snippets
registerCustomSnippets('html', {
  ull: 'ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }',
  oll: '<ol><li id=${1} class=${2}> Will only work in html </ol>',
  ran: '{ Wrap plain text in curly braces }',
})

Browser

<script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script>
<script>
  // NOTE: monaco-editor should be loaded first
  // see the above esm example for details
  emmetMonaco.emmetHTML(monaco)
</script>

Limitation

Does NOT support Emmet for embed CSS inside HTML / JSX / TSX

License

MIT

emmet-monaco-es's People

Contributors

Stargazers

Watchers

Forkers

cechi multi-forks mattduffield daryl-cecile mwearne youlinaa mate-academy chanced xuxinyuancode dovydasomega remcohaszing syjstc insomenia adncodemasterdisk

emmet-monaco-es's Issues

Not working with @monaco-editor/react

Hi, I'm trying to use it with @monaco-editor/react but does not see to be working:

import React from "react";
import Editor from "@monaco-editor/react";
import { emmetHTML } from "emmet-monaco-es";

export default function App() {
  return (
    <Editor
      height="400px"
      defaultLanguage="html"
      theme="vs-dark"
      onMount={(_editor, monaco) => {
        emmetHTML(monaco);
      }}
    />
  );
}

Link to sandbox: https://codesandbox.io/s/bold-davinci-lpz8w?file=/src/App.tsx:0-330

Twig language

Is it possible to use emmetHTML in twig mode?

How to add custom abbreviations/completions?

How can we add to

a new completion like

🔧 script:worker

<script type=worker>
  async function fetch(request) {
    return new Response(request.url)
  }
</script>

Would that be handled in emmet-monaco-es or monaco itself?
Where does the completion data come from?

See sw.rt.ht/? (real-time service worker playground; with instant edge deployment!)

Error while using emmet-monaco included through a script tag

So i included the plugin using the script tag option. Called the emmetMonaco.emmetHTML(); method. Now in my editor, when i type in something i get an error Uncaught Error: Cannot read property 'depth' of undefined. Its really frustrating.

Thanks in advance for any help

html intellisense gone after using emmet

hi,
after applying emmet to my code, html zen coding is achieved but now i cannot get intellisense to suggest me any tags all i get is emmet abbreviation when i do ctrl+space.
for example:

autocomplete for head tag is not working (havent checked other tags deeply)
intellisense for html tags doesnt work well with emmet otherwise fine
image :
blank document intellisense

Exports is not defined in ES module scope

Hello 👋

thank you for this library, it's really helpful for our use case.

We recently updated monaco to 0.45 and received to following error afterwards

any idea what's wrong here?

It's a NextJS project using pretty much the default tsconfig. Here are some relevant dependencies:

"monaco-editor": "0.45.0",
"emmet-monaco-es": "5.3.0",
"@monaco-editor/react": "4.6.0",

kind regards

monaco `0.34.0` does not display emmet expansion preview

`monaco-0.33.0` + `[email protected]`	`monaco-0.34.0` + `[email protected]`

✔️ present	❌ missing

The expected emmet expansion preview:

<li>|</li>
<li>|</li>

is missing in monaco-0.34.0. How can this be turned back on?

Support css also

Can u pls update it to support css

Lorem Not Working

lorem not working after > 3.0.0

Doesn't work

Hello! Need your help.
I'm trying to use this package, but for some reason autocompletion with emmet doesn't work with no any issue in console. Here is and example of my code.

  import * as monaco from 'monaco-editor';
  import { emmetHTML, emmetCSS } from 'emmet-monaco-es';

  let element;

  emmetHTML(monaco);

  const editor = monaco.editor.create(element, {
    language: 'html',
    tabSize: 2,
    autoIndent: true,
    autoClosingBrackets: true,
    tabCompletion: true,
  });

Where element - is my dom element.

UPD.
typing: div.test - doesn't work,
but I figured that '>' triggers autocompletion

[question] How to override ! + tab generated text?

Now ! + tab generate text like this:

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="">
	<meta name="viewport" content="width=, initial-scale=">
	<title></title>
</head>
<body>
	
</body>
</html>

Is it possible override generated like VSCode?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Cant dispose emmet

Hi,
I noticed I cant dispose emmet.
With what you had in the readme, it currently dont work .

I will kindly suggest if you cant extend the methods with a dispose which will allow the users to dispose what ever emmet they would like to kill.

Thanks and have a wonderful week.

npm warn when installed against [email protected]

I am getting a warning from npm that says

npm WARN [email protected] requires a peer of monaco-editor@^0.12.0 but none is installed. You must install peer dependencies yourself.

monaco `0.37.0` support

Despite 7e3f116,
emmet-monaco-es 5.2.1 does not work with monaco 0.37.0 ❌;
emmet-monaco-es 5.2.1 does work with monaco 0.36.1 ✔️ and 0.36.0 ✔️.

Chain emmet invocations

Hey 👋

and thanks for the lib ❤️

I got a small issue where I'm not sure if it's intended or not. There's another issue which mentions something similar but sadly it was not clearly mentioned how it was resolved in the end.

After I invoke an emmet abbreviation my cursor gets placed in between the tags. Now if I start typing I would expect to see some intellisense suggestions again (emmet or otherwise) but nothing is shown.

When you look at the stackblitz you can try out what I mean.

Thanks for your time!

Screen.Recording.2021-08-19.at.10.59.52.mov

Tokenization error.

I get the following error in the console:
`Uncaught Error: Cannot read properties of undefined (reading '_tokenization')

TypeError: Cannot read properties of undefined (reading '_tokenization')
at emmet-monaco.min.js:1:89850
at pr (emmet-monaco.min.js:1:90247)
at Object.provideCompletionItems (emmet-monaco.min.js:1:91855)
at e.provideCompletionItems (standaloneLanguages.ts:601:71)
at Object.provideCompletionItems (standaloneLanguages.ts:341:19)
at suggest.ts:84:44
at async.ts:30:14
at new n.Class.derive._oncancel (winjs.base.raw.js:1641:1)
at Object.c [as asWinJsPromise] (async.ts:29:9)
at suggest.ts:84:12
at errors.ts:33:12`

For more info see the following example: https://codepen.io/emmanuelulloa/pen/vYQgoRR?editors=0010

Publish to NPM

emmet-monaco is not a package on npm it would be easier to install if it was on npm. (you might also want to use the monaco import as well instead of the global variable.

Unexpected autocomplete for plain text

Extensibility support

I'm working with a Html(Xml) and Jsx like DSL
The problem is that elements support a dot in their name like:

<Neos.Fusion:Tag tagName='h1' content='foo' />

So I was wondering if one could use this Emmet package to somehow add custom
Emmet snippets (and don't interprete the dot as css class)

edit:
I fear this is not possible as Emmet itself doesn't even support this for Jsx. For now I will use 'normal' Monaco snippets. (difficulty is figuring out if the cursor is in an attribute but that can be copied from here ^^ - or extracted/exposed? )

will support BOM & DOM and js method?

Use both html and css

Hi! I noticed that emmet-monaco focuses on the language setting by the monaco editor. Only when language is set to css, emmetMonaco.emmetHTML (); only take effect.
So is there any good way? Let the language of my monaco editor is set to html, the html and css of emmet take effect at the same time.

Support emmetJS()

I am currently building a jsx editor, and need to enable emmet in “javascript” language. This project currently support html and css only.

I just modified compiled version of emmet-monaco-es so that it can support jsx (I modified onComplete function and the tokenizer).

I am not confident enough to make a pull request so maybe I will put my modification here if anyone interested.

emmet '!' not work

In emmet, "!" and "html:5" work the same way,But I type " ! "There is no emmet grammar,may forget to join it?

Refactor

Refactor based on microsoft/vscode-emmet-helper

SCSS Is not working

I have manago to get it working in our wp plugin and CSS, JS and HTML are working but not SCSS.

/* monaco editor */
		require.config({ paths: { vs: SCORG_ajax.scorg_vs } });
		emmetMonaco.emmetHTML();
		emmetMonaco.emmetCSS();
		emmetMonaco.emmetJSX();
		require(['vs/editor/editor.main'], function () {
			header_script = monaco.editor.create(document.getElementById('header_script'), {
				value: $("#SCORG_header_script").val(),
				language: 'html',
		        lineNumbers: true,
		        roundedSelection: false,
		        scrollBeyondLastLine: false,
		        readOnly: false,
		        glyphMargin: false,
		        vertical: 'auto',
		        horizontal: 'auto',
		        verticalScrollbarSize: 10,
		        horizontalScrollbarSize: 10,
		        theme: SCORG_ajax.vs_theme,
		        wordWrap: 'wordWrapColumn',
		        minimap: { enabled: false },
		        wordWrapColumn: 120,
		        wordWrapMinified: true,
		        wrappingIndent: "indent",
		        automaticLayout: true,
		        lineHeight: 19,
		        fontSize: editor_font_size,
			});
			$("#header_script").height(200);
			//window['emmet-monaco'].enableEmmet(header_script, window.emmet);
			header_script.onKeyUp(() => {
				$("#SCORG_header_script").val(header_script.getValue());
			});
			header_script.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
			    saveScorgScript(php_script.getValue(), header_script.getValue(), footer_script.getValue());
			});

			footer_script = monaco.editor.create(document.getElementById('footer_script'), {
				value: $("#SCORG_footer_script").val(),
				language: 'html',
		        lineNumbers: true,
		        roundedSelection: false,
		        scrollBeyondLastLine: false,
		        readOnly: false,
		        glyphMargin: false,
		        vertical: 'auto',
		        horizontal: 'auto',
		        verticalScrollbarSize: 10,
		        horizontalScrollbarSize: 10,
		        theme: SCORG_ajax.vs_theme,
		        wordWrap: 'wordWrapColumn',
		        minimap: { enabled: false },
		        wordWrapColumn: 120,
		        wordWrapMinified: true,
		        wrappingIndent: "indent",
		        automaticLayout: true,
		        lineHeight: 19,
		        fontSize: editor_font_size,
			});
			$("#footer_script").height(200);
			//emmetMonaco.emmetHTML(footer_script);
			//window['emmet-monaco'].enableEmmet(footer_script, window.emmet);
			footer_script.onKeyUp(() => {
				$("#SCORG_footer_script").val(footer_script.getValue());
			});
			footer_script.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
			    saveScorgScript(php_script.getValue(), header_script.getValue(), footer_script.getValue());
			});

			php_script = monaco.editor.create(document.getElementById('php_script'), {
				value: SCORG_replaceAll($("#SCORG_php_script").val(), 'REPLACE_BACKSLASH', '\\'),
				language: 'php',
		        lineNumbers: true,
		        roundedSelection: false,
		        scrollBeyondLastLine: false,
		        readOnly: false,
		        glyphMargin: false,
		        vertical: 'auto',
		        horizontal: 'auto',
		        verticalScrollbarSize: 10,
		        horizontalScrollbarSize: 10,
		        theme: SCORG_ajax.vs_theme,
		        wordWrap: 'wordWrapColumn',
		        minimap: { enabled: false },
		        wordWrapColumn: 120,
		        wordWrapMinified: true,
		        wrappingIndent: "indent",
		        automaticLayout: true,
		        lineHeight: 19,
		        fontSize: editor_font_size,
			});
			$("#php_script").height(200);
			//window['emmet-monaco'].enableEmmet(php_script, window.emmet);
			php_script.onKeyUp(() => {
				$("#SCORG_php_script").val(php_script.getValue());
			});
			php_script.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
			    saveScorgScript(php_script.getValue(), header_script.getValue(), footer_script.getValue());
			});
		});

Do you have any clue what Im doing wrong?

Support mdx

I’m interested in support for MDX.

I’ve already created basic language support to Monaco Editor.

I fiddled a bit locally and tried adding the mdx key using same consifuration javascript in

emmet-monaco-es/src/index.ts

Lines 13 to 27 in 9dfbeb0

 const LANGUAGE_MODES: { [id: string]: string[] } = { 

 html: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 jade: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 slim: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 haml: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 xml: ['.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 xsl: ['!', '.', '}', '*', '$', '/', ']', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 css: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 scss: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 sass: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 less: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 stylus: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 javascript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 typescript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], 

 }

But I couldn’t get it to work. Could you add it or help me troubleshoot this?

monaco `0.35.0` support

emmet-monaco-es 5.1.2 does not work with monaco 0.35.0

Browser sample?

I'm using Monaco directly in a flat browser file, is it possible to get an example of how to include this library in browser without npm dependency?

Thanks!

Use emmet on Tsx files.

Hi,

I'm trying to add the emmet-monaco-es dependency on a custom Monaco implementation that uses the monaco-editor dependency directly, without react.

I only found an example of use it on sandbox that only renders an HTML file. But I'm trying to use it with react files and does not work properly. The autocomplete only shows typescript values, not HTML tags.
How you see in the next image:

My implementation is the next one:

            noSemanticValidation: false,
            noSyntaxValidation: false
        });

        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
            experimentalDecorators: true,
            allowSyntheticDefaultImports: true,
            jsx: this.monaco.languages.typescript.JsxEmit.React,
            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
            allowNonTsExtensions: true,
            reactNamespace: 'React',
            // typeRoots: ["node_modules/@types"],
            target: monaco.languages.typescript.ScriptTarget.ES2020,
        })
        const instance =  monaco.editor.create(selector, {
            fontSize: 12,
            formatOnPaste: true,
            formatOnType: true,
            theme: vs-dark,
            scrollbar: {
                alwaysConsumeMouseWheel: false
            },
            automaticLayout: true,
            fixedOverflowWidgets: true,
            mouseWheelZoom: true
        });
      emmetHTML(this.monaco, ['html', 'tsx', 'jsx']);
      //emmetJSX(this.monaco, ['html', 'tsx', 'jsx']); // I test this option too.
      emmetJSX(this.monaco);
        ;`


My editor works well but the emmet functionality is not ok.

What more is needed to do?

	const LANGUAGE_MODES: { [id: string]: string[] } = {
	html: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	jade: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	slim: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	haml: ['!', '.', '}', ':', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	xml: ['.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	xsl: ['!', '.', '}', '*', '$', '/', ']', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	css: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	scss: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	sass: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	less: [':', '!', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	stylus: [':', '!', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	javascript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	typescript: ['!', '.', '}', '*', '$', ']', '/', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
	}