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