feat: add PrefixElement (#117)

Co-authored-by: stream-pipe <[email protected]>

Author: stream-pipe

common/changes/@coze-editor/react-components/feature-prefix-element_2025-09-18-13-03.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@coze-editor/react-components",
+      "comment": "add PrefixElement",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@coze-editor/react-components",
+  "email": "[email protected]"
+}

packages/text-editor/dev/src/index.tsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import Page from './pages/code';
+import Page from './pages/prefix';
 import './index.css';
 
 createRoot(document.getElementById('app')!).render(<Page />);

packages/text-editor/dev/src/pages/prefix/index.tsx

@@ -0,0 +1,93 @@
+import { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import preset, { EditorAPI } from '@coze-editor/editor/preset-universal';
+import { EditorProvider, Placeholder, PrefixElement, Renderer } from '@coze-editor/editor/react'
+import { Radio, RadioGroup, Tag } from '@douyinfe/semi-ui';
+import { useMemo, useRef, useState } from 'react';
+
+const defaultValue = ''
+const extensions: Extension[] = [
+  EditorView.theme({
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '&': {
+      border: '1px dotted #212121',
+    },
+  })
+];
+
+function Page() {
+  const editorRef = useRef<EditorAPI | null>(null)
+  const [mode, setMode] = useState('code');
+
+  const modeText = useMemo(() => {
+    const map: Record<string, string> = {
+      code: '编程',
+      writing: '写作',
+    }
+
+    return map[mode]
+  }, [mode]);
+
+  return <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      width: 500,
+      margin: '100px auto',
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: 20,
+      }}
+    >
+      <RadioGroup
+        type='button'
+        buttonSize='small'
+        defaultValue={mode}
+        onChange={e => {
+          setMode(e.target.value)
+          editorRef.current?.focus();
+        }}
+      >
+        <Radio value={'code'}>编程</Radio>
+        <Radio value={'writing'}>写作</Radio>
+      </RadioGroup>
+    </div>
+
+    <EditorProvider>
+      <Renderer
+        plugins={preset}
+        defaultValue={defaultValue}
+        options={{
+          minHeight: 200,
+          lineWrapping: true,
+        }}
+        extensions={extensions}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor
+        }}
+      />
+
+      <PrefixElement
+        deletable
+        onDelete={() => setMode('')}
+      >
+        {modeText ? (
+          <Tag style={{marginRight: 5}} closable onClose={() => setMode('')}>{modeText}</Tag>
+        ) : null}
+      </PrefixElement>
+
+      <Placeholder>
+        {modeText ? <span style={{cursor: 'text'}}>输入你的{modeText}任务</span> : '默认提示'}
+      </Placeholder>
+    </EditorProvider>
+  </div>
+}
+
+export default Page

packages/text-editor/react-components/src/index.ts

@@ -45,3 +45,5 @@ export {
   EmbededLineViewSide,
   type EmbededLineViewRefProps,
 } from './embeded-line-view';
+
+export { PrefixElement } from './prefix-element';

packages/text-editor/react-components/src/prefix-element/dom.ts

@@ -0,0 +1,38 @@
+//  Copyright (c) 2025 coze-dev
+//  SPDX-License-Identifier: MIT
+
+/// Basic rectangle type.
+interface Rect {
+  readonly left: number;
+  readonly right: number;
+  readonly top: number;
+  readonly bottom: number;
+}
+
+let scratchRange: Range | null;
+
+function textRange(node: Text, from: number, to = from) {
+  const range = scratchRange || (scratchRange = document.createRange());
+  range.setEnd(node, to);
+  range.setStart(node, from);
+  return range;
+}
+
+function flattenRect(rect: Rect, left: boolean) {
+  const x = left ? rect.left : rect.right;
+  return { left: x, right: x, top: rect.top, bottom: rect.bottom };
+}
+
+function clientRectsFor(dom: Node) {
+  if (dom.nodeType == 3) {
+    return textRange(dom as Text, 0, dom.nodeValue!.length).getClientRects();
+  } else if (dom.nodeType == 1) {
+    return (dom as HTMLElement).getClientRects();
+  } else {
+    return [] as unknown as DOMRectList;
+  }
+}
+
+export { flattenRect, clientRectsFor };
+
+export type { Rect };

packages/text-editor/react-components/src/prefix-element/index.ts

@@ -0,0 +1 @@
+export { PrefixElement } from './react';

packages/text-editor/react-components/src/prefix-element/react.tsx

@@ -0,0 +1,111 @@
+import { createPortal } from 'react-dom';
+import { type ReactNode, useLayoutEffect } from 'react';
+
+import { useHTMLElement, useLatest } from '@coze-editor/react-hooks';
+import { useInjector } from '@coze-editor/react';
+import { Decoration, EditorView, keymap, WidgetType } from '@codemirror/view';
+
+import { clientRectsFor, flattenRect } from './dom';
+
+class PrefixElementWidget extends WidgetType {
+  constructor(
+    readonly content:
+      | string
+      | HTMLElement
+      | ((view: EditorView) => HTMLElement),
+  ) {
+    super();
+  }
+
+  toDOM(view: EditorView) {
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-prefix-element';
+    // solved the cursor height problem(eg. cursor double height with two lines)
+    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', `prefix ${this.content}`);
+    } else {
+      wrap.setAttribute('aria-hidden', 'true');
+    }
+    return wrap;
+  }
+
+  coordsAt(dom: HTMLElement) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    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;
+  }
+}
+
+interface PrefixElementProps {
+  deletable?: boolean;
+  onDelete?: () => void;
+  children?: ReactNode;
+}
+
+function PrefixElement({ deletable, onDelete, children }: PrefixElementProps) {
+  const element = useHTMLElement('span');
+  const latestElement = useLatest(element);
+  const latestDeletable = useLatest(deletable);
+  const latestOnDelete = useLatest(onDelete);
+  const injector = useInjector();
+
+  useLayoutEffect(() => {
+    function run(view: EditorView) {
+      if (
+        view.state.selection.main.empty &&
+        view.state.selection.main.head === 0 &&
+        latestDeletable.current === true &&
+        typeof latestOnDelete.current === 'function'
+      ) {
+        latestOnDelete.current();
+      }
+
+      return false;
+    }
+
+    return injector.inject([
+      EditorView.decorations.of(
+        Decoration.set([
+          Decoration.widget({
+            side: -100,
+            block: false,
+            widget: new PrefixElementWidget(() => latestElement.current),
+          }).range(0),
+        ]),
+      ),
+      keymap.of([
+        { key: 'Backspace', shift: run, run },
+        { key: 'Meta-Backspace', shift: run, run },
+      ]),
+    ]);
+  }, []);
+
+  return createPortal(children, element);
+}
+
+export { PrefixElement };