feat: add tolgeeHighlight

package.json

@@ -47,6 +47,7 @@
     "@typescript-eslint/parser": "^6.14.0",
     "@uiw/react-codemirror": "^4.21.21",
     "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^8.2.2",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

src/App.tsx

@@ -5,7 +5,8 @@ import { EditorMulti } from "./editor/EditorMulti";
 
 function App() {
   const [value, setValue] = useState(
-    `{value, plural, one {I have # apple} other {I have # apples}}`
+    `I have {value, number, ::short} items in basket.
+This is <i>italic</i>.`
   );
   const [placeholders, setPlaceholders] = useState(true);
 

src/editor/Editor.tsx

@@ -7,30 +7,14 @@ import { tolgeeLinter } from "../playground/tolgeeLinter";
 import { PlaceholderPlugin } from "../parser/PlaceholderPlugin";
 import styled from "@emotion/styled";
 import { Placeholder } from "../parser/types";
+import { tolgeeHighlight } from "../parser/tolgeeHighlight";
+import { tolgeeThemeBase } from "../tolgee-editor";
 
 const StyledEditor = styled("div")`
-  font-size: 14px;
-
-  & .placeholder-widget {
-    border: 1px solid #2e2e2e4e;
-    border-radius: 10px;
-    padding: 1px 4px;
-    font-size: 12px;
-    user-select: none;
-  }
-
-  & .placeholder-tagOpen {
-    border-radius: 10px 0px 0px 10px;
-    padding-right: 2px;
-  }
-
-  & .placeholder-tagClose {
-    border-radius: 0px 10px 10px 0px;
-    padding-left: 2px;
-  }
-
-  & .placeholder-error {
-    background: #ff000054;
+  .cm-line {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol";
   }
 `;
 
@@ -70,6 +54,8 @@ export const Editor: React.FC<Props> = ({
           languageCompartment.of(tolgeeSyntax()),
           tolgeeLinter,
           compartment.current.of([]),
+          tolgeeThemeBase,
+          tolgeeHighlight,
         ],
       }),
     });

src/parser/PlaceholderPlugin.ts

@@ -22,16 +22,19 @@ class PlaceholderWidget extends WidgetType {
     this.value = value;
   }
   toDOM(): HTMLElement {
-    const span = document.createElement("span");
+    const spanOuter = document.createElement("span");
     let classes = `placeholder-widget placeholder-${this.value.type}`;
 
     if (this.value.error) {
       classes =
         classes + ` placeholder-error placeholder-error-${this.value.error}`;
     }
-    span.className = classes;
-    span.textContent = this.value.name || "#";
-    return span;
+    spanOuter.className = classes;
+
+    const spanInner = document.createElement("span");
+    spanInner.textContent = this.value.name || "#";
+    spanOuter.appendChild(spanInner);
+    return spanOuter;
   }
 }
 

src/parser/getTolgeePlurals.test.ts

@@ -0,0 +1,15 @@
+import { getTolgeePlurals } from "./getTolgeePlurals";
+
+function getText() {
+  return expect.getState().currentTestName!.replace("get tolgee plurals ", "");
+}
+
+function shouldBePlural() {
+  expect(getTolgeePlurals(getText())).not.toBeNull();
+}
+
+describe("get tolgee plurals", () => {
+  it("{variable, plural, other {test}}", () => {
+    shouldBePlural();
+  });
+});

src/parser/getTolgeePlurals.ts

@@ -12,9 +12,9 @@ import { TolgeeFormat } from "./types";
 const REQUIRED_NODES: Record<number, number | undefined> = {
   0: Expression,
   4: Param,
-  5: SelectFunction,
+  6: SelectFunction,
   // this also excludes 'offset:x'
-  6: SelectVariant,
+  8: SelectVariant,
 };
 
 function getNodeText(node: SyntaxNode, input: string) {

src/parser/tolgee.grammar

@@ -7,10 +7,10 @@ Expression { ExpressionOpen (FormatExpression | SelectExpression) ExpressionClos
 
 HtmlTag { HtmlTagOpen | HtmlTagClose }
 HtmlTagOpen { "<" TagName space? ">" }
-HtmlTagClose { "<" "/" TagName space? ">" }
+HtmlTagClose { "<" Slash TagName space? ">" }
 
-FormatExpression { space? Param space? ("," space? FormatFunction space? ("," (space? FormatStyle)+ space?)?)? }
-SelectExpression { space? Param space? "," space? SelectFunction space? "," (space? Offset)? (space? SelectVariant)+ space? }
+FormatExpression { space? Param space? (Sep space? FormatFunction space? (Sep (space? FormatStyle)+ space?)?)? }
+SelectExpression { space? Param space? Sep space? SelectFunction space? Sep (space? Offset)? (space? SelectVariant)+ space? }
 SelectVariant { VariantDescriptor space? "{" VariantContent "}" }
 VariantContent { nested_content? }
 
@@ -32,7 +32,8 @@ TagName { tag_name }
   "}"
   "<"
   ">"
-  "/"
+  Sep { "," }
+  Slash { "/" }
   offset_definition { "offset:" $[+-]? $[0-9]+ }
   plural_placeholder { '#' }
   // non-White_Space and non-PatternSyntax

src/parser/tolgeeHighlight.ts

@@ -0,0 +1,16 @@
+import { tags } from "@lezer/highlight";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+
+const VARIABLE_COLOR = "#008371";
+const TAG_COLOR = "#822343";
+
+export const tolgeeHighlight = syntaxHighlighting(
+  HighlightStyle.define([
+    { tag: tags.variableName, color: VARIABLE_COLOR },
+    { tag: tags.keyword, color: VARIABLE_COLOR },
+    { tag: tags.paren, color: VARIABLE_COLOR },
+    { tag: tags.separator, color: VARIABLE_COLOR },
+    { tag: tags.bracket, color: VARIABLE_COLOR },
+    { tag: tags.tagName, color: TAG_COLOR },
+  ])
+);