@fw-components/formula-editor 2.0.7-formula-editor.1 → 2.0.7-formula-editor.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/formula-editor/src/formula-editor.js +15 -10
  2. package/dist/formula-editor/src/parser.js +0 -1
  3. package/dist/formula-editor/src/recommendor.js +3 -5
  4. package/dist/formula-editor/src/suggestion-menu.js +62 -26
  5. package/package.json +3 -3
package/dist/formula-editor/src/formula-editor.js CHANGED
@@ -56,6 +56,19 @@ let FormulaEditor = class FormulaEditor extends LitElement {
56
56
  ? (currentIndex - 1 + this._recommendations.length) % this._recommendations.length
57
57
  : currentIndex;
58
58
  this._selectedRecommendation = this._recommendations[newIndex];
59
+ this.scrollToSelectedRecommendation(newIndex);
60
+ }
61
+ scrollToSelectedRecommendation(index) {
62
+ const suggestionMenu = this.shadowRoot?.querySelector("suggestion-menu");
63
+ if (suggestionMenu) {
64
+ const listItem = suggestionMenu.shadowRoot?.querySelectorAll("li")[index];
65
+ if (listItem) {
66
+ listItem.scrollIntoView({
67
+ block: "nearest",
68
+ inline: "nearest",
69
+ });
70
+ }
71
+ }
59
72
  }
60
73
  handleKeyboardEvents(event) {
61
74
  if (event.code == "Tab" && this._recommendations?.length == 1) {
@@ -104,6 +117,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
104
117
  this._recommendations = parseOutput.recommendations;
105
118
  this._formattedContent = parseOutput.formattedContent;
106
119
  this.errorString = parseOutput.errorString;
120
+ // console.log("this._recommendation",parseOutput)
107
121
  /**
108
122
  * Don't modify the text stream manually if the text is being composed,
109
123
  * unless the user manually chooses to do so by selecting a suggestion.
@@ -129,6 +143,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
129
143
  detail: {
130
144
  formulaString: this.content,
131
145
  error: this.errorString,
146
+ recommendations: this._recommendations
132
147
  },
133
148
  bubbles: true,
134
149
  }));
@@ -169,16 +184,6 @@ let FormulaEditor = class FormulaEditor extends LitElement {
169
184
  ></div>
170
185
  ${this._recommendations
171
186
  ? html ` <suggestion-menu
172
- style="
173
- position: absolute;
174
- left: ${(this.currentCursorRect?.left ?? 0) -
175
- (this.editor?.getClientRect()[0]?.left ?? 0) +
176
- "px"};
177
- top: ${(this.currentCursorRect?.top ??
178
- 0 - (this.editor?.getClientRect()[0]?.top ?? 0)) +
179
- window.scrollY +
180
- "px"};
181
- "
182
187
  .recommendations=${this._recommendations}
183
188
  .currentSelection=${this._selectedRecommendation}
184
189
  .onClickRecommendation=${(e) => this.onClickRecommendation(e)}
package/dist/formula-editor/src/parser.js CHANGED
@@ -36,7 +36,6 @@ export class Parser {
36
36
  newCursorPosition: prevCurPos ?? -1,
37
37
  errorString: null,
38
38
  };
39
- console.log(tokens);
40
39
  tokens.forEach((token) => {
41
40
  // It is a number is either it's in the defined variables, or
42
41
  // it's a valid number literal.
package/dist/formula-editor/src/recommendor.js CHANGED
@@ -1,16 +1,14 @@
1
- import { Fzf } from 'fzf';
1
+ import { matchSorter } from 'match-sorter';
2
2
  export class Recommender {
3
3
  constructor(variables, minSuggestionLen) {
4
4
  this._minimumSuggestionLength = minSuggestionLen > 0 ? minSuggestionLen : 1;
5
- const variableList = Array.from(variables.keys());
6
- this._fzf = new Fzf(variableList);
5
+ this.variableList = Array.from(variables.keys());
7
6
  }
8
7
  getRecommendation(word) {
9
8
  if (word.length < this._minimumSuggestionLength) {
10
9
  return null;
11
10
  }
12
- const entries = this._fzf.find(word);
13
- const recommendations = entries.map(entry => entry.item);
11
+ const recommendations = matchSorter(this.variableList, word);
14
12
  if (recommendations.length === 0 ||
15
13
  (recommendations.length === 1 && recommendations[0] === word)) {
16
14
  return null;
package/dist/formula-editor/src/suggestion-menu.js CHANGED
@@ -14,35 +14,71 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
14
14
  this.currentSelection = "";
15
15
  }
16
16
  static { this.styles = css `
17
- ul {
18
- border: 1px solid var(--fe-suggestion-color, white);
19
- color: var(--fe-suggestion-color, #bab6c0);
20
- background-color: var(--fe-suggestion-background-color, #363537);
21
- box-sizing: border-box;
22
- width: fit-content;
23
- list-style-type: none;
24
- padding: 4px 0px;
25
- margin: 2px;
26
- }
17
+ ul {
18
+ position: relative;
19
+ border: 1px solid var(--fe-suggestion-color, white);
20
+ color: var(--fe-suggestion-color, #bab6c0);
21
+ background-color: var(--fe-suggestion-background-color, white);
22
+ box-sizing: border-box;
23
+ width: 20vw;
24
+ max-height: 25vh;
25
+ overflow-x: auto;
26
+ overflow-y: auto;
27
+ list-style-type: none;
28
+ padding: 0;
29
+ margin: 0;
30
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
31
+ border-radius: 5px;
32
+ z-index: 99999
33
+ }
27
34
 
28
- li {
29
- margin: 0px;
30
- padding: 2px 6px;
31
- cursor: pointer;
32
- }
35
+ li {
36
+ margin: 0;
37
+ padding: 0.5em 1rem;
38
+ cursor: pointer;
39
+ font-family: var(--theme-font);
40
+ font-size: var(--secondary-font-size, 16px);
41
+ color: var(--secondary-color, #bab6c0);
42
+ }
33
43
 
34
- li.selected {
35
- background-color: var(--fe-suggestion-selected-background-color, darkgrey);
36
- color: var(--fe-suggestion-selected-color, yellow);
37
- }
44
+ li:hover,
45
+ li:focus-visible {
46
+ font-weight: bold;
47
+ color: var(--fe-suggestion-focus-color, #69676c);
48
+ }
38
49
 
39
- li:focus-visible {
40
- /* outline: 1px solid red; */
41
- outline: 0px;
42
- color: var(--fe-suggestion-focus-color, #fce566);
43
- background-color: var(--fe-suggestion-focus-background-color, #69676c);
44
- }
45
- `; }
50
+ li.selected {
51
+ color: var(--fe-suggestion-focus-color, #69676c);
52
+ font-weight: bold;
53
+ }
54
+
55
+ li[focused] {
56
+ font-weight: bold;
57
+ }
58
+
59
+ /* Scrollbar styling */
60
+ ::-webkit-scrollbar {
61
+ width: 10px;
62
+ }
63
+
64
+ ::-webkit-scrollbar-track {
65
+ background: transparent;
66
+ }
67
+
68
+ ::-webkit-scrollbar-thumb {
69
+ background: #ccc;
70
+ border-radius: 5px;
71
+ }
72
+
73
+ ::-webkit-scrollbar-thumb:hover {
74
+ background: #aaa;
75
+ }
76
+
77
+ /* Optional shadow for the dropdown */
78
+ .content {
79
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
80
+ }
81
+ `; }
46
82
  handleKeydown(event, recommendation) {
47
83
  if (event.code == "Enter") {
48
84
  event.preventDefault();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fw-components/formula-editor",
3
- "version": "2.0.7-formula-editor.1",
3
+ "version": "2.0.7-formula-editor.3",
4
4
  "description": "A WYSIWYG type formula editor",
5
5
  "main": "dist/formula-editor/src/formula-builder.js",
6
6
  "publishConfig": {
@@ -15,8 +15,8 @@
15
15
  "dependencies": {
16
16
  "@fw-components/styles": "^2.0.7-formula-editor.0",
17
17
  "big.js": "^6.2.1",
18
- "fzf": "^0.5.2",
19
18
  "lit": "^2.1.2",
19
+ "match-sorter": "^8.0.0",
20
20
  "typescript": "^5.0.4"
21
21
  },
22
22
  "author": "The Fundwave Authors",
@@ -25,5 +25,5 @@
25
25
  "@types/big.js": "^6.1.6",
26
26
  "es-dev-server": "^2.1.0"
27
27
  },
28
- "gitHead": "ac3d8a9eb757e3b2b5001bd46e9e7003a323f46e"
28
+ "gitHead": "4dd78662768c796041ab77e9bdd75da41b7c32bf"
29
29
  }