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 <notifications@github.com> 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 <#742 (comment)>, 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
}

[firstdorsal]

i am now using @mohsinxx365 setup like this

const completions: any[] = [
  {
    caption: "demo",
    snippet: `This is Another Snippet \${1:name}`,
    type: "snippet",
    meta: "test",
  },
  {
    caption: "demo2",
    snippet: `This is Another Snippet 2`,
    type: "snippet",
    meta: "test",
  },
];

setCompleters([
  {
    getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => {
      completions.forEach((i) => {
        completions.push({
          caption: i.caption,
          snippet: i.snippet,
          type: i.type,
          meta: i.meta,
          docHTML: null,
        });
      });
      callback(null, completions);
    },
    getDocTooltip: function (item: any) {
      if (item.type === "snippet" && !item.docHTML) {
        item.docHTML = ["<b>", item.caption, "</b>", "<hr></hr>", item.snippet].join("");
      }
    },
  },
]);

The getDocTooltip function will even make the tooltips reapear. I was missing those.