BreeceW / WinUIEdit

Code editor control for UWP and WinUI 3 based on Scintilla
Other
124 stars 9 forks source link

Trying to use it #9

Open WindowsNT opened 1 day ago

WindowsNT commented 1 day ago

This seems a nice control, I'm trying to build a FASM GUI.

  1. Syntax highliting isn't working (even with the mica editor embedded)
  2. How to set to asm?
  3. How to get notified when text is changed?
BreeceW commented 12 hours ago

Syntax highlighting is built-in as a convenience feature (just set the HighlightingLanguage property to, e.g. "cpp") to CodeEditorControl that gives you useful predefined styles for a small subset of the languages supported by the underlying syntax highlighter (Lexilla). It does not currently have ASM built-in.

However, Lexilla does support ASM, so you can take advantage of this with a little manual configuration. I have set up an example below:

Include the following headers:

#include "ILexer.h"
#include "Lexilla.h"
#include "SciLexer.h"

You will need to copy the headers into your project as they are not currently in the NuGet package. Copy ILexer.h, Lexilla.h, SciLexer.h, and Sci_Position.h. They are all in this GitHub repository.

Lexilla is bundled into WinUIEditor.dll. When you load the control, you will need to create the lexer, and set the editor to use it. There are some properties for code folding you can set. You will have to define the keywords. A list of which sets of keywords to define is in LexAsm.cxx. I recommend looking over the lexer code to familiarize yourself with the options and styles.

const auto modWinUIEditor = GetModuleHandleW(L"WinUIEditor.dll");
const auto createLexer{ reinterpret_cast<Lexilla::CreateLexerFn>(GetProcAddress(modWinUIEditor, "CreateLexer")) };
const auto asmLexer{ createLexer("asm") };

const auto editor{ codeEditorControl().Editor() };
editor.SetILexer(reinterpret_cast<uint64_t>(asmLexer)); // WinRT does not have a pointer type
editor.SetProperty(L"fold", L"1"); // See LexAsm.cxx for properties
editor.SetKeyWords(0, L"sub mov lea"); // CPU instructions
editor.SetKeyWords(2, L"rdx rsp"); // Registers
// Set remaining key word lists (see LexAsm.cxx for all)

Lastly, you will need to set the styles/colors. They should be set when the CodeEditorControl events are fired. See below:

void MainPage::CodeEditorControl_DefaultColorsChanged(winrt::Windows::Foundation::IInspectable const &sender, winrt::Windows::UI::Xaml::ElementTheme const &theme)
{
    // Invoked when default colors need to be changed. All non-common styles get reset to StylesCommon::Default values
    // E.g., on theme change, DefaultColorsChanged is fired, styles get reset, then SyntaxHighlightingApplied is fired

    const auto codeEditorControl{ sender.as<WinUIEditor::CodeEditorControl>() };
    const auto editor{ codeEditorControl.Editor() };

    switch (theme)
    {
    case ElementTheme::Dark:
        editor.StyleSetFore(static_cast<int32_t>(WinUIEditor::StylesCommon::Default), RGB(0xD4, 0xD4, 0xD4));
        editor.StyleSetFore(static_cast<int32_t>(WinUIEditor::StylesCommon::BraceLight), RGB(0xD4, 0xD4, 0xD4));
        break;

    case ElementTheme::Light:
        editor.StyleSetFore(static_cast<int32_t>(WinUIEditor::StylesCommon::Default), RGB(0x00, 0x00, 0x00));
        editor.StyleSetFore(static_cast<int32_t>(WinUIEditor::StylesCommon::BraceLight), RGB(0x00, 0x00, 0x00));
        break;
    }
}

void MainPage::CodeEditorControl_SyntaxHighlightingApplied(Windows::Foundation::IInspectable const &sender, Windows::UI::Xaml::ElementTheme const &theme)
{
    // Invoked when syntax highlighting styles need to be set

    const auto codeEditorControl{ sender.as<WinUIEditor::CodeEditorControl>() };
    const auto editor{ codeEditorControl.Editor() };

    switch (theme)
    {
    case ElementTheme::Dark:
        editor.StyleSetFore(SCE_ASM_COMMENT, RGB(0x6A, 0x99, 0x55));
        editor.StyleSetFore(SCE_ASM_REGISTER, RGB(0x56, 0x9C, 0xD6));
        editor.StyleSetFore(SCE_ASM_CPUINSTRUCTION, RGB(0xC5, 0x86, 0xC0));
        editor.StyleSetFore(SCE_ASM_NUMBER, RGB(0xB5, 0xCE, 0xA8));
        // Add remaining SCE_ASM_ dark mode styles (see SciLexer.h)
        break;

    case ElementTheme::Light:
        editor.StyleSetFore(SCE_ASM_COMMENT, RGB(0x00, 0x80, 0x00));
        editor.StyleSetFore(SCE_ASM_REGISTER, RGB(0x00, 0x00, 0xFF));
        editor.StyleSetFore(SCE_ASM_CPUINSTRUCTION, RGB(0xAF, 0x00, 0xDB));
        editor.StyleSetFore(SCE_ASM_NUMBER, RGB(0x09, 0x86, 0x58));
        // Add remaining SCE_ASM_ light mode styles (see SciLexer.h)
        break;
    }
}

To get text change notifications, access the Editor property on the CodeEditorControl. Register and respond to the Modified event like this:

CodeEditorControl().Editor().Modified({this, &Editor_Modified});

void Editor_Modified(WinUIEditor::Editor const &sender, WinUIEditor::ModifiedEventArgs const &args)
{
    if (args.ModificationType() & static_cast<int32_t>(WinUIEditor::ModificationFlags::InsertText | WinUIEditor::ModificationFlags::DeleteText))
    {
        // Text is modified
    }
}

All of the Scintilla APIs are exposed in the Editor property. Their documentation is very helpful.

I hope this answers your questions.