Skip to content

fix: add top panel#3

Merged
SerVitasik merged 14 commits intomainfrom
feature/AdminForth/1263/add-top-panel-with-buttons-of-
Mar 19, 2026
Merged

fix: add top panel#3
SerVitasik merged 14 commits intomainfrom
feature/AdminForth/1263/add-top-panel-with-buttons-of-

Conversation

@kulikp1
Copy link

@kulikp1 kulikp1 commented Mar 18, 2026

No description provided.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a formatting toolbar (“top panel”) to the Monaco-based Markdown editor so users can apply common Markdown styles via UI controls.

Changes:

  • Added a top toolbar with formatting buttons (bold/italic/underline/strike, headings, lists, link, code).
  • Introduced applyFormat(...) to apply/toggle formatting in the Monaco model.
  • Added icon imports and shared button styling (btnClass) to support the toolbar UI.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a formatting toolbar (“top panel”) above the Monaco-based Markdown editor to apply common markdown styles from UI buttons.

Changes:

  • Replaces the previous empty spacer with a top toolbar containing formatting action buttons.
  • Adjusts editor container styling to visually connect toolbar + editor (rounded top/bottom, shared border).
  • Adds applyFormat logic to apply markdown wraps (bold/italic/strike/underline), links, code blocks, and block prefixes (headings/lists).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a formatting toolbar (“top panel”) above the Monaco-based markdown editor to apply common markdown formatting actions from the UI.

Changes:

  • Added a toolbar UI with formatting buttons (bold/italic/underline/strike, headings, lists, link, code block).
  • Introduced applyFormat() to implement the toolbar formatting behavior.
  • Added icon component imports and shared button styling via btnClass.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a configurable top formatting toolbar (“top panel”) to the AdminForth Markdown editor component, allowing plugin users to show/hide individual formatting actions via plugin options.

Changes:

  • Introduces topPanelSettings to PluginOptions to control toolbar button visibility.
  • Passes topPanelSettings through component meta (currently only in the attachments path).
  • Implements a new toolbar UI in MarkdownEditor.vue, including formatting actions and custom Enter handling for lists.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File Description
types.ts Adds topPanelSettings option flags to the plugin’s public configuration type.
index.ts Adds topPanelSettings into the editor component meta (but only when attachments is enabled).
custom/MarkdownEditor.vue Adds the toolbar UI, button visibility logic, formatting handlers, and an Enter keybinding for list continuation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

<div class="mb-2 w-full flex flex-col">
<div class="flex flex-wrap items-center gap-3 p-1.5 border border-gray-300 dark:border-gray-600 rounded-t-lg bg-gray-50 dark:bg-gray-800 w-full box-border ">

<button v-if="isBtnVisible('bold')" type="button" @click="applyFormat('bold')" :class="btnClass" title="Bold" aria-label="Bold"><IconLetterBoldOutline class="w-5 h-5" /></button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create component for button or just change the content of button

@SerVitasik SerVitasik merged commit bfa8c9e into main Mar 19, 2026
2 checks passed
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.

3 participants