@coze-editor/extension-placeholder 0.1.0-alpha.0fd19e

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 coze-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/index.js

@@ -0,0 +1,178 @@
+// src/placeholder.ts
+import { FacetCombineStrategy } from "@coze-editor/utils";
+import {
+  Decoration,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+import { Facet } from "@codemirror/state";
+
+// src/dom.ts
+var scratchRange;
+function textRange(node, from, to = from) {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+}
+function flattenRect(rect, left) {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+}
+function clientRectsFor(dom) {
+  if (dom.nodeType == 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType == 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+}
+
+// src/placeholder.ts
+function createPlaceholderWidgetClass() {
+  return class Placeholder extends WidgetType {
+    constructor(content) {
+      super();
+      this.content = content;
+    }
+    toDOM(view) {
+      const wrap = document.createElement("span");
+      wrap.className = "cm-placeholder";
+      wrap.style.cssText = `
+      height: 0;
+    `;
+      wrap.appendChild(
+        typeof this.content === "string" ? document.createTextNode(this.content) : typeof this.content === "function" ? this.content(view) : this.content
+      );
+      if (typeof this.content === "string") {
+        wrap.setAttribute("aria-label", `placeholder ${this.content}`);
+      } else {
+        wrap.setAttribute("aria-hidden", "true");
+      }
+      return wrap;
+    }
+    coordsAt(dom) {
+      const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+      if (!rects.length) {
+        return null;
+      }
+      const style = window.getComputedStyle(dom.parentNode);
+      const rect = flattenRect(rects[0], style.direction != "rtl");
+      const lineHeight = parseInt(style.lineHeight);
+      if (rect.bottom - rect.top > lineHeight * 1.5) {
+        return {
+          left: rect.left,
+          right: rect.right,
+          top: rect.top,
+          bottom: rect.top + lineHeight
+        };
+      }
+      return rect;
+    }
+    ignoreEvent() {
+      return false;
+    }
+  };
+}
+var Placeholder = createPlaceholderWidgetClass();
+var contentFacet = Facet.define({
+  combine: FacetCombineStrategy.Last
+});
+var placeholderView = ViewPlugin.fromClass(
+  class PlaceholderView {
+    constructor(view) {
+      this.view = view;
+      const content = view.state.facet(contentFacet);
+      this.placeholder = this.getPlaceholder(content);
+    }
+    placeholder;
+    content;
+    update(update) {
+      const content = update.view.state.facet(contentFacet);
+      if (this.content !== content) {
+        this.placeholder = this.getPlaceholder(content);
+        this.content = content;
+      }
+    }
+    getPlaceholder(content) {
+      return content ? Decoration.set([
+        Decoration.widget({
+          widget: new Placeholder(content),
+          side: 1
+        }).range(0)
+      ]) : Decoration.none;
+    }
+    get decorations() {
+      return this.view.state.doc.length ? Decoration.none : this.placeholder;
+    }
+  },
+  {
+    decorations: (v) => v.decorations
+  }
+);
+function placeholder(content) {
+  return [placeholderView, contentFacet.of(content)];
+}
+
+// src/active-line-placeholder.ts
+import { FacetCombineStrategy as FacetCombineStrategy2 } from "@coze-editor/utils";
+import {
+  Decoration as Decoration2,
+  ViewPlugin as ViewPlugin2
+} from "@codemirror/view";
+import { Facet as Facet2 } from "@codemirror/state";
+var Placeholder2 = createPlaceholderWidgetClass();
+var contentFacet2 = Facet2.define({
+  combine: FacetCombineStrategy2.Last
+});
+var activeLinePlaceholderView = ViewPlugin2.fromClass(
+  class {
+    decorations = Decoration2.none;
+    constructor(view) {
+      if (view.hasFocus) {
+        this.decorations = getPlaceholderDecoration(view.state);
+      } else {
+        this.decorations = Decoration2.none;
+      }
+    }
+    update(update) {
+      if (!update.view.hasFocus) {
+        this.decorations = Decoration2.none;
+        return;
+      }
+      if (update.selectionSet || update.docChanged) {
+        this.decorations = getPlaceholderDecoration(update.state);
+      }
+    }
+  },
+  {
+    decorations(plugin) {
+      return plugin.decorations;
+    }
+  }
+);
+function getPlaceholderDecoration(state) {
+  const pos = state.selection.main.head;
+  if (state.selection.main.empty) {
+    const line = state.doc.lineAt(pos);
+    if (line && line.length === 0) {
+      const content = state.facet(contentFacet2);
+      return Decoration2.set([
+        Decoration2.widget({
+          widget: new Placeholder2(content),
+          side: 1
+        }).range(line.from)
+      ]);
+    }
+  }
+  return Decoration2.none;
+}
+var activeLinePlaceholder = function(content) {
+  return [activeLinePlaceholderView, contentFacet2.of(content)];
+};
+export {
+  activeLinePlaceholder,
+  placeholder
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/placeholder.ts","../../src/dom.ts","../../src/active-line-placeholder.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n// modified from @codemirror/view\n// updates:\n// - support handle user events(remove pointerEvents = \"none\", remove cloneNode)\n// - use single view\n// - support multiple content sources(use last one)\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  Decoration,\n  type DecorationSet,\n  type EditorView,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@codemirror/view';\nimport { type Extension, Facet } from '@codemirror/state';\n\nimport { clientRectsFor, flattenRect } from './dom';\n\nfunction createPlaceholderWidgetClass() {\n  return class Placeholder extends WidgetType {\n    constructor(\n      readonly content:\n        | string\n        | HTMLElement\n        | ((view: EditorView) => HTMLElement),\n    ) {\n      super();\n    }\n\n    toDOM(view: EditorView) {\n      const wrap = document.createElement('span');\n      wrap.className = 'cm-placeholder';\n      // solved the cursor height problem(eg. cursor double height with two lines)\n      wrap.style.cssText = `\n      height: 0;\n    `;\n      // wrap.style.pointerEvents = \"none\"\n      wrap.appendChild(\n        typeof this.content === 'string'\n          ? document.createTextNode(this.content)\n          : typeof this.content === 'function'\n            ? this.content(view)\n            : this.content,\n      );\n      if (typeof this.content === 'string') {\n        wrap.setAttribute('aria-label', `placeholder ${this.content}`);\n      } else {\n        wrap.setAttribute('aria-hidden', 'true');\n      }\n      return wrap;\n    }\n\n    coordsAt(dom: HTMLElement) {\n      const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];\n      if (!rects.length) {\n        return null;\n      }\n      const style = window.getComputedStyle(dom.parentNode as HTMLElement);\n      const rect = flattenRect(rects[0], style.direction != 'rtl');\n      const lineHeight = parseInt(style.lineHeight);\n      if (rect.bottom - rect.top > lineHeight * 1.5) {\n        return {\n          left: rect.left,\n          right: rect.right,\n          top: rect.top,\n          bottom: rect.top + lineHeight,\n        };\n      }\n      return rect;\n    }\n\n    ignoreEvent() {\n      return false;\n    }\n  };\n}\n\nconst Placeholder = createPlaceholderWidgetClass();\n\ntype Content = string | HTMLElement | ((view: EditorView) => HTMLElement);\nconst contentFacet = Facet.define({\n  combine: FacetCombineStrategy.Last<Content>,\n});\n\nconst placeholderView = ViewPlugin.fromClass(\n  class PlaceholderView {\n    private placeholder: DecorationSet;\n    private content: Content | undefined;\n\n    constructor(private readonly view: EditorView) {\n      const content = view.state.facet(contentFacet);\n      this.placeholder = this.getPlaceholder(content);\n    }\n\n    update(update: ViewUpdate) {\n      const content = update.view.state.facet(contentFacet);\n\n      if (this.content !== content) {\n        this.placeholder = this.getPlaceholder(content);\n        this.content = content;\n      }\n    }\n\n    getPlaceholder(content: Content) {\n      return content\n        ? Decoration.set([\n            Decoration.widget({\n              widget: new Placeholder(content),\n              side: 1,\n            }).range(0),\n          ])\n        : Decoration.none;\n    }\n\n    get decorations() {\n      return this.view.state.doc.length ? Decoration.none : this.placeholder;\n    }\n  },\n  {\n    decorations: v => v.decorations,\n  },\n);\n\nfunction placeholder(content: Content): Extension {\n  return [placeholderView, contentFacet.of(content)];\n}\n\nexport { placeholder, createPlaceholderWidgetClass };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/// Basic rectangle type.\ninterface Rect {\n  readonly left: number;\n  readonly right: number;\n  readonly top: number;\n  readonly bottom: number;\n}\n\nlet scratchRange: Range | null;\n\nfunction textRange(node: Text, from: number, to = from) {\n  const range = scratchRange || (scratchRange = document.createRange());\n  range.setEnd(node, to);\n  range.setStart(node, from);\n  return range;\n}\n\nfunction flattenRect(rect: Rect, left: boolean) {\n  const x = left ? rect.left : rect.right;\n  return { left: x, right: x, top: rect.top, bottom: rect.bottom };\n}\n\nfunction clientRectsFor(dom: Node) {\n  if (dom.nodeType == 3) {\n    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();\n  } else if (dom.nodeType == 1) {\n    return (dom as HTMLElement).getClientRects();\n  } else {\n    return [] as any as DOMRectList;\n  }\n}\n\nexport { flattenRect, clientRectsFor };\n\nexport type { Rect };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  Decoration,\n  type EditorView,\n  ViewPlugin,\n  type ViewUpdate,\n} from '@codemirror/view';\nimport { type EditorState, type Extension, Facet } from '@codemirror/state';\n\nimport { createPlaceholderWidgetClass } from './placeholder';\n\n// isolate Widget class with Placeholder to avoid widget reusable compare when using Placeholder and ActiveLinePlaceholder together\nconst Placeholder = createPlaceholderWidgetClass();\n\ntype Content = string | HTMLElement | ((view: EditorView) => HTMLElement);\nconst contentFacet = Facet.define({\n  combine: FacetCombineStrategy.Last<Content>,\n});\n\nconst activeLinePlaceholderView = ViewPlugin.fromClass(\n  class {\n    public decorations = Decoration.none;\n\n    constructor(view: EditorView) {\n      if (view.hasFocus) {\n        this.decorations = getPlaceholderDecoration(view.state);\n      } else {\n        this.decorations = Decoration.none;\n      }\n    }\n\n    update(update: ViewUpdate) {\n      if (!update.view.hasFocus) {\n        this.decorations = Decoration.none;\n        return;\n      }\n\n      // docChanged case: focusing at first empty line, and hit cmd + x(non-empty second line comes in), widget should disappear\n      if (update.selectionSet || update.docChanged) {\n        this.decorations = getPlaceholderDecoration(update.state);\n      }\n    }\n  },\n  {\n    decorations(plugin) {\n      return plugin.decorations;\n    },\n  },\n);\n\nfunction getPlaceholderDecoration(state: EditorState) {\n  const pos = state.selection.main.head;\n\n  if (state.selection.main.empty) {\n    const line = state.doc.lineAt(pos);\n\n    if (line && line.length === 0) {\n      const content = state.facet(contentFacet);\n      return Decoration.set([\n        Decoration.widget({\n          widget: new Placeholder(content),\n          side: 1,\n        }).range(line.from),\n      ]);\n    }\n  }\n\n  return Decoration.none;\n}\n\nconst activeLinePlaceholder = function (content: Content): Extension {\n  return [activeLinePlaceholderView, contentFacet.of(content)];\n};\n\nexport { activeLinePlaceholder };\n"],"mappings":"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","names":["FacetCombineStrategy","Decoration","ViewPlugin","Facet","Placeholder","contentFacet","Facet","FacetCombineStrategy","ViewPlugin","Decoration"]}

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+
+type Content$1 = string | HTMLElement | ((view: EditorView) => HTMLElement);
+declare function placeholder(content: Content$1): Extension;
+
+type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
+declare const activeLinePlaceholder: (content: Content) => Extension;
+
+export { activeLinePlaceholder, placeholder };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+
+type Content$1 = string | HTMLElement | ((view: EditorView) => HTMLElement);
+declare function placeholder(content: Content$1): Extension;
+
+type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
+declare const activeLinePlaceholder: (content: Content) => Extension;
+
+export { activeLinePlaceholder, placeholder };

package/dist/index.js

@@ -0,0 +1,198 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  activeLinePlaceholder: () => activeLinePlaceholder,
+  placeholder: () => placeholder
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/placeholder.ts
+var import_utils = require("@coze-editor/utils");
+var import_view = require("@codemirror/view");
+var import_state = require("@codemirror/state");
+
+// src/dom.ts
+var scratchRange;
+function textRange(node, from, to = from) {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+}
+function flattenRect(rect, left) {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+}
+function clientRectsFor(dom) {
+  if (dom.nodeType == 3) {
+    return textRange(dom, 0, dom.nodeValue.length).getClientRects();
+  } else if (dom.nodeType == 1) {
+    return dom.getClientRects();
+  } else {
+    return [];
+  }
+}
+
+// src/placeholder.ts
+function createPlaceholderWidgetClass() {
+  return class Placeholder extends import_view.WidgetType {
+    constructor(content) {
+      super();
+      this.content = content;
+    }
+    toDOM(view) {
+      const wrap = document.createElement("span");
+      wrap.className = "cm-placeholder";
+      wrap.style.cssText = `
+      height: 0;
+    `;
+      wrap.appendChild(
+        typeof this.content === "string" ? document.createTextNode(this.content) : typeof this.content === "function" ? this.content(view) : this.content
+      );
+      if (typeof this.content === "string") {
+        wrap.setAttribute("aria-label", `placeholder ${this.content}`);
+      } else {
+        wrap.setAttribute("aria-hidden", "true");
+      }
+      return wrap;
+    }
+    coordsAt(dom) {
+      const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+      if (!rects.length) {
+        return null;
+      }
+      const style = window.getComputedStyle(dom.parentNode);
+      const rect = flattenRect(rects[0], style.direction != "rtl");
+      const lineHeight = parseInt(style.lineHeight);
+      if (rect.bottom - rect.top > lineHeight * 1.5) {
+        return {
+          left: rect.left,
+          right: rect.right,
+          top: rect.top,
+          bottom: rect.top + lineHeight
+        };
+      }
+      return rect;
+    }
+    ignoreEvent() {
+      return false;
+    }
+  };
+}
+var Placeholder = createPlaceholderWidgetClass();
+var contentFacet = import_state.Facet.define({
+  combine: import_utils.FacetCombineStrategy.Last
+});
+var placeholderView = import_view.ViewPlugin.fromClass(
+  class PlaceholderView {
+    constructor(view) {
+      this.view = view;
+      const content = view.state.facet(contentFacet);
+      this.placeholder = this.getPlaceholder(content);
+    }
+    placeholder;
+    content;
+    update(update) {
+      const content = update.view.state.facet(contentFacet);
+      if (this.content !== content) {
+        this.placeholder = this.getPlaceholder(content);
+        this.content = content;
+      }
+    }
+    getPlaceholder(content) {
+      return content ? import_view.Decoration.set([
+        import_view.Decoration.widget({
+          widget: new Placeholder(content),
+          side: 1
+        }).range(0)
+      ]) : import_view.Decoration.none;
+    }
+    get decorations() {
+      return this.view.state.doc.length ? import_view.Decoration.none : this.placeholder;
+    }
+  },
+  {
+    decorations: (v) => v.decorations
+  }
+);
+function placeholder(content) {
+  return [placeholderView, contentFacet.of(content)];
+}
+
+// src/active-line-placeholder.ts
+var import_utils2 = require("@coze-editor/utils");
+var import_view2 = require("@codemirror/view");
+var import_state2 = require("@codemirror/state");
+var Placeholder2 = createPlaceholderWidgetClass();
+var contentFacet2 = import_state2.Facet.define({
+  combine: import_utils2.FacetCombineStrategy.Last
+});
+var activeLinePlaceholderView = import_view2.ViewPlugin.fromClass(
+  class {
+    decorations = import_view2.Decoration.none;
+    constructor(view) {
+      if (view.hasFocus) {
+        this.decorations = getPlaceholderDecoration(view.state);
+      } else {
+        this.decorations = import_view2.Decoration.none;
+      }
+    }
+    update(update) {
+      if (!update.view.hasFocus) {
+        this.decorations = import_view2.Decoration.none;
+        return;
+      }
+      if (update.selectionSet || update.docChanged) {
+        this.decorations = getPlaceholderDecoration(update.state);
+      }
+    }
+  },
+  {
+    decorations(plugin) {
+      return plugin.decorations;
+    }
+  }
+);
+function getPlaceholderDecoration(state) {
+  const pos = state.selection.main.head;
+  if (state.selection.main.empty) {
+    const line = state.doc.lineAt(pos);
+    if (line && line.length === 0) {
+      const content = state.facet(contentFacet2);
+      return import_view2.Decoration.set([
+        import_view2.Decoration.widget({
+          widget: new Placeholder2(content),
+          side: 1
+        }).range(line.from)
+      ]);
+    }
+  }
+  return import_view2.Decoration.none;
+}
+var activeLinePlaceholder = function(content) {
+  return [activeLinePlaceholderView, contentFacet2.of(content)];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  activeLinePlaceholder,
+  placeholder
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/placeholder.ts","../src/dom.ts","../src/active-line-placeholder.ts"],"sourcesContent":["//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nexport { placeholder } from './placeholder';\n\nexport { activeLinePlaceholder } from './active-line-placeholder';\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n// modified from @codemirror/view\n// updates:\n// - support handle user events(remove pointerEvents = \"none\", remove cloneNode)\n// - use single view\n// - support multiple content sources(use last one)\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  Decoration,\n  type DecorationSet,\n  type EditorView,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@codemirror/view';\nimport { type Extension, Facet } from '@codemirror/state';\n\nimport { clientRectsFor, flattenRect } from './dom';\n\nfunction createPlaceholderWidgetClass() {\n  return class Placeholder extends WidgetType {\n    constructor(\n      readonly content:\n        | string\n        | HTMLElement\n        | ((view: EditorView) => HTMLElement),\n    ) {\n      super();\n    }\n\n    toDOM(view: EditorView) {\n      const wrap = document.createElement('span');\n      wrap.className = 'cm-placeholder';\n      // solved the cursor height problem(eg. cursor double height with two lines)\n      wrap.style.cssText = `\n      height: 0;\n    `;\n      // wrap.style.pointerEvents = \"none\"\n      wrap.appendChild(\n        typeof this.content === 'string'\n          ? document.createTextNode(this.content)\n          : typeof this.content === 'function'\n            ? this.content(view)\n            : this.content,\n      );\n      if (typeof this.content === 'string') {\n        wrap.setAttribute('aria-label', `placeholder ${this.content}`);\n      } else {\n        wrap.setAttribute('aria-hidden', 'true');\n      }\n      return wrap;\n    }\n\n    coordsAt(dom: HTMLElement) {\n      const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];\n      if (!rects.length) {\n        return null;\n      }\n      const style = window.getComputedStyle(dom.parentNode as HTMLElement);\n      const rect = flattenRect(rects[0], style.direction != 'rtl');\n      const lineHeight = parseInt(style.lineHeight);\n      if (rect.bottom - rect.top > lineHeight * 1.5) {\n        return {\n          left: rect.left,\n          right: rect.right,\n          top: rect.top,\n          bottom: rect.top + lineHeight,\n        };\n      }\n      return rect;\n    }\n\n    ignoreEvent() {\n      return false;\n    }\n  };\n}\n\nconst Placeholder = createPlaceholderWidgetClass();\n\ntype Content = string | HTMLElement | ((view: EditorView) => HTMLElement);\nconst contentFacet = Facet.define({\n  combine: FacetCombineStrategy.Last<Content>,\n});\n\nconst placeholderView = ViewPlugin.fromClass(\n  class PlaceholderView {\n    private placeholder: DecorationSet;\n    private content: Content | undefined;\n\n    constructor(private readonly view: EditorView) {\n      const content = view.state.facet(contentFacet);\n      this.placeholder = this.getPlaceholder(content);\n    }\n\n    update(update: ViewUpdate) {\n      const content = update.view.state.facet(contentFacet);\n\n      if (this.content !== content) {\n        this.placeholder = this.getPlaceholder(content);\n        this.content = content;\n      }\n    }\n\n    getPlaceholder(content: Content) {\n      return content\n        ? Decoration.set([\n            Decoration.widget({\n              widget: new Placeholder(content),\n              side: 1,\n            }).range(0),\n          ])\n        : Decoration.none;\n    }\n\n    get decorations() {\n      return this.view.state.doc.length ? Decoration.none : this.placeholder;\n    }\n  },\n  {\n    decorations: v => v.decorations,\n  },\n);\n\nfunction placeholder(content: Content): Extension {\n  return [placeholderView, contentFacet.of(content)];\n}\n\nexport { placeholder, createPlaceholderWidgetClass };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\n/// Basic rectangle type.\ninterface Rect {\n  readonly left: number;\n  readonly right: number;\n  readonly top: number;\n  readonly bottom: number;\n}\n\nlet scratchRange: Range | null;\n\nfunction textRange(node: Text, from: number, to = from) {\n  const range = scratchRange || (scratchRange = document.createRange());\n  range.setEnd(node, to);\n  range.setStart(node, from);\n  return range;\n}\n\nfunction flattenRect(rect: Rect, left: boolean) {\n  const x = left ? rect.left : rect.right;\n  return { left: x, right: x, top: rect.top, bottom: rect.bottom };\n}\n\nfunction clientRectsFor(dom: Node) {\n  if (dom.nodeType == 3) {\n    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();\n  } else if (dom.nodeType == 1) {\n    return (dom as HTMLElement).getClientRects();\n  } else {\n    return [] as any as DOMRectList;\n  }\n}\n\nexport { flattenRect, clientRectsFor };\n\nexport type { Rect };\n","//  Copyright (c) 2025 coze-dev\n//  SPDX-License-Identifier: MIT\n\nimport { FacetCombineStrategy } from '@coze-editor/utils';\nimport {\n  Decoration,\n  type EditorView,\n  ViewPlugin,\n  type ViewUpdate,\n} from '@codemirror/view';\nimport { type EditorState, type Extension, Facet } from '@codemirror/state';\n\nimport { createPlaceholderWidgetClass } from './placeholder';\n\n// isolate Widget class with Placeholder to avoid widget reusable compare when using Placeholder and ActiveLinePlaceholder together\nconst Placeholder = createPlaceholderWidgetClass();\n\ntype Content = string | HTMLElement | ((view: EditorView) => HTMLElement);\nconst contentFacet = Facet.define({\n  combine: FacetCombineStrategy.Last<Content>,\n});\n\nconst activeLinePlaceholderView = ViewPlugin.fromClass(\n  class {\n    public decorations = Decoration.none;\n\n    constructor(view: EditorView) {\n      if (view.hasFocus) {\n        this.decorations = getPlaceholderDecoration(view.state);\n      } else {\n        this.decorations = Decoration.none;\n      }\n    }\n\n    update(update: ViewUpdate) {\n      if (!update.view.hasFocus) {\n        this.decorations = Decoration.none;\n        return;\n      }\n\n      // docChanged case: focusing at first empty line, and hit cmd + x(non-empty second line comes in), widget should disappear\n      if (update.selectionSet || update.docChanged) {\n        this.decorations = getPlaceholderDecoration(update.state);\n      }\n    }\n  },\n  {\n    decorations(plugin) {\n      return plugin.decorations;\n    },\n  },\n);\n\nfunction getPlaceholderDecoration(state: EditorState) {\n  const pos = state.selection.main.head;\n\n  if (state.selection.main.empty) {\n    const line = state.doc.lineAt(pos);\n\n    if (line && line.length === 0) {\n      const content = state.facet(contentFacet);\n      return Decoration.set([\n        Decoration.widget({\n          widget: new Placeholder(content),\n          side: 1,\n        }).range(line.from),\n      ]);\n    }\n  }\n\n  return Decoration.none;\n}\n\nconst activeLinePlaceholder = function (content: Content): Extension {\n  return [activeLinePlaceholderView, contentFacet.of(content)];\n};\n\nexport { activeLinePlaceholder };\n"],"mappings":"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","names":["import_utils","import_view","import_state","Placeholder","contentFacet"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@coze-editor/extension-placeholder",
+  "version": "0.1.0-alpha.0fd19e",
+  "description": "extension-placeholder",
+  "license": "MIT",
+  "author": "fengzilong",
+  "maintainers": [],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less",
+    "**/*.sass",
+    "**/*.scss"
+  ],
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint && tsc --noEmit"
+  },
+  "dependencies": {
+    "@coze-editor/utils": "0.1.0-alpha.0fd19e"
+  },
+  "devDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-editor/eslint-config": "workspace:*",
+    "@types/node": "^22",
+    "eslint": "9.14.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "test:main": "./src/index.ts"
+}