feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/common/md-editor-adapter/src/editor.tsx

@@ -0,0 +1,120 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  useRef,
+  useImperativeHandle,
+  forwardRef,
+  useState,
+  useEffect,
+} from 'react';
+
+import { TextArea, withField } from '@coze-arch/coze-design';
+
+import {
+  type EditorInputProps,
+  type EditorHandle,
+  type Editor,
+  type Delta,
+} from './types';
+
+export const EditorFullInputInner = forwardRef<EditorHandle, EditorInputProps>(
+  (props: EditorInputProps, ref) => {
+    const {
+      value: propsValue,
+      onChange: propsOnChange,
+      getEditor,
+      ...restProps
+    } = props;
+    const [value, setValue] = useState(propsValue);
+
+    // 创建一个可变引用以存储最新的value值
+    const valueRef = useRef(value);
+
+    // 当value更新时，同步更新valueRef
+    useEffect(() => {
+      valueRef.current = value;
+    }, [value]);
+
+    const editorRef = useRef<Editor>({
+      setHTML: (htmlContent: string) => {
+        setValue(htmlContent);
+      },
+      setText: (text: string) => {
+        setValue(text);
+      },
+      setContent: (content: { deltas: Delta[] }) => {
+        setValue(content.deltas[0].insert);
+      },
+      getContent: () => ({
+        deltas: [{ insert: valueRef.current ?? '' }],
+      }),
+      getText: () => valueRef.current || '',
+      getRootContainer: () => null,
+      getContentState: () => ({
+        getZoneState: (zone: any) => null,
+      }),
+      selection: {
+        getSelection: () => ({
+          start: 0,
+          end: 0,
+          zoneId: '0',
+        }),
+      },
+      registerCommand: () => null,
+      scrollModule: {
+        scrollTo: () => null,
+      },
+      on: () => null,
+    });
+
+    useImperativeHandle(ref, () => ({
+      setDeltaContent(delta) {
+        editorRef.current && delta && editorRef.current.setContent(delta);
+      },
+      getEditor() {
+        return editorRef.current;
+      },
+      getMarkdown() {
+        return editorRef.current?.getText() || '';
+      },
+    }));
+
+    useEffect(() => {
+      getEditor?.(editorRef.current);
+    }, [getEditor]);
+
+    return (
+      <TextArea
+        {...restProps}
+        value={value}
+        onChange={v => {
+          setValue(v);
+          propsOnChange?.(v);
+        }}
+      />
+    );
+  },
+);
+
+export const EditorInput: typeof EditorFullInputInner = withField(
+  EditorFullInputInner,
+  {
+    valueKey: 'value',
+    onKeyChangeFnName: 'onChange',
+  },
+);

frontend/packages/common/md-editor-adapter/src/index.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react';
+import { lazy } from 'react';
+
+import { type EditorInputProps } from './types';
+export {
+  DEFAULT_ZONE,
+  displayType,
+  type EditorInputProps,
+  type EditorHandle,
+  type Delta,
+  type Editor,
+  type IRenderContext,
+  ToolbarItemEnum,
+  ZoneDelta,
+  IApplyMetadata,
+  DeltaSet,
+  DeltaSetOptions,
+  EditorEventType,
+} from './types';
+
+export const Text: React.FC<any> = () => null;
+
+export const ToolbarButton: React.FC<any> = () => null;
+
+export class Plugin {}
+
+export {
+  md2html,
+  checkAndGetMarkdown,
+  delta2md,
+  normalizeSchema,
+} from './utils';
+
+const LazyEditorFullInput: React.FC<EditorInputProps> = lazy(() =>
+  import('./editor').then(module => ({
+    default: module.EditorInput,
+  })),
+);
+
+const LazyEditorFullInputInner: React.FC<EditorInputProps> = lazy(() =>
+  import('./editor').then(module => ({
+    default: module.EditorFullInputInner,
+  })),
+);
+
+export { LazyEditorFullInput, LazyEditorFullInputInner };

frontend/packages/common/md-editor-adapter/src/types.ts

@@ -0,0 +1,216 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type CSSProperties } from 'react';
+
+import { type CommonFieldProps } from '@coze-arch/coze-design';
+
+export interface Delta {
+  insert: string;
+}
+export interface Editor {
+  setHTML: (htmlContent: string) => void;
+  setContent: (content: { deltas: Delta[] }) => void;
+  getContent: () => {
+    deltas: Delta[];
+  };
+  setText: (text: string) => void;
+  getText: () => string;
+  getRootContainer: () => HTMLDivElement | null;
+  getContentState: () => any;
+  selection: any;
+  registerCommand: (command: string, callback: () => void) => void;
+  scrollModule: {
+    scrollTo: (props: any) => void;
+  };
+  on: (event: string, callback: (...args: any[]) => void) => void;
+}
+export interface EditorHandle {
+  setDeltaContent: (delta?: any) => void;
+  getMarkdown: () => string;
+  getEditor: () => Editor;
+}
+export interface EditorInputProps extends CommonFieldProps {
+  value?: string;
+  className?: string;
+  style?: CSSProperties;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  validateStatus?: 'error' | 'default';
+  /**
+   * 注册自定义插件
+   * @param plugins
+   */
+  registerPlugins?: any;
+  /**
+   * 自定义toolbar
+   */
+  registerToolItem?: any;
+  /** 自定义schema */
+  schema?: any;
+  businessKey?: string; // 用于注册toolbar
+  getMentionData?: (query?: string) => Promise<any[]>;
+  maxCount?: number; // 字符数显示，默认为-1（不限制）
+  disabled?: boolean; // 禁用
+  noToolbar?: boolean; // 隐藏工具栏
+  noExpand?: boolean; // 右下角展开icon
+  onExpand?: () => void; // 点击展开icon
+  /**
+   * 开启 plainText 模式后，输入内容与原生 textarea 不会有区别，会取消 markdown 支持，并隐藏 toolbar（会覆盖 noToolbar 属性）
+   * @default false
+   */
+  plainText?: boolean;
+  withInputTitle?: {
+    placeholder: string;
+    maxCount?: number;
+    onChange: (value: string) => void;
+  }; // 带标题编辑器（类似飞书，标题和正文在一起）
+
+  getUploadToken?: () => Promise<any>; // 自定义获取上传图片的token
+
+  getImgURL?: (req?: any) => Promise<any>; // 自定义根据图片uri获取图片url
+  getEditor?: (editor: Editor) => void;
+}
+
+export interface IRenderContext {
+  insert: string;
+  domAttributes: {
+    [key: string]: any;
+  };
+  key: string;
+  children: JSX.Element;
+  style: React.CSSProperties;
+  index: number;
+  zoneId: string;
+}
+
+export interface IApplyMetadata {
+  id: string;
+  type: string;
+  options: any;
+}
+
+export enum displayType {
+  inline = 'inline',
+  block = 'block',
+}
+
+export enum ToolbarItemEnum {
+  Bold = 'Bold',
+  Italic = 'Italic',
+  Underline = 'Underline',
+  Undo = 'Undo',
+  Redo = 'Redo',
+  Strikethrough = 'Strikethrough',
+  Blockquote = 'Blockquote',
+  UnorderedList = 'UnorderedList',
+  OrderedList = 'OrderedList',
+  Checkbox = 'Checkbox',
+  Indent = 'Indent',
+  H1 = 'H1',
+  H2 = 'H2',
+  H3 = 'H3',
+  AlignCenter = 'AlignCenter',
+  AlignLeft = 'AlignLeft',
+  AlignRight = 'AlignRight',
+  HorizontalLine = 'HorizontalLine',
+  Hyperlink = 'Hyperlink',
+  Image = 'Image',
+  Table = 'Table',
+  CodeBlock = 'CodeBlock',
+  Video = 'Video',
+  DIVIDER = 'DIVIDER',
+  ColorPicker = 'ColorPicker',
+  FontSizeDropdown = 'FontSizeDropdown',
+  AlignDropdown = 'AlignDropdown',
+  HeadingDropdown = 'HeadingDropdown',
+  FontFamilyDropdown = 'FontFamilyDropdown',
+}
+
+export const DEFAULT_ZONE = '0';
+
+export const ZoneDelta: any = {};
+
+export interface MentionType {
+  avatar_url: string;
+  cn_name: string;
+  en_name: string;
+  type: string;
+  id: string;
+}
+
+export interface Delta2mdResult {
+  markdown: string;
+  images?: string[];
+  links?: string[];
+  mentions?: MentionType[];
+  codeblocks: string[];
+}
+
+export class DeltaSet {
+  constructor(public deltas: Delta[]) {
+    this.deltas = deltas;
+  }
+}
+
+export type DeltaSetOptions =
+  | Delta[]
+  | {
+      [zoneId: string]: {
+        zoneId: string;
+        ops: any;
+        zoneType: any;
+      };
+    };
+export enum EditorEventType {
+  DID_PASTE = 'didPaste',
+  RESIZE = 'resize',
+  RECT_CHANGE = 'rectchange',
+  SELECTION_CHANGE = 'selectionchange',
+  SELECTION_CHANGE_AND_DOM_UPDATE = 'editorUpdateDomSelection',
+  CONTENT_WILL_CHANGE = 'contentWillChange',
+  CONTENT_CHANGE = 'contentchange',
+  EDITABLE_CHANGE = 'editablechange',
+  PAINT = 'paint',
+  COPY = 'copy',
+  CUT = 'cut',
+  PASTE = 'paste',
+  WILL_DELETE_FROM_CUT = 'willDeleteFromCut',
+  INPUT = 'input',
+  BEFORE_INPUT = 'beforeinput',
+  KEYDOWN = 'keydown',
+  KEYPRESS = 'keypress',
+  KEYUP = 'keyup',
+  EXEC_COMMAND = 'execCommand',
+  ERROR = 'error',
+  DELETE_KEY = 'keyDelete',
+  FOCUS = 'focus',
+  BLUR = 'blur',
+  SCROLL_END = 'scrollend',
+  SCROLL = 'scroll',
+  KEYBAORDCHANGE = 'keyboardchange',
+  COMPOSITION_END = 'compositionend',
+  COMPOSITION_START = 'compositionstart',
+  COMPOSITION_UPDATE = 'compositionupdate',
+  REACT_CONTEXT_UPDATE = 'reactContextUpdate',
+  BEFORE_DOM_RENDERER_RECONCILE = 'beforeDomRendererReconcile',
+  AFTER_DOM_RENDERER_RECONCILE = 'afterDomRendererReconcile',
+  UNDO_DID_INIT = 'undoDidInit',
+}

frontend/packages/common/md-editor-adapter/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />

frontend/packages/common/md-editor-adapter/src/utils.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type Delta, type Editor } from './types';
+
+/**
+ * 空实现，用于开闭源统一
+ * @param md
+ * @returns
+ */
+export const md2html = (md: string) => md;
+
+export const delta2md = (
+  delta: Delta,
+  zoneDelta: unknown,
+  ignoreAttr = false,
+) => ({
+  markdown: delta.insert,
+  images: [],
+  links: [],
+  mentions: [],
+  codeblocks: [],
+});
+
+export const checkAndGetMarkdown = ({
+  editor,
+}: {
+  editor: Editor;
+  validate: boolean;
+  onImageUploadProgress?: any;
+}) => ({
+  content: editor.getText(),
+  images: [],
+  links: [],
+});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const normalizeSchema = (input: any): any => ({
+  '0': {
+    zoneType: input[0]?.zoneType,
+    zoneId: input[0]?.zoneId,
+    ops: input[0]?.ops,
+  },
+});