Code editor + completion (CodeMirror / ACE)

Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Code editor + completion (CodeMirror / ACE)

Post by eddy »

- code editor features: code completion, syntax coloring and more...
- supported language (JS,XML,HTML,VB,PHP,....)
- using CodeMirror plugin : http://codemirror.net/
- This plugin is used by JSBin sandbox: http://jsbin.com

Code: Select all

CompilerIf #PB_Compiler_Debugger
  Debug "Disable SpiderBasic debugger"
CompilerEndIf

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_FileName, dataType:v_FileType, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_OnLoadFunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_OnLoadFunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.i LoadCSS(FileName.s, *OnLoadFunction)
  Protected jqxhr=LoadAsynchronously(FileName, *OnLoadFunction, "text")
  !return v_jqxhr.done(function(data, status, jqxhr) { 
  !   $('<style></style>').appendTo('head').html(data);
  !})
EndProcedure

; *****************************
; Code Mirror
; *****************************

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  Static k
  k+1
  Select k
    Case 1 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/show-hint.js", @Loading())
    Case 2 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/javascript-hint.js", @Loading()) 
    Case 3 : LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/mode/javascript/javascript.js", @Loading())
    Case 4 : LoadCSS("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.css", @Loading())
    Case 5 : LoadCSS("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/package/addon/hint/show-hint.css", @Loading())      
    Default 
      !var myCodeMirror = CodeMirror(document.body, { lineNumbers: true
      !, extraKeys: {"Ctrl-Space": "autocomplete"}
      !, value: 'function myScript(){return 100;}\n'
      !, mode:  'javascript'
      !});
  EndSelect 
EndProcedure 

LoadScript("http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.js", @Loading())
Last edited by eddy on Fri May 02, 2014 5:35 pm, edited 2 times in total.
User avatar
Peter
Posts: 888
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Code editor + completion (CodeMirror)

Post by Peter »

my favourite code editor is Ace (http://ace.c9.io/#nav=about):

Code: Select all

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.s GetTestSource()
  
  Protected ReturnValue.s = ""
  
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  
  ProcedureReturn ReturnValue
  
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  Protected TestSource.s = GetTestSource()
  
  !var selector = $("<div id='ace' style='position:absolute;top:10px;left:10px;width:400px;height:300px;border:1px solid black' />");
  !$("body").append(selector);
  !var editor = ace.edit("ace");
  !editor.getSession().setMode("ace/mode/javascript");
  !editor.getSession().setValue(v_testsource);
  !editor.focus();
  
EndProcedure 

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())
Greetings ... Peter

// Edit: updated the code to the current SpiderBasic-Version
Last edited by Peter on Mon May 08, 2017 6:58 am, edited 1 time in total.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Code editor + completion (CodeMirror)

Post by eddy »

I works in debug mode.
Interesting... I'll test it.
skinkairewalker
Posts: 104
Joined: Tue Jun 14, 2016 7:17 pm

Re: Code editor + completion (CodeMirror)

Post by skinkairewalker »

Peter wrote:my favourite code editor is Ace (http://ace.c9.io/#nav=about):

Code: Select all

Procedure.i LoadAsynchronously(FileName.s, *OnLoadFunction, FileType.s)
  !return $.ajax({ url:v_filename, dataType:v_filetype, beforeSend:function(jqxhr, settings) { jqxhr.url = settings.url; } })
  !.done(function(data, status, jqxhr) { p_onloadfunction(data,status,jqxhr.url); })
  !.fail(function(jqxhr, status, errorThrown) { p_onloadfunction('',status,jqxhr.url,jqxhr.status,errorThrown); });
EndProcedure 

Procedure LoadScript(FileName.s, *OnLoadFunction)
  ProcedureReturn LoadAsynchronously(FileName, *OnLoadFunction, "script")
EndProcedure

Procedure.s GetTestSource()
  
  Protected ReturnValue.s = ""
  
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  
  ProcedureReturn ReturnValue
  
EndProcedure

Procedure Loading(content.s, status.s, url.s, errorCode, error.s)
  
  If status<>"success"
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug "Error code: "+errorCode 
    Select errorCode 
      Case 401 : Debug "Error: Authentification Failed"
      Case 404 : Debug "Error: File Not Found"
      Case 500 : Debug "Error: Server Failed"
      Case 504 : Debug "Error: Server Timeout" 
      Default : Debug "Error: "+error
    EndSelect 
    Debug ""
    ProcedureReturn
  EndIf 
  
  Protected TestSource.s = GetTestSource()
  
  !var selector = $("<div id='ace' style='position:absolute;top:10px;left:10px;width:400px;height:300px;border:1px solid black' />");
  !$("body").append(selector);
  !var editor = ace.edit("ace");
  !editor.getSession().setMode("ace/mode/javascript");
  !editor.getSession().setValue(v_testsource);
  !editor.focus();
  
EndProcedure 

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())
Greetings ... Peter

// Edit: updated the code to the current SpiderBasic-Version

how can i change to my own sintax highlight ?
User avatar
Danilo
Posts: 51
Joined: Wed Feb 26, 2014 7:11 am

Re: Code editor + completion (CodeMirror / ACE)

Post by Danilo »

Updates for SpiderBasic 2.30

CodeMirror:

Code: Select all

;
; https://forums.spiderbasic.com/viewtopic.php?f=12&t=144
;
; Load CodeMirror editor ( https://codemirror.net )
;
; 2014/05/02 first version by eddy
; 2020/01/05 updated to SB 2.30 by Danilo
;

;*****************************
; Code Mirror
;*****************************

Prototype EntryPoint()

Global _main.EntryPoint
Global CodeMirror

Procedure LoadCodeMirrorAddons(URL$, Success)
  If Success = #False
    Debug "Loading: FAILED"
    Debug "File: "+URL$
    Debug ""
    ProcedureReturn
  EndIf 
  
  Static k
  k+1
  Select k
    Case 1 : LoadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/addon/hint/show-hint.js", @LoadCodeMirrorAddons())
    Case 2 : LoadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/addon/hint/javascript-hint.js", @LoadCodeMirrorAddons()) 
    Case 3 : LoadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/mode/javascript/javascript.js", @LoadCodeMirrorAddons())
    Case 4 : LoadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.css", @LoadCodeMirrorAddons(),#PB_Script_CSS)
    Case 5 : LoadScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/addon/hint/show-hint.css", @LoadCodeMirrorAddons(),#PB_Script_CSS)      
    Default
        !v__main();
  EndSelect 
EndProcedure 

Procedure InitCodeMirror( callback )
    !require([ "https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.js" ], function(cm) {
    !  //console.log("CodeMirror loaded.");
    !  v_codemirror = cm;
       _main = callback
       LoadCodeMirrorAddons("https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.1.0/codemirror.js", #True)
    !});
EndProcedure

;*****************************

Procedure Main()
      !var myCodeMirror = v_codemirror(document.body, { lineNumbers: true
      !, extraKeys: {"Ctrl-Space": "autocomplete"}
      !, value: 'function myScript() {\n\treturn 100;\n}\n'
      !, mode:  'javascript'
      !});
      Debug "CodeMirror loaded."
EndProcedure

InitCodeMirror( @Main() )

ACE:

Code: Select all

;
; https://forums.spiderbasic.com/viewtopic.php?f=12&t=144
;
; Load ACE editor ( http://ace.c9.io )
;
; 2014/05/02 first version by Peter
; 2017/05/08 updated the code to the current SpiderBasic-Version by Peter
; 2020/01/05 updated to SB 2.30 by Danilo
;
Procedure.s GetTestSource()
  
  Protected ReturnValue.s = ""
  
  ReturnValue + "function ValidFunction() {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "function InvalidFunction( {" + #CRLF$
  ReturnValue + #CRLF$
  ReturnValue + "}" + #CRLF$
  
  ProcedureReturn ReturnValue
  
EndProcedure

Procedure Loading(url.s, status)
  
  If status<>#True
    Debug "Loading: FAILED"
    Debug "File: "+url
    Debug ""
    ProcedureReturn
  EndIf 
  Protected TestSource.s = GetTestSource()
  
  !var selector = $("<div id='ace' style='position:absolute;top:10px;left:10px;width:400px;height:300px;border:1px solid black' />");
  !$("body").append(selector);
  !var editor = ace.edit("ace");
  !editor.getSession().setMode("ace/mode/javascript");
  !editor.getSession().setValue(v_testsource);
  !editor.focus();
  
EndProcedure 

LoadScript("//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js", @Loading())
cya,
...Danilo
Post Reply