Editor for website

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -24,6 +24,7 @@ export interface CommonSettingResponseData {
 
 export type SetCommonSettingPayload<T = any> = {
   orgId: string;
+  isPublicApp?: boolean;
   data: {
     key: string;
     value: T;

client/packages/lowcoder/src/app.tsx

@@ -29,6 +29,7 @@ import {
   ORG_AUTH_FORGOT_PASSWORD_URL,
   ORG_AUTH_RESET_PASSWORD_URL,
   ADMIN_AUTH_URL,
+  PUBLIC_APP_EDITOR_URL,
 } from "constants/routesURL";
 import React from "react";
 import { createRoot } from "react-dom/client";
@@ -65,6 +66,7 @@ const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"))
 const LazyComponentDoc = React.lazy(() => import("pages/ComponentDoc"));
 const LazyComponentPlayground = React.lazy(() => import("pages/ComponentPlayground"));
 const LazyAppEditor = React.lazy(() => import("pages/editor/AppEditor"));
+const LazyPublicAppEditor = React.lazy(() => import("pages/editor/AppEditorPublic"));
 const LazyAppFromTemplate = React.lazy(() => import("pages/ApplicationV2/AppFromTemplate"));
 const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2"));
 const LazyDebugComp = React.lazy(() => import("./debug"));
@@ -301,6 +303,14 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 path={IMPORT_APP_FROM_TEMPLATE_URL}
                 component={LazyAppFromTemplate}
               />
+
+              <LazyRoute
+                exact
+                fallback="layout"
+                path={PUBLIC_APP_EDITOR_URL}
+                component={LazyPublicAppEditor}
+              />
+
               <LazyRoute
                 fallback="layout"
                 path={APP_EDITOR_URL}

client/packages/lowcoder/src/components/JSLibraryModal.tsx

@@ -23,6 +23,7 @@ import { RecommendedJSLibraryMeta } from "api/jsLibraryApi";
 import log from "loglevel";
 import { TacoMarkDown } from "components/markdown";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const ModalLabel = styled.div`
   display: flex;
@@ -232,12 +233,15 @@ export function JSLibraryModal(props: JSLibraryModalProps) {
   const [url, setURL] = useState("");
   const [urlError, setURLError] = useState<string | undefined>(undefined);
   const [installError, setInstallError] = useState<URLErrorType>(undefined);
+  const isPublicApp = useSelector(isPublicApplication);
 
   const dispatch = useDispatch();
 
   const recommends = useSelector(recommendJSLibrarySelector);
 
   useEffect(() => {
+    if (isPublicApp) return;
+
     dispatch(fetchJSLibraryRecommendsAction());
   }, [dispatch]);
 

client/packages/lowcoder/src/components/ResCreatePanel.tsx

@@ -26,6 +26,7 @@ import { useSelector } from "react-redux";
 import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
+import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
@@ -232,6 +233,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   const [isScrolling, setScrolling] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  const isPublicApp = useSelector(isPublicApplication);
   const user = useSelector(getUser);
 
   const { width, ref } = useResizeDetector({ handleHeight: false });
@@ -289,7 +291,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                       onSelect={onSelect}
                     />
                     <ResButton size={buttonSize} identifier={"js"} onSelect={onSelect} />
-                    <ResButton size={buttonSize} identifier={"libraryQuery"} onSelect={onSelect} />
+                    {!isPublicApp && <ResButton size={buttonSize} identifier={"libraryQuery"} onSelect={onSelect} /> }
                     <ResButton
                       size={buttonSize}
                       identifier={BottomResTypeEnum.Folder}
@@ -337,7 +339,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                   <ResButton size={buttonSize} key={i.id} identifier={i} onSelect={onSelect} />
                 ))}
 
-                {user.orgDev && (
+                {(user.orgDev || isPublicApp) && (
                   <DataSourceButton size={buttonSize} onClick={() => setVisible(true)}>
                     <LargeBottomResIconWrapper>
                       <AddIcon />
@@ -351,7 +353,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
         </ScrollBar>
       </Content>
       <CreateDataSourceModal
-       open={visible}
+        open={visible}
         onCancel={() => setVisible(false)}
         onCreated={() => setVisible(false)}
       />

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -25,6 +25,7 @@ import type { AppState } from "@lowcoder-ee/redux/reducers";
 import { ColorControl } from "../controls/colorControl";
 import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils";
 import { AppSettingContext } from "../utils/appSettingContext";
+import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -337,6 +338,7 @@ function AppGeneralSettingsModal(props: ChildrenInstance) {
 }
 
 function AppCanvasSettingsModal(props: ChildrenInstance) {
+  const isPublicApp = useSelector(isPublicApplication);
   const {
     themeList,
     defaultTheme,
@@ -415,13 +417,15 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
             placement="bottom"
             itemNode={(value) => <DropdownItem value={value} />}
             preNode={() => (
-              <>
-                <CreateDiv onClick={() => window.open(THEME_SETTING)}>
-                  <StyledAddIcon />
-                  {trans("appSetting.themeCreate")}
-                </CreateDiv>
-                <DividerStyled />
-              </>
+              isPublicApp ? <></> : (
+                <>
+                  <CreateDiv onClick={() => window.open(THEME_SETTING)}>
+                    <StyledAddIcon />
+                    {trans("appSetting.themeCreate")}
+                  </CreateDiv>
+                  <DividerStyled />
+                </>
+              )
             )}
             allowClear
             onChange={(value) => {

client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx

@@ -1,3 +1,4 @@
+import { PUBLIC_APP_ID } from "@lowcoder-ee/constants/publicApp";
 import { sdkConfig } from "@lowcoder-ee/constants/sdkConfig";
 import { ASSETS_BASE_URL, NPM_PLUGIN_ASSETS_BASE_URL } from "constants/npmPlugins";
 import { trans } from "i18n";
@@ -23,7 +24,9 @@ async function npmLoader(
     ? `${sdkConfig.baseURL}/${ASSETS_BASE_URL}`
     : NPM_PLUGIN_ASSETS_BASE_URL;
 
-  const entry = `${pluginBaseUrl}/${appId || 'none'}/${packageName}@${localPackageVersion}/index.js`;
+  const applicationId = (!appId || appId && appId === PUBLIC_APP_ID) ? 'none' : appId;
+
+  const entry = `${pluginBaseUrl}/${applicationId}/${packageName}@${localPackageVersion}/index.js`;
 
   try {
     const module = await import(

client/packages/lowcoder/src/constants/publicApp.ts

@@ -0,0 +1,136 @@
+export const PUBLIC_APP_ID = "public_app";
+export const PUBLIC_APP_ORG_ID = "645b53eb86b4c862d8ae0fb9";
+
+export const publicAppResponse = {
+  status: 200,
+  statusText: 'OK',
+  headers: {},
+  config: {
+    headers: {} as any,
+  },
+  data: {
+    code: 1,
+    success: true,
+    message: "",
+    data: {
+      orgCommonSettings: undefined,
+      applicationDSL: {
+        "ui": {
+          "compType": "normal",
+          "comp": {}
+        },
+        "refTree": {
+          "value": ""
+        },
+        "hooks": [
+          {
+            "compType": "urlParams",
+            "comp": {},
+            "name": "url"
+          },
+          {
+            "compType": "dayJsLib",
+            "comp": {},
+            "name": "dayjs"
+          },
+          {
+            "compType": "lodashJsLib",
+            "comp": {},
+            "name": "_"
+          },
+          {
+            "compType": "utils",
+            "comp": {},
+            "name": "utils"
+          },
+          {
+            "compType": "message",
+            "comp": {},
+            "name": "message"
+          },
+          {
+            "compType": "toast",
+            "comp": {},
+            "name": "toast"
+          },
+          {
+            "compType": "localStorage",
+            "comp": {},
+            "name": "localStorage"
+          },
+          {
+            "compType": "currentUser",
+            "comp": {},
+            "name": "currentUser"
+          },
+          {
+            "compType": "screenInfo",
+            "comp": {},
+            "name": "screenInfo"
+          },
+          {
+            "compType": "theme",
+            "comp": {},
+            "name": "theme"
+          }
+        ],
+        "settings": {
+          "title": "",
+          "description": "",
+          "category": "Business",
+          "showHeaderInPublic": true,
+          "themeId": "default",
+          "preventAppStylesOverwriting": true,
+          "disableCollision": false,
+          "lowcoderCompVersion": "latest",
+          "maxWidth": {
+            "dropdown": "1920",
+            "input": 0
+          },
+          "gridRowCount": "Infinity",
+          "gridPaddingX": "20",
+          "gridPaddingY": "20"
+        },
+        "preload": {
+          "script": "",
+          "css": "",
+          "globalCSS": ""
+        }
+      },
+      moduleDSL: {},
+      applicationInfoView: {
+        "orgId": "",
+        "applicationId": PUBLIC_APP_ID,
+        "name": "Public App",
+        "createAt": 1735651262539,
+        "createBy": "",
+        "role": "owner",
+        "applicationType": 1,
+        "applicationStatus": "NORMAL",
+        "folderId": '',
+        "lastViewTime": 0,
+        "lastModifyTime": 1735747724691,
+        "lastEditedAt": 1735737886323,
+        "folder": false,
+        "extra": {},
+        "editingUserId": "",
+      },
+    }
+  }
+};
+
+export const publicAppJSDatasourceResponse = {
+  status: 200,
+  statusText: 'OK',
+  headers: {},
+  config: {
+    headers: {} as any,
+  },
+  data: {
+    code: 1,
+    data: [],
+    message: "",
+    success: true,
+    total: 0,
+  }
+};

client/packages/lowcoder/src/constants/routesURL.ts

@@ -49,6 +49,7 @@ export const FOLDERS_URL = `/folders`;
 export const TRASH_URL = `/trash`;
 export const IMPORT_APP_FROM_TEMPLATE_URL = `${ALL_APPLICATIONS_URL}/template-import/:templateId`;
 export const APP_EDITOR_URL = `${ALL_APPLICATIONS_URL}/:applicationId/:viewMode/:appPageId?`;
+export const PUBLIC_APP_EDITOR_URL = `/editor/public`;
 
 export const AUTH_BIND_URL = `${USER_AUTH_URL}/bind`;
 export const AUTH_LOGIN_URL = `${USER_AUTH_URL}/login`;

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -139,7 +139,7 @@ export const en = {
     "pluginListTitle": "Plugins",
     "emptyModules": "Modules are reusable Mikro-Apps. You can embed them in your App.",
     "searchNotFound": "Can't find the right component?",
-    "emptyPlugins": "No Plugins Added",
+    "emptyPlugins": "No plugins added yet. Add npm plugins to enhance your project.",
     "contactUs": "Contact Us",
     "issueHere": "here.",
     "folderListTitle": "Folders"

client/packages/lowcoder/src/pages/common/header.tsx

@@ -40,7 +40,7 @@ import {
   recoverSnapshotAction,
   setShowAppSnapshot,
 } from "redux/reduxActions/appSnapshotActions";
-import { currentApplication } from "redux/selectors/applicationSelector";
+import { currentApplication, isPublicApplication } from "redux/selectors/applicationSelector";
 import {
   getSelectedAppSnapshot,
   showAppSnapshotSelector,
@@ -369,6 +369,7 @@ export default function Header(props: HeaderProps) {
   const { left, bottom, right } = props.panelStatus;
   const user = useSelector(getUser);
   const application = useSelector(currentApplication);
+  const isPublicApp = useSelector(isPublicApplication);
   const applicationId = useApplicationId();
   const dispatch = useDispatch();
   const showAppSnapshot = useSelector(showAppSnapshotSelector);
@@ -536,7 +537,7 @@ export default function Header(props: HeaderProps) {
     ) : (
       <>
         {/* Display a hint about who is editing the app */}
-        {blockEditing && (
+        {blockEditing && Boolean(applicationId) && (
           <>
           <Popover
             style={{ width: 200 }}
@@ -587,7 +588,7 @@ export default function Header(props: HeaderProps) {
           </>
         )}
 
-        {applicationId && (
+        {Boolean(applicationId) && !isPublicApp && (
           <AppPermissionDialog
             applicationId={applicationId}
             visible={permissionDialogVisible}

client/packages/lowcoder/src/pages/common/headerStartDropdown.tsx

@@ -13,7 +13,7 @@ import { trans, transToNode } from "i18n";
 import { exportApplicationAsJSONFile } from "pages/ApplicationV2/components/AppImport";
 import { useContext, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { currentApplication } from "redux/selectors/applicationSelector";
+import { currentApplication, isPublicApplication } from "redux/selectors/applicationSelector";
 import { showAppSnapshotSelector } from "redux/selectors/appSnapshotSelector";
 import styled from "styled-components";
 import history from "util/history";
@@ -74,9 +74,10 @@ export function HeaderStartDropdown(props: { setEdit: () => void, isViewMarketpl
   const showAppSnapshot = useSelector(showAppSnapshotSelector);
   const applicationId = useApplicationId();
   const application = useSelector(currentApplication);
+  const isPublicApp = useSelector(isPublicApplication);
   const [showCopyModal, setShowCopyModal] = useState(false);
   const dispatch = useDispatch();
-  const { appType } = useContext(ExternalEditorContext);
+  const { appType, exportPublicAppToJson } = useContext(ExternalEditorContext);
   const isModule = appType === AppTypeEnum.Module;
 
   const isEditable = canEditApp(user, application);
@@ -137,6 +138,9 @@ export function HeaderStartDropdown(props: { setEdit: () => void, isViewMarketpl
               if (e.key === "edit") {
                 props.setEdit();
               } else if (e.key === "export") {
+                if (isPublicApp && exportPublicAppToJson) {
+                  return exportPublicAppToJson?.();
+                }
                 exportApplicationAsJSONFile(applicationId);
               } else if (e.key === "duplicate") {
                 setShowCopyModal(true);