diff --git a/packages/web/src/appobj/FavoriteFileAppObject.js b/packages/web/src/appobj/FavoriteFileAppObject.js index 67a9c3bcf..1fd08a88d 100644 --- a/packages/web/src/appobj/FavoriteFileAppObject.js +++ b/packages/web/src/appobj/FavoriteFileAppObject.js @@ -3,6 +3,8 @@ import { DropDownMenuItem } from '../modals/DropDownMenu'; import FavoriteModal from '../modals/FavoriteModal'; import useShowModal from '../modals/showModal'; import axios from '../utility/axios'; +import { copyTextToClipboard } from '../utility/clipboard'; +import getElectron from '../utility/getElectron'; import useOpenNewTab from '../utility/useOpenNewTab'; import { SavedFileAppObjectBase } from './SavedFileAppObject'; @@ -41,10 +43,11 @@ export function useOpenFavorite() { } export function FavoriteFileAppObject({ data, commonProps }) { - const { icon, tabComponent, title, props, tabdata } = data; + const { icon, tabComponent, title, props, tabdata, urlPath } = data; const openNewTab = useOpenNewTab(); const showModal = useShowModal(); const openFavorite = useOpenFavorite(); + const electron = getElectron(); const editFavorite = () => { showModal((modalState) => ); @@ -72,6 +75,10 @@ export function FavoriteFileAppObject({ data, commonProps }) { ); }; + const copyLink = () => { + copyTextToClipboard(`${document.location.origin}#favorite=${urlPath}`); + }; + return ( Edit Edit JSON definition + {!electron && urlPath && Copy link} } /> diff --git a/packages/web/src/modals/FavoriteModal.js b/packages/web/src/modals/FavoriteModal.js index 23851b6e6..a8ec0c146 100644 --- a/packages/web/src/modals/FavoriteModal.js +++ b/packages/web/src/modals/FavoriteModal.js @@ -9,6 +9,7 @@ import axios from '../utility/axios'; import uuidv1 from 'uuid/v1'; import { FontIcon } from '../icons'; import useHasPermission from '../utility/useHasPermission'; +import _ from 'lodash'; function FontIconPreview() { const { values } = useForm(); @@ -22,6 +23,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav return { title: savingTab.title, icon: savingTab.icon, + urlPath: _.kebabCase(_.deburr(savingTab.title)), }; } if (editingData) { @@ -30,6 +32,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav icon: editingData.icon, showInToolbar: editingData.showInToolbar, openOnStartup: editingData.openOnStartup, + urlPath: editingData.urlPath, }; } }, []); @@ -99,6 +102,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav + diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js index 7c5c3e9a4..84e820d41 100644 --- a/packages/web/src/widgets/Toolbar.js +++ b/packages/web/src/widgets/Toolbar.js @@ -86,34 +86,21 @@ export default function ToolBar({ toolbarPortalRef }) { showModal((modalState) => ); }; - function openTabFromButton(favorite) { - openFavorite(favorite); - // if ( - // openedTabs.find( - // (x) => x.tabComponent == 'MarkdownViewTab' && x.props && x.props.file == page.file && x.closedTime == null - // ) - // ) { - // setOpenedTabs((tabs) => - // tabs.map((tab) => ({ - // ...tab, - // selected: tab.tabComponent == 'MarkdownViewTab' && tab.props && tab.props.file == page.file, - // })) - // ); - // } else { - // openNewTab({ - // title: page.button || page.file, - // tabComponent: 'MarkdownViewTab', - // icon: page.icon || 'img markdown', - // props: { - // file: page.file, - // }, - // }); - // } - } - React.useEffect(() => { - for (const fav of (favorites || []).filter((x) => x.openOnStartup)) { - openTabFromButton(fav); + const { hash } = document.location; + const favname = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null; + if (favname) { + const open = (favorites || []).find((x) => x.urlPath == favname); + if (open) { + openFavorite(open); + window.history.replaceState(null, null, ' '); + } + } else { + if (!openedTabs.find((x) => x.closedTime == null)) { + for (const fav of (favorites || []).filter((x) => x.openOnStartup)) { + openFavorite(fav); + } + } } }, [favorites]); @@ -124,7 +111,7 @@ export default function ToolBar({ toolbarPortalRef }) { {(favorites || []) .filter((x) => x.showInToolbar) .map((x) => ( - openTabFromButton(x)} icon={x.icon || 'icon favorite'}> + openFavorite(x)} icon={x.icon || 'icon favorite'}> {x.title} ))}