@opensumi/ide-core-browser 2.25.4 → 2.26.0

package/src/components/layout/split-panel.tsx

@@ -79,6 +79,18 @@ export interface SplitPanelProps extends SplitChildProps {
 const getProp = (child: React.ReactNode, prop: string) =>
   child && child['props'] && (child['props'][prop] ?? child['props'][`data-sp-${prop}`]);
 
+function getElementSize(element: any, totalFlexNum: number) {
+  if (getProp(element, 'savedSize')) {
+    return getProp(element, 'savedSize') + 'px';
+  } else if (getProp(element, 'defaultSize') !== undefined) {
+    return getProp(element, 'defaultSize') + 'px';
+  } else if (getProp(element, 'flex')) {
+    return (getProp(element, 'flex') / totalFlexNum) * 100 + '%';
+  } else {
+    return (1 / totalFlexNum) * 100 + '%';
+  }
+}
+
 export const SplitPanel: React.FC<SplitPanelProps> = ({
   id,
   className,
@@ -95,12 +107,17 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
 }) => {
   const ResizeHandle = Layout.getResizeHandle(direction);
   // convert children to list
-  const childList = React.Children.toArray(children);
-  const totalFlexNum = childList.reduce(
-    (accumulator, item) => accumulator + (getProp(item, 'flex') !== undefined ? getProp(item, 'flex') : 1),
-    0,
+  const childList = React.useMemo(() => React.Children.toArray(children), [children]);
+
+  const totalFlexNum = React.useMemo(
+    () =>
+      childList.reduce(
+        (accumulator, item) => accumulator + (getProp(item, 'flex') !== undefined ? getProp(item, 'flex') : 1),
+        0,
+      ),
+    [childList],
   );
-  const elements: React.ReactNodeArray = [];
+
   const resizeDelegates = React.useRef<IResizeHandleDelegate[]>([]);
   const eventBus = useInjectable<IEventBus>(IEventBus);
   const rootRef = React.useRef<HTMLElement>();
@@ -115,178 +132,197 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
   splitPanelService.panels = [];
 
   // 获取setSize的handle，对于最右端或最底部的视图，取上一个位置的handle
-  const setSizeHandle = (index) => (size?: number, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      delegate.setAbsoluteSize(
-        size !== undefined ? size : getProp(childList[index], 'defaultSize'),
-        isLatter,
-        resizeKeep,
-      );
-    }
-  };
-
-  const setRelativeSizeHandle = (index) => (prev: number, next: number, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      delegate.setRelativeSize(prev, next);
-    }
-  };
-
-  const getSizeHandle = (index) => (isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      return delegate.getAbsoluteSize(isLatter);
-    }
-    return 0;
-  };
+  const setSizeHandle = React.useCallback(
+    (index) => (size?: number, isLatter?: boolean) => {
+      const targetIndex = isLatter ? index - 1 : index;
+      const delegate = resizeDelegates.current[targetIndex];
+      if (delegate) {
+        delegate.setAbsoluteSize(
+          size !== undefined ? size : getProp(childList[index], 'defaultSize'),
+          isLatter,
+          resizeKeep,
+        );
+      }
+    },
+    [resizeDelegates.current],
+  );
 
-  const getRelativeSizeHandle = (index) => (isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      return delegate.getRelativeSize();
-    }
-    return [0, 0];
-  };
+  const setRelativeSizeHandle = React.useCallback(
+    (index) => (prev: number, next: number, isLatter?: boolean) => {
+      const targetIndex = isLatter ? index - 1 : index;
+      const delegate = resizeDelegates.current[targetIndex];
+      if (delegate) {
+        delegate.setRelativeSize(prev, next);
+      }
+    },
+    [resizeDelegates.current],
+  );
 
-  const lockResizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const newResizeState = resizeLockState.current.map((state, idx) =>
-      idx === targetIndex ? (lock !== undefined ? lock : !state) : state,
-    );
-    resizeLockState.current = newResizeState;
-    setLocks(newResizeState);
-  };
+  const getSizeHandle = React.useCallback(
+    (index) => (isLatter?: boolean) => {
+      const targetIndex = isLatter ? index - 1 : index;
+      const delegate = resizeDelegates.current[targetIndex];
+      if (delegate) {
+        return delegate.getAbsoluteSize(isLatter);
+      }
+      return 0;
+    },
+    [resizeDelegates.current],
+  );
 
-  const setMaxSizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
-    const newMaxState = maxLockState.current.map((state, idx) =>
-      idx === index ? (lock !== undefined ? lock : !state) : state,
-    );
-    maxLockState.current = newMaxState;
-    setMaxLocks(newMaxState);
-  };
+  const getRelativeSizeHandle = React.useCallback(
+    (index) => (isLatter?: boolean) => {
+      const targetIndex = isLatter ? index - 1 : index;
+      const delegate = resizeDelegates.current[targetIndex];
+      if (delegate) {
+        return delegate.getRelativeSize();
+      }
+      return [0, 0];
+    },
+    [resizeDelegates.current],
+  );
 
-  const hidePanelHandle = (index: number) => (show?: boolean) => {
-    const newHideState = hideState.current.map((state, idx) =>
-      idx === index ? (show !== undefined ? !show : !state) : state,
-    );
-    hideState.current = newHideState;
-    const location = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
-    if (location) {
-      fireResizeEvent(location);
-    }
-    setHides(newHideState);
-  };
+  const lockResizeHandle = React.useCallback(
+    (index) => (lock: boolean | undefined, isLatter?: boolean) => {
+      const targetIndex = isLatter ? index - 1 : index;
+      const newResizeState = resizeLockState.current.map((state, idx) =>
+        idx === targetIndex ? (lock !== undefined ? lock : !state) : state,
+      );
+      resizeLockState.current = newResizeState;
+      setLocks(newResizeState);
+    },
+    [resizeDelegates.current],
+  );
 
-  const fireResizeEvent = (location?: string) => {
-    if (location) {
-      eventBus.fire(new ResizeEvent({ slotLocation: location }));
-    }
-  };
+  const setMaxSizeHandle = React.useCallback(
+    (index) => (lock: boolean | undefined, isLatter?: boolean) => {
+      const newMaxState = maxLockState.current.map((state, idx) =>
+        idx === index ? (lock !== undefined ? lock : !state) : state,
+      );
+      maxLockState.current = newMaxState;
+      setMaxLocks(newMaxState);
+    },
+    [resizeDelegates.current],
+  );
 
-  childList.forEach((element, index) => {
-    if (index !== 0) {
-      const targetElement = index === 1 ? childList[index - 1] : childList[index];
-      let flexMode: ResizeFlexMode | undefined;
-      if (getProp(element, 'flexGrow')) {
-        flexMode = ResizeFlexMode.Prev;
-      } else if (getProp(childList[index - 1], 'flexGrow')) {
-        flexMode = ResizeFlexMode.Next;
+  const hidePanelHandle = React.useCallback(
+    (index: number) => (show?: boolean) => {
+      const newHideState = hideState.current.map((state, idx) =>
+        idx === index ? (show !== undefined ? !show : !state) : state,
+      );
+      hideState.current = newHideState;
+      const location = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
+      if (location) {
+        fireResizeEvent(location);
       }
-      const noResize = getProp(targetElement, 'noResize') || locks[index - 1];
-      if (!noResize) {
-        elements.push(
-          <ResizeHandle
-            className={resizeHandleClassName}
-            onResize={(prev, next) => {
-              const prevLocation = getProp(childList[index - 1], 'slot') || getProp(childList[index - 1], 'id');
-              const nextLocation = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
-              fireResizeEvent(prevLocation!);
-              fireResizeEvent(nextLocation!);
-            }}
-            noColor={true}
-            findNextElement={
-              dynamicTarget
-                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction)
-                : undefined
-            }
-            findPrevElement={
-              dynamicTarget
-                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction, true)
-                : undefined
-            }
-            key={`split-handle-${index}`}
-            delegate={(delegate) => {
-              resizeDelegates.current.push(delegate);
-            }}
-            flexMode={flexMode}
-          />,
-        );
+      setHides(newHideState);
+    },
+    [childList, hideState.current],
+  );
+
+  const fireResizeEvent = React.useCallback(
+    (location?: string) => {
+      if (location) {
+        eventBus.fire(new ResizeEvent({ slotLocation: location }));
       }
-    }
+    },
+    [eventBus],
+  );
 
-    elements.push(
-      <PanelContext.Provider
-        key={index}
-        value={{
-          setSize: setSizeHandle(index),
-          getSize: getSizeHandle(index),
-          setRelativeSize: setRelativeSizeHandle(index),
-          getRelativeSize: getRelativeSizeHandle(index),
-          lockSize: lockResizeHandle(index),
-          setMaxSize: setMaxSizeHandle(index),
-          hidePanel: hidePanelHandle(index),
-        }}
-      >
-        <div
-          data-min-resize={getProp(element, 'minResize')}
-          data-max-resize={getProp(element, 'maxResize')}
-          ref={(ele) => {
-            if (ele && splitPanelService.panels.indexOf(ele) === -1) {
-              splitPanelService.panels.push(ele);
-            }
-          }}
-          id={getProp(element, 'id') /* @deprecated: query by data-view-id */}
-          style={{
-            // 手风琴场景，固定尺寸和 flex 尺寸混合布局；需要在 Resize Flex 模式下禁用
-            ...(getProp(element, 'flex') &&
-            !getProp(element, 'savedSize') &&
-            !childList.find((item) => getProp(item, 'flexGrow'))
-              ? { flex: getProp(element, 'flex') }
-              : { [Layout.getSizeProperty(direction)]: getElementSize(element) }),
-            // 相对尺寸带来的问题，必须限制最小最大尺寸
-            [Layout.getMinSizeProperty(direction)]: getProp(element, 'minSize')
-              ? getProp(element, 'minSize') + 'px'
-              : '-1px',
-            [Layout.getMaxSizeProperty(direction)]:
-              maxLocks[index] && getProp(element, 'maxSize') ? getProp(element, 'maxSize') + 'px' : 'unset',
-            // Resize Flex 模式下应用 flexGrow
-            ...(getProp(element, 'flexGrow') !== undefined ? { flexGrow: getProp(element, 'flexGrow') } : {}),
-            display: hides[index] ? 'none' : 'block',
-            backgroundColor: getProp(element, 'backgroundColor'),
-          }}
-        >
-          {element}
-        </div>
-      </PanelContext.Provider>,
-    );
-  });
+  const elements: React.ReactNodeArray = React.useMemo(
+    () =>
+      childList.map((element, index) => {
+        const result: JSX.Element[] = [];
 
-  function getElementSize(element: any) {
-    if (getProp(element, 'savedSize')) {
-      return getProp(element, 'savedSize') + 'px';
-    } else if (getProp(element, 'defaultSize') !== undefined) {
-      return getProp(element, 'defaultSize') + 'px';
-    } else if (getProp(element, 'flex')) {
-      return (getProp(element, 'flex') / totalFlexNum) * 100 + '%';
-    } else {
-      return (1 / totalFlexNum) * 100 + '%';
-    }
-  }
+        if (index !== 0) {
+          const targetElement = index === 1 ? childList[index - 1] : childList[index];
+          let flexMode: ResizeFlexMode | undefined;
+          if (getProp(element, 'flexGrow')) {
+            flexMode = ResizeFlexMode.Prev;
+          } else if (getProp(childList[index - 1], 'flexGrow')) {
+            flexMode = ResizeFlexMode.Next;
+          }
+          const noResize = getProp(targetElement, 'noResize') || locks[index - 1];
+          if (!noResize) {
+            result.push(
+              <ResizeHandle
+                className={resizeHandleClassName}
+                onResize={(prev, next) => {
+                  const prevLocation = getProp(childList[index - 1], 'slot') || getProp(childList[index - 1], 'id');
+                  const nextLocation = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
+                  fireResizeEvent(prevLocation!);
+                  fireResizeEvent(nextLocation!);
+                }}
+                noColor={true}
+                findNextElement={
+                  dynamicTarget
+                    ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction)
+                    : undefined
+                }
+                findPrevElement={
+                  dynamicTarget
+                    ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction, true)
+                    : undefined
+                }
+                key={`split-handle-${index}`}
+                delegate={(delegate) => {
+                  resizeDelegates.current.push(delegate);
+                }}
+                flexMode={flexMode}
+              />,
+            );
+          }
+        }
+
+        result.push(
+          <PanelContext.Provider
+            key={index}
+            value={{
+              setSize: setSizeHandle(index),
+              getSize: getSizeHandle(index),
+              setRelativeSize: setRelativeSizeHandle(index),
+              getRelativeSize: getRelativeSizeHandle(index),
+              lockSize: lockResizeHandle(index),
+              setMaxSize: setMaxSizeHandle(index),
+              hidePanel: hidePanelHandle(index),
+            }}
+          >
+            <div
+              data-min-resize={getProp(element, 'minResize')}
+              data-max-resize={getProp(element, 'maxResize')}
+              ref={(ele) => {
+                if (ele && splitPanelService.panels.indexOf(ele) === -1) {
+                  splitPanelService.panels.push(ele);
+                }
+              }}
+              id={getProp(element, 'id') /* @deprecated: query by data-view-id */}
+              style={{
+                // 手风琴场景，固定尺寸和 flex 尺寸混合布局；需要在 Resize Flex 模式下禁用
+                ...(getProp(element, 'flex') &&
+                !getProp(element, 'savedSize') &&
+                !childList.find((item) => getProp(item, 'flexGrow'))
+                  ? { flex: getProp(element, 'flex') }
+                  : { [Layout.getSizeProperty(direction)]: getElementSize(element, totalFlexNum) }),
+                // 相对尺寸带来的问题，必须限制最小最大尺寸
+                [Layout.getMinSizeProperty(direction)]: getProp(element, 'minSize')
+                  ? getProp(element, 'minSize') + 'px'
+                  : '-1px',
+                [Layout.getMaxSizeProperty(direction)]:
+                  maxLocks[index] && getProp(element, 'maxSize') ? getProp(element, 'maxSize') + 'px' : 'unset',
+                // Resize Flex 模式下应用 flexGrow
+                ...(getProp(element, 'flexGrow') !== undefined ? { flexGrow: getProp(element, 'flexGrow') } : {}),
+                display: hides[index] ? 'none' : 'block',
+                backgroundColor: getProp(element, 'backgroundColor'),
+              }}
+            >
+              {element}
+            </div>
+          </PanelContext.Provider>,
+        );
+        return result;
+      }),
+    [children, childList, resizeHandleClassName, dynamicTarget, resizeDelegates.current, hides],
+  );
 
   React.useEffect(() => {
     if (rootRef.current) {
@@ -311,7 +347,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
       className={clsx(styles['split-panel'], className)}
       style={{ flexDirection: Layout.getFlexDirection(direction), ...style }}
     >
-      {elements}
+      {elements.filter(Boolean)}
     </div>
   );
 };

package/src/components/resize/resize.module.less

@@ -1,10 +1,14 @@
+.resize-handle-horizontal,
+.resize-handle-vertical {
+  z-index: 12;
+}
+
 .resize-handle-horizontal {
   cursor: col-resize;
   position: relative;
   height: 100%;
   margin-right: -2px;
   margin-left: -2px;
-  z-index: 4;
   width: 4px;
   transition: background-color 0.1s ease-out;
   background: transparent;
@@ -31,7 +35,6 @@
   margin-top: -2px;
   margin-bottom: -2px;
   height: 4px;
-  z-index: 4;
   transition: background-color 0.1s ease-out;
   background: transparent;
   &:hover {

package/src/core-preferences.ts

@@ -159,6 +159,11 @@ export const corePreferenceSchema: PreferenceSchema = {
       default: true,
       description: '%preference.debug.breakpoint.editorHint%',
     },
+    'debug.breakpoint.showBreakpointsInOverviewRuler': {
+      type: 'boolean',
+      default: false,
+      description: '%preference.debug.breakpoint.showBreakpointsInOverviewRuler%',
+    },
     'debug.toolbar.top': {
       type: 'number',
       default: 0,
@@ -305,6 +310,7 @@ export interface CoreConfiguration {
   'explorer.compactFolders': boolean;
   'debug.toolbar.float': boolean;
   'debug.breakpoint.editorHint': boolean;
+  'debug.breakpoint.showBreakpointsInOverviewRuler': boolean;
   'debug.toolbar.top': number;
   'debug.toolbar.height': number;
   'files.watcherExclude': { [key: string]: boolean };

package/src/layout/layout.interface.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 
 import { MaybeNull, BasicEvent } from '@opensumi/ide-core-common';
 
+import { Layout } from '../components/layout/index';
 import type { IMenu, IContextMenu } from '../menu/next';
 import type { SlotLocation } from '../react-providers';
 
@@ -75,6 +76,7 @@ export interface ExtViewContainerOptions {
   fromExtension?: boolean;
   // viewContainer 最小高度，默认 120
   miniSize?: number;
+  alignment?: Layout.alignment;
 }
 export const ComponentRegistry = Symbol('ComponentRegistry');
 

package/src/markdown/index.tsx

@@ -22,7 +22,6 @@ export const toMarkdownHtml = (message: string): string => {
     gfm: true,
     breaks: false,
     pedantic: false,
-    sanitize: true,
     smartLists: true,
     smartypants: false,
     renderer,

package/src/menu/next/menu-id.ts

@@ -84,6 +84,8 @@ export enum MenuId {
   // setting.json
   SettingJSONGlyphMarginContext = 'settingJson/glyphMargin/context',
   SubSettingJSONGlyphMarginContext = 'sub/settingJson/glyphMargin/context',
+  // merge editor context
+  MergeEditorResultTitleContext = 'mergeEditor/result/title/context',
 }
 
 export function getTabbarCommonMenuId(location: string) {

package/src/preferences/settings.ts

@@ -49,6 +49,10 @@ export interface IPreferenceViewDesc {
 }
 
 export interface ISettingSection {
+  /**
+   * 插件 ID
+   */
+  extensionId?: string;
   /**
    * 该 Section 的名字
    */

package/src/react-providers/config-provider.tsx

@@ -160,7 +160,7 @@ export interface AppConfig {
   /**
    * @ClientOption
    * 额外的 ConfigProvider
-   * 可以让 IDE-framework 内部的 ReactDOM.render 调用时
+   * 可以让 OpenSumi 内部的 ReactDOM.render 调用时
    * 都被其包裹一层，以达到额外的 context 传递效果
    */
   extraContextProvider?: React.ComponentType<React.PropsWithChildren<any>>;
@@ -216,7 +216,7 @@ export interface AppConfig {
    * 视图组件内默认的组件样式资源 CDN 来源
    * 默认值为 'alipay'
    */
-  componentCDNType?: 'unpkg' | 'jsdelivr' | 'alipay';
+  componentCDNType?: TComponentCDNType;
   /**
    * 指定前端是否为 Electron 环境 (Electron Renderer)
    * 为兼容老的逻辑，若不兼容则 fallback 到 isElectronRenderer 的判断
@@ -277,3 +277,5 @@ export function ConfigProvider(props: React.PropsWithChildren<{ value: AppConfig
 
   return React.createElement(extraContextProvider, { children: app });
 }
+
+export type TComponentCDNType = 'unpkg' | 'jsdelivr' | 'alipay' | 'npmmirror';

package/src/style/entry.less

@@ -5,7 +5,7 @@
  * 请不要在这个文件直接添加样式内容
  */
 
-@import '~@opensumi/ide-components/lib/style/base.less';
+@import '@opensumi/ide-components/lib/style/base.less';
 @import './variable.less';
 
 @import './icon/index.less';

package/src/style/icon.less

@@ -1,7 +1,7 @@
-// 本地IDE集成时引入该文件: @opensumi/ide-core-browser/lib/style/icon.less
-@import '~@opensumi/ide-components/lib/icon/iconfont/iconfont.css';
+// 本地 IDE 集成时需引入该文件: @opensumi/ide-core-browser/lib/style/icon.less
+@import '@opensumi/ide-components/lib/icon/iconfont/iconfont.css';
 @import './octicons/octicons.css';
-@import '~@vscode/codicons/dist/codicon.css';
+@import '@vscode/codicons/dist/codicon.css';
 
 .kaitian-icon {
   font-size: 14px;

package/src/style/override.less

@@ -1,4 +1,4 @@
-@import '~@opensumi/ide-components/lib/style/mixins.less';
+@import '@opensumi/ide-components/lib/style/mixins.less';
 @import './variable.less';
 
 .codicon[class*='codicon-'] {

package/src/style/toolbar.less

@@ -1,4 +1,4 @@
-@import '~@opensumi/ide-components/lib/style/mixins.less';
+@import '@opensumi/ide-components/lib/style/mixins.less';
 
 .kt-toolbar-location {
   position: relative;