TMSFNCMemo

The TTMSFNCMemo component works just like the regular TMemo or the TAdvMemo in VCL UI Pack. This memo supports syntax highlighting and code completion out of the box. Based on the same editor that Visual Studio Code uses namely Monaco. This component has adapted this technology to be easy to use in your applications.

Quick Start

Because the Visual Studio Code editor is JavaScript based, we have used a underlying TTMSFNCWebBrowser to render this editor. Therefore you'll need to go through this guide to get you up and running with the browser. After installing the correct dll's you can simply drop the component on the form, and you're good to go.

Features

There are a ton of features enabled in the TTMSFNCMemo. In this section you'll read all about some of the more prominent features.

Breakpoints, Bookmarks & LineHighlighting

To use Breakpoints & Bookmarks, the first thing you should do, is enable the GlyphMargin in the options. this shows a extra column which will render the breakpoints/bookmarks. You can then use the following code to enable/disable a breakpoints or bookmarks.

TMSFNCMemo1.Breakpoints[LineNumber] := false;

To enable a user to do this on a click in the margin, you can subscribe to one of the following events: * OnLineNumberClick: This triggers whenever you click on the LineNumber column. * OnGlyphMarginClick: This triggers when you click in the rightmost column. * OnGutterClick: This triggers whenever you click on the GlyphMargin or LineNumber. This is the event we advise to use as this is less restricted for the users.

This example show a simple implementation on how to trigger breakpoints on a gutter click.

procedure TForm2.BreakpointsMemoGutterClick(Sender: TObject; LineNumber: Integer);
begin
  BreakPointsMemo.BreakPoints[LineNumber] := not BreakPointsMemo.BreakPoints[LineNumber];
end;

All this code is the same for breakpoints, bookmarks and line highlighting.

Find & Replace

Find

You can call the following procedure to search for a match:

procedure Find(ASearchString: string; AOptions: TTMSFNCMemoFindOptions; ABehaviour: TTMSFNCMemoFindBehaviour = fbDown);
procedure Find(ASearchString: string; ABehaviour: TTMSFNCmemoFindBehaviour = fbDown);

Or you can call FindNext, FindPrevious, FindAll directly.

The first one requires you to set some search options and set how to search. The second one will use the default options when searching.

Setting the SetSelect option to true will visually jump to the found match (this does nothing in FindAll);

To get the results back, you'll need to subscribe on the OnFindAll, OnFindNext or OnFindPrevious events and check the results there.

Replace

Replacing is mostly the same with the only a added parameter 'AReplaceString'

procedure Replace(ASearchString, AReplaceString: string; AOptions: TTMSFNCMemoFindOptions; ABehaviour: TTMSFNCMemoFindBehaviour = fbDown); 
procedure Replace(ASearchString, AReplaceString: string; ABehaviour: TTMSFNCMemoFindBehaviour = fbDown); 

And here you can also call ReplaceNext, ReplacePrevious, ReplaceAll instead.

2 functions which behave a little bit different are the following:

procedure Replace(AStartPos, ALength: Integer; AReplaceString: string);
procedure Replace(AReplaceString: string); 

The first one you can custom replace a range that you choose. Whilst the latter will replace the text currently selected.

Subscribing on the OnReplaceNext, OnReplacePrevious, OnReplaceAll will trigger when you replace accordingly. Here you will find all matches and the search & replace string.

Find options

To override the defaultfindoptions you can use the following snippet. This snippet will only search for words with match the exact case.

var
  options: TTMSFNCMemoFindOptions;
begin
  options := DefaultFindOptions;
  options.MatchCase := true;

  TMSFNCMemo1.Find('test', options);

Code Completion

Out of the box there is basic code completion supported that will show every word in the editor. To customise this, you can add extra code completion items to this list. To do this, you can add items to the code completion collection or alternatively you can subscribe to the OnGetCodeCompletion event and add extra items there. This event can be used to show items for a specific location.

important: The code completionlist will automatically filter if it registers that a user is typing! If you just use ctrl+space to trigger code completion after a white-space or line-break it will show all items and you can then type to filter the items.

Code completion Item

The only property that is required in a Code completion item is the name property. you can then further customise the Code completion item by setting the kind and insertText properties. Adjusting the kind property will render a different symbol in the code completion list. the InsertText property will override the text to insert in the editor. This can be handy to insert for example a snippet.

Insert as snippet with arguments

One of the features that is also supported is to insert snippets with arguments. this wil enter the snippet and jump set the cursor immediately to the first argument. the user kan then tab to the next one without much effort. To do this you need to set the InsertTextRules to itrInsertAsSnippet. and add ${tabNumber: argumentText} or simply $tabNumber when you dont want to insert any text.

example of an ifelse snippet:

  if ${1:condition} then
  begin
    $2
  end
  else
  begin
    $3
  end;

CompletionList Design-time

The items that have been added here will always be included in the code completion list this can be used to provide static code completion items.

OnGetCodeCompletionList event

To add items dynamically to the code completion list you can use this event. Simply subscribe to this event and you'll get the word at cursor position, cursor position and a custom code completion list you can fill. These items will then be added to the rendering of this code completion list.

example:

procedure TForm1.CodeCompletionMemoGetCodeCompletion(Sender: TObject;
  Token: string; CustomCompletionList: TTMSFNCMemoCodeCompletion;
  Position: TTMSFNCMemoCaretPosition);
begin
  CustomCompletionList.Add('console.log');
  CustomCompletionList.Add('IntToStr(');
  CustomCompletionList.Add('StrToInt(');
end;

UI Options

There are a ton of customization options in the memo. You can find most of them under the options menu. Most of these affect the UI or some of the internal options like using a context menu, showing linenumbers, rendering links, ... You can find more information in this segment about the various options.

All options are described here;

An important option that you won't find in the options is the Theme. As of now we have three themes available:

• Visual Studio Code - Light
• Visual Studio Code - Dark
• High Contrast Dark

Drag and Drop

To use drag and drop options, you simply need to subscribe on the corresponding events. However, because this uses browser technology, there are some limitations on what you can do. Only in the drop event you'll be able to check the filename. In every other event you'll be able to check the mimetype. In the DragOver event setting (VCL) allow on False or (FMX) Operation on None will not update the cursor. It will also not trigger the drop event.

TTMSFNCMemoDragObject

To read the data that has been dropped on the editor, you need to parse the Source object to a TTMSFNCMemoDragObject.

This object contains a ton of info, like the CaretPosition or whether it is text or files & the data itself (text or files). In the files property you can check all files that have been dropped and choose one to load into the editor.

simple example of OnDragDrop in FMX: text will be added or files will be opened.

procedure TForm1.TMSFNCMemo1DragDrop(Sender: TObject; const Data: TDragObject;
  const Point: TPointF);
begin
  if (Data.Source as TTMSFNCMemoDragObject).Kind = otText then
    TMSFNCMemo1.Lines.Add((Data.Source as TTMSFNCMemoDragObject).Text)
  else
    (Data.Source as TTMSFNCMemoDragObject).Files[0].Open;
end;

File-extension - Language mapping

When using the LoadFromFile method, the Memo will automatically map the file extension to the correct Language. We have a couple of predefined extensions already available. If you want to add more extensions for a specific language, you can just add these to the LanguageFileExtensionMap collection, like you would in any collection. You can have multiple extensions for 1 language. But you'll have to add these separatly to the collection.

Sources

To use sources, simply add an item to the Sources collection. This collection contains several properties which will be sustained when switching between these, like Language, text, cursorposition, breakpoints, ... You can use this collection to switch quickly between multiple texts. To switch between Sources, you'll need to set the ActiveSource property of the memo to the correct index.

Important methods, properties and events

properties

TTMSFNCMemo

Property name	Description
Lines	Enables you to manipulate the content of the ttmsfncmemo as a TStringList.
Language	Used to select the preferred language for syntax highlighting in the editor. Defaults to mlPascal
Theme	Sets the UI theme of the editor. Defaults to mtVisualStudio.
Options	Property of type TTMSFNFNCMemoOptions. This class lets you customize the editor to your needs.
WantTab	Setting this to true, disables tabbing in the editor. Needed for using tab to jump from control to control. Defaults to false.
LibraryLocation	Set this to false, will use local files otherwise, the libraries will loaded over internet. Defaults to true
Font	Enables you to set font options. Only font name and size can be used from this property.
CompletionList	Collection containing all code completion items you want to use for the whole editor.
CaretPosition	Get or set the position of the caret using line number and position on that line.
SelStart	Get or set the start of a selection.
SelLength	Get or set the the Length of a selection.
SelText	Get or set the text to replace in a selection.
BreakPoints[Line]	Set a breakpoint on a certain line to true or false
Bookmarks[Line]	Set a bookmark on a certain line to true or false
LineHighlighting[Line]	Set linehighlighting on a certain line to true or false
BreakPointCount	Get the amount of breakpoints set to true
BookmarksCount	Get the amount of bookmarks set to true
LineHighlightingCount	Get the amount of lines that are highlighted
Text	Get or set the text for memo.

TTMSFNCMemoOptions

Property name	Description
LineNumbers	Hide or show the Linenumbers.
RoundedSelection	Show selections with rounded corners.
ContextMenu	Enable or disable the contextmenu.
EmptySelectionClipboard	Enable or disable copying without a selection copies the current line.
Folding	Disable the option to fold certain lines.
FoldingHighlights	Enable the highlighting for folding regions.
GlyphMargin	Hide or show the Glyph margin. Important to use breakpoints, ...
MouseWheelZoom	enable the user to Zoom the text using his mouse wheel
Links	enable or disable the rendering of clickable links.
FormatOnType	Enable automatic formating when typing.
CodeLens	Enable or disable the CodeLens feature. CodeLens will render information about where certain classes, methods and exports are used.
Scrollbar	Set the options for the scrollbar.
RenderIndentGuides	Hide or show the Indent guides.
RenderLineHighlight	Highlight the line your caret is on.
RenderLineHighlightOnlyWhenFocus	Set to true if this can only happen when the editor has focus.
RenderWhiteSpace	Set the options for white spaces in the memo.
SelectOnLineNumber	Allows selection of line by clicking on the linenumber.
SelectionHighlight	Highlight the selected region.
OverviewRulerLanes	The number of vertical lanes the overview ruler should render. Defaults to 3.
OverviewRulerBorder	Controls if a border should be drawn around the overview ruler. Defaults to true.
TabSize	Set the amount of whitespaces to add when tabbing.
BlockSelection	Enables blockselection in the memo.
AutoOpenLink	Allow to open the link in a browser when clicking it.

TTMSFNCMemoScrollOptions

Property Name	Description
HandleMouseWheel	When set to true, allows scrolling by using the mousewheel.
Horizontal	Set the rendering of the horizontal scrollbar, defaults to Auto.
HorizontalScrollbarSize	Set the size of the horizontal scrollbar.
ScrollByPage	Scroll gutter clicks move by page vs jump to position. Defaults to false.
Vertical	Set the rendering of the vertical scrollbar, defaults to Auto.
VerticalScrollbarSize	Set the size of the vertical scrollbar.

TTMSFNCMemoMinimapOptions

Property Name	Description
Autohide	When set to true hides the minimap when not hovering
Enabled	When set to true, show the minimap
MaxColumn	Limits the width of the minimap, defaults to 120
RenderCharacters	Render the actual text on a line (as opposed to color blocks). Defaults to true.
Scale	Relative size of the font in the minimap. Defaults to 1.
ShowSlider	ontrol the rendering of the minimap slider. Defaults to 'mouseover'.
Side	Control the side of the minimap in editor. Defaults to 'right'.
Size	Control the minimap rendering mode. Defaults to 'actual'.

TTMSFNCMemoFindOptions

Property Name	Description
SearchOnlyEditableRange	Limit the searching to only search inside the editable range of the model.
SetSelect	When set to true, will select the first encountered match.
IsRegex	Used to indicate that search value is a regular expression
MatchCase	Force the matching to match lower/upper case exactly
WordSeparators	Force the matching to match entire words only. Pass null otherwise.
CaptureMatches	The result will contain the captured groups.
LimitResultCount	Limit the number of results

methods

Method Name	Description
TextPosToPos	Converts a position in the text to a caretPosition
XYToPos	Converts a point in the memo to a CaretPosition
PosToTextPos	Converts a CaretPosition to a position in the text.
GetWordAtPosition	Accepts a text position and returns the word at that position
GetWordAtCursor	Returns the word at the cursor position.
Find	Search for a word in the editor. Starts from cursor position. Accepts extra search options and direction to look for the word (up/down/all).
Replace	Searches for a word and replaces it with a new word. Accepts extra search options and direction to look for the word (up/down/all).
ScrollToLine	Scroll to the given line.
ScrollToLineCenter	Scroll to the given line and center on that line.

events

Event Name	Description
OnGutterClick	Triggers when the user clicks on the gutter.
OnGutterMiddleClick	Triggers when the user middle clicks on the gutter.
OnGutterRightClick	Triggers when the user right clicks on the gutter.
OnGlyphMarginClick	Triggers when the user clicks on the glyph margin.
OnGlyphMarginRightClick	Triggers when the user right clicks on the glyph margin.
OnGlyphMarginMiddleClick	Triggers when the user middle clicks on the glyph margin.
OnLineNumberClick	Triggers when the user clicks on the linenumber.
OnLineNumberRightClick	Triggers when the user right clicks on the linenumber.
OnLineNumberMiddleClick	Triggers when the user middle clicks on the linenumber.
OnGetCodeCompletion	Triggers when the user triggers Code completion.
OnLinkClick	Triggers when the user ctrl + click on a link.
OnPaste	Triggers when the user tries to paste text in the memo.
OnReplaceAll	Triggers when you call replace with behaviour set to all.
OnReplaceNext	Triggers when you call replace with behaviour set to down.
OnReplacePrevious	Triggers when you call replace with behaviour set to up.
OnFindAll	Triggers when you call find with behaviour set to all.
OnFindNext	Triggers when you call find with behaviour set to down.
OnFindPrevious	Triggers when you call find with behaviour set to up.