tiny-markdown-editor 0.2.6 → 0.2.7

package/lib/TinyMDECommandBar.d.ts

@@ -0,0 +1,35 @@
+import { Editor, Position } from "./TinyMDE";
+export interface CommandAction {
+    (editor: Editor): void;
+}
+export interface CommandEnabled {
+    (editor: Editor, focus?: Position, anchor?: Position): boolean | null;
+}
+export interface CommandDefinition {
+    name: string;
+    action: string | CommandAction;
+    innerHTML: string;
+    title: string;
+    hotkey?: string;
+    enabled?: CommandEnabled;
+}
+export interface CommandBarProps {
+    element?: string | HTMLElement;
+    editor?: Editor;
+    commands?: (string | CommandDefinition)[];
+}
+export declare class CommandBar {
+    e: HTMLDivElement | null;
+    editor: Editor | null;
+    commands: Record<string, CommandDefinition>;
+    buttons: Record<string, HTMLDivElement>;
+    state: Record<string, boolean | null>;
+    private hotkeys;
+    constructor(props: CommandBarProps);
+    private createCommandBarElement;
+    private handleClick;
+    setEditor(editor: Editor): void;
+    private handleSelection;
+    private handleKeydown;
+}
+export default CommandBar;

package/lib/TinyMDECommandBar.js

@@ -0,0 +1,329 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandBar = void 0;
+const svg_1 = __importDefault(require("./svg/svg"));
+const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(typeof navigator !== "undefined" ? navigator.platform : "");
+const DefaultCommands = {
+    bold: {
+        name: "bold",
+        action: "bold",
+        innerHTML: svg_1.default.bold,
+        title: "Bold",
+        hotkey: "Mod-B",
+    },
+    italic: {
+        name: "italic",
+        action: "italic",
+        innerHTML: svg_1.default.italic,
+        title: "Italic",
+        hotkey: "Mod-I",
+    },
+    strikethrough: {
+        name: "strikethrough",
+        action: "strikethrough",
+        innerHTML: svg_1.default.strikethrough,
+        title: "Strikethrough",
+        hotkey: "Mod2-Shift-5",
+    },
+    code: {
+        name: "code",
+        action: "code",
+        innerHTML: svg_1.default.code,
+        title: "Format as code",
+    },
+    h1: {
+        name: "h1",
+        action: "h1",
+        innerHTML: svg_1.default.h1,
+        title: "Level 1 heading",
+        hotkey: "Mod-Shift-1",
+    },
+    h2: {
+        name: "h2",
+        action: "h2",
+        innerHTML: svg_1.default.h2,
+        title: "Level 2 heading",
+        hotkey: "Mod-Shift-2",
+    },
+    ul: {
+        name: "ul",
+        action: "ul",
+        innerHTML: svg_1.default.ul,
+        title: "Bulleted list",
+    },
+    ol: {
+        name: "ol",
+        action: "ol",
+        innerHTML: svg_1.default.ol,
+        title: "Numbered list",
+    },
+    blockquote: {
+        name: "blockquote",
+        action: "blockquote",
+        innerHTML: svg_1.default.blockquote,
+        title: "Quote",
+        hotkey: "Mod2-Shift-Q",
+    },
+    insertLink: {
+        name: "insertLink",
+        action: (editor) => {
+            if (editor.isInlineFormattingAllowed())
+                editor.wrapSelection("[", "]()");
+        },
+        enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+        innerHTML: svg_1.default.link,
+        title: "Insert link",
+        hotkey: "Mod-K",
+    },
+    insertImage: {
+        name: "insertImage",
+        action: (editor) => {
+            if (editor.isInlineFormattingAllowed())
+                editor.wrapSelection("![", "]()");
+        },
+        enabled: (editor, focus, anchor) => editor.isInlineFormattingAllowed(focus, anchor) ? false : null,
+        innerHTML: svg_1.default.image,
+        title: "Insert image",
+        hotkey: "Mod2-Shift-I",
+    },
+    hr: {
+        name: "hr",
+        action: (editor) => editor.paste("\n***\n"),
+        enabled: () => false,
+        innerHTML: svg_1.default.hr,
+        title: "Insert horizontal line",
+        hotkey: "Mod2-Shift-L",
+    },
+    undo: {
+        name: "undo",
+        action: (editor) => editor.undo(),
+        enabled: (editor) => (editor.canUndo ? false : null),
+        innerHTML: svg_1.default.undo,
+        title: "Undo",
+    },
+    redo: {
+        name: "redo",
+        action: (editor) => editor.redo(),
+        enabled: (editor) => (editor.canRedo ? false : null),
+        innerHTML: svg_1.default.redo,
+        title: "Redo",
+    },
+};
+class CommandBar {
+    constructor(props) {
+        this.e = null;
+        this.editor = null;
+        this.commands = {};
+        this.buttons = {};
+        this.state = {};
+        this.hotkeys = [];
+        this.e = null;
+        this.editor = null;
+        this.commands = {};
+        this.buttons = {};
+        this.state = {};
+        this.hotkeys = [];
+        let element = null;
+        if (typeof props.element === 'string') {
+            element = document.getElementById(props.element);
+        }
+        else if (props.element) {
+            element = props.element;
+        }
+        if (!element) {
+            element = document.body;
+        }
+        this.createCommandBarElement(element, props.commands || [
+            "bold",
+            "italic",
+            "strikethrough",
+            "|",
+            "code",
+            "|",
+            "h1",
+            "h2",
+            "|",
+            "ul",
+            "ol",
+            "|",
+            "blockquote",
+            "hr",
+            "|",
+            "undo",
+            "redo",
+            "|",
+            "insertLink",
+            "insertImage",
+        ]);
+        document.addEventListener("keydown", (e) => this.handleKeydown(e));
+        if (props.editor)
+            this.setEditor(props.editor);
+    }
+    createCommandBarElement(parentElement, commands) {
+        this.e = document.createElement("div");
+        this.e.className = "TMCommandBar";
+        for (let command of commands) {
+            if (command === "|") {
+                let el = document.createElement("div");
+                el.className = "TMCommandDivider";
+                this.e.appendChild(el);
+            }
+            else {
+                let commandName;
+                if (typeof command === "string") {
+                    if (DefaultCommands[command]) {
+                        commandName = command;
+                        this.commands[commandName] = DefaultCommands[commandName];
+                    }
+                    else {
+                        continue;
+                    }
+                }
+                else if (typeof command === "object" && command.name) {
+                    commandName = command.name;
+                    this.commands[commandName] = {};
+                    if (DefaultCommands[commandName]) {
+                        Object.assign(this.commands[commandName], DefaultCommands[commandName]);
+                    }
+                    Object.assign(this.commands[commandName], command);
+                }
+                else {
+                    continue;
+                }
+                let title = this.commands[commandName].title || commandName;
+                if (this.commands[commandName].hotkey) {
+                    const keys = this.commands[commandName].hotkey.split("-");
+                    let modifiers = [];
+                    let modifierexplanation = [];
+                    for (let i = 0; i < keys.length - 1; i++) {
+                        switch (keys[i]) {
+                            case "Ctrl":
+                                modifiers.push("ctrlKey");
+                                modifierexplanation.push("Ctrl");
+                                break;
+                            case "Cmd":
+                                modifiers.push("metaKey");
+                                modifierexplanation.push("⌘");
+                                break;
+                            case "Alt":
+                                modifiers.push("altKey");
+                                modifierexplanation.push("Alt");
+                                break;
+                            case "Option":
+                                modifiers.push("altKey");
+                                modifierexplanation.push("⌥");
+                                break;
+                            case "Win":
+                                modifiers.push("metaKey");
+                                modifierexplanation.push("⊞ Win");
+                                break;
+                            case "Shift":
+                                modifiers.push("shiftKey");
+                                modifierexplanation.push("⇧");
+                                break;
+                            case "Mod":
+                                if (isMacLike) {
+                                    modifiers.push("metaKey");
+                                    modifierexplanation.push("⌘");
+                                }
+                                else {
+                                    modifiers.push("ctrlKey");
+                                    modifierexplanation.push("Ctrl");
+                                }
+                                break;
+                            case "Mod2":
+                                modifiers.push("altKey");
+                                if (isMacLike)
+                                    modifierexplanation.push("⌥");
+                                else
+                                    modifierexplanation.push("Alt");
+                                break;
+                        }
+                    }
+                    modifierexplanation.push(keys[keys.length - 1]);
+                    let hotkey = {
+                        modifiers: modifiers,
+                        command: commandName,
+                    };
+                    if (keys[keys.length - 1].match(/^[0-9]$/)) {
+                        hotkey.code = `Digit${keys[keys.length - 1]}`;
+                    }
+                    else {
+                        hotkey.key = keys[keys.length - 1].toLowerCase();
+                    }
+                    this.hotkeys.push(hotkey);
+                    title = title.concat(` (${modifierexplanation.join("+")})`);
+                }
+                this.buttons[commandName] = document.createElement("div");
+                this.buttons[commandName].className = "TMCommandButton TMCommandButton_Disabled";
+                this.buttons[commandName].title = title;
+                this.buttons[commandName].innerHTML = this.commands[commandName].innerHTML;
+                this.buttons[commandName].addEventListener("mousedown", (e) => this.handleClick(commandName, e));
+                this.e.appendChild(this.buttons[commandName]);
+            }
+        }
+        parentElement.appendChild(this.e);
+    }
+    handleClick(commandName, event) {
+        if (!this.editor)
+            return;
+        event.preventDefault();
+        if (typeof this.commands[commandName].action === "string") {
+            if (this.state[commandName] === false)
+                this.editor.setCommandState(commandName, true);
+            else
+                this.editor.setCommandState(commandName, false);
+        }
+        else if (typeof this.commands[commandName].action === "function") {
+            this.commands[commandName].action(this.editor);
+        }
+    }
+    setEditor(editor) {
+        this.editor = editor;
+        editor.addEventListener("selection", (e) => this.handleSelection(e));
+    }
+    handleSelection(event) {
+        if (event.commandState) {
+            for (let command in this.commands) {
+                if (event.commandState[command] === undefined) {
+                    if (this.commands[command].enabled) {
+                        this.state[command] = this.commands[command].enabled(this.editor, event.focus, event.anchor);
+                    }
+                    else {
+                        this.state[command] = event.focus ? false : null;
+                    }
+                }
+                else {
+                    this.state[command] = event.commandState[command];
+                }
+                if (this.state[command] === true) {
+                    this.buttons[command].className = "TMCommandButton TMCommandButton_Active";
+                }
+                else if (this.state[command] === false) {
+                    this.buttons[command].className = "TMCommandButton TMCommandButton_Inactive";
+                }
+                else {
+                    this.buttons[command].className = "TMCommandButton TMCommandButton_Disabled";
+                }
+            }
+        }
+    }
+    handleKeydown(event) {
+        outer: for (let hotkey of this.hotkeys) {
+            if ((hotkey.key && event.key.toLowerCase() === hotkey.key) ||
+                (hotkey.code && event.code === hotkey.code)) {
+                for (let modifier of hotkey.modifiers) {
+                    if (!event[modifier])
+                        continue outer;
+                }
+                this.handleClick(hotkey.command, event);
+                return;
+            }
+        }
+    }
+}
+exports.CommandBar = CommandBar;
+exports.default = CommandBar;

package/lib/grammar.d.ts

@@ -0,0 +1,77 @@
+export interface GrammarRule {
+    regexp: RegExp;
+    replacement: string;
+    labelPlaceholder?: number;
+}
+export interface HTMLBlockRule {
+    start: RegExp;
+    end: RegExp | false;
+    paraInterrupt: boolean;
+}
+export interface InlineCommand {
+    type: 'inline';
+    className: string;
+    set: {
+        pre: string;
+        post: string;
+    };
+    unset: {
+        prePattern: RegExp;
+        postPattern: RegExp;
+    };
+}
+export interface LineCommand {
+    type: 'line';
+    className: string;
+    set: {
+        pattern: RegExp;
+        replacement: string;
+    };
+    unset: {
+        pattern: RegExp;
+        replacement: string;
+    };
+}
+export type Command = InlineCommand | LineCommand;
+export declare const punctuationLeading: RegExp;
+export declare const punctuationTrailing: RegExp;
+/**
+ * This is CommonMark's block grammar, but we're ignoring nested blocks here.
+ */
+export declare const lineGrammar: Record<string, GrammarRule>;
+/**
+ * HTML blocks have multiple different classes of opener and closer. This array defines all the cases
+ */
+export declare const htmlBlockGrammar: HTMLBlockRule[];
+/**
+ * Structure of the object:
+ * Top level entries are rules, each consisting of a regular expressions (in string format) as well as a replacement.
+ * In the regular expressions, replacements from the object 'replacements' will be processed before compiling into the property regexp.
+ */
+export declare const inlineGrammar: Record<string, GrammarRule>;
+/**
+ * Creates a merged inline grammar by combining the default inline grammar with custom rules.
+ * Custom rules are processed and their regexp patterns are expanded with replacements.
+ * @param customRules - Object containing custom inline grammar rules
+ * @returns Merged inline grammar object
+ */
+export declare function createMergedInlineGrammar(customRules?: Record<string, GrammarRule>): Record<string, GrammarRule>;
+/**
+ * Escapes HTML special characters (<, >, and &) in the string.
+ * @param {string} string The raw string to be escaped
+ * @returns {string} The string, ready to be used in HTML
+ */
+export declare function htmlescape(string: string): string;
+/**
+ * Contains the commands that can be sent to the editor. Contains objects with a name representing the name of the command.
+ * Each of the objects contains the following keys:
+ *
+ *   - type: Can be either inline (for inline formatting) or line (for block / line formatting).
+ *   - className: Used to determine whether the command is active at a given position.
+ *     For line formatting, this looks at the class of the line element. For inline elements, tries to find an enclosing element with that class.
+ *   - set / unset: Contain instructions how to set and unset the command. For line type commands, both consist of a pattern and replacement that
+ *     will be applied to each line (using String.replace). For inline type commands, the set object contains a pre and post string which will
+ *     be inserted before and after the selection. The unset object contains a prePattern and a postPattern. Both should be regular expressions and
+ *     they will be applied to the portion of the line before and after the selection (using String.replace, with an empty replacement string).
+ */
+export declare const commands: Record<string, Command>;