@kungal/editor-core 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @kungal/editor-core
 
+## 0.19.0
+
+## 0.18.0
+
+### Minor Changes
+
+- 6545866: Toolbar image upload now shows an in-document "uploading…" placeholder.
+
+  Previously only paste/drop showed the in-flight placeholder (Milkdown's `upload`
+  plugin); the toolbar image button uploaded silently — the image just popped in
+  when the adapter resolved. Now the toolbar path uses the same placeholder UX
+  (ProseMirror's official upload-example pattern).
+
+  - **editor-core**: `startImageUpload(view, file, { uploadImage, notify, locale })`
+    - the `imageUploadPlaceholder` decoration plugin (exported from `/preset`;
+      wired by the preset when `uploadImage` is present). Inserts a
+      `.kun-editor__uploading` widget at the caret, uploads, then replaces it with the
+      image (or removes it + notifies on failure); not an undo step. The paste/drop
+      placeholder now uses the same `.kun-editor__uploading` class so both look
+      identical.
+  - **editor-vue**: `KunEditorToolbarApi` gains `uploadImage(file)`; both the
+    headless `EditorToolbar` and the `#toolbar` slot API route uploads through
+    `startImageUpload`.
+  - **editor-nuxt**: `<KunEditorToolbar>`'s image button uses it.
+  - **Headless kept**: the placeholder is a class + widget hook only; style it via
+    `.kun-editor__uploading` in the reference `kun-editor.css` (primary-colored).
+
+  Customizable: style the placeholder via `.kun-editor__uploading`; the text is
+  localized (zh/en). Verified in the docs production build: uploading via either
+  toolbar inserts the image; the unit tests confirm the placeholder shows during a
+  pending upload and is replaced on success / removed on failure.
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/preset/index.cjs

@@ -19,13 +19,13 @@ var katex = require('katex');
 var remarkMath = require('remark-math');
 var codeBlock = require('@milkdown/kit/component/code-block');
 var commands$1 = require('@codemirror/commands');
-var view = require('@codemirror/view');
+var view$1 = require('@codemirror/view');
 var languageData = require('@codemirror/language-data');
 var codemirror = require('codemirror');
 var language = require('@codemirror/language');
 var highlight = require('@lezer/highlight');
 var upload = require('@milkdown/kit/plugin/upload');
-var view$1 = require('@milkdown/kit/prose/view');
+var view = require('@milkdown/kit/prose/view');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -374,7 +374,7 @@ var colors = {
   content2: "var(--color-content2)",
   content3: "var(--color-content3)"};
 var kunCMTheme = () => {
-  return view.EditorView.theme({
+  return view$1.EditorView.theme({
     "&": {
       backgroundColor: colors.backgroundAlpha,
       borderRadius: "0.75rem",
@@ -690,8 +690,8 @@ var applyCodeBlockConfig = (ctx, options = {}) => {
     ...prev,
     extensions: [
       kunCM(),
-      view.EditorView.lineWrapping,
-      view.keymap.of(commands$1.defaultKeymap.concat(commands$1.indentWithTab)),
+      view$1.EditorView.lineWrapping,
+      view$1.keymap.of(commands$1.defaultKeymap.concat(commands$1.indentWithTab)),
       codemirror.basicSetup,
       ...options.extensions ?? []
     ],
@@ -958,12 +958,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 view$1.Decoration.widget(pos, widgetDOM, spec);
+    return view.Decoration.widget(pos, uploadingWidget(options.locale), spec);
   };
 };
 var applyUploadConfig = (ctx, uploadImage, options = {}) => {
@@ -977,6 +980,76 @@ var uploadConfigPlugin = (uploadImage, options) => (ctx) => () => {
   applyUploadConfig(ctx, uploadImage, options);
 };
 var createUploadPlugin = (uploadImage, options = {}) => [...upload.upload, uploadConfigPlugin(uploadImage, options)];
+var placeholderKey = new state.PluginKey("KUN_IMAGE_UPLOAD_PLACEHOLDER");
+var imageUploadPlaceholder = utils.$prose(
+  () => new state.Plugin({
+    key: placeholderKey,
+    state: {
+      init: () => view.DecorationSet.empty,
+      apply(tr, set) {
+        let next = set.map(tr.mapping, tr.doc);
+        const meta = tr.getMeta(placeholderKey);
+        if (meta?.add) {
+          const deco = view.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",
@@ -1021,8 +1094,8 @@ var createPlaceholderPlugin = (config = {}) => {
             return null;
           }
           const before = selection.$anchor.before();
-          return view$1.DecorationSet.create(state.doc, [
-            view$1.Decoration.node(before, before + node.nodeSize, {
+          return view.DecorationSet.create(state.doc, [
+            view.Decoration.node(before, before + node.nodeSize, {
               class: "kun-editor__placeholder",
               "data-placeholder": text
             })
@@ -1084,6 +1157,7 @@ var createKunEditorPlugins = (adapters = {}, features = {}, options = {}) => {
         notify: adapters.notify
       })
     );
+    plugins.push(imageUploadPlaceholder);
   }
   plugins.push(createStopLinkPlugin());
   plugins.push(createHeadingPlugin());
@@ -1117,6 +1191,7 @@ exports.createUploadPlugin = createUploadPlugin;
 exports.createUploadWidgetFactory = createUploadWidgetFactory;
 exports.createUploader = createUploader;
 exports.editIcon = editIcon;
+exports.imageUploadPlaceholder = imageUploadPlaceholder;
 exports.insertKunSpoilerCommand = insertKunSpoilerCommand;
 exports.insertMentionCommand = insertMentionCommand;
 exports.insertQuoteCommand = insertQuoteCommand;
@@ -1142,6 +1217,7 @@ exports.searchIcon = searchIcon;
 exports.setHeadingCommand = setHeadingCommand;
 exports.spoilerAttr = spoilerAttr;
 exports.spoilerSchema = spoilerSchema;
+exports.startImageUpload = startImageUpload;
 exports.stopLinkCommand = stopLinkCommand;
 exports.toggleLatexCommand = toggleLatexCommand;
 exports.visibilityOffIcon = visibilityOffIcon;