@harborclient/sdk 1.0.55 → 1.0.57

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts

@@ -1,9 +1,17 @@
 import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
 import { type RenderHighlightedPlaceholderOptions } from './renderHighlightedPlaceholder.js';
 /**
  * Options for building a muted syntax-highlighted placeholder layer.
  */
 export type SyntaxHighlightedPlaceholderOptions = RenderHighlightedPlaceholderOptions;
+/**
+ * Returns whether the syntax-highlighted placeholder should be visible.
+ *
+ * @param view - Parent CodeMirror editor view.
+ * @param engaged - True after the user pressed inside the editor chrome.
+ */
+export declare function shouldShowSyntaxPlaceholder(view: EditorView, engaged: boolean): boolean;
 /**
  * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
  * when the editor document is empty and unfocused.

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AASnD,OAAO,EACL,KAAK,mCAAmC,EAEzC,MAAM,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,mCAAmC,GAAG,mCAAmC,CAAC;AA2DtF;;;;;;GAMG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,SAAS,EAAE,CA+Cb"}
+{"version":3,"file":"syntaxHighlightedPlaceholder.d.ts","sourceRoot":"","sources":["../../../src/components/CodeEditor/syntaxHighlightedPlaceholder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAGL,UAAU,EAIX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,mCAAmC,EAEzC,MAAM,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,mCAAmC,GAAG,mCAAmC,CAAC;AA6CtF;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAQvF;AAiGD;;;;;;GAMG;AACH,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mCAAmC,GAC3C,SAAS,EAAE,CA+Eb"}

package/dist/components/CodeEditor/syntaxHighlightedPlaceholder.js

@@ -28,13 +28,32 @@ class SyntaxHighlightedPlaceholderWidget extends WidgetType {
         return true;
     }
 }
+/**
+ * Returns whether focus currently lives inside the editor's DOM subtree.
+ *
+ * @param view - Parent CodeMirror editor view.
+ */
+function isEditorDomFocused(view) {
+    const active = view.root.activeElement;
+    if (active == null) {
+        return false;
+    }
+    return view.dom.contains(active);
+}
 /**
  * Returns whether the syntax-highlighted placeholder should be visible.
  *
  * @param view - Parent CodeMirror editor view.
+ * @param engaged - True after the user pressed inside the editor chrome.
  */
-function shouldShowSyntaxPlaceholder(view) {
-    return view.state.doc.length === 0 && !view.hasFocus;
+export function shouldShowSyntaxPlaceholder(view, engaged) {
+    if (view.state.doc.length > 0) {
+        return false;
+    }
+    if (engaged || isEditorDomFocused(view)) {
+        return false;
+    }
+    return true;
 }
 /**
  * Builds widget decorations for the muted placeholder layer.
@@ -50,6 +69,75 @@ function buildSyntaxPlaceholderDecorations(text, options) {
         }).range(0)
     ]);
 }
+/**
+ * ViewPlugin that tracks editor engagement and renders placeholder decorations.
+ */
+class SyntaxHighlightedPlaceholderPlugin {
+    text;
+    options;
+    placeholder;
+    /**
+     * True after a pointer press inside the editor; cleared when focus leaves the editor
+     * while the document is still empty.
+     */
+    engaged = false;
+    /**
+     * @param view - Parent CodeMirror editor view.
+     * @param text - Placeholder source shown until the user engages or types.
+     * @param options - Highlighting and theme options.
+     */
+    constructor(view, text, options) {
+        this.text = text;
+        this.options = options;
+        this.placeholder = this.compute(view);
+    }
+    /**
+     * Recomputes placeholder decorations from document length and engagement state.
+     *
+     * @param view - Parent CodeMirror editor view.
+     */
+    compute(view) {
+        return shouldShowSyntaxPlaceholder(view, this.engaged)
+            ? buildSyntaxPlaceholderDecorations(this.text, this.options)
+            : Decoration.none;
+    }
+    /**
+     * Applies a new engagement flag and refreshes decorations when it changes.
+     *
+     * @param view - Parent CodeMirror editor view.
+     * @param nextEngaged - Whether the user has pressed inside the editor chrome.
+     */
+    setEngaged(view, nextEngaged) {
+        if (this.engaged === nextEngaged) {
+            return;
+        }
+        this.engaged = nextEngaged;
+        this.placeholder = this.compute(view);
+        view.dispatch({});
+    }
+    /**
+     * Shows or hides the placeholder when the document, focus, or engagement changes.
+     *
+     * @param update - Parent view update.
+     */
+    update(update) {
+        if (update.docChanged || update.focusChanged || update.view.state.doc.length === 0) {
+            this.placeholder = this.compute(update.view);
+        }
+    }
+    get decorations() {
+        return this.placeholder;
+    }
+}
+/**
+ * Returns whether a DOM event target lies inside the editor root element.
+ *
+ * @param view - Parent CodeMirror editor view.
+ * @param target - Event target node.
+ */
+function isEventTargetInEditor(view, target) {
+    return target instanceof Node && view.dom.contains(target);
+}
 /**
  * Returns CodeMirror extensions that show muted syntax-highlighted placeholder content
  * when the editor document is empty and unfocused.
@@ -58,37 +146,66 @@ function buildSyntaxPlaceholderDecorations(text, options) {
  * @param options - Highlighting and theme options shared with the parent editor.
  */
 export function createSyntaxHighlightedPlaceholder(text, options) {
-    const plugin = ViewPlugin.fromClass(class {
-        placeholder;
+    const placeholderPlugin = ViewPlugin.fromClass(class extends SyntaxHighlightedPlaceholderPlugin {
         /**
          * Initializes placeholder decorations for an empty, unfocused document.
          *
          * @param view - Parent CodeMirror editor view.
          */
         constructor(view) {
-            this.placeholder = shouldShowSyntaxPlaceholder(view)
-                ? buildSyntaxPlaceholderDecorations(text, options)
-                : Decoration.none;
+            super(view, text, options);
         }
-        /**
-         * Shows or hides the placeholder when the document, focus, or content changes.
-         *
-         * @param update - Parent view update.
-         */
-        update(update) {
-            if (!update.docChanged && !update.focusChanged) {
+    }, { decorations: (v) => v.decorations });
+    /**
+     * Marks the editor engaged on pointer presses inside the editor chrome only.
+     *
+     * @param view - Parent CodeMirror editor view.
+     * @param event - Pointer or mouse event from the editor root.
+     */
+    const handleEditorPointerDown = (view, event) => {
+        if (view.state.doc.length > 0 || !isEventTargetInEditor(view, event.target)) {
+            return;
+        }
+        const plugin = view.plugin(placeholderPlugin);
+        if (plugin == null) {
+            return;
+        }
+        plugin.setEngaged(view, true);
+    };
+    /**
+     * Clears engagement after focus leaves the editor while the document is still empty.
+     *
+     * @param view - Parent CodeMirror editor view.
+     */
+    const handleEditorFocusOut = (view) => {
+        requestAnimationFrame(() => {
+            if (view.state.doc.length > 0 || isEditorDomFocused(view)) {
                 return;
             }
-            this.placeholder = shouldShowSyntaxPlaceholder(update.view)
-                ? buildSyntaxPlaceholderDecorations(text, options)
-                : Decoration.none;
-        }
-        get decorations() {
-            return this.placeholder;
+            const plugin = view.plugin(placeholderPlugin);
+            if (plugin == null) {
+                return;
+            }
+            plugin.setEngaged(view, false);
+        });
+    };
+    const engagementHandlers = EditorView.domEventHandlers({
+        mousedown(event, view) {
+            handleEditorPointerDown(view, event);
+            return false;
+        },
+        pointerdown(event, view) {
+            handleEditorPointerDown(view, event);
+            return false;
+        },
+        focusout(_event, view) {
+            handleEditorFocusOut(view);
+            return false;
         }
-    }, { decorations: (v) => v.decorations });
+    });
     return [
-        plugin,
+        placeholderPlugin,
+        engagementHandlers,
         EditorView.contentAttributes.of({ 'aria-placeholder': text }),
         EditorView.theme({
             '.cm-content:has(.cm-syntax-placeholder) .cm-activeLine': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborclient/sdk",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "TypeScript SDK for HarborClient development.",
   "keywords": [
     "harborclient",