@eccenca/gui-elements 24.1.0-rc.3 → 24.1.0-rc.5

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -19,13 +19,17 @@ export default {
     },
 } as Meta<typeof CodeEditor>;
 
-const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} key={++forcedUpdateKey} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {
     name: "codeinput",
     mode: "markdown",
     defaultValue: "**test me**",
+    useToolbar: true,
+    disabled: false,
+    readOnly: true,
 };
 
 export const LinterExample = TemplateFull.bind({});
@@ -36,19 +40,3 @@ LinterExample.args = {
     useLinting: true,
     autoFocus: true,
 };
-
-export const DisabledExample = TemplateFull.bind({});
-DisabledExample.args = {
-    name: "codeinput",
-    defaultValue: "**test me**",
-    mode: "javascript",
-    disabled: true,
-};
-
-export const IntentExample = TemplateFull.bind({});
-IntentExample.args = {
-    name: "codeinput",
-    defaultValue: "**test me**",
-    mode: "javascript",
-    intent: "warning",
-};

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
-import { lintGutter } from "@codemirror/lint";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
@@ -9,6 +8,8 @@ import { minimalSetup } from "codemirror";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -28,6 +29,7 @@ import {
     adaptedHighlightActiveLine,
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
+    adaptedLintGutter,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
 import { ExtensionCreator } from "./types";
@@ -77,7 +79,6 @@ export interface CodeEditorProps extends TestableComponent {
     /**
      * Syntax mode of the code editor.
      */
-
     mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
@@ -156,6 +157,15 @@ export interface CodeEditorProps extends TestableComponent {
      * Disables the editor.
      */
     disabled?: boolean;
+    /**
+     * Add toolbar for mode.
+     * Currently only `markdown` is supported.
+     */
+    useToolbar?: boolean;
+    /**
+     * Get the translation for a specific key
+     */
+    translate?: (key: string) => string | false;
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
@@ -168,6 +178,8 @@ const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<Extensi
     ["javascript", [jsLinter]],
 ]);
 
+const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"];
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
@@ -203,16 +215,20 @@ export const CodeEditor = ({
     autoFocus = false,
     disabled = false,
     intent,
+    useToolbar,
+    translate,
     ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
+    const [view, setView] = React.useState<EditorView | undefined>();
+    const [showPreview, setShowPreview] = React.useState<boolean>(false);
 
     const linters = useMemo(() => {
         if (!mode) {
             return [];
         }
 
-        const values = [lintGutter()];
+        const values = [adaptedLintGutter()];
 
         const linters = ModeLinterMap.get(mode);
         if (linters) {
@@ -241,6 +257,14 @@ export const CodeEditor = ({
         }
     };
 
+    const getTranslation = (key: string): string | false => {
+        if (translate && typeof translate === "function") {
+            return translate(key);
+        }
+
+        return false;
+    };
+
     React.useEffect(() => {
         const tabIndent =
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
@@ -280,8 +304,8 @@ export const CodeEditor = ({
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
-                if (onFocusChange) {
-                    v.view.dom.className += ` ${eccgui}-intent--${intent}`;
+                if (onFocusChange && intent && !v.view.dom.classList?.contains(`${eccgui}-intent--${intent}`)) {
+                    v.view.dom.classList.add(`${eccgui}-intent--${intent}`);
                 }
 
                 if (onCursorChange) {
@@ -319,34 +343,67 @@ export const CodeEditor = ({
             }),
             parent: parent.current,
         });
+        setView(view);
 
-        if (height) {
-            view.dom.style.height = typeof height === "string" ? height : `${height}px`;
-        }
+        if (view?.dom) {
+            if (height) {
+                view.dom.style.height = typeof height === "string" ? height : `${height}px`;
+            }
 
-        if (disabled) {
-            view.dom.className += ` ${eccgui}-disabled`;
-        }
+            if (disabled) {
+                view.dom.className += ` ${eccgui}-disabled`;
+            }
 
-        if (intent) {
-            view.dom.className += ` ${eccgui}-intent--${intent}`;
-        }
+            if (intent) {
+                view.dom.className += ` ${eccgui}-intent--${intent}`;
+            }
 
-        if (autoFocus) {
-            view.focus();
-        }
+            if (autoFocus) {
+                view.focus();
+            }
 
-        if (setEditorView) {
-            setEditorView(view);
+            if (setEditorView) {
+                setEditorView(view);
+            }
         }
 
         return () => {
             view.destroy();
             if (setEditorView) {
                 setEditorView(undefined);
+                setView(undefined);
             }
         };
-    }, [parent.current, mode, preventLineNumbers]);
+    }, [parent.current, mode, preventLineNumbers, wrapLines]);
+
+    const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
+
+    const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+        switch (mode) {
+            case "markdown":
+                return (
+                    <div>
+                        <div className={`${eccgui}-codeeditor__toolbar`}>
+                            <MarkdownToolbar
+                                view={view}
+                                togglePreviewStatus={() => setShowPreview((p) => !p)}
+                                showPreview={showPreview}
+                                translate={getTranslation}
+                                disabled={disabled}
+                                readonly={readOnly}
+                            />
+                        </div>
+                        {showPreview && (
+                            <div className={`${eccgui}-codeeditor__preview`}>
+                                <Markdown>{view?.state.doc.toString() ?? ""}</Markdown>
+                            </div>
+                        )}
+                    </div>
+                );
+            default:
+                return <></>;
+        }
+    };
 
     return (
         <div
@@ -358,10 +415,13 @@ export const CodeEditor = ({
             data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
-                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
+                (hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
             }
             {...otherCodeEditorProps}
-        />
+        >
+            {hasToolbarSupport && editorToolbar(mode)}
+        </div>
     );
 };
 

package/src/extensions/codemirror/_codemirror.scss

@@ -2,6 +2,9 @@
 
 // own vars
 $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default;
+$eccgui-color-codeeditor-separation: $eccgui-color-separation-divider !default;
+$eccgui-size-codeeditor-height: 20rem !default;
+$eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
 // adjustments
 // stylelint-disable selector-class-pattern
@@ -14,9 +17,39 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         width: 100%;
     }
 
+    &__toolbar {
+        position: absolute;
+        z-index: 3;
+        left: 1px;
+        right: 1px;
+        top: 1px;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        background-color: $eccgui-color-codeeditor-background;
+    }
+
+    &--has-toolbar {
+        .cm-scroller {
+            margin-top: $eccgui-size-codeeditor-toolbar-height !important;
+        }
+    }
+
+    &__preview {
+        position: absolute;
+        top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 2;
+        padding: $button-padding;
+        overflow-y: auto;
+        background-color: $eccgui-color-codeeditor-background;
+        border-radius: 0 0 $pt-border-radius $pt-border-radius;
+    }
+
     .cm-editor {
         width: 100%;
-        height: 290px;
+        height: $eccgui-size-codeeditor-height;
         clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
@@ -27,7 +60,7 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         &.#{eccgui}-disabled {
             @extend .#{$ns}-input, .#{$ns}-disabled;
 
-            height: 290px;
+            height: $eccgui-size-codeeditor-height;
             padding: 0;
         }
 

package/src/extensions/codemirror/tests/codemirrorTestHelper.ts

@@ -10,6 +10,7 @@
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
 import { Extension } from "@codemirror/state";
+import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>
@@ -55,3 +56,6 @@ export const adaptedFoldGutter = (props?: any) =>
 
 export const adaptedCodeFolding = (props?: any) =>
     typeof codeFolding === "function" ? codeFolding(props) : emptyExtension;
+
+export const adaptedLintGutter = (props?: any) =>
+    typeof lintGutter === "function" ? lintGutter(props) : emptyExtension;

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;
+        }
+    };
+}