@kungal/editor-core 0.17.0 → 0.18.0

package/dist/preset/index.d.ts

@@ -4,7 +4,7 @@ import { b as KunEditorLocale, N as Notify, U as UploadImage, K as KunEditorAdap
 import * as _milkdown_kit_utils from '@milkdown/kit/utils';
 import { Extension } from '@codemirror/state';
 import { Uploader } from '@milkdown/kit/plugin/upload';
-import { Decoration } from '@milkdown/kit/prose/view';
+import { Decoration, EditorView } from '@milkdown/kit/prose/view';
 import { HighlightStyle } from '@codemirror/language';
 
 /** DOM attrs for the rendered spoiler chip. The styling references KunUI CSS
@@ -174,7 +174,8 @@ interface UploadPluginOptions {
  * the whole batch — more robust than the forum's all-or-nothing Promise.all.
  */
 declare const createUploader: (uploadImage: UploadImage, options?: UploadPluginOptions) => Uploader;
-/** The in-flight "uploading…" placeholder shown at the drop position. */
+/** The in-flight "uploading…" placeholder shown at the drop position (paste/drop
+ * path — Milkdown's `upload` plugin calls this). */
 declare const createUploadWidgetFactory: (options?: UploadPluginOptions) => (pos: number, spec: Parameters<typeof Decoration.widget>[2]) => Decoration;
 /** Applies the uploader + placeholder to a Milkdown ctx. Call after the `upload`
  * plugin has registered its config slice. */
@@ -186,6 +187,19 @@ declare const applyUploadConfig: (ctx: Ctx, uploadImage: UploadImage, options?:
  * image-free editor (galgame 简介) is expressed.
  */
 declare const createUploadPlugin: (uploadImage: UploadImage, options?: UploadPluginOptions) => MilkdownPlugin[];
+/** The placeholder DecorationSet plugin — add it when uploads are enabled. */
+declare const imageUploadPlaceholder: MilkdownPlugin;
+/**
+ * Upload a File and show an in-document "uploading…" placeholder at the caret
+ * until it resolves, then replace it with the image (or remove it + notify on
+ * failure). The placeholder isn't an undo step (`addToHistory: false`), so undo
+ * removes the inserted image cleanly. Used by the toolbar image button.
+ */
+declare const startImageUpload: (view: EditorView, file: File, options: {
+    uploadImage: UploadImage;
+    notify?: Notify;
+    locale?: KunEditorLocale;
+}) => Promise<void>;
 
 type PlaceholderMode = 'doc' | 'block';
 interface PlaceholderConfig {
@@ -226,4 +240,4 @@ interface KunEditorPluginOptions {
  */
 declare const createKunEditorPlugins: (adapters?: KunEditorAdapters, features?: KunEditorFeatures, options?: KunEditorPluginOptions) => MilkdownPlugin[];
 
-export { type CodeBlockOptions, type KunEditorPluginOptions, type MentionUrlConfig, type PlaceholderConfig, type PlaceholderMode, type QuoteReference, type UploadPluginOptions, applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, createPlaceholderPlugin, createQuotePlugin, createSpoilerPlugin, createStopLinkPlugin, createUploadPlugin, createUploadWidgetFactory, createUploader, editIcon, insertKunSpoilerCommand, insertMentionCommand, insertQuoteCommand, insertSpoilerInputRule, kunCM, kunCMHighlightStyle, kunCMTheme, linkCustomKeymap, mathBlockInputRule, mathInlineId, mathInlineInputRule, mathInlineSchema, mentionId, mentionSchema, quoteId, quoteSchema, remarkMathBlockPlugin, remarkMathPlugin, remarkMentionPlugin, remarkQuotePlugin, remarkSpoilerPlugin, searchIcon, setHeadingCommand, spoilerAttr, spoilerSchema, stopLinkCommand, toggleLatexCommand, visibilityOffIcon };
+export { type CodeBlockOptions, type KunEditorPluginOptions, type MentionUrlConfig, type PlaceholderConfig, type PlaceholderMode, type QuoteReference, type UploadPluginOptions, applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, createPlaceholderPlugin, createQuotePlugin, createSpoilerPlugin, createStopLinkPlugin, createUploadPlugin, createUploadWidgetFactory, createUploader, editIcon, imageUploadPlaceholder, insertKunSpoilerCommand, insertMentionCommand, insertQuoteCommand, insertSpoilerInputRule, kunCM, kunCMHighlightStyle, kunCMTheme, linkCustomKeymap, mathBlockInputRule, mathInlineId, mathInlineInputRule, mathInlineSchema, mentionId, mentionSchema, quoteId, quoteSchema, remarkMathBlockPlugin, remarkMathPlugin, remarkMentionPlugin, remarkQuotePlugin, remarkSpoilerPlugin, searchIcon, setHeadingCommand, spoilerAttr, spoilerSchema, startImageUpload, stopLinkCommand, toggleLatexCommand, visibilityOffIcon };

package/dist/preset/index.js

@@ -13,7 +13,7 @@ import { visit } from 'unist-util-visit';
 import { commandsCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
 import { setBlockType } from '@milkdown/kit/prose/commands';
 import { findNodeInSelection, nodeRule } from '@milkdown/kit/prose';
-import { NodeSelection, TextSelection, Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { NodeSelection, TextSelection, PluginKey, Plugin } from '@milkdown/kit/prose/state';
 import katex from 'katex';
 import remarkMath from 'remark-math';
 import { codeBlockComponent, codeBlockConfig } from '@milkdown/kit/component/code-block';
@@ -24,7 +24,7 @@ import { basicSetup } from 'codemirror';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { upload, uploadConfig } from '@milkdown/kit/plugin/upload';
-import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { DecorationSet, Decoration } from '@milkdown/kit/prose/view';
 
 var spoilerAttr = $nodeAttr("kun-spoiler", () => ({
   container: {
@@ -945,12 +945,15 @@ var createUploader = (uploadImage, options = {}) => {
     return nodes.filter((node) => node !== null);
   };
 };
+var uploadingWidget = (locale) => {
+  const el = document.createElement("span");
+  el.className = "kun-editor__uploading";
+  el.textContent = uploadingLabel(locale);
+  return el;
+};
 var createUploadWidgetFactory = (options = {}) => {
   return (pos, spec) => {
-    const widgetDOM = document.createElement("span");
-    widgetDOM.textContent = uploadingLabel(options.locale);
-    widgetDOM.style.color = "var(--color-primary)";
-    return Decoration.widget(pos, widgetDOM, spec);
+    return Decoration.widget(pos, uploadingWidget(options.locale), spec);
   };
 };
 var applyUploadConfig = (ctx, uploadImage, options = {}) => {
@@ -964,6 +967,76 @@ var uploadConfigPlugin = (uploadImage, options) => (ctx) => () => {
   applyUploadConfig(ctx, uploadImage, options);
 };
 var createUploadPlugin = (uploadImage, options = {}) => [...upload, uploadConfigPlugin(uploadImage, options)];
+var placeholderKey = new PluginKey("KUN_IMAGE_UPLOAD_PLACEHOLDER");
+var imageUploadPlaceholder = $prose(
+  () => new Plugin({
+    key: placeholderKey,
+    state: {
+      init: () => DecorationSet.empty,
+      apply(tr, set) {
+        let next = set.map(tr.mapping, tr.doc);
+        const meta = tr.getMeta(placeholderKey);
+        if (meta?.add) {
+          const deco = Decoration.widget(
+            meta.add.pos,
+            uploadingWidget(meta.add.locale),
+            { id: meta.add.id }
+          );
+          next = next.add(tr.doc, [deco]);
+        } else if (meta?.remove) {
+          const { id } = meta.remove;
+          next = next.remove(
+            next.find(void 0, void 0, (spec) => spec.id === id)
+          );
+        }
+        return next;
+      }
+    },
+    props: {
+      decorations: (state) => placeholderKey.getState(state)
+    }
+  })
+);
+var findPlaceholder = (view, id) => {
+  const set = placeholderKey.getState(view.state);
+  const found = set?.find(void 0, void 0, (spec) => spec.id === id);
+  return found && found.length ? found[0].from : null;
+};
+var startImageUpload = async (view, file, options) => {
+  if (!file.type.startsWith("image/")) {
+    return;
+  }
+  const id = {};
+  const tr = view.state.tr;
+  if (!tr.selection.empty) {
+    tr.deleteSelection();
+  }
+  tr.setMeta(placeholderKey, {
+    add: { id, pos: tr.selection.from, locale: options.locale }
+  });
+  tr.setMeta("addToHistory", false);
+  view.dispatch(tr);
+  try {
+    const src = await options.uploadImage(file);
+    const pos = findPlaceholder(view, id);
+    if (pos === null) {
+      return;
+    }
+    const imageType = view.state.schema.nodes.image;
+    const node = imageType?.createAndFill({ src, alt: file.name });
+    if (!node) {
+      return;
+    }
+    view.dispatch(
+      view.state.tr.replaceWith(pos, pos, node).setMeta(placeholderKey, { remove: { id } })
+    );
+  } catch {
+    view.dispatch(
+      view.state.tr.setMeta(placeholderKey, { remove: { id } }).setMeta("addToHistory", false)
+    );
+    options.notify?.(uploadFailedLabel(options.locale), "error");
+  }
+};
 var SKIP_PARENTS = /* @__PURE__ */ new Set([
   "code_block",
   "bullet_list",
@@ -1071,6 +1144,7 @@ var createKunEditorPlugins = (adapters = {}, features = {}, options = {}) => {
         notify: adapters.notify
       })
     );
+    plugins.push(imageUploadPlaceholder);
   }
   plugins.push(createStopLinkPlugin());
   plugins.push(createHeadingPlugin());
@@ -1085,6 +1159,6 @@ var createKunEditorPlugins = (adapters = {}, features = {}, options = {}) => {
   return plugins.flat();
 };
 
-export { applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, createPlaceholderPlugin, createQuotePlugin, createSpoilerPlugin, createStopLinkPlugin, createUploadPlugin, createUploadWidgetFactory, createUploader, editIcon, insertKunSpoilerCommand, insertMentionCommand, insertQuoteCommand, insertSpoilerInputRule, kunCM, kunCMHighlightStyle, kunCMTheme, linkCustomKeymap, mathBlockInputRule, mathInlineId, mathInlineInputRule, mathInlineSchema, mentionId, mentionSchema, quoteId, quoteSchema, remarkMathBlockPlugin, remarkMathPlugin, remarkMentionPlugin, remarkQuotePlugin, remarkSpoilerPlugin, searchIcon, setHeadingCommand, spoilerAttr, spoilerSchema, stopLinkCommand, toggleLatexCommand, visibilityOffIcon };
+export { applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, createPlaceholderPlugin, createQuotePlugin, createSpoilerPlugin, createStopLinkPlugin, createUploadPlugin, createUploadWidgetFactory, createUploader, editIcon, imageUploadPlaceholder, insertKunSpoilerCommand, insertMentionCommand, insertQuoteCommand, insertSpoilerInputRule, kunCM, kunCMHighlightStyle, kunCMTheme, linkCustomKeymap, mathBlockInputRule, mathInlineId, mathInlineInputRule, mathInlineSchema, mentionId, mentionSchema, quoteId, quoteSchema, remarkMathBlockPlugin, remarkMathPlugin, remarkMentionPlugin, remarkQuotePlugin, remarkSpoilerPlugin, searchIcon, setHeadingCommand, spoilerAttr, spoilerSchema, startImageUpload, stopLinkCommand, toggleLatexCommand, visibilityOffIcon };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map