thlorenz / brace Goto Github PK
View Code? Open in Web Editor NEWπ browserify compatible version of the ace editor.
Home Page: http://thlorenz.github.io/brace/
License: MIT License
π browserify compatible version of the ace editor.
Home Page: http://thlorenz.github.io/brace/
License: MIT License
Great work, though I have a question regarding using it from nodejs.
I have a project like this
/client
/js
main.js
/server
server.js
/node_modules
/brace
/lib
/custom-ace-modes
my-mode.js
I have written my-mode.js
so it works when using browserify and building the main.js for the client-side though I want to be able to use the same my-mode.js
from my server.js
.
Do you know how to do this? When using require('brace') it complains on the window
variable.
This is more than a newbie question.
Even after I read the document I still have no idea how to use brace in webpack, it would be nice if someone could give me an example code snippet.
I tried to run the script to update to version 1.2.0 of the Ace Editor. I get a JS_Parse_Error
when trying to minify the workersrc/coffee.js
.
$ node --stack-trace-limit=1000 build/update.js
Cloning into '/Users/phil/tmp/brace/build/ace-build'...
Already up-to-date.
Note: checking out 'v1.2.0'.
...
/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:204
throw new JS_Parse_Error(message, filename, line, col, pos);
^
Error
at new JS_Parse_Error (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:196:18)
at js_error (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:204:11)
at croak (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:684:41)
at token_error (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:688:9)
at expect_token (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:701:9)
at expect (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:704:36)
at function_ (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:964:9)
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:815:24
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:727:24
at block_ (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1007:20)
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:980:25
at function_ (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:985:15)
at expr_atom (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1193:24)
at maybe_unary (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1363:19)
at expr_ops (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1398:24)
at maybe_conditional (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1403:20)
at maybe_assign (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1427:20)
at expression (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1446:20)
at expr_list (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1212:24)
at subscripts (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1346:30)
at subscripts (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1323:20)
at expr_atom (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1199:20)
at maybe_unary (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1363:19)
at expr_ops (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1398:24)
at maybe_conditional (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1403:20)
at maybe_assign (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1427:20)
at expression (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1446:20)
at simple_statement (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:894:55)
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:767:19
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:727:24
at /Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1474:23
at Object.parse (/Users/phil/tmp/brace/node_modules/uglify-js/lib/parse.js:1484:7)
at minify (/Users/phil/tmp/brace/build/stringify-workers.js:12:20)
at /Users/phil/tmp/brace/build/stringify-workers.js:27:40
at Array.forEach (native)
at module.exports (/Users/phil/tmp/brace/build/stringify-workers.js:21:6)
at workers (/Users/phil/tmp/brace/build/update.js:155:3)
at Object.<anonymous> (/Users/phil/tmp/brace/build/update.js:156:2)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
ace editor has been upgraded, can you upgrade the brace ?
Starting looking for an text editor in Javascript, found Ace but couldn't use since not compatible with browserify. Started looking after CommonJS editors found this. Seems great but missing one feature which is why I actually chose Ace, it has Vim mode.
Starting trying to implement the Vim mode but after including just the keyboard file, it requires a lot of other smaller files which in their turn, requires other files.
So instead of just including all files, I was gonna ask first if this is wanted at all? Maybe I should find another editor with Vim mode and compatible with CommonJS from the start.
What you think?
I'm using brace in an electron project, and it throws a warning every time it's run:
/my/project/path/node_modules/brace/index.js:3543
Could not load worker TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at TypeError (native)
at new WorkerClient (/my/project/path/node_modules/brace/index.js:16410:52)
at createWorker (/my/project/path/node_modules/brace/mode/svg.js:643:22)
at $startWorker (/my/project/path/node_modules/brace/index.js:8762:39)
at $onChangeMode (/my/project/path/node_modules/brace/index.js:8718:18)
at .<anonymous> (/my/project/path/node_modules/brace/index.js:8699:22)
at exports.loadModule (/my/project/path/node_modules/brace/index.js:3695:26)
at setMode (/my/project/path/node_modules/brace/index.js:8688:16)
at HTMLDocument.<anonymous> (/my/project/path/lib/scripts/main.js:98:25)
at i (/my/project/path/vendor/jquery.min.js:2:27451)
The line it's pointing at is https://github.com/thlorenz/brace/blob/master/index.js#L16410
var blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
I'm assuming there's an issue with the window object in electron.
We started experiencing a strange problem with the ACE Editor in our web app. The line numbers would not fully rendering themselves, errors are thrown during gutter cell creation, etc. I thought the problem was related to specific machine/environment issues...but have since ruled that out when others began having the same issues. I then started digging into the problem and saw that it seems to be a problem with the dom.createElement() method in the index.js, where sometimes this function returns a null...which then gets passed down to the appendChild method during the cell.update method, which in turn blows up trying to call the this method on a null object.
In addition, I uninstalled latest stable version of Chrome to ensure it's not something specific to my machine...and then installed a bunch of different versions of Chrome...and it seems this problem manifests itself in version 54 and 55, but works fine on others. Here are the specifics.
- Does Not Work
- Version 54.0.2840.98 stable current (64-bit)
- Version 54.0.2840.71 stable older (64-bit)
- Version 55.0.2883.59 beta (64-bit)
- Works
- Version 57.0.2931.0 canary (64-bit)
- Version 56.0.2924.3 dev (64-bit)
- Version 53.0.2785.116 (64-bit)
- Version 51.0.2704.106 stable older (64-bit)
Attached is an image that should capture the specifics of what I'm mentioning. Could this be a race condition when rendering a large number of cells? What would cause the dom.createElement to return null?
Lastly, to make this even harder to troubleshoot, others in the office can run the same stable version of Chrome as the others of us having this issue, and it works fine....Β―_(γ)_/Β―
This is a tough one to figure out...
Thanks.
need to upgrade [email protected]
For our project, we are using browserify and brace, however, we would really like to use a different version of ace (in our github repo). Is there any way to edit the update.js script, or modify the npm package to change the exec('git clone git://github.com/ajaxorg/ace-builds.git ' + buildroot);
command to exec('git clone git://github.com/gracelang/ace/fix-brackets/build ' + buildroot);
? Cloning this repository and manually changing the url hasn't worked, since npm overwrites the "brace" directory, or throws an error due to it being a github repo. This issue is complicated by the fact that the npm build of brace
does not include the build
directory. If this isn't something that is feasible, or even possible βΒ sorry for the extra issue!
Can you provide an example for how to include emmet. When doing require('brace/ext/emmet')
this appears to just disable tabbing. Really appreciate any help. Thanks.
When selecting markdown as mode browserify throws a syntax error:
SyntaxError: Line 2324: Comprehension Error while parsing /Users/maartendings/Desktop/electron/node_modules/brace/mode/markdown.js
Below is how ace is initiated
var ace = require('brace');
require('brace/mode/markdown');
require('brace/theme/github');
var editor = ace.edit('markdown-editor');
editor.getSession().setMode('ace/mode/markdown');
editor.setTheme('ace/theme/github');
Hi, sorry if this is not an actual issue, but I can't figure it out from your documentation and have been trying for hours now...
I cannot require the ace Range object in order to use text selection in the browser. The nearest help I can get is per this post: http://stackoverflow.com/questions/26428573/ace-editor-set-text-selection in regards to the original Ace module.
Converting this into require('brace/range').Range or anything similar does not work - brace/range, brace/Range etc is not found.
I have been through the brace source code looking for all mentions of Range and trying to match up the require syntax for 'brace/mode' with the Range exports module I see there, but am having no success...can you help? Or does Brace not directly pass through all modules from Ace, and so anything to do with Range is missing?
Any plan for autocomplete addition like in this example?
http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview
For both enableBasicAutocompletion
and enableLiveAutocompletion
.
Hello, I am trying to get Ace.Tern (https://github.com/sevin7676/Ace.Tern) to work but it never seems to work. I am trying to get this to work with webpack. I would love to know if anyone has had any success on getting this to work.
possibly related to #58
Using brace 0.8.0, trying to search by pressing ctrl-f throws errors:
ext-searchbox.js:1 Uncaught SyntaxError: Unexpected token <
brace:10749 Uncaught TypeError: Cannot read property 'Search' of undefined
the ext-searchbox.js loaded by the browser looks like html, which explains the syntax error.
brace:10749 is config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor)})
so the error in ext-searchbox.js is making it return undefined.
when i tried to open something.php:
Could not load worker TypeError: Cannot read property 'split' of undefined
at exports.moduleUrl (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:3657:21)
at new WorkerClient (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:16395:41)
at createWorker (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:13307:22)
at $startWorker (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:8762:39)
at $onChangeMode (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:8718:18)
at eval (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:8699:22)
at exports.loadModule (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:3695:26)
at setMode (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:8688:16)
at Editor.componentDidMount (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:75:15)
at CallbackQueue._assign.notifyAll (eval at <anonymous> (http://localhost:9000/assets/main.js:1:0), <anonymous>:66:22)
I've been using brace 0.9.0 with the swift mode and it works great. However, I've been trying to upgrade to 0.9.1 but I get the following error:
swift.js:363 Uncaught TypeError: Cannot read property 'CstyleBehaviour' of undefined(β¦)
It looks like Ace 1.2.6 has moved this CstyeBehaviour into a separate file, which may be missing in brace 0.9.1?
Hello,
when I require('brace/ext/beautify') return empty object.
I am doing something wrong?
thanks
On ctrl+F I get this error
GET http://localhost:7890/ext-searchbox.js
also happens on brace demo
How can I update to ace 1.1.7? Couldn't figure out how to run https://github.com/thlorenz/brace/blob/master/build/update.js. Could you provide more info here please?
Ok, so the webapp I'm working on has 3 text editors, most of the configuration is the same for all of them but there are a few options that are passed via an object. My problem is that when I try to insert anything other than a string in require.
var ace = require('brace');
require('brace/theme/monokai');
// works
var ace = require('brace');
require(this.props.theme);
// `Uncaught Error: Cannot find module 'brace/theme/monokai'`
even this doesn't work:
var ace = require('brace');
require('brace/theme/' + 'monokai');
// `Uncaught Error: Cannot find module 'brace/theme/monokai'`
When creating a javascript editor with enableSnippets enabled, ace tries to load snippets/javascript.js from the server but it doesn't exist so an exception is raised.
Adding brace/snippets folder from the ace repository, and requiring this file in the code, solves this problem.
Am I missing something? or the snippets should be entered to brace?
When I add the component to my app, it shows me 2 error messages without any further details.
Both somehow seem to be related to
../ brace / modes / {mode}.js
Is that a bug or am I missing s.th.?
There seems to be a problem with including ace/ext/searchbox
in the ctrl-f keybinding. I tried requiring brace/ext/searchbox
to fix the problem but no such module exists.
I know how to formatting json:
JSON.stringify(JSON.parse(value), null, '\t')
But how can i formatting python???
Thank you.
When line is longer than the width of the editor this end of the line get's moved to the next line covering the text from the next line. When using setUseWrapMode(true)
complete line moves (making empty line) to overlap the next line.
I am aware that this is not the ace editor
issue tracker, but you might know if there is an update that is not pulled or a platform issue.
I have a react application that is using a bootstrap modal. (not sure if the modal is important or not)
When the editor is off the bottom of the screen because of the height of dialog, when the editor get's focus, the entire modal dialog/page scrolls to the top of the screen, putting the editor off the bottom of the screen.
I tracked the problem down to the following line:
line 1959 in index.js: text.style.position = "fixed";
If I comment this line out, the scrolling to the top of the page seems to stop, and I can not detect any unusual or bad side effects.
Here is the full block of code:
this.focus = function() {
if (tempStyle) return text.focus();
var top = text.style.top;
text.style.position = "fixed"; // <--- this line causes the page to scroll to the top when the editor get's focus
text.style.top = "0px";
text.focus();
setTimeout(function() {
text.style.position = "";
if (text.style.top == "0px")
text.style.top = top;
}, 0);
};
If it's possible, can this be looked into and fixed in the next update? I have it commented out now in my code, but if I ever do an update or re-install I will lose the change. I am also not sure what the side effects, if any, would be.
Cheers, and good work!
Dave
I have the following code with ACE which I want to migrate to brace:
const Vim = ace.require('ace/keyboard/vim').CodeMirror.Vim
Vim.defineEx('write', 'w', (cm, input) => {
console.log('write')
})
I cannot figure out the solution because require('brace/keybinding/vim')
seems like an empty object
ReferenceError: window is not defined
In my case i'm doing server side rendering of components. my component containing ace is included int the require() tree so it executes all requires, even though i'm not server-side rendering the ace component
Should this version number be pinned to the version of the ace editor? I note that they seem to be on 1.0.0 https://github.com/ajaxorg/ace/blob/master/package.json but this is only on 0.1.3
First off, awesome tool!
I am trying to get tern.js work with brace and I am having trouble getting it to work. Is there a way to have the following:
https://github.com/sevin7676/ace/tree/master/lib/ace/tern
Available for consumption in brace? I don't know how to port these files over to what brace needs.
It'd be great to update ace to the latest version (1.2.2
).
See the following line.
I may try and fix this... but won't have time for a while.
When using brace inside of a webpack build, it's parser will replace this:
var _define = function(module, deps, payload) {
if (typeof module !== 'string') {
if (_define.original)
_define.original.apply(window, arguments);
else {
console.error('dropping module because define wasn\'t a string.');
console.trace();
}
return;
}
with this
var _define = function(module, deps, payload) {
if (true) { // I've been changed!!!
if (_define.original)
_define.original.apply(window, arguments);
else {
console.error('dropping module because define wasn\'t a string.');
console.trace();
}
return;
}
This is in line 51 of index.js
in the root of the project. There might be other possible errors once this is resolved.
A proposed quick fix is to rename the module
variable with something else (since webpack treats that as a pseudo keyword in it's parser).
w3c-blob isn't working for me on Chome. Had to comment it out. Instead using the standard Blob api works :).. So i think the w3c-blob api should be removed or at least first a check for standard Blob api should be added..
The lastest version ace fix this bug
ajaxorg/ace#3099
hoge1e3/jslesson@7da745d
I was having this issue. Looks like brace need to be updated to newer version.
Is there a reason that the HTML worker is excluded from build/workers.js
? (Or, more precisely, not explicitly included?)
I'm getting an error (Cannot read property 'split' of undefined at Object.ace.define.exports.moduleUrl
) when I set the mode
of my editor to html
. After some debugging, I realized that the HTML worker is not included in the worker
directory. This appears to be because HTML is not included in the workers.supported
object. Is that an oversight, or did you intentionally leave it out for some reason?
I'm currently working on a PR to add Vim keybinding support (per #21, since I have the same need for it). I'd be happy to open an additional PR to address this HTML worker issue as well, but I wanted to ask first.
Thanks!
First of all, great project!
I am running into a little trouble while trying to get snippets and autocomplete work.
To simplify the problem, running the code below will show undefined
for the output, in addition to generating an error GET file://.../brace/example/snippets/javascript.js net::ERR_FILE_NOT_FOUND
var ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');
var langTools = require("brace/ext/language_tools");
console.log(langTools.addCompleter);
How would I go about solving this?
Thank you!
Hi! I got this error with browserify:
node_modules/brace/index.js:1663
if (window.postMessage && !useragent.isOldIE) {
^
ReferenceError: window is not defined
at /Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:1663:5
at lookup (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:141:31)
at _acequire (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:75:23)
at req (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:138:24)
at /Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:18213:13
at lookup (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:141:31)
at _acequire (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:83:23)
at Object.acequire (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:93:26)
at /Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:18279:21
at Object.<anonymous> (/Users/mboutin2/Desktop/beverage/node_modules/brace/index.js:18286:15)
Brace has this behavior currently:
(function() {
var brace = require('brace');
console.log(window.ace === brace); // true
})();
It'd be fantastic if brace
could avoid adding ace
to the window
automatically.
i have this editor config
require("brace/ext/language_tools");
require("brace/mode/xml");
require("brace/theme/monokai");
var langTools = window.ace.acequire("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/xml");
var mode = editor.getSession().getMode();
var AceRange = window.ace.acequire("ace/range").Range;
langTools.setCompleters([rhymeCompleter]);
// if add this, ace can not load file snippets/xml.js
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: false,
enableSnippets: true
});
I tried to include a custom mode, but no luck I get following browserify errors:
Error: Cannot find module './folding/cstyle' from '/Users/tobi/Projects/js/vizard/js/lib'
Error: Cannot find module 'ace/lib/oop' from '/Users/tobi/Projects/js/vizard/js/lib'
I trief updating the require path in various forms, but without luck. Any ideas how to resolve that?
Thx Tobi
P.S: Custom Modes are explained here: http://ace.c9.io/#nav=higlighter
I am using brace from react-ace on Chrome browser with webpack and my app is broken due to global is undefined. You can reproduce it with my project https://github.com/networknt/react-schema-form
git clone [email protected]:networknt/react-schema-form.git
npm install
npm start
Then hit the url from your browser.
http://localhost:8080/webpack-dev-server/
The line of code failed.
if (!global.document)
return "";
Here is the line of the code I have changed as a work around. Just check if global is undefined before calling global.document.
if (!global || !global.document)
return "";
Does anyone know what is wrong? Is there any better workaround? Can this be fixed in the next release?
Thanks.
Hi,
I have an options page, where I don't actually need an editor, I just want to get a list of supported themes, but I couldn't get it to work. Any help is appreciated.
var themeList = require('brace/ext/themelist');
console.log(themeList); // Uncaught ReferenceError: ace is not defined
Even including the whole editor didn't work:
var ace = require('brace');
var themeList = require('brace/ext/themelist');
console.log(themeList); // {}
My ctrl-f search box has unreadable white text on white background, so I need to modify the text color.
As stated in this thread, in ace I could do: require("ace/lib/dom").importCssString(".ace_search_field{color: black}")
, but how do I do the same with brace? I don't see the original ace files exposed anywhere for me to import.
ace issue #3099
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.