Skip to content

TMSFNCMemo

TTMSFNCMEMO5

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.

TTMSFNCMEMO1

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

TTMSFNCMEMO6

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

TTMSFNCMEMO8

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

TTMSFNCMEMO3

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.

TTMSFNCMEMO4

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

TTMSFNCMEMO7

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.