React-ace: 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 [e-mail]
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";

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

[mohsinxx365]

I recommend you to use the approach I provided because it is more consice (Short). And understandable.

[mohsinxx365]

You can remove your previous code

[mohsinxx365]

I don’t think it will cause any problem

[orzzt]

I don’t think it will cause any problem

ok.Thank you very much.

[mohsinxx365]

np

[piotrkochan]

@mohsinxx365 what about snippets with code with placeholders like:

values: [${1:values}]

[mohsinxx365]

There is some mechanism for that as well, as far as I remember

[mohsinxx365]

I will check and tell soon

[danilafrolov]

There is some mechanism for that as well, as far as I remember

@mohsinxx365 any update on this?
thank you anyway.

[fkoehler42]

@danilafrolov @piotrkochan using the implementation described above you can use placeholders like this (example of lua function):

{
    caption: 'function',
    snippet: 'function ${1:name}(${2:arguments})\n\t${3:body}\nend\n',
    meta: 'snippet', //display the keyword "snippet" next to your snippet title in the editor pop-up
}