@lvce-editor/settings-view 1.18.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';
@@ -1085,7 +1106,7 @@ const KeyCode = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
-const Button$1 = 1;
+const Button = 1;
 const Div = 4;
 const H1 = 5;
 const Input = 6;
@@ -1100,7 +1121,7 @@ const Label = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
-  Button: Button$1,
+  Button,
   Div,
   H1,
   H3,
@@ -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,
@@ -1327,7 +1350,24 @@ const handleSettingChecked = (state, name, value, source = User) => {
   return handleSettingUpdate(state, name, value, source);
 };
 
+const Enum = 1;
+const String = 2;
+const Boolean$1 = 3;
+const Number$1 = 5;
+const Color = 6;
+const Url = 7;
+
 const handleSettingInput = (state, name, value, inputSource = User) => {
+  const {
+    items
+  } = state;
+
+  // TODO maybe have separate input functions for number and string inputs
+  const settingItem = items.find(item => item.id === name);
+  if (settingItem && settingItem.type === Number$1) {
+    const numberValue = value === '' ? '' : Number(value);
+    return handleSettingUpdate(state, name, numberValue, inputSource);
+  }
   return handleSettingUpdate(state, name, value, inputSource);
 };
 
@@ -1434,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
@@ -1683,6 +1728,7 @@ const RendererWorker = {
   searchFileHtml,
   searchFileMemory,
   sendMessagePortToEditorWorker,
+  sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker,
   sendMessagePortToFileSystemWorker,
   sendMessagePortToMarkdownWorker,
@@ -1723,13 +1769,6 @@ const TextEditorTab = 'text-editor';
 const WindowTab = 'window';
 const WorkbenchTab = 'workbench';
 
-const Enum = 1;
-const String = 2;
-const Boolean$1 = 3;
-const Number$1 = 5;
-const Color = 6;
-const Url = 7;
-
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -2841,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(),
@@ -2925,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(),
@@ -3898,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,
@@ -3931,11 +3998,10 @@ const {
   Viewlet
 } = ClassNames;
 const Badge = 'Badge';
-const Button = 'Button';
 const CheckBox = 'CheckBox';
-const Disabled = 'Disabled';
+const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
-const InputButton = 'InputButton';
+const InputBoxError = 'InputBoxError';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -3979,15 +4045,20 @@ const HandleScroll = 'handleScroll';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
 
-const enabledClass = mergeClassNames(Button, InputButton, SearchFieldButton);
-const disabledClass = mergeClassNames(enabledClass, Disabled);
+const enabledClass = SearchFieldButton;
+const disabledClass = mergeClassNames(enabledClass, 'SearchFieldButtonDisabled');
 const getClearButtonClassName = hasSearchValue => {
   if (hasSearchValue) {
-    return disabledClass;
+    return enabledClass;
   }
-  return enabledClass;
+  return disabledClass;
 };
 
+const icon = {
+  type: VirtualDomElements.Div,
+  className: mergeClassNames(MaskIcon, MaskIconClearAll),
+  childCount: 0
+};
 const getSettingsInputButtonsDom = hasSearchValue => {
   return [{
     type: VirtualDomElements.Button,
@@ -3997,18 +4068,14 @@ const getSettingsInputButtonsDom = hasSearchValue => {
     name: Clear$1,
     disabled: !hasSearchValue,
     onClick: HandleClickClear
-  }, {
-    type: VirtualDomElements.Div,
-    className: mergeClassNames(MaskIcon, MaskIconClearAll),
-    childCount: 0
-  }];
+  }, icon];
 };
 
 const getSettingsInputDom = () => {
   const placeholder = searchSettings();
   return [{
     type: VirtualDomElements.Input,
-    className: mergeClassNames(InputBox, SettingsSearchInput),
+    className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
     childCount: 0,
     name: SettingsSearch,
@@ -4017,21 +4084,31 @@ const getSettingsInputDom = () => {
   }];
 };
 
-const getChildCount = hasSearchValue => {
+const getChildCount$1 = hasSearchValue => {
   return hasSearchValue ? 3 : 2;
 };
 const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
-  const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
-  const childCount = getChildCount(hasSearchValue);
+  const childCount = getChildCount$1(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsHeader,
     childCount: 1
   }, {
     type: VirtualDomElements.Div,
-    className: SettingsInputWrapper,
+    className: mergeClassNames(SettingsInputWrapper, 'SearchField'),
     childCount
-  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(hasSearchValue), ...badgeDom];
+  }, ...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 => {
@@ -4043,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
@@ -4062,7 +4142,7 @@ const getItemCheckBoxVirtualDom = item => {
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: CheckBox,
+    className: checkBoxClassName,
     childCount: 0,
     id: domId,
     inputType: 'checkbox',
@@ -4072,7 +4152,7 @@ const getItemCheckBoxVirtualDom = item => {
     type: VirtualDomElements.Label,
     childCount: 1,
     htmlFor: domId
-  }, text(description)];
+  }, text(description), ...getErrorMessageDom(errorMessage)];
 };
 
 const parent = {
@@ -4097,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 => {
@@ -4134,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 => {
@@ -4178,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
@@ -4216,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 = () => {
@@ -4230,7 +4335,7 @@ const getItemUnknownVirtualDom = () => {
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 1,
-    role: 'group'
+    role: AriaRoles.Group
   }, text(unknownSettingType())];
 };
 
@@ -4239,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 => {
@@ -4296,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 [{
@@ -4398,13 +4506,17 @@ const enabledTypes = [Number$1, String, Color];
 const renderSettingValues = (oldState, newState) => {
   const {
     filteredItems,
-    id
+    id,
+    preferences
   } = newState;
-  const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
-  const inputValues = numericSettings.map(item => ({
-    name: item.id,
-    value: item.value
-  }));
+  const enabledSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
+  const inputValues = enabledSettings.map(item => {
+    const value = preferences[item.id] || item.value;
+    return {
+      name: item.id,
+      value
+    };
+  });
   return ['Viewlet.setInputValues', id, inputValues];
 };
 
@@ -4516,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,
@@ -4539,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.18.0",
+  "version": "1.20.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",