Merge branch 'master' into assets

2025-03-25 13:09:48 +01:00 · 2024-02-09 14:28:10 +05:30 · 2024-02-09 14:28:10 +05:30 · 88abe26151
commit 88abe26151
parent be13224324 7371143671
20 changed files with 620 additions and 94 deletions
--- a/SECURITY.md
+++ b/SECURITY.md
@ -0,0 +1,3 @@
+# Reporting Security Issues
+
+Please report any security issue to chinchang457@gmail.com
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "web-maker",
-	"version": "5.0.3",
+	"version": "5.2.0",
 	"description": "A blazing fast & offline web playground",
 	"scripts": {
 		"start": "concurrently --kill-others \"gulp start-preview-server\" \"npm run -s dev\"",
--- a/scripts/atomizer.mjs
+++ b/scripts/atomizer.mjs
@ -0,0 +1,2 @@
+import Atomizer from 'atomizer';
+window.atomizer = new Atomizer();
--- a/scripts/generate-atomizer-web.sh
+++ b/scripts/generate-atomizer-web.sh
@ -1,8 +1,6 @@
-npm install atomizer
-touch atomizer.js
-echo "require('atomizer');" > atomizer.js
-webpack --output-library Atomizer --output-library-target umd atomizer atomizer-web.js
-uglifyjs atomizer-web.js --compress > atomizer-web.min.js
-echo 'window.atomizer = new Atomizer();' >> atomizer-web.min.js
-mv atomizer-web.min.js src/lib/atomizer.browser.js
-rm atomizer-web.js atomizer.js
+# needs node >= 20
+npm install atomizer 
+npm i -g parcel
+parcel build scripts/atomizer.mjs --no-source-maps
+mv dist/atomizer.js src/lib/transpilers/atomizer.browser.js
+rm -rf dist
--- a/src/components/AddLibrary.jsx
+++ b/src/components/AddLibrary.jsx
@ -37,19 +37,23 @@ export default class AddLibrary extends Component {
 	}
 	textareaBlurHandler(e, textarea) {
 		const target = e ? e.target : textarea;
+		const data = { js: this.state.js, css: this.state.css };
+
 		const type = target.dataset.lang;
 		if (type === 'js') {
+			data.js = target.value || '';
 			this.setState({
-				js: target.value || ''
+				js: data.js
 			});
 		} else {
+			data.css = target.value || '';
 			this.setState({
-				css: target.value || ''
+				css: data.css
 			});
 		}

 		// trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
-		this.props.onChange({ js: this.state.js, css: this.state.css });
+		this.props.onChange(data);
 	}
 	suggestionSelectHandler(value) {
 		const textarea = value.match(/\.js$/)
--- a/src/components/CodeEditor.jsx
+++ b/src/components/CodeEditor.jsx
@ -187,8 +187,9 @@ export default class CodeEditor extends Component {

 	showErrors(errors) {
 		if (this.props.type === 'codemirror') {
-			errors.forEach(function(error) {
-				this.instance.operation(function() {
+			const editor = this.instance;
+			errors.forEach(function (error) {
+				editor.operation(function () {
 					var n = document.createElement('div');
 					n.setAttribute('data-title', error.message);
 					n.classList.add('gutter-error-marker');
@ -235,11 +236,11 @@ export default class CodeEditor extends Component {
 			if (!monacoDepsDeferred) {
 				monacoDepsDeferred = deferred();
 				loadCss({ url: 'lib/monaco/monaco.css', id: 'monaco-css' });
-				import(/* webpackChunkName: "monaco" */ '../lib/monaco/monaco.bundle.js').then(
-					() => {
-						monacoDepsDeferred.resolve();
-					}
-				);
+				import(
+					/* webpackChunkName: "monaco" */ '../lib/monaco/monaco.bundle.js'
+				).then(() => {
+					monacoDepsDeferred.resolve();
+				});
 			}
 			return monacoDepsDeferred.promise;
 		}
@ -311,23 +312,23 @@ export default class CodeEditor extends Component {
 				// cursorScrollMargin: '20', has issue with scrolling
 				profile: options.profile || '',
 				extraKeys: {
-					Up: function(editor) {
+					Up: function (editor) {
 						// Stop up/down keys default behavior when saveditempane is open
 						// if (isSavedItemsPaneOpen) {
 						// return;
 						// }
 						CodeMirror.commands.goLineUp(editor);
 					},
-					Down: function(editor) {
+					Down: function (editor) {
 						// if (isSavedItemsPaneOpen) {
 						// return;
 						// }
 						CodeMirror.commands.goLineDown(editor);
 					},
-					'Shift-Tab': function(editor) {
+					'Shift-Tab': function (editor) {
 						CodeMirror.commands.indentAuto(editor);
 					},
-					'Shift-Ctrl-F': function(editor) {
+					'Shift-Ctrl-F': function (editor) {
 						if (options.prettier) {
 							prettify({
 								content: editor.getValue(),
@ -336,7 +337,7 @@ export default class CodeEditor extends Component {
 						}
 						trackEvent('ui', 'prettifyKeyboardShortcut');
 					},
-					Tab: function(editor) {
+					Tab: function (editor) {
 						if (options.emmet) {
 							const didEmmetWork = editor.execCommand(
 								'emmetExpandAbbreviation'
@ -344,18 +345,18 @@ export default class CodeEditor extends Component {
 							if (didEmmetWork === true) {
 								return;
 							}
-							const input = $('[data-setting=indentWith]:checked');
-							if (
-								!editor.somethingSelected() &&
-								(!prefs.indentWith || prefs.indentWith === 'spaces')
-							) {
-								// softtabs adds spaces. This is required because by default tab key will put tab, but we want
-								// to indent with spaces if `spaces` is preferred mode of indentation.
-								// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
-								CodeMirror.commands.insertSoftTab(editor);
-							} else {
-								CodeMirror.commands.defaultTab(editor);
-							}
+						}
+						const input = $('[data-setting=indentWith]:checked');
+						if (
+							!editor.somethingSelected() &&
+							(!prefs.indentWith || prefs.indentWith === 'spaces')
+						) {
+							// softtabs adds spaces. This is required because by default tab key will put tab, but we want
+							// to indent with spaces if `spaces` is preferred mode of indentation.
+							// `somethingSelected` needs to be checked otherwise, all selected code is replaced with softtab.
+							CodeMirror.commands.insertSoftTab(editor);
+						} else {
+							CodeMirror.commands.defaultTab(editor);
 						}
 					},
 					Enter: 'emmetInsertLineBreak'
--- a/src/components/ContentWrap.jsx
+++ b/src/components/ContentWrap.jsx
@ -15,6 +15,7 @@ import { Console } from './Console';
 import CssSettingsModal from './CssSettingsModal';
 import { PreviewDimension } from './PreviewDimension.jsx';
 import Modal from './Modal.jsx';
+import { LocalStorageKeys } from '../constants.js';
 const minCodeWrapSize = 33;

 /* global htmlCodeEl
@ -24,7 +25,9 @@ export default class ContentWrap extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			isConsoleOpen: false,
+			isConsoleOpen:
+				window.localStorage.getItem(LocalStorageKeys.WAS_CONSOLE_OPEN) ===
+				'true',
 			isCssSettingsModalOpen: false,
 			isPreviewNotWorkingModalVisible: false,
 			logs: []
@ -574,8 +577,10 @@ export default class ContentWrap extends Component {
 	}

 	toggleConsole() {
-		this.setState({ isConsoleOpen: !this.state.isConsoleOpen });
+		const newValue = !this.state.isConsoleOpen;
+		this.setState({ isConsoleOpen: newValue });
 		trackEvent('ui', 'consoleToggle');
+		window.localStorage.setItem(LocalStorageKeys.WAS_CONSOLE_OPEN, newValue);
 	}
 	consoleHeaderDblClickHandler(e) {
 		if (!e.target.classList.contains('js-console__header')) {
--- a/src/components/Notifications.jsx
+++ b/src/components/Notifications.jsx
@ -114,6 +114,38 @@ export function Notifications(props) {
 	return (
 		<div>
 			<h1>Whats new?</h1>
+			<Notification version="5.2.0" {...props}>
+				<li>
+					<strong>Improvement</strong>: Atomic CSS (Atomizer) has been updated
+					to latest version. Now you can do things like Grid and more!
+				</li>
+				<li>
+					<strong>Improvement</strong>: Atomic CSS config can now be written
+					with unquoted keys too. No need to have a valid JSON syntax.
+				</li>
+			</Notification>
+			<Notification version="5.1.1" {...props}>
+				<NotificationItem type="bug">
+					Detached preview now renders correctly.
+				</NotificationItem>
+			</Notification>
+			<Notification version="5.1.0" {...props}>
+				<NotificationItem type="interface">
+					Console's open state is preserved across refreshes.
+				</NotificationItem>
+				<NotificationItem type="bug">
+					Error highlighting fixed in JS pane when using Codemirror editor.
+					Thanks
+					<ThanksTo url="https://github.com/nhogle" name="@nhogle" />
+				</NotificationItem>
+				<NotificationItem type="bug">
+					Tab key not working in JS pane is fixed. Thanks
+					<ThanksTo url="https://github.com/nhogle" name="@nhogle" />
+				</NotificationItem>
+				<NotificationItem type="bug">
+					3rd party libraries not updating sometimes is fixed.
+				</NotificationItem>
+			</Notification>
 			<Notification version="5.0.3" {...props}>
 				<li>
 					⬆️ Popular libraries updated to latest versions. Thanks
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@ -389,10 +389,15 @@ export default class Settings extends Component {
 									onChange={e => this.updateSetting(e, 'lang')}
 								>
 									<option value="en">English</option>
+									<option value="ja">日本語</option>
 									<option value="hi">हिंदी</option>
-									<option value="sa">Sanskrit</option>
 									<option value="es">Español (España)</option>
-									<option value="zh-Hans">中文(简体)</option>
+									<option value="sa" disabled="disabled">
+										Sanskrit (Coming soon)
+									</option>
+									<option value="zh-Hans" disabled="disabled">
+										中文(简体) (coming soon)
+									</option>
 								</select>
 							</label>
 						</div>
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@ -69,17 +69,14 @@ import { commandPaletteService } from '../commandPaletteService';

 import { I18nProvider } from '@lingui/react';
 import { Assets } from './Assets.jsx';
+import { LocalStorageKeys } from '../constants.js';

 if (module.hot) {
 	require('preact/debug');
 }

-const LocalStorageKeys = {
-	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
-	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
-};
 const UNSAVED_WARNING_COUNT = 15;
-const version = '5.0.3';
+const version = '5.2.0';

 // Read forced settings as query parameters
 window.forcedSettings = {};
--- a/src/computes.js
+++ b/src/computes.js
@ -54,7 +54,7 @@ export function computeCss(userCode, mode, settings) {
 				{
 					indentedSyntax: mode === CssModes.SASS
 				},
-				function(result) {
+				function (result) {
 					// Something was wrong
 					if (result.line && result.message) {
 						errors = {
@ -80,12 +80,12 @@ export function computeCss(userCode, mode, settings) {
 		}
 	} else if (mode === CssModes.LESS) {
 		less.render(code).then(
-			function(result) {
+			function (result) {
 				d.resolve({
 					code: result.css
 				});
 			},
-			function(error) {
+			function (error) {
 				errors = {
 					lang: 'css',
 					data: [
@ -102,7 +102,7 @@ export function computeCss(userCode, mode, settings) {
 			}
 		);
 	} else if (mode === CssModes.STYLUS) {
-		stylus(code).render(function(error, result) {
+		stylus(code).render(function (error, result) {
 			if (error) {
 				window.err = error;
 				// Last line of message is the actual message
@ -132,10 +132,18 @@ export function computeCss(userCode, mode, settings) {
 			const html = code;
 			const foundClasses = atomizer.findClassNames(html);
 			var finalConfig;
+
+			// Regular expression to find unquoted keys: looks for word characters (including _) followed by a colon
+			// and put them in quotes
+			const fixedConfigJson = (settings.acssConfig || '{}').replace(
+				/([{,]\s*)([^\s"{:]+)(\s*:\s*)/g,
+				'$1"$2"$3'
+			);
+
 			try {
 				finalConfig = atomizer.getConfig(
 					foundClasses,
-					JSON.parse(settings.acssConfig)
+					JSON.parse(fixedConfigJson)
 				);
 			} catch (e) {
 				finalConfig = atomizer.getConfig(foundClasses, {});
--- a/src/constants.js
+++ b/src/constants.js
@ -0,0 +1,5 @@
+export const LocalStorageKeys = {
+	LOGIN_AND_SAVE_MESSAGE_SEEN: 'loginAndsaveMessageSeen',
+	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations',
+	WAS_CONSOLE_OPEN: 'wasConsoleOpen'
+};
--- a/src/lib/transpilers/atomizer.browser.js
+++ b/src/lib/transpilers/atomizer.browser.js
--- a/src/libraryList.js
+++ b/src/libraryList.js
@ -10,14 +10,12 @@ export const jsLibs = [
 		type: 'js'
 	},
 	{
-		url:
-			'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
+		url: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
 		label: 'Bootstrap 4',
 		type: 'js'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js',
 		label: 'Foundation',
 		type: 'js'
 	},
@ -32,14 +30,12 @@ export const jsLibs = [
 		type: 'js'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
 		label: 'React',
 		type: 'js'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js',
 		label: 'React DOM',
 		type: 'js'
 	},
@ -74,7 +70,7 @@ export const jsLibs = [
 		type: 'js'
 	},
 	{
-		url:'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.16.19/js/uikit.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.16.19/js/uikit.min.js',
 		label: 'UIkit 3',
 		type: 'js'
 	},
@ -84,14 +80,12 @@ export const jsLibs = [
 		type: 'js'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js',
 		label: 'p5.js DOM',
 		type: 'js'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js',
 		label: 'p5.js Sound',
 		type: 'js'
 	},
@ -99,24 +93,26 @@ export const jsLibs = [
 		url: 'https://unpkg.com/rxjs/bundles/rxjs.umd.min.js',
 		label: 'RxJS',
 		type: 'js'
+	},
+	{
+		url: 'https://cdn.tailwindcss.com/3.3.1',
+		label: 'Tailwind 3',
+		type: 'js'
 	}
 ];
 export const cssLibs = [
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css',
 		label: 'Bootstrap 5',
 		type: 'css'
 	},
 	{
-		url:
-			'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
+		url: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
 		label: 'Bootstrap 4',
 		type: 'css'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css',
 		label: 'Foundation',
 		type: 'css'
 	},
@ -141,27 +137,19 @@ export const cssLibs = [
 		label: 'Tailwind 2',
 		type: 'css'
 	},
+
 	{
-		url:
-			'https://cdn.tailwindcss.com/3.3.1',
-		label: 'Tailwind 3',
-		type: 'css'
-	},
-	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.16.19/css/uikit.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.16.19/css/uikit.min.css',
 		label: 'UIkit 3',
 		type: 'css'
 	},
 	{
-		url:
-			'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
+		url: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css',
 		label: 'Animate.css',
 		type: 'css'
 	},
 	{
-		url:
-			'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+		url: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 		label: 'FontAwesome 4',
 		type: 'css'
 	},
--- a/src/locales/ja/messages.js
+++ b/src/locales/ja/messages.js
@ -0,0 +1,130 @@
+/* eslint-disable */ export default {
+	languageData: {
+		plurals: function (n, ord) {
+			if (ord) return 'other';
+			return 'other';
+		}
+	},
+	messages: {
+		'\'Oops! Selected file is corrupted. Please select a file that was generated by clicking the "Export" button.':
+			'\u304A\u3063\u3068\uFF01\u9078\u629E\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB\u304C\u7834\u640D\u3057\u3066\u3044\u307E\u3059\u3002"\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8"\u30DC\u30BF\u30F3\u3092\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u751F\u6210\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044\u3002',
+		'Add Library': '\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u8FFD\u52A0',
+		'Add a JS/CSS library':
+			'JS/CSS\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u8FFD\u52A0',
+		'Add library': '\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u8FFD\u52A0',
+		Chat: '\u30C1\u30E3\u30C3\u30C8',
+		'Choose from popular libraries':
+			'\u4EBA\u6C17\u306E\u3042\u308B\u30E9\u30A4\u30D6\u30E9\u30EA\u304B\u3089\u9078\u629E',
+		'Clear console (CTRL + L)':
+			'\u30B3\u30F3\u30BD\u30FC\u30EB\u3092\u30AF\u30EA\u30A2\uFF08CTRL + L\uFF09',
+		'Clear console (works when console input is focused)':
+			'\u30B3\u30F3\u30BD\u30FC\u30EB\u3092\u30AF\u30EA\u30A2\uFF08\u30B3\u30F3\u30BD\u30FC\u30EB\u5165\u529B\u304C\u30D5\u30A9\u30FC\u30AB\u30B9\u3055\u308C\u3066\u3044\u308B\u3068\u304D\u306B\u6A5F\u80FD\u3057\u307E\u3059\uFF09',
+		'Close saved creations pane':
+			'\u4FDD\u5B58\u3055\u308C\u305F\u4F5C\u6210\u7269\u306E\u30DA\u30A4\u30F3\u3092\u9589\u3058\u308B',
+		'Close saved creations panel & modals':
+			'\u4FDD\u5B58\u3055\u308C\u305F\u4F5C\u6210\u7269\u306E\u30D1\u30CD\u30EB\u3068\u30E2\u30FC\u30C0\u30EB\u3092\u9589\u3058\u308B',
+		Console: '\u30B3\u30F3\u30BD\u30FC\u30EB',
+		'Detach preview':
+			'\u30D7\u30EC\u30D3\u30E5\u30FC\u3092\u5206\u96E2\u3059\u308B',
+		Donate: '\u5BC4\u4ED8\u3059\u308B',
+		'Double click to toggle console':
+			'\u30C0\u30D6\u30EB\u30AF\u30EA\u30C3\u30AF\u3067\u30B3\u30F3\u30BD\u30FC\u30EB\u3092\u5207\u308A\u66FF\u3048\u308B',
+		'Download game as zip':
+			'\u30B2\u30FC\u30E0\u3092zip\u3068\u3057\u3066\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9',
+		'Edit on CodePen': 'CodePen\u3067\u7DE8\u96C6',
+		Editor: '\u30A8\u30C7\u30A3\u30BF\u30FC',
+		'Emmet code completion': 'Emmet\u30B3\u30FC\u30C9\u88DC\u5B8C',
+		Export: '\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8',
+		'Export all your creations into a single importable file.':
+			'\u3059\u3079\u3066\u306E\u4F5C\u6210\u7269\u30921\u3064\u306E\u30A4\u30F3\u30DD\u30FC\u30C8\u53EF\u80FD\u306A\u30D5\u30A1\u30A4\u30EB\u306B\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u3057\u307E\u3059\u3002',
+		Find: '\u691C\u7D22',
+		'Find & replace': '\u691C\u7D22\u3068\u7F6E\u63DB',
+		Global: '\u30B0\u30ED\u30FC\u30D0\u30EB',
+		Help: '\u30D8\u30EB\u30D7',
+		Import: '\u30A4\u30F3\u30DD\u30FC\u30C8',
+		"Import your creations. Only the file that you export through the 'Export' button can be imported.":
+			"\u4F5C\u6210\u7269\u3092\u30A4\u30F3\u30DD\u30FC\u30C8\u3057\u307E\u3059\u3002'\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8'\u30DC\u30BF\u30F3\u3092\u901A\u3058\u3066\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u3055\u308C\u305F\u30D5\u30A1\u30A4\u30EB\u306E\u307F\u304C\u30A4\u30F3\u30DD\u30FC\u30C8\u53EF\u80FD\u3067\u3059\u3002",
+		'Indent code left':
+			'\u30B3\u30FC\u30C9\u3092\u5DE6\u306B\u30A4\u30F3\u30C7\u30F3\u30C8',
+		'Indent code right':
+			'\u30B3\u30FC\u30C9\u3092\u53F3\u306B\u30A4\u30F3\u30C7\u30F3\u30C8',
+		'Keyboard Shortcuts':
+			'\u30AD\u30FC\u30DC\u30FC\u30C9\u30B7\u30E7\u30FC\u30C8\u30AB\u30C3\u30C8',
+		'Keyboard shortcuts':
+			'\u30AD\u30FC\u30DC\u30FC\u30C9\u30B7\u30E7\u30FC\u30C8\u30AB\u30C3\u30C8',
+		License: '\u30E9\u30A4\u30BB\u30F3\u30B9',
+		'Login/Signup':
+			'\u30ED\u30B0\u30A4\u30F3/\u30B5\u30A4\u30F3\u30A2\u30C3\u30D7',
+		'My Library ({0})': function (a) {
+			return ['\u30DE\u30A4\u30E9\u30A4\u30D6\u30E9\u30EA (', a('0'), ')'];
+		},
+		New: '\u65B0\u898F',
+		'No match found.':
+			'\u4E00\u81F4\u3059\u308B\u3082\u306E\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F\u3002',
+		'Note: You can load external scripts only from following domains:':
+			'\u6CE8\u610F: \u6B21\u306E\u30C9\u30E1\u30A4\u30F3\u304B\u3089\u306E\u307F\u5916\u90E8\u30B9\u30AF\u30EA\u30D7\u30C8\u3092\u8AAD\u307F\u8FBC\u3080\u3053\u3068\u304C\u3067\u304D\u307E\u3059\uFF1A',
+		'Nothing saved here.':
+			'\u3053\u3053\u306B\u306F\u4F55\u3082\u4FDD\u5B58\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002',
+		Open: '\u958B\u304F',
+		'Open a saved creation (Ctrl/\u2318 + O)':
+			'\u4FDD\u5B58\u3055\u308C\u305F\u4F5C\u6210\u7269\u3092\u958B\u304F (Ctrl/\u2318 + O)',
+		'Open list of saved creations':
+			'\u4FDD\u5B58\u3055\u308C\u305F\u4F5C\u6210\u7269\u306E\u30EA\u30B9\u30C8\u3092\u958B\u304F',
+		'Powered by cdnjs': 'cdnjs\u306B\u3088\u3063\u3066\u63D0\u4F9B',
+		'Put each library in new line':
+			'\u5404\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u65B0\u3057\u3044\u884C\u306B\u7F6E\u304F',
+		'Read more': '\u3082\u3063\u3068\u8AAD\u3080',
+		'Read the documentation.':
+			'\u30C9\u30AD\u30E5\u30E1\u30F3\u30C8\u3092\u8AAD\u3080\u3002',
+		'Realign code': '\u30B3\u30FC\u30C9\u3092\u518D\u6574\u5217\u3059\u308B',
+		'Refresh preview':
+			'\u30D7\u30EC\u30D3\u30E5\u30FC\u3092\u66F4\u65B0\u3059\u308B',
+		'Report a bug': '\u30D0\u30B0\u3092\u5831\u544A\u3059\u308B',
+		'Review Web Maker': 'Web Maker\u3092\u30EC\u30D3\u30E5\u30FC\u3059\u308B',
+		Run: '\u5B9F\u884C',
+		'Run Prettier': 'Prettier\u3092\u5B9F\u884C',
+		'Run preview (Ctrl/\u2318 + Shift + 5)':
+			'\u30D7\u30EC\u30D3\u30E5\u30FC\u3092\u5B9F\u884C\u3059\u308B (Ctrl/\u2318 + Shift + 5)',
+		Save: '\u4FDD\u5B58',
+		'Save as HTML file':
+			'HTML\u30D5\u30A1\u30A4\u30EB\u3068\u3057\u3066\u4FDD\u5B58',
+		'Save current creation (Ctrl/\u2318 + S)':
+			'\u73FE\u5728\u306E\u4F5C\u6210\u7269\u3092\u4FDD\u5B58 (Ctrl/\u2318 + S)',
+		'Save current creations':
+			'\u73FE\u5728\u306E\u4F5C\u6210\u7269\u3092\u4FDD\u5B58',
+		'Search your creations here...':
+			'\u3053\u3053\u3067\u3042\u306A\u305F\u306E\u4F5C\u6210\u7269\u3092\u691C\u7D22...',
+		'See awesome libraries used':
+			'\u4F7F\u7528\u3055\u308C\u3066\u3044\u308B\u7D20\u6674\u3089\u3057\u3044\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u898B\u308B',
+		'See changelog': '\u5909\u66F4\u30ED\u30B0\u3092\u898B\u308B',
+		'See profile or Logout':
+			'\u30D7\u30ED\u30D5\u30A3\u30FC\u30EB\u3092\u898B\u308B\u307E\u305F\u306F\u30ED\u30B0\u30A2\u30A6\u30C8',
+		'Select next match': '\u6B21\u306E\u4E00\u81F4\u3092\u9078\u629E',
+		'Select previous match': '\u524D\u306E\u4E00\u81F4\u3092\u9078\u629E',
+		Settings: '\u8A2D\u5B9A',
+		'Single line comment': '\u5358\u4E00\u884C\u30B3\u30E1\u30F3\u30C8',
+		'Start a new creation': '\u65B0\u3057\u3044\u4F5C\u6210\u3092\u958B\u59CB',
+		'Support the developer': '\u958B\u767A\u8005\u3092\u652F\u63F4\u3059\u308B',
+		'Support the developer by pledging some amount':
+			'\u3042\u308B\u91D1\u984D\u3092\u5BC4\u4ED8\u3057\u3066\u958B\u767A\u8005\u3092\u652F\u63F4\u3059\u308B',
+		'Switch to full screen preview':
+			'\u30D5\u30EB\u30B9\u30AF\u30EA\u30FC\u30F3\u30D7\u30EC\u30D3\u30E5\u30FC\u306B\u5207\u308A\u66FF\u3048',
+		'Switch to layout with all vertical panes':
+			'\u5168\u3066\u306E\u5782\u76F4\u30DA\u30A4\u30F3\u3092\u6301\u3064\u30EC\u30A4\u30A2\u30A6\u30C8\u306B\u5207\u308A\u66FF\u3048',
+		'Switch to layout with preview on bottom':
+			'\u4E0B\u90E8\u306B\u30D7\u30EC\u30D3\u30E5\u30FC\u304C\u3042\u308B\u30EC\u30A4\u30A2\u30A6\u30C8\u306B\u5207\u308A\u66FF\u3048',
+		'Switch to layout with preview on left':
+			'\u5DE6\u5074\u306B\u30D7\u30EC\u30D3\u30E5\u30FC\u304C\u3042\u308B\u30EC\u30A4\u30A2\u30A6\u30C8\u306B\u5207\u308A\u66FF\u3048',
+		'Switch to layout with preview on right':
+			'\u53F3\u5074\u306B\u30D7\u30EC\u30D3\u30E5\u30FC\u304C\u3042\u308B\u30EC\u30A4\u30A2\u30A6\u30C8\u306B\u5207\u308A\u66FF\u3048',
+		'Take screenshot of preview':
+			'\u30D7\u30EC\u30D3\u30E5\u30FC\u306E\u30B9\u30AF\u30EA\u30FC\u30F3\u30B7\u30E7\u30C3\u30C8\u3092\u64AE\u308B',
+		'Toggle console':
+			'\u30B3\u30F3\u30BD\u30FC\u30EB\u3092\u5207\u308A\u66FF\u3048\u308B',
+		"Tweet about 'Web Maker'":
+			"'Web Maker'\u306B\u3064\u3044\u3066\u30C4\u30A4\u30FC\u30C8\u3059\u308B",
+		'Type here to search libraries':
+			'\u30E9\u30A4\u30D6\u30E9\u30EA\u3092\u691C\u7D22\u3059\u308B\u305F\u3081\u306B\u3053\u3053\u306B\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044',
+		'Upload Image': '\u753B\u50CF\u3092\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9'
+	}
+};
--- a/src/locales/ja/messages.po
+++ b/src/locales/ja/messages.po
@ -0,0 +1,322 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2024-02-04 11:43+0530\n"
+"Mime-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.3.1\n"
+"Language: ja\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: Kushagra Gour\n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+"MIME-Version: 1.0\n"
+
+#: src/components/SavedItemPane.jsx:116
+msgid "'Oops! Selected file is corrupted. Please select a file that was generated by clicking the \"Export\" button."
+msgstr "おっと！選択されたファイルが破損しています。\"エクスポート\"ボタンをクリックして生成されたファイルを選択してください。"
+
+#: src/components/AddLibrary.jsx:67
+msgid "Add Library"
+msgstr "ライブラリを追加"
+
+#: src/components/MainHeader.jsx:41
+msgid "Add a JS/CSS library"
+msgstr "JS/CSSライブラリを追加"
+
+#: src/components/MainHeader.jsx:43
+msgid "Add library"
+msgstr "ライブラリを追加"
+
+#: src/components/HelpModal.jsx:91
+msgid "Chat"
+msgstr "チャット"
+
+#: src/components/AddLibrary.jsx:92
+msgid "Choose from popular libraries"
+msgstr "人気のあるライブラリから選択"
+
+#: src/components/Console.jsx:69
+msgid "Clear console (CTRL + L)"
+msgstr "コンソールをクリア（CTRL + L）"
+
+#: src/components/KeyboardShortcutsModal.jsx:42
+msgid "Clear console (works when console input is focused)"
+msgstr "コンソールをクリア（コンソール入力がフォーカスされているときに機能します）"
+
+#: src/components/SavedItemPane.jsx:170
+msgid "Close saved creations pane"
+msgstr "保存された作成物のペインを閉じる"
+
+#: src/components/KeyboardShortcutsModal.jsx:48
+msgid "Close saved creations panel & modals"
+msgstr "保存された作成物のパネルとモーダルを閉じる"
+
+#: src/components/Console.jsx:61
+msgid "Console"
+msgstr "コンソール"
+
+#: src/components/Footer.jsx:297
+msgid "Detach preview"
+msgstr "プレビューを分離する"
+
+#: src/components/Footer.jsx:142
+msgid "Donate"
+msgstr "寄付する"
+
+#: src/components/Console.jsx:57
+msgid "Double click to toggle console"
+msgstr "ダブルクリックでコンソールを切り替える"
+
+
+#: src/components/Footer.jsx:170
+msgid "Download game as zip"
+msgstr "ゲームをzipとしてダウンロード"
+
+#: src/components/Footer.jsx:225
+msgid "Edit on CodePen"
+msgstr "CodePenで編集"
+
+#: src/components/KeyboardShortcutsModal.jsx:54
+msgid "Editor"
+msgstr "エディター"
+
+#: src/components/KeyboardShortcutsModal.jsx:101
+msgid "Emmet code completion"
+msgstr "Emmetコード補完"
+
+#: src/components/SavedItemPane.jsx:190
+msgid "Export"
+msgstr "エクスポート"
+
+#: src/components/SavedItemPane.jsx:187
+msgid "Export all your creations into a single importable file."
+msgstr "すべての作成物を1つのインポート可能なファイルにエクスポートします。"
+
+#: src/components/KeyboardShortcutsModal.jsx:59
+msgid "Find"
+msgstr "検索"
+
+#: src/components/KeyboardShortcutsModal.jsx:77
+msgid "Find & replace"
+msgstr "検索と置換"
+
+#: src/components/KeyboardShortcutsModal.jsx:15
+msgid "Global"
+msgstr "グローバル"
+
+#: src/components/Footer.jsx:90 src/components/Footer.jsx:190
+msgid "Help"
+msgstr "ヘルプ"
+
+#: src/components/SavedItemPane.jsx:199
+msgid "Import"
+msgstr "インポート"
+
+#: src/components/SavedItemPane.jsx:196
+msgid "Import your creations. Only the file that you export through the 'Export' button can be imported."
+msgstr "作成物をインポートします。'エクスポート'ボタンを通じてエクスポートされたファイルのみがインポート可能です。"
+
+#: src/components/KeyboardShortcutsModal.jsx:95
+msgid "Indent code left"
+msgstr "コードを左にインデント"
+
+#: src/components/KeyboardShortcutsModal.jsx:89
+msgid "Indent code right"
+msgstr "コードを右にインデント"
+
+#: src/components/KeyboardShortcutsModal.jsx:9
+msgid "Keyboard Shortcuts"
+msgstr "キーボードショートカット"
+
+#: src/components/Footer.jsx:104
+msgid "Keyboard shortcuts"
+msgstr "キーボードショートカット"
+
+#: src/components/HelpModal.jsx:195
+msgid "License"
+msgstr "ライセンス"
+
+#: src/components/MainHeader.jsx:104
+msgid "Login/Signup"
+msgstr "ログイン/サインアップ"
+
+#: src/components/SavedItemPane.jsx:179
+msgid "My Library ({0})"
+msgstr "マイライブラリ ({0})"
+
+
+#: src/components/MainHeader.jsx:64
+msgid "New"
+msgstr "新規"
+
+#: src/components/SavedItemPane.jsx:215
+msgid "No match found."
+msgstr "一致するものが見つかりませんでした。"
+
+#: src/components/AddLibrary.jsx:125
+msgid "Note: You can load external scripts only from following domains:"
+msgstr "注意: 次のドメインからのみ外部スクリプトを読み込むことができます："
+
+#: src/components/SavedItemPane.jsx:232
+msgid "Nothing saved here."
+msgstr "ここには何も保存されていません。"
+
+#: src/components/MainHeader.jsx:96
+msgid "Open"
+msgstr "開く"
+
+#: src/components/MainHeader.jsx:87
+msgid "Open a saved creation (Ctrl/⌘ + O)"
+msgstr "保存された作成物を開く (Ctrl/⌘ + O)"
+
+#: src/components/KeyboardShortcutsModal.jsx:36
+msgid "Open list of saved creations"
+msgstr "保存された作成物のリストを開く"
+
+#: src/components/AddLibrary.jsx:88
+msgid "Powered by cdnjs"
+msgstr "cdnjsによって提供"
+
+#: src/components/AddLibrary.jsx:118 src/components/AddLibrary.jsx:147
+msgid "Put each library in new line"
+msgstr "各ライブラリを新しい行に置く"
+
+#: src/components/KeyboardShortcutsModal.jsx:107
+msgid "Read more"
+msgstr "もっと読む"
+
+#: src/components/HelpModal.jsx:30
+msgid "Read the documentation."
+msgstr "ドキュメントを読む。"
+
+#: src/components/KeyboardShortcutsModal.jsx:83
+msgid "Realign code"
+msgstr "コードを再整列する"
+
+#: src/components/KeyboardShortcutsModal.jsx:24
+msgid "Refresh preview"
+msgstr "プレビューを更新する"
+
+#: src/components/HelpModal.jsx:102
+msgid "Report a bug"
+msgstr "バグを報告する"
+
+#: src/components/HelpModal.jsx:80
+msgid "Review Web Maker"
+msgstr "Web Makerをレビューする"
+
+#: src/components/MainHeader.jsx:32
+msgid "Run"
+msgstr "実行"
+
+#: src/components/KeyboardShortcutsModal.jsx:120
+msgid "Run Prettier"
+msgstr "Prettierを実行"
+
+#: src/components/MainHeader.jsx:26
+msgid "Run preview (Ctrl/⌘ + Shift + 5)"
+msgstr "プレビューを実行する (Ctrl/⌘ + Shift + 5)"
+        
+        #: src/components/MainHeader.jsx:80
+msgid "Save"
+msgstr "保存"
+
+#: src/components/Footer.jsx:202
+msgid "Save as HTML file"
+msgstr "HTMLファイルとして保存"
+
+#: src/components/MainHeader.jsx:71
+msgid "Save current creation (Ctrl/⌘ + S)"
+msgstr "現在の作成物を保存 (Ctrl/⌘ + S)"
+
+#: src/components/KeyboardShortcutsModal.jsx:30
+msgid "Save current creations"
+msgstr "現在の作成物を保存"
+
+#: src/components/SavedItemPane.jsx:209
+msgid "Search your creations here..."
+msgstr "ここであなたの作成物を検索..."
+
+#: src/components/HelpModal.jsx:110
+msgid "See awesome libraries used"
+msgstr "使用されている素晴らしいライブラリを見る"
+
+#: src/components/Footer.jsx:313
+msgid "See changelog"
+msgstr "変更ログを見る"
+
+#: src/components/MainHeader.jsx:110
+msgid "See profile or Logout"
+msgstr "プロフィールを見るまたはログアウト"
+
+#: src/components/KeyboardShortcutsModal.jsx:65
+msgid "Select next match"
+msgstr "次の一致を選択"
+
+#: src/components/KeyboardShortcutsModal.jsx:71
+msgid "Select previous match"
+msgstr "前の一致を選択"
+
+#: src/components/Footer.jsx:325
+msgid "Settings"
+msgstr "設定"
+
+#: src/components/KeyboardShortcutsModal.jsx:114
+msgid "Single line comment"
+msgstr "単一行コメント"
+
+#: src/components/MainHeader.jsx:58
+msgid "Start a new creation"
+msgstr "新しい作成を開始"
+
+#: src/components/HelpModal.jsx:69
+msgid "Support the developer"
+msgstr "開発者を支援する"
+
+#: src/components/Footer.jsx:139
+msgid "Support the developer by pledging some amount"
+msgstr "ある金額を寄付して開発者を支援する"
+
+#: src/components/Footer.jsx:289
+msgid "Switch to full screen preview"
+msgstr "フルスクリーンプレビューに切り替え"
+
+#: src/components/Footer.jsx:279
+msgid "Switch to layout with all vertical panes"
+msgstr "全ての垂直ペインを持つレイアウトに切り替え"
+
+#: src/components/Footer.jsx:259
+msgid "Switch to layout with preview on bottom"
+msgstr "下部にプレビューがあるレイアウトに切り替え"
+
+#: src/components/Footer.jsx:269
+msgid "Switch to layout with preview on left"
+msgstr "左側にプレビューがあるレイアウトに切り替え"
+
+#: src/components/Footer.jsx:249
+msgid "Switch to layout with preview on right"
+msgstr "右側にプレビューがあるレイアウトに切り替え"
+
+#: src/components/Footer.jsx:236
+msgid "Take screenshot of preview"
+msgstr "プレビューのスクリーンショットを撮る"
+
+#: src/components/Console.jsx:78
+msgid "Toggle console"
+msgstr "コンソールを切り替える"
+
+#: src/components/Footer.jsx:118
+msgid "Tweet about 'Web Maker'"
+msgstr "'Web Maker'についてツイートする"
+
+#: src/components/AddLibrary.jsx:82
+msgid "Type here to search libraries"
+msgstr "ライブラリを検索するためにここに入力してください"
+
+#: src/components/Footer.jsx:183
+msgid "Upload Image"
+msgstr "画像をアップロード"
+
--- a/src/manifest.json
+++ b/src/manifest.json
@ -1,6 +1,6 @@
 {
 	"name": "Web Maker",
-	"version": "5.0.3",
+	"version": "5.2.0",
 	"manifest_version": 2,
 	"description": "Blazing fast & offline playground for your web experiments",
 	"homepage_url": "https://webmaker.app",
--- a/src/options.html
+++ b/src/options.html
@ -35,7 +35,7 @@
 	<body>
 		<h3>
 			Settings
-			<span style="opacity: 0.6; font-size: 0.7em"> v5.0.3</span>
+			<span style="opacity: 0.6; font-size: 0.7em"> v5.2.0</span>
 		</h3>
 		<form name="optionsForm">
 			<label>
--- a/src/preview.html
+++ b/src/preview.html
@ -1,8 +1,22 @@
-<link rel="stylesheet" href="style.css">
+<style>
+	body {
+		margin: 0;
+	}
+	#demo-frame {
+		border: 0;
+		width: 100%;
+		background: white;
+		height: 100%;
+	}
+</style>

 <body>
-
-	<iframe src="about://blank" frameborder="0" id="demo-frame" allowfullscreen></iframe>
+	<iframe
+		src="about://blank"
+		frameborder="0"
+		id="demo-frame"
+		allowfullscreen
+	></iframe>

 	<script src="detached-window.js"></script>
 </body>
--- a/src/style.css
+++ b/src/style.css
@ -574,9 +574,7 @@ body:not(.light-version).overlay-visible .main-container {
 	overflow: hidden;
 	position: relative;
 	background: var(--color-bg);
-	transition:
-		height 0.3s ease,
-		width 0.3s ease;
+	transition: height 0.3s ease, width 0.3s ease;
 	will-change: height;
 }

@ -896,6 +894,10 @@ body > #demo-frame {
 .footer button:hover svg {
 	fill: rgba(255, 255, 255, 0.6);
 }
+.footer a,
+.footer button {
+	cursor: pointer;
+}

 .mode-btn svg {
 	width: 24px;
@ -991,9 +993,7 @@ body > #demo-frame {

 	/* fix me */
 	background: linear-gradient(45deg, #2d063c, #3a2b63);
-	box-shadow:
-		inset 1px -1px 0 0 #ffffff17,
-		0 20px 31px 0 #0000008a;
+	box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a;

 	color: var(--color-text);
 	position: relative;