feat: the editor supports command to add pictures (#100)

console/src/components/TextEditor.vue

@@ -15,7 +15,6 @@ import {
  ExtensionOrderedList,
  ExtensionStrike,
  ExtensionText,
- ExtensionImage,
  ExtensionTaskList,
  ExtensionLink,
  ExtensionTextAlign,
@@ -45,6 +44,7 @@ import {
 } from "@halo-dev/richtext-editor";
 import { watch } from "vue";
 import { TagsExtension } from "@/extensions/tags";
+import MomentExtensionImage from "@/extensions/images";
 
 const props = withDefaults(
  defineProps<{
@@ -88,7 +88,7 @@ const editor = useEditor({
  ExtensionOrderedList,
  ExtensionStrike,
  ExtensionText,
- ExtensionImage.configure({
+ MomentExtensionImage.configure({
  inline: true,
  allowBase64: false,
  HTMLAttributes: {

console/src/extensions/images/index.ts

@@ -0,0 +1,41 @@
+import { Editor, ExtensionImage, type Range } from "@halo-dev/richtext-editor";
+import type { ExtensionOptions } from "@halo-dev/richtext-editor/dist/types";
+import { markRaw } from "vue";
+import MdiFileImageBox from "~icons/mdi/file-image-box";
+
+export interface ImageOptions {
+ inline: boolean;
+ allowBase64: boolean;
+ HTMLAttributes: Record<string, unknown>;
+}
+
+const MomentExtensionImage = ExtensionImage.extend<
+ ExtensionOptions & ImageOptions
+>({
+ addOptions() {
+ return {
+ ...this.parent?.(),
+ getCommandMenuItems() {
+ return {
+ priority: 100,
+ icon: markRaw(MdiFileImageBox),
+ title: "图片",
+ keywords: ["image", "tupian"],
+ command: ({ editor, range }: { editor: Editor; range: Range }) => {
+ editor
+ .chain()
+ .focus()
+ .deleteRange(range)
+ .insertContent([
+ { type: "image", attrs: { src: "" } },
+ { type: "paragraph", content: "" },
+ ])
+ .run();
+ },
+ };
+ },
+ };
+ },
+});
+
+export default MomentExtensionImage;