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}

} + + Loading...

; +} + +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.metadata.name} + */} + {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;