How to add snippets manually without brace?

[magierska]

Hi, I want to add my own snippets to AceEditor. I found this: https://github.com/denvash/react-json-snippet-editor . But, I've read, that Brace is no longer supported for React Ace. How should I add them now?

My component

<AceEditor
        placeholder="Type here..."
        mode="json"
        theme="monokai"
        id="blah2"
        onChange={this.onTextChange}
        fontSize={14}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        value={this.state.text}
        editorProps={{ $blockScrolling: true }}
        enableBasicAutocompletion={true}
        enableLiveAutocompletion={true}
        enableSnippets={true}
/>

[piotrkochan]

bump

[mohsinxx365]

i have the same issue here

[JesseChua94]

Also having this issue. Tried just testing with the included python snippet and it did not work.

import React, {Component} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/python";
import "ace-builds/src-noconflict/theme-monokai";

<AceEditor
          mode="python"
          theme="monokai"
          onChange={this.onChange}
          name="editor"
          enableSnippets={true}
          editorProps={{ $blockScrolling: true }}
        />

[piotrkochan]

That's one thing, it is unclear how to add custom snippets

pon., 23 mar 2020, 21:22 użytkownik Jesse Chua [email protected] napisał:

Also having this issue. Tried just testing with the included python snippet and it did not work.

import React, {Component} from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/snippets/python"; import "ace-builds/src-noconflict/theme-monokai";

<AceEditor mode="python" theme="monokai" onChange={this.onChange} name="editor" enableSnippets={true} editorProps={{ $blockScrolling: true }} />

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/securingsincity/react-ace/issues/742#issuecomment-602834865, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABK7F6NVYNF3TFKAEWD3OE3RI7AIXANCNFSM4JNTXATQ .

[mohsinxx365]

I got how to add snippets I will send the code sample once I open my pc. It's pretty straightforward.

[mohsinxx365]

I made a codesandbox demo for you on how to add Snippets : https://codesandbox.io/s/react-acesnippets-sk2uq?file=/src/App.js

[mohsinxx365]

Tell me if it was helpful.

[mohsinxx365]

If u get an error like unexpected token < . in code sandbox. Just reload it | close the error. It is just an issue with code sandbox !!!

[JesseChua94]

Hey @mohsinxx365 your demo doesn't seem to be working on refresh. Closing the unexpected token window just reveals an empty editor.

[mohsinxx365]

I don't know why the problem occurs.for me it worked . I will check it out one again Try it your app. I sure it will work.

[mohsinxx365]

I will try to fix the codesandbox issue. So that anyone who has the problem can refer to it . For now u can just copy the code and try it in your app. I am sure it will work.

[mohsinxx365]

Try typing double underscore (__) in the editor u will see a snippet named info. It will work .

[mohsinxx365]

Then just press enter

[mohsinxx365]

Let me know if it worked

[JesseChua94]

It looks like it works now after completing the double underscore! Is there a way to automatically show the snippet without having to autocomplete the double underscores?

[mohsinxx365]

You can just change the snippet prefix to not use (__). The snippets are stored in the completionData file

[mohsinxx365]

So did it work ?

[phucproutt]

Hello I tried to go to the codesandbox link but it seems that the link is not working anymore?

[mohsinxx365]

It's a problem with codesandbox . Just copy the code and try it will work.

[phucproutt]

No I didn't see any codes. I clicked the link and get the message "Not Found We could not find the sandbox you're looking for"

[mohsinxx365]

I will send a new link soon

[Angelus1383]

Is there some update about it?

[gresendesa]

Looking forward to see this issue solved.

[mohsinxx365]

Done . This is the link to the codesandbox with the demo and some documentation : https://codesandbox.io/s/react-acesnippets-sk2uq?file=/src/App.js

[mohsinxx365]

If it shows Unexpected token '<' Just close the error overlay and continue . It is a problem with codesandbox .

[mohsinxx365]

Tell me if it helped you

[orzzt]

Tell me if it helped you

good!

[mohsinxx365]

@orzzt nice

[orzzt]

var langTools = ace.acequire('ace/ext/language_tools'); langTools.addCompleter({ getCompletions: function (editor, session, pos, prefix, callback) { if (prefix.length === 0) { return callback(null, []); } else { return callback(null, [ { name: 'name', value: 'value', caption: 'caption', meta: 'snippet', type: 'local', message: 'message', score: 1000 // }, { caption: 'snippet', snippet:This is the way to implement snippets in the react ace editor And There is a bonus aswell 👌 . Do you see that customTheme.scss file you can customize the theme there by just customizing the css variables in it . , type: 'snippet' } ]); } } });

This is my previous code modification. I don't know what will happen

[orzzt]

@orzzt nice

I used the previous code to modify it and found it can be used, but I don't know if there will be other problems