merge changes from develop branch

This commit is contained in:
ammarahm-ed
2021-12-02 21:28:34 +05:00
parent e313a8afcd
commit e28d953ae6
7 changed files with 114 additions and 255 deletions

View File

@@ -112,7 +112,6 @@ const App = () => {
useEffect(() => {
databaseHasLoaded = false;
useMessageStore.getState().setAnnouncement();
(async () => {
try {
await SettingsService.init();

View File

@@ -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;
}

View File

@@ -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);

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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);
}
});
}

View File

@@ -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>&nbsp;</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;