code-editor icon indicating copy to clipboard operation
code-editor copied to clipboard

More Usage Examples please

Open nawlbergs opened this issue 9 months ago • 2 comments

Your Readme basically only has <code-editor [(ngModel)]="value" /> for a usage example.

Would be nice to just thro in a snippet of how to.... for instance... add a specific language you would like to use.

I had to use chatGPT to figure it out... and im not sure I even did it correctly..

is this right?

import { CodeEditor } from '@acrodata/code-editor';
import { LanguageDescription } from '@codemirror/language';
import  { javascript } from '@codemirror/lang-javascript';
import  { html } from '@codemirror/lang-html';

// IN TEMPLATE

<code-editor [ngModel]="code()" [languages]="languages"  [language]="'javascript'"  />

// IN CONTROLLER

languages = [
    LanguageDescription.of({ name: 'javascript', support: javascript({ typescript: true }) }),
    LanguageDescription.of({ name: 'html', support: html() }),
]

nawlbergs avatar Apr 15 '25 19:04 nawlbergs

You can check the CodeMirror repo to learn more details. https://github.com/codemirror/language-data/blob/main/src/language-data.ts

If I have more enough time, I will update the docs.

nzbin avatar Apr 16 '25 02:04 nzbin

up

AntonBobylev avatar Sep 16 '25 21:09 AntonBobylev