@eccenca/gui-elements 24.1.0-rc.4 → 24.1.0-rc.6

package/src/extensions/codemirror/toolbars/commands/markdown.command.ts

@@ -0,0 +1,340 @@
+import { type ChangeSpec, EditorSelection } from "@codemirror/state";
+import { EditorView } from "codemirror";
+
+import { ValidIconName } from "../../../../components/Icon/canonicalIconNames";
+
+enum Commands {
+    header1 = "Heading 1",
+    header2 = "Heading 2",
+    header3 = "Heading 3",
+    header4 = "Heading 4",
+    header5 = "Heading 5",
+    header6 = "Heading 6",
+    codeBlock = "Code block",
+    quote = "Block quote",
+    bold = "Bold",
+    italic = "Italic",
+    strike = "StrikeThrough",
+    inlineCode = "Inline code",
+    unorderedList = "Unordered list",
+    orderedList = "Ordered list",
+    todoList = "Todo list",
+    link = "Link",
+    image = "Image",
+}
+
+type formatConfig = { start: number; startDelimiter: string; stop?: number; endDelimiter?: string };
+type headerLevels = 1 | 2 | 3 | 4 | 5 | 6;
+type ListType = "ul" | "ol" | "todo";
+
+//contains all utilities for markdown toolbar
+export default class MarkdownCommand {
+    private view: EditorView | null = null;
+
+    //list of supported commands as well as the valid icon names.
+    public static commands = {
+        paragraphs: [
+            Commands.header1,
+            Commands.header2,
+            Commands.header3,
+            Commands.header4,
+            Commands.header5,
+            Commands.header6,
+            Commands.quote,
+            Commands.codeBlock,
+        ],
+        basic: [
+            { title: Commands.bold, icon: "operation-format-text-bold" },
+            { title: Commands.italic, icon: "operation-format-text-italic" },
+            { title: Commands.strike, icon: "operation-format-text-strikethrough" },
+            { title: Commands.inlineCode, icon: "operation-format-text-code" },
+        ] as { title: Commands; icon: ValidIconName }[],
+        lists: [
+            { title: Commands.unorderedList, icon: "operation-format-list-bullet", moniker: "ul" },
+            { title: Commands.orderedList, icon: "operation-format-list-numbered", moniker: "ol" },
+            { title: Commands.todoList, icon: "operation-format-list-checked", moniker: "todo" },
+        ] as { title: Commands; icon: ValidIconName; moniker: string }[],
+        attachments: [
+            { title: Commands.link, icon: "operation-link" },
+            { title: Commands.image, icon: "item-image" },
+        ] as { title: Commands; icon: ValidIconName }[],
+    } as const;
+
+    constructor(view: EditorView) {
+        this.view = view;
+    }
+
+    /**
+     * Supported list types are ol, ul, todo.
+     * utility helps to determine which at the start of the line
+     */
+    private getListTypeOfLine = (text: string): [ListType, number?] | undefined => {
+        if (!text) return;
+        text = text?.trimStart();
+
+        if (text.startsWith("- ")) {
+            if (text.startsWith("- [ ] ") || text.startsWith("- [x] ")) return ["todo"];
+            return ["ul"];
+        }
+
+        const v = text.match(/^(\d+)\. /);
+
+        return v ? ["ol", Number.parseInt(v[1], 10)] : undefined;
+    };
+
+    //inserts the list delimiters of "-", "- [ ]" and "{number}."
+    private createListDelimiter(text: string, type: string, orderedList: { currentIndex: number }) {
+        return text.replace(/^(( *)(-( \[[x ]])?|\d+\.) )?/, (...args) => {
+            const { space = "" } = args[args.length - 1];
+
+            let newFlag = "- ";
+
+            if (type === "ol") {
+                newFlag = `${orderedList.currentIndex}. `;
+                orderedList.currentIndex++;
+            } else if (type === "todo") {
+                newFlag = "- [ ] ";
+            }
+
+            return space + newFlag;
+        });
+    }
+
+    //factory for different list types.
+    private createList = (type: ListType) => {
+        if (!this.view) return;
+        const view = this.view;
+        const doc = view.state.doc;
+
+        const orderedList = { currentIndex: 1 };
+
+        view.dispatch(
+            view.state.changeByRange((range) => {
+                const text = doc.slice(range.from, range.to);
+                const changes: ChangeSpec[] = [];
+
+                let selectionStart: number = range.from;
+                let selectionLength: number = range.to - range.from;
+
+                Array.from({ length: text.lines }).forEach((_, index) => {
+                    const line = doc.line(doc.lineAt(range.from).number + index);
+
+                    const currentListType = this.getListTypeOfLine(line.text);
+
+                    if (currentListType && currentListType[0] === type) {
+                        if (currentListType[0] === "ol" && currentListType[1]) {
+                            orderedList.currentIndex = currentListType[1];
+                        }
+
+                        return;
+                    }
+                    const content = this.createListDelimiter(line.text, type, orderedList);
+
+                    const diffLength = content.length - line.length;
+
+                    changes.push({
+                        from: line.from,
+                        to: line.to,
+                        insert: content,
+                    });
+
+                    if (index === 0) {
+                        selectionStart = selectionStart + diffLength;
+                    } else {
+                        selectionLength = selectionLength + diffLength;
+                    }
+                });
+
+                return {
+                    changes,
+                    range: EditorSelection.range(selectionStart, selectionStart + selectionLength),
+                };
+            })
+        );
+
+        view.focus();
+    };
+
+    private enforceCursorFocus = (cursorPosition: number) => {
+        if (!this.view) return;
+        const view = this.view;
+        setTimeout(() => {
+            view.dispatch({
+                selection: EditorSelection.cursor(cursorPosition),
+            });
+            view.focus();
+        }, 50);
+    };
+
+    //supported headers from h1-h6, h6 being the smallest
+    private createHeading = (level: headerLevels) => {
+        if (!this.view) return;
+        const view = this.view;
+        const state = view.state;
+
+        const flags = "#".repeat(level) + " ";
+
+        let lastCursorPosition = 0;
+
+        view.dispatch(
+            state.changeByRange((range) => {
+                const line = state.doc.lineAt(range.from);
+
+                const content = line.text.replace(/^((#+) )?/, flags);
+
+                const diffLength = content.length - line.length;
+                lastCursorPosition = line.to + diffLength;
+                return {
+                    changes: {
+                        from: line.from,
+                        to: line.to,
+                        insert: content,
+                    },
+                    range: EditorSelection.range(range.anchor + diffLength, range.head + diffLength),
+                };
+            })
+        );
+
+        this.enforceCursorFocus(lastCursorPosition);
+    };
+
+    private applyFormatting = ({
+        start,
+        startDelimiter,
+        endDelimiter = startDelimiter,
+        stop = start,
+    }: formatConfig) => {
+        if (!this.view) return;
+        const view = this.view;
+        const { from, to } = view.state.selection.main;
+        const text = view.state.sliceDoc(from, to);
+        view.dispatch(
+            view.state.changeByRange((range) => {
+                return {
+                    changes: [{ from: range.from, to: range.to, insert: `${startDelimiter}${text}${endDelimiter}` }],
+                    range: EditorSelection.range(range.from + start, range.to + stop),
+                };
+            })
+        );
+        view.focus();
+    };
+
+    private applyAttachment = (type: Commands.link | Commands.image) => {
+        if (!this.view) return;
+        const view = this.view;
+        const { state } = view;
+        const isImageAttachmentType = type === Commands.image;
+
+        const { doc } = state;
+
+        view.dispatch(
+            state.changeByRange((range) => {
+                const { from, to } = range;
+
+                const text = doc.sliceString(from, to);
+
+                const link = `${isImageAttachmentType ? `!` : ""}[${text}]()`;
+
+                const cursor = from + (text.length ? 3 + text.length : 1 + Number(isImageAttachmentType));
+
+                return {
+                    changes: [
+                        {
+                            from,
+                            to,
+                            insert: link,
+                        },
+                    ],
+                    range: EditorSelection.range(cursor, cursor),
+                };
+            })
+        );
+
+        view.focus();
+    };
+
+    private applyQuoteFormatting = () => {
+        if (!this.view) return;
+        const view = this.view;
+        const { state } = view;
+        const { doc } = state;
+
+        let lastCursorPosition = 0;
+
+        view.dispatch(
+            view.state.changeByRange((range) => {
+                const startLine = doc.lineAt(range.from);
+
+                const text = doc.slice(range.from, range.to);
+
+                const lineCount = text.lines;
+
+                const changes: ChangeSpec[] = [];
+
+                let selectionStart: number = range.from;
+                let selectionLength: number = range.to - range.from;
+
+                new Array(lineCount).fill(0).forEach((_, index) => {
+                    const line = doc.line(startLine.number + index);
+
+                    if (line.text.startsWith("> ")) {
+                        return;
+                    }
+                    changes.push({
+                        from: line.from,
+                        insert: "> ",
+                    });
+
+                    if (index === 0) {
+                        selectionStart = selectionStart + 2;
+                    } else {
+                        selectionLength += 2;
+                    }
+                });
+
+                lastCursorPosition = selectionStart + selectionLength;
+
+                return {
+                    changes,
+                    range: EditorSelection.range(selectionStart, selectionStart + selectionLength),
+                };
+            })
+        );
+        this.enforceCursorFocus(lastCursorPosition);
+    };
+
+    executeCommand = (command: Commands): true | void => {
+        switch (command) {
+            case Commands.bold:
+                return this.applyFormatting({ start: 2, startDelimiter: "**" });
+            case Commands.italic:
+                return this.applyFormatting({ start: 1, startDelimiter: "*" });
+            case Commands.codeBlock:
+                return this.applyFormatting({ start: 3, startDelimiter: "```\n", endDelimiter: "\n```" });
+            case Commands.strike:
+                return this.applyFormatting({ start: 2, startDelimiter: "~~" });
+            case Commands.inlineCode:
+                return this.applyFormatting({ start: 1, startDelimiter: "`" });
+            case Commands.header1:
+            case Commands.header2:
+            case Commands.header3:
+            case Commands.header4:
+            case Commands.header5:
+            case Commands.header6:
+                return this.createHeading(Number(command.slice(-1)) as headerLevels);
+            case Commands.unorderedList:
+            case Commands.orderedList:
+            case Commands.todoList:
+                return this.createList(
+                    MarkdownCommand.commands.lists.find((l) => l.title === command)?.moniker as ListType
+                );
+            case Commands.image:
+            case Commands.link:
+                return this.applyAttachment(command);
+            case Commands.quote:
+                return this.applyQuoteFormatting();
+            default:
+                return; //do nothing;
+        }
+    };
+}

package/src/extensions/codemirror/toolbars/markdown.toolbar.tsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { EditorView } from "codemirror";
+
+import { Button } from "../../../components/Button/Button";
+import { ContextMenu } from "../../../components/ContextOverlay";
+import { Icon, IconButton } from "../../../components/Icon";
+import { MenuItem } from "../../../components/Menu";
+import { Spacing } from "../../../components/Separation/Spacing";
+import { Toolbar, ToolbarSection } from "../../../components/Toolbar";
+
+import MarkdownCommand from "./commands/markdown.command";
+
+interface MarkdownToolbarProps {
+    view?: EditorView;
+    togglePreviewStatus: () => void;
+    showPreview: boolean;
+    translate: (key: string) => string | false;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+
+export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
+    view,
+    togglePreviewStatus,
+    showPreview,
+    disabled,
+    readonly,
+    translate
+}) => {
+    const commandRef = React.useRef<MarkdownCommand | null>(null);
+
+    React.useEffect(() => {
+        if (view) {
+            commandRef.current = new MarkdownCommand(view);
+        }
+    }, [view]);
+
+    const getTranslation = (fallback: string) : string => {
+        const key = fallback.toLowerCase().replace(" ", "-");
+        return translate(key) || fallback;
+    }
+
+    const { basic, lists, attachments } = MarkdownCommand.commands;
+    return (
+        <Toolbar noWrap>
+            <ToolbarSection canShrink hideOverflow>
+                <ContextMenu
+                    togglerElement={
+                        <Button
+                            rightIcon={<Icon name="toggler-showmore" />}
+                            text={getTranslation("Paragraphs")}
+                            minimal
+                            fill
+                            ellipsizeText
+                            disabled={showPreview || disabled || readonly}
+                        />
+                    }
+                >
+                    {MarkdownCommand.commands.paragraphs.map((p, i) => (
+                        <MenuItem
+                            key={p}
+                            text={
+                                <>
+                                    <span style={p.startsWith("Head") ? { fontSize: 22 - (i * (22 - 12)) / 5 } : {}}>
+                                        {getTranslation(p)}
+                                    </span>
+                                </>
+                            }
+                            onClick={() => commandRef.current?.executeCommand(p)}
+                        />
+                    ))}
+                </ContextMenu>
+            </ToolbarSection>
+            <ToolbarSection canShrink>
+                <Spacing vertical hasDivider size="tiny" />
+            </ToolbarSection>
+
+            {[basic, lists, attachments].map((section, i) => {
+                return (
+                    <React.Fragment key={i}>
+                        <ToolbarSection>
+                            {section.map((command) => {
+                                return (
+                                    <IconButton
+                                        key={command.title}
+                                        name={command.icon}
+                                        onClick={() => commandRef.current?.executeCommand(command.title)}
+                                        text={getTranslation(command.title)}
+                                        disabled={showPreview || disabled || readonly}
+                                    />
+                                );
+                            })}
+                        </ToolbarSection>
+                        {i < 2 && (
+                            <ToolbarSection canShrink>
+                                <Spacing vertical hasDivider size="tiny" />
+                            </ToolbarSection>
+                        )}
+                    </React.Fragment>
+                );
+            })}
+            <ToolbarSection canGrow canShrink>
+                <Spacing vertical size="small" />
+            </ToolbarSection>
+            <ToolbarSection canShrink hideOverflow>
+                <Button
+                    minimal
+                    ellipsizeText
+                    onClick={togglePreviewStatus}
+                    text={showPreview ? getTranslation("Continue editing") : getTranslation("Preview")}
+                    icon={showPreview ? "item-edit" : "item-viewdetails"}
+                    disabled={disabled}
+                />
+            </ToolbarSection>
+        </Toolbar>
+    );
+};