Usage with handlebars?

[louis030195]

Hello!

It's not so clear how to use this lib with handlebars, if it is even possible, I see codemirror support it so why not?

I couldn't find it in import { handlebars } from '@codemirror/legacy-modes/mode/handlebars';?

Thanks a lot

[jaywcjlove]

@louis030195

import CodeMirror from '@uiw/react-codemirror';
import { StreamLanguage } from '@codemirror/language';
import { handlebars } from '@codemirror/legacy-modes/mode/handlebars';

const codeStr = `code string....`;

export default function App() {
  return (
    <CodeMirror
      value={codeStr}
      height="200px"
      extensions={[StreamLanguage.define(handlebars)]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

[louis030195]

Module not found: Error: Can't resolve '@codemirror/legacy-modes/mode/handlebars' ?

package.json

...
  "dependencies": {
    ...
    "@codemirror/language": "^6.0.0",
    "@codemirror/legacy-modes": "^6.0.0",
...

[jaywcjlove]

@louis030195 Example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-language-rz4rh?fontsize=14&hidenavigation=1&theme=dark

[Miltonbhowmick]

@louis030195

import CodeMirror from '@uiw/react-codemirror';
import { StreamLanguage } from '@codemirror/language';
import { handlebars } from '@codemirror/legacy-modes/mode/handlebars';

const codeStr = `code string....`;

export default function App() {
  return (
    <CodeMirror
      value={codeStr}
      height="200px"
      extensions={[StreamLanguage.define(handlebars)]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

This solves my problem!

[tslater]

@louis030195 I'm having the same issue. Did you ever figure out how to import?

[tslater]

If I understand correctly, this might be a v5 vs v6 issue? v6 doesn't have handlebars support maybe?

[lenqwang]

Is seems v6 does not support handlebars, so how can v6 support handlebars?

[jaywcjlove]

@tslater @lenqwang https://github.com/uiwjs/react-codemirror/issues/333#issuecomment-1238887212

[lenqwang]

@tslater @lenqwang https://github.com/uiwjs/react-codemirror/issues/333#issuecomment-1238887212

I don't find the handlebars module file

[tslater]

I don't think there is any good way to use it on v6 yet. You'd have to implement it yourself.

[jaywcjlove]

@lenqwang @tslater https://codemirror.net/5/mode/handlebars/index.html Is it this one? I think the definition is also very simple.

[lenqwang]

Yes, I had to implement it myself. Although I searched the entire internet. However, I am very curious why the official has not provided an implementation of handlebars.

[jaywcjlove]

• https://discuss.codemirror.net/t/handlebars-in-v6/5941
• https://stackblitz.com/edit/node-rwuxbu?file=src%2Fsyntax.grammar,src%2Fhighlight.ts
• https://codemirror.net/examples/mixed-language/

[lenqwang]

Thanks a lot, These links are very useful to me