+
onFocusChange(true)}
+ onBlur={() => onFocusChange(false)}
+ onKeyDown={onKeyDown}
+ />
+
+ );
+}
+
+// function caretPos(): (
+// | (number & { range: false })
+// | ([number, number] & { range: true })
+// ) & { [Symbol.iterator](): Generator
} {
+// let {
+// anchorOffset: base,
+// anchorNode: baseNode,
+// focusOffset: focus,
+// focusNode,
+// } = document.getSelection()!;
+
+// base +=
+// Number.parseInt(
+// baseNode?.parentElement?.getAttribute("data-range-start") ?? "0"
+// ) ?? 0;
+// focus +=
+// Number.parseInt(
+// focusNode?.parentElement?.getAttribute("data-range-start") ?? "0"
+// ) ?? 0;
+
+// const scalar = base === focus;
+// const position = scalar
+// ? base
+// : [Math.min(base, focus), Math.max(base, focus)];
+
+// return Object.assign(position, {
+// range: !scalar,
+// [Symbol.iterator]: function* () {
+// if (Array.isArray(position)) {
+// yield position[0];
+// yield position[1];
+// } else {
+// yield position;
+// }
+// },
+// }) as ReturnType;
+// }
diff --git a/src/lib/markdown.tsx b/src/lib/markdown.tsx
new file mode 100644
index 0000000..65e0529
--- /dev/null
+++ b/src/lib/markdown.tsx
@@ -0,0 +1,165 @@
+import { RefObject } from "react";
+
+type Event = ((...args: T) => void) & {
+ on: (callback: (...args: T) => void) => void;
+ once: (callback: (...args: T) => void) => void;
+ off: (callback: (...args: T) => void) => void;
+};
+function Event(): Event {
+ let listeners: ((...args: T) => void)[] = [];
+ const callable = ((...args: T) => {
+ for (const listener of listeners) listener(...args);
+ }) as Event;
+
+ callable.on = (callback) => {
+ listeners.push(callback);
+ };
+ callable.off = (callback) => {
+ const index = listeners.findIndex((other) => other === callback);
+ listeners = [
+ ...listeners.slice(0, index),
+ ...listeners.slice(index + 1),
+ ];
+ };
+ callable.once = (callback) => {
+ const closure = (...args: T) => {
+ callback(...args);
+ callable.off(closure);
+ };
+ callable.on(closure);
+ };
+
+ return callable;
+}
+
+abstract class Node {
+ private _start: number;
+ public get start() {
+ return this._start;
+ }
+ protected set start(value: number) {
+ this._start = value;
+
+ this.BoundChange(this._start, undefined);
+ }
+
+ private _end: number;
+ public get end() {
+ return this._end;
+ }
+ protected set end(value: number) {
+ this._end = value;
+
+ this.BoundChange(undefined, this._end);
+ }
+
+ public readonly BoundChange: Event<
+ [number, undefined] | [undefined, number]
+ > = Event();
+
+ public NodeCreated: Event<[Node]> = Event();
+
+ public node: globalThis.Node;
+ public constructor(offset: number) {
+ this._start = offset;
+ this._end = offset;
+
+ this.node = this.createElement();
+ console.log(this.node);
+
+ this.NodeCreated(this);
+ }
+
+ protected abstract _textAt(position: number): Text;
+ public textAt(position: number): Text {
+ console.assert(position >= this._start && position <= this._end);
+ return this._textAt(position);
+ }
+
+ public abstract createElement(): globalThis.Node;
+}
+
+abstract class NodeCollection extends Node {
+ collection: (T | Text)[] = [];
+
+ protected _textAt(position: number): Text {
+ if (this.collection.length === 0) {
+ const text = new Text(this.start);
+
+ this.NodeCreated(text);
+ this.collection.push(text);
+
+ this.node.appendChild(text.node);
+
+ return text;
+ }
+
+ let i;
+ for (i = 0; i < this.collection.length; i++) {
+ const node = this.collection[i];
+ if (node.start > position) break;
+ if (node.end <= position) continue;
+ return node.textAt(position);
+ }
+
+ const prev = this.collection[i - 1];
+ console.assert(prev);
+
+ if (prev.end === position) {
+ const text = new Text(position);
+
+ this.NodeCreated(text);
+ this.collection.push(text);
+
+ this.node.insertBefore(text.node, prev.node.nextSibling);
+
+ return text;
+ }
+
+ return prev.textAt(position);
+ }
+}
+
+export class Text extends Node {
+ private text: string = "";
+ public TextChange: Event<[string]> = Event();
+
+ public constructor(offset: number) {
+ super(offset);
+ }
+
+ _textAt(_: number): Text {
+ return this;
+ }
+
+ public createElement(): globalThis.Node {
+ const node = document.createTextNode("");
+
+ return node;
+ }
+}
+
+export class Paragraph extends NodeCollection {
+ public createElement(): globalThis.Node {
+ const node = document.createElement("p");
+
+ return node;
+ }
+}
+
+export class Markdown extends NodeCollection {
+ public lookup: Map = new Map();
+
+ public constructor(element: HTMLDivElement) {
+ super(0);
+ this.NodeCreated.on((node) => {
+ console.log("created node:", node);
+
+ this.lookup.set(node.node, node);
+ });
+ }
+
+ public createElement(): globalThis.Node {
+ return 0 as never;
+ }
+}
diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx
new file mode 100644
index 0000000..59ada3a
--- /dev/null
+++ b/src/lib/theme.tsx
@@ -0,0 +1,21 @@
+const DefaultTheme = {
+ background: "#ededed",
+ contrast: "#f1f1f1",
+} as const;
+
+/** @deprecated */
+export interface Theme extends Record {}
+export class Theme {
+ private constructor() {
+ for (const key in DefaultTheme) {
+ this[key as keyof Theme] =
+ DefaultTheme[key as keyof typeof DefaultTheme];
+ }
+ }
+
+ public static default() {
+ return new Theme();
+ }
+
+ public static parse() {}
+}