Skip to content

feat: configurable image imports with inline editing, scaling and alignment - #73

Closed
ZhaoPuEE wants to merge 6 commits into
marswaveai:mainfrom
ZhaoPuEE:feat/configurable-image-import
Closed

ZhaoPuEE wants to merge 6 commits into
marswaveai:mainfrom
ZhaoPuEE:feat/configurable-image-import

Conversation

@ZhaoPuEE

@ZhaoPuEE ZhaoPuEE commented Sep 6, 2026

Copy link
Copy Markdown

Screenshot paste has no configurable local storage pipeline. This adds a dedicated Image / 图片 menu with Image Settings / 图片设置 and Import Images / 导入图片. By default, importing into notes.md saves screenshots as notes.assets/image-YYYYMMDD-HHmmss-SSS.png and writes relative Markdown references.

The settings cover copy/reference/embed, seven folder choices (including .assets, per-document folders, an explicit root and templates), separate filename rules for files and screenshots, relative/escaped paths, content deduplication, and optional remote-image downloads. Existing embedded, local and remote images can be collected into the selected folder. Original image files are retained.

Each folder choice is displayed as a complete path with localized document-name and image-name placeholders, alongside a live folder tree. For example, ./{document-name}.assets/{image-name}.{ext} and ./.assets/{document-name}/{image-name}.{ext} expose their different nesting directly. The preview labels the actual image directory, filename and Markdown reference. These display placeholders do not change the existing custom-template syntax or storage behavior.

Clicking an image reveals its editable Markdown/HTML in the document flow above the preview. Repeated clicks on the same image retain the source field, caret selection and loaded image; clicking elsewhere commits valid edits and collapses the field. Enter confirms, Escape cancels, and invalid syntax stays visible with an inline error. Copy and file-replacement actions are available beside the source. The interaction follows Typora's official image demonstration; it does not open a source dialog.

The image context menu provides Align Left / Center / Align Right, six scale presets (25%, 50%, 75%, 100%, 150%, 200%), and a size reset. Alignment uses standard HTML block display and horizontal margins; scaling uses zoom. Both survive save/reopen and file replacement. Alignment affects only the selected image, while resetting size retains alignment. The renderer scales the maximum-width constraint with zoom: a large image fitted to 780px becomes 390px at 50%, avoiding a width cap that otherwise cancels most of the visible change.

Imports retain surrounding rich text and track insertion positions through concurrent edits. Writes avoid overwrites and deduplicate concurrent imports. Path conversion decodes Markdown punctuation escapes, fixing filenames such as photo (1).png on save/reopen, and preserves HTML ampersands. Literal code examples remain unchanged.

The interface follows ColaMD's existing Chinese/English system-language selection. macOS packaging restores top-level .lproj markers from the shipped Electron Framework locales: copying a local electronDist had omitted these empty directories and caused Chinese systems to fall back to English. No general preferences page or language selector is added.

Validation on macOS arm64:

  • 18 filesystem tests; type checks for main, preload and renderer; theme color contract; production build; git diff --check.
  • Isolated Electron integration tests against the packaged app.asar: imports/settings, source editing, validation/cancel, document switches, save/reopen, file replacement, collection, mixed HTML paste, concurrent typing and remote downloads.
  • Six measured scale ratios using a 1600×900 fixture: displayed widths 195/390/585/780/1170/1560px. At 50%, left/center/right offsets are 0/195/390px in a 780px row. Alignment is also checked with scaling, save/reopen and replacement.
  • Repeated Chromium mouse-down/up events verify that both Markdown and HTML images retain the source/image DOM, selection and scroll position, then collapse on an outside click.
  • Package signature verification, 55 language markers, and byte-for-byte comparison of compiled output with the final archive.
  • Folder-layout update: renderer type check, all 12 theme color contracts, production build and the existing Electron image regression suite passed; 129 compiled files match the new package byte for byte.
  • Re-ran the complete Electron regression against the archive installed in /Applications/ColaMD.app. The installed archive matches the build hash, and its signature and all 55 language markers verify.
  • Installed Chinese UI: all seven folder options use complete paths; selecting the two per-document layouts updates the folder tree and actual-path preview correctly. An isolated check of the installed archive also verifies explicit roots, an empty root subfolder, and custom directory templates without changing user settings or documents.
  • Installed macOS app: actual image context-menu selections visibly position a single test image left, center and right; repeated image clicks keep inline source and path selection unchanged, and clicking document text collapses it.
  • Earlier native PNG clipboard and actual file-picker checks verified timestamped storage, relative paths and image rendering; the opt-in COLAMD_NATIVE_CLIPBOARD=1 test checks native paste and pixel equality without replacing clipboard contents.

Windows and Linux GUI behavior has not been tested locally. Typora YAML preferences, cloud uploaders and automatic attachment-folder moves are outside this change. Images inside arbitrary HTML blocks remain editable in document source mode. Other Markdown viewers may interpret HTML sizing differently.

Related: #21. Supersedes closed #72. Usage and validation commands: docs/images.md.

@orange2ai

Copy link
Copy Markdown
Collaborator

感谢提交!这个 PR 的实现质量和测试覆盖都很扎实(文件路径安全、原子写入、防覆盖等都做得很好)。

不过目前仓库里有两个并行的图片功能 PR(#73 和 #74),功能高度重叠,我们只能保留一条图片流水线。综合考虑后我们选择了粘贴优先、少配置的方向(#74),与 ColaMD 极简的产品定位更一致——#73 的 13 项设置对大多数用户来说偏重了。

很抱歉这个 PR 无法合并,但这不代表贡献没有被认真对待——你的文件安全实现被详细审查并记录为仓库的高水准参考。欢迎继续参与其他 Issue 或功能,期待你的下一个 PR。

@orange2ai

Copy link
Copy Markdown
Collaborator

维护者决定不做这个方案,关闭本 PR。投入很大,所以把判断说清楚,不是质量问题,是方向问题:

  • 设置项过重:8 个新模块 + Image 菜单 + Image Settings 里的 7 种文件夹选择 + copy/reference/embed 三种插入模式。ColaMD 的产品取向是默认零配置、不让用户做选择——一项功能如果先要给用户一个设置面板,它就已经偏离了定位
  • 与 feat(image): paste pipeline, Feishu-style toolbar, lightbox & base64 migration #74 撞车:同一时间有两份完整的图片管道方案,两案都不会合并,ColaMD 不打算在这个阶段引入图片管理子系统
  • 界面元素:新增菜单与设置面板与「界面只有标题栏 + 编辑器 + 文件面板」「如非必要,勿增实体」冲突

图片本地化存储(把内嵌 base64 落成相对路径文件、避免 .md 膨胀)这个问题本身有价值,如果将来重启,会先在一个 issue 里对齐最小范围再开工:默认零配置、不新增常驻 UI 或菜单、不引入设置面板。

感谢这份工作,抱歉方向没对上。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants