@lvce-editor/find-widget-worker 1.22.0 → 2.0.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,12 @@ const create$1 = (uid, x, y, width, height, parentUid) => {
     preserveCase: false,
     resizerPointerDown: false,
     minWidth: 400,
-    history: []
+    history: [],
+    inputErrorMessage: '',
+    inputHeight: 15,
+    inputLineHeight: 15,
+    inputPaddingTop: 2,
+    inputPaddingBottom: 2
   };
   set$3(uid, state, state);
   return state;
@@ -994,7 +1002,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) => {
@@ -1040,9 +1048,18 @@ const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
 const TargetName = 'event.target.name';
 
+const Tab = 2;
+const Enter = 3;
+const KeyF = 34;
+const F4 = 60;
+
 const User = 1;
 const Script = 2;
 
+const CtrlCmd = 1 << 11 >>> 0;
+const Shift = 1 << 10 >>> 0;
+const Alt = 1 << 9 >>> 0;
+
 const EditorWorker$1 = 99;
 
 const FocusSelector = 'Viewlet.focusSelector';
@@ -1050,7 +1067,13 @@ const SetCss = 'Viewlet.setCss';
 const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
+const FocusFindWidget$1 = 16;
 const FocusFindWidgetCloseButton$1 = 48;
+const FocusFindWidgetNextMatchButton = 49;
+const FocusFindWidgetPreviousMatchButton = 50;
+const FocusFindWidgetReplace$1 = 43;
+const FocusFindWidgetReplaceAllButton$1 = 47;
+const FocusFindWidgetReplaceButton = 46;
 const FocusIgnoreFiles = 1012;
 const FocusSearchExcludeInput = 1008;
 const FocusSearchIncludeInput = 1007;
@@ -1340,7 +1363,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 +1401,76 @@ 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,
+    inputPaddingTop,
+    inputPaddingBottom
   } = state;
   const options = {
     matchCase,
     useRegularExpression,
     matchWholeWord
   };
-  const matches = findMatches(lines, value, options);
+  const {
+    matches,
+    error
+  } = findMatches(lines, value, options);
+  const textHeight = measureTextHeight(value, inputLineHeight);
+  const inputHeight = textHeight + inputPaddingBottom + inputPaddingTop;
+  const height = inputHeight + 5;
+  if (error) {
+    return {
+      ...state,
+      inputErrorMessage: error,
+      inputHeight,
+      height
+    };
+  }
   const matchCount = getMatchCount(matches);
   return {
     ...state,
+    inputErrorMessage: error,
+    inputHeight,
+    inputSource,
+    matchCount,
     matches,
     matchIndex: 0,
-    matchCount,
     value,
-    inputSource
+    height
   };
 };
 
@@ -1564,10 +1637,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 +1817,86 @@ const focusPreviousElement = state => {
   return focusElement(state, previousFocus);
 };
 
+const getKeyBindings = () => {
+  return [{
+    key: Enter,
+    command: 'FindWidget.focusNext',
+    when: FocusFindWidget$1
+  }, {
+    key: CtrlCmd | KeyF,
+    command: 'FindWidget.preventDefaultBrowserFind',
+    when: FocusFindWidget$1
+  }, {
+    key: Shift | F4,
+    command: 'FindWidget.focusPrevious',
+    when: FocusFindWidget$1
+  }, {
+    key: F4,
+    command: 'FindWidget.focusNext',
+    when: FocusFindWidget$1
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusToggleReplace',
+    when: FocusFindWidget$1
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusReplace',
+    when: FocusFindWidget$1
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusPreviousMatchButton',
+    when: FocusFindWidgetReplace$1
+  }, {
+    key: Alt | CtrlCmd | Enter,
+    command: 'FindWidget.replaceAll',
+    when: FocusFindWidgetReplace$1
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusNextMatchButton',
+    when: FocusFindWidgetPreviousMatchButton
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusReplace',
+    when: FocusFindWidgetPreviousMatchButton
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusPreviousMatchButton',
+    when: FocusFindWidgetNextMatchButton
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusCloseButton',
+    when: FocusFindWidgetNextMatchButton
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusNextMatchButton',
+    when: FocusFindWidgetCloseButton$1
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusReplaceButton',
+    when: FocusFindWidgetCloseButton$1
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusFind',
+    when: FocusFindWidgetReplace$1
+  }, {
+    key: Tab,
+    command: 'FindWidget.focusReplaceAllButton',
+    when: FocusFindWidgetReplaceButton
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusCloseButton',
+    when: FocusFindWidgetReplaceButton
+  }, {
+    key: Shift | Tab,
+    command: 'FindWidget.focusReplaceButton',
+    when: FocusFindWidgetReplaceAllButton$1
+  }];
+};
+
+const handleInput = (state, value, inputSource = User) => {
+  return refresh(state, value, inputSource);
+};
+
 const handleReplaceInput = (state, value, inputSource = User) => {
   return {
     ...state,
@@ -1834,7 +1983,8 @@ const loadContent = async (state, savedState) => {
     editorUid,
     editorWidth,
     editorX,
-    editorY
+    editorY,
+    inputLineHeight
   } = state;
   const {
     replacement,
@@ -1854,11 +2004,13 @@ const loadContent = async (state, savedState) => {
   const actualValue = value || getSelectedText(lines, selections);
   const matches = findMatchesCaseInsensitive(lines, actualValue);
   const matchCount = getMatchCount(matches);
+  const inputHeight = measureTextHeight(value, inputLineHeight);
   return {
     ...state,
     focus: FocusSearchInput,
     focused: true,
     height,
+    inputHeight,
     inputSource: Script,
     lines,
     matchCount,
@@ -2103,13 +2255,6 @@ const SearchToggleButtonExpanded = 'SearchToggleButtonExpanded';
 const MaskIconChevronDown = 'MaskIconChevronDown';
 const MaskIconChevronRight = 'MaskIconChevronRight';
 
-const getFindMatchCountClassName = (matchCount, value) => {
-  if (value && matchCount === 0) {
-    return mergeClassNames(FindWidgetMatchCount, FindWidgetMatchCountEmpty);
-  }
-  return FindWidgetMatchCount;
-};
-
 const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
@@ -2143,6 +2288,22 @@ const getIconButtonVirtualDom = iconButton => {
   }, getIconVirtualDom(icon)];
 };
 
+const emptyMatches = mergeClassNames(FindWidgetMatchCount, FindWidgetMatchCountEmpty);
+const getFindMatchCountClassName = (matchCount, hasValue) => {
+  if (hasValue && matchCount === 0) {
+    return emptyMatches;
+  }
+  return FindWidgetMatchCount;
+};
+
+const getMatchCountVirtualDom = (matchCountText, matchCount, hasValue) => {
+  return [{
+    type: Div,
+    className: getFindMatchCountClassName(matchCount, hasValue),
+    childCount: 1
+  }, text(matchCountText)];
+};
+
 const checkedClassName = mergeClassNames(SearchFieldButton, SearchFieldButtonChecked);
 const unCheckedClassName = SearchFieldButton;
 const getSearchFieldButtonVirtualDom = button => {
@@ -2170,7 +2331,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 +2339,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,16 +2359,17 @@ 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), {
+    childCount: 2
+  }, ...getSearchFieldVirtualDom(SearchValue, find(), HandleInput, fieldButtons, [], HandleFocus, extraClassName), {
     type: Div,
-    className: getFindMatchCountClassName(matchCount, value),
-    childCount: 1
-  }, text(matchCountText), ...buttons.flatMap(getIconButtonVirtualDom)];
+    className: 'FindWidgetActions',
+    childCount: 1 + buttons.length
+  }, ...getMatchCountVirtualDom(matchCountText, matchCount, hasValue), ...buttons.flatMap(getIconButtonVirtualDom)];
 };
 
 const getFindWidgetReplaceVirtualDom = (replaceExpanded, replaceButtons, replaceFieldButtons) => {
@@ -2260,12 +2422,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 +2446,8 @@ const renderContent = (oldState, newState) => {
     matchCase,
     matchWholeWord,
     useRegularExpression,
-    preserveCase
+    preserveCase,
+    inputErrorMessage
   } = newState;
   const matchCountText = getMatchCountText(newState.matchIndex, newState.matchCount);
   const {
@@ -2297,7 +2460,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 +2471,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];
 };
 
@@ -2523,17 +2689,18 @@ const commandMap = {
   'FindWidget.diff2': diff2,
   'FindWidget.dispose': dispose$1,
   'FindWidget.focusCloseButton': wrapCommand(focusCloseButton),
-  'FindWidget.focusFirst': wrapCommand(focusFirst),
   'FindWidget.focusElement': wrapCommand(focusElement),
+  'FindWidget.focusFirst': wrapCommand(focusFirst),
   'FindWidget.focusIndex': wrapCommand(focusIndex),
   'FindWidget.focusLast': wrapCommand(focusLast),
   'FindWidget.focusNext': wrapCommand(focusNext),
-  'FindWidget.focusPrevious': wrapCommand(focusPrevious),
   'FindWidget.focusNextElement': wrapCommand(focusNextElement),
+  'FindWidget.focusPrevious': wrapCommand(focusPrevious),
   'FindWidget.focusPreviousElement': wrapCommand(focusPreviousElement),
   'FindWidget.focusReplace': wrapCommand(focusReplace),
   'FindWidget.focusReplaceAllButton': wrapCommand(focusReplaceAllButton),
   'FindWidget.getCommandIds': getCommandIds,
+  'FindWidget.getKeyBindings': getKeyBindings,
   'FindWidget.handleBlur': wrapCommand(handleBlur),
   'FindWidget.handleClickButton': wrapCommand(handleClickButton),
   'FindWidget.handleClickClose': wrapCommand(handleClickClose),
@@ -2549,8 +2716,8 @@ const commandMap = {
   'FindWidget.replace': wrapCommand(replace$1),
   'FindWidget.replaceAll': wrapCommand(replaceAll$1),
   'FindWidget.resize': wrapCommand(resize),
-  'FindWidget.terminate': terminate,
   'FindWidget.saveState': wrapGetter(saveState),
+  'FindWidget.terminate': terminate,
   'FindWidget.toggleMatchCase': wrapCommand(toggleMatchCase),
   'FindWidget.toggleReplace': wrapCommand(toggleReplace$1),
   'FindWidget.toggleUseRegularExpression': wrapCommand(toggleUseRegularExpression)

package/package.json

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