stashing

src/components/textarea/textarea.tsx

@@ -58,6 +58,13 @@ export function Textarea(props: TextareaProps) {
         }))
     }, 300);
 
+    const onInput = (e: InputEvent) => {
+        const target = e.target as HTMLElement;
+
+        console.log(e);
+        console.log(target.innerText, target.textContent, target.innerHTML);
+    };
+
     const onKeyUp = (e: KeyboardEvent) => {
         e.stopPropagation();
         e.preventDefault();
@@ -92,6 +99,7 @@ export function Textarea(props: TextareaProps) {
         class={`${css.textarea} ${props.class}`}
         lang={props.lang}
         dir="auto"
+        oninput={onInput}
         onkeyup={onKeyUp}
         on:keydown={e => e.stopPropagation()}
         on:pointerdown={e => e.stopPropagation()}

src/features/source/index.ts

@@ -0,0 +1,6 @@
+
+export type { Source } from './source';
+
+export { createParser as createHtmlParser } from './parser/html';
+export { createParser as createMarkdownParser } from './parser/markdown';
+export { createSource } from './source';

src/features/source/parser.ts

@@ -0,0 +1,28 @@
+enum Decoration {
+    None = 0,
+    Bold = 1,
+    Italic = 2,
+    Underline = 4,
+    StrikeThrough = 8,
+}
+
+interface TextNode {
+    type: 'text';
+    decoration: Decoration;
+    nodes: (string | Node)[];
+}
+
+interface HeaderNode {
+    type: 'header';
+    nodes: Node[];
+}
+
+type Node = TextNode | HeaderNode;
+
+export interface RichTextAST {
+    nodes: Node[];
+}
+
+export interface Parser {
+    parse(source: string): RichTextAST;
+}

src/features/source/parser/html.ts

@@ -0,0 +1,9 @@
+import { Parser } from "../parser";
+
+export function createParser(): Parser {
+    return {
+        parse(value) {
+            return {};
+        },
+    };
+}

src/features/source/parser/markdown.ts

@@ -0,0 +1,80 @@
+import { Parser } from "../parser";
+
+export function createParser(): Parser {
+    return {
+        parse(source) {
+            // console.log(source);
+
+            for (const token of tokenize(source)) {
+                console.log(token);
+            }
+
+            return {
+                nodes: [],
+            };
+        },
+    };
+}
+
+// const states = {
+//     none(): State {
+
+//     },
+// } as const;
+
+
+type Token = { start: number, length: number } & (
+    | { kind: 'bold' }
+    | { kind: 'italic' }
+    | { kind: 'underline' }
+    | { kind: 'strikethrough' }
+    | { kind: 'header', level: number }
+    | { kind: 'text', value: string }
+);
+function* tokenize(characters: string): Generator<Token, void, unknown> {
+    let buffer: string = '';
+    let clearBuffer = false;
+    let start = 0;
+    let i = 0;
+
+    for (const character of characters) {
+        if (buffer.length === 0) {
+            start = i;
+        }
+
+        buffer += character;
+        const length = buffer.length;
+
+        if (buffer === '**') {
+            yield { kind: 'bold', start, length };
+            clearBuffer = true;
+        }
+        else if (buffer === '') {
+            yield { kind: 'italic', start, length };
+            clearBuffer = true;
+        }
+        else if (buffer === ':') {
+            yield { kind: 'underline', start, length };
+            clearBuffer = true;
+        }
+        else if (buffer === ':') {
+            yield { kind: 'strikethrough', start, length };
+            clearBuffer = true;
+        }
+        else if (buffer.length > 1 && buffer.startsWith('#') && buffer.endsWith(' ')) {
+            yield { kind: 'header', start, length, level: buffer.length - 1 };
+            clearBuffer = true;
+        }
+        else if (buffer.length > 1 && buffer.startsWith('"') && buffer.endsWith('"')) {
+            yield { kind: 'text', start, length, value: buffer.slice(1, buffer.length - 1) };
+            clearBuffer = true;
+        }
+
+        if (clearBuffer) {
+            buffer = '';
+            clearBuffer = false;
+        }
+
+        i++;
+    }
+}

src/features/source/source.ts

@@ -0,0 +1,31 @@
+import { createEffect, createSignal, Signal } from "solid-js";
+import { Parser, RichTextAST } from "./parser";
+
+export interface Source<TIn extends Parser, TOut extends Parser> {
+    readonly in: Signal<string>;
+    readonly out: Signal<string>;
+}
+
+export function createSource<TIn extends Parser, TOut extends Parser>(inParser: TIn, outParser: TOut, initalValue: string): Source<TIn, TOut> {
+    const [inValue, setIn] = createSignal<string>(initalValue);
+    const [outValue, setOut] = createSignal<string>('');
+
+    const [ast, setAst] = createSignal<RichTextAST>();
+
+    createEffect(() => {
+        setAst(inParser.parse(inValue()));
+    });
+
+    createEffect(() => {
+        setAst(outParser.parse(outValue()));
+    });
+
+    return {
+        get in() {
+            return [inValue, setIn] as Signal<string>;
+        },
+        get out() {
+            return [outValue, setOut] as Signal<string>;
+        },
+    };
+}

src/routes/(editor)/edit.tsx

@@ -15,6 +15,7 @@ import { writeClipboard } from "@solid-primitives/clipboard";
 import { destructure } from "@solid-primitives/destructure";
 import css from "./edit.module.css";
 import { contentsOf } from "~/features/file/helpers";
+import { createHtmlParser, createMarkdownParser, createSource } from "~/features/source";
 
 const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches;
 
@@ -389,17 +390,52 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
 
     const copyKey = createCommand('page.edit.command.copyKey', (key: string) => writeClipboard(key));
 
-    return <Grid rows={rows()} locales={locales()} api={setApi}>{
-        key => {
-            return <Context.Root commands={[copyKey.with(key)]}>
-                <Context.Menu>{
-                    command => <Command.Handle command={command} />
-                }</Context.Menu>
+    const tempVal = `
+# Header
 
-                <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
-            </Context.Root>;
-        }
-    }</Grid>;
+this is **a string** that contains bolded text
+
+this is *a string* that contains italicized text
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+>
+>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+
+> #### The quarterly results look great!
+>
+> - Revenue was off the chart.
+> - Profits were higher than ever.
+>
+>  *Everything* is going according to **plan**.
+
+- First item
+- Second item
+- Third item
+- Fourth item
+    `;
+    const { out: [html, update] } = createSource(createMarkdownParser(), createHtmlParser(), tempVal);
+
+    createEffect(() => {
+        console.log(html());
+    });
+
+    return <>
+        <div contentEditable innerHTML={html()} />
+
+        <Grid rows={rows()} locales={locales()} api={setApi}>{
+            key => {
+                return <Context.Root commands={[copyKey.with(key)]}>
+                    <Context.Menu>{
+                        command => <Command.Handle command={command} />
+                    }</Context.Menu>
+
+                    <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
+                </Context.Root>;
+            }
+        }</Grid>
+    </>;
 };
 
 const Blank: Component<{ open: CommandType }> = (props) => {