Port font editor to SDL2

Replace X11 with SDL2 to improve the portability and cross-platform support

Migrated window creation from X11's `XCreateWindow` to `SDL_CreateWindow`.

Replaced X11 event handling with SDL2’s event loop (`SDL_PollEvent`)
to capture input events such as keyboard and mouse interactions.

Updated rendering to use `SDL_Renderer` and `SDL_Surface`,
replacing X11's rendering functions.

* Modified some key event logic:
    1. SDLK_ESCAPE: ESC now exits the program.
    2. SDL_QUIT: Clicking the "X" on the window exits the program.

* Unchanged key event logic:
    1. SDLK_q: Switches to the next font.

* Rename delete function:
    1. Rename delete() to delete_char() to avoid `clang-format` misinterpreting
       `delete()` as the C++ the keyword, which cauese an extra space to be
       added when running `clang-format`, turning `delete()` to `delete ()`.

* Add operation instructions in the READMD.
    1. Add a quick guide
    2. Add demo GIF of font editor

tools/font-edit/Makefile

@@ -1,7 +1,7 @@
 TARGET = twin-fedit
 
-CFLAGS = $(shell pkg-config --cflags cairo x11) -g -Wall
-LIBS = $(shell pkg-config --libs cairo x11)
+CFLAGS = $(shell pkg-config --cflags cairo) $(shell sdl2-config --cflags) -g -Wall
+LIBS = $(shell pkg-config --libs cairo) $(shell sdl2-config --libs)
 
 OBJS = \
 	twin-fedit.o \

tools/font-edit/README.md

@@ -3,9 +3,13 @@
 which are expected to fit the requirements of embedded systems with larger
 screens.
 
+<p align="center">
+  <img src="./assets/demo.gif" />
+</p>
+
 ## Build Dependency
 ```shell
-sudo apt-get install libx11-dev libcairo2-dev
+sudo apt-get install libsdl2-dev libcairo2-dev
 ```
 
 ## Usage
@@ -14,4 +18,66 @@ make
 ./twin-fedit < nchars
 ```
 
-(press 'q' to next character)
+### Background
+`twin-fedit` uses a singly linked list to store drawing-related operations. The nodes of this list are represented by the `cmd_t` structure, where each structure contains an operation type `op_t` and points `pt_t`. 
+
+```c
+typedef struct _cmd {
+    struct _cmd *next;
+    op_t op;
+    pt_t pt[3];
+} cmd_t;
+```
+The operation `op` determines the number of values in `pt`. For example, when `op_t = op_move`, `pt[0].x = 10` and `pt[0].y = 4` represent moving a point to (10, 4). When `op_t = op_curve`, `pt[0]` and `pt[1]` are the control points of a cubic Bézier curve, and `pt[2]` is the endpoint, used to draw the curve.
+
+If `op` is `op_move` or `op_line`, then `pt[1]` and `pt[2]` are undefined.
+
+The `cmd_stack_t` is a singly linked list that stores multiple `cmd_t` singly linked lists in a stack-like manner. The purpose of cmd_stack is to record all operations. To revert to the previous operation, this can be achieved using the stack.
+
+The `char_t` structure is used to store the `cmd_t` structures needed for drawing characters.
+```c
+typedef struct _char_t {
+    cmd_t *cmd;
+    cmd_stack_t *stack;
+    cmd_t *first;
+    cmd_t *last;
+} char_t;
+```
+
+### Key bindings
+
+| Key  | Functionality |
+|   ---       |   ---    |
+|  ESC  | Exit program |
+| left mouse button | Select a point and its corresponding `cmd_t` as the first pointer |
+| right mouse button | Select a point and its corresponding `cmd_t` as the last pointer |
+| d | Delete selected point|
+| f | Replace a line with a spline |
+| q | Next character |
+| s | Split a spline into two splines by start point and end point |
+| u | Undo the last operation |
+
+### Quick Guide
+* To move a point
+    1. Select a point by left mouse button,
+    2. Use arrow keys to move the selected point.
+
+* To move a control point
+    1. Select a point with two control points by left mouse button,
+    2. Use arrow keys to move the first control point,
+    3. Keep press shift key and use arrow keys to move the second control point.
+
+* To split a spline or line
+    1. Select two point by left and right mouse button,
+    2. Use s key to split the line or spline into two segments.
+
+* To replace the line or spline by another spline
+    1. Select two point by left and right mouse button as start and end of the another spline,
+    2. Use f key to replace the line or spline with another spline.
+
+* To delete a point
+    1. Select a point by left mouse button,
+    2. Use d key to delete the selected point.
+
+* To undo any operations above
+    1. Use u key.