@lvce-editor/find-widget-worker 1.22.0 → 1.23.0

package/dist/findWidgetWorkerMain.js

@@ -843,6 +843,9 @@ const createMockRpc = ({
   const invoke = (method, ...params) => {
     invocations.push([method, ...params]);
     const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
     return command(...params);
   };
   const mockRpc = {
@@ -983,7 +986,10 @@ const create$1 = (uid, x, y, width, height, parentUid) => {
     preserveCase: false,
     resizerPointerDown: false,
     minWidth: 400,
-    history: []
+    history: [],
+    inputErrorMessage: '',
+    inputHeight: 24,
+    inputLineHeight: 24
   };
   set$3(uid, state, state);
   return state;
@@ -994,7 +1000,7 @@ const isEqual$7 = (oldState, newState) => {
 };
 
 const isEqual$6 = (oldState, newState) => {
-  return newState.width === newState.width && oldState.height === newState.height && oldState.x === newState.x;
+  return newState.width === newState.width && oldState.height === newState.height && oldState.x === newState.x && oldState.inputHeight === newState.inputHeight;
 };
 
 const isEqual$5 = (oldState, newState) => {
@@ -1340,7 +1346,18 @@ const buildRegex = (searchString, options) => {
   const flags = matchCase ? 'g' : 'gi';
   const pattern = useRegularExpression ? searchString : escapeRegExpCharacters(searchString);
   const wrapped = matchWholeWord ? `\\b(?:${pattern})\\b` : pattern;
-  return new RegExp(wrapped, flags);
+  try {
+    const regex = new RegExp(wrapped, flags);
+    return {
+      regex,
+      error: ''
+    };
+  } catch (error) {
+    return {
+      regex: new RegExp(''),
+      error: `${error}`
+    };
+  }
 };
 
 const findRegexMatches = (lines, regex) => {
@@ -1367,37 +1384,70 @@ const findRegexMatches = (lines, regex) => {
 
 const findMatches = (lines, searchString, options) => {
   if (searchString.length === 0) {
-    return new Uint32Array([]);
+    return {
+      matches: new Uint32Array([]),
+      error: ''
+    };
   }
-  const regex = buildRegex(searchString, options);
-  return findRegexMatches(lines, regex);
+  const {
+    regex
+  } = buildRegex(searchString, options);
+  const matches = findRegexMatches(lines, regex);
+  return {
+    matches,
+    error: ''
+  };
 };
 
 const getMatchCount = matches => {
   return matches.length / 2;
 };
 
+const measureTextHeight = (value, lineHeight) => {
+  if (!value) {
+    return lineHeight;
+  }
+  // TODO for single line width, can use offscreencanvas to measure text width
+  // for multiline text, can ask renderer process to measure text height
+  const lines = value.split('\n');
+  return lines.length * lineHeight;
+};
+
 const refresh$1 = (state, value, inputSource) => {
   const {
     lines,
     matchCase,
     useRegularExpression,
-    matchWholeWord
+    matchWholeWord,
+    inputLineHeight
   } = state;
   const options = {
     matchCase,
     useRegularExpression,
     matchWholeWord
   };
-  const matches = findMatches(lines, value, options);
+  const {
+    matches,
+    error
+  } = findMatches(lines, value, options);
+  const inputHeight = measureTextHeight(value, inputLineHeight);
+  if (error) {
+    return {
+      ...state,
+      inputErrorMessage: error,
+      inputHeight
+    };
+  }
   const matchCount = getMatchCount(matches);
   return {
     ...state,
+    inputErrorMessage: error,
+    inputHeight,
+    inputSource,
+    matchCount,
     matches,
     matchIndex: 0,
-    matchCount,
-    value,
-    inputSource
+    value
   };
 };
 
@@ -1564,10 +1614,6 @@ const handleClickClose = state => {
   return close$1(state);
 };
 
-const handleInput = (state, value, inputSource = User) => {
-  return refresh(state, value, inputSource);
-};
-
 const handleFindWidgetFocus = (state, focusKey) => {
   if (state.focus === focusKey) {
     return state;
@@ -1748,6 +1794,10 @@ const focusPreviousElement = state => {
   return focusElement(state, previousFocus);
 };
 
+const handleInput = (state, value, inputSource = User) => {
+  return refresh(state, value, inputSource);
+};
+
 const handleReplaceInput = (state, value, inputSource = User) => {
   return {
     ...state,
@@ -2103,8 +2153,8 @@ const SearchToggleButtonExpanded = 'SearchToggleButtonExpanded';
 const MaskIconChevronDown = 'MaskIconChevronDown';
 const MaskIconChevronRight = 'MaskIconChevronRight';
 
-const getFindMatchCountClassName = (matchCount, value) => {
-  if (value && matchCount === 0) {
+const getFindMatchCountClassName = (matchCount, hasValue) => {
+  if (hasValue && matchCount === 0) {
     return mergeClassNames(FindWidgetMatchCount, FindWidgetMatchCountEmpty);
   }
   return FindWidgetMatchCount;
@@ -2170,7 +2220,7 @@ const getSearchFieldButtonVirtualDom = button => {
   }];
 };
 
-const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '') => {
+const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, outsideButtons, onFocus = '', extraClassName = '') => {
   const dom = [{
     type: Div,
     className: SearchField,
@@ -2178,7 +2228,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
     childCount: 2
   }, {
     type: TextArea,
-    className: MultilineInputBox,
+    className: mergeClassNames(MultilineInputBox, extraClassName),
     spellcheck: false,
     autocapitalize: 'off',
     autocorrect: 'off',
@@ -2198,14 +2248,15 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
   return dom;
 };
 
-const getFindWidgetFindVirtualDom = (matchCountText, buttons, fieldButtons, matchCount, value) => {
+const getFindWidgetFindVirtualDom = (matchCountText, buttons, fieldButtons, matchCount, hasValue, hasError) => {
+  const extraClassName = hasError ? `InputValidationError` : '';
   return [{
     type: Div,
     className: FindWidgetFind,
     childCount: 5
-  }, ...getSearchFieldVirtualDom(SearchValue, find(), HandleInput, fieldButtons, [], HandleFocus), {
+  }, ...getSearchFieldVirtualDom(SearchValue, find(), HandleInput, fieldButtons, [], HandleFocus, extraClassName), {
     type: Div,
-    className: getFindMatchCountClassName(matchCount, value),
+    className: getFindMatchCountClassName(matchCount, hasValue),
     childCount: 1
   }, text(matchCountText), ...buttons.flatMap(getIconButtonVirtualDom)];
 };
@@ -2260,12 +2311,12 @@ const parentNode = {
   childCount: 3,
   role: Group
 };
-const getFindWidgetVirtualDom = (matchCountText, replaceExpanded, findButtons, findFieldButtons, replaceButtons, replaceFieldButtons, matchCount, value) => {
+const getFindWidgetVirtualDom = (matchCountText, replaceExpanded, findButtons, findFieldButtons, replaceButtons, replaceFieldButtons, matchCount, value, hasError) => {
   return [parentNode, ...getResizerVirtualDom(), ...getSearchToggleButtonVirtualDom(replaceExpanded, 'handleClickToggleReplace'), {
     type: Div,
     className: FindWidgetRight,
     childCount: replaceExpanded ? 2 : 1
-  }, ...getFindWidgetFindVirtualDom(matchCountText, findButtons, findFieldButtons, matchCount, value), ...getFindWidgetReplaceVirtualDom(replaceExpanded, replaceButtons)];
+  }, ...getFindWidgetFindVirtualDom(matchCountText, findButtons, findFieldButtons, matchCount, Boolean(value), hasError), ...getFindWidgetReplaceVirtualDom(replaceExpanded, replaceButtons)];
 };
 
 const getMatchCountText = (matchIndex, matchCount) => {
@@ -2284,7 +2335,8 @@ const renderContent = (oldState, newState) => {
     matchCase,
     matchWholeWord,
     useRegularExpression,
-    preserveCase
+    preserveCase,
+    inputErrorMessage
   } = newState;
   const matchCountText = getMatchCountText(newState.matchIndex, newState.matchCount);
   const {
@@ -2297,7 +2349,8 @@ const renderContent = (oldState, newState) => {
     findFieldButtons,
     replaceFieldButtons
   } = getFindWidgetButtons(findButtonsEnabled, replaceButtonsEnabled, matchCase, matchWholeWord, useRegularExpression, preserveCase);
-  const dom = getFindWidgetVirtualDom(matchCountText, replaceExpanded, findButtons, findFieldButtons, replaceButtons, replaceFieldButtons, matchCount, value);
+  const hasError = Boolean(inputErrorMessage);
+  const dom = getFindWidgetVirtualDom(matchCountText, replaceExpanded, findButtons, findFieldButtons, replaceButtons, replaceFieldButtons, matchCount, value, hasError);
   return [SetDom2, uid, dom];
 };
 
@@ -2307,14 +2360,16 @@ const renderCss = (oldState, newState) => {
     width,
     height,
     x,
-    y
+    y,
+    inputHeight
   } = newState;
   const css = `:root {
-    --FindWidgetWidth: ${width}px;
-    --FindWidgetHeight: ${height}px;
-    --FindWidgetX: ${x}px;
-    --FindWidgetY: ${y}px;
-  }`;
+  --FindWidgetWidth: ${width}px;
+  --FindWidgetHeight: ${height}px;
+  --FindWidgetX: ${x}px;
+  --FindWidgetY: ${y}px;
+  --FindWidgetInputHeight: ${inputHeight}px;
+}`;
   return [SetCss, uid, css];
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/find-widget-worker",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Web Worker for the find widget in Lvce Editor",
   "repository": {
     "type": "git",