Merge/feat/widget

apps/builder/package.json

@@ -19,6 +19,8 @@
  "ts-check": "tsc --noEmit"
  },
  "dependencies": {
+ "@chatscope/chat-ui-kit-react": "^1.10.1",
+ "@chatscope/chat-ui-kit-styles": "^1.4.0",
  "@codemirror/autocomplete": "^6.4.0",
  "@codemirror/commands": "^6.1.3",
  "@codemirror/lang-html": "^6.4.0",
@@ -31,6 +33,15 @@
  "@codemirror/search": "^6.2.3",
  "@codemirror/state": "^6.2.0",
  "@codemirror/view": "^6.7.2",
+ "@editorjs/checklist": "^1.5.0",
+ "@editorjs/code": "^2.8.0",
+ "@editorjs/editorjs": "^2.27.2",
+ "@editorjs/embed": "^2.5.3",
+ "@editorjs/header": "^2.7.0",
+ "@editorjs/image": "^2.8.1",
+ "@editorjs/inline-code": "^1.4.0",
+ "@editorjs/list": "^1.8.0",
+ "@editorjs/marker": "^1.3.0",
  "@emotion/cache": "^11.10.5",
  "@fingerprintjs/fingerprintjs": "^3.4.0",
  "@illa-design/react": "workspace:*",
@@ -56,6 +67,8 @@
  "dayjs": "^1.11.7",
  "deep-diff": "^1.0.2",
  "downloadjs": "^1.4.7",
+ "editorjs-html": "^3.4.3",
+ "editorjs-md-parser": "^0.0.3",
  "events": "^3.3.0",
  "fnv-plus": "^1.3.1",
  "framer-motion": "^7.6.12",
@@ -91,6 +104,7 @@
  "react-slick": "^0.29.0",
  "react-use": "^17.4.0",
  "react-use-measure": "^2.1.1",
+ "react-virtuoso": "^4.3.11",
  "redux-logger": "^3.0.6",
  "rehype-raw": "^6.1.1",
  "rehype-sanitize": "^5.0.1",

apps/builder/src/page/App/components/PanelSetters/ChartSetter/chartDatasetsSetter/listItem.tsx

@@ -1,10 +1,12 @@
 import { FC, useCallback, useContext, useState } from "react"
+import { useTranslation } from "react-i18next"
 import {
  EyeOffIcon,
  EyeOnIcon,
  Trigger,
  globalColor,
  illaPrefix,
+ useModal,
 } from "@illa-design/react"
 import { ReactComponent as DeleteIcon } from "@/assets/delete-dataset-icon.svg"
 import { DatasetsContext } from "@/page/App/components/PanelSetters/ChartSetter/chartDatasetsSetter/datasetsContext"
@@ -123,6 +125,8 @@ export const ColorArea: FC<ColorAreaProps> = ({ color }) => {
 export const ListItem: FC<ListItemProps> = (props) => {
  const { color, isHidden, datasetName, datasetMethod, index } = props
  const [modalVisible, setModalVisible] = useState(false)
+ const modal = useModal()
+ const { t } = useTranslation()
 
  const handleCloseModal = useCallback(() => {
  setModalVisible(false)
@@ -135,6 +139,25 @@ export const ListItem: FC<ListItemProps> = (props) => {
  handleHiddenDataset,
  handleDeleteDataSet,
  } = useContext(DatasetsContext)
+
+ const handleDeleteClick = useCallback(() => {
+ modal.show({
+ id: "deleteDatasetItem",
+ title: t("editor.component.delete_title", {
+ displayName: datasetName,
+ }),
+ children: t("editor.component.delete_content"),
+ cancelText: t("editor.component.cancel"),
+ okText: t("editor.component.delete"),
+ okButtonProps: {
+ colorScheme: "red",
+ },
+ onOk: () => {
+ handleDeleteDataSet(index)
+ },
+ })
+ }, [datasetName, handleDeleteDataSet, index, modal, t])
+
  return (
  <Trigger
  withoutPadding
@@ -190,7 +213,7 @@ export const ListItem: FC<ListItemProps> = (props) => {
  css={baseIconStyle}
  onClick={(e) => {
  e.stopPropagation()
- handleDeleteDataSet(index)
+ handleDeleteClick()
  }}
  />
  </div>

apps/builder/src/page/App/components/PanelSetters/OptionListSetter/actionMenu.tsx

@@ -1,15 +1,34 @@
-import { FC, useContext } from "react"
+import { FC, useCallback, useContext } from "react"
 import { useTranslation } from "react-i18next"
-import { DropList, DropListItem } from "@illa-design/react"
+import { DropList, DropListItem, useModal } from "@illa-design/react"
 import { OptionListSetterContext } from "@/page/App/components/PanelSetters/OptionListSetter/context/optionListContext"
 import { ActionMenuProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface"
 
 export const ActionMenu: FC<ActionMenuProps> = (props) => {
- const { index, handleCloseMode } = props
+ const { index, label, handleCloseMode } = props
  const { handleCopyOptionItem, handleDeleteOptionItem } = useContext(
  OptionListSetterContext,
  )
  const { t } = useTranslation()
+ const modal = useModal()
+ const handleDeleteClick = useCallback(() => {
+ modal.show({
+ id: "deleteOptionItem",
+ title: t("editor.component.delete_title", {
+ displayName: label,
+ }),
+ children: t("editor.component.delete_content"),
+ cancelText: t("editor.component.cancel"),
+ okText: t("editor.component.delete"),
+ okButtonProps: {
+ colorScheme: "red",
+ },
+ onOk: () => {
+ handleDeleteOptionItem(index)
+ handleCloseMode()
+ },
+ })
+ }, [handleCloseMode, handleDeleteOptionItem, index, label, modal, t])
 
  return (
  <DropList w="184px">
@@ -29,10 +48,7 @@ export const ActionMenu: FC<ActionMenuProps> = (props) => {
  "editor.inspect.setter_content.option_list.action_menu.delete",
  )}
  deleted
- onClick={() => {
- handleDeleteOptionItem(index)
- handleCloseMode()
- }}
+ onClick={handleDeleteClick}
  />
  </DropList>
  )

apps/builder/src/page/App/components/PanelSetters/OptionListSetter/interface.ts

@@ -25,6 +25,7 @@ export interface DragIconAndLabelProps {
 
 export interface MoreProps {
  index: number
+ label?: string
 }
 
 export interface OptionListSetterProps extends BaseSetter {
@@ -43,6 +44,7 @@ export interface DragItem {
 
 export interface ActionMenuProps {
  index: number
+ label?: string
  handleCloseMode: () => void
 }
 

apps/builder/src/page/App/components/PanelSetters/OptionListSetter/listItem.tsx

@@ -11,7 +11,7 @@ export const ListItem: FC<ListItemProps> = (props) => {
  <div {...otherProps}>
  <div css={optionListItemStyle}>
  <DragIconAndLabel index={index} label={label} />
- <More index={index} />
+ <More index={index} label={label} />
  </div>
  </div>
  )

apps/builder/src/page/App/components/PanelSetters/OptionListSetter/more.tsx

@@ -4,7 +4,7 @@ import { ActionMenu } from "@/page/App/components/PanelSetters/OptionListSetter/
 import { MoreProps } from "@/page/App/components/PanelSetters/OptionListSetter/interface"
 
 export const More: FC<MoreProps> = (props) => {
- const { index } = props
+ const { index, label } = props
 
  const [actionMenuVisible, setActionMenuVisible] = useState(false)
  const handleCloseActionMenu = useCallback(() => {
@@ -14,7 +14,11 @@ export const More: FC<MoreProps> = (props) => {
  <Dropdown
  popupVisible={actionMenuVisible}
  dropList={
- <ActionMenu index={index} handleCloseMode={handleCloseActionMenu} />
+ <ActionMenu
+ label={label}
+ index={index}
+ handleCloseMode={handleCloseActionMenu}
+ />
  }
  trigger="click"
  position="bottom-end"

apps/builder/src/page/App/components/ScaleSquare/constant/widget.ts

@@ -4,3 +4,5 @@ export const CONTAINER_PADDING = 4
 export const DEFAULT_MIN_COLUMN = 1
 export const LIKE_CONTAINER_WIDGET_PADDING = 4
 export const LIST_ITEM_MARGIN_TOP = 8
+export const LABEL_TOP_UNIT_HEIGHT = 32
+export const VALIDATE_MESSAGE_HEIGHT = 33

apps/builder/src/types/richText.d.ts

@@ -0,0 +1,28 @@
+declare module "@editorjs/*" {
+ export default class editorPlugin {
+ constructor(config)
+ render()
+ normalizeData(data)
+ setLevel(level): void
+ merge(data): void
+ validate(blockData): boolean
+ save(toolsContent)
+ static get conversionConfig(): { export: string; import: string }
+ static get sanitize()
+ static get isReadOnlySupported(): boolean
+ get data()
+ set data(data)
+ getTag(): HTMLElement
+ get currentLevel()
+ get defaultLevel()
+ get levels()
+ static get toolbox(): {
+ icon: string
+ title: string
+ }
+ }
+}
+
+declare module "editorjs-md-parser" {
+ export const MDfromBlocks: (blocks: any) => Promise<any>
+}

apps/builder/src/widgetLibrary/ChatWidget/baseChat.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } from "react"
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso"
+import { BaseChatProps } from "@/widgetLibrary/ChatWidget/interface"
+import { MessageItem } from "@/widgetLibrary/ChatWidget/messageItem"
+import { Receiving } from "@/widgetLibrary/ChatWidget/receiving"
+
+export const BaseChat = forwardRef<VirtuosoHandle, BaseChatProps>(
+ (props, ref) => {
+ const { value = [], leftMessageColor, showAvatar } = props
+ return (
+ <div
+ style={{
+ height: "100%",
+ overflow: "auto",
+ }}
+ >
+ <Virtuoso
+ ref={ref}
+ totalCount={value.length}
+ height="100%"
+ data={value}
+ initialTopMostItemIndex={value.length - 1}
+ itemContent={(_, data) => (
+ <>
+ {data.loading ? (
+ <Receiving
+ leftMessageColor={leftMessageColor}
+ showAvatar={showAvatar}
+ />
+ ) : (
+ <MessageItem {...props} message={data} />
+ )}
+ </>
+ )}
+ />
+ </div>
+ )
+ },
+)
+BaseChat.displayName = "BaseChat"