GRAFFITISYNTAXEDITOR - GRAFFITISUITE DOCS

# GraffitiSyntaxEditor Class Inherits GraffitiWebUIControl ## About GraffitiSyntaxEditor is a full featured code and text editor component with support for 34 themes, 143 languages (modes), and the following features: * Custom Mode Support * Custom Theme Support * Annotations * Breakpoints * Single-Line Comment Toggling * Block Comment Toggling * Built-In Find/Replace * Code Folding * Single or Multiple Line Indent * Selection Modification (Duplication, Lowercase, Number alterations, Move, Split, Transpose by Line, Transpose Characters, Uppercase, By Word) * Built-In GoTo by Line Number * Undo Stack * Code Matching Highlight * Autocomplete * File Drop Loading * Visible Margins * Soft or Hard Tabs * Tab Size Setting * Optional Word Wrap ## Preview ![](https://graffitisuite.com/wp-content/uploads/2023/07/mobile_syntaxeditor.png) Previous Next ## Compatibility ### Framework API Version | 1.0 | 2.0 | | :---: | :---: | | False | True | ### Console | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ### Desktop | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ### iOS | 32-Bit | 64-Bit | | :---: | :---: | | False | True | ### Web | 32-Bit | 64-Bit | | :---: | :---: | | True | True | ## Enumerations | Name | Value | Description | | --- | :---: | --- | | AnnotationTypes | Info Warning Error | Supported annotation types. | | Modes | ABAP ABC ActionScript ADA ApacheConf AppleScript ASCIIDoc AssemblyX86 AutoHotKey BatchFile Bro C_CPP C9Search Cirru Clojure Cobol CoffeeScript ColdFusion CSharp CSS Curly D Dart Diff Django DockerFile Dot Drools Eiffel EJS Elixir Elm ERLang Forth Fortran FTL GCode Gherkin GitIgnore GLSL Gobstones GOLang Groovy HAML Handlebars Haskell HaskellCabal Haxe HJSON HTML HTMLElixir HTMLRuby INI IO Jack Jade Java JavaScript JSON JSONIQ JSP JSX Julia Kotlin LaTeX Lean LESS Liquid LISP Live_Script LiveScript LogIQL LSL LUA LUAPage Lucene MakeFile Markdown Mask MatLab Maze Mel MIPS_Assembler MIPSAssembler MushCode MySQL Nix NSIS ObjectiveC OCAML Pascal Perl PGSQL PHP PlainText PowerShell Praat Prolog Properties Protobuf Python R Razor RDoc RHTML RST Ruby Rust SASS SCAD Scala Scheme SCSS SH SJS Smarty Snippets SoyTemplate Space SQL SQLServer Stylus SVG Swift Swig TCL Tex Text Textile TOML TSX Twig TypeScript Vala VBScript Velocity Verilog VHDL Wollok XML Xojo XQuery YAML Custom | Supported languages. | | Themes | Chaos Chrome Clouds CloudsMidnight Cobalt CrimsonEditor Dawn Dreamweaver Eclipse GitHub IdleFingers iPlastic Katzenmilch KRTheme Kuroir Merbivore MerbivoreSoft MonoIndustrial Monokai PastelOnDark SolarizedDark SolarizedLight SQLServer Terminal TextMate Tomorrow TomorrowNight TomorrowNightBlue TomorrowNightBright TomorrowNightEighties Twilight VibrantInk XCode Custom | Supported display themes. | ## Event Definitions | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | BreakpointAdded | Row as Integer | (None) | Breakpoint has been added by the user. | | BreakpointRemoved | Row as Integer | (None) | Breakpoint has been removed by the user. | | FocusLost | (None) | (None) | (None) | | FocusReceived | (None) | (None) | (None) | | FoldAdded | startRow as Integer endRow as Integer | (None) | Raised when the user folds a code block. | | FoldRemoved | startRow as Integer endRow as Integer | (None) | Raised when the user unfolds a code block. | | Opening | (None) | (None) | (None) | | SelectionChanged | (None) | (None) | Raised when the selection has changed. | | TextChanged | (None) | (None) | Raised when the text content has changed. | ## Methods | Name | Parameters | Return Type | Description | | --- | :---: | :---: | --- | | AddAnnotation | Line as Integer theText as String AnnotationType as AnnotationTypes | (None) | Adds an annotation to the right-hand gutter. | | AddBreakpoint | Line as Integer | (None) | Adds a breakpoint. | | AddMode | modeName as String modeSource as String | (None) | Adds the specified mode to the component. modeSource should be the JavaScript source of the mode to add. | | AddTheme | themeName as String themeSource as String | (None) | Adds the specified theme to the component. themeSource should be the JavaScript source of the theme to add. | | CenterSelection | (None) | (None) | Centers the currently selected text in the viewport. | | ClearAnnotations | (None) | (None) | Remove all annotations. | | ClearBreakpoints | (None) | (None) | Remove all breakpoints. | | ClearHistory | (None) | (None) | Flush Undo/Redo buffers. | | CommentBlockToggle | (None) | (None) | Toggle block commenting of the current selection. | | CommentToggle | (None) | (None) | Toggle single commenting of the current selection. | | Copy | (None) | (None) | Copies the currently selected text to the clipboard. | | Cut | (None) | (None) | Performs a Cut operation. | | Delete | (None) | (None) | Deletes the currently selected text from the content. | | DeselectAll | (None) | (None) | Deselect all text. | | Find | toFind as String Backwards as Boolean = False Wrap as Boolean = False CaseSensitive as Boolean = False WholeWord as Boolean = False | (None) | Search for toFind in the text. | | FindAll | toFind as String | (None) | Find all instances of toFind in the text. | | FindNext | (None) | (None) | Finds the next instance of the text. Requires there first be a Find call. | | FindPrev | (None) | (None) | Finds the previous instance of the text. Requires there first be a Find call. | | Fold | (None) | (None) | Folds the currently selected block. | | FoldAll | (None) | (None) | Folds all blocks in the document. | | GetFolds | (None) | Dictionary | Returns all currently folded block coordinates. | | GetLine | Line as Integer | String | Get full line text. | | GotoLine | Line as Integer | (None) | Go to the specified line within the text. | | GotoPageDown | (None) | (None) | Go to line one page below current selection. | | GotoPageUp | (None) | (None) | Go to line one page above current selection. | | Indent | (None) | (None) | Indent the current line. | | InsertLines | newLines() as String | (None) | Insert lines at selection. | | InsertText | theText as String | (None) | Insert theText at current selection. | | IsBreakpoint | Row as Integer | Boolean | Determine if the specified row has a breakpoint assigned. | | IsRowFolded | Row as Integer | Boolean | Returns whether the specified row is within a currently folded code block. | | MatchingExpandTo | (None) | (None) | Expands the current selection within matching blocks. | | MatchingJumpTo | (None) | (None) | Moves the cursor to the matching block element corresponding to the current selection. | | NavigateDown | byLines as Integer | (None) | Move the cursor down. | | NavigateEnd | (None) | (None) | Move the cursor to the end of the document. | | NavigateLeft | byCharacters as Integer | (None) | Move the cursor left by the specified number of characters. | | NavigateLineEnd | (None) | (None) | Move cursor to the end of the line. | | NavigateLineStart | (None) | (None) | Move cursor to the start of the line. | | NavigateRight | byCharacters as Integer | (None) | Move the cursor right by the specified number of characters. | | NavigateStart | (None) | (None) | Move the cursor to the start of the document. | | NavigateTo | Row as Integer Column as Integer | (None) | Move cursor to specified position. | | NavigateUp | byLines as Integer | (None) | Move the cursor up by the specified number of lines. | | NavigateWordLeft | (None) | (None) | Move cursor one word to the left. | | NavigateWordRight | (None) | (None) | Move cursor one word to the right. | | Outdent | (None) | (None) | Remove an indent from the current line. | | Paste | (None) | (None) | Pastes the clipboard text in to the content at the current cursor position. | | Redo | (None) | (None) | Redo an undone change. | | RemoveAnnotation | Line as Integer | (None) | Removes an annotation from the specified line. | | RemoveBreakpoint | Line as Integer | (None) | Removes a breakpoint from the specified line. | | Replace | replaceWith as String | (None) | Replaces instance with replaceWith. Requires Find or FindAll to be called first. | | ReplaceAll | replaceWith as String | (None) | Replaces all instances with replaceWith. Requires Find or FindAll to be called first. | | SelectAll | (None) | (None) | Select all text in the document. | | SelectDown | (None) | (None) | Selects down one line. | | SelectionCopyLinesDown | (None) | (None) | Copies the currently selected content on to the following line. | | SelectionCopyLinesUp | (None) | (None) | Copies the currently selected content on to the preceding line. | | SelectionDuplicate | (None) | (None) | Duplicates the currently selected text within the document. | | SelectionLowercase | (None) | (None) | Converts the selection to lowercase. | | SelectionModifyNumber | Delta as Integer | (None) | Modifies the currently selected number adding Delta. | | SelectionMoveLines | (None) | (None) | Moves the selected text down one line. | | SelectionMoveLinesUp | (None) | (None) | Moves the selected text up one line. | | SelectionSplitLine | (None) | (None) | Splits the current line at the cursor position. | | SelectionTranspose | (None) | (None) | Reverses the order of the currently selected lines. | | SelectionTransposeLetters | (None) | (None) | Reverses the order of the selected characters. | | SelectionUppercase | (None) | (None) | Converts the selection to uppercase. | | SelectLine | (None) | (None) | Select entire current line. | | SelectPageDown | (None) | (None) | Selects the next page of document. | | SelectPageUp | (None) | (None) | Selects the previous page of content. | | SelectToEnd | (None) | (None) | Selects all content from the current cursor position to the end of the document. | | SelectToStart | (None) | (None) | Selects all content from the current cursor position to the beginning of the document. | | SelectUp | (None) | (None) | Selects up one line. | | SelectWord | (None) | (None) | Select word that the cursor currently resides in. | | SelectWordLeft | (None) | (None) | Select word to the immediate left of the cursor. | | SelectWordRight | (None) | (None) | Select word to the immediate right of the cursor. | | ShowFind | (None) | (None) | Shows the built-in find panel. | | ShowGotoLine | PromptText as String = "Enter line number: " | (None) | Shows the built-in “Go to Line” panel. | | ShowReplace | (None) | (None) | Shows the built-in replace panel. | | ShowSettingsMenu | (None) | (None) | Show a panel containing current control settings. Changes here are not reflected in the control's properties. | | ShowShortcutsMenu | (None) | (None) | Shows a panel containing a list of the default keyboard shortcuts for the editor. | | ToHTML | includeCSS as Boolean = True | String | Returns the editor's content as styled HTML. | | Undo | (None) | (None) | Reverse a change. | | Unfold | (None) | (None) | Unfolds the currently selected block. | | UnfoldAll | (None) | (None) | Unfolds all folded blocks in the document. | ## Properties | Name | Type | Default Value | Description | | --- | :---: | :---: | --- | | Autocomplete | Boolean | (None) | When True, the editor will show a popup with suggestions while typing. | | AutoMatching | Boolean | (None) | Controls automatic paren matching. | | CanRedo | Boolean | (None) | If true, there are actions in the history which can be redone. | | CanUndo | Boolean | (None) | If true, there are actions in the history which can be undone. | | CurrentColumn | Integer | (None) | Current column of the cursor within the document. | | CurrentLine | Integer | (None) | Current line of the cursor within the document. | | DisplayIndentGuides | Boolean | (None) | Controls the display of indentation guides. | | Enabled | Boolean | (None) | (None) | | FadeFoldWidgets | Boolean | (None) | When True, fold widgets will fade out when the block is not hovered. | | FileDropAllowed | Boolean | (None) | When True, users can drop files on the component in an attempt to load them into the editor. | | FileDropCaption | String | (None) | Text displayed in the file drop capture interface. | | FileDropCaptionWorking | String | (None) | Text displayed in the file drop capture interface while a file is being read. | | FontFamily | String | (None) | Sets the editor to use the provided HTML -supported font family. | | FontSize | Integer | (None) | Size of the font used to display text in the viewport. | | IsDirty | Boolean | (None) | When True, the Xojo properties of the component may not yet reflect the true values. Wait for IsDirty = True before saving. | | Mode | Modes | (None) | When Mode = Custom, this will select the mode supplied via AddMode. | | ModeName | String | (None) | When Mode = Custom, this will select the mode supplied via AddMode. | | PrintMarginColumn | Integer | (None) | Width of the print margin in pixels. | | SelLength | Integer | (None) | Length of current selection. | | SelStart | Integer | (None) | Starting point of current selection. | | SelText | String | (None) | Currently selected text. | | ShowFoldWidgets | Boolean | (None) | Controls the display of block folding widgets. | | ShowGutter | Boolean | (None) | Controls display of the left-hand line number and breakpoint gutter. | | ShowInvisibles | Boolean | (None) | Controls the display of characters that are typically invisible. | | ShowPrintMargin | Boolean | (None) | When True, the print margin is displayed on the right side. | | TabSize | Integer | (None) | Length, in characters, of an indent/outdent/tab. | | Text | String | (None) | Text content of the editor. | | Theme | Themes | (None) | The visual style of the editor, including colors for syntax hightlighting. | | ThemeName | String | (None) | Custom theme to apply. | | UseSoftTabs | Boolean | (None) | When True, uses spaces rather than tabs. | | WordWrap | Boolean | (None) | When true long lines will wrap down the next line. |