Enable semantic patterns in UI

[simonhoellein]

Fix issue addressed in #8

---

To handle this correctly, we can use a unique character for internal processing that won't conflict with dots in attribute names. Here's a refined approach:

Implementation Steps

1. Normalization Function

   Use a unique character (e.g., __DOT__) for internal mapping of dots:

const normalizePattern = (pattern) => {
     return pattern.replace(/%{(\w+):([\w.]+)}/g, (match, patternName, attributeName) => {
       const normalizedAttributeName = attributeName.replace(/\./g, '__DOT__');
       return `%{${patternName}:${normalizedAttributeName}}`;
     });
   };

2. Use Normalized Patterns for Internal Processing

   When creating or processing patterns, use the normalized version:

const parseSample = async (lineNumber) => {
     try {
       let normalizedPattern = normalizePattern(pattern);
       let p = groks.createPattern(normalizedPattern);
       let sampleLine = samplesEditor.getLine(lineNumber);
       let result = await p.parse(sampleLine);
       if (!result) return null;

       let matches = p.regexp.searchSync(sampleLine).filter((m) => m.length > 0);
       matches.forEach((m, i) => {
         let bgColor = i === 0 ? "rgb(230, 180, 50, 0.3)" : "rgb(127, 191, 63, 0.4)";
         samplesEditor.markText(
           { line: lineNumber, ch: m.start },
           { line: lineNumber, ch: m.end },
           { css: "background-color: " + bgColor + " !important" }
         );
       });

       // Map results back to original attribute names
       let data = {};
       Object.keys(result).forEach((key) => {
         const originalKey = key.replace(/__DOT__/g, '.');
         data[originalKey] = +result[key] === 0 ? 0 : +result[key] || result[key];
       });
       return data;
     } catch (error) {
       console.error(error);
     }
   };

3. Display and Suggestion Handling

hintOptions: {
       completeSingle: false,
       hint: (editor) => {
         let cursorPos = editor.getDoc().getCursor();
         let lastTokenRegex = /%{(\w+):([\w.]*)$/g;
         let keyword = lastTokenRegex.exec(pattern.substr(0, cursorPos.ch));
         if (keyword !== null) {
           const activeCollections = collections.filter((c) => c.active).map((c) => c.value);
           return {
             from: { ...cursorPos, ch: cursorPos.ch - keyword[2].length },
             to: cursorPos,
             list: patterns
               .filter((p) => activeCollections.includes(p.collection))
               .filter((p) => RegExp(keyword[2], "i").test(p.id))
               .map((p) => p.id), // Keep the original format here
           };
         }
       },
     },

By using a unique placeholder like __DOT__ for internal mapping, you can ensure that the application processes patterns correctly while maintaining the original format for display and interaction with users. This approach should resolve any conflicts between dots in attribute names and internal processing needs.