mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-15 09:04:04 +02:00
cb8dca747b
Refactor note editor using React Hooks and TypeScript and moved editor-specific code to separate files. Moved business logic into more maintainable custom hooks. Squashed commit of the following: commit f243d9bf89bdcfa1849ee26df5c0dd3e33405010 Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 16:04:14 2020 +0100 Fixed saving issue commit 055f68d2e8b6cf6f130336c38ac2ab480887583d Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 15:43:38 2020 +0100 Fixed HTML notes commit 99a3cf71f58d2fedcdf3001bf4110b6e8e3993da Merge: 9be85c45f2b16ebbbf7a
Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 12:54:42 2020 +0100 Merge branch 'master' into refactor_note_text commit 9be85c45f23e5cb1ecd612b0ee631947871ada6f Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 12:21:01 2020 +0100 Ident to space commit 848dde1869c010fe5851f493ef7287ada5f2991e Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 11:28:50 2020 +0100 Refactor prop types commit 13c3bbe2b4f9a522ea3f8a25e7e5e7bb026dfd4f Author: Laurent Cozic <laurent@cozic.net> Date: Sat May 2 11:15:45 2020 +0100 Fixed resource loading issue commit 50cb38e3f00ef40ea8b6a468eadd66728a3ec332 Author: Laurent Cozic <laurent@cozic.net> Date: Fri May 1 23:46:58 2020 +0100 Fixed resource loading logic commit bc42ed03735f50c8394d597bb9e67312e55752fe Author: Laurent Cozic <laurent@cozic.net> Date: Fri May 1 23:08:41 2020 +0100 Various fixes commit 03c038e6d6cbde03bd474798b96c4eb120fd1647 Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 29 23:22:49 2020 +0100 Fixed resource handling commit dc6c15302fac094c4e7dec5a20c9fcc4edb3d132 Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 29 22:55:13 2020 +0100 Moved more code to files commit 398d5121e53df34de89b4148ef2cfd3a7bbe4feb Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 29 00:22:43 2020 +0000 More fixes commit 3ebbb80147d7d502fd955776c7fedb743400597f Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 29 00:12:44 2020 +0000 Various improvements and bug fixes commit 52a65ed3875e0709117ca93ba723e20624577d05 Author: Laurent Cozic <laurent@cozic.net> Date: Tue Apr 28 23:51:07 2020 +0000 Move more code to sub-files commit 33ccf530fb442d7ddae0852cbab2c335efdbbf33 Author: Laurent Cozic <laurent@cozic.net> Date: Tue Apr 28 23:25:12 2020 +0100 Moved code to sub-files commit ba3ad2cf9fcc1d7809df4afe93cd9737585a9960 Merge: 445acdab73150ee14de6
Author: Laurent Cozic <laurent@cozic.net> Date: Tue Apr 28 22:28:56 2020 +0100 Merge branch 'master' into refactor_note_text commit 445acdab7368345369d7f69b9becd1e77c8383dc Author: Laurent Cozic <laurent@cozic.net> Date: Tue Apr 28 19:01:41 2020 +0100 Imported more code commit 772481d3a3ac7f0b0b00e86394c0f4fd2f3a9fa7 Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 27 23:43:17 2020 +0000 Handle save/load state commit b3b92192ae3a1a30e3018810346cebfad47ac5e3 Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 27 23:11:11 2020 +0000 Clean up and added back scroll commit 7a19ecfd0cb7fef1d58ece2e024099c7e40986da Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 27 22:29:39 2020 +0100 More refactoring commit ac388afd381eaecfa4582b3566d032c9d953c4dc Author: Laurent Cozic <laurent@cozic.net> Date: Sun Apr 26 17:07:01 2020 +0100 Restored print commit 1d2c0ed389a5398dacc584d24922c5ea0dda861a Author: Laurent Cozic <laurent@cozic.net> Date: Sun Apr 26 12:03:15 2020 +0100 Put back search commit c618cb59d43fa3bb507dbd0b757b302ecfe907b3 Author: Laurent Cozic <laurent@cozic.net> Date: Sat Apr 25 18:21:11 2020 +0100 Restore scrolling behaviour commit 324e6ea79ebafab1d2bca246ef030751147a47eb Author: Laurent Cozic <laurent@cozic.net> Date: Sat Apr 25 10:22:31 2020 +0100 Simplified saving notes commit ef089aaf2289193bf275d94c1f2785f6d88657e4 Author: Laurent Cozic <laurent@cozic.net> Date: Sat Apr 25 10:12:16 2020 +0100 More refactoring commit 61b102307d5a98d2c1502d7bf073592da21af720 Author: Laurent Cozic <laurent@cozic.net> Date: Fri Apr 24 18:04:44 2020 +0100 Added back note revisions commit 7d5e3694d0df044b8493d9114e89e2d81c9b69ad Author: Laurent Cozic <laurent@cozic.net> Date: Thu Apr 23 22:51:52 2020 +0000 More note toolbar refactoring commit a56d58e7c80d91f29afadaffaaa004f3254482f7 Author: Laurent Cozic <laurent@cozic.net> Date: Thu Apr 23 20:54:37 2020 +0100 Finished toolbar refactoring commit 6c8ef9f44f880a9569eed5c54c9c47dca2251e5e Author: Laurent Cozic <laurent@cozic.net> Date: Thu Apr 23 19:17:44 2020 +0100 More refactoring commit 7de8057158a9256e2e0dcf948081e10a6a642216 Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 22 23:48:42 2020 +0100 Started refactoring commands commit 177263c85e7d17d8ddc01b583738c2ab14b3acd7 Merge: f58f1a06e07ceb68d835
Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 22 20:26:19 2020 +0100 Merge branch 'master' into refactor_note_text commit f58f1a06e08b3cf80e2ac7a794b15f4b5caf8932 Author: Laurent Cozic <laurent@cozic.net> Date: Wed Apr 22 20:25:43 2020 +0100 Moving Ace Editor to separate component commit a83d3a220515137985c0f334f5848c91b8539138 Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 20 20:33:21 2020 +0000 Cleaned up directory structure for note editor commit c6f2e609c9443bac21de5033bbedf86ac6f12cc0 Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 20 19:23:06 2020 +0100 Added "note" menu to move note-related items to it commit 1219465318ae5a7a2c777ae2ec15d3357e1499df Author: Laurent Cozic <laurent@cozic.net> Date: Mon Apr 20 19:05:04 2020 +0100 Moved note related toolbar to separate component
343 lines
7.9 KiB
JavaScript
343 lines
7.9 KiB
JavaScript
const Setting = require('lib/models/Setting.js');
|
|
const Color = require('color');
|
|
|
|
const themes = {
|
|
[Setting.THEME_LIGHT]: require('./gui/style/theme/light'),
|
|
[Setting.THEME_DARK]: require('./gui/style/theme/dark'),
|
|
[Setting.THEME_DRACULA]: require('./gui/style/theme/dracula'),
|
|
[Setting.THEME_SOLARIZED_LIGHT]: require('./gui/style/theme/solarizedLight'),
|
|
[Setting.THEME_SOLARIZED_DARK]: require('./gui/style/theme/solarizedDark'),
|
|
[Setting.THEME_NORD]: require('./gui/style/theme/nord'),
|
|
[Setting.THEME_ARITIM_DARK]: require('./gui/style/theme/aritimDark'),
|
|
};
|
|
|
|
// globalStyle should be used for properties that do not change across themes
|
|
// i.e. should not be used for colors
|
|
const globalStyle = {
|
|
fontSize: 12,
|
|
fontFamily: 'sans-serif',
|
|
margin: 15, // No text and no interactive component should be within this margin
|
|
itemMarginTop: 10,
|
|
itemMarginBottom: 10,
|
|
fontSizeSmaller: 14,
|
|
disabledOpacity: 0.3,
|
|
buttonMinWidth: 50,
|
|
buttonMinHeight: 30,
|
|
editorFontSize: 12,
|
|
textAreaLineHeight: 17,
|
|
|
|
headerHeight: 35,
|
|
headerButtonHPadding: 6,
|
|
|
|
toolbarHeight: 35,
|
|
};
|
|
|
|
globalStyle.marginRight = globalStyle.margin;
|
|
globalStyle.marginLeft = globalStyle.margin;
|
|
globalStyle.marginTop = globalStyle.margin;
|
|
globalStyle.marginBottom = globalStyle.margin;
|
|
globalStyle.htmlMarginLeft = `${((globalStyle.marginLeft / 10) * 0.6).toFixed(2)}em`;
|
|
|
|
globalStyle.icon = {
|
|
fontSize: 30,
|
|
};
|
|
|
|
globalStyle.lineInput = {
|
|
fontFamily: globalStyle.fontFamily,
|
|
maxHeight: 22,
|
|
height: 22,
|
|
paddingLeft: 5,
|
|
};
|
|
|
|
globalStyle.headerStyle = {
|
|
fontFamily: globalStyle.fontFamily,
|
|
};
|
|
|
|
globalStyle.inputStyle = {
|
|
border: '1px solid',
|
|
height: 24,
|
|
maxHeight: 24,
|
|
paddingLeft: 5,
|
|
paddingRight: 5,
|
|
boxSizing: 'border-box',
|
|
};
|
|
|
|
globalStyle.containerStyle = {
|
|
overflow: 'auto',
|
|
overflowY: 'auto',
|
|
};
|
|
|
|
globalStyle.buttonStyle = {
|
|
// marginRight: 10,
|
|
border: '1px solid',
|
|
minHeight: 26,
|
|
minWidth: 80,
|
|
// maxWidth: 220,
|
|
paddingLeft: 12,
|
|
paddingRight: 12,
|
|
paddingTop: 6,
|
|
paddingBottom: 6,
|
|
boxShadow: '0px 1px 1px rgba(0,0,0,0.3)',
|
|
fontSize: globalStyle.fontSize,
|
|
borderRadius: 4,
|
|
};
|
|
|
|
function addExtraStyles(style) {
|
|
style.selectedDividerColor = Color(style.dividerColor).darken(0.2).hex();
|
|
|
|
style.tagStyle = {
|
|
fontSize: style.fontSize,
|
|
fontFamily: style.fontFamily,
|
|
paddingTop: 3,
|
|
paddingBottom: 3,
|
|
paddingRight: 8,
|
|
paddingLeft: 8,
|
|
backgroundColor: style.raisedBackgroundColor,
|
|
color: style.raisedColor,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: 5,
|
|
};
|
|
|
|
style.toolbarStyle = {
|
|
height: style.toolbarHeight,
|
|
// minWidth: style.toolbarHeight,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
paddingLeft: style.headerButtonHPadding,
|
|
paddingRight: style.headerButtonHPadding,
|
|
textDecoration: 'none',
|
|
fontFamily: style.fontFamily,
|
|
fontSize: style.fontSize,
|
|
boxSizing: 'border-box',
|
|
cursor: 'default',
|
|
justifyContent: 'center',
|
|
color: style.color,
|
|
whiteSpace: 'nowrap',
|
|
};
|
|
|
|
style.textStyle = {
|
|
fontFamily: globalStyle.fontFamily,
|
|
fontSize: style.fontSize,
|
|
lineHeight: '1.6em',
|
|
color: style.color,
|
|
};
|
|
|
|
style.textStyle2 = Object.assign({}, style.textStyle,
|
|
{ color: style.color2 }
|
|
);
|
|
|
|
style.textStyleMinor = Object.assign({}, style.textStyle,
|
|
{
|
|
color: style.colorFaded,
|
|
fontSize: style.fontSize * 0.8,
|
|
},
|
|
);
|
|
|
|
style.urlStyle = Object.assign({}, style.textStyle,
|
|
{
|
|
textDecoration: 'underline',
|
|
color: style.urlColor,
|
|
}
|
|
);
|
|
|
|
style.h1Style = Object.assign({},
|
|
style.textStyle,
|
|
{
|
|
color: style.color,
|
|
fontSize: style.textStyle.fontSize * 1.5,
|
|
fontWeight: 'bold',
|
|
}
|
|
);
|
|
|
|
style.h2Style = Object.assign({},
|
|
style.textStyle,
|
|
{
|
|
color: style.color,
|
|
fontSize: style.textStyle.fontSize * 1.3,
|
|
fontWeight: 'bold',
|
|
}
|
|
);
|
|
|
|
style.dialogModalLayer = {
|
|
zIndex: 9999,
|
|
display: 'flex',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
style.controlBox = {
|
|
marginBottom: '1em',
|
|
color: 'black', // This will apply for the calendar
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
style.controlBoxLabel = {
|
|
marginRight: '1em',
|
|
width: '10em',
|
|
display: 'inline-block',
|
|
fontWeight: 'bold',
|
|
};
|
|
|
|
style.controlBoxValue = {
|
|
display: 'inline-block',
|
|
};
|
|
|
|
style.dialogBox = {
|
|
backgroundColor: style.backgroundColor,
|
|
padding: 16,
|
|
boxShadow: '6px 6px 20px rgba(0,0,0,0.5)',
|
|
marginTop: 20,
|
|
maxHeight: '80%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'auto',
|
|
};
|
|
|
|
style.buttonIconStyle = {
|
|
color: style.color,
|
|
marginRight: 6,
|
|
};
|
|
|
|
style.notificationBox = {
|
|
backgroundColor: style.warningBackgroundColor,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: 10,
|
|
fontSize: style.fontSize,
|
|
};
|
|
|
|
style.dialogTitle = Object.assign({}, style.h1Style, { marginBottom: '1.2em' });
|
|
|
|
style.dropdownList = Object.assign({}, style.inputStyle);
|
|
|
|
style.colorHover = style.color;
|
|
style.backgroundHover = `${style.selectedColor2}44`;
|
|
|
|
// In general the highlighted color, used to highlight text or icons, should be the same as selectedColor2
|
|
// but some times, depending on the theme, it might be too dark or too light, so it can be
|
|
// specified directly by the theme too.
|
|
if (!style.highlightedColor) style.highlightedColor = style.selectedColor2;
|
|
|
|
return style;
|
|
}
|
|
|
|
const themeCache_ = {};
|
|
|
|
function themeStyle(theme) {
|
|
if (!theme) throw new Error('Theme must be specified');
|
|
|
|
const zoomRatio = 1; // Setting.value('style.zoom') / 100;
|
|
const editorFontSize = Setting.value('style.editor.fontSize');
|
|
|
|
const cacheKey = [theme, zoomRatio, editorFontSize].join('-');
|
|
if (themeCache_[cacheKey]) return themeCache_[cacheKey];
|
|
|
|
// Font size are not theme specific, but they must be referenced
|
|
// and computed here to allow them to respond to settings changes
|
|
// without the need to restart
|
|
const fontSizes = {
|
|
fontSize: Math.round(globalStyle.fontSize * zoomRatio),
|
|
editorFontSize: editorFontSize,
|
|
textAreaLineHeight: Math.round(globalStyle.textAreaLineHeight * editorFontSize / 12),
|
|
|
|
// For WebView - must correspond to the properties above
|
|
htmlFontSize: `${Math.round(15 * zoomRatio)}px`,
|
|
htmlLineHeight: '1.6em', // Math.round(20 * zoomRatio) + 'px'
|
|
|
|
htmlCodeFontSize: '.9em',
|
|
};
|
|
|
|
let output = {};
|
|
output.zoomRatio = zoomRatio;
|
|
output.editorFontSize = editorFontSize;
|
|
|
|
// All theme are based on the light style, and just override the
|
|
// relevant properties
|
|
output = Object.assign({}, globalStyle, fontSizes, themes[Setting.THEME_LIGHT], themes[theme]);
|
|
|
|
// Note: All the theme specific things should go in addExtraStyles
|
|
// so that their definition is not split between here and the
|
|
// beginning of the file. At least new styles should go in
|
|
// addExtraStyles.
|
|
|
|
output.icon = Object.assign({},
|
|
output.icon,
|
|
{ color: output.color }
|
|
);
|
|
|
|
output.lineInput = Object.assign({},
|
|
output.lineInput,
|
|
{
|
|
color: output.color,
|
|
backgroundColor: output.backgroundColor,
|
|
}
|
|
);
|
|
|
|
output.headerStyle = Object.assign({},
|
|
output.headerStyle,
|
|
{
|
|
color: output.color,
|
|
backgroundColor: output.backgroundColor,
|
|
}
|
|
);
|
|
|
|
output.inputStyle = Object.assign({},
|
|
output.inputStyle,
|
|
{
|
|
color: output.color,
|
|
backgroundColor: output.backgroundColor,
|
|
borderColor: output.dividerColor,
|
|
}
|
|
);
|
|
|
|
output.containerStyle = Object.assign({},
|
|
output.containerStyle,
|
|
{
|
|
color: output.color,
|
|
backgroundColor: output.backgroundColor,
|
|
}
|
|
);
|
|
|
|
output.buttonStyle = Object.assign({},
|
|
output.buttonStyle,
|
|
{
|
|
color: output.color,
|
|
backgroundColor: output.backgroundColor,
|
|
borderColor: output.dividerColor,
|
|
userSelect: 'none',
|
|
}
|
|
);
|
|
|
|
output = addExtraStyles(output);
|
|
|
|
themeCache_[cacheKey] = output;
|
|
return themeCache_[cacheKey];
|
|
}
|
|
|
|
const cachedStyles_ = {};
|
|
|
|
function buildStyle(cacheKey, themeId, callback) {
|
|
if (cachedStyles_[cacheKey]) cachedStyles_[cacheKey].style;
|
|
|
|
const s = callback(themeStyle(themeId));
|
|
|
|
cachedStyles_[cacheKey] = {
|
|
style: s,
|
|
timestamp: Date.now(),
|
|
};
|
|
|
|
return cachedStyles_[cacheKey].style;
|
|
}
|
|
|
|
module.exports = { themeStyle, buildStyle };
|