mirror of
https://github.com/iqijun/obsidian-image-share.git
synced 2026-07-22 05:43:50 +00:00
init
This commit is contained in:
cruise
commit
07872de1f2
16 changed files with 3322 additions and 0 deletions
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 4
|
||||||
|
tab_width = 4
|
||||||
3
.eslintignore
Normal file
3
.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
main.js
|
||||||
23
.eslintrc
Normal file
23
.eslintrc
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"env": { "node": true },
|
||||||
|
"plugins": [
|
||||||
|
"@typescript-eslint"
|
||||||
|
],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"no-unused-vars": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"no-prototype-builtins": "off",
|
||||||
|
"@typescript-eslint/no-empty-function": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
22
.gitignore
vendored
Normal file
22
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# vscode
|
||||||
|
.vscode
|
||||||
|
|
||||||
|
# Intellij
|
||||||
|
*.iml
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# npm
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Don't include the compiled main.js file in the repo.
|
||||||
|
# They should be uploaded to GitHub releases instead.
|
||||||
|
main.js
|
||||||
|
|
||||||
|
# Exclude sourcemaps
|
||||||
|
*.map
|
||||||
|
|
||||||
|
# obsidian
|
||||||
|
data.json
|
||||||
|
|
||||||
|
# Exclude macOS Finder (System Explorer) View States
|
||||||
|
.DS_Store
|
||||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
tag-version-prefix=""
|
||||||
94
README.md
Normal file
94
README.md
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
# Obsidian Sample Plugin
|
||||||
|
|
||||||
|
This is a sample plugin for Obsidian (https://obsidian.md).
|
||||||
|
|
||||||
|
This project uses TypeScript to provide type checking and documentation.
|
||||||
|
The repo depends on the latest plugin API (obsidian.d.ts) in TypeScript Definition format, which contains TSDoc comments describing what it does.
|
||||||
|
|
||||||
|
This sample plugin demonstrates some of the basic functionality the plugin API can do.
|
||||||
|
- Adds a ribbon icon, which shows a Notice when clicked.
|
||||||
|
- Adds a command "Open Sample Modal" which opens a Modal.
|
||||||
|
- Adds a plugin setting tab to the settings page.
|
||||||
|
- Registers a global click event and output 'click' to the console.
|
||||||
|
- Registers a global interval which logs 'setInterval' to the console.
|
||||||
|
|
||||||
|
## First time developing plugins?
|
||||||
|
|
||||||
|
Quick starting guide for new plugin devs:
|
||||||
|
|
||||||
|
- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with.
|
||||||
|
- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
|
||||||
|
- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
|
||||||
|
- Install NodeJS, then run `npm i` in the command line under your repo folder.
|
||||||
|
- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
|
||||||
|
- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
|
||||||
|
- Reload Obsidian to load the new version of your plugin.
|
||||||
|
- Enable plugin in settings window.
|
||||||
|
- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
|
||||||
|
|
||||||
|
## Releasing new releases
|
||||||
|
|
||||||
|
- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
|
||||||
|
- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
|
||||||
|
- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
|
||||||
|
- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.
|
||||||
|
- Publish the release.
|
||||||
|
|
||||||
|
> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`.
|
||||||
|
> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json`
|
||||||
|
|
||||||
|
## Adding your plugin to the community plugin list
|
||||||
|
|
||||||
|
- Check the [plugin guidelines](https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines).
|
||||||
|
- Publish an initial version.
|
||||||
|
- Make sure you have a `README.md` file in the root of your repo.
|
||||||
|
- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
- Clone this repo.
|
||||||
|
- Make sure your NodeJS is at least v16 (`node --version`).
|
||||||
|
- `npm i` or `yarn` to install dependencies.
|
||||||
|
- `npm run dev` to start compilation in watch mode.
|
||||||
|
|
||||||
|
## Manually installing the plugin
|
||||||
|
|
||||||
|
- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
|
||||||
|
|
||||||
|
## Improve code quality with eslint (optional)
|
||||||
|
- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code.
|
||||||
|
- To use eslint with this project, make sure to install eslint from terminal:
|
||||||
|
- `npm install -g eslint`
|
||||||
|
- To use eslint to analyze this project use this command:
|
||||||
|
- `eslint main.ts`
|
||||||
|
- eslint will then create a report with suggestions for code improvement by file and line number.
|
||||||
|
- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
|
||||||
|
- `eslint .\src\`
|
||||||
|
|
||||||
|
## Funding URL
|
||||||
|
|
||||||
|
You can include funding URLs where people who use your plugin can financially support it.
|
||||||
|
|
||||||
|
The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"fundingUrl": "https://buymeacoffee.com"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
If you have multiple URLs, you can also do:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"fundingUrl": {
|
||||||
|
"Buy Me a Coffee": "https://buymeacoffee.com",
|
||||||
|
"GitHub Sponsor": "https://github.com/sponsors",
|
||||||
|
"Patreon": "https://www.patreon.com/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## API Documentation
|
||||||
|
|
||||||
|
See https://github.com/obsidianmd/obsidian-api
|
||||||
49
esbuild.config.mjs
Normal file
49
esbuild.config.mjs
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import esbuild from "esbuild";
|
||||||
|
import process from "process";
|
||||||
|
import builtins from "builtin-modules";
|
||||||
|
|
||||||
|
const banner =
|
||||||
|
`/*
|
||||||
|
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
|
||||||
|
if you want to view the source, please visit the github repository of this plugin
|
||||||
|
*/
|
||||||
|
`;
|
||||||
|
|
||||||
|
const prod = (process.argv[2] === "production");
|
||||||
|
|
||||||
|
const context = await esbuild.context({
|
||||||
|
banner: {
|
||||||
|
js: banner,
|
||||||
|
},
|
||||||
|
entryPoints: ["main.ts"],
|
||||||
|
bundle: true,
|
||||||
|
external: [
|
||||||
|
"obsidian",
|
||||||
|
"electron",
|
||||||
|
"@codemirror/autocomplete",
|
||||||
|
"@codemirror/collab",
|
||||||
|
"@codemirror/commands",
|
||||||
|
"@codemirror/language",
|
||||||
|
"@codemirror/lint",
|
||||||
|
"@codemirror/search",
|
||||||
|
"@codemirror/state",
|
||||||
|
"@codemirror/view",
|
||||||
|
"@lezer/common",
|
||||||
|
"@lezer/highlight",
|
||||||
|
"@lezer/lr",
|
||||||
|
...builtins],
|
||||||
|
format: "cjs",
|
||||||
|
target: "es2018",
|
||||||
|
logLevel: "info",
|
||||||
|
sourcemap: prod ? false : "inline",
|
||||||
|
treeShaking: true,
|
||||||
|
outfile: "main.js",
|
||||||
|
minify: prod,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (prod) {
|
||||||
|
await context.rebuild();
|
||||||
|
process.exit(0);
|
||||||
|
} else {
|
||||||
|
await context.watch();
|
||||||
|
}
|
||||||
160
main.css
Normal file
160
main.css
Normal file
File diff suppressed because one or more lines are too long
426
main.ts
Normal file
426
main.ts
Normal file
|
|
@ -0,0 +1,426 @@
|
||||||
|
import { App, Editor, Modal, Plugin, Menu, MarkdownRenderer, Component } from 'obsidian';
|
||||||
|
import './styles.css';
|
||||||
|
import html2canvas from 'html2canvas';
|
||||||
|
|
||||||
|
// Remember to rename these classes and interfaces!
|
||||||
|
|
||||||
|
// interface MyPluginSettings {
|
||||||
|
// mySetting: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const DEFAULT_SETTINGS: MyPluginSettings = {
|
||||||
|
// mySetting: 'default'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default class MyPlugin extends Plugin {
|
||||||
|
// settings: MyPluginSettings;
|
||||||
|
|
||||||
|
// async onload() {
|
||||||
|
// await this.loadSettings();
|
||||||
|
|
||||||
|
// // This creates an icon in the left ribbon.
|
||||||
|
// const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
|
||||||
|
// // Called when the user clicks the icon.
|
||||||
|
// new Notice('hello world!');
|
||||||
|
// });
|
||||||
|
// // Perform additional things with the ribbon
|
||||||
|
// ribbonIconEl.addClass('my-plugin-ribbon-class');
|
||||||
|
|
||||||
|
// // This adds a status bar item to the bottom of the app. Does not work on mobile apps.
|
||||||
|
// const statusBarItemEl = this.addStatusBarItem();
|
||||||
|
// statusBarItemEl.setText('Status Bar Text');
|
||||||
|
|
||||||
|
// // This adds a simple command that can be triggered anywhere
|
||||||
|
// this.addCommand({
|
||||||
|
// id: 'open-sample-modal-simple',
|
||||||
|
// name: 'Open sample modal (simple)',
|
||||||
|
// callback: () => {
|
||||||
|
// new SampleModal(this.app).open();
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// // This adds an editor command that can perform some operation on the current editor instance
|
||||||
|
// this.addCommand({
|
||||||
|
// id: 'sample-editor-command',
|
||||||
|
// name: 'Sample editor command',
|
||||||
|
// editorCallback: (editor: Editor, view: MarkdownView) => {
|
||||||
|
// console.log(editor.getSelection());
|
||||||
|
// editor.replaceSelection('Sample Editor Command');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// // This adds a complex command that can check whether the current state of the app allows execution of the command
|
||||||
|
// this.addCommand({
|
||||||
|
// id: 'open-sample-modal-complex',
|
||||||
|
// name: 'Open sample modal (complex)',
|
||||||
|
// checkCallback: (checking: boolean) => {
|
||||||
|
// // Conditions to check
|
||||||
|
// const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
|
||||||
|
// if (markdownView) {
|
||||||
|
// // If checking is true, we're simply "checking" if the command can be run.
|
||||||
|
// // If checking is false, then we want to actually perform the operation.
|
||||||
|
// if (!checking) {
|
||||||
|
// new SampleModal(this.app).open();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // This command will only show up in Command Palette when the check function returns true
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // This adds a settings tab so the user can configure various aspects of the plugin
|
||||||
|
// this.addSettingTab(new SampleSettingTab(this.app, this));
|
||||||
|
|
||||||
|
// // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
|
||||||
|
// // Using this function will automatically remove the event listener when this plugin is disabled.
|
||||||
|
// this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
|
||||||
|
// console.log('click', evt);
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // When registering intervals, this function will automatically clear the interval when the plugin is disabled.
|
||||||
|
// this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onunload() {
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// async loadSettings() {
|
||||||
|
// this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||||
|
// }
|
||||||
|
|
||||||
|
// async saveSettings() {
|
||||||
|
// await this.saveData(this.settings);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// class SampleModal extends Modal {
|
||||||
|
// constructor(app: App) {
|
||||||
|
// super(app);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onOpen() {
|
||||||
|
// const {contentEl} = this;
|
||||||
|
// contentEl.setText('Woah!');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// onClose() {
|
||||||
|
// const {contentEl} = this;
|
||||||
|
// contentEl.empty();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// class SampleSettingTab extends PluginSettingTab {
|
||||||
|
// plugin: MyPlugin;
|
||||||
|
|
||||||
|
// constructor(app: App, plugin: MyPlugin) {
|
||||||
|
// super(app, plugin);
|
||||||
|
// this.plugin = plugin;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// display(): void {
|
||||||
|
// const {containerEl} = this;
|
||||||
|
|
||||||
|
// containerEl.empty();
|
||||||
|
|
||||||
|
// new Setting(containerEl)
|
||||||
|
// .setName('Setting #1')
|
||||||
|
// .setDesc('It\'s a secret')
|
||||||
|
// .addText(text => text
|
||||||
|
// .setPlaceholder('Enter your secret')
|
||||||
|
// .setValue(this.plugin.settings.mySetting)
|
||||||
|
// .onChange(async (value) => {
|
||||||
|
// this.plugin.settings.mySetting = value;
|
||||||
|
// await this.plugin.saveSettings();
|
||||||
|
// }));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 图片生成器类
|
||||||
|
class ImageGenerator {
|
||||||
|
private canvas: HTMLCanvasElement;
|
||||||
|
private text: string;
|
||||||
|
private currentTemplate: ShareTemplate;
|
||||||
|
private app: App;
|
||||||
|
|
||||||
|
constructor(app: App, text: string) {
|
||||||
|
this.app = app;
|
||||||
|
this.text = text;
|
||||||
|
this.currentTemplate = SHARE_TEMPLATES[0];
|
||||||
|
this.canvas = document.createElement('canvas');
|
||||||
|
}
|
||||||
|
|
||||||
|
public async updateCanvas() {
|
||||||
|
try {
|
||||||
|
// 创建临时容器
|
||||||
|
const tempDiv = document.createElement('div');
|
||||||
|
tempDiv.className = 'markdown-preview-view';
|
||||||
|
tempDiv.style.position = 'absolute';
|
||||||
|
tempDiv.style.left = '-9999px';
|
||||||
|
tempDiv.style.width = `${this.currentTemplate.width - 40}px`;
|
||||||
|
tempDiv.style.background = this.currentTemplate.id === 'dark' ? '#2d3436' : '#e8ecf9';
|
||||||
|
tempDiv.style.padding = '20px';
|
||||||
|
tempDiv.style.boxSizing = 'border-box';
|
||||||
|
tempDiv.style.wordBreak = 'break-word';
|
||||||
|
tempDiv.style.fontSize = '14px';
|
||||||
|
tempDiv.style.lineHeight = '1.5';
|
||||||
|
tempDiv.style.whiteSpace = 'pre-wrap'; // 保留换行和空格
|
||||||
|
|
||||||
|
// 添加日期
|
||||||
|
const dateDiv = tempDiv.createDiv();
|
||||||
|
dateDiv.style.color = this.currentTemplate.id === 'dark' ? '#999999' : '#666666';
|
||||||
|
dateDiv.style.fontSize = '14px';
|
||||||
|
dateDiv.style.marginBottom = '16px';
|
||||||
|
dateDiv.textContent = new Date().toLocaleDateString();
|
||||||
|
|
||||||
|
// 添加内容容器
|
||||||
|
const contentDiv = tempDiv.createDiv();
|
||||||
|
contentDiv.style.color = this.currentTemplate.id === 'dark' ? '#ffffff' : '#333333';
|
||||||
|
|
||||||
|
// 渲染 Markdown
|
||||||
|
await MarkdownRenderer.render(
|
||||||
|
this.app,
|
||||||
|
this.text,
|
||||||
|
contentDiv,
|
||||||
|
'',
|
||||||
|
new Component()
|
||||||
|
);
|
||||||
|
|
||||||
|
document.body.appendChild(tempDiv);
|
||||||
|
|
||||||
|
// 获取实际内容高度并添加一些内边距
|
||||||
|
const actualHeight = tempDiv.offsetHeight + 40;
|
||||||
|
const minHeight = 300;
|
||||||
|
const maxHeight = 20000; // 增加最大高度限制
|
||||||
|
const finalHeight =2000;// Math.min(Math.max(actualHeight, minHeight), maxHeight);
|
||||||
|
|
||||||
|
// 使用 html2canvas 渲染
|
||||||
|
const renderedCanvas = await html2canvas(tempDiv, {
|
||||||
|
width: this.currentTemplate.width,
|
||||||
|
height: finalHeight,
|
||||||
|
backgroundColor: this.currentTemplate.id === 'dark' ? '#2d3436' : '#e8ecf9',
|
||||||
|
scale: 2,
|
||||||
|
windowWidth: this.currentTemplate.width,
|
||||||
|
windowHeight: finalHeight,
|
||||||
|
logging: false,
|
||||||
|
useCORS: true,
|
||||||
|
onclone: (clonedDoc) => {
|
||||||
|
const clonedDiv = clonedDoc.querySelector('.markdown-preview-view') as HTMLElement;
|
||||||
|
if (clonedDiv) {
|
||||||
|
clonedDiv.style.width = `${this.currentTemplate.width - 40}px`;
|
||||||
|
clonedDiv.style.height = `${finalHeight}px`;
|
||||||
|
clonedDiv.style.overflow = 'visible'; // 改为 visible
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新画布
|
||||||
|
this.canvas = renderedCanvas;
|
||||||
|
|
||||||
|
// 清理临时元素
|
||||||
|
document.body.removeChild(tempDiv);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error rendering markdown:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public getCanvas(): HTMLCanvasElement {
|
||||||
|
return this.canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getDataURL(): string {
|
||||||
|
return this.canvas.toDataURL('image/png');
|
||||||
|
}
|
||||||
|
|
||||||
|
public async setTemplate(templateId: string) {
|
||||||
|
const template = SHARE_TEMPLATES.find(t => t.id === templateId);
|
||||||
|
if (template) {
|
||||||
|
this.currentTemplate = template;
|
||||||
|
await this.updateCanvas();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TextPreviewModal extends Modal {
|
||||||
|
private text: string;
|
||||||
|
private imageGenerator: ImageGenerator;
|
||||||
|
private isResizing: boolean = false;
|
||||||
|
private startX: number = 0;
|
||||||
|
private startY: number = 0;
|
||||||
|
private startWidth: number = 0;
|
||||||
|
private startHeight: number = 0;
|
||||||
|
|
||||||
|
constructor(app: App, text: string) {
|
||||||
|
super(app);
|
||||||
|
this.text = text;
|
||||||
|
this.imageGenerator = new ImageGenerator(app, text);
|
||||||
|
}
|
||||||
|
|
||||||
|
async onOpen() {
|
||||||
|
const {contentEl} = this;
|
||||||
|
contentEl.empty();
|
||||||
|
contentEl.addClass('image-share-modal');
|
||||||
|
|
||||||
|
// 创建可调整大小的容器
|
||||||
|
const resizableContainer = contentEl.createDiv({ cls: 'resizable-container' });
|
||||||
|
|
||||||
|
const previewContainer = resizableContainer.createDiv({ cls: 'image-preview-container' });
|
||||||
|
previewContainer.createEl('h2', { text: '图片预览' });
|
||||||
|
|
||||||
|
const templateSelector = previewContainer.createDiv({ cls: 'template-selector' });
|
||||||
|
const canvasContainer = previewContainer.createDiv({ cls: 'canvas-container' });
|
||||||
|
|
||||||
|
// 添加调整大小的手柄
|
||||||
|
const resizeHandle = resizableContainer.createDiv({ cls: 'resize-handle' });
|
||||||
|
|
||||||
|
// 处理拖拽调整大小
|
||||||
|
const handleMouseDown = (e: MouseEvent) => {
|
||||||
|
this.isResizing = true;
|
||||||
|
this.startX = e.clientX;
|
||||||
|
this.startY = e.clientY;
|
||||||
|
this.startWidth = resizableContainer.offsetWidth;
|
||||||
|
this.startHeight = resizableContainer.offsetHeight;
|
||||||
|
|
||||||
|
// 添加临时事件监听器
|
||||||
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
|
document.addEventListener('mouseup', handleMouseUp);
|
||||||
|
document.body.style.cursor = 'se-resize';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
if (!this.isResizing) return;
|
||||||
|
|
||||||
|
const width = this.startWidth + (e.clientX - this.startX);
|
||||||
|
const height = this.startHeight + (e.clientY - this.startY);
|
||||||
|
|
||||||
|
// 设置最小尺寸
|
||||||
|
const minWidth = 400;
|
||||||
|
const minHeight = 300;
|
||||||
|
|
||||||
|
resizableContainer.style.width = `${Math.max(width, minWidth)}px`;
|
||||||
|
resizableContainer.style.height = `${Math.max(height, minHeight)}px`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseUp = () => {
|
||||||
|
this.isResizing = false;
|
||||||
|
document.removeEventListener('mousemove', handleMouseMove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseUp);
|
||||||
|
document.body.style.cursor = 'default';
|
||||||
|
};
|
||||||
|
|
||||||
|
resizeHandle.addEventListener('mousedown', handleMouseDown);
|
||||||
|
|
||||||
|
// 等待初始画布渲染完成
|
||||||
|
await this.imageGenerator.updateCanvas();
|
||||||
|
canvasContainer.appendChild(this.imageGenerator.getCanvas());
|
||||||
|
|
||||||
|
SHARE_TEMPLATES.forEach(template => {
|
||||||
|
const templateButton = templateSelector.createEl('button', {
|
||||||
|
cls: 'template-button',
|
||||||
|
text: template.name
|
||||||
|
});
|
||||||
|
templateButton.onclick = async () => {
|
||||||
|
templateSelector.findAll('.template-button').forEach(btn =>
|
||||||
|
btn.removeClass('active')
|
||||||
|
);
|
||||||
|
templateButton.addClass('active');
|
||||||
|
await this.imageGenerator.setTemplate(template.id);
|
||||||
|
canvasContainer.empty();
|
||||||
|
canvasContainer.appendChild(this.imageGenerator.getCanvas());
|
||||||
|
};
|
||||||
|
if (template.id === 'default') {
|
||||||
|
templateButton.addClass('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加下载按钮
|
||||||
|
const downloadButton = previewContainer.createEl('button', {
|
||||||
|
cls: 'download-button'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加下载图标
|
||||||
|
downloadButton.innerHTML = `<svg viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<path fill="currentColor" d="M12 15.5a.74.74 0 0 1-.53-.22l-3-3A.75.75 0 0 1 9.53 11L12 13.44L14.47 11a.75.75 0 0 1 1.06 1.06l-3 3a.74.74 0 0 1-.53.22zm0-7.5a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6A.75.75 0 0 1 12 8z"/>
|
||||||
|
<path fill="currentColor" d="M19.5 20.5h-15a.75.75 0 0 1 0-1.5h15a.75.75 0 0 1 0 1.5z"/>
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
// 添加提示文本
|
||||||
|
downloadButton.setAttribute('title', '下载图片');
|
||||||
|
|
||||||
|
downloadButton.onclick = () => {
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.download = 'share-image.png';
|
||||||
|
link.href = this.imageGenerator.getDataURL();
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
const {contentEl} = this;
|
||||||
|
contentEl.empty();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模板接口定义
|
||||||
|
interface ShareTemplate {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
render: (ctx: CanvasRenderingContext2D, text: string) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预定义模板
|
||||||
|
const SHARE_TEMPLATES: ShareTemplate[] = [
|
||||||
|
{
|
||||||
|
id: 'default',
|
||||||
|
name: '默认模板',
|
||||||
|
width: 600, // 进一步增加宽度
|
||||||
|
height: 300,
|
||||||
|
render: async () => {}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'dark',
|
||||||
|
name: '深色模板',
|
||||||
|
width: 600, // 进一步增加宽度
|
||||||
|
height: 300,
|
||||||
|
render: async () => {}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default class ImageSharePlugin extends Plugin {
|
||||||
|
async onload() {
|
||||||
|
// 注册编辑器右键菜单
|
||||||
|
this.registerEvent(
|
||||||
|
this.app.workspace.on('editor-menu', (menu: Menu, editor: Editor) => {
|
||||||
|
const selectedText = editor.getSelection();
|
||||||
|
|
||||||
|
if (selectedText) {
|
||||||
|
menu.addItem((item) => {
|
||||||
|
item
|
||||||
|
.setTitle('Share as Image')
|
||||||
|
.setIcon('image')
|
||||||
|
.onClick(async () => {
|
||||||
|
new TextPreviewModal(this.app, selectedText).open();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// 添加命令到命令面板
|
||||||
|
this.addCommand({
|
||||||
|
id: 'share-as-image',
|
||||||
|
name: 'Share selected text as image',
|
||||||
|
editorCallback: (editor: Editor) => {
|
||||||
|
const selectedText = editor.getSelection();
|
||||||
|
if (selectedText) {
|
||||||
|
new TextPreviewModal(this.app, selectedText).open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onunload() {
|
||||||
|
// 插件卸载时的清理代码
|
||||||
|
}
|
||||||
|
}
|
||||||
11
manifest.json
Normal file
11
manifest.json
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"id": "obsidian-image-share",
|
||||||
|
"name": "Image Share",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"minAppVersion": "0.15.0",
|
||||||
|
"description": "Share selected text as beautiful images",
|
||||||
|
"author": "shawn",
|
||||||
|
"authorUrl": "https://obsidian.md",
|
||||||
|
"fundingUrl": "https://obsidian.md/pricing",
|
||||||
|
"isDesktopOnly": false
|
||||||
|
}
|
||||||
2274
package-lock.json
generated
Normal file
2274
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "obsidian-image-share",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "share text as image",
|
||||||
|
"main": "main.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node esbuild.config.mjs",
|
||||||
|
"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
|
||||||
|
"version": "node version-bump.mjs && git add manifest.json versions.json"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "shawn",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^16.11.6",
|
||||||
|
"@typescript-eslint/eslint-plugin": "5.29.0",
|
||||||
|
"@typescript-eslint/parser": "5.29.0",
|
||||||
|
"builtin-modules": "3.3.0",
|
||||||
|
"esbuild": "0.17.3",
|
||||||
|
"obsidian": "latest",
|
||||||
|
"tslib": "2.4.0",
|
||||||
|
"typescript": "4.7.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"html2canvas": "^1.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
181
styles.css
Normal file
181
styles.css
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
/*
|
||||||
|
|
||||||
|
This CSS file will be included with your plugin, and
|
||||||
|
available in the app when your plugin is enabled.
|
||||||
|
|
||||||
|
If your plugin does not need CSS, delete this file.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
.image-share-modal {
|
||||||
|
max-width: none;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .resizable-container {
|
||||||
|
position: relative;
|
||||||
|
min-width: 400px;
|
||||||
|
min-height: 300px;
|
||||||
|
width: 600px;
|
||||||
|
height: 500px;
|
||||||
|
resize: both;
|
||||||
|
overflow: auto;
|
||||||
|
background: var(--background-primary);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .resize-handle {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
cursor: se-resize;
|
||||||
|
background: var(--interactive-accent);
|
||||||
|
clip-path: polygon(100% 0, 100% 100%, 0 100%);
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .resize-handle:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .image-preview-container {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .canvas-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal h2 {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .download-button {
|
||||||
|
background: var(--interactive-accent);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
padding: 10px;
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .download-button:hover {
|
||||||
|
background: var(--interactive-accent-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .download-button svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal canvas {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .template-selector {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .template-button {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid var(--interactive-accent);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--interactive-accent);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .template-button:hover {
|
||||||
|
background: var(--interactive-accent);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-share-modal .template-button.active {
|
||||||
|
background: var(--interactive-accent);
|
||||||
|
color: var(--text-on-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view {
|
||||||
|
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow: visible;
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view h1,
|
||||||
|
.markdown-preview-view h2,
|
||||||
|
.markdown-preview-view h3 {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view h1 { font-size: 1.5em; }
|
||||||
|
.markdown-preview-view h2 { font-size: 1.3em; }
|
||||||
|
.markdown-preview-view h3 { font-size: 1.1em; }
|
||||||
|
|
||||||
|
.markdown-preview-view p {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view ul,
|
||||||
|
.markdown-preview-view ol {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view li {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view code {
|
||||||
|
font-family: monospace;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown-preview-view blockquote {
|
||||||
|
border-left: 3px solid currentColor;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
24
tsconfig.json
Normal file
24
tsconfig.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"inlineSourceMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"target": "ES6",
|
||||||
|
"allowJs": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"importHelpers": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"lib": [
|
||||||
|
"DOM",
|
||||||
|
"ES5",
|
||||||
|
"ES6",
|
||||||
|
"ES7"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"**/*.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
14
version-bump.mjs
Normal file
14
version-bump.mjs
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { readFileSync, writeFileSync } from "fs";
|
||||||
|
|
||||||
|
const targetVersion = process.env.npm_package_version;
|
||||||
|
|
||||||
|
// read minAppVersion from manifest.json and bump version to target version
|
||||||
|
let manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
|
||||||
|
const { minAppVersion } = manifest;
|
||||||
|
manifest.version = targetVersion;
|
||||||
|
writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t"));
|
||||||
|
|
||||||
|
// update versions.json with target version and minAppVersion from manifest.json
|
||||||
|
let versions = JSON.parse(readFileSync("versions.json", "utf8"));
|
||||||
|
versions[targetVersion] = minAppVersion;
|
||||||
|
writeFileSync("versions.json", JSON.stringify(versions, null, "\t"));
|
||||||
3
versions.json
Normal file
3
versions.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"1.0.0": "0.15.0"
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue