@hypericon/mico 0.3.5 → 0.3.7

package/README.md

@@ -12,3 +12,57 @@ UI components and utilities built with Mithril.
 ```sh
 $ npm i @hypericon/mico
 ```
+
+## Usage
+
+**[View the usage and examples documentation here.](https://hypericon-mico.netlify.app)**
+
+### Example
+
+Import the components from the package. Some components may also export functions to build typed versions. Components that have customisable styles have their CSS classes of config attributes documented on the documentation site
+
+```ts
+import m from "mithril";
+import { typedTable } from "@hypericon/mico";
+import { Widget } from "../interfaces"; // Example
+import { WidgetService } from "../services"; // Example
+import { WidgetStatusIcon } from "../components"; // Example
+
+const WidgetTable = typedTable<Widget>();
+
+const ExamplePage: m.Component = {
+  view() {
+    return m("", [
+      m("h1", "Widgets"),
+      m(WidgetTable, {
+        data: WidgetService.widgets,
+        columns: [
+          WidgetTable.col("Position", (w, i) => i + 1), // Row index is supplied
+          WidgetTable.col("Name", w => w.name), // Type checking on row object properties
+          WidgetTable.col("Price", w => `£${w.price}`),
+          WidgetTable.col("Status", w => m(WidgetStatusIcon, { widget: w })),
+          // etc.
+        ],
+      }),
+    ]);
+  }
+};
+```
+
+## Development
+
+Start a hot-reloading dev server serving the documentation and example site with
+
+```sh
+$ npm run dev
+```
+
+Publish the updated package and deploy the latest version of the docs site with
+
+```sh
+$ npm run publish-deploy
+```
+
+## License
+
+MIT

package/dist/components/dialog/dialog-manager.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogMgr = exports.DialogManager = void 0;
 const mithril_1 = __importDefault(require("mithril"));
+const utils_1 = require("../../utils");
 class DialogManager {
     get isOpen() { return this.currentDialog !== undefined; }
     constructor(options) {
@@ -65,11 +66,7 @@ class DialogManager {
                                 // console.log(ev);
                                 if (ev.target !== dom)
                                     return;
-                                const dialogRect = dom.getBoundingClientRect();
-                                const isInDialog = (ev.clientY >= dialogRect.top) &&
-                                    (ev.clientY <= dialogRect.bottom) &&
-                                    (ev.clientX >= dialogRect.left) &&
-                                    (ev.clientX <= dialogRect.right);
+                                const isInDialog = (0, utils_1.mouseWithinElement)(ev, dom);
                                 if (!isInDialog)
                                     manager.close();
                             });

package/dist/components/drop-target/DropTarget.d.ts

@@ -0,0 +1,24 @@
+import m from "mithril";
+import { DropTargetState } from "./drop-target.state";
+export declare const DropTarget: m.Component<{
+    /**
+     * Function called when the user drops one or more files onto the drop target
+     * @param result
+     * @returns
+     */
+    onDropFiles: (result: {
+        files: File[];
+        ev: DragEvent;
+    }) => any;
+    /** The message to display in the drop target */
+    dropMessage?: string | m.Children;
+    /**
+     * Whether to automatically set the height of the drop target baed on the height of the wrapped elements
+     * @default true
+     */
+    autoHeight?: boolean;
+    class?: string;
+    style?: string;
+}, {
+    state: DropTargetState;
+}>;

package/dist/components/drop-target/DropTarget.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropTarget = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const drop_target_state_1 = require("./drop-target.state");
+const utils_1 = require("../../utils");
+exports.DropTarget = {
+    oninit() {
+        this.state = new drop_target_state_1.DropTargetState();
+    },
+    oncreate({ dom }) {
+        this.state.lastHeight = dom.clientHeight;
+    },
+    onupdate({ dom }) {
+        if (!this.state.isDragging) {
+            this.state.lastHeight = dom.clientHeight;
+        }
+    },
+    view({ attrs, children }) {
+        const autoHeightStr = (attrs.autoHeight !== false) ? `height: ${this.state.lastHeight}px;` : "";
+        return (0, mithril_1.default)(".mico-drop-container", {
+            class: attrs.class,
+            style: attrs.style,
+        }, [
+            this.state.isDragging ? [
+                (0, mithril_1.default)("", {
+                    class: `mico-drop-target ${this.state.isOver ? "highlighted" : ""}`,
+                    style: `${autoHeightStr} display: flex; flex-direction: column; align-items: center; justify-content: center;`,
+                    ondragover: (ev) => {
+                        this.state.isOver = true;
+                    },
+                    ondragleave: (ev) => {
+                        const containsNewTarget = ev.currentTarget.contains(ev.relatedTarget);
+                        if (!containsNewTarget) {
+                            this.state.isOver = false;
+                        }
+                        ev.preventDefault();
+                        return false;
+                    },
+                    ondrop: (ev) => {
+                        // console.log("ondrop", ev);
+                        this.state.isOver = false;
+                        ev.preventDefault();
+                        const files = (0, utils_1.dragEventFiles)(ev);
+                        if (files.length > 0) {
+                            attrs.onDropFiles({ ev, files });
+                        }
+                    },
+                }, [
+                    (attrs.dropMessage && typeof attrs.dropMessage === "object")
+                        ? attrs.dropMessage
+                        : (0, mithril_1.default)("span.mico-drop-target-message", attrs.dropMessage || "Drop files here"),
+                ]),
+            ] : [
+                children,
+            ],
+        ]);
+    }
+};

package/dist/components/drop-target/drop-target.state.d.ts

@@ -0,0 +1,9 @@
+export declare class DropTargetState {
+    private subs;
+    isDragging: boolean;
+    isOver: boolean;
+    lastHeight: number;
+    constructor();
+    initialise(): void;
+    destroy(): void;
+}

package/dist/components/drop-target/drop-target.state.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropTargetState = void 0;
+const mithril_1 = require("mithril");
+const rxjs_1 = require("rxjs");
+class DropTargetState {
+    constructor() {
+        this.subs = new rxjs_1.Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        this.lastHeight = 100;
+        this.initialise();
+    }
+    initialise() {
+        this.destroy();
+        this.subs = new rxjs_1.Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        const onclick = () => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+        };
+        const ondragstart = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragend = (ev) => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        const ondragenter = (ev) => {
+            this.isDragging = true;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        const ondragover = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragleave = (ev) => {
+            // if the drag moved from the element to outside the element
+            const containsTarget = ev.currentTarget.contains(ev.relatedTarget);
+            if (!containsTarget) {
+                // console.log("page ondragleave, isDragging=false")
+                this.isDragging = false;
+                (0, mithril_1.redraw)();
+            }
+        };
+        const ondrag = (ev) => {
+            ev.preventDefault();
+        };
+        const ondrop = (ev) => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+        document.addEventListener("dragstart", ondragstart);
+        this.subs.add(() => document.removeEventListener("dragstart", ondragstart));
+        document.addEventListener("dragend", ondragend);
+        this.subs.add(() => document.removeEventListener("dragend", ondragend));
+        document.addEventListener("dragenter", ondragenter);
+        this.subs.add(() => document.removeEventListener("dragenter", ondragenter));
+        document.addEventListener("dragover", ondragover);
+        this.subs.add(() => document.removeEventListener("dragover", ondragover));
+        document.addEventListener("dragleave", ondragleave);
+        this.subs.add(() => document.removeEventListener("dragleave", ondragleave));
+        document.addEventListener("drag", ondrag);
+        this.subs.add(() => document.removeEventListener("drag", ondrag));
+        document.addEventListener("drop", ondrop);
+        this.subs.add(() => document.removeEventListener("drop", ondrop));
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+}
+exports.DropTargetState = DropTargetState;

package/dist/components/drop-target/index.d.ts

@@ -0,0 +1 @@
+export * from "./DropTarget";

package/dist/components/drop-target/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropTarget"), exports);

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./dialog";
+export * from "./drop-target";
 export * from "./icon";
 export * from "./markdown";
+export * from "./markdown-editor";
 export * from "./menu";
 export * from "./table";

package/dist/components/index.js

@@ -19,9 +19,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // export * from "./data-table";
 __exportStar(require("./dialog"), exports);
 // export * from "./drawer";
+__exportStar(require("./drop-target"), exports);
 // export * from "./form";
 __exportStar(require("./icon"), exports);
 __exportStar(require("./markdown"), exports);
+__exportStar(require("./markdown-editor"), exports);
 __exportStar(require("./menu"), exports);
 // export * from "./modal";
 // export * from "./pagination";

package/dist/components/markdown-editor/MarkdownEditor.d.ts

@@ -0,0 +1,19 @@
+import m from "mithril";
+import { MarkdownEditorState } from "./markdown-editor.state";
+export declare const MarkdownEditor: m.Component<{
+    /** The current markdown content as a string */
+    markdown: string;
+    /** Function called whenever the markdown string is edited */
+    onEdit: (markdown: string) => any;
+    /**
+     * Attempt to highlight syntax of code blocks
+     * @default false
+     */
+    highlight?: boolean;
+    /** @default true */
+    enableShortcuts?: boolean;
+    class?: string;
+    style?: string;
+}, {
+    state: MarkdownEditorState;
+}>;

package/dist/components/markdown-editor/MarkdownEditor.js

@@ -0,0 +1,202 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownEditor = void 0;
+const mithril_1 = __importStar(require("mithril"));
+const Icon_1 = require("../icon/Icon");
+const Markdown_1 = require("../markdown/Markdown");
+const menu_1 = require("../menu");
+const markdown_editor_state_1 = require("./markdown-editor.state");
+exports.MarkdownEditor = {
+    oninit({ attrs }) {
+        this.state = new markdown_editor_state_1.MarkdownEditorState(attrs.onEdit);
+    },
+    onremove() {
+        this.state.destroy();
+    },
+    onupdate({ attrs, dom }) {
+        if (this.state.isEditing && !this.state.editorContainerEl) {
+            this.state.editorContainerEl = [...dom.getElementsByClassName("editor-container")].at(0);
+        }
+        if (this.state.isEditing && !this.state.editorEl) {
+            this.state.editorEl = [...dom.getElementsByTagName("textarea")].at(0);
+        }
+        if (this.state.isEditing && !this.state.isEditingPrevious) {
+            const editorEl = [...dom.getElementsByTagName("textarea")].at(0);
+            editorEl === null || editorEl === void 0 ? void 0 : editorEl.focus();
+            editorEl === null || editorEl === void 0 ? void 0 : editorEl.setSelectionRange(0, 0);
+            if (editorEl)
+                this.state.editorEl = editorEl;
+            this.state.editorValue = attrs.markdown;
+            this.state.editValue = attrs.onEdit;
+            this.state.setSelection(0, 0);
+            setTimeout(() => {
+                (0, mithril_1.redraw)();
+            }, 1);
+        }
+        if (this.state.requestSelection && this.state.editorEl) {
+            this.state.editorEl.setSelectionRange(this.state.requestSelection.start, this.state.requestSelection.end);
+            this.state.requestSelection = undefined;
+            (0, mithril_1.redraw)();
+        }
+        this.state.isEditingPrevious = this.state.isEditing;
+    },
+    view({ attrs }) {
+        return (0, mithril_1.default)(".mico-markdown-editor", {
+            class: attrs.class,
+            style: attrs.style,
+        }, [
+            (!this.state.isEditing) ? [
+                (0, mithril_1.default)(".render-container", {
+                    tabindex: 0,
+                    onclick: () => {
+                        this.state.isEditing = true;
+                    },
+                }, [
+                    (0, mithril_1.default)(Markdown_1.Markdown, {
+                        highlight: attrs.highlight,
+                        markdown: attrs.markdown,
+                    }),
+                ]),
+            ] : [
+                (0, mithril_1.default)(".editor-container", [
+                    // Editor buttons
+                    (0, mithril_1.default)(".editor-buttons", [
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+H",
+                                onclick: () => this.state.applyHeading(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "heading" })),
+                            (0, mithril_1.default)("button", {
+                                onclick: (ev) => menu_1.menuMgr.show(ev, [
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 1", onclick: () => this.state.applyHeading(1) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 2", onclick: () => this.state.applyHeading(2) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 3", onclick: () => this.state.applyHeading(3) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 4", onclick: () => this.state.applyHeading(4) }),
+                                ], {
+                                    noFlipH: true,
+                                    noFlipV: true,
+                                }),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "caret-down" })),
+                        ]),
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+B",
+                                onclick: () => this.state.applyBold(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "bold" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+I",
+                                onclick: () => this.state.applyItalic(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "italic" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+C",
+                                onclick: () => this.state.applyCode(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "code" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+S",
+                                onclick: () => this.state.applyStrikethrough(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "strikethrough" })),
+                        ]),
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+U",
+                                onclick: () => this.state.applyUnorderedList(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "list-ul" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+O",
+                                onclick: () => this.state.applyOrderedList(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "list-ol" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+L",
+                                onclick: () => this.state.applyLink(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "link" })),
+                        ]),
+                    ]),
+                    // Editor content
+                    (0, mithril_1.default)("textarea.editor-textarea", {
+                        rows: this.state.editorValue.split("\n").length + 2,
+                        value: this.state.editorValue,
+                        oninput: (e) => {
+                            this.state.editorValue = e.target.value;
+                            this.state.editValue(e.target.value);
+                        },
+                        onmousemove: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                        },
+                        onkeyup: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                        },
+                        onkeydown: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                            if (ev.code === "Escape")
+                                this.state.isEditing = false;
+                            if (ev.ctrlKey && ev.shiftKey) {
+                                if (ev.key.toLowerCase() === "h") {
+                                    this.state.applyHeading();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "b") {
+                                    this.state.applyBold();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "i") {
+                                    this.state.applyItalic();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "c") {
+                                    this.state.applyCode();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "s") {
+                                    this.state.applyStrikethrough();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "u") {
+                                    this.state.applyUnorderedList();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "o") {
+                                    this.state.applyOrderedList();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "l") {
+                                    this.state.applyLink();
+                                    ev.preventDefault();
+                                }
+                            }
+                            if (ev.key === "Tab") {
+                                this.state.applyIndent(ev.shiftKey);
+                                ev.preventDefault();
+                            }
+                        },
+                    }),
+                ]),
+            ],
+        ]);
+    }
+};

package/dist/components/markdown-editor/index.d.ts

@@ -0,0 +1 @@
+export * from "./MarkdownEditor";

package/dist/components/markdown-editor/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MarkdownEditor"), exports);

package/dist/components/markdown-editor/markdown-editor.state.d.ts

@@ -0,0 +1,31 @@
+import { Subscription } from "rxjs";
+export declare class MarkdownEditorState {
+    subs: Subscription;
+    isEditing: boolean;
+    isEditingPrevious: boolean;
+    editorValue: string;
+    editorEl: HTMLTextAreaElement | undefined;
+    editorContainerEl: HTMLDivElement | undefined;
+    editValue: (markdown: string) => any;
+    selectionStart: number;
+    selectionEnd: number;
+    requestSelection: {
+        start: number;
+        end: number;
+    } | undefined;
+    constructor(editValue: (markdown: string) => any);
+    private selectedText;
+    private findSelectedLines;
+    private findSelectedWord;
+    destroy(): void;
+    setSelection(start: number, end: number): void;
+    applyHeading(level?: number): void;
+    applyBold(): void;
+    applyItalic(): void;
+    applyCode(): void;
+    applyStrikethrough(): void;
+    applyUnorderedList(): void;
+    applyOrderedList(): void;
+    applyLink(): void;
+    applyIndent(backward?: boolean): void;
+}

package/dist/components/markdown-editor/markdown-editor.state.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownEditorState = void 0;
+const rxjs_1 = require("rxjs");
+const utils_1 = require("../../utils");
+const mithril_1 = require("mithril");
+class MarkdownEditorState {
+    constructor(editValue) {
+        this.subs = new rxjs_1.Subscription();
+        this.isEditing = false;
+        this.isEditingPrevious = false;
+        this.editorValue = "";
+        this.editorEl = undefined;
+        this.editorContainerEl = undefined;
+        this.selectionStart = 0;
+        this.selectionEnd = 0;
+        this.editValue = editValue;
+        const onclick = (ev) => {
+            if (this.isEditing && this.editorContainerEl) {
+                if (!(0, utils_1.mouseWithinElement)(ev, this.editorContainerEl)) {
+                    this.isEditing = false;
+                    (0, mithril_1.redraw)();
+                }
+            }
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+    }
+    selectedText() {
+        const selection = this.editorValue.slice(this.selectionStart, this.selectionEnd);
+        return selection;
+    }
+    findSelectedLines() {
+        // if (!this.editorEl) return [];
+        let linesStart = this.selectionStart;
+        let linesEnd = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && this.editorValue[i - 1] === "\n") {
+                linesStart = i;
+                break;
+            }
+            if (i === 0) {
+                linesStart = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "\n" || i === 0) {
+                linesEnd = i;
+                break;
+            }
+        }
+        const selectedLinesString = this.editorValue.slice(linesStart, linesEnd);
+        // console.log("selectedLinesStr", linesStart, linesEnd, selectedLinesString);
+        let selectedLinesText = selectedLinesString.split("\n");
+        selectedLinesText = selectedLinesText.map((line, lineIndex) => {
+            return line + ((lineIndex <= (selectedLinesText.length - 2)) ? "\n" : "");
+        });
+        const lines = [];
+        let offset = linesStart;
+        for (let i = 0; i < selectedLinesText.length; i++) {
+            lines.push({
+                start: offset,
+                end: offset + selectedLinesText[i].length,
+                content: selectedLinesText[i],
+            });
+            offset = offset + selectedLinesText[i].length;
+        }
+        // console.log("lines", lines);
+        return lines;
+    }
+    findSelectedWord() {
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && (this.editorValue[i - 1] === " " || this.editorValue[i - 1] === "\n")) {
+                start = i;
+                break;
+            }
+            if (i === 0) {
+                start = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "" || this.editorValue[i] === "\n" || i === 0) {
+                end = i;
+                break;
+            }
+        }
+        return {
+            start,
+            end,
+            content: this.editorValue.slice(start, end),
+        };
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+    setSelection(start, end) {
+        this.selectionStart = start;
+        this.selectionEnd = end;
+        const selection = this.editorValue.slice(start, end);
+        // console.log(start, end, selection);
+    }
+    applyHeading(level = 1) {
+        // console.log("addHeading", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "#".padEnd(level, "#") + " ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + toInsert.length;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyBold() {
+        // console.log("addBold", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "**" + value.slice(end);
+        value = value.slice(0, start) + "**" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyItalic() {
+        // console.log("addItalic", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "*" + value.slice(end);
+        value = value.slice(0, start) + "*" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyCode() {
+        // console.log("addCode", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "`" + value.slice(end);
+        value = value.slice(0, start) + "`" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyStrikethrough() {
+        // console.log("addStrikethrough", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "~~" + value.slice(end);
+        value = value.slice(0, start) + "~~" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyUnorderedList() {
+        // console.log("addUnorderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyOrderedList() {
+        // console.log("addOrderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            let toInsert = `${i + 1}. `;
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 3;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyLink() {
+        // console.log("addLink", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        let content = this.selectedText();
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+            content = word.content;
+        }
+        const isUrl = content.startsWith("http") || content.startsWith("www");
+        let url = (Boolean(content) && isUrl) ? content : "https://example.com";
+        let value = this.editorValue;
+        value = value.slice(0, end) + `](${url})` + value.slice(end);
+        value = value.slice(0, start) + "[" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyIndent(backward = false) {
+        // console.log("applyIndent", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        // const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            if (backward) {
+                let newContent = lines[i].content;
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                value = value.slice(0, lines[i].start) + newContent + value.slice(lines[i].end);
+            }
+            else {
+                value = value.slice(0, lines[i].start) + "  " + value.slice(lines[i].start);
+            }
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        let newSelection = this.selectionStart + (backward ? -2 : 2);
+        newSelection = Math.max(newSelection, lines[0].start);
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+}
+exports.MarkdownEditorState = MarkdownEditorState;

package/dist/components/menu/Menu.d.ts

@@ -1,7 +1,14 @@
 import m from "mithril";
+export interface MenuOptions {
+    noFlipV?: boolean;
+    noFlipH?: boolean;
+    forceFlipV?: boolean;
+    forceFlipH?: boolean;
+}
 export declare const Menu: m.Component<{
     x: number | undefined;
     y: number | undefined;
+    options?: MenuOptions;
 }, {
     el?: HTMLDivElement;
 }>;

package/dist/components/menu/Menu.js

@@ -18,16 +18,24 @@ exports.Menu = {
     onupdate({ dom }) {
         // if (dom) this.el = dom as HTMLDivElement;
     },
-    view({ attrs, children, }) {
-        var _a, _b;
+    view({ attrs, children }) {
+        var _a, _b, _c, _d, _e, _f;
         const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
         const maxHeightPx = window.innerHeight / 2;
         const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
         const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
-        const flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
-        const flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
+        let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
             ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
             : ((yPx + maxHeightPx) > window.innerHeight);
+        if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
+            flipH = false;
+        if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
+            flipV = false;
+        if (((_e = attrs.options) === null || _e === void 0 ? void 0 : _e.forceFlipH) === true)
+            flipH = true;
+        if (((_f = attrs.options) === null || _f === void 0 ? void 0 : _f.forceFlipV) === true)
+            flipV = true;
         // console.log({
         //   "yPx": yPx,
         //   "maxHeightPx": maxHeightPx,

package/dist/components/menu/menu-manager.d.ts

@@ -1,4 +1,5 @@
 import m from "mithril";
+import { MenuOptions } from "./Menu";
 export declare class MenuManager {
     private containerEl;
     private _menuVnode;
@@ -15,7 +16,7 @@ export declare class MenuManager {
      * @param ev
      * @param menuContents
      */
-    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive): Promise<void>;
+    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
     hide(): void;
 }
 export declare const menuMgr: MenuManager;

package/dist/components/menu/menu-manager.js

@@ -48,7 +48,7 @@ class MenuManager {
      * @param ev
      * @param menuContents
      */
-    show(ev, menuContents) {
+    show(ev, menuContents, options) {
         return __awaiter(this, void 0, void 0, function* () {
             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
             if (this.isOpen) {
@@ -60,6 +60,7 @@ class MenuManager {
             const menuVnode = (0, mithril_1.default)(Menu_1.Menu, {
                 x: ev === null || ev === void 0 ? void 0 : ev.clientX,
                 y: menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
+                options,
             }, [
                 menuContents,
             ]);

package/dist/utils/events.d.ts

@@ -0,0 +1,8 @@
+export declare function dragEventFiles(ev: DragEvent): File[];
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+export declare function mouseWithinElement(ev: MouseEvent, element: Element): boolean;

package/dist/utils/events.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mouseWithinElement = exports.dragEventFiles = void 0;
+function dragEventFiles(ev) {
+    var _a, _b, _c;
+    const files = [];
+    if ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        [...ev.dataTransfer.items].forEach((item, i) => {
+            // If dropped items aren't files, reject them
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file) {
+                    // console.log(`… file[${i}].name = ${file.name}`);
+                    files.push(file);
+                }
+            }
+        });
+    }
+    else {
+        // Use DataTransfer interface to access the file(s)
+        [...(_c = (_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.files) !== null && _c !== void 0 ? _c : []].forEach((file, i) => {
+            // console.log(`… file[${i}].name = ${file.name}`);
+            files.push(file);
+        });
+    }
+    return files;
+}
+exports.dragEventFiles = dragEventFiles;
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+function mouseWithinElement(ev, element) {
+    const elementRect = element.getBoundingClientRect();
+    const isWithin = (ev.clientY >= elementRect.top) &&
+        (ev.clientY <= elementRect.bottom) &&
+        (ev.clientX >= elementRect.left) &&
+        (ev.clientX <= elementRect.right);
+    return isWithin;
+}
+exports.mouseWithinElement = mouseWithinElement;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from "./date-time";
+export * from "./events";

package/dist/utils/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./date-time"), exports);
+__exportStar(require("./events"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",