Exporting sheet into .nlx file

Author: Qulierm

src/icons/export.svg

@@ -222,14 +222,39 @@ body::-webkit-scrollbar, #input::-webkit-scrollbar, #code::-webkit-scrollbar, .s
     overflow: hidden;
     background-color: rgba(0, 0, 0, 0.4);
 }
-
+.cont{
+    display: flex
+}
 .settings-button{
+    margin-right: 5px;
     background-image: url('./icons/settings.svg');
     background-size: 25px;
     background-repeat: no-repeat;
     border: none;
     color: #b0b0b0;
-    padding: 10px;
+    width: 25px;
+    height: 45px;
+    cursor: pointer;
+}
+.export{
+    margin-right: 5px;
+    background-image: url('./icons/export.svg');
+    background-size: 25px;
+    background-repeat: no-repeat;
+    border: none;
+    color: #b0b0b0;
+    width: 25px;
+    height: 45px;
+    cursor: pointer;
+}
+
+.import{
+    margin-right: 5px;
+    background-image: url('./icons/import.svg');
+    background-size: 25px;
+    background-repeat: no-repeat;
+    border: none;
+    color: #b0b0b0;
     width: 25px;
     height: 45px;
     cursor: pointer;
@@ -345,6 +370,7 @@ select{
     height: 100% !important;
     flex-grow: 1 !important;
     margin-top: 0 !important;
+    width: 350px;
     }
 
 
@@ -374,8 +400,11 @@ select{
     }
 
     .CodeMirror-placeholder {
-  color: #5a5a5a !important; /* Custom color for the placeholder text */
-}
+        color: #5a5a5a !important; /* Custom color for the placeholder text */
+        white-space: pre-wrap !important;
+        display: block !important;
+        width: 100% !important;
+    }
 
 .CodeMirror div.CodeMirror-cursors .CodeMirror-cursor {
       border-left: 1px solid #ffffff; /* Custom color for the cursor */

src/icons/import.svg

@@ -20,7 +20,12 @@
                     Subtotals
                 </div>
             </div>
-            <button class="settings-button" onclick="openSettings()"></button>
+            <div class="cont">
+                <button class="settings-button" onclick="openSettings()"></button>
+                <button  class="export" onclick="exportCurrentSheet()"></button>
+                <input type="file" id="file-input" style="display:none" accept=".nlx" />
+                <button class="import" onclick="document.getElementById('file-input').click()"></button>
+            </div>
         </div>
         <div class="main">
             <div class="main-header">

src/index.css

@@ -51,14 +51,15 @@ CodeMirror.defineMode('custom', function (config, parserConfig) {
 		},
 	}
 })
-
+let placehold = 'Enter an expression to start'
 let editor = CodeMirror.fromTextArea(document.getElementById('input'), {
 	lineNumbers: false,
 	scrollbarStyle: 'null',
 	theme: 'default', // Выберите тему редактора
 	lint: true,
 	mode: 'custom',
-	placeholder: 'Enter an expression to start',
+	placeholder: placehold,
+	lineWrapping: true,
 })	
 function updateDeclaredVariables() {
 	declaredVariables = {} // Очистка переменных перед повторным анализом

src/index.html

@@ -1,3 +1,32 @@
+document
+	.getElementById('file-input')
+	.addEventListener('change', function (event) {
+		const file = event.target.files[0]
+		if (file) {
+			const reader = new FileReader()
+			reader.onload = function (e) {
+				const content = e.target.result
+				console.log('File content:', content)
+				try {
+					const importedData = JSON.parse(content)
+					console.log('Imported data:', importedData)
+					if (importedData.title && importedData.content) {
+						// Пример: предполагаемый формат данных в NLX файле
+						sheets.push(importedData) // Добавляем новый лист в массив sheets
+						switchSheet(sheets.length - 1) // Переключаемся на новый лист
+						renderSheets()
+					} else {
+						alert('Неверный формат файла NLX')
+					}
+				} catch (error) {
+					console.error('Error parsing file:', error)
+					alert('Ошибка при чтении файла')
+				}
+			}
+			reader.readAsText(file)
+		}
+	})
+
 function addNewSheet() {
 	const currentTime = new Date()
 	const hours = currentTime.getHours().toString().padStart(2, '0')
@@ -68,3 +97,17 @@ document.addEventListener('DOMContentLoaded', function () {
 	renderSheets()
 	switchSheet(currentSheetIndex)
 })
+
+function exportCurrentSheet() {
+	const currentSheet = sheets[currentSheetIndex]
+	const dataToExport = JSON.stringify(currentSheet) // Пример: экспортируем как JSON для простоты
+	const blob = new Blob([dataToExport], { type: 'application/json' }) // Создаем Blob из строки JSON
+	const url = URL.createObjectURL(blob)
+	const a = document.createElement('a')
+	a.href = url
+	a.download = `${currentSheet.title}.nlx`
+	document.body.appendChild(a)
+	a.click()
+	document.body.removeChild(a)
+	URL.revokeObjectURL(url)
+}

src/script.js

@@ -84,18 +84,13 @@ const translations = {
 function updateLanguageTexts() {
 	const lang = translations[currentLanguage]
 	document.getElementById('new-sheet').textContent = lang.newSheet
-	document.getElementById('input').placeholder = lang.enter
+	placehold = lang.enter
+	editor.setOption('placeholder', placehold) // Обновление placeholder в CodeMirror
 	document.getElementById('settings-title').textContent = lang.settings
 	document.getElementById('round-label').textContent = lang.round
-	document.getElementById('color-label').textContent = lang.fontcolor
 	document.getElementById('font-label').textContent = lang.fontsize
 	document.getElementById('lang-label').textContent = lang.language
 	document.getElementById('sheet-label').textContent = lang.sheetname
-
-	const colorSelector = document.getElementById('colorSelector')
-	for (let option of colorSelector.options) {
-		option.textContent = lang[option.value]
-	}
 }
 
 function changeLanguage() {