From a41a4dc6e6ba8d290ad961c6e957af196b9e5bc4 Mon Sep 17 00:00:00 2001
From: set <set>
Date: Wed, 18 Sep 2024 16:32:25 +0200
Subject: [PATCH] Implemented a units settings page

---
 listbox.css                |  75 ++++++
 settings.css               |  22 ++
 src/components/listbox.tsx |  86 +++++++
 src/components/setting.tsx |  65 +++++
 src/formula.tsx            |  20 +-
 src/main.ts                |  29 +--
 src/settingsTab.tsx        | 208 ++++++++++++++--
 src/spreadsheet.tsx        | 469 ++++++-------------------------------
 src/table.tsx              |   8 +-
 src/viewport.tsx           | 396 +++++++++++++++++++++++++++++++
 styles.css                 |  33 ++-
 11 files changed, 963 insertions(+), 448 deletions(-)
 create mode 100644 listbox.css
 create mode 100644 settings.css
 create mode 100644 src/components/listbox.tsx
 create mode 100644 src/components/setting.tsx
 create mode 100644 src/viewport.tsx

diff --git a/listbox.css b/listbox.css
new file mode 100644
index 0000000..b828e4f
--- /dev/null
+++ b/listbox.css
@@ -0,0 +1,75 @@
+.list-box {
+    -webkit-app-region: no-drag;
+    background: var(--background-modifier-form-field);
+    border: var(--input-border-width) solid var(--background-modifier-border);
+    color: var(--text-normal);
+    font-family: inherit;
+
+    font-size: var(--font-ui-small);
+    border-radius: var(--input-radius);
+    outline: none;
+
+    overflow: hidden;
+}
+
+.list-item {
+    display: flex;
+    margin: 0 0;
+    padding: var(--size-2-1) var(--size-4-2);
+    font-size: var(--font-ui-smaller);
+    white-space: nowrap;
+    word-break: keep-all;
+    
+    align-items: center;
+    gap: var(--size-2-1);
+}
+
+.list-item:focus, .list-item.active {
+    background: var(--text-selection);
+}
+
+.list-box:focus .list-item:focus, .list-box:focus .list-item.active {
+    background: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+    color: var(--text-on-accent);
+}
+
+.list-box-viewport {
+    flex: 1;
+}
+
+.icon-button:hover {
+    background: var(--text-selection);
+}
+
+textarea.command-editor {
+    resize: vertical;
+    width: 100%;
+    font-family: var(--font-monospace-theme), monospace;
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    padding: 0 var(--size-4-2);
+    align-items: center;
+    width: 100%;
+    background: var(--color-base-20);
+}
+
+.button-group .icon-button {
+    background: none;
+    border: none;
+    box-shadow: none;
+    line-height: 1em;
+    /*padding: var(--size-2-2);*/
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+    gap: var(--size-2-2);
+}
+
+.fill {
+    flex: 1;
+}
\ No newline at end of file
diff --git a/settings.css b/settings.css
new file mode 100644
index 0000000..2a03933
--- /dev/null
+++ b/settings.css
@@ -0,0 +1,22 @@
+.spreadsheet-settings {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    
+    grid-template-areas: 
+        'datatypes editor';
+
+    gap: var(--size-2-2);
+}
+
+.spreadsheet-settings > .list-box {
+    grid-area: datatypes;
+    resize: horizontal;
+}
+
+.spreadsheet-settings > .editor {
+    grid-area: editor;
+}
+
+input.monospace {
+    font-family: var(--font-monospace-theme);
+}
\ No newline at end of file
diff --git a/src/components/listbox.tsx b/src/components/listbox.tsx
new file mode 100644
index 0000000..af15d66
--- /dev/null
+++ b/src/components/listbox.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import * as lucide from "lucide-react";
+
+export interface Controls {
+    onAdd?: (e: React.MouseEvent) => void,
+    onDelete?: (item: number) => void,
+    onSwap?: (item: number, item2: number) => boolean,
+    onSelect?: (index: number) => void,
+}
+
+export default function ListBox(props: {
+    children: React.ReactNode[],
+    controls: Controls
+}) {
+    const [state, setState] = React.useState({
+        index: 0,
+        refs: props.children?.map(_ => React.createRef<HTMLDivElement>()) ?? []
+    });
+
+    const setSelection = (move: { rel: number } | { abs: number }) => {
+        const index = 'rel' in move ? (props.children.length + state.index + move.rel) % props.children.length : move.abs % props.children.length;
+
+        setState(prev => ({
+            ...prev,
+            index
+        }));
+
+        props.controls.onSelect?.(index);
+    };
+
+    return <div
+        className="list-box"
+        tabIndex={0}
+        onKeyUp={e => ({
+            "uparrow": e => setSelection({rel: -1}),
+            "downarrow": e => setSelection({rel: 1}),
+        } as Record<string, (e: React.KeyboardEvent) => void>)[e.key.toLowerCase() as string]?.(e)}>
+
+        <div className={"list-box-controls"}>
+            <div className={"button-group"}>
+                {props.controls.onAdd ? <div className="icon-button"
+                                             tabIndex={0}
+                                             onClick={e => {
+                                                 props.controls?.onAdd!(e);
+                                             }}>
+                    <lucide.Plus size={14}/>
+                </div> : null}
+
+                {props.controls.onDelete ? <div className="icon-button"
+                                                tabIndex={0}
+                                                onClick={() => {
+                                                    props.controls?.onDelete!(state.index);
+                                                }}>
+                    <lucide.Minus size={14}/>
+                </div> : null}
+                {props.controls.onSwap ? <>
+                    <div className="icon-button"
+                         tabIndex={0}
+                         onClick={() => {
+                             if (props.controls?.onSwap!(state.index, state.index - 1))
+                                 setSelection({rel: -1})
+                         }}>
+                        <lucide.ChevronUp size={14}/>
+                    </div>
+                    <div className="icon-button"
+                         tabIndex={0}
+                         onClick={() => {
+                             if (props.controls?.onSwap!(state.index, state.index + 1))
+                                 setSelection({rel: 1})
+                         }}>
+                        <lucide.ChevronDown size={14}/>
+                    </div>
+                </> : null}
+            </div>
+        </div>
+
+        {props.children.map((item, a) => <div
+            key={`list-box-item-${a}`}
+            className={`list-item${state.index == a ? " active" : ""}`}
+            ref={state.refs[a]}
+            onClick={_ => setSelection({abs: a})}>
+            {item}
+        </div>)}
+
+    </div>
+}
diff --git a/src/components/setting.tsx b/src/components/setting.tsx
new file mode 100644
index 0000000..98baf05
--- /dev/null
+++ b/src/components/setting.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import * as obs from "obsidian";
+
+type types = Button | Line | Dropdown | Toggle;
+
+type Button = { buttonText: string, onClick: () => void };
+type Line = {
+    onChange: (value: string) => void,
+    lineFormat: RegExp,
+    value: string,
+    placeholder?: string
+};
+type Dropdown = {
+    onChange: (value: string) => void,
+    options: Record<string, string>,
+    value: string,
+};
+type Toggle = {
+    onChange: (checked: boolean) => void,
+    checked: boolean,
+};
+
+export default function Setting(props: { title: string, description?: string } & types) {
+    const ref = React.createRef<HTMLDivElement>();
+
+    React.useEffect(() => {
+        const setting = new obs.Setting(ref.current!)
+            .setName(props.title)
+            .setDesc(props.description ?? '');
+
+        if ("buttonText" in props)
+            setting
+                .addButton(btn => btn
+                    .setButtonText(props.buttonText)
+                    .onClick(props.onClick))
+
+        else if ("lineFormat" in props)
+            setting
+                .addText(cb => {
+                    cb.inputEl.pattern = props.lineFormat.source;
+                    return cb
+                        .setValue(props.value)
+                        .setPlaceholder(props.placeholder ?? '')
+                        .onChange(value => {
+                            if (cb.inputEl.validity.valid)
+                                props.onChange(value);
+                        });
+                })
+
+        else if ("options" in props)
+            setting
+                .addDropdown(dropdown => dropdown
+                    .addOptions(props.options)
+                    .setValue(props.value)
+                    .onChange(value => props.onChange(value)));
+
+        else if ("checked" in props)
+            setting
+                .addToggle(toggle => toggle
+                    .setValue(props.checked)
+                    .onChange(checked => props.onChange(checked)));
+    }, []);
+
+    return <div ref={ref}></div>;
+}
diff --git a/src/formula.tsx b/src/formula.tsx
index e03801f..d3d97ec 100644
--- a/src/formula.tsx
+++ b/src/formula.tsx
@@ -3,7 +3,7 @@ import * as chrono from 'chrono-node';
 import * as luxon from 'luxon';
 import * as obs from 'obsidian';
 
-import {Value} from "./spreadsheet.js";
+import {Value, Selection} from "./viewport.js";
 import {DEFAULT_ROW_HEIGHT} from "./table.js";
 
 export type ResizeState = {
@@ -15,7 +15,7 @@ export type ResizeState = {
     prevMouseY: number,
 };
 
-export default function FormulaBar(props: { activeCell: Value }) {
+export default function FormulaBar(props: { selection: Selection.CellGroup[] }) {
     const [resize, setResize] = React.useState<ResizeState>({
         isResizing: false,
         height: DEFAULT_ROW_HEIGHT
@@ -49,7 +49,6 @@ export default function FormulaBar(props: { activeCell: Value }) {
     return <div className={"formula"}
                 style={{height: `${resize.height}px`}}>
         <div className={"custom-input"}>
-            {props.activeCell.renderer().formula(props.activeCell)}
         </div>
         <span
             className={"resize-handle horizontal"}
@@ -78,11 +77,15 @@ export namespace renderers {
         },
         formula<Props extends Value>(props: Props): React.ReactNode {
             React.useSyncExternalStore(props.onChange, () => props.getRaw());
-            // const ref = React.createRef<HTMLTextAreaElement>();
-            // setTimeout(() => ref.current?.focus());
+            const ref = React.createRef<HTMLTextAreaElement>();
+            
+            React.useEffect(() => {
+                ref.current?.focus();
+                ref.current?.select();
+            }, [props]);
 
             return <textarea
-                // ref={ref}
+                ref={ref}
                 autoFocus={true}
                 value={props.getRaw()}
                 onChange={e => props.setRaw(e.target.value)}/>
@@ -102,6 +105,11 @@ export namespace renderers {
                     {"Invalid Date"}
                 </span>
 
+            React.useEffect(() => {
+                // ref.current?.focus();
+                // ref.current?.select();
+            }, [props]);
+
             const date = luxon.DateTime.fromJSDate(parsed);
 
             return <span className={"raw"}>
diff --git a/src/main.ts b/src/main.ts
index 8e253ad..29db836 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,27 +1,21 @@
 import * as path from 'node:path';
 import * as obs from 'obsidian';
 
-import Spreadsheet, {SPREADSHEET_VIEW} from "./spreadsheet.js";
-import SettingsTab from "./settingsTab.js";
+import Spreadsheet, {SPREADSHEET_VIEW} from "./viewport.js";
+import SettingsTab, { default_settings, Settings } from "./settingsTab.js";
 
 export default class SpreadsheetPlugin extends obs.Plugin {
-    settings: SettingsTab | null = null;
+    settingsTab: SettingsTab | null = null;
+    settings: Settings = default_settings;
 
     async onload() {
         this.registerView(SPREADSHEET_VIEW, leaf => new Spreadsheet(leaf));
         this.registerExtensions(["csv", "tab"], SPREADSHEET_VIEW);
 
-        this.addSettingTab(this.settings = new SettingsTab(this.app, this));
+        this.addSettingTab(this.settingsTab = new SettingsTab(this.app, this));
 
-        this.addCommand({
-            id: "open-new-spreadsheet",
-            name: "New Spreadsheet",
-            callback: async () => {
-                // this.app.vault.create(obs.normalizePath(i));
-                // this.app.vault.getRoot
-                // return await this.app.workspace.getLeaf(true).setViewState({ type: SPREADSHEET_VIEW, active: true });
-            }
-        });
+        this.settings = await this.loadData()
+            .then(res => Object.assign({}, default_settings, res));
 
         this.registerEvent(this.app.workspace.on("file-menu", (menu, file) => menu
             .addItem(item => item
@@ -43,13 +37,4 @@ export default class SpreadsheetPlugin extends obs.Plugin {
             }
         }).commands.executeCommandById(command);
     }
-
-    async loadSettings() {
-        this.settings?.load(await this.loadData());
-		// this.settings = Object.assign({}, default_settings, await this.loadData());
-	}
-
-	async saveSettings() {
-		await this.saveData(this.settings?.get());
-	}
 }
\ No newline at end of file
diff --git a/src/settingsTab.tsx b/src/settingsTab.tsx
index 2dcb405..3f50cc2 100644
--- a/src/settingsTab.tsx
+++ b/src/settingsTab.tsx
@@ -1,42 +1,212 @@
 import * as React from 'react';
 import * as rdom from 'react-dom/client';
 import * as obs from 'obsidian';
+import * as icons from 'lucide-react';
 
-import units, {Unit} from "./units.js";
+import units, { Unit } from "./units.js";
 import SpreadsheetPlugin from "./main.js";
+import ListBox from './components/listbox.js';
+import Setting from './components/setting.js';
 
 export interface Settings {
-    units: Unit[]
+    units: Unit[],
+    dataTypes: ({ name: string } & Datatype)[]
 }
 export const default_settings: Settings = {
-    units
+    units,
+    dataTypes: [{
+        name: 'Date',
+        // This pattern will incorrectly pass things like the 14th month.
+        format: '(\\d{4}-[01]\\d-[0-3]\\dT[0-2]\\d:[0-5]\\d:[0-5]\\d\\.\\d+)|(\\d{4}-[01]\\d-[0-3]\\dT[0-2]\\d:[0-5]\\d:[0-5]\\d)|(\\d{4}-[01]\\d-[0-3]\\dT[0-2]\\d:[0-5]\\d)'
+    }]
 };
 
+export type Datatype = Text | Numeric | List;
+export type Text = {
+    format: string
+};
+export type List = {
+    options: string[],
+    multiple: boolean
+};
+export type Numeric = {
+    unit: Unit,
+    format: string,
+    metric: boolean
+}
+
 export default class SettingsTab extends obs.PluginSettingTab {
     private root: rdom.Root | null = null;
-    settings: Settings = default_settings;
 
-    constructor(readonly app: obs.App, private plugin: SpreadsheetPlugin) {
+    constructor(readonly app: obs.App, readonly plugin: SpreadsheetPlugin) {
         super(app, plugin);
     }
 
-    load(settings: Partial<Settings>) {
-
-    }
-
-    get(): Settings {
-        return Object.freeze({ ...this.settings });
-    }
-
     display() {
         (this.root = rdom.createRoot(this.containerEl))
-            .render(<div>
-
-            </div>);
+            .render(<SpreadsheetSettings tab={this} />);
     }
 
     hide() {
-        if (this.root)
-            this.root.unmount();
+        this.root?.unmount();
     }
-}
\ No newline at end of file
+}
+
+export function SpreadsheetSettings(props: { tab: SettingsTab }) {
+    const [settings, setSettings] = React.useState(props.tab.plugin.settings);
+    const [state, setState] = React.useState({ highlightedDatatype: 0 });
+
+    React.useEffect(() => void props.tab.plugin.saveData(Object.assign(props.tab.plugin.settings, settings)), [settings]);
+
+    return <div className="spreadsheet-settings">
+        <ListBox controls={{
+            onSelect: i => setState(prev => ({ ...prev, highlightedDatatype: i })),
+            onAdd: e => onAddMenu(setSettings, setState).showAtMouseEvent(e.nativeEvent),
+            onDelete: item => setSettings(prev => ({
+                ...prev,
+                dataTypes: [...prev.dataTypes.slice(0, item), ...prev.dataTypes.slice(item + 1)]
+            })),
+        }}>
+            {settings.dataTypes.map(i => ({
+                'text': () => <>
+                    <icons.TextCursorInput size={14} />
+                    <label>{i.name}</label>
+                </>,
+                'numeric': () => <>
+                    <icons.Ruler size={14} />
+                    <label>{i.name}</label>
+                </>,
+                'list': () => <>
+                    <icons.List size={14} />
+                    <label>{i.name}</label>
+                </>,
+            } as const)[getDatatype(i)]())}
+        </ListBox>
+
+        <section className='editor'>
+            {settings.dataTypes[state.highlightedDatatype] ? 
+                ({
+                    'text': (text: Text & { name: string }) => <TextFormatEditor text={text} key={`text-editor-${state.highlightedDatatype}`}/>,
+                    'numeric': (numeric: Numeric & { name: string }) => <NumericFormatEditor numeric={numeric} key={`numeric-editor-${state.highlightedDatatype}`}/>,
+                    'list': (list: List & { name: string }) => <ListEditor list={list} key={`list-editor-${state.highlightedDatatype}`}/>,
+                } as const)[getDatatype(settings.dataTypes[state.highlightedDatatype])]?.(settings.dataTypes[state.highlightedDatatype] as any) ?? null
+            : null}
+        </section>
+    </div>
+}
+
+export function TextFormatEditor(props: { text: Text & { name: string } }) {
+    const [text, setText] = React.useState(props.text);
+
+    React.useEffect(() => void Object.assign(props.text, text), [text]);
+
+    return <>
+        <div className="flex">
+            <input type="text" value={text.name} onChange={e => setText(prev => ({ ...prev, name: e.target.value }))} className="fill" />
+        </div>
+
+        <Setting title="format"
+                 description="Your textual datatype should have a format associated with it validate it against user input, and to extract necessary information from it. Any regular expression is valid here."
+                 lineFormat={/^.*$/}
+                 value={text.format}
+                 onChange={format => setText(prev => ({ ...prev, format: format }))} />
+    </>;
+}
+
+export function NumericFormatEditor(props: { numeric: Numeric & { name: string } }) {
+    const [numeric, setNumeric] = React.useState(props.numeric);
+
+    React.useEffect(() => void Object.assign(props.numeric, numeric), [numeric]);
+
+    return <>
+        <div className="flex">
+            <input type="text" value={numeric.name} onChange={e => setNumeric(prev => ({ ...prev, name: e.target.value }))} className="fill" />
+        </div>
+        
+        <Setting title="Format"
+                 description='How values of this unit are parsed/printed. The numeric value of your unit is substituted for {}.'
+                 lineFormat={/^[^\{]*\{\}[^\{]*$/}
+                 value={numeric.format}
+                 onChange={value => setNumeric(prev => ({
+                    ...prev,
+                    format: value
+                 }))}/>
+        <Setting title='Associated Unit' 
+                 description='Which unit is associated with this datatype. This value helps in automatic unit conversion.'
+                 options={{}}
+                 value=''
+                 onChange={unit => setNumeric(prev => ({
+                    ...prev,
+                    unit: null
+                 }))} />
+        <Setting title='Is metric unit' 
+                 description='If this unit is a metric unit, such as metre or gram, then the necessary unit convertions and prefixing will be done automatically.'
+                 checked={true}
+                 value=''
+                 onChange={metric => setNumeric(prev => ({
+                    ...prev,
+                    metric
+                 }))} />
+                 
+    </>;
+}
+
+export function ListEditor(props: { numeric: List & { name: string } }) {
+    const [numeric, setNumeric] = React.useState(props.numeric);
+
+    React.useEffect(() => void Object.assign(props.numeric, numeric), [numeric]);
+
+    return <>
+        <div className="flex">
+            <input type="text" value={numeric.name} onChange={e => setNumeric(prev => ({ ...prev, name: e.target.value }))} className="fill" />
+        </div>
+
+    </>;
+}
+
+export function onAddMenu(
+    setSettings: React.Dispatch<React.SetStateAction<Settings>>,
+    setState: React.Dispatch<React.SetStateAction<{ highlightedDatatype: number }>>,
+): obs.Menu {
+    const menu = new obs.Menu();
+
+    menu.addItem(item => item
+        .setTitle("Add Text Type")
+        .setIcon('text-cursor-input')
+        .onClick(e => setSettings(prev => ({
+            ...prev,
+            dataTypes: [...prev.dataTypes, {
+                name: '',
+                format: ''
+            }]
+        }))));
+
+    menu.addItem(item => item
+        .setTitle("Add Numeric Type")
+        .setIcon('ruler')
+        .onClick(e => setSettings(prev => ({
+            ...prev,
+            dataTypes: [...prev.dataTypes, {
+                name: '',
+                format: '',
+                unit: null,
+                metric: false
+            }]
+        }))));
+
+    menu.addItem(item => item
+        .setTitle("Add List Type")
+        .setIcon('list')
+        .onClick(e => setSettings(prev => ({
+            ...prev,
+            dataTypes: [...prev.dataTypes, {
+                name: '',
+                options: [],
+                multiple: false
+            }]
+        }))));
+
+    return menu;
+}
+
+export const getDatatype = (i: Datatype): 'text' | 'numeric' | 'list' => 'options' in i ? 'list' : 'unit' in i ? 'numeric' : 'text';
\ No newline at end of file
diff --git a/src/spreadsheet.tsx b/src/spreadsheet.tsx
index d04bd53..81853ea 100644
--- a/src/spreadsheet.tsx
+++ b/src/spreadsheet.tsx
@@ -1,35 +1,9 @@
-import * as obs from "obsidian";
-import * as React from "react";
-import * as rdom from "react-dom/client";
+import React from 'react';
+import * as obs from 'obsidian';
 
-import Table, { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, MIN_COLUMN_WIDTH, MIN_ROW_HEIGHT } from "./table.js";
-import FormulaBar, { CellRenderer, renderers } from "./formula.js";
-
-export const SPREADSHEET_VIEW = "spreadsheet-view";
-
-export interface FrontMatter extends Record<string, any> {
-    columnTypes?: string[],
-    explicitTypes?: { [cell in string]: string },
-    constrainToDefinedColumns?: boolean,
-
-    columnWidths?: number[],
-    rowHeights?: number[],
-
-    columnTitles?: string[],
-    allowedTypes?: string[],
-    columnSeparator?: string,
-    urlEscaped?: boolean
-}
-
-export interface Value {
-    setRaw(raw: string): void,
-
-    getRaw(): string,
-
-    onChange: (callback: (raw: string) => void) => () => void,
-
-    renderer(): CellRenderer
-}
+import Spreadsheet, { Selection } from './viewport.js';
+// import FormulaBar, { renderers } from './formula.js';
+import Table, { DEFAULT_COLUMN_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, MIN_ROW_HEIGHT } from './table.js';
 
 export type ResizeState = {
     isResizing: false,
@@ -40,383 +14,60 @@ export type ResizeState = {
     onResize: (size: { width: number, height: number }) => void
 };
 
-
-export function value(raw: string, sheet: Spreadsheet): Value {
-    const watches: ((raw: string) => void)[] = [];
-    let type: keyof typeof renderers = 'raw';
-
-    let lastUpdate: Date = new Date();
-
-    const value: Value = {
-        setRaw: data => {
-            raw = data;
-            for (const watch of watches)
-                watch(raw);
-        },
-        getRaw: () => raw,
-        onChange: callback => {
-            watches.push(callback);
-            return () => watches.includes(callback) ? void watches.splice(watches.indexOf(callback), 1) : void 0
-        },
-
-        renderer(): CellRenderer {
-            if (lastUpdate < sheet.lastChanged) {
-                const row = sheet.raw?.find(row => row.includes(value));
-                const col = row?.findIndex(cell => cell == value);
-
-                lastUpdate = new Date();
-
-                if (typeof col == "number")
-                    return renderers[type = sheet.columnType(col)];
-            }
-
-            return renderers[type];
-        }
-    };
-
-    return value;
-}
-
-export interface DocumentProperties {
-    frontMatter: FrontMatter;
-
-    separator: string;
-    uriEncoding: boolean;
-
-    columnTitles: string[];
-
-    columnTypes: string[];
-
-    columnWidths: number[];
-    rowHeights: number[];
-}
-
-export default class Spreadsheet extends obs.TextFileView {
-    raw: Value[][] = [[]];
-
-    private root: rdom.Root | null = null;
-    #change: Date = new Date();
-
-    get lastChanged(): Date {
-        return this.#change;
-    }
-
-    #props: DocumentProperties = {
-        frontMatter: {},
-
-        columnTitles: [],
-
-        columnTypes: [],
-
-        columnWidths: [],
-        rowHeights: [],
-
-        separator: ";",
-        uriEncoding: false
-    };
-
-    constructor(leaf: obs.WorkspaceLeaf) {
-        super(leaf);
-
-        const watchers: (() => void)[] = [];
-
-        const onExternalChange = function (this: Spreadsheet, watcher: () => void): () => void {
-            watchers.push(watcher);
-            return () => watchers.remove(watcher);
-        }.bind(this);
-
-        const notifyChange = () => watchers.forEach(i => i());
-
-        this.onExternalChange = onExternalChange;
-        this.notifyChange = notifyChange;
-
-        this.raw[0].push(value("", this));
-    }
-
-    public readonly onExternalChange: (watcher: () => void) => (() => void);
-    private readonly notifyChange: (() => void);
-
-    getViewData(): string {
-        const rows = [];
-
-        if (!this.documentProperties.frontMatter.columnTitles)
-            rows.push(this.documentProperties.columnTitles.map(i => this.documentProperties.uriEncoding ? encodeURIComponent(i) : i));
-
-        for (const row of this.raw)
-            rows.push(row
-                .map(i => i.getRaw())
-                .map(value => this.documentProperties.uriEncoding ? encodeURIComponent(value) : value));
-
-        return rows
-            .map(i => i.join(this.documentProperties.separator))
-            .join("\n");
-    }
-
-    public get documentProperties(): DocumentProperties {
-        return this.#props;
-    }
-
-    public columnType(col: number): keyof typeof renderers {
-        if (this.#props.columnTypes[col] in renderers)
-            return this.#props.columnTypes[col] as any;
-
-        return 'raw';
-    }
-
-    public updateDocumentProperties(update: (prev: DocumentProperties) => Partial<DocumentProperties>) {
-        this.#props = Object.freeze({
-            ...this.#props,
-            ...update(this.#props)
-        });
-
-        this.#change = new Date();
-
-        this.notifyChange();
-    }
-
-    setViewData(data: string, clear: boolean): void {
-        if (clear)
-            this.clear();
-
-        const frontMatterMarker = data.indexOf("---\n");
-
-        if (frontMatterMarker > -1) {
-            const end = data.indexOf("---\n", frontMatterMarker + 3);
-            this.parseFrontMatter(data.slice(frontMatterMarker + 3, end).trim());
-            data = data.slice(end + 3).trim();
-        }
-
-        const separator = this.documentProperties.separator ?? /[,;\t]/g;
-        const rows = data.trim().split(/\r?\n/);
-
-        if (!this.documentProperties.frontMatter?.columnTitles)
-            this.updateDocumentProperties(prev => ({
-                columnTitles: rows.shift()?.split(separator).map(i => this.documentProperties.uriEncoding ? decodeURIComponent(i) : i) ?? []
-            }));
-
-        const prevRaw = [...this.raw];
-        const prevProps = { ...this.documentProperties };
-        this.raw = [];
-
-        for (const [cells, row] of rows.map((i, row) => [i.split(separator), row] as const)) {
-            this.raw.push(new Array(this.documentProperties.columnTitles.length).fill("").map(cell => value(cell, this)));
-
-            for (const [raw, col] of cells.map((i, col) => [i, col] as const)) {
-                const prev = prevRaw[row]?.[col];
-
-                if (prev) {
-                    this.raw[row][col] = prev;
-                    if (prev.getRaw() != raw)
-                        prev.setRaw(raw);
-                } else
-                    this.raw[row][col] = value(raw, this);
-            }
-        }
-
-        this.updateDocumentProperties(prev => ({
-            ...prevProps,
-
-            columnTypes: new Array(this.documentProperties.columnTitles.length).fill("raw"),
-            columnWidths: new Array(this.documentProperties.columnTitles.length).fill(DEFAULT_COLUMN_WIDTH),
-            rowHeights: new Array(this.raw.length).fill(DEFAULT_ROW_HEIGHT)
-        }));
-    }
-
-    private parseFrontMatter(frontMatter: string): number {
-        this.updateDocumentProperties(prev => ({
-            frontMatter: obs.parseYaml(frontMatter)
-        }));
-
-        return frontMatter.length;
-    }
-
-    editFormat(col: number, format: string) {
-        this.updateDocumentProperties(prev => ({
-            columnTypes: prev.columnTypes.with(col, format)
-        }));
-    }
-
-    insertCol(col: number) {
-        // Warning: I see a potential for bugs here.
-        for (const row of this.raw)
-            row.splice(col + 1, 0, value("", this));
-
-        this.#change = new Date();
-
-        this.updateDocumentProperties(prev => ({
-            columnTitles: [...prev.columnTitles.slice(0, col + 1), `Column ${col + 2}`, ...prev.columnTitles.slice(col + 1)],
-            columnTypes: [...prev.columnTypes.slice(0, col + 1), 'raw', ...prev.columnTypes.slice(col + 1)],
-            columnWidths: [...prev.columnWidths.slice(0, col + 1), DEFAULT_COLUMN_WIDTH, ...prev.columnWidths.slice(col + 1)],
-        }));
-    }
-
-    insertRow(row: number) {
-        // Warning: I see a potential for bugs here.
-        this.raw.splice(row + 1, 0, new Array(this.#props.columnTypes.length).fill("").map(cell => value(cell, this)));
-        this.#change = new Date();
-
-        this.updateDocumentProperties(prev => ({
-            rowHeights: [...prev.rowHeights.slice(0, row + 1), DEFAULT_ROW_HEIGHT, ...prev.rowHeights.slice(row + 1)],
-        }));
-    }
-
-    removeCol(col: number) {
-        for (const row of this.raw)
-            row.splice(col, 1);
-
-        this.#change = new Date();
-        this.updateDocumentProperties(prev => ({
-            columnWidths: [...prev.columnWidths.slice(0, col), ...prev.columnWidths.slice(col + 1)],
-            columnTitles: [...prev.columnTitles.slice(0, col), ...prev.columnTitles.slice(col + 1)],
-            columnTypes: [...prev.columnTypes.slice(0, col), ...prev.columnTypes.slice(col + 1)]
-        }));
-    }
-
-    removeRow(row: number) {
-        this.raw.splice(row, 1);
-        this.#change = new Date();
-        this.updateDocumentProperties(prev => ({
-            rowHeights: [...prev.rowHeights.slice(0, row), ...prev.rowHeights.slice(row + 1)]
-        }));
-    }
-
-    clear(): void {
-        this.raw = [[]];
-    }
-
-    getViewType(): string {
-        return SPREADSHEET_VIEW
-    }
-
-    getDisplayText(): string {
-        return this.file?.basename ?? "Untitled Spreadsheet";
-    }
-
-    getIcon(): string {
-        return "sheet";
-    }
-
-    onPaneMenu(menu: obs.Menu, source: string) {
-        menu.addItem(item => item
-            .setIcon("settings")
-            .setTitle("Spreadsheet Preferences"));
-    }
-
-    protected async onOpen(): Promise<void> {
-        (this.root = rdom.createRoot(this.contentEl))
-            .render(<Ui sheet={this} />);
-    }
-
-    protected async onClose(): Promise<void> {
-        this.root?.unmount();
-    }
-}
-
-export namespace Selection {
-    export type CellGroup = Range | Column | Vector;
-    export type Range = { from: Cell, to: Cell };
-    export type Vector = Row | Column;
-    export type Column = { col: number };
-    export type Row = { row: number };
-    export type Cell = { row: number, col: number };
-
-    export const normaliseRange = (range: Range): Range => ({
-        from: {
-            row: Math.min(range.from.row, range.to.row),
-            col: Math.min(range.from.col, range.to.col)
-        },
-        to: {
-            row: Math.max(range.from.row, range.to.row),
-            col: Math.max(range.from.col, range.to.col)
-        }
-    });
-
-    export const isCell = (cell: CellGroup): cell is Cell => 'row' in cell && 'col' in cell;
-    export const isRange = (cell: CellGroup): cell is Range => 'from' in cell && 'to' in cell;
-    export const isVector = (cell: CellGroup): cell is Vector => !isCell(cell) && ('row' in cell || 'col' in cell);
-    export const isColumnVector = (cell: CellGroup): cell is Column => isVector(cell) && 'col' in cell;
-    export const isRowVector = (cell: CellGroup): cell is Row => isVector(cell) && 'row' in cell;
-
-    export const area = (range: CellGroup): number => {
-        if (isCell(range))
-            return 1;
-
-        else if (isVector(range))
-            return Infinity;
-
-        const norm = normaliseRange(range);
-        return ((norm.to.row + 1) - norm.from.row) * ((norm.to.col + 1) - norm.from.col);
-    };
-
-    export const eqCell = (left: Cell, right: Cell): boolean => left.col == right.col && left.row == right.row;
-    export const eqRange = (left: Range, right: Range): boolean => {
-        left = normaliseRange(left);
-        right = normaliseRange(right);
-
-        return eqCell(left.from, right.from) && eqCell(left.to, right.to);
-    }
-
-    export const eq = (left: Range | Cell, right: Range | Cell): boolean => {
-        left = isRange(left) ? normaliseRange(left) : left;
-        right = isRange(right) ? normaliseRange(right) : right;
-    
-        if (isCell(left) && isCell(right))
-            return eqCell(left, right);
-    
-        else if (isRange(left) && isRange(right))
-            return eqRange(left, right);
-    
-        // We have one range and one cell. The cell must have an area of 1.
-        else if (area(left) != area(right))
-            return false;
-    
-        // If the area's two components aren't equal, then fail
-        else if (isRange(left) ? !eqCell(left.from, left.to) : false || isRange(right) ? !eqCell(right.from, right.to) : false)
-            return false;
-    
-        return true;
-    };
-}
-
 export function Ui(props: { sheet: Spreadsheet }) {
-    const [active, setActive] = React.useState(props.sheet.raw[0][0]);
-    const [resize, setResize] = React.useState<ResizeState>({
+    // const [active, setActive] = React.useState(props.sheet.raw[0][0]);
+    const [, setResize] = React.useState<ResizeState>({
         isResizing: false,
     });
     const [isRenamingColumn, setIsRenamingColumn] = React.useState<null | number>(null);
 
     const [selection, setSelection] = React.useState({
-        selection: [] as Selection.CellGroup[],
-        startCell: null as null | Selection.Cell
+        selection: [{ row: 0, col: 0 }] as Selection.CellGroup[],
+        startCell: null as null | Selection.Cell | Selection.Vector
     });
 
     const documentProperties = React.useSyncExternalStore(props.sheet.onExternalChange, () => props.sheet.documentProperties);
 
-    const beginSelection = (start: Selection.Cell) => setSelection(prev => ({
+    const beginSelection = (start: Selection.Cell | Selection.Vector) => setSelection(prev => ({
         ...prev,
         startCell: start
     }));
     const alterSelection = (cell: Selection.Cell) => {};
-    const endSelection = (cell: Selection.Cell, replace: boolean) => {
+    const endSelection = (cell: Selection.Cell | Selection.Vector, replace: boolean) => {
         if (replace)
             setSelection(prev => ({
                 ...prev,
-                selection: (prev.startCell ? [Selection.normaliseRange({
-                    from: prev.startCell,
-                    to: cell,
-                })] : []).map(i => Selection.area(i) == 1 && Selection.isRange(i) ? i.from : i)
+                selection: prev.startCell ? [Selection.rangeFromCell(prev.startCell, cell)].filter((i: Selection.CellGroup | null): i is Selection.CellGroup => !!i) : []
             }));
         else
             setSelection(prev => ({
                 ...prev,
-                selection: [...prev.selection, ...prev.startCell ? [Selection.normaliseRange({
-                    from: prev.startCell,
-                    to: cell,
-                })] : []].map(i => Selection.area(i) == 1 && Selection.isRange(i) ? i.from : i)
+                selection: prev.startCell ? [...prev.selection, Selection.rangeFromCell(prev.startCell, cell)].filter((i: Selection.CellGroup | null): i is Selection.CellGroup => !!i) : prev.selection
             }));
     };
 
-    React.useEffect(() => console.log(selection), [selection]);
+    // React.useEffect(() => {
+    //     if (!selection.selection[0])
+    //         setActive(props.sheet.raw[0][0]);
+
+    //     else if (Selection.isCell(selection.selection[0]))
+    //         setActive(props.sheet.raw[selection.selection[0].row][selection.selection[0].col]);
+
+    //     else if (Selection.isRange(selection.selection[0])) {
+    //         const range = Selection.normaliseRange(selection.selection[0]);
+    //         setActive(props.sheet.raw[range.from.row][range.from.col]);
+    //     } else if (Selection.isRowVector(selection.selection[0]))
+    //         setActive(props.sheet.raw[selection.selection[0].row][0]);
+    //     else if (Selection.isColumnVector(selection.selection[0]))
+    //         setActive(props.sheet.raw[0][selection.selection[0].col])
+    //     else if (Selection.isRowVectorRange(selection.selection[0])) {
+    //         const range = Selection.normaliseVectorRange(selection.selection[0]) as Selection.RowVectorRange;
+    //         setActive(props.sheet.raw[range.from.row][0]);
+    //     } else if (Selection.isColumnVectorRange(selection.selection[0])) {
+    //         const range = Selection.normaliseVectorRange(selection.selection[0]) as Selection.ColumnVectorRange;
+    //         setActive(props.sheet.raw[0][range.from.col]);
+    //     }
+    // }, [selection]);
 
     return <section
         className={"table-widget"}
@@ -437,7 +88,7 @@ export function Ui(props: { sheet: Spreadsheet }) {
                     x: e.clientX,
                     y: e.clientY,
                 },
-                prevSize: size,
+                prevSize: size, 
                 onResize: prev.onResize
             };
         })}
@@ -448,7 +99,7 @@ export function Ui(props: { sheet: Spreadsheet }) {
 
         {/*<SelectionBar/>*/}
 
-        <FormulaBar activeCell={active} />
+        {/* <FormulaBar selection={selection.selection} /> */}
 
         <Table raw={props.sheet.raw}
             columnWidths={documentProperties.columnWidths}
@@ -467,7 +118,9 @@ export function Ui(props: { sheet: Spreadsheet }) {
                             gridRow: 1
                         }}
                         onContextMenu={e => columnContextMenu(e, col, props.sheet, setIsRenamingColumn)}
-                        onDoubleClick={e => setIsRenamingColumn(col)}>
+                        onDoubleClick={e => setIsRenamingColumn(col)}
+                        onMouseDown={e => beginSelection({ col })}
+                        onMouseUp={e => endSelection({ col }, true)}>
                         <div className={"column-title"}>
                             {isRenamingColumn == col ? <input
                                 type={"text"}
@@ -509,6 +162,8 @@ export function Ui(props: { sheet: Spreadsheet }) {
                         gridColumn: 1,
                         gridRow: row + 2
                     }}
+                    onMouseDown={e => beginSelection({ row })}
+                    onMouseUp={e => endSelection({ row }, true)}
                     onContextMenu={e => rowContextMenu(e, row, props.sheet)}>
                     <div className={"row-title"}>{row + 1}</div>
                     <span
@@ -540,6 +195,24 @@ export function Ui(props: { sheet: Spreadsheet }) {
                                     gridColumnEnd: selection.to.col + 3,
                                 }}/>
 
+                else if (Selection.isRowVectorRange(selection))
+                    return <div className="selection-range row-vector" 
+                                style={{
+                                    gridColumnStart: 1,
+                                    gridColumnEnd: props.sheet.raw[0].length + 2, // TODO: Figure out why CSS grid isn't accepting end values
+                                    gridRowStart: selection.from.row + 2,
+                                    gridRowEnd: selection.to.row + 3
+                                }}/>
+
+                else if (Selection.isColumnVectorRange(selection))
+                    return <div className="selection-range column-vector" 
+                                style={{
+                                    gridRowStart: 1,
+                                    gridRowEnd: props.sheet.raw.length + 2,
+                                    gridColumnStart: selection.from.col + 2,
+                                    gridColumnEnd: selection.to.col + 3
+                                }}/>
+
                 else if (Selection.isCell(selection))
                     return <div className="selection-range" 
                                 style={{
@@ -548,17 +221,21 @@ export function Ui(props: { sheet: Spreadsheet }) {
                                 }}/>
                 
                 else if (Selection.isColumnVector(selection))
-                    return <div className="selection-range" 
+                    return <div className="selection-range column-vector" 
                                 style={{
-                                    gridRow: '1 / -1',
+                                    // gridRow: '1 / -1',
+                                    gridRowStart: 1,
+                                    gridRowEnd: props.sheet.raw.length + 2,
                                     gridColumn: selection.col + 2
                                 }}/>
 
                 else if (Selection.isRowVector(selection))
-                    return <div className="selection-range" 
+                    return <div className="selection-range row-vector" 
                                 style={{
                                     gridRow: selection.row + 2,
-                                    gridColumn: '1 / -1',
+                                    gridColumnStart: 1,
+                                    gridColumnEnd: props.sheet.raw[0].length + 2
+                                    // gridColumn: '1 / -1',
                                 }}/>
             })}</>
 
@@ -580,11 +257,11 @@ export function columnContextMenu(e: React.MouseEvent, col: number, sheet: Sprea
             .setTitle("Set column format") as any as { setSubmenu: () => obs.Menu })
             .setSubmenu();
 
-        for (const [key, ren] of Object.entries(renderers))
-            submenu.addItem(item => item
-                .setIcon(ren.friendlyName.icon ?? null)
-                .setTitle(ren.friendlyName.label)
-                .onClick(_ => sheet.editFormat(col, key)));
+        // for (const [key, ren] of Object.entries(renderers))
+        //     submenu.addItem(item => item
+        //         .setIcon(ren.friendlyName.icon ?? null)
+        //         .setTitle(ren.friendlyName.label)
+        //         .onClick(_ => sheet.editFormat(col, key)));
     });
 
     menu.addSeparator();
diff --git a/src/table.tsx b/src/table.tsx
index d1f2cf6..508387a 100644
--- a/src/table.tsx
+++ b/src/table.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import {Value} from "./spreadsheet.js";
+import {Value} from "./viewport.js";
 
 export const DEFAULT_COLUMN_WIDTH = 128;
 export const MIN_COLUMN_WIDTH = 24;
@@ -57,5 +57,9 @@ export function TableCell(props: {
             gridRow: props.row + 2,
             gridColumn: props.col + 2
         }}
-    >{props.children.renderer().cell(props.children)}</div>;
+    >
+        <div className="table-cell-inner">
+            {props.children.renderer().cell(props.children)}
+        </div>
+    </div>;
 }
\ No newline at end of file
diff --git a/src/viewport.tsx b/src/viewport.tsx
new file mode 100644
index 0000000..2cf2633
--- /dev/null
+++ b/src/viewport.tsx
@@ -0,0 +1,396 @@
+import * as obs from "obsidian";
+import * as rdom from "react-dom/client";
+
+import { DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT } from "./table.js";
+import { CellRenderer, renderers } from "./formula.js";
+import { Ui } from "./spreadsheet.js";
+
+export const SPREADSHEET_VIEW = "spreadsheet-view";
+
+export interface FrontMatter extends Record<string, any> {
+    columnTypes?: string[],
+    explicitTypes?: { [cell in string]: string },
+    constrainToDefinedColumns?: boolean,
+
+    columnWidths?: number[],
+    rowHeights?: number[],
+
+    columnTitles?: string[],
+    allowedTypes?: string[],
+    columnSeparator?: string,
+    urlEscaped?: boolean
+}
+
+export interface Value {
+    setRaw(raw: string): void,
+
+    getRaw(): string,
+
+    onChange: (callback: (raw: string) => void) => () => void,
+
+    renderer(): CellRenderer
+}
+
+export function value(raw: string, sheet: Spreadsheet): Value {
+    const watches: ((raw: string) => void)[] = [];
+    let type: keyof typeof renderers = 'raw';
+
+    let lastUpdate: Date = new Date();
+
+    const value: Value = {
+        setRaw: data => {
+            raw = data;
+            for (const watch of watches)
+                watch(raw);
+        },
+        getRaw: () => raw,
+        onChange: callback => {
+            watches.push(callback);
+            return () => watches.includes(callback) ? void watches.splice(watches.indexOf(callback), 1) : void 0
+        },
+
+        renderer(): CellRenderer {
+            if (lastUpdate < sheet.lastChanged) {
+                const row = sheet.raw?.find(row => row.includes(value));
+                const col = row?.findIndex(cell => cell == value);
+
+                lastUpdate = new Date();
+
+                if (typeof col == "number")
+                    return renderers[type = sheet.columnType(col)];
+            }
+
+            return renderers[type];
+        }
+    };
+
+    return value;
+}
+
+export interface DocumentProperties {
+    frontMatter: FrontMatter;
+
+    separator: string;
+    uriEncoding: boolean;
+
+    columnTitles: string[];
+
+    columnTypes: string[];
+
+    columnWidths: number[];
+    rowHeights: number[];
+}
+
+export default class Spreadsheet extends obs.TextFileView {
+    raw: Value[][] = [[]];
+
+    private root: rdom.Root | null = null;
+    #change: Date = new Date();
+
+    get lastChanged(): Date {
+        return this.#change;
+    }
+
+    #props: DocumentProperties = {
+        frontMatter: {},
+
+        columnTitles: [],
+
+        columnTypes: [],
+
+        columnWidths: [],
+        rowHeights: [],
+
+        separator: ";",
+        uriEncoding: false
+    };
+
+    constructor(leaf: obs.WorkspaceLeaf) {
+        super(leaf);
+
+        const watchers: (() => void)[] = [];
+
+        const onExternalChange = function (this: Spreadsheet, watcher: () => void): () => void {
+            watchers.push(watcher);
+            return () => watchers.remove(watcher);
+        }.bind(this);
+
+        const notifyChange = () => watchers.forEach(i => i());
+
+        this.onExternalChange = onExternalChange;
+        this.notifyChange = notifyChange;
+
+        this.raw[0].push(value("", this));
+    }
+
+    public readonly onExternalChange: (watcher: () => void) => (() => void);
+    private readonly notifyChange: (() => void);
+
+    getViewData(): string {
+        const rows = [];
+
+        if (!this.documentProperties.frontMatter.columnTitles)
+            rows.push(this.documentProperties.columnTitles.map(i => this.documentProperties.uriEncoding ? encodeURIComponent(i) : i));
+
+        for (const row of this.raw)
+            rows.push(row
+                .map(i => i.getRaw())
+                .map(value => this.documentProperties.uriEncoding ? encodeURIComponent(value) : value));
+
+        return rows
+            .map(i => i.join(this.documentProperties.separator))
+            .join("\n");
+    }
+
+    public get documentProperties(): DocumentProperties {
+        return this.#props;
+    }
+
+    public columnType(col: number): keyof typeof renderers {
+        if (this.#props.columnTypes[col] in renderers)
+            return this.#props.columnTypes[col] as any;
+
+        return 'raw';
+    }
+
+    public updateDocumentProperties(update: (prev: DocumentProperties) => Partial<DocumentProperties>) {
+        this.#props = Object.freeze({
+            ...this.#props,
+            ...update(this.#props)
+        });
+
+        this.#change = new Date();
+
+        this.notifyChange();
+    }
+
+    setViewData(data: string, clear: boolean): void {
+        if (clear)
+            this.clear();
+
+        const frontMatterMarker = data.indexOf("---\n");
+
+        if (frontMatterMarker > -1) {
+            const end = data.indexOf("---\n", frontMatterMarker + 3);
+            this.parseFrontMatter(data.slice(frontMatterMarker + 3, end).trim());
+            data = data.slice(end + 3).trim();
+        }
+
+        const separator = this.documentProperties.separator ?? /[,;\t]/g;
+        const rows = data.trim().split(/\r?\n/);
+
+        if (!this.documentProperties.frontMatter?.columnTitles)
+            this.updateDocumentProperties(prev => ({
+                columnTitles: rows.shift()?.split(separator).map(i => this.documentProperties.uriEncoding ? decodeURIComponent(i) : i) ?? []
+            }));
+
+        const prevRaw = [...this.raw];
+        const prevProps = { ...this.documentProperties };
+        this.raw = [];
+
+        for (const [cells, row] of rows.map((i, row) => [i.split(separator), row] as const)) {
+            this.raw.push(new Array(this.documentProperties.columnTitles.length).fill("").map(cell => value(cell, this)));
+
+            for (const [raw, col] of cells.map((i, col) => [i, col] as const)) {
+                const prev = prevRaw[row]?.[col];
+
+                if (prev) {
+                    this.raw[row][col] = prev;
+                    if (prev.getRaw() != raw)
+                        prev.setRaw(raw);
+                } else
+                    this.raw[row][col] = value(raw, this);
+            }
+        }
+
+        this.updateDocumentProperties(prev => ({
+            ...prevProps,
+
+            columnTypes: new Array(this.documentProperties.columnTitles.length).fill("raw"),
+            columnWidths: new Array(this.documentProperties.columnTitles.length).fill(DEFAULT_COLUMN_WIDTH),
+            rowHeights: new Array(this.raw.length).fill(DEFAULT_ROW_HEIGHT)
+        }));
+    }
+
+    private parseFrontMatter(frontMatter: string): number {
+        this.updateDocumentProperties(prev => ({
+            frontMatter: obs.parseYaml(frontMatter)
+        }));
+
+        return frontMatter.length;
+    }
+
+    editFormat(col: number, format: string) {
+        this.updateDocumentProperties(prev => ({
+            columnTypes: prev.columnTypes.with(col, format)
+        }));
+    }
+
+    insertCol(col: number) {
+        // Warning: I see a potential for bugs here.
+        for (const row of this.raw)
+            row.splice(col + 1, 0, value("", this));
+
+        this.#change = new Date();
+
+        this.updateDocumentProperties(prev => ({
+            columnTitles: [...prev.columnTitles.slice(0, col + 1), `Column ${col + 2}`, ...prev.columnTitles.slice(col + 1)],
+            columnTypes: [...prev.columnTypes.slice(0, col + 1), 'raw', ...prev.columnTypes.slice(col + 1)],
+            columnWidths: [...prev.columnWidths.slice(0, col + 1), DEFAULT_COLUMN_WIDTH, ...prev.columnWidths.slice(col + 1)],
+        }));
+    }
+
+    insertRow(row: number) {
+        // Warning: I see a potential for bugs here.
+        this.raw.splice(row + 1, 0, new Array(this.#props.columnTypes.length).fill("").map(cell => value(cell, this)));
+        this.#change = new Date();
+
+        this.updateDocumentProperties(prev => ({
+            rowHeights: [...prev.rowHeights.slice(0, row + 1), DEFAULT_ROW_HEIGHT, ...prev.rowHeights.slice(row + 1)],
+        }));
+    }
+
+    removeCol(col: number) {
+        for (const row of this.raw)
+            row.splice(col, 1);
+
+        this.#change = new Date();
+        this.updateDocumentProperties(prev => ({
+            columnWidths: [...prev.columnWidths.slice(0, col), ...prev.columnWidths.slice(col + 1)],
+            columnTitles: [...prev.columnTitles.slice(0, col), ...prev.columnTitles.slice(col + 1)],
+            columnTypes: [...prev.columnTypes.slice(0, col), ...prev.columnTypes.slice(col + 1)]
+        }));
+    }
+
+    removeRow(row: number) {
+        this.raw.splice(row, 1);
+        this.#change = new Date();
+        this.updateDocumentProperties(prev => ({
+            rowHeights: [...prev.rowHeights.slice(0, row), ...prev.rowHeights.slice(row + 1)]
+        }));
+    }
+
+    clear(): void {
+        this.raw = [[]];
+    }
+
+    getViewType(): string {
+        return SPREADSHEET_VIEW
+    }
+
+    getDisplayText(): string {
+        return this.file?.basename ?? "Untitled Spreadsheet";
+    }
+
+    getIcon(): string {
+        return "sheet";
+    }
+
+    onPaneMenu(menu: obs.Menu, source: string) {
+        menu.addItem(item => item
+            .setIcon("settings")
+            .setTitle("Spreadsheet Preferences"));
+    }
+
+    protected async onOpen(): Promise<void> {
+        (this.root = rdom.createRoot(this.contentEl))
+            .render(<Ui sheet={this} />);
+    }
+
+    protected async onClose(): Promise<void> {
+        this.root?.unmount();
+    }
+}
+
+export namespace Selection {
+    export type CellGroup = Range | Cell | VectorRange | Vector;
+    export type Range = { from: Cell, to: Cell };
+    export type Vector = Row | Column;
+    export type VectorRange = ColumnVectorRange | RowVectorRange;
+    export type ColumnVectorRange = { from: Column, to: Column };
+    export type RowVectorRange = { from: Row, to: Row };
+    export type Column = { col: number };
+    export type Row = { row: number };
+    export type Cell = { row: number, col: number };
+
+    export const normaliseRange = (range: Range): Range => ({
+        from: {
+            row: Math.min(range.from.row, range.to.row),
+            col: Math.min(range.from.col, range.to.col)
+        },
+        to: {
+            row: Math.max(range.from.row, range.to.row),
+            col: Math.max(range.from.col, range.to.col)
+        }
+    });
+    export const normaliseVectorRange = (range: VectorRange): VectorRange => 
+        isColumnVectorRange(range) ? 
+            { from: { col: Math.min(range.from.col, range.to.col) }, to: { col: Math.max(range.from.col, range.to.col) } } :
+            { from: { row: Math.min(range.from.row, range.to.row) }, to: { row: Math.max(range.from.row, range.to.row) } };
+
+    export const isCell = (cell: CellGroup): cell is Cell => 'row' in cell && 'col' in cell;
+    export const isRange = (cell: CellGroup): cell is Range => 'from' in cell && 'to' in cell && isCell(cell.from) && isCell(cell.to);
+    export const isVector = (cell: CellGroup): cell is Vector => !isCell(cell) && ('row' in cell || 'col' in cell);
+    export const isVectorRange = (cell: CellGroup): cell is VectorRange => !isRange(cell) && 'from' in cell && 'to' in cell && isColumnVector(cell.from) == isColumnVector(cell.to);
+    export const isColumnVector = (cell: CellGroup): cell is Column => isVector(cell) && 'col' in cell;
+    export const isColumnVectorRange = (cell: CellGroup): cell is ColumnVectorRange => isVectorRange(cell) && 'col' in cell.from && 'col' in cell.to;
+    export const isRowVectorRange = (cell: CellGroup): cell is RowVectorRange => isVectorRange(cell) && 'row' in cell.from && 'row' in cell.to;
+    export const isRowVector = (cell: CellGroup): cell is Row => isVector(cell) && 'row' in cell;
+
+    export const area = (range: CellGroup): number => {
+        if (isCell(range))
+            return 1;
+
+        else if (isVector(range) || isVectorRange(range))
+            return Infinity;
+
+        const norm = normaliseRange(range);
+        return ((norm.to.row + 1) - norm.from.row) * ((norm.to.col + 1) - norm.from.col);
+    };
+
+    export const eqCell = (left: Cell, right: Cell): boolean => left.col == right.col && left.row == right.row;
+    export const eqRange = (left: Range, right: Range): boolean => {
+        left = normaliseRange(left);
+        right = normaliseRange(right);
+
+        return eqCell(left.from, right.from) && eqCell(left.to, right.to);
+    }
+
+    export const eq = (left: Range | Cell, right: Range | Cell): boolean => {
+        left = isRange(left) ? normaliseRange(left) : left;
+        right = isRange(right) ? normaliseRange(right) : right;
+    
+        if (isCell(left) && isCell(right))
+            return eqCell(left, right);
+    
+        else if (isRange(left) && isRange(right))
+            return eqRange(left, right);
+    
+        // We have one range and one cell. The cell must have an area of 1.
+        else if (area(left) != area(right))
+            return false;
+    
+        // If the area's two components aren't equal, then fail
+        else if (isRange(left) ? !eqCell(left.from, left.to) : false || isRange(right) ? !eqCell(right.from, right.to) : false)
+            return false;
+    
+        return true;
+    };
+
+    export const rangeFromCell = (from: Cell | Vector, to: Cell | Vector): CellGroup | null => {
+        if (isCell(from) && isCell(to))
+            return normaliseRange({ from, to });
+        else if ((isColumnVector(from) && isColumnVector(to)) || (isRowVector(from) && isRowVector(to)))
+            return normaliseVectorRange({ from, to } as VectorRange);
+        else if (isColumnVector(from) && isCell(to))
+            return { from, to: { col: to.col } };
+        else if (isRowVector(from) && isCell(to))
+            return { from, to: { row: to.row } };
+        else if (isCell(to) && isColumnVector(from))
+            return { from: { col: to.col }, to };
+        else if (isCell(to) && isColumnVector(from))
+            return { from: { row: to.row }, to };
+        else
+            return null;
+    }
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 13785b5..0ae747c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,5 @@
-
+@import url("./listbox.css");
+@import url("./settings.css");
 
 .table-widget {
     display: grid;
@@ -153,6 +154,10 @@ textarea {
     align-items: center;
 }
 
+.table-cell-inner {
+    z-index: 3;
+}
+
 .column-title {
     flex: 1;
     display: flex;
@@ -262,9 +267,31 @@ input[type="text"].column-title-rename {
 }
 
 .selection-range {
-    border: var(--table-border-width) solid hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+    /* border: var(--indentation-guide-width) solid var(--indentation-guide-color-active); */
     /*position: absolute;*/
+    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 25%);
+    outline: var(--table-border-width) solid hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+    border-radius: var(--radius-s);
     pointer-events: none;
+
+    --expand: 6px;
+
+    padding: 1px 0 0 1px;
+    box-sizing: content-box;
+    margin: -1px 0 0 -1px;
+    z-index: 2;
+}
+
+.selection-range.column-vector {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.selection-range.row-vector {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
 .selection-range.in-progress {
@@ -274,4 +301,4 @@ input[type="text"].column-title-rename {
 .add-btn {
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+}