mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-29 00:20:04 +01:00
merge changes from develop branch
This commit is contained in:
@@ -112,7 +112,6 @@ const App = () => {
|
||||
|
||||
useEffect(() => {
|
||||
databaseHasLoaded = false;
|
||||
useMessageStore.getState().setAnnouncement();
|
||||
(async () => {
|
||||
try {
|
||||
await SettingsService.init();
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
body {
|
||||
margin: 0px !important;
|
||||
font-family:"Open Sans";
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.app-main {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#formBox textarea {
|
||||
font-family: "Open Sans";
|
||||
#formBox input {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: 600 !important;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 32px;
|
||||
font-size: 25px;
|
||||
height: 45x;
|
||||
}
|
||||
|
||||
#formBox {
|
||||
@@ -27,47 +28,30 @@ body {
|
||||
background-color: transparent;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
min-height: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#formBox > div,
|
||||
#formBox > textarea {
|
||||
#formBox > input {
|
||||
word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#formBox > textarea {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#textCopy {
|
||||
font-family: "Open Sans";
|
||||
visibility: hidden;
|
||||
font-weight: 600 !important;
|
||||
font-size: 32px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#formBox > div {
|
||||
min-height: 45px;
|
||||
#titlebar input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
font-family: "Open Sans";
|
||||
font-family: 'Open Sans';
|
||||
color: gray;
|
||||
font-size: 11px;
|
||||
height: 15px;
|
||||
font-size: 11.5px;
|
||||
height: 13px;
|
||||
display: flex;
|
||||
padding-left: 4px !important;
|
||||
justify-content: space-between;
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.info-bar a {
|
||||
@@ -75,29 +59,16 @@ body {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#titlebar textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
#infowords {
|
||||
font-family: "Open Sans";
|
||||
#infowords,#infodate,#infosaved {
|
||||
font-family: 'Open Sans';
|
||||
margin-right: 5px;
|
||||
margin-left: 0px;
|
||||
border-radius: 5;
|
||||
border-radius: 5px;
|
||||
margin-top: 0;
|
||||
height:16px;
|
||||
padding-top:2.5px;
|
||||
}
|
||||
|
||||
#infodate {
|
||||
font-family: "Open Sans";
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
margin-top: 0;
|
||||
border-radius: 5;
|
||||
}
|
||||
|
||||
#infosaved {
|
||||
font-family: "Open Sans";
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 5;
|
||||
margin-top: 0;
|
||||
.visible {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
@@ -126,13 +126,9 @@ function setTheme() {
|
||||
let node = `
|
||||
#titleInput {
|
||||
color:${pageTheme.colors.heading};
|
||||
font-size:${32 * pageTheme.colors.factor};
|
||||
font-size:${25 * pageTheme.colors.factor};
|
||||
}
|
||||
|
||||
#textCopy {
|
||||
color:${pageTheme.colors.pri};
|
||||
font-size:${32 * pageTheme.colors.factor};
|
||||
}
|
||||
#titleInput::-webkit-input-placeholder {
|
||||
color:${pageTheme.colors.icon}
|
||||
}
|
||||
@@ -140,6 +136,7 @@ function setTheme() {
|
||||
.info-bar {
|
||||
color:${pageTheme.colors.icon};
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
display:flex !important;
|
||||
}
|
||||
@@ -368,9 +365,8 @@ code {
|
||||
|
||||
`;
|
||||
|
||||
let editorHead = tinymce.activeEditor.contentDocument.getElementsByTagName(
|
||||
'head'
|
||||
)[0];
|
||||
let editorHead =
|
||||
tinymce.activeEditor.contentDocument.getElementsByTagName('head')[0];
|
||||
let css2 = document.createElement('style');
|
||||
css2.appendChild(document.createTextNode(node2));
|
||||
editorHead.appendChild(css2);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
body {
|
||||
margin:0px !important;
|
||||
overflow: visible;
|
||||
font-family:"Open Sans";
|
||||
margin: 0px !important;
|
||||
font-family: 'Open Sans';
|
||||
}
|
||||
|
||||
.app-main {
|
||||
@@ -74,34 +73,6 @@ body {
|
||||
padding-top: 2.5px;
|
||||
}
|
||||
|
||||
.info-bar a {
|
||||
text-decoration: none;
|
||||
color: gray
|
||||
}
|
||||
|
||||
#titlebar textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
#infowords {
|
||||
font-family: "Open Sans";
|
||||
margin-right: 5px;
|
||||
margin-left: 0px;
|
||||
border-radius: 5;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#infodate {
|
||||
font-family: "Open Sans";
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
margin-top: 0;
|
||||
border-radius: 5;
|
||||
}
|
||||
|
||||
#infosaved {
|
||||
font-family: "Open Sans";
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 5;
|
||||
margin-top: 0;
|
||||
}
|
||||
.visible {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
@@ -14,15 +14,15 @@
|
||||
<input id="image-input" accept='image/png, image/gif, image/jpeg, image/bmp, image/x-icon' type="file"
|
||||
name="name" style="display: none;" />
|
||||
<div id="titlebar">
|
||||
<form id="formBox">
|
||||
<textarea maxlength="150" id="titleInput" placeholder="Note title"></textarea>
|
||||
<div id="textCopy"></div>
|
||||
</form>
|
||||
<div id="formBox">
|
||||
<input maxlength="150" id="titleInput"
|
||||
placeholder="Note title"></input>
|
||||
</div>
|
||||
<div class="info-bar">
|
||||
<div style="display:flex;">
|
||||
<p id="infowords"></p>
|
||||
<p id="infodate"></p>
|
||||
<p id="infosaved"></p>
|
||||
<p style="display:none" id="infodate"></p>
|
||||
<p style="display:none" id="infosaved"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -380,9 +380,7 @@ function init_tiny(size) {
|
||||
});
|
||||
|
||||
editor.on('init', function (e) {
|
||||
setTimeout(function () {
|
||||
reactNativeEventHandler('status', true);
|
||||
}, 300);
|
||||
reactNativeEventHandler('status', true);
|
||||
});
|
||||
|
||||
editor.ui.registry.addButton('deletevideo', {
|
||||
@@ -465,106 +463,6 @@ function init_tiny(size) {
|
||||
},
|
||||
onclick: function () {}
|
||||
});
|
||||
},
|
||||
init_instance_callback: function (_editor) {
|
||||
editor = _editor;
|
||||
setTheme();
|
||||
|
||||
editor.on('SelectionChange', function (e) {
|
||||
selectchange();
|
||||
});
|
||||
|
||||
editor.on('ClearUndos', onUndoChange);
|
||||
editor.on('Undo', onUndoChange);
|
||||
editor.on('Redo', onUndoChange);
|
||||
editor.on('TypingUndos', onUndoChange);
|
||||
editor.on('BeforeAddUndo', onUndoChange);
|
||||
editor.on('AddUndo', onUndoChange);
|
||||
editor.on('cut', function () {
|
||||
onChange({type: 'cut'});
|
||||
onUndoChange();
|
||||
});
|
||||
editor.on('copy', onUndoChange);
|
||||
editor.on('paste', function () {
|
||||
onChange({type: 'paste'});
|
||||
});
|
||||
|
||||
editor.on('tap', e => {
|
||||
if (e.target.classList.contains('mce-content-body')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('focus', function () {
|
||||
reactNativeEventHandler('focus', 'editor');
|
||||
});
|
||||
|
||||
editor.on('SetContent', function (event) {
|
||||
if (globalThis.isClearingNoteData) {
|
||||
globalThis.isClearingNoteData = false;
|
||||
return;
|
||||
}
|
||||
setTimeout(function() {
|
||||
editor.undoManager.transact(function () {});
|
||||
},1000);
|
||||
if (!event.paste) {
|
||||
reactNativeEventHandler('noteLoaded', true);
|
||||
}
|
||||
if (event.paste) {
|
||||
isLoading = false;
|
||||
onChange(event);
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('NewBlock', function (e) {
|
||||
console.log('New Block');
|
||||
const {newBlock} = e;
|
||||
let target;
|
||||
if (newBlock) {
|
||||
target = newBlock.previousElementSibling;
|
||||
}
|
||||
if (target && target.classList.contains(COLLAPSED_KEY)) {
|
||||
target.classList.remove(COLLAPSED_KEY);
|
||||
collapseElement(target);
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('touchstart mousedown', function (e) {
|
||||
const {target} = e;
|
||||
if (
|
||||
e.offsetX < 6 &&
|
||||
collapsibleTags[target.tagName] &&
|
||||
target.parentElement &&
|
||||
target.parentElement.tagName === 'BODY'
|
||||
) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
editor.undoManager.transact(function () {
|
||||
if (target.classList.contains(COLLAPSED_KEY)) {
|
||||
target.classList.remove(COLLAPSED_KEY);
|
||||
} else {
|
||||
target.classList.add(COLLAPSED_KEY);
|
||||
}
|
||||
collapseElement(target);
|
||||
editor.getHTML().then(function (html) {
|
||||
reactNativeEventHandler('tiny', html);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editor.on('ScrollIntoView', function (e) {
|
||||
e.preventDefault();
|
||||
e.elm.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest'
|
||||
});
|
||||
});
|
||||
editor.on('input', onChange);
|
||||
editor.on('keyup', onChange);
|
||||
editor.on('NodeChange', onChange);
|
||||
editor.on('compositionend', onChange);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2,38 +2,31 @@ let titleInput = document.getElementById('titleInput');
|
||||
let infoBar = '.info-bar';
|
||||
let info = null;
|
||||
let scrollTimer = null;
|
||||
|
||||
function onDomContentLoaded() {
|
||||
document.body.onscroll = function (event) {
|
||||
if (scrollTimer) {
|
||||
clearTimeout(scrollTimer);
|
||||
scrollTimer = null;
|
||||
}
|
||||
updateInfoBar();
|
||||
scrollTimer = setTimeout(function () {
|
||||
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
visible: event.target.documentElement.scrollTop,
|
||||
title: document.getElementById('titleInput').value,
|
||||
type: 'scroll'
|
||||
})
|
||||
|
||||
);
|
||||
}, 100);
|
||||
};
|
||||
}
|
||||
|
||||
function attachTitleInputListeners() {
|
||||
infoBar = '.info-bar';
|
||||
document.addEventListener(
|
||||
'DOMContentLoaded',
|
||||
function () {
|
||||
autosize();
|
||||
document.body.onscroll = function (event) {
|
||||
if (scrollTimer) {
|
||||
clearTimeout(scrollTimer);
|
||||
scrollTimer = null;
|
||||
}
|
||||
scrollTimer = setTimeout(function () {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
visible: event.target.documentElement.scrollTop,
|
||||
title: document.getElementById('titleInput').value,
|
||||
type: 'scroll'
|
||||
})
|
||||
);
|
||||
}, 100);
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
document.getElementById('formBox').onsubmit = function (evt) {
|
||||
evt.preventDefault();
|
||||
if (tinymce.activeEditor) {
|
||||
tinymce.activeEditor && tinymce.activeEditor.focus();
|
||||
}
|
||||
onTitleChange();
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', onDomContentLoaded, false);
|
||||
|
||||
document.getElementById('titleInput').onkeypress = function (evt) {
|
||||
if (evt.keyCode === 13 || evt.which === 13) {
|
||||
@@ -49,7 +42,6 @@ function attachTitleInputListeners() {
|
||||
document
|
||||
.getElementById('titleInput')
|
||||
.addEventListener('focus', function (evt) {
|
||||
autosize();
|
||||
if (window.ReactNativeWebView) {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
@@ -69,10 +61,10 @@ function attachTitleInputListeners() {
|
||||
onTitleChange();
|
||||
};
|
||||
}
|
||||
|
||||
let titleTimeout = 0;
|
||||
function onTitleChange() {
|
||||
setTimeout(() => {
|
||||
autosize();
|
||||
clearTimeout(titleTimeout);
|
||||
titleTimeout = setTimeout(() => {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
@@ -84,7 +76,8 @@ function onTitleChange() {
|
||||
info = document.querySelector(infoBar);
|
||||
if (tinymce.activeEditor) {
|
||||
info.querySelector('#infowords').innerText =
|
||||
editor.countWords() + ' words';
|
||||
editor.countWords() + ' words';
|
||||
updateInfoBar()
|
||||
}
|
||||
|
||||
if (titleMessage && typeof titleMessage.value === 'string') {
|
||||
@@ -92,24 +85,51 @@ function onTitleChange() {
|
||||
window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage));
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function autosize() {
|
||||
let ele = document.getElementById('textCopy');
|
||||
ele.innerHTML = document
|
||||
.getElementById('titleInput')
|
||||
.value.replace(/\n/g, '<br/>');
|
||||
let newHeight = document.getElementById('titlebar').scrollHeight;
|
||||
let css = document.createElement('style');
|
||||
css.type = 'text/css';
|
||||
let node = `
|
||||
.tox-tinymce {
|
||||
min-height:calc(100vh - ${newHeight}px) !important;
|
||||
};
|
||||
`;
|
||||
css.appendChild(document.createTextNode(node));
|
||||
document.getElementsByTagName('head')[0].appendChild(css);
|
||||
// let ele = document.getElementById('textCopy');
|
||||
// ele.innerHTML = document
|
||||
// .getElementById('titleInput')
|
||||
// .value.replace(/\n/g, '<br/>');
|
||||
// let newHeight = document.getElementById('titlebar').scrollHeight;
|
||||
// let css = document.createElement('style');
|
||||
// css.type = 'text/css';
|
||||
// let node = `
|
||||
// .tox-tinymce {
|
||||
// min-height:calc(100vh - ${newHeight}px) !important;
|
||||
// };
|
||||
// `;
|
||||
// css.appendChild(document.createTextNode(node));
|
||||
// document.getElementsByTagName('head')[0].appendChild(css);
|
||||
}
|
||||
|
||||
function isInvalidValue(value) {
|
||||
return (
|
||||
value === '' ||
|
||||
value === '<p></p>' ||
|
||||
value === '<p><br></p>' ||
|
||||
value === '<p> </p>'
|
||||
);
|
||||
}
|
||||
|
||||
function updateInfoBar() {
|
||||
let ids = ['infodate', 'infosaved'];
|
||||
ids.forEach(id => {
|
||||
let element = document.getElementById(id);
|
||||
if (!element) return;
|
||||
if (element.textContent && element.textContent !== '') {
|
||||
if (!element.classList.contains("visible")) {
|
||||
element.classList.add('visible');
|
||||
}
|
||||
} else {
|
||||
if (element.classList.contains("visible")) {
|
||||
element.classList.remove('visible');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function attachMessageListener() {
|
||||
@@ -118,6 +138,7 @@ function attachMessageListener() {
|
||||
if (isSafari) {
|
||||
listenerHandler = window;
|
||||
}
|
||||
|
||||
listenerHandler.addEventListener('message', function (data) {
|
||||
let message = JSON.parse(data.data);
|
||||
let type = message.type;
|
||||
@@ -131,7 +152,12 @@ function attachMessageListener() {
|
||||
isLoading = true;
|
||||
globalThis.isClearingNoteData = false;
|
||||
tinymce.activeEditor.mode.set('readonly');
|
||||
tinymce.activeEditor.setContent(value);
|
||||
if (isInvalidValue(value)) {
|
||||
tinymce.activeEditor.setContent('');
|
||||
} else {
|
||||
tinymce.activeEditor.setContent(value);
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
document.activeElement.blur();
|
||||
window.blur();
|
||||
@@ -141,7 +167,8 @@ function attachMessageListener() {
|
||||
}, 300);
|
||||
info = document.querySelector(infoBar);
|
||||
info.querySelector('#infowords').innerText =
|
||||
editor.countWords() + ' words';
|
||||
editor.countWords() + ' words';
|
||||
updateInfoBar()
|
||||
break;
|
||||
case 'htmldiff':
|
||||
document.getElementsByClassName('htmldiff_div')[0].innerHTML = value;
|
||||
@@ -155,9 +182,6 @@ function attachMessageListener() {
|
||||
break;
|
||||
case 'title':
|
||||
document.getElementById('titleInput').value = value;
|
||||
setTimeout(function () {
|
||||
autosize();
|
||||
}, 100);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user