Archive

Archive for May 14, 2016

Porting ACE to Smart Pascal

May 14, 2016 2 comments

People have been asking me for this since the dawn of time, and while I figured someone would make a package for this – I guess a small demonstration is in order.

What is Ace?

Ace is basically a code editor written in Javascript, more or less the same as SynEdit is for Delphi. Except it looks better and runs on the JavaScript Virtual Machine and Document Object Model.
Faster and better than SynEdit, with highlighting and syntax checking!

Faster and better than SynEdit, with highlighting and syntax checking!

Ok, here is how to get ACE into your Smart Mobile Studio codebase:
var LEditor: TW3AceEditor;
LEditor := TW3AceEditor.Create(self);
LEditor.SetBounds(32,33,400,250);
LEditor.Text := "This is so cool!";

Note that the property EditorHandle is the direct reference to the Ace editor instance. So now you can go to the ACE docs and call the functions you need via that handle.

Right, here is the whole shabam — you may want to isolate the different syntax highlighters and themes in their own units, because it takes a few seconds to load all the files. A splash screen should make that look good.

Oh, and remember to remove this from your stylesheet or the cursor will calculate wrong!

font-family: “Helvetica Neue”, Helvetica, sans-serif;

unit SmartCL.AceEditor;

interface

uses 
  system.types,
  system.types.convert,
  SmartCL.Components,
  SmartCL.System;

type

  TW3AceEditor = class(TW3CustomControl)
  private
    FEditor:  THandle;
  protected
    procedure InitializeObject;override;
    procedure FinalizeObject;override;
    procedure Resize;override;
  public
    property  EditorHandle: THandle read FEditor;
    property  Text: string read ( FEditor.getValue() ) write ( FEditor.setValue(Value) );
  end;


implementation


procedure TW3AceEditor.InitializeObject;
var
  LEditor: THandle;
  LId:  string;
begin
  inherited;

  Handle.ReadyExecute( procedure ()
    begin
      LId := TagId;
      asm
        @LEditor = ace.edit(@LId);
        (@LEditor).setTheme("ace/theme/monokai");
        (@LEditor).getSession().setMode("ace/mode/pascal");
      end;
      FEditor := LEditor;
      TW3Dispatch.DelayedDispatch( procedure ()
        begin
          FEditor.resize();
        end,100);
    end);
end;

procedure TW3AceEditor.Resize;
begin
  inherited;
  if (FEditor) then
    FEditor.resize();
end;

procedure TW3AceEditor.FinalizeObject;
begin
  if (FEditor) then
  begin
    // Blank out the editor, this kills the instance
    FEditor := TVariant.CreateObject;
    FEditor := unassigned;
  end;
  inherited;
end;


{$R "ace.js"}
{$R "ext-beautify.js"}
{$R "ext-chromevox.js"}
{$R "ext-elastic_tabstops_lite.js"}
{$R "ext-emmet.js"}
{$R "ext-error_marker.js"}
{$R "ext-keybinding_menu.js"}
{$R "ext-language_tools.js"}
{$R "ext-linking.js"}
{$R "ext-modelist.js"}
{$R "ext-old_ie.js"}
{$R "ext-searchbox.js"}
{$R "ext-settings_menu.js"}
{$R "ext-spellcheck.js"}
{$R "ext-split.js"}
{$R "ext-static_highlight.js"}
{$R "ext-statusbar.js"}
{$R "ext-textarea.js"}
{$R "ext-themelist.js"}
{$R "ext-whitespace.js"}
{$R "keybinding-emacs.js"}
{$R "keybinding-vim.js"}
{$R "mode-abap.js"}
{$R "mode-abc.js"}
{$R "mode-actionscript.js"}
{$R "mode-ada.js"}
{$R "mode-apache_conf.js"}
{$R "mode-applescript.js"}
{$R "mode-asciidoc.js"}
{$R "mode-assembly_x86.js"}
{$R "mode-autohotkey.js"}
{$R "mode-batchfile.js"}
{$R "mode-c_cpp.js"}
{$R "mode-c9search.js"}
{$R "mode-cirru.js"}
{$R "mode-clojure.js"}
{$R "mode-cobol.js"}
{$R "mode-coffee.js"}
{$R "mode-coldfusion.js"}
{$R "mode-csharp.js"}
{$R "mode-css.js"}
{$R "mode-curly.js"}
{$R "mode-d.js"}
{$R "mode-dart.js"}
{$R "mode-diff.js"}
{$R "mode-django.js"}
{$R "mode-dockerfile.js"}
{$R "mode-dot.js"}
{$R "mode-eiffel.js"}
{$R "mode-ejs.js"}
{$R "mode-elixir.js"}
{$R "mode-elm.js"}
{$R "mode-erlang.js"}
{$R "mode-forth.js"}
{$R "mode-ftl.js"}
{$R "mode-gcode.js"}
{$R "mode-gherkin.js"}
{$R "mode-gitignore.js"}
{$R "mode-glsl.js"}
{$R "mode-gobstones.js"}
{$R "mode-golang.js"}
{$R "mode-groovy.js"}
{$R "mode-haml.js"}
{$R "mode-handlebars.js"}
{$R "mode-haskell.js"}
{$R "mode-haxe.js"}
{$R "mode-html.js"}
{$R "mode-html_elixir.js"}
{$R "mode-html_ruby.js"}
{$R "mode-ini.js"}
{$R "mode-io.js"}
{$R "mode-jack.js"}
{$R "mode-jade.js"}
{$R "mode-java.js"}
{$R "mode-javascript.js"}
{$R "mode-json.js"}
{$R "mode-jsoniq.js"}
{$R "mode-jsp.js"}
{$R "mode-jsx.js"}
{$R "mode-julia.js"}
{$R "mode-latex.js"}
{$R "mode-lean.js"}
{$R "mode-less.js"}
{$R "mode-liquid.js"}
{$R "mode-lisp.js"}
{$R "mode-live_script.js"}
{$R "mode-livescript.js"}
{$R "mode-logiql.js"}
{$R "mode-lsl.js"}
{$R "mode-lua.js"}
{$R "mode-luapage.js"}
{$R "mode-lucene.js"}
{$R "mode-makefile.js"}
{$R "mode-markdown.js"}
{$R "mode-mask.js"}
{$R "mode-matlab.js"}
{$R "mode-maze.js"}
{$R "mode-mel.js"}
{$R "mode-mips_assembler.js"}
{$R "mode-mipsassembler.js"}
{$R "mode-mushcode.js"}
{$R "mode-mysql.js"}
{$R "mode-nix.js"}
{$R "mode-nsis.js"}
{$R "mode-objectivec.js"}
{$R "mode-ocaml.js"}
{$R "mode-pascal.js"}
{$R "mode-perl.js"}
{$R "mode-pgsql.js"}
{$R "mode-php.js"}
{$R "mode-plain_text.js"}
{$R "mode-powershell.js"}
{$R "mode-praat.js"}
{$R "mode-prolog.js"}
{$R "mode-properties.js"}
{$R "mode-protobuf.js"}
{$R "mode-python.js"}
{$R "mode-r.js"}
{$R "mode-razor.js"}
{$R "mode-rdoc.js"}
{$R "mode-rhtml.js"}
{$R "mode-rst.js"}
{$R "mode-ruby.js"}
{$R "mode-rust.js"}
{$R "mode-sass.js"}
{$R "mode-scad.js"}
{$R "mode-scala.js"}
{$R "mode-scheme.js"}
{$R "mode-scss.js"}
{$R "mode-sh.js"}
{$R "mode-sjs.js"}
{$R "mode-smarty.js"}
{$R "mode-snippets.js"}
{$R "mode-soy_template.js"}
{$R "mode-space.js"}
{$R "mode-sql.js"}
{$R "mode-sqlserver.js"}
{$R "mode-stylus.js"}
{$R "mode-svg.js"}
{$R "mode-swift.js"}
{$R "mode-swig.js"}
{$R "mode-tcl.js"}
{$R "mode-tex.js"}
{$R "mode-text.js"}
{$R "mode-textile.js"}
{$R "mode-toml.js"}
{$R "mode-twig.js"}
{$R "mode-typescript.js"}
{$R "mode-vala.js"}
{$R "mode-vbscript.js"}
{$R "mode-velocity.js"}
{$R "mode-verilog.js"}
{$R "mode-vhdl.js"}
{$R "mode-wollok.js"}
{$R "mode-xml.js"}
{$R "mode-xquery.js"}
{$R "mode-yaml.js"}
{$R "theme-ambiance.js"}
{$R "theme-chaos.js"}
{$R "theme-chrome.js"}
{$R "theme-clouds.js"}
{$R "theme-clouds_midnight.js"}
{$R "theme-cobalt.js"}
{$R "theme-crimson_editor.js"}
{$R "theme-dawn.js"}
{$R "theme-dreamweaver.js"}
{$R "theme-eclipse.js"}
{$R "theme-github.js"}
{$R "theme-idle_fingers.js"}
{$R "theme-iplastic.js"}
{$R "theme-katzenmilch.js"}
{$R "theme-kr_theme.js"}
{$R "theme-kuroir.js"}
{$R "theme-merbivore.js"}
{$R "theme-merbivore_soft.js"}
{$R "theme-mono_industrial.js"}
{$R "theme-monokai.js"}
{$R "theme-pastel_on_dark.js"}
{$R "theme-solarized_dark.js"}
{$R "theme-solarized_light.js"}
{$R "theme-sqlserver.js"}
{$R "theme-terminal.js"}
{$R "theme-textmate.js"}
{$R "theme-tomorrow.js"}
{$R "theme-tomorrow_night.js"}
{$R "theme-tomorrow_night_blue.js"}
{$R "theme-tomorrow_night_bright.js"}
{$R "theme-tomorrow_night_eighties.js"}
{$R "theme-twilight.js"}
{$R "theme-vibrant_ink.js"}
{$R "theme-xcode.js"}
{$R "worker-coffee.js"}
{$R "worker-css.js"}
{$R "worker-html.js"}
{$R "worker-javascript.js"}
{$R "worker-json.js"}
{$R "worker-lua.js"}
{$R "worker-php.js"}
{$R "worker-xml.js"}
{$R "worker-xquery.js"}

end.