Molang syntax highlighting in placeholder field

css/panels.css

@@ -477,9 +477,9 @@
 		flex-shrink: 1;
 	}
 
-
-
-
+	.prism-editor-wrapper {
+		caret-color: var(--color-text);
+	}
 	.molang_input {
 		overflow-y: hidden;
 		min-height: 30px;
@@ -515,18 +515,6 @@
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
 /*Timeline*/
 	#timeline {
 		display: block;

index.html

@@ -804,12 +804,6 @@
 		</div>
 
 
-
-		<div id="variable_placeholders" class="panel grow">
-			<p class="tl">panel.variable_placeholders.info</p>
-			<textarea id="var_placeholder_area" class="code tab_target" style="flex-grow: 1;" onkeyup="Animator.preview()"></textarea>
-		</div>
-
 		<div id="textures" class="panel grow">
 			<div class="toolbar_wrapper texturelist"></div>
 			<ul id="texture_list" class="list">

js/animations/animation.js

@@ -1145,7 +1145,7 @@ Molang.global_variables = {
 	}
 }
 Molang.variableHandler = function (variable) {
-	var inputs = $('#var_placeholder_area').val().split('\n')
+	var inputs = Interface.Panels.variable_placeholders.inside_vue._data.text.split('\n');
 	var i = 0;
 	while (i < inputs.length) {
 		let key, val;

js/animations/keyframe.js

@@ -351,6 +351,11 @@ function updateKeyframeValue(axis, value) {
 	}
 }
 function updateKeyframeSelection() {
+	Timeline.keyframes.forEach(kf => {
+		if (kf.selected && !Timeline.selected.includes(kf)) {
+			kf.selected = false;
+		}
+	})
 	if (Timeline.selected.length) {
 		BarItems.slider_keyframe_time.update()
 	}

js/animations/timeline.js

@@ -261,11 +261,18 @@ const Timeline = {
 			}
 		})
 		//Keyframe inputs
-		$('.keyframe_input').click(e => {
-			Undo.initEdit({keyframes: Timeline.selected})
-		}).focusout(e => {
-			Undo.finishEdit('edit keyframe')
+		
+		document.addEventListener('focus', event => {
+			if (event.target && event.target.parentElement && event.target.parentElement.classList.contains('keyframe_input')) {
+				Undo.initEdit({keyframes: Timeline.selected})
+			}
+		}, true)
+		document.addEventListener('focusout', event => {
+			if (event.target && event.target.parentElement && event.target.parentElement.classList.contains('keyframe_input')) {
+				Undo.finishEdit('edit keyframe')
+			}
 		})
+		
 		//Enter Time
 		$('#timeline_corner').click(e => {
 			if ($('#timeline_corner').attr('contenteditable') == 'true') return;

js/interface/keyboard.js

@@ -384,11 +384,14 @@ $(document).on('keydown mousedown', function(e) {
 
 	if (input_focus) {
 		//User Editing Anything
+
+		//Tab
 		if (e.which == 9 && !open_dialog) {
-			var all_inputs = $('.tab_target:visible')
+			var all_inputs = $('.tab_target:visible:not(.prism-editor-wrapper), .prism-editor-wrapper.tab_target:visible > pre[contenteditable="true"]')
 			var index = all_inputs.index(input_focus)+1;
 			if (index >= all_inputs.length) index = 0;
 			var next = $(all_inputs.get(index))
+
 			if (next.length) {
 				if (next.hasClass('cube_name')) {
 					var target = Outliner.root.findRecursive('uuid', next.parent().parent().attr('id'))
@@ -404,7 +407,7 @@ $(document).on('keydown mousedown', function(e) {
 						next.click();
 					}, 50)
 				} else {
-					next.click();
+					next.focus().click();
 				}
 				return;
 			}

js/interface/panels.js

@@ -5,6 +5,7 @@ class Panel {
 		this.id = data.id || 'new_panel';
 		this.icon = data.icon;
 		this.menu = data.menu;
+		this.growable = data.growable;
 		this.name = tl(data.name ? data.name : `panel.${this.id}`);
 		this.selection_only = data.selection_only == true;
 		this.condition = data.condition;
@@ -395,7 +396,16 @@ function setupPanels() {
 			}},
 			methods: {
 				updateInput(axis, value) {
+					console.log(this.keyframes[0].x)
 					updateKeyframeValue(axis, value)
+				},
+				getKeyframeInfos() {
+					let list =  [tl('timeline.'+this.channel)];
+					if (this.keyframes.length > 1) list.push(this.keyframes.length);
+					/*if (this.keyframes[0].color >= 0) {
+						list.push(tl(`cube.color.${markerColors[this.keyframes[0].color].name}`))
+					}*/
+					return list.join(', ')
 				}
 			},
 			computed: {
@@ -418,7 +428,7 @@ function setupPanels() {
 
 					<template v-if="channel != false">
 
-						<p id="keyframe_type_label">{{ tl('panel.keyframe.type', [tl('timeline.'+channel)]) }}</p>
+						<p id="keyframe_type_label">{{ tl('panel.keyframe.type', [getKeyframeInfos()]) }}</p>
 
 						<div class="bar flex" id="keyframe_bar_x" v-if="keyframes[0].animator instanceof BoneAnimator">
 							<label class="color_x" style="font-weight: bolder">X</label>
@@ -439,7 +449,7 @@ function setupPanels() {
 						</div>
 						<div class="bar flex" id="keyframe_bar_locator" v-if="channel == 'particle'">
 							<label>{{ tl('data.locator') }}</label>
-							<input type="text" class="dark_bordered code keyframe_input tab_target" v-model="keyframes[0].locator" @input="updateInput('locator', $event)">
+							<input @focus="focus()" @focusout="focusout()" type="text" class="dark_bordered code keyframe_input tab_target" v-model="keyframes[0].locator" @input="updateInput('locator', $event)">
 						</div>
 						<div class="bar flex" id="keyframe_bar_script" v-if="channel == 'particle'">
 							<label>{{ tl('timeline.pre_effect_script') }}</label>
@@ -458,7 +468,29 @@ function setupPanels() {
 		id: 'variable_placeholders',
 		icon: 'fas.fa-stream',
 		condition: {modes: ['animate']},
+		growable: true,
 		toolbars: {
+		},
+		component: {
+			name: 'panel-placeholders',
+			components: {VuePrismEditor},
+			data() { return {
+				text: ''
+			}},
+			template: `
+				<div style="flex-grow: 1; display: flex; flex-direction: column;">
+					<p>{{ tl('panel.variable_placeholders.info') }}</p>
+					<vue-prism-editor
+						id="var_placeholder_area"
+						class="molang_input dark_bordered tab_target"
+						v-model="text"
+						language="molang"
+						:line-numbers="false"
+						style="flex-grow: 1;"
+						onkeyup="Animator.preview()"
+					/>
+				</div>
+			`
 		}
 	})
 	Interface.Panels.display = new Panel({