feat: add image resize support in articles (#14293)

2026-05-19 19:34:43 +05:30
parent 6560dbb68d
commit bca95efb82
8 changed files with 57 additions and 8 deletions
@@ -61,7 +61,7 @@ const handleChange = () => {
    <div class="flex flex-col gap-2 items-start">
      <div class="flex items-center justify-between w-full gap-3">
        <div class="flex items-center gap-2">
-          <h3 class="text-heading-2 text-n-slate-12">
+          <h3 class="text-heading-3 text-n-slate-12">
            {{ label }}
          </h3>
          <Label v-if="disabled" :label="disabledLabel" color="amber" compact />
@@ -7,6 +7,7 @@ import {
  ArticleMarkdownTransformer,
  EditorState,
  Selection,
+  imageResizeView,
 } from '@chatwoot/prosemirror-schema';
 import {
  suggestionsPlugin,
@@ -235,6 +236,7 @@ export default {
          const tr = editorView.state.tr.replaceSelectionWith(tableNode);
          editorView.dispatch(tr.scrollIntoView());
        },
+        imageUpload: () => this.openFileBrowser(),
      };

      const command = commandMap[actionKey];
@@ -332,6 +334,9 @@ export default {
    createEditorView() {
      editorView = new EditorView(this.$refs.editor, {
        state: state,
+        nodeViews: {
+          image: imageResizeView,
+        },
        dispatchTransaction: tx => {
          state = state.apply(tx);
          editorView.updateState(state);
@@ -60,6 +60,12 @@ const EDITOR_ACTIONS = [
    icon: 'i-lucide-table',
    menuKey: 'insertTable',
  },
+  {
+    value: 'imageUpload',
+    labelKey: 'SLASH_COMMANDS.IMAGE',
+    icon: 'i-lucide-image',
+    menuKey: 'imageUpload',
+  },
  {
    value: 'strike',
    labelKey: 'SLASH_COMMANDS.STRIKETHROUGH',
@@ -63,6 +63,7 @@
    "CODE": "Code",
    "BULLET_LIST": "Bullet List",
    "ORDERED_LIST": "Ordered List",
-    "TABLE": "Table"
+    "TABLE": "Table",
+    "IMAGE": "Image"
  }
 }