Added own twig/smarty packages for cm6 lang support

resources/js/code/languages.js

@@ -23,15 +23,16 @@ import {ruby} from '@codemirror/legacy-modes/mode/ruby';
 import {rust} from '@codemirror/legacy-modes/mode/rust';
 import {scheme} from '@codemirror/legacy-modes/mode/scheme';
 import {shell} from '@codemirror/legacy-modes/mode/shell';
+import {smarty} from "@ssddanbrown/codemirror-lang-smarty";
 import {standardSQL, pgSQL, msSQL, mySQL, sqlite, plSQL} from '@codemirror/legacy-modes/mode/sql';
 import {stex} from '@codemirror/legacy-modes/mode/stex';
+import {swift} from "@codemirror/legacy-modes/mode/swift";
 import {toml} from '@codemirror/legacy-modes/mode/toml';
-// import {twig, smarty} from '@codemirror/legacy-modes/mode/php'; // TODO
+import {twig} from "@ssddanbrown/codemirror-lang-twig";
 import {vb} from '@codemirror/legacy-modes/mode/vb';
 import {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
 import {xml, html} from '@codemirror/legacy-modes/mode/xml';
 import {yaml} from '@codemirror/legacy-modes/mode/yaml';
-import {swift} from "@codemirror/legacy-modes/mode/swift";
 
 
 // Mapping of possible languages or formats from user input to their codemirror modes.
@@ -97,10 +98,12 @@ const modeMap = {
     scheme: () => StreamLanguage.define(scheme),
     shell: () => StreamLanguage.define(shell),
     sh: () => StreamLanguage.define(shell),
+    smarty: () => StreamLanguage.define(smarty),
     stext: () => StreamLanguage.define(stex),
     swift: () => StreamLanguage.define(swift),
     toml: () => StreamLanguage.define(toml),
     ts: () => StreamLanguage.define(typescript),
+    twig: () => twig(),
     typescript: () => StreamLanguage.define(typescript),
     sql: () => StreamLanguage.define(standardSQL),
     sqlite: () => StreamLanguage.define(sqlite),

resources/js/code/setups.js

@@ -6,6 +6,8 @@ import {defaultHighlightStyle, syntaxHighlighting, bracketMatching,
 import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
 import {EditorState} from "@codemirror/state"
 
+import {defaultLight} from "./themes";
+
 export function viewer() {
     return [
         lineNumbers(),
@@ -14,7 +16,7 @@ export function viewer() {
         history(),
         drawSelection(),
         dropCursor(),
-        syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+        syntaxHighlighting(defaultLight, {fallback: true}),
         bracketMatching(),
         rectangularSelection(),
         highlightActiveLine(),

resources/js/code/themes.js

@@ -0,0 +1,46 @@
+import {tags} from "@lezer/highlight";
+import {HighlightStyle} from "@codemirror/language";
+
+export const defaultLight = HighlightStyle.define([
+    { tag: tags.meta,
+        color: "#388938" },
+    { tag: tags.link,
+        textDecoration: "underline" },
+    { tag: tags.heading,
+        textDecoration: "underline",
+        fontWeight: "bold" },
+    { tag: tags.emphasis,
+        fontStyle: "italic" },
+    { tag: tags.strong,
+        fontWeight: "bold" },
+    { tag: tags.strikethrough,
+        textDecoration: "line-through" },
+    { tag: tags.keyword,
+        color: "#708" },
+    { tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+        color: "#219" },
+    { tag: [tags.literal, tags.inserted],
+        color: "#164" },
+    { tag: [tags.string, tags.deleted],
+        color: "#a11" },
+    { tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+        color: "#e40" },
+    { tag: tags.definition(tags.variableName),
+        color: "#00f" },
+    { tag: tags.local(tags.variableName),
+        color: "#30a" },
+    { tag: [tags.typeName, tags.namespace],
+        color: "#085" },
+    { tag: tags.className,
+        color: "#167" },
+    { tag: [tags.special(tags.variableName), tags.macroName],
+        color: "#256" },
+    { tag: tags.definition(tags.propertyName),
+        color: "#00c" },
+    { tag: tags.compareOperator,
+        color: "#708" },
+    { tag: tags.comment,
+        color: "#940" },
+    { tag: tags.invalid,
+        color: "#f00" }
+]);

resources/js/code/views.js

@@ -24,7 +24,7 @@ export function createView(config) {
 }
 
 /**
- * Ge the theme extension to use for editor view instance.
+ * Get the theme extension to use for editor view instance.
  * @returns {Extension}
  */
 function getTheme(viewParentEl) {