Merge pull request #1540 from merico-dev/1538-wrong-viz-config-when-s…

…witching-panels

1538 wrong viz config when switching panels

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.41.0",
+  "version": "13.41.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.41.0",
+  "version": "13.41.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/plugins/viz-components/stats/viz-stats.tsx

@@ -1,7 +1,6 @@
 import { Box, Flex, Sx } from '@mantine/core';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { defaults } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useStorageData } from '~/components/plugins/hooks';
 import { ReadonlyRichText } from '~/components/widgets';
@@ -10,7 +9,7 @@ import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interact
 import { VizViewProps } from '~/types/plugin';
 import { parseRichTextContent } from '~/utils';
 import { ClickStats } from './triggers';
-import { DEFAULT_CONFIG, IVizStatsConf } from './type';
+import { IVizStatsConf } from './type';
 
 const verticalAlignments = {
   top: 'flex-start',
@@ -31,7 +30,8 @@ function getWrapperSx(triggersCount: number) {
   return ret;
 }
 
-export const VizStats = observer(({ context, instance }: VizViewProps) => {
+type RenderProps = VizViewProps;
+export const Render = observer(({ context, instance }: RenderProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const interactionManager = useCurrentInteractionManager({
     vizManager: context.vizManager,
@@ -41,18 +41,20 @@ export const VizStats = observer(({ context, instance }: VizViewProps) => {
   const triggers = useTriggerSnapshotList<IVizStatsConf>(interactionManager.triggerManager, ClickStats.id);
 
   const contentModel = useRenderContentModelContext();
-  const { value: confValue = DEFAULT_CONFIG } = useStorageData<IVizStatsConf>(context.instanceData, 'config');
+
   const { panel } = useRenderPanelContext();
+  const conf = panel.viz.conf.config as IVizStatsConf;
+
   const { data, variables } = context;
   const { width, height } = context.viewport;
 
   const richTextContent = useMemo(() => {
-    const conf = defaults({}, confValue, DEFAULT_CONFIG);
+    const conf = panel.viz.conf.config;
     if (!conf.content) {
       return '';
     }
     return parseRichTextContent(conf.content, variables, contentModel.payloadForViz, data);
-  }, [data, confValue, variables, contentModel.payloadForViz]);
+  }, [data, panel, variables, contentModel.payloadForViz]);
 
   const handleContentClick = useCallback(() => {
     triggers.forEach((t) => {
@@ -83,7 +85,7 @@ export const VizStats = observer(({ context, instance }: VizViewProps) => {
         width,
         height,
       }}
-      align={verticalAlignments[confValue.vertical_align]}
+      align={verticalAlignments[conf.vertical_align]}
       direction="row"
     >
       <Box className="viz-stats--clickable-wrapper" sx={getWrapperSx(triggers.length)} onClick={handleContentClick}>
@@ -120,3 +122,14 @@ export const VizStats = observer(({ context, instance }: VizViewProps) => {
     </Flex>
   );
 });
+
+export const VizStats = (props: VizViewProps) => {
+  const { context } = props;
+  const { value: conf } = useStorageData<IVizStatsConf>(context.instanceData, 'config');
+
+  if (!conf) {
+    return null;
+  }
+
+  return <Render {...props} />;
+};

dashboard/src/components/widgets/rich-text-editor/custom-rich-text-editor.tsx

@@ -24,6 +24,7 @@ import { ColorMappingControl, ColorMappingMark } from './color-mapping-mark';
 import { ColorPickerControl } from './color-picker-control';
 import { DynamicColorControl, DynamicColorMark } from './dynamic-color-mark';
 import { ChooseFontSize, FontSize } from './font-size-extension';
+import { useBoolean } from 'ahooks';
 
 const RTEContentStyle: Sx = {
   'dynamic-color': {
@@ -110,6 +111,7 @@ export const CustomRichTextEditor = forwardRef(
       return ret;
     }, [inPanelContext]);
 
+    const [focused, { setTrue, setFalse }] = useBoolean(false);
     const [content, setContent] = useState(value);
     const editor = useEditor({
       extensions,
@@ -123,6 +125,8 @@ export const CustomRichTextEditor = forwardRef(
         editor.view.dom.setAttribute('autocomplete', 'off');
         editor.view.dom.setAttribute('autocapitalize', 'off');
       },
+      onFocus: setTrue,
+      onBlur: setFalse,
     });
 
     useEffect(() => {
@@ -142,11 +146,11 @@ export const CustomRichTextEditor = forwardRef(
     const changed = value !== content;
 
     useEffect(() => {
-      if (!autoSubmit) {
+      if (!autoSubmit || !focused) {
         return;
       }
       submit();
-    }, [autoSubmit, changed]);
+    }, [autoSubmit, changed, focused]);
 
     const finalStyles = useMemo(() => {
       return _.defaultsDeep({}, { content: { ...CommonHTMLContentStyle, ...RTEContentStyle } }, styles);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.41.0",
+  "version": "13.41.1",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.41.0",
+  "version": "13.41.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.41.0",
+  "version": "13.41.1",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"