Merge pull request lowcoder-org#569 from raheeliftikhar5/editor-fixes

Editor fixes

Author: FalkWolsky

client/packages/lowcoder-design/src/components/option.tsx

@@ -153,8 +153,9 @@ const OptionItem = (props: {
  popoverTitle?: string;
  draggable?: boolean;
  optionExtra?: React.ReactNode;
+ scrollable?: boolean;
 }) => {
- const { content, config, title, popoverTitle, draggable = true, optionExtra } = props;
+ const { content, config, title, popoverTitle, draggable = true, optionExtra, scrollable } = props;
  const [visible, setVisible] = useState(false);
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
  id: config.dataIndex,
@@ -182,6 +183,7 @@ const OptionItem = (props: {
  setVisible={(vis) => {
  setVisible(vis);
  }}
+ scrollable={scrollable}
  >
  {optionRow}
  </SimplePopover>
@@ -204,6 +206,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
  optionToolbar?: React.ReactNode;
  headerItem?: React.ReactNode;
  itemExtra?: (comp: T) => React.ReactNode;
+ scrollable?: boolean;
 }) {
  const { items, uniqVal, headerItem, optionToolbar, itemExtra } = props;
  const itemsDistinctValCount = uniqVal
@@ -286,6 +289,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
  title={props.itemTitle(item)}
  config={{ dataIndex: dataIndex }}
  optionExtra={optionExtra}
+ scrollable={props.scrollable}
  />
  );
  })}

client/packages/lowcoder-design/src/components/popover.tsx

@@ -51,13 +51,15 @@ const SimplePopover = (props: {
  setVisible?: (vis: boolean) => void;
  children: JSX.Element | React.ReactNode;
  content: JSX.Element | React.ReactNode;
+ scrollable?: boolean;
 }) => {
  const { visible, setVisible } = props;
  const contentWithBox = (
  <SuspensionBox
  title={props.title}
  onClose={() => setVisible?.(false)}
  content={props.content}
+ scrollable={props.scrollable}
  />
  );
  return (
@@ -66,7 +68,7 @@ const SimplePopover = (props: {
  align={{
  offset: [-12, 0, 0, 0],
  }}
- destroyTooltipOnHide
+ // destroyTooltipOnHide
  content={contentWithBox}
  trigger="click"
  open={visible}

client/packages/lowcoder/src/app.tsx

@@ -159,7 +159,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
  )}
  </Switch>
  </Router>
- <CodeEditorTooltipContainer />
  </Wrapper>
  );
  }

client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx

@@ -227,6 +227,7 @@ function useCodeMirror(
  ...props,
  showLineNum,
  onChange: handleChange,
+ tooltipContainer: container.current,
  });
  useEffect(() => reconfigure(viewRef.current), [reconfigure]);
  useEffect(() => {
@@ -385,24 +386,26 @@ export function CodeEditor(props: CodeEditorProps) {
  const { expandable = true, ...editorProps } = props;
  const [disabled, setDisabled] = useState(false);
  return (
- <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
- <Container
- styleName={props.styleName}
- bordered={props.bordered}
- disabled={disabled}
- error={props.hasError}
- ref={editor as MutableRefObject<HTMLDivElement>}
- enableClickCompName={props.enableClickCompName}
- >
- {expandable && (
- <CodeEditorPanel
- breadcrumb={[props.label ?? ""]}
- editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
- onVisibleChange={(visible) => setDisabled(visible)}
- />
- )}
- </Container>
- </CodeEditorCommon>
+ <CodeEditorTooltipContainer>
+ <CodeEditorCommon {...editorProps} editor={editor} disabled={disabled}>
+ <Container
+ styleName={props.styleName}
+ bordered={props.bordered}
+ disabled={disabled}
+ error={props.hasError}
+ ref={editor as MutableRefObject<HTMLDivElement>}
+ enableClickCompName={props.enableClickCompName}
+ >
+ {expandable && (
+ <CodeEditorPanel
+ breadcrumb={[props.label ?? ""]}
+ editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
+ onVisibleChange={(visible) => setDisabled(visible)}
+ />
+ )}
+ </Container>
+ </CodeEditorCommon>
+ </CodeEditorTooltipContainer>
  );
 }
 

client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -390,6 +390,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
  comp.children.columns.dispatch(action);
  }}
  dataIndex={(column) => column.getView().dataIndex}
+ scrollable={true}
  />
  </>
  );

client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx

@@ -129,6 +129,7 @@ export const CodeEditorPanel = (props: {
  maskClosable={true}
  onPopupVisibleChange={(visible) => setVisible(visible)}
  afterPopupVisibleChange={(visible) => props.onVisibleChange(visible)}
+ getPopupContainer={(node: any) => node.parentNode.parentNode}
  popup={() => (
  <Draggable
  positionOffset={{ x: "-50%", y: "-50%" }}