Syntax highlighting text editor for ImGui

Overview

ImGuiColorTextEdit

Syntax highlighting text editor for ImGui

Screenshot

Demo project: https://github.com/BalazsJako/ColorTextEditorDemo

This started as my attempt to write a relatively simple widget which provides text editing functionality with syntax highlighting. Now there are other contributors who provide valuable additions.

While it relies on Omar Cornut's https://github.com/ocornut/imgui, it does not follow the "pure" one widget - one function approach. Since the editor has to maintain a relatively complex and large internal state, it did not seem to be practical to try and enforce fully immediate mode. It stores its internal state in an object instance which is reused across frames.

The code is (still) work in progress, please report if you find any issues.

Main features

  • approximates typical code editor look and feel (essential mouse/keyboard commands work - I mean, the commands I normally use :))
  • undo/redo
  • UTF-8 support
  • works with both fixed and variable-width fonts
  • extensible syntax highlighting for multiple languages
  • identifier declarations: a small piece of description can be associated with an identifier. The editor displays it in a tooltip when the mouse cursor is hovered over the identifier
  • error markers: the user can specify a list of error messages together the line of occurence, the editor will highligh the lines with red backround and display error message in a tooltip when the mouse cursor is hovered over the line
  • large files: there is no explicit limit set on file size or number of lines (below 2GB, performance is not affected when large files are loaded (except syntax coloring, see below)
  • color palette support: you can switch between different color palettes, or even define your own
  • whitespace indicators (TAB, space)

Known issues

  • syntax highligthing of most languages - except C/C++ - is based on std::regex, which is diasppointingly slow. Because of that, the highlighting process is amortized between multiple frames. C/C++ has a hand-written tokenizer which is much faster.

Please post your screenshots if you find this little piece of software useful. :)

Contribute

If you want to contribute, please refer to CONTRIBUTE file.

Issues
  • pasting from clipboard when inputting an underscore '_'

    pasting from clipboard when inputting an underscore '_'

    So in my setup whenever I write _ (Shift + -) I get everything from my clipboard pasted in addition to the underscore character written. This is because of this code. What is the purpose behind pasting with _?

    The ASCII code of - is 45 - is it supposed to be something else?

    I also tested this with the demo project and it doesn't get triggered there - any idea why?

    I'm using this code from the examples of imgui for opengl2 and glfw

    bug 
    opened by onqtam 9
  • Are you open to pull requests ? (custom width/height fonts)

    Are you open to pull requests ? (custom width/height fonts)

    I'm working on a tool, if you're interested: https://github.com/berdal84/Nodable/ I would like to be able to use your imGuiColorTextEdit with custom width/height fonts. I'll be happy to contribute by adding custom font handling, are you open to it ? If yes, any suggestions to do it before I start ?

    A capture of your ImGuiColorTextEdit integrated into my app : https://github.com/berdal84/Nodable/blob/texteditor/screenshots/2018_06_03_Testing_ImGuiColorTextEdit.png

    opened by berdal84 8
  • Cursor position is more off with each character on line

    Cursor position is more off with each character on line

    Longer the line more cursor gets off to right from place it is writing. I tried multiple fonts along with monospaced one but nothing helped. Maybe some change in recent ImGui? I'am using release of 1.68 made recently. Here is the issue visible: image

    Cursor is there actually at the end of the line (when i press delete last character on line dissapears)

    opened by sadovsf 7
  • WantCaptureKeyboard and WantTextInput problems from ImGuiIO

    WantCaptureKeyboard and WantTextInput problems from ImGuiIO

    When a code editor widget is focused and has a cursor inside of it - querying ImGui::GetIO().WantCaptureKeyboard or ImGui::GetIO().WantTextInput (or maybe both) should return true instead of false. Also not sure about WantCaptureMouse and the rest such flags.

    Great project btw! Thanks for making it public!

    opened by onqtam 5
  • Decreased tab symbol size to improve look

    Decreased tab symbol size to improve look

    I think that the tab symbol is really large and this decreases the general clarity of the code when there are lots of tab characters. This is how it looks currently:

    image

    This is the proposed look (similar to Visual Studio Code):

    image
    opened by melix99 4
  • Fast syntax highlighting for Lua

    Fast syntax highlighting for Lua

    Following #44 I have adapted the new hand-written tokenizer to Lua.

    This PR also partially fixes this issue (I have not yet implemented the fix for multi-line comments):

    Before image

    After image

    As written in the screenshots the only missing part for strings is the nested quotes with square brackets and equals (here for more informations), but this is relatively intricate to implement and I think it's not even super used, so maybe it can be implemented later.

    As I said, the only missing part that I want to implement before merging is the fix for multi-line comments.

    EDIT: I have now fixed the multi-line comments bug and I have also added the missing goto keyword, so now I think that this PR can be merged.

    opened by melix99 3
  • Improved keyboard shortcut system

    Improved keyboard shortcut system

    Right now the shortcut system is a bit messy because it doesn't handle some cases well. I changed the shortcut system to be more like the one found inside imgui widgets. This PR changes the following:

    • On Windows/Linux the super key is now handled (before it was just ignored)
    • On macOS the alt key is now handled (before it was just ignored)
    • The left handed shortcuts on macOS now uses ctrl/alt and not the super key
    • The wordmove key on macOS is now the alt key (it's the standard in macOS) instead of the super key
    opened by melix99 3
  • Invalid cursor position after mouse click on line with tabulations

    Invalid cursor position after mouse click on line with tabulations

    Problem

    When I click on a line contening tabulations, the cursor is placed at a wrong position.

    For example, calling only these two functions with the default font of ImGui:

    editor.SetText("        abcdefghijklmnopqrstuvwxyz\n\t\tabcdefghijklmnopqrstuvwxyz\n");
    editor.Render("editor", ImGui::GetContentRegionAvail(), false);
    

    Screenshot_20190613_172825

    If I click after the text on the first line the cursor is put at the right position (the end of the line), but if I click after the end of the second line the cursor is placed at a wrong position (as in the picture).

    Informations

    • ImGui version: v1.70+, docking branch (https://github.com/ocornut/imgui/commit/596d81a973237c17008a4b64c72fa08bd380b79e)
    • ImGuiColorTextEdit version: last (https://github.com/BalazsJako/ImGuiColorTextEdit/commit/e2a25206024408bf7d9839f54028c2c7bff6fdab)
    opened by pinam45 3
  • Suggestion: move .png/large data to wiki repo

    Suggestion: move .png/large data to wiki repo

    Minor trick/suggestion: because png adds up in the git repo size. The wiki that github offers is a separate git repo (ImGuiColorTextEdit.wiki.git instead of ImGuiColorTextEdit.git)

    What I do for imgui is I upload any images to the wiki repo and link to them from the readme instead, so the main repository doesn't grow with extra data.

    opened by ocornut 3
  • User Inputs Handling and ImGui::Begin/EndChild enable/disable

    User Inputs Handling and ImGui::Begin/EndChild enable/disable

    Hello,

    I tried to do my best to keep this PR as clear as possible. I had to do these modification to better integrate this TextEditor into my application Nodable. In this application I draw a lot of things on top of a big TextEditor. To better understand, there is an GIF on this page : https://github.com/berdal84/Nodable

    In this pull request there are 2 commits about user inputs :

    • Added a boolean and a setter to be able to disable mouse input handler
    • Added a boolean and a setter to be able to disable keyboard input handler.

    I use them both before drawing the textEditor :

    auto allowkeyboard          = NodeView::GetSelected() == nullptr; // disable keyboard for text editor when a node is selected.
    auto allowMouse             = !ImGui::IsAnyItemHovered() && !ImGui::IsAnyItemFocused();
    
    textEditor->SetHandleKeyboardInputs(allowkeyboard);
    textEditor->SetHandleMouseInputs(allowMouse);
    textEditor->Render("Text Editor Plugin", availSize);
    

    There is a commit about ImGui/Style :

    • Added a boolean and a setter to be able to ignore ImGui Begin/End Child. I thought that if an user wants a child, he had to add it by himself calling ImGui::Begin/EndChild before and after drawing the TextEditor. But I didn't wanted to broke anything by removing completely the child, so I just added a boolean and a setter. I set it just after instantiatiation :
    textEditor = new TextEditor;    
    static auto lang = TextEditor::LanguageDefinition::CPlusPlus(); 
    textEditor->SetLanguageDefinition(lang);
    textEditor->SetImGuiChildIgnored(true);
    

    There is also a simple fix relative to mouse cursor (cf. commit description).

    Feel free to send back any comments/suggestions/modification request.

    Regards,

    B.

    opened by berdal84 3
  • Fast syntax highlighting for C and C++

    Fast syntax highlighting for C and C++

    Hi,

    I've added a code-based approach to colorize (tokenize) the text. I converted the C and C++ language definitions to use this approach. It could easily be ported to Lua and AngelScript etc to optimize syntax highlighting for those languages too.

    It works by applying optimized code to detect numbers, string literals and identifiers etc instead of using regular expressions. The time it takes to colorize TextEditor.cpp went down from 178ms to 1ms on my laptop. It's now faster than SetText actually!

    When a tokenizer callback is set, it will bump the amount of work to do per frame to 10000 lines instead of 10 and use the tokenizer first instead of regex.

    I wonder why the regex approach has to be this slow.. I noticed it's doing a lot of temporary allocations. As far as I could tell (and I tried various approaches) there's no simple solution to this. The C++ runtime is just slow..

    Anyway, Please have a look, And if you feel like updating the other language definitions, go ahead!

    Regards, Marcel

    opened by marcel303 3
  • Fix scrolling issue

    Fix scrolling issue

    While I'm not able to determine if it always happens, in my use case, the scroll bar was much bigger than it needed to be. That meant it could scroll past the text. When the text fully disappeared from my screen, it'd automatically scroll way up, making it jitter and really annoying to work with.

    The fix was as simple as resetting the cursor to (0, 0) (local space) before creating a dummy.

    opened by FanisDeligiannis 0
  • Threading?

    Threading?

    I tried to thread the colorize function but no matter what I seem to get errors. So my question is, wouldn't it be better to thread the colorize function. I may just be dumb and not know how to thread it but me excuse is that this is my first C++ project

    opened by jona939s 0
  • Coloring sections programmatically

    Coloring sections programmatically

    I'm actually using ImGuiColorTextEdit to show a console log. It works well for this, except there is no way to set the colors of arbitrary lines and columns through the API.

    Bonus if instead we just added support for ANSI color codes.

    opened by calvertdw 0
  • Keywords in C++ colorizer not working.

    Keywords in C++ colorizer not working.

    Using the dev branch, and it seems, whenever I type a keyword into the editor, it seems it doesn't get recognized by the colorizer/tokenizer because it doesn't change color, although identifiers do.

    opened by Stanlyhalo 1
Cycles Shader Editor is a cross-platform C++ library that provides a graphical editor for creating Cycles shader graphs

Cycles Shader Editor Cycles Shader Editor is a cross-platform C++ library that provides a graphical editor for creating Cycles shader graphs with a si

null 6 Feb 18, 2022
Simpler ImGui Backend Implementation for VulkanHpp.

ImGui-VulkanHpp Simpler ImGui Backend Implementation for VulkanHpp.

takiyu 24 Mar 24, 2022
Dear IMGUI + Render + Window handling, amalgamation in two files ready to use

imgui-app Imgui-app is an amalgamation of two amazing projects Dear Imgui and Sokol libraries into two files to make it very easy to start working wit

PpluX 100 Jun 15, 2022
A file dialog library for Dear ImGui

ImFileDialog A simple file dialog library for Dear ImGui. This library supports favorites, actual Windows icons, image previews, zooming in, etc... DI

dfranx 341 Jun 21, 2022
dear imgui + glfw framework

ImFrame ImFrame is a lightweight framework designed to provide you with a window and graphical backend for the Dear ImGui library. Unlike more traditi

null 44 Jun 19, 2022
Markdown renderer for Dear ImGui using MD4C parser

imgui_md Markdown renderer for Dear ImGui using MD4C parser. C++11 or above imgui_md currently supports the following markdown functionality: Wrapped

Dmitry Mekhontsev 58 Jun 24, 2022
A cross-platform wrapper for using SDL2 with ImGui

ImSDL2 ImSDL2 is an open source "wrapper" of imgui backends available for SDL2. It aims to provide a backend-independent yet simple interface for inte

terens 5 Feb 2, 2022
ZT is a zig-contained library that automatically compiles+links ImGui, OpenGL, and GLFW into typed packages.

ZT is a zig-contained library that automatically compiles+links ImGui, OpenGL, and GLFW into typed packages. By zig contained I mean that ZT is intend

null 80 Jun 18, 2022
A (very) simple notification wrapper for Dear ImGui

imgui-notify Is a header-only wrapper made to create notifications with Dear ImGui. As I couldn't find any library for this I just decided to create m

Patrick 161 Jun 28, 2022
Slate is a bitmap editor available for Linux, Windows and Mac.

Slate is a bitmap editor available for Linux, Windows and Mac.

Mitch Curtis 877 Jun 25, 2022
Example program for integrating Dear ImGui and GLFW into Source's App System

This is an example program for integrating Dear ImGui and GLFW into Source's app system, the same thing Source's tools use. Feel free to do with this

null 9 Apr 16, 2022
ImTricks is a collection of useful functions for expanding / improving the functionality of the ImGui.

ImTricks ImTricks is a collection of useful functions for expanding / improving the functionality of the ImGui. At the moment it has in itself: Functi

Alexander Pers0na2 22 Jun 13, 2022
A ImGui Application with Multi Viewports and Docking using D3D11

ImGui-Application Informations A ImGui Application with Multi Viewports and Docking using D3D11 Build You need the DirectX SDK, here the Download link

Argon Projects 9 May 3, 2022
Expose the ImGui framework to clasp

Expose the ImGui framework to clasp Installing in the clasp source tree cd clasp/extensions git clone https://github.com/clasp-developers/imgui-clasp

clasp 4 Oct 11, 2021
Growtopia android modmenu with ImGui

Growtopia Android ImGUI Growtopia android modmenu with ImGUI. Features Built with ImGUI. Coming Soon None Requirements The following dependencies are

ZTz 51 Jun 28, 2022
X11 + GLFW + Dear ImGUI Overlay

Dear ImGUI Overlay X11 + GLFW + Dear ImGUI Overlay made by rdbo Based on https://github.com/rdbo/glfw-overlay How to use? In main.c, there is a window

Rdbo 4 Mar 30, 2022
Partial source of the ImGui interfaces used in the Rocket League version of CodeRed.

CodeRed-ImGui Raw source of the ImGui interfaces used in the Rocket League version of CodeRed. About This repo is just part of the ImGui source used i

CodeRed 7 Jun 18, 2022
Sample project to use ImGui + GLFW + OpenGL3

About just a sample project to use ImGui ( https://github.com/ocornut/imgui ) Note Windows 11 Visual Studio 2019 + cmake-gui WSL2 on Windows 11 apt in

iwatake 4 Dec 23, 2021
Generate Height map with Generator (OpenGL and imgui) and Construct Splat Map with generated height map using Algorithm

Generate Height map with Generator (OpenGL and imgui) and Construct Splat Map with generated height map using Algorithm(DPS, BFS, Gradient Descent ... etc) . At Renderer, with height map and blend map which are generated in front of this stage, render high quality terrain with OpenGL

Snowapril 35 Mar 22, 2022