@lvce-editor/settings-view 1.19.0 → 1.20.0

package/dist/settingsViewWorkerMain.js

@@ -914,15 +914,14 @@ const terminate = () => {
   globalThis.close();
 };
 
-const isItemModified = (item, preferences) => {
-  return item.id in preferences;
-};
-const addModifiedProperty = (items, preferences) => {
-  return items.map(item => ({
-    ...item,
-    modified: isItemModified(item, preferences)
-  }));
+const filterBySearch = (items, searchValue) => {
+  if (!searchValue || !searchValue.trim()) {
+    return items;
+  }
+  const normalizedSearchValue = searchValue.toLowerCase().trim();
+  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
 };
+
 const filterByTab = (items, tabs) => {
   const selectedTab = tabs.find(tab => tab.selected);
   if (!selectedTab) {
@@ -930,17 +929,36 @@ const filterByTab = (items, tabs) => {
   }
   return items.filter(item => item.category === selectedTab.id);
 };
-const filterBySearch = (items, searchValue) => {
-  if (!searchValue || !searchValue.trim()) {
-    return items;
-  }
-  const normalizedSearchValue = searchValue.toLowerCase().trim();
-  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+
+const isItemModified = (item, preferences) => {
+  return item.id in preferences;
 };
-const getFilteredItems = (items, tabs, searchValue = '', preferences) => {
+const validateSettings = (items, modifiedSettings, preferences) => {
+  return items.map(item => {
+    const value = preferences[item.id] ?? item.value;
+    const errorMessage = item.validate ? item.validate(value) : '';
+    const hasError = errorMessage.length > 0;
+    const modified = isItemModified(item, modifiedSettings);
+    return {
+      id: item.id,
+      heading: item.heading,
+      description: item.description,
+      type: item.type,
+      value: item.value,
+      category: item.category,
+      options: item.options,
+      modified,
+      errorMessage,
+      hasError
+    };
+  });
+};
+
+const getFilteredItems = (items, tabs, searchValue, modifiedSettings, preferences) => {
   const tabFilteredItems = filterByTab(items, tabs);
-  const itemsWithModifiedProperty = addModifiedProperty(tabFilteredItems, preferences);
-  return filterBySearch(itemsWithModifiedProperty, searchValue);
+  const searchFilteredItems = filterBySearch(tabFilteredItems, searchValue);
+  const validated = validateSettings(searchFilteredItems, modifiedSettings, preferences);
+  return validated;
 };
 
 const User = 1;
@@ -952,10 +970,11 @@ const clear$1 = state => {
   const {
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const newSearchValue = '';
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     filteredItems,
@@ -1065,10 +1084,12 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const Group = 'group';
 const Tab$1 = 'tab';
 const TabList = 'tablist';
 const AriaRoles = {
   __proto__: null,
+  Group,
   Tab: Tab$1,
   TabList};
 const Viewlet$1 = 'Viewlet';
@@ -1164,10 +1185,11 @@ const handleClickTab = (state, name) => {
     items,
     tabs,
     searchValue,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
-  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
   return {
     ...state,
     tabs: updatedTabs,
@@ -1241,9 +1263,10 @@ const handleInput = (state, value, inputSource = User) => {
     items,
     tabs,
     history,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
-  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
   const {
     newHistory,
     newHistoryIndex
@@ -1283,11 +1306,11 @@ const handleScroll = (state, scrollTop, inputSource = User) => {
   };
 };
 
-const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
-  if (oldModifiedSetings === newModifiedSettings) {
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems, oldPreferences, newPreferences) => {
+  if (oldModifiedSetings === newModifiedSettings && oldPreferences === newPreferences) {
     return oldFilteredItems;
   }
-  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings, newPreferences);
 };
 
 const getNewModifiedSettings = (modifiedSettings, name) => {
@@ -1314,7 +1337,7 @@ const handleSettingUpdate = (state, name, value, inputSource) => {
     ...preferences,
     [name]: value
   };
-  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems, preferences, newPreferences);
   return {
     ...state,
     inputSource,
@@ -1451,6 +1474,11 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
 };
+const sendMessagePortToErrorWorker = async (port, rpcId) => {
+  const command = 'HandleMessagePort.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
+};
 const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
   const command = 'Markdown.handleMessagePort';
   // @ts-ignore
@@ -1700,6 +1728,7 @@ const RendererWorker = {
   searchFileHtml,
   searchFileMemory,
   sendMessagePortToEditorWorker,
+  sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker,
   sendMessagePortToFileSystemWorker,
   sendMessagePortToMarkdownWorker,
@@ -2851,7 +2880,21 @@ const getSettingItemsEditor = () => {
     description: fontSizeDescription(),
     type: Number$1,
     value: 15,
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minFontSize = 10;
+      const maxFontSize = 100;
+      if (value < minFontSize) {
+        return 'font size must be at least 10';
+      }
+      if (value > maxFontSize) {
+        return 'font size must not be greater than 100';
+      }
+      return '';
+    }
   }, {
     id: 'editor.fontFamily',
     heading: fontFamily(),
@@ -2935,7 +2978,21 @@ const getSettingItemsEditor = () => {
     description: tabSizeDescription(),
     type: Number$1,
     value: '4',
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minTabSize = 1;
+      const maxTabSize = 8;
+      if (value < minTabSize) {
+        return `tab size must be at least ${minTabSize}`;
+      }
+      if (value > maxTabSize) {
+        return `tab size must not be greater than ${maxTabSize}`;
+      }
+      return '';
+    }
   }, {
     id: 'editor.insertSpaces',
     heading: insertSpaces(),
@@ -3908,7 +3965,7 @@ const loadContent = async (state, savedState) => {
   const items = await getSettingItems();
   const preferences = await getPreferences();
   const modifiedSettings = getModifiedSettings(preferences);
-  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
   return {
     ...state,
     filteredItems,
@@ -3942,7 +3999,9 @@ const {
 } = ClassNames;
 const Badge = 'Badge';
 const CheckBox = 'CheckBox';
+const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
+const InputBoxError = 'InputBoxError';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -4025,11 +4084,11 @@ const getSettingsInputDom = () => {
   }];
 };
 
-const getChildCount = hasSearchValue => {
+const getChildCount$1 = hasSearchValue => {
   return hasSearchValue ? 3 : 2;
 };
 const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
-  const childCount = getChildCount(hasSearchValue);
+  const childCount = getChildCount$1(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsHeader,
@@ -4041,6 +4100,17 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
   }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
 };
 
+const getErrorMessageDom = errorMessage => {
+  if (!errorMessage) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: ErrorMessage,
+    childCount: 1
+  }, text(errorMessage)];
+};
+
 const getInputId = id => {
   return id.replaceAll('.', '\\.');
 };
@@ -4050,16 +4120,19 @@ const getItemCheckBoxVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
-  const isModified = modified || false;
   const domId = getInputId(id);
+  const checkBoxClassName = hasError ? `${CheckBox} ${InputBoxError}` : CheckBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -4069,7 +4142,7 @@ const getItemCheckBoxVirtualDom = item => {
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: CheckBox,
+    className: checkBoxClassName,
     childCount: 0,
     id: domId,
     inputType: 'checkbox',
@@ -4079,7 +4152,7 @@ const getItemCheckBoxVirtualDom = item => {
     type: VirtualDomElements.Label,
     childCount: 1,
     htmlFor: domId
-  }, text(description)];
+  }, text(description), ...getErrorMessageDom(errorMessage)];
 };
 
 const parent = {
@@ -4104,30 +4177,33 @@ const getItemColorVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const colorInputClassName = hasError ? mergeClassNames('ColorInput', InputBoxError) : mergeClassNames('ColorInput');
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: mergeClassNames('ColorInput'),
+    className: colorInputClassName,
     inputType: 'color',
     placeholder: colorValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }, ...getItemLabelDom(domId, description)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getSettingsModifiedIndicatorDom = isModified => {
@@ -4141,32 +4217,46 @@ const getSettingsModifiedIndicatorDom = isModified => {
   }];
 };
 
+const getChildCount = (modified, hasError) => {
+  const modifiedChildCount = modified ? 1 : 0;
+  const errorChildCount = hasError ? 1 : 0;
+  const childCount = 3 + modifiedChildCount + errorChildCount;
+  return childCount;
+};
+const getInputClassName = hasError => {
+  if (hasError) {
+    return `${InputBox} ${InputBoxError}`;
+  }
+  return InputBox;
+};
 const getItemNumberVirtualDom = item => {
   const {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
-  const modifiedChildCount = isModified ? 1 : 0;
+  const inputClassName = getInputClassName(hasError);
+  const childCount = getChildCount(modified, hasError);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3 + modifiedChildCount,
-    role: 'group',
-    'data-modified': isModified
-  }, ...getSettingsModifiedIndicatorDom(isModified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    childCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
+  }, ...getSettingsModifiedIndicatorDom(modified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'number',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getOptionDom = option => {
@@ -4185,36 +4275,44 @@ const getItemSelectVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    options,
+    hasError,
+    errorMessage
   } = item;
-  const options = item.options || [];
   const domId = getInputId(id);
+  const selectClassName = hasError ? `${Select} ${InputBoxError}` : Select;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
-    className: Select,
-    childCount: options.length,
+    className: selectClassName,
+    childCount: options?.length || 0,
     id: domId,
     name: id,
     onChange: HandleSettingSelect
-  }, ...options.flatMap(getOptionDom)];
+  }, ...(options?.flatMap(getOptionDom) || []), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemStringVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    hasError,
+    errorMessage
   } = item;
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -4223,13 +4321,13 @@ const getItemStringVirtualDom = item => {
     childCount: 1
   }, text(description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'text',
     placeholder: stringValue(),
     childCount: 0,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemUnknownVirtualDom = () => {
@@ -4237,7 +4335,7 @@ const getItemUnknownVirtualDom = () => {
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 1,
-    role: 'group'
+    role: AriaRoles.Group
   }, text(unknownSettingType())];
 };
 
@@ -4246,26 +4344,29 @@ const getItemUrlVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'url',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemVirtualDom = item => {
@@ -4303,7 +4404,7 @@ const getSettingsNoResultsDom = searchValue => {
 };
 
 const getSettingsItemsDom = (items, searchValue) => {
-  if (items.length === 0 && searchValue.trim()) {
+  if (items.length === 0 && searchValue && searchValue.trim()) {
     return getSettingsNoResultsDom(searchValue);
   }
   return [{
@@ -4527,14 +4628,15 @@ const useNextSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   if (history.length === 0 || historyIndex >= history.length - 1) {
     return state;
   }
   const newHistoryIndex = historyIndex + 1;
   const newSearchValue = history[newHistoryIndex];
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,
@@ -4550,14 +4652,15 @@ const usePreviousSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   if (history.length === 0 || historyIndex <= 0) {
     return state;
   }
   const newHistoryIndex = historyIndex - 1;
   const newSearchValue = history[newHistoryIndex];
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",