A simple SVG markup editor for the web
Made it so that the text editor is properly indented according to the length of the output
2 files changed, 31 insertions, 13 deletions
| Status | File Name | N° Changes | Insertions | Deletions |
| Modified | css/styles.css | 8 | 5 | 3 |
| Modified | src/Editor.elm | 36 | 26 | 10 |
diff --git a/css/styles.css b/css/styles.css @@ -16,6 +16,8 @@ --attribute: var(--accent); --string: #A5FF90; --comm: #B362FF; + + --indent: 3em; } body { @@ -134,9 +136,9 @@ body { white-space: pre; overflow: scroll; - width: calc(100% - 3em); + width: calc(100% - var(--indent)); height: 100%; - margin-left: 3em; + margin-left: var(--indent); font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace; font-size: 15pt; @@ -182,7 +184,7 @@ body { .elmsh-line::before { display: inline-block; - width: 2em; + width: calc(var(--indent) - 1em); margin-right: 1em; content: attr(data-elmsh-lc);
diff --git a/src/Editor.elm b/src/Editor.elm @@ -11,16 +11,32 @@ import SyntaxHighlight exposing (xml, toBlockHtml) editor : Model -> Html Msg editor model = - div - [ id "editor" - , region - , label "Text editor" - ] - [ div - [ hidden True, translate model.editorScroll ] - [ codeDisplay model ] - , textarea model - ] + let + -- Indent the editor according to the order of magnitude of the number of + -- lines in the input file + indent + = model.image + |> String.lines + |> List.length + |> toFloat + |> logBase 10 + |> floor + |> (+) 1 + |> max 1 + |> String.fromInt + |> \s -> "--indent: " ++ s ++"em;" + in + div + [ id "editor" + , region + , label "Text editor" + , attribute "style" indent + ] + [ div + [ hidden True, translate model.editorScroll ] + [ codeDisplay model ] + , textarea model + ] textarea : Model -> Html Msg textarea model =