diff --git a/apps/canvas/widget/app.jsx b/apps/canvas/widget/app.jsx
new file mode 100644
index 00000000..13637886
--- /dev/null
+++ b/apps/canvas/widget/app.jsx
@@ -0,0 +1,145 @@
+const Container = styled.div`
+ display: flex;
+ height: 100vh;
+ width: 100%;
+`;
+
+const Panel = styled.div`
+ flex: 1;
+ border: 1px solid black;
+ overflow: hidden;
+`;
+
+const Wrapper = styled.div`
+ display: flex;
+ align-items: stretch;
+ height: 100%;
+`;
+
+const Header = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px;
+ border-bottom: 1px solid black;
+`;
+
+const Select = styled.select``;
+
+const Option = styled.option``;
+
+const Button = styled.button``;
+
+function PanelHeader({ options, onChange }) {
+ return (
+
+
+
+
+ );
+}
+
+const [editorValue, setEditorValue] = useState("");
+const [editorSrc, setEditorSrc] = useState(
+ "/*__@appAccount__*//widget/markdown.edit"
+);
+const [viewerSrc, setViewerSrc] = useState(
+ "/*__@appAccount__*//widget/markdown.view"
+);
+const [selectedItem, setSelectedItem] = useState(null);
+
+function handleEditorSrcChange(value) {
+ setEditorSrc(value);
+}
+
+function handleViewerSrcChange(value) {
+ setViewerSrc(value);
+}
+
+function Editor({ value, setEditorValue }) {
+ return (
+ ,
+ }}
+ />
+ );
+}
+
+function Viewer({ value }) {
+ return ;
+}
+
+function Sidebar() {
+ return (
+ setSelectedItem(v) }}
+ />
+ );
+}
+
+return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/apps/canvas/widget/canvas/app.jsx b/apps/canvas/widget/canvas/app.jsx
index 8f2d6e37..188b4a64 100644
--- a/apps/canvas/widget/canvas/app.jsx
+++ b/apps/canvas/widget/canvas/app.jsx
@@ -23,10 +23,22 @@ const Content = styled.div`
align-items: center;
`;
+const [selectedSource, setSelectedSource] = useState("canvas");
+
return (
-
-
+
+
+
);
diff --git a/apps/canvas/widget/canvas/edit.jsx b/apps/canvas/widget/canvas/edit.jsx
index 99631e8b..64cca086 100644
--- a/apps/canvas/widget/canvas/edit.jsx
+++ b/apps/canvas/widget/canvas/edit.jsx
@@ -1,36 +1,32 @@
-const { value, onChange, onSubmit, onCancel } = props;
+const { value, onChange, onSubmit, onCancel, path } = props;
-const indices = Social.index(
- "post",
- {
- // thing
- type: "thing",
- path: "efiz.near/thing/draw", // this is the page??
- },
- {
- order: "desc",
- limit: 100, // this needs to adjust based on slider
- // accountId: props.accounts, // undefined
- }
-);
+const [initialShapes, setInitialShapes] = useState([]);
-if (!indices) {
- return Loading...
;
-}
-
-const drawings = indices
- .map((it) => {
- const path = `${it.accountId}/post/main`;
- const blockHeight = it.blockHeight;
+useEffect(() => {
+ if (typeof value === "string") {
+ setInitialShapes([
+ {
+ id: `shape:editor`,
+ type: "text",
+ props: { text: value, align: "start", size: "s" },
+ },
+ ]);
+ }
+}, [value, setInitialShapes]);
- const val = JSON.parse(Social.get(path, blockHeight) || "null");
- return val.content.shapes ? val.content.shapes : [];
- })
- .flat();
+// ;
+// {
+// canvasData && Data from child: {canvasData}
;
+// }
return (
-
+
);
diff --git a/apps/canvas/widget/canvas/view.jsx b/apps/canvas/widget/canvas/view.jsx
index 6ae3ef7f..85e29b05 100644
--- a/apps/canvas/widget/canvas/view.jsx
+++ b/apps/canvas/widget/canvas/view.jsx
@@ -1,47 +1,97 @@
-const { value } = props;
+const { value, onChange, onSubmit, onCancel, selectedSource } = props;
-const indices = Social.index("post", "main", {
- order: "desc",
- limit: 100, // this needs to adjust based on slider
- // accountId: props.accounts, // undefined
-});
+let drawings = [];
-if (!indices) {
- return Loading...
;
-}
+let indices = [];
+
+if (selectedSource) {
+ switch (selectedSource) {
+ case "canvas":
+ indices = Social.index(
+ "post",
+ {
+ // thing
+ type: "thing",
+ path: "efiz.near/thing/draw", // this is the page??
+ },
+ {
+ order: "desc",
+ limit: 100, // this needs to adjust based on slider
+ // accountId: props.accounts, // undefined
+ }
+ );
+
+ if (!indices) {
+ return Loading...
;
+ }
+
+ drawings = indices
+ .map((it) => {
+ const path = `${it.accountId}/post/main`;
+ const blockHeight = it.blockHeight;
+
+ const val = JSON.parse(Social.get(path, blockHeight) || "null");
+ return val.content.shapes ? val.content.shapes : [];
+ })
+ .flat();
+ break;
+ case "feed":
+ indices = Social.index("post", "main", {
+ order: "desc",
+ limit: 100, // this needs to adjust based on slider
+ // accountId: props.accounts, // undefined
+ });
-const offsetX = 100; // Horizontal offset for each text shape
-const offsetY = 100; // Vertical offset for each text shape
-let x = 0; // Initial X position
-let y = 0; // Initial Y position
+ if (!indices) {
+ return Loading...
;
+ }
-const drawings = indices.map((it, index) => {
- const path = `${it.accountId}/post/main`;
- const blockHeight = it.blockHeight;
+ const offsetX = 100; // Horizontal offset for each text shape
+ const offsetY = 100; // Vertical offset for each text shape
+ let x = 0; // Initial X position
+ let y = 0; // Initial Y position
- x += offsetX;
- y += offsetY;
+ drawings = indices.map((it, index) => {
+ const path = `${it.accountId}/post/main`;
+ const blockHeight = it.blockHeight;
- const val = JSON.parse(Social.get(path, blockHeight) || "null");
- return {
- id: `shape:${path}${blockHeight}`,
- type: "text",
- x,
- y,
- props: { text: val.text, align: "start", size: "s" },
- };
-});
+ x += offsetX;
+ y += offsetY;
+
+ const val = JSON.parse(Social.get(path, blockHeight) || "null");
+ return {
+ id: `shape:${path}${blockHeight}`,
+ type: "text",
+ x,
+ y,
+ props: { text: val.text, align: "start", size: "s" },
+ };
+ });
+ break;
+ }
+}
if (drawings.length === 0) {
return No drawings yet!
;
}
-// return {JSON.stringify(drawings)}
+// const [initialShapes, setInitialShapes] = useState([]);
+
+// useEffect(() => {
+// if (typeof value === "string") {
+// setInitialShapes([
+// {
+// id: `shape:editor`,
+// type: "text",
+// props: { text: value, align: "start", size: "s" },
+// },
+// ]);
+// }
+// }, [value, setInitialShapes]);
+
return (
-
-
-
+
);
diff --git a/apps/canvas/widget/code/edit.jsx b/apps/canvas/widget/code/edit.jsx
new file mode 100644
index 00000000..ad276c04
--- /dev/null
+++ b/apps/canvas/widget/code/edit.jsx
@@ -0,0 +1,62 @@
+const { value, onChange, onSubmit, onCancel } = props;
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+`;
+
+const Header = styled.div`
+ width: 100%;
+ background-color: #f0f0f0;
+`;
+
+const EditorContainer = styled.div`
+ flex-grow: 1;
+ width: 100%;
+`;
+
+const Footer = styled.div`
+ height: 120px;
+ width: 100%;
+ background-color: #f0f0f0;
+`;
+
+const defaultValue = value;
+const language = "json";
+const [path, setPath] = useState(props.path || "");
+
+const [code, setCode] = useState(defaultValue);
+
+useEffect(() => {
+ onChange && onChange(code);
+}, [code]);
+
+function onCreate() {
+ const parts = path.split("/");
+ Social.set({
+ [parts[1]]: {
+ [parts[2]]: {
+ "": code,
+ },
+ },
+ });
+}
+
+return (
+
+
+
+
+
+);
diff --git a/apps/canvas/widget/code/view.jsx b/apps/canvas/widget/code/view.jsx
new file mode 100644
index 00000000..738da9b2
--- /dev/null
+++ b/apps/canvas/widget/code/view.jsx
@@ -0,0 +1,3 @@
+const { value } = props;
+
+return ;
diff --git a/apps/canvas/widget/markdown/edit.jsx b/apps/canvas/widget/markdown/edit.jsx
new file mode 100644
index 00000000..2c084451
--- /dev/null
+++ b/apps/canvas/widget/markdown/edit.jsx
@@ -0,0 +1,26 @@
+const { value, onChange, onSubmit, onCancel } = props;
+
+return (
+
+);
diff --git a/apps/canvas/widget/markdown/view.jsx b/apps/canvas/widget/markdown/view.jsx
new file mode 100644
index 00000000..26e602a4
--- /dev/null
+++ b/apps/canvas/widget/markdown/view.jsx
@@ -0,0 +1,56 @@
+const Wrapper = styled.div`
+ p {
+ white-space: pre-line; // This ensures text breaks to new line
+
+ span {
+ white-space: normal; // and this ensures profile links look normal
+ }
+ }
+
+ blockquote {
+ margin: 1em 0;
+ padding-left: 1.5em;
+ border-left: 4px solid #ccc;
+ color: #666;
+ font-style: italic;
+ font-size: inherit;
+ }
+
+ pre {
+ background-color: #f4f4f4;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 1em;
+ overflow-x: auto;
+ font-family: "Courier New", Courier, monospace;
+ }
+`;
+
+const Embedded = styled.span`
+ white-space: normal;
+
+ p {
+ white-space: normal;
+ }
+`;
+
+const renderMention =
+ props.renderMention ??
+ ((accountId) => (
+
+
+
+ ));
+
+return (
+
+
+
+);
diff --git a/apps/canvas/widget/canvas/core.jsx b/apps/canvas/widget/other/core.jsx
similarity index 78%
rename from apps/canvas/widget/canvas/core.jsx
rename to apps/canvas/widget/other/core.jsx
index c1402072..6b2dcc85 100644
--- a/apps/canvas/widget/canvas/core.jsx
+++ b/apps/canvas/widget/other/core.jsx
@@ -14,10 +14,12 @@ const handleGetData = (data) => {
setTrigger(false); // Reset the trigger
};
+const handlePublish
+
return (
<>
-
- {canvasData && Data from child: {canvasData}
}
+
+
;
+}
+
+const drawings = indices
+ .map((it) => {
+ const path = `${it.accountId}/post/main`;
+ const blockHeight = it.blockHeight;
+
+ const val = JSON.parse(Social.get(path, blockHeight) || "null");
+ return val.content.shapes ? val.content.shapes : [];
+ })
+ .flat();
+
+return (
+
+);
diff --git a/apps/canvas/widget/other/view.jsx b/apps/canvas/widget/other/view.jsx
new file mode 100644
index 00000000..6ae3ef7f
--- /dev/null
+++ b/apps/canvas/widget/other/view.jsx
@@ -0,0 +1,47 @@
+const { value } = props;
+
+const indices = Social.index("post", "main", {
+ order: "desc",
+ limit: 100, // this needs to adjust based on slider
+ // accountId: props.accounts, // undefined
+});
+
+if (!indices) {
+ return Loading...
;
+}
+
+const offsetX = 100; // Horizontal offset for each text shape
+const offsetY = 100; // Vertical offset for each text shape
+let x = 0; // Initial X position
+let y = 0; // Initial Y position
+
+const drawings = indices.map((it, index) => {
+ const path = `${it.accountId}/post/main`;
+ const blockHeight = it.blockHeight;
+
+ x += offsetX;
+ y += offsetY;
+
+ const val = JSON.parse(Social.get(path, blockHeight) || "null");
+ return {
+ id: `shape:${path}${blockHeight}`,
+ type: "text",
+ x,
+ y,
+ props: { text: val.text, align: "start", size: "s" },
+ };
+});
+
+if (drawings.length === 0) {
+ return No drawings yet!
;
+}
+
+// return {JSON.stringify(drawings)}
+return (
+
+
+
+);
diff --git a/apps/canvas/widget/provider.jsx b/apps/canvas/widget/provider.jsx
new file mode 100644
index 00000000..7e9f8027
--- /dev/null
+++ b/apps/canvas/widget/provider.jsx
@@ -0,0 +1,16 @@
+const { path, blockHeight, editorValue, setEditorValue, Children } = props;
+
+let data = "";
+if (path) {
+ data = Social.get(path, blockHeight);
+
+ if (!data) {
+ return Loading...
;
+ }
+}
+
+function handleEditorChange(value) {
+ setEditorValue(value);
+}
+
+return ;
diff --git a/apps/canvas/widget/sidebar.jsx b/apps/canvas/widget/sidebar.jsx
new file mode 100644
index 00000000..78b39838
--- /dev/null
+++ b/apps/canvas/widget/sidebar.jsx
@@ -0,0 +1,73 @@
+const { handleItemClick } = props;
+
+const Container = styled.div`
+ height: 100%;
+ overflow-y: auto;
+`;
+
+const StyledItem = styled.div`
+ display: flex;
+ border-radius: 8px;
+ background-color: var(--base100);
+ padding: 10px;
+ width: 100%;
+ margin: 5px 0;
+ cursor: pointer;
+ &:hover {
+ background-color: var(--base50);
+ }
+`;
+
+const ImageWrapper = styled.div`
+ border-radius: 50%;
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ margin-right: 10px;
+`;
+
+const Image = styled.img`
+ width: 100%;
+ height: 100%;
+`;
+
+const Name = styled.div`
+ flex: 1;
+ align-self: center;
+`;
+
+const [selectedType, setSelectedType] = useState("widget");
+
+const items = Social.keys(`${context.accountId}/${selectedType}/*`, "final");
+
+if (!items) {
+ return No items found
;
+}
+
+items = Object.keys(items[context.accountId][selectedType]);
+
+return (
+
+
+ {items.map((item, index) => (
+
+ handleItemClick(`${context.accountId}/${selectedType}/${item}`)
+ }
+ >
+ {/*
+
+ */}
+ {item}
+
+ ))}
+
+);
diff --git a/src/App.js b/src/App.js
index 91e13d6d..7d19159c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,7 +32,6 @@ import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
import { useEthersProviderContext } from "./data/web3";
import { NetworkId, Widgets } from "./data/widgets";
import { useBosLoaderInitializer } from "./hooks/useBosLoaderInitializer";
-import EditorPage from "./pages/EditorPage";
import EmbedPage from "./pages/EmbedPage";
import Flags from "./pages/Flags";
import HomePage from "./pages/Home";
@@ -189,14 +188,26 @@ function App() {
-
+
+
+
+
+
+
+
-
+
-
+
diff --git a/src/pages/Canvas.js b/src/pages/Canvas.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js
deleted file mode 100644
index ba1f98e1..00000000
--- a/src/pages/EditorPage.js
+++ /dev/null
@@ -1,771 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import ls from "local-storage";
-import prettier from "prettier";
-import parserBabel from "prettier/parser-babel";
-import { useHistory, useParams } from "react-router-dom";
-import Editor, { useMonaco } from "@monaco-editor/react";
-import {
- Widget,
- useCache,
- useNear,
- CommitButton,
- useAccountId,
-} from "near-social-vm";
-import { Nav, OverlayTrigger, Tooltip } from "react-bootstrap";
-import RenameModal from "../components/Editor/RenameModal";
-import OpenModal from "../components/Editor/OpenModal";
-import {
- FileTab,
- Filetype,
- StorageDomain,
- StorageType,
- toPath,
-} from "../components/Editor/FileTab";
-import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
-import vmTypesDeclaration from "raw-loader!near-social-vm-types";
-
-const LsKey = "social.near:v01:";
-const EditorLayoutKey = LsKey + "editorLayout:";
-const WidgetPropsKey = LsKey + "widgetProps:";
-const EditorUncommittedPreviewsKey = LsKey + "editorUncommittedPreviews:";
-
-const DefaultEditorCode = "return Hello World
;";
-
-const Tab = {
- Editor: "Editor",
- Props: "Props",
- Metadata: "Metadata",
- Widget: "Widget",
-};
-
-const Layout = {
- Tabs: "Tabs",
- Split: "Split",
-};
-
-export default function EditorPage(props) {
- useHashRouterLegacy();
- const { widgetSrc } = useParams();
- const history = useHistory();
- const setWidgetSrc = props.setWidgetSrc;
-
- const [loading, setLoading] = useState(false);
- const [code, setCode] = useState(undefined);
- const [path, setPath] = useState(undefined);
- const [files, setFiles] = useState(undefined);
- const [lastPath, setLastPath] = useState(undefined);
- const [showRenameModal, setShowRenameModal] = useState(false);
- const [showOpenModal, setShowOpenModal] = useState(false);
- const [allSaved, setAllSaved] = useState({});
- const [uncommittedPreviews, setUncommittedPreviews] = useState(
- ls.get(EditorUncommittedPreviewsKey) ?? false
- );
- const [widgetConfig, setWidgetConfig] = useState(undefined);
-
- const [renderCode, setRenderCode] = useState(code);
- const [widgetProps, setWidgetProps] = useState(
- ls.get(WidgetPropsKey) || "{}"
- );
- const [parsedWidgetProps, setParsedWidgetProps] = useState({});
- const [propsError, setPropsError] = useState(null);
- const [metadata, setMetadata] = useState(undefined);
- const near = useNear();
- const cache = useCache();
- const accountId = useAccountId();
-
- const [tab, setTab] = useState(Tab.Editor);
- const [layout, setLayoutState] = useState(
- ls.get(EditorLayoutKey) || Layout.Tabs
- );
- const [previewKey, setPreviewKey] = useState("");
-
- const monaco = useMonaco();
-
- useEffect(() => {
- if (monaco) {
- monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
- monaco.languages.typescript.javascriptDefaults.addExtraLib(
- vmTypesDeclaration
- );
- }
- }, [monaco]);
-
- const setLayout = useCallback(
- (layout) => {
- ls.set(EditorLayoutKey, layout);
- setLayoutState(layout);
- },
- [setLayoutState]
- );
-
- useEffect(() => {
- setWidgetSrc({
- edit: null,
- view: widgetSrc,
- });
- }, [widgetSrc, setWidgetSrc]);
-
- const updateCode = useCallback(
- (path, code) => {
- cache.localStorageSet(
- StorageDomain,
- {
- path,
- type: StorageType.Code,
- },
- {
- code,
- time: Date.now(),
- }
- );
- setCode(code);
- },
- [cache, setCode]
- );
-
- useEffect(() => {
- ls.set(WidgetPropsKey, widgetProps);
- try {
- const parsedWidgetProps = JSON.parse(widgetProps);
- setParsedWidgetProps(parsedWidgetProps);
- setPropsError(null);
- } catch (e) {
- setParsedWidgetProps({});
- setPropsError(e.message);
- }
- }, [widgetProps]);
-
- const removeFromFiles = useCallback(
- (path) => {
- path = JSON.stringify(path);
- setFiles((files) =>
- files.filter((file) => JSON.stringify(file) !== path)
- );
- setLastPath(path);
- },
- [setFiles, setLastPath]
- );
-
- const addToFiles = useCallback(
- (path) => {
- const jpath = JSON.stringify(path);
- setFiles((files) => {
- const newFiles = [...files];
- if (!files.find((file) => JSON.stringify(file) === jpath)) {
- newFiles.push(path);
- }
- return newFiles;
- });
- setLastPath(path);
- },
- [setFiles, setLastPath]
- );
-
- useEffect(() => {
- if (files && lastPath) {
- cache.localStorageSet(
- StorageDomain,
- {
- type: StorageType.Files,
- },
- { files, lastPath }
- );
- }
- }, [files, lastPath, cache]);
-
- const openFile = useCallback(
- (path, code) => {
- setPath(path);
- addToFiles(path);
- setMetadata(undefined);
- setRenderCode(null);
- if (code !== undefined) {
- updateCode(path, code);
- } else {
- setLoading(true);
- cache
- .asyncLocalStorageGet(StorageDomain, {
- path,
- type: StorageType.Code,
- })
- .then(({ code }) => {
- updateCode(path, code);
- })
- .finally(() => {
- setLoading(false);
- });
- }
- },
- [updateCode, addToFiles]
- );
-
- const updateSaved = useCallback((jp, saved, localCode) => {
- setAllSaved((allSaved) => {
- return Object.assign({}, allSaved, { [jp]: saved || localCode });
- });
- }, []);
-
- const loadFile = useCallback(
- (nameOrPath) => {
- if (!near) {
- return;
- }
- const widgetSrc =
- nameOrPath.indexOf("/") >= 0
- ? nameOrPath
- : `${accountId}/widget/${nameOrPath}`;
- const c = () => {
- const code = cache.socialGet(
- near,
- widgetSrc,
- false,
- undefined,
- undefined,
- c
- );
- if (code) {
- const name = widgetSrc.split("/").slice(2).join("/");
- openFile(toPath(Filetype.Widget, widgetSrc), code);
- }
- };
-
- c();
- },
- [accountId, openFile, toPath, near, cache]
- );
-
- const generateNewName = useCallback(
- (type) => {
- for (let i = 0; ; i++) {
- const name = `Draft-${i}`;
- const path = toPath(type, name);
- path.unnamed = true;
- const jPath = JSON.stringify(path);
- if (!files?.find((file) => JSON.stringify(file) === jPath)) {
- return path;
- }
- }
- },
- [toPath, files]
- );
-
- const createFile = useCallback(
- (type) => {
- const path = generateNewName(type);
- openFile(path, DefaultEditorCode);
- },
- [generateNewName, openFile]
- );
-
- const renameFile = useCallback(
- (newName, code) => {
- const newPath = toPath(path.type, newName);
- const jNewPath = JSON.stringify(newPath);
- const jPath = JSON.stringify(path);
- setFiles((files) => {
- const newFiles = files.filter(
- (file) => JSON.stringify(file) !== jNewPath
- );
- const i = newFiles.findIndex((file) => JSON.stringify(file) === jPath);
- if (i >= 0) {
- newFiles[i] = newPath;
- }
- return newFiles;
- });
- setLastPath(newPath);
- setPath(newPath);
- updateCode(newPath, code);
- },
- [path, toPath, updateCode]
- );
-
- useEffect(() => {
- cache
- .asyncLocalStorageGet(StorageDomain, { type: StorageType.Files })
- .then((value) => {
- const { files, lastPath } = value || {};
- setFiles(files || []);
- setLastPath(lastPath);
- });
- }, [cache]);
-
- useEffect(() => {
- if (!near || !files) {
- return;
- }
- if (widgetSrc) {
- if (widgetSrc === "new") {
- createFile(Filetype.Widget);
- } else {
- loadFile(widgetSrc);
- }
- history.replace(`/edit/`);
- } else if (path === undefined) {
- if (files.length === 0) {
- createFile(Filetype.Widget);
- } else {
- openFile(lastPath, undefined);
- }
- }
- }, [near, createFile, lastPath, files, path, widgetSrc, openFile, loadFile]);
-
- const reformat = useCallback(
- (path, code) => {
- try {
- const formattedCode = prettier.format(code, {
- parser: "babel",
- plugins: [parserBabel],
- });
- updateCode(path, formattedCode);
- } catch (e) {
- console.log(e);
- }
- },
- [updateCode]
- );
-
- const reformatProps = useCallback(
- (props) => {
- try {
- const formattedProps = JSON.stringify(JSON.parse(props), null, 2);
- setWidgetProps(formattedProps);
- } catch (e) {
- console.log(e);
- }
- },
- [setWidgetProps]
- );
-
- const closeCommitted = useCallback(
- (path, allSaved) => {
- setFiles((files) => {
- files = files.filter((file) => allSaved[JSON.stringify(file)] !== true);
- if (allSaved[JSON.stringify(path)] === true) {
- if (files.length > 0) {
- openFile(files[files.length - 1], undefined);
- } else {
- createFile(Filetype.Widget);
- }
- }
- return files;
- });
- },
- [openFile, createFile]
- );
-
- const layoutClass = layout === Layout.Split ? "col-lg-6" : "";
-
- const onLayoutChange = useCallback(
- (e) => {
- const layout = e.target.value;
- if (layout === Layout.Split && tab === Tab.Widget) {
- setTab(Tab.Editor);
- }
- setLayout(layout);
- },
- [setLayout, tab, setTab]
- );
-
- const pathToSrc = useCallback(
- (path) => {
- return `${accountId}/${path?.type}/${path?.name}`;
- },
- [accountId]
- );
-
- const generateWidgetConfig = useCallback(
- (uncommittedPreviews) => {
- return uncommittedPreviews
- ? {
- redirectMap: Object.fromEntries(
- Object.entries(allSaved)
- .filter(([jpath, code]) => code !== true)
- .map(([jpath, code]) => {
- const path = JSON.parse(jpath);
- return [
- pathToSrc(path),
- {
- code,
- },
- ];
- })
- ),
- }
- : undefined;
- },
- [allSaved, pathToSrc]
- );
-
- const widgetName = path?.name;
-
- const commitButton = (
-
- Save Widget
-
- );
-
- const widgetPath = `${accountId}/${path?.type}/${path?.name}`;
- const jpath = JSON.stringify(path);
-
- const renderPreview = (code) => {
- setWidgetConfig(generateWidgetConfig(uncommittedPreviews));
- setRenderCode(code);
- setPreviewKey(`preview-${Date.now()}`);
- };
-
- return (
-
-
renameFile(newName, code)}
- onHide={() => setShowRenameModal(false)}
- />
- loadFile(newName)}
- onNew={(newName) =>
- newName
- ? openFile(toPath(Filetype.Widget, newName), DefaultEditorCode)
- : createFile(Filetype.Widget)
- }
- onHide={() => setShowOpenModal(false)}
- />
-
-
- {props.widgets.editorComponentSearch && (
-
- ({
- extraButtons: ({ widgetName, widgetPath, onHide }) => (
-
- Open "{widgetName}" component in the editor
-
- }
- >
-
-
- ),
- }),
- [loadFile]
- )}
- />
-
- )}
-
-
-
-
-
-
-
- -
-
-
- -
-
-
- {props.widgets.widgetMetadataEditor && (
- -
-
-
- )}
- {layout === Layout.Tabs && (
- -
-
-
- )}
-
-
-
-
- updateCode(path, code)}
- wrapperProps={{
- onBlur: () => reformat(path, code),
- }}
- />
-
-
-
- {!path?.unnamed && commitButton}
-
- {path && accountId && (
-
- Open Component in a new tab
-
- )}
-
-
-
-
-
- setWidgetProps(props)}
- wrapperProps={{
- onBlur: () => reformatProps(widgetProps),
- }}
- />
-
-
^^ Props for debugging (in JSON)
- {propsError && (
-
{propsError}
- )}
-
-
-
- ({
- widgetPath,
- onChange: setMetadata,
- }),
- [widgetPath]
- )}
- />
-
-
{commitButton}
-
-
-
-
-
-
- {renderCode ? (
-
- ) : (
- 'Click "Render preview" button to render the widget'
- )}
-
-
-
-
-
-
-
-
- ({ metadata, accountId, widgetName }),
- [metadata, accountId, widgetName]
- )}
- />
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/pages/ViewPage.js b/src/pages/ViewPage.js
index 111c5f20..b8e11d90 100644
--- a/src/pages/ViewPage.js
+++ b/src/pages/ViewPage.js
@@ -23,7 +23,7 @@ export default function ViewPage(props) {
const redirectMapStore = useBosLoaderStore();
const src =
- widgetSrc || window?.InjectedConfig?.defaultWidget || props.widgets.default;
+ widgetSrc || window?.InjectedConfig?.defaultWidget || props.overrideWidget;
const showMenu = !window?.InjectedConfig?.hideMenu;
const setWidgetSrc = props.setWidgetSrc;
const viewSourceWidget = props.widgets.viewSource;