# Live apps that can have text editor widgets

# LuaML: An experimental markup language and 'browser' for it
Demo of a simple structured editor for formatted text atop an infinite 2D
surface that can be panned and zoomed.
Don't rely on any commit hashes so far.
For ease of implementation, LuaML documents are always legal Lua objects
rather than a first-class language like HTML. A simple example:
```
{ type='text', data={'hello, world!',} }
```
Text object data consists of an array of strings, one for each line. No
newlines at the moment. (Everything is subject to change.)
You can draw various shapes on the surface:
```
{type='line', data={0,0, 0,600}},
{type='line', data={0,0, 800,0}},
{type='text', data={'0'}, x=-20,y=-20},
{type='rectangle', x=50,y=50, w=20,h=80, r=1,g=0,b=0},
{type='text', data={'abc', 'def'}, x=150, y=50, w=50,h=50, fg={r=0,g=0.4, b=0.9}},
{type='circle', x=300,y=200, radius=40, r=1,g=0,b=1},
{type='arc', x=0,y=0, radius=50, angle1=0, angle2=math.pi*2/3},
{type='ellipse', x=100,y=100, radiusx=10, radiusy=50},
{type='bezier', data={25,25, 25,125, 75,25, 125,25}},
```
But most of the design effort so far has focused on the 3 text types:
* `text` for runs of text to be line-wrapped over the given `width`.
* `rows` and `cols`, the only hierarchical types, ways to compose `text` nodes
  into various grid layouts.
Some more examples.
Adjust foreground/background color (akin to a `div` with inline `style`):
```
{ type='text', fg={r=1,g=0,b=0}, bg={r=1,g=1,b=0},
  data={'hello, world!'}
}
```
Two-column text:
```
{ type='cols', data={
  {type='text', data={'first column'}},
  {type='text', data={'second column'}},
}}
```
A table with two rows and two columns:
```
{ type='cols', data={
  { type='rows', data={
    {type='text', data='abc'},
    {type='text', data='def'},
  }},
  { type='rows', data={
    {type='text', data='ghi'},
    {type='text', data='jkl'},
  }},
}}
```
(With the current design, cols of rows seem strictly superior to rows of cols.
Column boundaries line up consistently across rows.)
This is still quite incomplete. Come help figure out its future. Currently
supported "attributes":
  * `fg`, `bg` for color (no `blink` tag yet)
  * `margin` (used as `margin-left` or `margin-top` depending on whether the
    parent node has `cols` or `rows` respectively)
  * `width` in pixels (I'd like to add '%' units here.)

A template repo for building live apps that juggle text editor widgets. The
editors support copy/paste, search, infinite undo, etc. You can't quite modify
editor functionality live (yet?).

Since this is all Lua, unrecognized attributes are silently ignored. In the
app itself you'll see attributes like `name` and `doc`. (This is a nightmare
if you imagine this turning into some sort of long-lived standard with
versions and compatibility guarantees. I don't. I just want an app-internal
format for creating UIs with very little code.)

This repo is a fork of [lines.love](http://akkartik.name/lines.html), an

LuaML.love is a fork of [lines.love](http://akkartik.name/lines.html), an

To run from the terminal, [pass this directory to LÖVE](https://love2d.org/wiki/Getting_Started#Running_Games),
optionally with a file path to edit.

To run from the terminal, [pass this directory to LÖVE](https://love2d.org/wiki/Getting_Started#Running_Games).
You'll see a page that's currently hard-coded in the app.
![initial view](assets/1.png)
All text is currently editable. There's a table on the right that will grow
and shrink as you add and delete text.

Alternatively, turn it into a .love file you can double-click on:
```
$ zip -r /tmp/text.love *.lua
```

Changes you make are currently not saved. This is just a demo.
To pan, drag the surface around. To increase/decrease zoom, press `ctrl+=`,
`ctrl+-` respectively. To reset zoom press `ctrl+0`.

By default, it reads/writes the file `lines.txt` in your default
user/home directory (`https://love2d.org/wiki/love.filesystem.getUserDirectory`).

To edit formatting you'll need to modify the code for the app. To do
this live without restarting the app each time, install a separate [driver
app](TODO).

To open a different file, drop it on the app window.

![making changes without restarting the app](assets/2.gif)

Its immediate upstream is [text.love](https://codeberg.org/akkartik/text.love),
a version without support for line drawings. Updates to it can be downloaded
from:

Updates to it can be downloaded from:

* https://codeberg.org/akkartik/template-live-editor.love

* https://codeberg.org/akkartik/luaML.love