Added code highlight for ftd in ide

.gitignore

@@ -3,3 +3,7 @@
 .idea
 .packages
 node_modules
+components/editor/command-k/parser.js
+components/editor/command-k/parser.terms.js
+components/editor/ftd/ftd-parser.js
+components/editor/ftd/ftd-parser.terms.js

components/editor/editor.mjs

@@ -17,6 +17,7 @@ import {
 } from "./panels/package/package-content";
 import {indentationMarkers} from '@replit/codemirror-indentation-markers';
 import {CommandEditor} from "./command-k/command-editor";
+import {ftd} from "./ftd/language";
 
 
 const SAVE_MODIFICATION_WAIT_TIME = 1000;
@@ -68,6 +69,9 @@ class CMEditor extends HTMLElement {
                 EditorView.updateListener.of(update),
             ];
             switch (language) {
+                case 'ftd':
+                    extensions.push(ftd());
+                    break;
                 case 'JavaScript':
                     extensions.push(javascript());
                     break;

components/editor/ftd/ftd.grammar

@@ -0,0 +1,73 @@
+@top Section {
+  SectionDefinition HeaderDefinition*
+  Comment*
+}
+
+
+
+
+HeaderDefinition {
+  HeaderType? HeaderName ":" HeaderValue?
+}
+
+
+HeaderType {
+  identifier
+}
+
+HeaderName {
+  identifier
+}
+
+HeaderValue {
+  noNewLine+
+}
+
+
+
+SectionDefinition {
+  "--" SectionType? SectionName ":" SectionCaption?
+}
+
+SectionType {
+  KeywordComponent | KeywordRecord | identifier
+}
+
+SectionName {
+  identifier
+}
+
+SectionCaption {
+  noNewLine+
+}
+
+Comment {
+  InlineComment | BlockComment | HeaderComment
+}
+
+InlineComment {
+  ";;" noNewLine*
+}
+
+BlockComment {
+  "/--" identifier "/--"
+}
+
+HeaderComment {
+  "/" identifier ":" noNewLine*
+}
+
+@tokens {
+    identifierChar { @asciiLetter | $[_$\u{a1}-\u{10ffff}] }
+
+    word { identifierChar (identifierChar | @digit)* }
+
+    identifier { word }
+
+    noNewLine { $[^\n] }
+
+    KeywordComponent { "component" }
+    KeywordRecord { "record" }
+
+    @precedence { KeywordComponent, KeywordRecord, identifier }
+}

components/editor/ftd/language.js

@@ -0,0 +1,50 @@
+
+// Define a basic FTD grammar with "-- import:" keyword
+import {LanguageSupport, LRLanguage, syntaxTree} from "@codemirror/language";
+import {styleTags, tags as t} from "@lezer/highlight";
+import {parser} from "./ftd.grammar";
+
+const ftdLanguage = LRLanguage.define({
+    parser: parser.configure({
+        // Basic tokenizer for FTD import grammar
+        props: [
+            styleTags({
+                KeywordComponent: t.literal,
+                KeywordRecord: t.literal,
+                SectionType: t.typeName,
+                SectionName: t.keyword,
+                SectionCaption: t.string,
+                Comment: t.comment,
+                HeaderType: t.meta,
+                HeaderName: t.number,
+                HeaderValue: t.string,
+            })
+        ]
+    }),
+});
+
+// Autocomplete support for FTD packages
+const ftdAutocomplete = ftdLanguage.data.of({
+    autocomplete: (context) => {
+        let nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+        if (nodeBefore.name == "Import") {
+            return {
+                from: nodeBefore.from,
+                options: [
+                    {label: "ftd_core", type: "variable"},
+                    {label: "ftd_ui", type: "variable"},
+                    {label: "ftd_utils", type: "variable"},
+                    {label: "ftd_data", type: "variable"}
+                ]
+            };
+        }
+        return null;
+    }
+});
+
+// Create a language support extension
+function ftd() {
+    return new LanguageSupport(ftdLanguage, [ftdAutocomplete]);
+}
+
+export {ftd}