Merge pull request #14 from OlegLustenko/feature/regexp

feat(settings): Add ability to select by Regular Expression

main.ts

@@ -13,9 +13,13 @@ import { renameFilesInObsidian } from './src/services/file.service';
 import { createPreviewElement } from './src/components/PreviewElement';
 import {
   getObsidianFilesByFolderName,
+  getObsidianFilesByRegExp,
   getObsidianFilesWithTagName,
 } from './src/services/obsidian.service';
 import { renderPreviewFiles } from './src/components/RenderPreviewFiles';
+import { createBackslash } from './src/components/RegExpBackslash';
+import { RegExpFlag } from './src/constants/RegExpFlags';
+import { RegExpFlagsSuggest } from './src/suggestions/RegExpFlagsSuggest';
 
 interface BulkRenamePluginSettings {
   folderName: string;
@@ -23,7 +27,11 @@ interface BulkRenamePluginSettings {
   existingSymbol: string;
   replacePattern: string;
   tags: string[];
-  viewType: 'tags' | 'folder';
+  regExpState: {
+    regExp: string;
+    flags: RegExpFlag[];
+  };
+  viewType: 'tags' | 'folder' | 'regexp';
 }
 
 const DEFAULT_SETTINGS: BulkRenamePluginSettings = {
@@ -31,6 +39,10 @@ const DEFAULT_SETTINGS: BulkRenamePluginSettings = {
   fileNames: [],
   existingSymbol: '',
   replacePattern: '',
+  regExpState: {
+    regExp: '',
+    flags: [],
+  },
   tags: [],
   viewType: 'folder',
 };
@@ -38,10 +50,15 @@ const DEFAULT_SETTINGS: BulkRenamePluginSettings = {
 const isViewTypeFolder = ({ settings }: BulkRenamePlugin) => {
   return settings.viewType === 'folder';
 };
+
 const isViewTypeTags = ({ settings }: BulkRenamePlugin) => {
   return settings.viewType === 'tags';
 };
 
+const isViewTypeRegExp = ({ settings }: BulkRenamePlugin) => {
+  return settings.viewType === 'regexp';
+};
+
 class BulkRenamePlugin extends Plugin {
   settings: BulkRenamePluginSettings;
 
@@ -97,6 +114,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
     this.renderTabs();
     this.renderFileLocation();
     this.renderTagNames();
+    this.renderRegExpInput();
     this.renderReplaceSymbol();
     this.renderFilesAndPreview();
     this.renderRenameFiles();
@@ -127,6 +145,17 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
           await this.plugin.saveSettings();
           this.display();
         });
+      })
+      .addButton((button) => {
+        button.setButtonText('Search by RegExp');
+        if (isViewTypeRegExp(this.plugin)) {
+          button.setCta();
+        }
+        button.onClick(async () => {
+          this.plugin.settings.viewType = 'regexp';
+          await this.plugin.saveSettings();
+          this.display();
+        });
       });
   }
 
@@ -138,7 +167,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       .setName('Folder location')
       .setDesc('Find files within the folder')
       .addSearch((cb) => {
-        new FolderSuggest(this.app, cb.inputEl);
+        new FolderSuggest(this.app, cb.inputEl, this.plugin);
         cb.setPlaceholder('Example: folder1/')
           .setValue(this.plugin.settings.folderName)
           .onChange((newFolder) => {
@@ -157,11 +186,11 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
     if (!isViewTypeTags(this.plugin)) {
       return;
     }
+
     new Setting(this.containerEl)
       .setName('Tag names ')
       .setDesc('all files with the tags will be found')
       .addSearch((cb) => {
-        // @ts-ignore
         cb.inputEl.addEventListener('keydown', (event) => {
           if (event.key !== 'Enter') {
             return;
@@ -185,6 +214,68 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       });
   }
 
+  renderRegExpInput() {
+    if (!isViewTypeRegExp(this.plugin)) {
+      return;
+    }
+
+    const desc = document.createDocumentFragment();
+    desc.append(
+      desc.createEl('b', {
+        text: 'Reg exp will match file Operation System path',
+      }),
+    );
+
+    new Setting(this.containerEl)
+      .setName('RegExp Search')
+      .setDesc(desc)
+      .addText((cb) => {
+        const backslash = createBackslash('/');
+        cb.inputEl.insertAdjacentElement('beforebegin', backslash);
+        // @ts-ignore
+        cb.inputEl.addEventListener('keydown', (event) => {
+          if (event.key !== 'Enter') {
+            return;
+          }
+          const target = event.target as HTMLInputElement;
+
+          this.plugin.settings.regExpState.regExp = target.value;
+          this.plugin.saveSettings();
+        });
+        cb.setPlaceholder('Put your RegExp here')
+          .setValue(this.plugin.settings.regExpState.regExp)
+          .onChange((newFolder) => {
+            this.plugin.settings.regExpState.regExp = newFolder;
+            this.plugin.saveSettings();
+            this.getFilesByRegExp();
+          });
+        // @ts-ignore
+        cb.inputEl.addClass('bulk_regexp');
+        cb.inputEl.onblur = this.reRenderPreview;
+      })
+      .addText((cb) => {
+        new RegExpFlagsSuggest(this.app, cb.inputEl, this.plugin);
+        const backslash = createBackslash('/');
+        cb.inputEl.insertAdjacentElement('beforebegin', backslash);
+        cb.inputEl.addEventListener('keydown', (event) => {
+          // @ts-ignore
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+          event.preventDefault();
+        });
+        cb.setPlaceholder('flags here')
+          // .setDisabled(true)
+          .setValue(this.plugin.settings.regExpState.flags.join(''))
+          .onChange((flag: RegExpFlag) => {
+            this.plugin.saveSettings();
+            this.getFilesByRegExp();
+            this.reRenderPreview();
+          });
+        cb.inputEl.addClass('bulk_regexp_flags');
+      })
+      .controlEl.addClass('bulk_regexp_control');
+  }
+
   renderReplaceSymbol() {
     const { settings } = this.plugin;
 
@@ -248,7 +339,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
   renderRenameFiles() {
     const desc = document.createDocumentFragment();
     desc.append(
-      'You are going to update all marked files and their directories',
+      'You are going to update all files from preview section',
       desc.createEl('br'),
       desc.createEl('b', {
         text: 'Warning: ',
@@ -296,6 +387,12 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       this.getFilesByTags();
       return;
     }
+
+    if (isViewTypeRegExp(this.plugin)) {
+      this.getFilesByRegExp();
+      return;
+    }
+
     this.getFilesByFolder();
   }
 
@@ -312,6 +409,13 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       this.plugin,
     );
   }
+
+  getFilesByRegExp() {
+    this.plugin.settings.fileNames = getObsidianFilesByRegExp(
+      this.app,
+      this.plugin,
+    );
+  }
 }
 
 export default BulkRenamePlugin;

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.3.5",
       "license": "MIT",
       "dependencies": {
-        "@popperjs/core": "^2.11.2"
+        "@popperjs/core": "^2.11.2",
+        "xregexp": "^5.1.1"
       },
       "devDependencies": {
         "@types/jest": "^28.1.8",
@@ -855,6 +856,18 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.19.1.tgz",
+      "integrity": "sha512-j2vJGnkopRzH+ykJ8h68wrHnEUmtK//E723jjixiAl/PPf6FhqY/vYRcMVlNydRKQjQsTsYEjpx+DZMIvnGk/g==",
+      "dependencies": {
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -3367,6 +3380,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/core-js-pure": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz",
+      "integrity": "sha512-7Fr74bliUDdeJCBMxkkIuQ4xfxn/SwrVg+HkJUAoNEXVqYLv55l6Af0dJ5Lq2YBUW9yKqSkLXaS5SYPK6MGa/A==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8421,6 +8444,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "node_modules/regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -10009,6 +10037,14 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/xregexp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.1.tgz",
+      "integrity": "sha512-fKXeVorD+CzWvFs7VBuKTYIW63YD1e1osxwQ8caZ6o1jg6pDAbABDG54LCIq0j5cy7PjRvGIq6sef9DYPXpncg==",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.16.5"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -10669,6 +10705,15 @@
         }
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.19.1.tgz",
+      "integrity": "sha512-j2vJGnkopRzH+ykJ8h68wrHnEUmtK//E723jjixiAl/PPf6FhqY/vYRcMVlNydRKQjQsTsYEjpx+DZMIvnGk/g==",
+      "requires": {
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -12606,6 +12651,11 @@
       "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
       "dev": true
     },
+    "core-js-pure": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz",
+      "integrity": "sha512-7Fr74bliUDdeJCBMxkkIuQ4xfxn/SwrVg+HkJUAoNEXVqYLv55l6Af0dJ5Lq2YBUW9yKqSkLXaS5SYPK6MGa/A=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -16376,6 +16426,11 @@
         "source-map": "~0.6.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -17596,6 +17651,14 @@
         "signal-exit": "^3.0.7"
       }
     },
+    "xregexp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-5.1.1.tgz",
+      "integrity": "sha512-fKXeVorD+CzWvFs7VBuKTYIW63YD1e1osxwQ8caZ6o1jg6pDAbABDG54LCIq0j5cy7PjRvGIq6sef9DYPXpncg==",
+      "requires": {
+        "@babel/runtime-corejs3": "^7.16.5"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -15,7 +15,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.2"
+    "@popperjs/core": "^2.11.2",
+    "xregexp": "^5.1.1"
   },
   "devDependencies": {
     "@types/jest": "^28.1.8",

src/components/RegExpBackslash.ts

@@ -0,0 +1,6 @@
+export const createBackslash = (textContent = '/') => {
+  const previewLabel = window.document.createElement('div');
+  previewLabel.className = 'bulk_regexp_slash';
+  previewLabel.textContent = textContent;
+  return previewLabel;
+};

src/constants/RegExpFlags.ts

@@ -0,0 +1,15 @@
+export type RegExpFlag = 'g' | 'i' | 'm' | 'u' | 'y' | 'n' | 's' | 'x' | 'A';
+
+export const REGEXP_FLAGS = [
+  'g',
+  'i',
+  'm',
+  'u',
+  'y',
+  'n',
+  's',
+  'x',
+  'A',
+] as const;
+
+export type RegExpFlags = typeof REGEXP_FLAGS;

src/services/obsidian.service.ts

@@ -1,5 +1,6 @@
 import { App, TFile } from 'obsidian';
 import BulkRenamePlugin from '../../main';
+import XRegExp from 'xregexp';
 
 export const getObsidianFilesByFolderName = (
   app: App,
@@ -17,6 +18,27 @@ export const getObsidianFilesByFolderName = (
   return filesSortedByName;
 };
 
+export const getObsidianFilesByRegExp = (
+  app: App,
+  plugin: BulkRenamePlugin,
+) => {
+  const { regExpState } = plugin.settings;
+
+  const regExp = XRegExp(regExpState.regExp, regExpState.flags.join(''));
+
+  const abstractFiles = app.vault.getAllLoadedFiles();
+
+  const matchedFileNames = abstractFiles.filter((file) => {
+    if (file instanceof TFile && XRegExp.match(file.path, regExp)) {
+      return true;
+    }
+  }) as TFile[];
+
+  const filesSortedByName = sortFilesByName(matchedFileNames);
+
+  return filesSortedByName;
+};
+
 export const getObsidianFilesWithTagName = (
   app: App,
   plugin: BulkRenamePlugin,

src/suggestions/RegExpFlagsSuggest.ts

@@ -0,0 +1,39 @@
+// Credits go to Liam's Periodic Notes Plugin: https://github.com/liamcain/obsidian-periodic-notes
+
+import { TextInputSuggest } from './suggest';
+import { REGEXP_FLAGS, RegExpFlag } from '../constants/RegExpFlags';
+
+export class RegExpFlagsSuggest extends TextInputSuggest<RegExpFlag> {
+  // @ts-ignore TODO refactor types
+  getSuggestions() {
+    return REGEXP_FLAGS;
+  }
+
+  renderSuggestion = (flag: RegExpFlag, el: HTMLElement) => {
+    const { regExpState } = this.plugin.settings;
+    const hasFlag = regExpState.flags.includes(flag);
+    if (hasFlag) {
+      el.addClass('bulk-flag-selected');
+    } else {
+      el.removeClass('bulk-flag-selected');
+    }
+    el.setText(flag);
+  };
+
+  selectSuggestion = (flag: RegExpFlag, event: MouseEvent | KeyboardEvent) => {
+    const { regExpState } = this.plugin.settings;
+    const target = event.target as HTMLDivElement;
+
+    const hasFlag = regExpState.flags.includes(flag);
+    if (hasFlag) {
+      regExpState.flags = regExpState.flags.filter((existingFlag) => {
+        return existingFlag !== flag;
+      });
+    } else {
+      regExpState.flags = [...regExpState.flags, flag];
+    }
+    target.classList.toggle('bulk-flag-selected');
+    this.inputEl.value = regExpState.flags.join('');
+    this.inputEl.trigger('input');
+  };
+}

src/suggestions/suggest.ts

@@ -2,6 +2,7 @@
 
 import { App, ISuggestOwner, Scope } from 'obsidian';
 import { createPopper, Instance as PopperInstance } from '@popperjs/core';
+import BulkRenamePlugin from '../../main';
 
 const wrapAround = (value: number, size: number): number => {
   return ((value % size) + size) % size;
@@ -104,6 +105,7 @@ class Suggest<T> {
 
 export abstract class TextInputSuggest<T> implements ISuggestOwner<T> {
   protected app: App;
+  protected plugin: BulkRenamePlugin;
   protected inputEl: HTMLInputElement | HTMLTextAreaElement;
 
   private popper: PopperInstance;
@@ -111,7 +113,12 @@ export abstract class TextInputSuggest<T> implements ISuggestOwner<T> {
   private suggestEl: HTMLElement;
   private suggest: Suggest<T>;
 
-  constructor(app: App, inputEl: HTMLInputElement | HTMLTextAreaElement) {
+  constructor(
+    app: App,
+    inputEl: HTMLInputElement | HTMLTextAreaElement,
+    plugin: BulkRenamePlugin,
+  ) {
+    this.plugin = plugin;
     this.app = app;
     this.inputEl = inputEl;
     this.scope = new Scope();
@@ -191,7 +198,7 @@ export abstract class TextInputSuggest<T> implements ISuggestOwner<T> {
     this.suggestEl.detach();
   }
 
-  abstract getSuggestions(inputStr: string): T[];
+  abstract getSuggestions(inputStr?: string): T[];
   abstract renderSuggestion(item: T, el: HTMLElement): void;
-  abstract selectSuggestion(item: T): void;
+  abstract selectSuggestion(item: T, evt: MouseEvent | KeyboardEvent): void;
 }

styles.css

@@ -23,3 +23,29 @@
 .bulk_preview_label {
   margin-right: 15px;
 }
+
+.bulk_regexp_control {
+  border: 1px solid var(--background-modifier-border);
+}
+
+.bulk_regexp_control > input {
+  border: none;
+}
+
+.bulk_regexp,
+.bulk_regexp_flags {
+  width: 100%;
+}
+
+.bulk_regexp_flags {
+  caret-color: transparent;
+}
+
+.bulk_regexp_slash {
+  font-size: 1.5em;
+  opacity: 0.5;
+}
+
+.bulk-flag-selected {
+  background-color: lavender !important;
+}