mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
779 lines
27 KiB
JavaScript
779 lines
27 KiB
JavaScript
/*
|
||
* notion-enhancer
|
||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||
* under the MIT license
|
||
*/
|
||
|
||
'use strict';
|
||
|
||
const url = require('url'),
|
||
path = require('path'),
|
||
electron = require('electron'),
|
||
{ __notion } = require('../../pkg/helpers.js'),
|
||
config = require(`${__notion}/app/config.js`),
|
||
constants = require(`${__notion}/app/shared/constants.js`),
|
||
notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`),
|
||
notionIpc = require(`${__notion}/app/helpers/notionIpc.js`),
|
||
localizationHelper = require(`${__notion}/app/helpers/localizationHelper.js`),
|
||
koMessages = require(`${__notion}/app/i18n/ko_KR/messages.json`),
|
||
schemeHelpers = require(`${__notion}/app/shared/schemeHelpers.js`),
|
||
React = require(`${__notion}/app/node_modules/react/index.js`),
|
||
ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`);
|
||
|
||
const insertCSP = `
|
||
const csp = document.createElement('meta');
|
||
csp.httpEquiv = 'Content-Security-Policy';
|
||
csp.content = "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:";
|
||
document.head.appendChild(csp);
|
||
`;
|
||
|
||
module.exports = (store, __exports) => {
|
||
if (store().tabs) {
|
||
class Index extends React.PureComponent {
|
||
constructor() {
|
||
super(...arguments);
|
||
this.state = {
|
||
error: false,
|
||
searching: false,
|
||
searchingPeekView: false,
|
||
zoomFactor: 1,
|
||
tabs: new Map([[0, true]]),
|
||
};
|
||
this.$titlebar = null;
|
||
this.$dragging = null;
|
||
this.views = {
|
||
current: {
|
||
$el: () => this.views.html[this.views.current.id],
|
||
id: 0,
|
||
},
|
||
react: {},
|
||
html: {},
|
||
loaded: {},
|
||
tabs: {},
|
||
};
|
||
this.$search = null;
|
||
this.handleReload = () => {
|
||
this.setState({ error: false });
|
||
Object.values(this.views.html).forEach(($notion) => {
|
||
if ($notion.isWaitingForResponse()) $notion.reload();
|
||
});
|
||
};
|
||
this.communicateWithView = this.communicateWithView.bind(this);
|
||
this.startSearch = this.startSearch.bind(this);
|
||
this.stopSearch = this.stopSearch.bind(this);
|
||
this.nextSearch = this.nextSearch.bind(this);
|
||
this.prevSearch = this.prevSearch.bind(this);
|
||
this.clearSearch = this.clearSearch.bind(this);
|
||
this.doneSearch = this.doneSearch.bind(this);
|
||
|
||
// draggable re-ordering
|
||
const getTab = ($el) => {
|
||
if ($el.innerText === '+')
|
||
return [null, document.querySelector('.tab.new')];
|
||
if ($el.innerText === '×') $el = $el.parentElement;
|
||
if (!$el.innerText.endsWith('×')) $el = $el.parentElement;
|
||
return (
|
||
Object.entries(this.views.tabs).find(
|
||
([id, $node]) => $node === $el
|
||
) || []
|
||
);
|
||
};
|
||
document.addEventListener('dragstart', (event) => {
|
||
if (!this.$titlebar) return;
|
||
this.$dragging = getTab(event.target)[0];
|
||
event.target.style.opacity = 0.5;
|
||
});
|
||
document.addEventListener('dragend', (event) => {
|
||
if (!this.$titlebar) return;
|
||
event.target.style.opacity = '';
|
||
});
|
||
document.addEventListener('dragover', (event) => {
|
||
if (!this.$titlebar) return;
|
||
event.preventDefault();
|
||
document
|
||
.querySelectorAll('.dragged-over')
|
||
.forEach((el) => el.classList.remove('dragged-over'));
|
||
const tab = getTab(event.target);
|
||
if (tab[1]) tab[1].classList.add('dragged-over');
|
||
});
|
||
document.addEventListener('drop', (event) => {
|
||
if (!this.$titlebar || this.$dragging === null) return;
|
||
event.preventDefault();
|
||
document
|
||
.querySelectorAll('.dragged-over')
|
||
.forEach((el) => el.classList.remove('dragged-over'));
|
||
const from = getTab(this.views.tabs[+this.$dragging]),
|
||
to = getTab(event.target);
|
||
if (!from[1].classList.contains('new') && from[0] !== to[0])
|
||
to[1].parentElement.insertBefore(from[1], to[1]);
|
||
from[1].classList.remove('slideIn');
|
||
this.$dragging = null;
|
||
});
|
||
}
|
||
|
||
componentDidMount() {
|
||
const buttons = require('./buttons.js')(store);
|
||
this.$titlebar.appendChild(buttons.element);
|
||
this.loadListeners();
|
||
|
||
let electronWindow;
|
||
try {
|
||
electronWindow = electron.remote.getCurrentWindow();
|
||
} catch (error) {
|
||
notionIpc.sendToMain('notion:log-error', {
|
||
level: 'error',
|
||
from: 'index',
|
||
type: 'GetCurrentWindowError',
|
||
error: error.message,
|
||
});
|
||
}
|
||
if (!electronWindow) {
|
||
this.setState({ error: true });
|
||
this.handleReload();
|
||
return;
|
||
}
|
||
electronWindow.addListener('app-command', (e, cmd) => {
|
||
const webContents = this.views.current.$el().getWebContents();
|
||
if (cmd === 'browser-backward' && webContents.canGoBack()) {
|
||
webContents.goBack();
|
||
} else if (cmd === 'browser-forward' && webContents.canGoForward()) {
|
||
webContents.goForward();
|
||
}
|
||
});
|
||
electronWindow.addListener('swipe', (e, dir) => {
|
||
const webContents = this.views.current.$el().getWebContents();
|
||
if (dir === 'left' && webContents.canGoBack()) {
|
||
webContents.goBack();
|
||
} else if (dir === 'right' && webContents.canGoForward()) {
|
||
webContents.goForward();
|
||
}
|
||
});
|
||
}
|
||
|
||
newTab() {
|
||
let id = 0;
|
||
const list = new Map(this.state.tabs);
|
||
while (this.state.tabs.get(id)) id++;
|
||
list.delete(id);
|
||
if (this.views.html[id]) {
|
||
this.views.html[id].style.opacity = '0';
|
||
let unhide;
|
||
unhide = () => {
|
||
this.views.html[id].style.opacity = '';
|
||
this.views.html[id].removeEventListener('did-stop-loading', unhide);
|
||
};
|
||
this.views.html[id].addEventListener('did-stop-loading', unhide);
|
||
this.views.html[id].loadURL(this.views.current.$el().src);
|
||
}
|
||
this.openTab(id, list);
|
||
}
|
||
openTab(id, state = new Map(this.state.tabs)) {
|
||
if (!id && id !== 0) return;
|
||
this.views.current.id = id;
|
||
this.setState({ tabs: state.set(id, true) }, this.focusTab.bind(this));
|
||
}
|
||
closeTab(id) {
|
||
if ((!id && id !== 0) || !this.state.tabs.get(id)) return;
|
||
const list = new Map(this.state.tabs);
|
||
list.delete(id);
|
||
list.set(id, false);
|
||
if (![...list].filter(([id, open]) => open).length)
|
||
return electron.remote.getCurrentWindow().close();
|
||
while (
|
||
!list.get(this.views.current.id) ||
|
||
this.views.current.id === id
|
||
) {
|
||
this.views.current.id = this.views.current.id - 1;
|
||
if (this.views.current.id < 0) this.views.current.id = list.size - 1;
|
||
}
|
||
this.setState({ tabs: list }, this.focusTab.bind(this));
|
||
}
|
||
focusTab() {
|
||
this.loadListeners();
|
||
this.blurListeners();
|
||
this.focusListeners();
|
||
for (const id in this.views.loaded) {
|
||
if (this.views.loaded.hasOwnProperty(id) && this.views.loaded[id]) {
|
||
this.views.loaded[id].style.display =
|
||
id == this.views.current.id && this.state.tabs.get(+id)
|
||
? 'flex'
|
||
: 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
communicateWithView(event) {
|
||
if (event.channel === 'enhancer:set-tab-theme') {
|
||
for (const style of event.args[0])
|
||
document.body.style.setProperty(style[0], style[1]);
|
||
}
|
||
if (
|
||
event.channel === 'enhancer:set-tab-title' &&
|
||
this.views.tabs[event.target.id]
|
||
) {
|
||
this.views.tabs[event.target.id].children[0].innerText =
|
||
event.args[0];
|
||
}
|
||
}
|
||
startSearch(isPeekView) {
|
||
this.setState({
|
||
searching: true,
|
||
searchingPeekView: isPeekView,
|
||
});
|
||
if (document.activeElement instanceof HTMLElement)
|
||
document.activeElement.blur();
|
||
this.$search.focus();
|
||
notionIpc.sendIndexToSearch(this.$search, 'search:start');
|
||
notionIpc.sendIndexToNotion(this.$search, 'search:started');
|
||
}
|
||
stopSearch() {
|
||
notionIpc.sendIndexToSearch(this.$search, 'search:reset');
|
||
this.setState({
|
||
searching: false,
|
||
});
|
||
this.lastSearchQuery = undefined;
|
||
this.views.current
|
||
.$el()
|
||
.getWebContents()
|
||
.stopFindInPage('clearSelection');
|
||
notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
|
||
}
|
||
nextSearch(query) {
|
||
this.views.current
|
||
.$el()
|
||
.getWebContents()
|
||
.findInPage(query, {
|
||
forward: true,
|
||
findNext: query === this.lastSearchQuery,
|
||
});
|
||
this.lastSearchQuery = query;
|
||
}
|
||
prevSearch(query) {
|
||
this.views.current
|
||
.$el()
|
||
.getWebContents()
|
||
.findInPage(query, {
|
||
forward: false,
|
||
findNext: query === this.lastSearchQuery,
|
||
});
|
||
this.lastSearchQuery = query;
|
||
}
|
||
clearSearch() {
|
||
this.lastSearchQuery = undefined;
|
||
this.views.current
|
||
.$el()
|
||
.getWebContents()
|
||
.stopFindInPage('clearSelection');
|
||
}
|
||
doneSearch() {
|
||
this.lastSearchQuery = undefined;
|
||
this.views.current
|
||
.$el()
|
||
.getWebContents()
|
||
.stopFindInPage('clearSelection');
|
||
this.setState({ searching: false });
|
||
if (document.activeElement instanceof HTMLElement) {
|
||
document.activeElement.blur();
|
||
}
|
||
this.views.current.$el().focus();
|
||
notionIpc.sendIndexToNotion(this.views.current.$el(), 'search:stopped');
|
||
}
|
||
focusListeners() {
|
||
if (!this.views.current.$el() || !this.$search) return;
|
||
this.views.current
|
||
.$el()
|
||
.addEventListener('ipc-message', this.communicateWithView);
|
||
notionIpc.receiveIndexFromNotion.addListener(
|
||
this.views.current.$el(),
|
||
'search:start',
|
||
this.startSearch
|
||
);
|
||
notionIpc.receiveIndexFromNotion.addListener(
|
||
this.views.current.$el(),
|
||
'search:stop',
|
||
this.stopSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.addListener(
|
||
this.$search,
|
||
'search:next',
|
||
this.nextSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.addListener(
|
||
this.$search,
|
||
'search:prev',
|
||
this.prevSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.addListener(
|
||
this.$search,
|
||
'search:clear',
|
||
this.clearSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.addListener(
|
||
this.$search,
|
||
'search:stop',
|
||
this.doneSearch
|
||
);
|
||
}
|
||
blurListeners() {
|
||
if (!this.views.current.$el() || !this.$search) return;
|
||
if (this.state.searching) this.stopSearch();
|
||
this.views.current
|
||
.$el()
|
||
.removeEventListener('ipc-message', this.communicateWithView);
|
||
notionIpc.receiveIndexFromNotion.removeListener(
|
||
this.views.current.$el(),
|
||
'search:start',
|
||
this.startSearch
|
||
);
|
||
notionIpc.receiveIndexFromNotion.removeListener(
|
||
this.views.current.$el(),
|
||
'search:stop',
|
||
this.stopSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.removeListener(
|
||
this.$search,
|
||
'search:next',
|
||
this.nextSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.removeListener(
|
||
this.$search,
|
||
'search:prev',
|
||
this.prevSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.removeListener(
|
||
this.$search,
|
||
'search:clear',
|
||
this.clearSearch
|
||
);
|
||
notionIpc.receiveIndexFromSearch.removeListener(
|
||
this.$search,
|
||
'search:stop',
|
||
this.doneSearch
|
||
);
|
||
}
|
||
loadListeners() {
|
||
if (!this.$search) return;
|
||
Object.entries(this.views.html)
|
||
.filter(([id, $notion]) => !this.views.loaded[id] && $notion)
|
||
.forEach(([id, $notion]) => {
|
||
this.views.loaded[id] = $notion;
|
||
$notion.addEventListener('did-fail-load', (error) => {
|
||
// logger.info('Failed to load:', error);
|
||
if (
|
||
error.errorCode === -3 ||
|
||
!error.validatedURL.startsWith(
|
||
schemeHelpers.getSchemeUrl({
|
||
httpUrl: config.default.baseURL,
|
||
protocol: config.default.protocol,
|
||
})
|
||
)
|
||
) {
|
||
return;
|
||
}
|
||
this.setState({ error: true });
|
||
});
|
||
$notion.addEventListener('dom-ready', () => {
|
||
$notion.getWebContents().executeJavaScript(insertCSP);
|
||
$notion
|
||
.getWebContents()
|
||
.addListener('found-in-page', (event, result) => {
|
||
const matches = result
|
||
? {
|
||
count: result.matches,
|
||
index: result.activeMatchOrdinal,
|
||
}
|
||
: { count: 0, index: 0 };
|
||
notionIpc.sendIndexToSearch(
|
||
this.$search,
|
||
'search:result',
|
||
matches
|
||
);
|
||
});
|
||
notionIpc.proxyAllMainToNotion($notion);
|
||
});
|
||
notionIpc.receiveIndexFromNotion.addListener(
|
||
$notion,
|
||
'search:set-theme',
|
||
(theme) => {
|
||
notionIpc.sendIndexToSearch(
|
||
this.$search,
|
||
'search:set-theme',
|
||
theme
|
||
);
|
||
}
|
||
);
|
||
notionIpc.receiveIndexFromNotion.addListener(
|
||
$notion,
|
||
'zoom',
|
||
(zoomFactor) => {
|
||
$notion.getWebContents().setZoomFactor(zoomFactor);
|
||
this.$search.getWebContents().setZoomFactor(zoomFactor);
|
||
this.setState({ zoomFactor });
|
||
}
|
||
);
|
||
let electronWindow;
|
||
try {
|
||
electronWindow = electron.remote.getCurrentWindow();
|
||
} catch (error) {
|
||
notionIpc.sendToMain('notion:log-error', {
|
||
level: 'error',
|
||
from: 'index',
|
||
type: 'GetCurrentWindowError',
|
||
error: error.message,
|
||
});
|
||
}
|
||
if (!electronWindow) {
|
||
this.setState({ error: true });
|
||
this.handleReload();
|
||
return;
|
||
}
|
||
const sendFullScreenChangeEvent = () => {
|
||
notionIpc.sendIndexToNotion(
|
||
$notion,
|
||
'notion:full-screen-changed'
|
||
);
|
||
};
|
||
electronWindow.addListener(
|
||
'enter-full-screen',
|
||
sendFullScreenChangeEvent
|
||
);
|
||
electronWindow.addListener(
|
||
'leave-full-screen',
|
||
sendFullScreenChangeEvent
|
||
);
|
||
electronWindow.addListener(
|
||
'enter-html-full-screen',
|
||
sendFullScreenChangeEvent
|
||
);
|
||
electronWindow.addListener(
|
||
'leave-html-full-screen',
|
||
sendFullScreenChangeEvent
|
||
);
|
||
});
|
||
}
|
||
|
||
renderTitlebar() {
|
||
return React.createElement(
|
||
'header',
|
||
{
|
||
id: 'titlebar',
|
||
ref: ($titlebar) => {
|
||
this.$titlebar = $titlebar;
|
||
},
|
||
},
|
||
React.createElement(
|
||
'div',
|
||
{ id: 'tabs' },
|
||
...[...this.state.tabs]
|
||
.filter(([id, open]) => open)
|
||
.map(([id, open]) =>
|
||
React.createElement(
|
||
'button',
|
||
{
|
||
draggable: true,
|
||
className:
|
||
'tab slideIn' +
|
||
(id === this.views.current.id ? ' current' : ''),
|
||
onClick: (e) => {
|
||
if (!e.target.classList.contains('close'))
|
||
this.openTab(id);
|
||
},
|
||
ref: ($tab) => {
|
||
this.views.tabs[id] = $tab;
|
||
this.focusTab();
|
||
},
|
||
},
|
||
React.createElement('span', {}, 'notion.so'),
|
||
React.createElement(
|
||
'span',
|
||
{
|
||
className: 'close',
|
||
onClick: () => {
|
||
this.closeTab(id);
|
||
},
|
||
},
|
||
'×'
|
||
)
|
||
)
|
||
),
|
||
React.createElement(
|
||
'button',
|
||
{
|
||
className: 'tab new',
|
||
onClick: () => {
|
||
this.newTab();
|
||
},
|
||
},
|
||
React.createElement('span', {}, '+')
|
||
)
|
||
)
|
||
);
|
||
}
|
||
renderNotionContainer() {
|
||
this.views.react = Object.fromEntries(
|
||
[...this.state.tabs].map(([id, open]) => {
|
||
return [
|
||
id,
|
||
this.views.react[id] ||
|
||
React.createElement('webview', {
|
||
className: 'notion',
|
||
id,
|
||
ref: ($notion) => {
|
||
this.views.html[id] = $notion;
|
||
this.focusTab();
|
||
},
|
||
partition: constants.electronSessionPartition,
|
||
preload: path.resolve(`${__notion}/app/renderer/preload.js`),
|
||
src: this.props.notionUrl,
|
||
}),
|
||
];
|
||
})
|
||
);
|
||
return React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
flexGrow: 1,
|
||
display: this.state.error ? 'none' : 'flex',
|
||
},
|
||
},
|
||
...Object.values(this.views.react)
|
||
);
|
||
}
|
||
renderSearchContainer() {
|
||
return React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
position: 'fixed',
|
||
overflow: 'hidden',
|
||
pointerEvents: 'none',
|
||
padding: '0 20px',
|
||
top:
|
||
(this.state.searchingPeekView
|
||
? 0
|
||
: process.platform === 'darwin'
|
||
? 37
|
||
: 45) * this.state.zoomFactor,
|
||
right: (48 - 24) * this.state.zoomFactor,
|
||
width: 440 * this.state.zoomFactor,
|
||
height: 72 * this.state.zoomFactor,
|
||
},
|
||
},
|
||
React.createElement('webview', {
|
||
id: 'search',
|
||
style: {
|
||
width: '100%',
|
||
height: '100%',
|
||
transition: `transform 70ms ease-${
|
||
this.state.searching ? 'out' : 'in'
|
||
}`,
|
||
transform: `translateY(${this.state.searching ? '0' : '-100'}%)`,
|
||
pointerEvents: this.state.searching ? 'auto' : 'none',
|
||
},
|
||
ref: ($search) => {
|
||
this.$search = $search;
|
||
this.focusTab();
|
||
},
|
||
partition: constants.electronSessionPartition,
|
||
preload: `file://${path.resolve(
|
||
`${__notion}/app/renderer/search.js`
|
||
)}`,
|
||
src: `file://${path.resolve(
|
||
`${__notion}/app/renderer/search.html`
|
||
)}`,
|
||
})
|
||
);
|
||
}
|
||
renderErrorContainer() {
|
||
return React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
display: this.state.error ? 'flex' : 'none',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 24,
|
||
paddingBottom: '8vh',
|
||
},
|
||
},
|
||
React.createElement('img', {
|
||
style: {
|
||
width: 300,
|
||
maxWidth: '100%',
|
||
},
|
||
src: './onboarding-offline.png',
|
||
}),
|
||
React.createElement(
|
||
'div',
|
||
{
|
||
style: {
|
||
paddingTop: 16,
|
||
paddingBottom: 16,
|
||
textAlign: 'center',
|
||
lineHeight: 1.4,
|
||
fontSize: 17,
|
||
letterSpacing: '-0.01em',
|
||
color: '#424241',
|
||
fontWeight: 500,
|
||
},
|
||
},
|
||
React.createElement(
|
||
'div',
|
||
null,
|
||
React.createElement(notion_intl.FormattedMessage, {
|
||
id: 'desktopLogin.offline.title',
|
||
defaultMessage: 'Welcome to <strong>Notion</strong>!',
|
||
values: {
|
||
strong: (...chunks) =>
|
||
React.createElement('strong', null, chunks),
|
||
},
|
||
})
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
null,
|
||
React.createElement(notion_intl.FormattedMessage, {
|
||
id: 'desktopLogin.offline.message',
|
||
defaultMessage: 'Connect to the internet to get started.',
|
||
})
|
||
)
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
null,
|
||
React.createElement(
|
||
'button',
|
||
{
|
||
style: {
|
||
background: '#fefaf8',
|
||
border: '1px solid #f1cbca',
|
||
boxSizing: 'border-box',
|
||
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)',
|
||
borderRadius: 3,
|
||
lineHeight: 'normal',
|
||
fontSize: 14,
|
||
fontWeight: 600,
|
||
letterSpacing: '-0.03em',
|
||
color: '#d8615c',
|
||
paddingLeft: 12,
|
||
paddingRight: 12,
|
||
height: 36,
|
||
},
|
||
onClick: this.handleReload,
|
||
},
|
||
React.createElement(notion_intl.FormattedMessage, {
|
||
id:
|
||
'desktopLogin.offline.retryConnectingToInternetButton.label',
|
||
defaultMessage: 'Try again',
|
||
})
|
||
)
|
||
)
|
||
);
|
||
}
|
||
render() {
|
||
const notionLocale = localizationHelper.getNotionLocaleFromElectronLocale(
|
||
window.navigator.language
|
||
),
|
||
result = React.createElement(
|
||
notion_intl.IntlProvider,
|
||
{
|
||
locale: notionLocale,
|
||
messages:
|
||
notionLocale === 'ko-KR'
|
||
? koMessages
|
||
: {
|
||
'desktopLogin.offline.title':
|
||
'Welcome to <strong>Notion</strong>!',
|
||
'desktopLogin.offline.message':
|
||
'Connect to the internet to get started.',
|
||
'desktopLogin.offline.retryConnectingToInternetButton.label':
|
||
'Try again',
|
||
},
|
||
},
|
||
this.renderTitlebar(),
|
||
this.renderNotionContainer(),
|
||
this.renderSearchContainer(),
|
||
this.renderErrorContainer()
|
||
);
|
||
document.body.classList[this.state.error ? 'add' : 'remove']('error');
|
||
this.loadListeners();
|
||
return result;
|
||
}
|
||
}
|
||
|
||
window['__start'] = () => {
|
||
document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
|
||
|
||
const parsed = url.parse(window.location.href, true),
|
||
notionUrl =
|
||
parsed.query.path ||
|
||
schemeHelpers.getSchemeUrl({
|
||
httpUrl: config.default.baseURL,
|
||
protocol: config.default.protocol,
|
||
});
|
||
delete parsed.search;
|
||
delete parsed.query;
|
||
const plainUrl = url.format(parsed);
|
||
window.history.replaceState(undefined, undefined, plainUrl);
|
||
|
||
document.title = localizationHelper
|
||
.createIntlShape(
|
||
localizationHelper.getNotionLocaleFromElectronLocale(
|
||
window.navigator.language
|
||
)
|
||
)
|
||
.formatMessage(
|
||
notion_intl.defineMessages({
|
||
documentTitle: {
|
||
id: 'desktop.documentTitle',
|
||
defaultMessage: 'Notion Desktop',
|
||
},
|
||
}).documentTitle
|
||
);
|
||
const $root = document.getElementById('root');
|
||
ReactDOM.render(
|
||
React.createElement(Index, { notionUrl: notionUrl }),
|
||
$root
|
||
);
|
||
};
|
||
} else {
|
||
const __start = window['__start'];
|
||
window['__start'] = () => {
|
||
__start();
|
||
const dragarea = document.querySelector(
|
||
'#root [style*="-webkit-app-region: drag"]'
|
||
),
|
||
default_styles = dragarea.getAttribute('style');
|
||
if (store().tiling_mode) {
|
||
dragarea.style.display = 'none';
|
||
} else {
|
||
document
|
||
.getElementById('notion')
|
||
.addEventListener('ipc-message', (event) => {
|
||
if (event.channel !== 'enhancer:sidebar-width') return;
|
||
dragarea.setAttribute(
|
||
'style',
|
||
`${default_styles} top: 2px; height: ${
|
||
store().dragarea_height
|
||
}px; left: ${event.args[0]};`
|
||
);
|
||
});
|
||
|
||
document.getElementById('notion').addEventListener('dom-ready', () => {
|
||
document
|
||
.getElementById('notion')
|
||
.getWebContents()
|
||
.executeJavaScript(insertCSP);
|
||
});
|
||
}
|
||
};
|
||
}
|
||
};
|