obsidian-plugin/raven-pensieve_obsidian-ace-code-editor
1
0
Fork 0
mirror of https://github.com/raven-pensieve/obsidian-ace-code-editor.git synced 2026-07-22 05:48:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
No description
62 commits 1 branch 28 tags 3 MiB
TypeScript 88.6%
JavaScript 7.8%
CSS 3.6%
Find a file
RavenHogWarts a5c58f9eec
feat: 增加配置项，优化设置界面布局 (#28) 
* feat(ui): 新增可配置标签页组件及样式

添加基于 radix-ui 的Nav 组件用于渲染可水平或垂直的
选项卡导航，并提供默认选中项、变更回调和自定义类名接口。
组件将传入的 tabs 列表映射为 Trigger 与 Content，垂直模式下
在列表侧支持可调整尺寸的占位条。

新增完整的基础样式文件，规范选项卡组、选项卡列表、触发
按钮与面板的布局和交互样式，包括：
- 横向/纵向布局切换与滚动优化（隐藏滚动条、iOS 平滑滚动）
- 按钮样式重置、悬停/聚焦/激活态样式与动画（激活下划线）
- 纵向模式下的左侧高亮条与面板布局适配
- 面板内容的入场动画和可滚动容器

目的：提供一个可复用、无侵入且可主题化的基础选项卡控件，
满足不同方向布局与可访问性需求，便于在项目中统一使用。

* feat(ui): 支持 Tab 禁用、修正样式前缀并重构设置页渲染

- 在 TabNav 中新增 Tab 接口的 disabled 字段，允许记选项为禁用。
- 使 TabNav 只对未禁用的选项渲染和作为默认激活项（filter enabledTabs），避免禁用项被选中。
- 统一组件 CSS 类名前缀由 "ace-..." 更改为 "ace--..."，并同步更新多个子元素（TabGroup、TabList、Tab、
  TabTitle、TabResizeBar、TabPanels、TabPanel）。
- 在 SettingsTab 中简化渲染逻辑，移除冗余容器和多余依赖，直接渲染 AceSettings 组件，减少嵌套 DOM。
- 在 AceSettings 中引入 TabNav 类型、parse 和将设置项按编辑器/渲染器分组的初步结构：
  - 添加 RendererSettings 子组件（渲染器相关配置示例），包含主题、字体族与字号等设置项。
  - 添加占位 EditorSettings 子组件，便于后续扩展编辑器相关配置。
- 清理不必要的 import（如 ObsidianUtils、t 的部分使用调整）并重构部分设置项实现以提高可维护性。

变更原因：
- 需要支持禁用的选项卡行为并防止其被默认激活。
- 统一样式前缀以修复命名不一致导致的样式问题。
- 精简设置页结构，降低 DOM 复杂度并为后续按模块拆分设置项做准备。

* feat: 增强编辑器设置与国际化文案支持

添加并暴露更多编辑器相关的设置（行号、边距、不可见字符缩进参考线、折叠部件、当前行高亮、选中文本高亮），并在设置界面
中加入对应的开关控件，方便用户在 UI 中直接切换这些行为。

更新 i18n 类型定义（types.ts）以包含新增设置字段，避免类型错误；
在英文与简体中文资源文件（locales/en.ts、locales/zh.ts）中增加相
应的文案及新增的 tabs 分组（renderer/session/editor/extend/about），
以支持设置面板的分组显示与多语言呈现。

修改 Settings 组件（AceSettings.tsx），在 Editor 与 Renderer 配置区
域渲染新增的 SettingsItem 和 Toggle 控件，连接到现有的配置更新
handleUpdateConfig，确保开关变更会保存到设置中。

目的：扩展编辑器功能可配置性，完善多语言支持及类型声明，提升
用户在设置中对编辑器行为的可控性与可发现性。

* refactor(settings): 移除多余配置

* feat(tab): 为选项卡面板添加独立滚动与位置记忆

- 在 TabNav 组件中引入对面板容器的 ref 与滚动位
  置缓存（scrollContainerRef、scrollPositionRef），并新增
  currentTab 状态以控制当前激活标签。
- 将 onValueChange 替换为 handleTabChange：切换标签时先
  保存当前标签的滚动位置，更新 currentTab 并延迟恢复
 目标标签的滚动位置，保证视图切换时位置一致。
- 增加 useLayoutEffect 与 onScroll 处理器（handleScroll），
  在组件更新或滚动时实时恢复/保存滚动位置信息，改善
 用户在标签间切换时的体验。
- 在相关 CSS（BaseTabNav / SettingsTab）中调整面板滚动样
  式：使用 overflow-y、隐藏横向滚动、设置 max-height/
  min-height，并在设置页容器中使用 flex 布局与内部滚动，
  以确保面板在不同布局与设备下都有稳定且可用的滚动区
  域。

* style: 精简设置面板样式并增强组件描述类型

- 移除 .ace-settings-container 的多余内边距和居中外边距，
  使设置面板在上更紧凑并避免重复间距。
- 将 SettingsItem 的 desc 属性类型扩展为 string | React.ReactNode，
  支持传入富文本或 React 节点以便渲染更复杂的描述内容。
- 在使用处直接以 parse(t("setting.desc")) 作为 desc 传入，
  避免嵌套子节点冗余，代码更简洁且一致地通过 desc 渲染描述。
2025-08-13 00:03:20 +08:00
.github Revert "ci: 优化发布流程 (#17)" 2025-06-22 21:31:18 +08:00
assets docs: 更新 README 图片路径及新增功能截图 2025-06-16 18:56:55 +08:00
scripts chroe: 支持beta版本号解析与自动递增 2025-06-12 22:24:39 +08:00
src feat: 增加配置项，优化设置界面布局 (#28) 2025-08-13 00:03:20 +08:00
style feat: 增加配置项，优化设置界面布局 (#28) 2025-08-13 00:03:20 +08:00
.editorconfig Initial commit 2025-05-04 12:05:18 +08:00
.eslintignore Initial commit 2025-05-04 12:05:18 +08:00
.eslintrc feat: 新增设置视图并优化代码嵌入初始化逻辑 (#20) 2025-07-17 00:29:16 +08:00
.gitignore Initial commit 2025-05-04 12:05:18 +08:00
.npmrc Initial commit 2025-05-04 12:05:18 +08:00
CHANGELOG-zh.md build: 1.2.2 2025-07-17 19:20:24 +08:00
CHANGELOG.md build: 1.2.2 2025-07-17 19:20:24 +08:00
CONTRIBUTING.md docs: 更新贡献指南并修正插件名称引用 2025-05-06 22:57:06 +08:00
LICENSE feat: 从 obsidian-ravenhogwarts-toolkit 插件中拆分移植 (#1) 2025-05-05 05:00:02 +08:00
MAKEFILE Initial commit 2025-05-04 12:05:18 +08:00
manifest-beta.json Revert "build: 1.2.0-beta.1" 2025-06-22 21:31:43 +08:00
manifest.json build: 1.2.2 2025-07-17 19:20:24 +08:00
package-lock.json feat: 增加配置项，优化设置界面布局 (#28) 2025-08-13 00:03:20 +08:00
package.json feat: 增加配置项，优化设置界面布局 (#28) 2025-08-13 00:03:20 +08:00
README-zh.md docs: 添加最新版下载量徽章显示下载统计信息 (#22) 2025-07-18 12:51:08 +08:00
README.md docs: 添加最新版下载量徽章显示下载统计信息 (#22) 2025-07-18 12:51:08 +08:00
tsconfig.json Initial commit 2025-05-04 12:05:18 +08:00
versions.json build: 1.2.2 2025-07-17 19:20:24 +08:00

README.md

English | 中文

ACE CODE EDITOR

An enhanced code editor using Ace editor, providing syntax highlighting, code folding, and other advanced editing features.

GitHub stars Total Downloads Latest Downloads GitHub License GitHub Issues GitHub Last Commit

Features

  • Edit code directly in Obsidian

  • Manage CSS snippets

  • Edit code blocks

  • Code file preview

Installation

Manual Installation

  1. Download the latest release
  2. Copy main.js, styles.css, and manifest.json to your vault's plugins folder: <vault>/.obsidian/plugins/obsidian-ace-code-editor/
  3. Reload Obsidian
  4. Enable the plugin in Settings → Community Plugins

BRAT (Recommended for Beta Users)

  1. Install BRAT plugin
  2. Click "Add Beta plugin" in BRAT settings
  3. Enter RavenHogWarts/obsidian-ace-code-editor
  4. Enable the plugin

Development

  • 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
  • npm run build to build the plugin
  • npm run build:local to build the plugin and copy it to your vault's plugins folder(need create a .env file in the project root and add the line: VAULT_PATH=/path/to/your/vault)
  • npm run version to bump the version number and update the manifest.json, version.json, package.json
  • npm run release to build the plugin and bump the version number

Support

If you encounter any issues or have suggestions:

If you find this plugin helpful, you can support the development through:

License

This project is licensed under the MIT LICENSE - see the LICENSE file for details.

Star History

Star History Chart