Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pref: optimize the toolbar space and fold the same type of function #5683

Merged
merged 2 commits into from
Apr 18, 2024
Merged

pref: optimize the toolbar space and fold the same type of function #5683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b45ec6
pref: optimize the toolbar space and fold the same type of function
LIlGG Apr 10, 2024
cede377
Merge branch 'main' into pref/fold-same-type-tool-menu
ruibaby Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 75 additions & 44 deletions ui/packages/editor/src/extensions/text-align/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Editor } from "@/tiptap/vue-3";
import { type Editor } from "@/tiptap/vue-3";
import TiptapTextAlign from "@tiptap/extension-text-align";
import type { TextAlignOptions } from "@tiptap/extension-text-align";
import ToolbarItem from "@/components/toolbar/ToolbarItem.vue";
Expand All @@ -9,59 +9,90 @@ import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
import { markRaw } from "vue";
import { i18n } from "@/locales";
import type { ExtensionOptions } from "@/types";
import ToolbarSubItem from "@/components/toolbar/ToolbarSubItem.vue";

const iconComponent = {
left: MdiFormatAlignLeft,
center: MdiFormatAlignCenter,
right: MdiFormatAlignRight,
justify: MdiFormatAlignJustify,
};

const getIcon = (editor: Editor) => {
let icon = MdiFormatAlignLeft;
Object.entries(iconComponent).forEach(([key, value]) => {
if (editor.isActive({ textAlign: key })) {
icon = value;
return;
}
});
return icon;
};

const TextAlign = TiptapTextAlign.extend<ExtensionOptions & TextAlignOptions>({
addOptions() {
return {
...this.parent?.(),
getToolbarItems({ editor }: { editor: Editor }) {
return [
{
priority: 180,
component: markRaw(ToolbarItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "left" }),
icon: markRaw(MdiFormatAlignLeft),
title: i18n.global.t("editor.common.align_left"),
action: () => editor.chain().focus().setTextAlign("left").run(),
},
return {
priority: 180,
component: markRaw(ToolbarItem),
props: {
editor,
isActive: false,
icon: markRaw(getIcon(editor)),
title: i18n.global.t("editor.common.align_method"),
},
{
priority: 190,
component: markRaw(ToolbarItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "center" }),
icon: markRaw(MdiFormatAlignCenter),
title: i18n.global.t("editor.common.align_center"),
action: () => editor.chain().focus().setTextAlign("center").run(),
children: [
{
priority: 0,
component: markRaw(ToolbarSubItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "left" }),
icon: markRaw(MdiFormatAlignLeft),
title: i18n.global.t("editor.common.align_left"),
action: () => editor.chain().focus().setTextAlign("left").run(),
},
},
},
{
priority: 200,
component: markRaw(ToolbarItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "right" }),
icon: markRaw(MdiFormatAlignRight),
title: i18n.global.t("editor.common.align_right"),
action: () => editor.chain().focus().setTextAlign("right").run(),
{
priority: 10,
component: markRaw(ToolbarSubItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "center" }),
icon: markRaw(MdiFormatAlignCenter),
title: i18n.global.t("editor.common.align_center"),
action: () =>
editor.chain().focus().setTextAlign("center").run(),
},
},
},
{
priority: 210,
component: markRaw(ToolbarItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "justify" }),
icon: markRaw(MdiFormatAlignJustify),
title: i18n.global.t("editor.common.align_justify"),
action: () =>
editor.chain().focus().setTextAlign("justify").run(),
{
priority: 20,
component: markRaw(ToolbarSubItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "right" }),
icon: markRaw(MdiFormatAlignRight),
title: i18n.global.t("editor.common.align_right"),
action: () =>
editor.chain().focus().setTextAlign("right").run(),
},
},
},
];
{
priority: 30,
component: markRaw(ToolbarSubItem),
props: {
editor,
isActive: editor.isActive({ textAlign: "justify" }),
icon: markRaw(MdiFormatAlignJustify),
title: i18n.global.t("editor.common.align_justify"),
action: () =>
editor.chain().focus().setTextAlign("justify").run(),
},
},
],
};
},
};
},
Expand Down
85 changes: 7 additions & 78 deletions ui/packages/editor/src/extensions/text/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { markRaw } from "vue";
import ColorBubbleItem from "@/extensions/color/ColorBubbleItem.vue";
import HighlightBubbleItem from "@/extensions/highlight/HighlightBubbleItem.vue";
import LinkBubbleButton from "@/extensions/link/LinkBubbleButton.vue";
import MdiFormatQuoteOpen from "~icons/mdi/format-quote-open";
import MdiCodeTags from "~icons/mdi/code-tags";
import MdiCodeBracesBox from "~icons/mdi/code-braces-box";
import MdiFormatColor from "~icons/mdi/format-color";
import MdiFormatColorHighlight from "~icons/mdi/format-color-highlight";
import MdiFormatItalic from "~icons/mdi/format-italic";
Expand All @@ -15,10 +13,6 @@ import MdiShare from "~icons/mdi/share";
import MdiFormatStrikethrough from "~icons/mdi/format-strikethrough";
import MdiFormatSubscript from "~icons/mdi/format-subscript";
import MdiFormatSuperscript from "~icons/mdi/format-superscript";
import MdiFormatAlignLeft from "~icons/mdi/format-align-left";
import MdiFormatAlignCenter from "~icons/mdi/format-align-center";
import MdiFormatAlignRight from "~icons/mdi/format-align-right";
import MdiFormatAlignJustify from "~icons/mdi/format-align-justify";
import MdiFormatUnderline from "~icons/mdi/format-underline";
import { isActive, isTextSelection } from "@/tiptap/vue-3";
import type { EditorState } from "@/tiptap/pm";
Expand Down Expand Up @@ -125,7 +119,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 51,
priority: 60,
component: markRaw(ColorBubbleItem),
props: {
isActive: ({ editor }) => editor.isActive("color"),
Expand All @@ -134,18 +128,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 60,
props: {
isActive: ({ editor }) => editor.isActive("blockquote"),
icon: markRaw(MdiFormatQuoteOpen),
title: i18n.global.t("editor.common.quote"),
action: ({ editor }) => {
return editor.commands.toggleBlockquote();
},
},
},
{
priority: 80,
priority: 70,
props: {
isActive: ({ editor }) => editor.isActive("code"),
icon: markRaw(MdiCodeTags),
Expand All @@ -155,17 +138,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 90,
props: {
isActive: ({ editor }) => editor.isActive("codeBlock"),
icon: markRaw(MdiCodeBracesBox),
title: i18n.global.t("editor.common.codeblock"),
action: ({ editor }) =>
editor.chain().focus().toggleCodeBlock().run(),
},
},
{
priority: 100,
priority: 80,
props: {
isActive: ({ editor }) => editor.isActive("superscript"),
icon: markRaw(MdiFormatSuperscript),
Expand All @@ -175,7 +148,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 110,
priority: 90,
props: {
isActive: ({ editor }) => editor.isActive("subscript"),
icon: markRaw(MdiFormatSubscript),
Expand All @@ -185,58 +158,14 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 120,
props: {
isActive: ({ editor }) =>
editor.isActive({ textAlign: "left" }),
icon: markRaw(MdiFormatAlignLeft),
title: i18n.global.t("editor.common.align_left"),
action: ({ editor }) =>
editor.chain().focus().setTextAlign("left").run(),
},
},
{
priority: 130,
props: {
isActive: ({ editor }) =>
editor.isActive({ textAlign: "center" }),
icon: markRaw(MdiFormatAlignCenter),
title: i18n.global.t("editor.common.align_center"),
action: ({ editor }) =>
editor.chain().focus().setTextAlign("center").run(),
},
},
{
priority: 140,
props: {
isActive: ({ editor }) =>
editor.isActive({ textAlign: "right" }),
icon: markRaw(MdiFormatAlignRight),
title: i18n.global.t("editor.common.align_right"),
action: ({ editor }) =>
editor.chain().focus().setTextAlign("right").run(),
},
},
{
priority: 150,
props: {
isActive: ({ editor }) =>
editor.isActive({ textAlign: "justify" }),
icon: markRaw(MdiFormatAlignJustify),
title: i18n.global.t("editor.common.align_justify"),
action: ({ editor }) =>
editor.chain().focus().setTextAlign("justify").run(),
},
},
{
priority: 160,
priority: 100,
component: markRaw(LinkBubbleButton),
props: {
isActive: ({ editor }) => editor.isActive("link"),
},
},
{
priority: 170,
priority: 110,
props: {
isActive: () => false,
visible: ({ editor }) => editor.isActive("link"),
Expand All @@ -246,7 +175,7 @@ const Text = TiptapText.extend<ExtensionOptions>({
},
},
{
priority: 180,
priority: 120,
props: {
isActive: () => false,
visible: ({ editor }) => editor.isActive("link"),
Expand Down
1 change: 1 addition & 0 deletions ui/packages/editor/src/locales/en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ editor:
color_picker:
more_color: More
common:
align_method: Align method
align_left: Align left
align_center: Align center
align_right: Align right
Expand Down
1 change: 1 addition & 0 deletions ui/packages/editor/src/locales/zh-CN.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ editor:
color_picker:
more_color: 更多颜色
common:
align_method: 对齐方式
align_left: 左对齐
align_center: 居中
align_right: 右对齐
Expand Down