Merge pull request #5 from dhurley94/tests

Add refresh button to image modal

.gitignore

@@ -20,3 +20,5 @@ data.json
 
 # Exclude macOS Finder (System Explorer) View States
 .DS_Store
+
+**.tgz

.npmignore

@@ -0,0 +1,4 @@
+data.json
+**.ts
+scripts/
+**.tgz

.npmrc

@@ -1 +1 @@
-tag-version-prefix=""
+tag-version-prefix=""

esbuild.config.mjs

@@ -15,7 +15,7 @@ const context = await esbuild.context({
 	banner: {
 		js: banner,
 	},
-	entryPoints: ["main.ts"],
+	entryPoints: ["src/index.ts"],
 	bundle: true,
 	external: [
 		"obsidian",

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
+};

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "giphy-insert",
 	"name": "Giphy Insert",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"minAppVersion": "0.15.0",
 	"description": "This is a Giphy plugin for Obsidian. This plugin helps users insert Gifs from the Giphy API.",
 	"author": "drhurley94",

package.json

@@ -1,31 +1,37 @@
 {
 	"name": "obsidian-giphy-plugin",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "This is a plugin for Obsidian that help you insert Giphy images (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {
-		"dev": "node esbuild.config.mjs",
+		"dev": "nodemon -e ts --watch src --exec \"npm run build\"",
+		"debug": "npm run dev",
 		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"version": "node version-bump.mjs && git add manifest.json versions.json",
+		"version": "node ./scripts/version-bump.mjs && git add manifest.json versions.json",
 		"lint": "eslint --config .eslintrc --fix --color --ext .ts . --resolve-plugins-relative-to ."
 	},
 	"keywords": [],
 	"author": "",
 	"license": "MIT",
 	"devDependencies": {
+		"@codemirror/state": "^6.0.0",
+		"@codemirror/view": "^6.0.0",
 		"@types/node": "^16.11.6",
 		"@typescript-eslint/eslint-plugin": "^6.8.0",
 		"@typescript-eslint/parser": "^6.8.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
+		"eslint": "^8.56.0",
 		"eslint-config-airbnb-typescript": "^17.1.0",
 		"eslint-plugin-no-loops": "^0.3.0",
 		"eslint-plugin-prettier": "^5.0.1",
-		"obsidian": "latest",
+		"prettier": "^3.0.0",
+		"nodemon": "^3.0.2",
+		"obsidian": "^1.4.11",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"
 	},
 	"dependencies": {
-		"eslint-plugin-import": "^2.28.1"
+		"eslint-plugin-import": "^2.29.1"
 	}
 }

src/api/index.ts

@@ -0,0 +1,47 @@
+export interface ApiClient {
+  get(url: string, params: Record<string, any>): Promise<any>;
+}
+
+export class GiphyApiClient implements ApiClient {
+  private apiKey: string;
+
+  constructor(apiKey: string) {
+    this.apiKey = apiKey;
+  }
+
+  async get(url: string, params: Record<string, any>): Promise<any> {
+    const queryString = new URLSearchParams({ ...params, api_key: this.apiKey }).toString();
+    const response = await fetch(`${url}?${queryString}`);
+    return response.json();
+  }
+}
+
+export class GiphyService {
+  private client: ApiClient;
+
+  private lastKeywordSearch: string;
+
+  private offset: number = 0;
+
+  constructor(client: ApiClient) {
+    this.client = client;
+  }
+
+  getLastKeyword(): string {
+    return this.lastKeywordSearch;
+  }
+
+  async queryGiphy(keyword: string, limit = 3): Promise<string[] | null> {
+    const GIPHY_API_ENDPOINT = 'https://api.giphy.com/v1/gifs/search';
+
+    if (!keyword) console.warn('No keyword specified');
+    if (keyword === this.lastKeywordSearch) this.offset += limit;
+    this.lastKeywordSearch = keyword;
+
+    const data = await this.client.get(GIPHY_API_ENDPOINT, { q: keyword, limit, offset: this.offset });
+
+    if (data.data.length === 0) return null;
+
+    return data.data.map((gif: { images: { original: { url: string } } }) => gif.images.original.url);
+  }
+}

src/index.ts

@@ -0,0 +1,130 @@
+import { MarkdownView, Notice, Plugin as ObsidianPlugin } from 'obsidian';
+import { GiphyImagePickerModal } from './ui/image-picker';
+import { GiphyPluginSettingTab } from './ui/plugin-settings';
+import { GiphySearchModal } from './ui/search-modal';
+import { GiphyApiClient, GiphyService } from './api';
+
+export interface GiphyPluginSettings {
+  apiKey: string;
+  imageCount: number;
+  imageCss: string;
+  imageSize: string;
+  slashCommands: string[];
+}
+
+export const DEFAULT_SETTINGS: GiphyPluginSettings = {
+  apiKey: '',
+  imageCount: 5,
+  imageSize: '95px',
+  imageCss: 'margin: 3px; cursor: pointer; border: 2px solid gray;',
+  slashCommands: [
+    'giphy',
+    'gif',
+  ],
+};
+
+export default class GiphyPlugin extends ObsidianPlugin {
+  settings: GiphyPluginSettings;
+
+  private giphyClient: GiphyApiClient;
+
+  public giphyService: GiphyService;
+
+  private cursor: CodeMirror.Position;
+
+  async onload() {
+    this.settings = { ...DEFAULT_SETTINGS, ...(await this.loadData()) };
+
+    this.giphyClient = new GiphyApiClient(this.settings.apiKey);
+    this.giphyService = new GiphyService(this.giphyClient);
+
+    this.registerEvent(this.app.workspace.on('active-leaf-change', this.handleActiveLeafChange.bind(this)));
+
+    this.addCommand({
+      id: 'search-giphy',
+      name: 'Search Giphy for GIFs',
+      callback: () => this.searchGiphy(),
+    });
+
+    this.addSettingTab(new GiphyPluginSettingTab(this.app, this));
+  }
+
+  async saveSettings() {
+    await this.saveData(this.settings);
+  }
+
+  async searchGiphy() {
+    // Save the current cursor position
+    const editor = this.getEditor();
+    if (editor) {
+      this.cursor = editor.getCursor();
+    }
+
+    const keyword = await this.promptForInput();
+    if (!keyword) return;
+
+    const gifUrls = await this.giphyService.queryGiphy(keyword, this.settings.imageCount);
+    if (!gifUrls) {
+      new Notice('No GIFs found.').setMessage('No GIFs found.');
+      return;
+    }
+
+    const selectedGifUrl = await this.promptForGifSelection(gifUrls);
+    if (!selectedGifUrl) return;
+
+    // Restore the cursor position
+    if (editor && this.cursor) {
+      editor.setCursor(this.cursor);
+    }
+
+    // Insert the selected image at the current cursor location
+    editor?.replaceRange(`![Giphy GIF](${selectedGifUrl})`, this.cursor);
+  }
+
+  async promptForGifSelection(gifUrls: string[]): Promise<string | null> {
+    return new Promise((resolve) => {
+      const modal = new GiphyImagePickerModal(this.app, this, gifUrls, resolve);
+      modal.open();
+    });
+  }
+
+  private handleActiveLeafChange(): void {
+    const activeLeaf = this.app.workspace.getLeaf();
+    if (activeLeaf?.view instanceof MarkdownView) {
+      const editor = activeLeaf.view.editor;
+      if (editor) {
+        editor.exec(this.handleEditorChange.bind(this));
+      }
+    }
+  }
+
+  private handleEditorChange(cm: any, change: any): void {
+    const insertedText: string = change?.text?.join('') || '';
+    if (DEFAULT_SETTINGS.slashCommands.filter((command) => insertedText.includes(`/${command}`))) {
+      this.searchGiphy();
+
+      try {
+        const from = {
+          line: change.from.line,
+          ch: change.from.ch - 6,
+        };
+        cm.replaceRange('', from, change.from);
+      } catch (err) {
+        console.error("Error while trying to replace '/giphy':", err);
+      }
+    }
+  }
+
+  async promptForInput(): Promise<string> {
+    return new Promise((resolve) => {
+      const modal = new GiphySearchModal(this.app, this, resolve);
+      modal.open();
+    });
+  }
+
+  getEditor(): CodeMirror.Editor | null {
+    const view = this.app.workspace.getActiveViewOfType(MarkdownView);
+    if (!view) { return null; }
+    return view.editor as any;
+  }
+}

src/ui/history-browser.ts

@@ -0,0 +1 @@
+export {};