Update template mode styles

Author: dan-niles

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/CodeMirrorMarkdownToolbar.tsx

@@ -28,7 +28,7 @@ import {
     insertMarkdownUnorderedList,
     insertMarkdownOrderedList,
     insertMarkdownTaskList
-} from "../utils/codemirrorMarkdownUtils";
+} from "../utils/templateUtils";
 import { HelperPaneToggleButton } from "../../../editors/MultiModeExpressionEditor/ChipExpressionEditor/components/HelperPaneToggleButton";
 
 const ToolbarContainer = styled.div`
@@ -138,6 +138,7 @@ export const CodeMirrorMarkdownToolbar = React.forwardRef<HTMLDivElement, CodeMi
                 {helperPaneToggle && (
                     <HelperPaneToggleButton
                         ref={helperPaneToggle.ref}
+                        disabled={isPreviewMode}
                         isOpen={helperPaneToggle.isOpen}
                         onClick={helperPaneToggle.onClick}
                         sx={{ marginBottom: 0 }}

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/controls/MarkdownPreview.tsx

@@ -24,7 +24,7 @@ import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { ChipComponent } from "./ChipComponent";
 import { DocumentType } from "../../MultiModeExpressionEditor/ChipExpressionEditor/types";
-import "../utils/markdown-preview.css";
+import "../styles/markdown-preview.css";
 
 const PreviewContainer = styled.div`
     width: 100%;

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/utils/markdown-preview.css renamed to workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/styles/markdown-preview.css

@@ -17,6 +17,7 @@
  */
 
 import { EditorView } from "@codemirror/view";
+import { KeyBinding } from "@codemirror/view";
 
 /**
  * Inserts or removes markdown formatting around selected text (toggles)
@@ -445,3 +446,145 @@ export const insertMarkdownTaskList = (view: EditorView | null) => {
 
     view.focus();
 };
+
+export const handleEnterForListContinuation = (view: EditorView): boolean => {
+    const state = view.state;
+    const selection = state.selection.main;
+
+    // Only handle if there's no selection (just a cursor)
+    if (selection.from !== selection.to) {
+        return false;
+    }
+
+    const cursorPosition = selection.from;
+    const line = state.doc.lineAt(cursorPosition);
+    const lineText = line.text;
+
+    // Check if cursor is at the end of the line or in the middle
+    const cursorInLine = cursorPosition - line.from;
+
+    // Check for task list (- [ ] or - [x])
+    const taskMatch = lineText.match(/^(\s*)([-*])\s+\[([ x])\]\s+(.*)$/);
+    if (taskMatch) {
+        const [, indent, marker, , content] = taskMatch;
+
+        // If the task item is empty, remove it and exit list mode
+        if (!content.trim()) {
+            view.dispatch({
+                changes: {
+                    from: line.from,
+                    to: line.to,
+                    insert: ''
+                },
+                selection: {
+                    anchor: line.from
+                }
+            });
+            return true;
+        }
+
+        // Continue the task list with unchecked box
+        const textBeforeCursor = lineText.substring(0, cursorInLine);
+        const textAfterCursor = lineText.substring(cursorInLine);
+        const newListItem = indent + marker + ' [ ] ';
+
+        view.dispatch({
+            changes: {
+                from: line.from,
+                to: line.to,
+                insert: textBeforeCursor + '\n' + newListItem + textAfterCursor
+            },
+            selection: {
+                anchor: line.from + textBeforeCursor.length + 1 + newListItem.length
+            }
+        });
+        return true;
+    }
+
+    // Check for unordered list (- or *)
+    const unorderedMatch = lineText.match(/^(\s*)([-*])\s+(.*)$/);
+    if (unorderedMatch) {
+        const [, indent, marker, content] = unorderedMatch;
+
+        // If the list item is empty (just the marker), remove it and exit list mode
+        if (!content.trim()) {
+            view.dispatch({
+                changes: {
+                    from: line.from,
+                    to: line.to,
+                    insert: ''
+                },
+                selection: {
+                    anchor: line.from
+                }
+            });
+            return true;
+        }
+
+        // Continue the list
+        const textBeforeCursor = lineText.substring(0, cursorInLine);
+        const textAfterCursor = lineText.substring(cursorInLine);
+        const newListItem = indent + marker + ' ';
+
+        view.dispatch({
+            changes: {
+                from: line.from,
+                to: line.to,
+                insert: textBeforeCursor + '\n' + newListItem + textAfterCursor
+            },
+            selection: {
+                anchor: line.from + textBeforeCursor.length + 1 + newListItem.length
+            }
+        });
+        return true;
+    }
+
+    // Check for ordered list (1., 2., etc.)
+    const orderedMatch = lineText.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (orderedMatch) {
+        const [, indent, number, content] = orderedMatch;
+
+        // If the list item is empty (just the number), remove it and exit list mode
+        if (!content.trim()) {
+            view.dispatch({
+                changes: {
+                    from: line.from,
+                    to: line.to,
+                    insert: ''
+                },
+                selection: {
+                    anchor: line.from
+                }
+            });
+            return true;
+        }
+
+        // Continue the list with incremented number
+        const textBeforeCursor = lineText.substring(0, cursorInLine);
+        const textAfterCursor = lineText.substring(cursorInLine);
+        const nextNumber = parseInt(number, 10) + 1;
+        const newListItem = indent + nextNumber + '. ';
+
+        view.dispatch({
+            changes: {
+                from: line.from,
+                to: line.to,
+                insert: textBeforeCursor + '\n' + newListItem + textAfterCursor
+            },
+            selection: {
+                anchor: line.from + textBeforeCursor.length + 1 + newListItem.length
+            }
+        });
+        return true;
+    }
+
+    // Not a list, use default Enter behavior
+    return false;
+};
+
+export const listContinuationKeymap: KeyBinding[] = [
+    {
+        key: "Enter",
+        run: handleEnterForListContinuation
+    }
+];

workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpandedEditor/utils/codemirrorListContinuation.ts

@@ -49,7 +49,7 @@ import { LineRange } from "@wso2/ballerina-core";
 import FXButton from "./FxButton";
 import { HelperPaneToggleButton } from "./HelperPaneToggleButton";
 import { HelperPane } from "./HelperPane";
-import { listContinuationKeymap } from "../../../../editors/ExpandedEditor/utils/codemirrorListContinuation";
+import { listContinuationKeymap } from "../../../ExpandedEditor/utils/templateUtils";
 
 type HelperPaneState = {
     isOpen: boolean;
@@ -91,7 +91,7 @@ export type ChipExpressionEditorComponentProps = {
     onEditorViewReady?: (view: EditorView) => void;
     toolbarRef?: React.RefObject<HTMLDivElement>;
     enableListContinuation?: boolean;
-    disableAutoOpenHelperPane? : boolean;
+    disableAutoOpenHelperPane?: boolean;
 }
 
 export const ChipExpressionEditorComponent = (props: ChipExpressionEditorComponentProps) => {