feat: Add EJS support in anime text file (#135)

front-src/client/components/Anime/Timeline/Editor/Timeline/TextEditorModal.svelte

@@ -5,13 +5,13 @@
   import { createEventDispatcher } from "svelte";
   import Modal from "@/components/UI/Modal.svelte";
   import Button from "@/components/UI/Button.svelte";
+  import CodeMirror from "@/components/UI/CodeMirror.svelte";
 
   export let item;
   export let widget;
   export let opened;
 
   let tags = [];
-  let text = `${_("words.loading")}...`;
   let textarea;
 
   api.getEventNames().then((names) => {
@@ -22,16 +22,15 @@
   const dispatch = createEventDispatcher();
 
   $: title = opened && item.target.filename;
-  $: opened && fetchText(item.target.filename).then((txt) => (text = txt));
-
-  function onChange({ target }) {
-    dispatch("textFileChange", { item, text: target.value });
-  }
 
   function insertTag(tag) {
     const [start, end] = [textarea.selectionStart, textarea.selectionEnd];
     textarea.setRangeText(`$${tag}`, start, end, "select");
   }
+
+  function codeMirrorUpdate({ detail }) {
+    dispatch("textFileChange", { item, text: detail });
+  }
 </script>
 
 <Modal on:close opened="{opened}" {...$$restProps} title="{title}">
@@ -46,12 +45,11 @@
     {/each}
   </div>
   <div class="p-5">
-    <textarea
-      bind:this="{textarea}"
-      class="p-2 text-dark"
-      on:change="{onChange}"
-      style="min-width:50vw; min-height:250px"
-    >{text}</textarea>
+    {#await fetchText(item.target.filename)}
+      Loading....
+    {:then text}
+      <CodeMirror code="{text}" on:change="{codeMirrorUpdate}" />
+    {/await}
   </div>
   <div class="p-5 pt-0 flex">
     <Button

front-src/client/components/Anime/Timeline/libs/settings.js

@@ -15,6 +15,9 @@ export const defaultStyles = {
     "color",
     "opacity",
     "z-index",
+    "text-shadow",
+    "-webkit-text-stroke-width",
+    "-webkit-text-stroke-color",
   ],
   image: ["top", "left", "width", "height", "opacity", "z-index"],
   video: ["top", "left", "width", "height", "opacity", "z-index"],
@@ -63,7 +66,7 @@ export const styleDefs = {
     input: { type: "number", min: 1, step: 1 },
   },
   "font-size": {
-    default: 42,
+    default: 72,
     unit: "px",
     input: { type: "number", min: 0, step: 10 },
   },
@@ -81,7 +84,7 @@ export const styleDefs = {
     input: { type: "select", items: ["left", "center", "right"] },
   },
   "-webkit-text-stroke-width": {
-    default: 0,
+    default: 1,
     unit: "px",
     input: { type: "number", min: 0, step: 1 },
   },
@@ -90,11 +93,11 @@ export const styleDefs = {
     input: { type: "colorpicker" },
   },
   "text-shadow": {
-    default: "1px 1px 0 #111111",
+    default: "2px 2px 0 #111111",
     input: { type: "textshadow" },
   },
   color: {
-    default: "#420042",
+    default: "#eeeeee",
     input: { type: "colorpicker" },
   },
 };

front-src/client/components/UI/CodeMirror.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { _ } from "@/libs/i18next";
+  import CodeMirror from "codemirror";
+  import { debounce } from "throttle-debounce";
+  import { createEventDispatcher } from "svelte";
+
+  import "codemirror/mode/htmlembedded/htmlembedded";
+
+  import "codemirror/lib/codemirror.css";
+  import "codemirror/theme/material-palenight.css";
+
+  export let code;
+
+  const dispatch = createEventDispatcher();
+  const changeDebounce = debounce(500, change);
+
+  let codeArea = null;
+
+  $: if (codeArea) codeMirrorInit();
+
+  function change(value) {
+    dispatch("change", value.trim());
+  }
+
+  function codeMirrorInit() {
+    const myCodeMirror = CodeMirror.fromTextArea(codeArea, {
+      theme: "material-palenight",
+      mode: "application/x-ejs",
+      lineNumbers: true,
+      tabSize: 2,
+    });
+
+    myCodeMirror.on("changes", () => {
+      changeDebounce(myCodeMirror.getValue());
+    });
+  }
+</script>
+
+<textarea
+  bind:this="{codeArea}"
+  class="p-2 text-dark"
+  style="min-width:50vw; min-height:250px"
+>{code}</textarea>

front-src/client/components/Widgets/Twitch/Commands/EditCommandModal.svelte

@@ -1,43 +1,26 @@
 <script>
   import api from "@/api/twitch";
-  import { onMount } from "svelte";
   import { _ } from "@/libs/i18next";
-  import CodeMirror from "codemirror";
-  import { debounce } from "throttle-debounce";
   import Modal from "@/components/UI/Modal.svelte";
   import Input from "@/components/UI/Input.svelte";
-
-  import "codemirror/mode/htmlembedded/htmlembedded";
-  import "codemirror/lib/codemirror.css";
-  import "codemirror/theme/material-palenight.css";
+  import CodeMirror from "@/components/UI/CodeMirror.svelte";
 
   export let command;
   export let opened = false;
 
-  let codeArea = null;
-
-  function update(key, { target }) {
-    command[key] = target.value.trim();
+  function updateKey(key, value) {
+    command[key] = value.trim();
     api.updateCommand(command);
   }
 
-  const updateDebounce = debounce(500, update);
-
-  function codeMirrorInit() {
-    const myCodeMirror = CodeMirror.fromTextArea(codeArea, {
-      mode: "application/x-ejs",
-      lineNumbers: true,
-      theme: "material-palenight",
-      tabSize: 2,
-    });
+  function update(key, { target }) {
+    updateKey(key, target.value);
+  }
 
-    myCodeMirror.on("changes", () => {
-      const value = myCodeMirror.getValue();
-      updateDebounce("message", { target: { value } });
-    });
+  function codeMirrorUpdate({ detail }) {
+    updateKey("message", detail);
   }
 
-  $: if (codeArea) codeMirrorInit();
   $: message = command.message || "";
 </script>
 
@@ -77,11 +60,6 @@
         )
       </div>
     </div>
-    <textarea
-      class="p-2 text-dark"
-      bind:this="{codeArea}"
-      on:change="{update.bind(null, 'message')}"
-      style="min-width:50vw; min-height:250px"
-    >{message}</textarea>
+    <CodeMirror code="{message}" on:change="{codeMirrorUpdate}" />
   </div>
 </Modal>