@kungal/editor-core 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @kungal/editor-core
 
+## 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
+
+- 59abbc8: Add a placeholder (empty-state text).
+
+  - **editor-core**: `createPlaceholderPlugin({ text, mode })` — a `$prose` plugin
+    that adds a ProseMirror node DECORATION to the empty block (`.kun-editor__placeholder`
+    class + `data-placeholder` attribute). Same mechanism as Milkdown Crepe's v7
+    placeholder feature — purely visual (a decoration), so it never enters the doc
+    or the markdown output. `mode` `'block'` (default) shows on any empty block,
+    `'doc'` only when the whole document is empty; skipped in readonly / code blocks
+    / lists / tables. `createKunEditorPlugins(..., { placeholder, placeholderMode })`
+    wires it (only when `placeholder` is non-empty). Exported from `/preset`.
+  - **editor-vue**: `<KunEditor placeholder="…">` prop, threaded through.
+  - **Headless**: the core ships only the class + `data-placeholder` hook; render it
+    with `.kun-editor__placeholder::before { content: attr(data-placeholder) }` (added
+    to the reference `kun-editor.css`, muted via a KunUI token).
+
 ## 0.16.0
 
 ## 0.15.0

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,132 @@ 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",
+  "ordered_list",
+  "list_item",
+  "table"
+]);
+var isDocEmpty = (doc) => doc.childCount <= 1 && !doc.firstChild?.content.size;
+var isInSkippedParent = (state) => {
+  const { $anchor } = state.selection;
+  for (let depth = $anchor.depth; depth > 0; depth--) {
+    if (SKIP_PARENTS.has($anchor.node(depth).type.name)) {
+      return true;
+    }
+  }
+  return false;
+};
+var createPlaceholderPlugin = (config = {}) => {
+  const text = config.text ?? "";
+  const mode = config.mode ?? "block";
+  const plugin = utils.$prose(
+    (ctx) => new state.Plugin({
+      key: new state.PluginKey("KUN_PLACEHOLDER"),
+      props: {
+        decorations: (state) => {
+          if (!text) {
+            return null;
+          }
+          const editable = ctx.get(core.editorViewOptionsCtx).editable;
+          if (editable && !editable(state)) {
+            return null;
+          }
+          if (mode === "doc" && !isDocEmpty(state.doc)) {
+            return null;
+          }
+          const { selection } = state;
+          if (!selection.empty || isInSkippedParent(state)) {
+            return null;
+          }
+          const node = selection.$anchor.parent;
+          if (node.content.size > 0) {
+            return null;
+          }
+          const before = selection.$anchor.before();
+          return view.DecorationSet.create(state.doc, [
+            view.Decoration.node(before, before + node.nodeSize, {
+              class: "kun-editor__placeholder",
+              "data-placeholder": text
+            })
+          ]);
+        }
+      }
+    })
+  );
+  return [plugin].flat();
+};
 
 // src/preset/index.ts
 var createKunEditorPlugins = (adapters = {}, features = {}, options = {}) => {
@@ -1028,9 +1157,18 @@ var createKunEditorPlugins = (adapters = {}, features = {}, options = {}) => {
         notify: adapters.notify
       })
     );
+    plugins.push(imageUploadPlaceholder);
   }
   plugins.push(createStopLinkPlugin());
   plugins.push(createHeadingPlugin());
+  if (options.placeholder) {
+    plugins.push(
+      createPlaceholderPlugin({
+        text: options.placeholder,
+        mode: options.placeholderMode
+      })
+    );
+  }
   return plugins.flat();
 };
 
@@ -1045,6 +1183,7 @@ exports.createHeadingPlugin = createHeadingPlugin;
 exports.createKatexPlugins = createKatexPlugins;
 exports.createKunEditorPlugins = createKunEditorPlugins;
 exports.createMentionPlugin = createMentionPlugin;
+exports.createPlaceholderPlugin = createPlaceholderPlugin;
 exports.createQuotePlugin = createQuotePlugin;
 exports.createSpoilerPlugin = createSpoilerPlugin;
 exports.createStopLinkPlugin = createStopLinkPlugin;
@@ -1052,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;
@@ -1077,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;