@kungal/editor-core 0.16.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,32 @@ 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 {
+    /** The placeholder text. Empty string disables the placeholder. */
+    text?: string;
+    /** `'block'` (default) shows on any empty block; `'doc'` only when empty. */
+    mode?: PlaceholderMode;
+}
+/**
+ * The placeholder plugin. `text` is baked in at creation (the editor is built
+ * once); pass it from `createKunEditorPlugins(..., { placeholder })`.
+ */
+declare const createPlaceholderPlugin: (config?: PlaceholderConfig) => MilkdownPlugin[];
 
 /** Extra, non-adapter options for the composed bundle. */
 interface KunEditorPluginOptions {
@@ -193,6 +220,10 @@ interface KunEditorPluginOptions {
     locale?: KunEditorLocale;
     /** KaTeX options forwarded to the code-block `latex` preview. */
     katexOptions?: KatexOptions;
+    /** Placeholder text shown when empty. Omit / empty string → no placeholder. */
+    placeholder?: string;
+    /** `'block'` (default) shows on any empty block; `'doc'` only when empty. */
+    placeholderMode?: 'doc' | 'block';
 }
 /**
  * Assemble the KunEditor Milkdown plugin list.
@@ -209,4 +240,4 @@ interface KunEditorPluginOptions {
  */
 declare const createKunEditorPlugins: (adapters?: KunEditorAdapters, features?: KunEditorFeatures, options?: KunEditorPluginOptions) => MilkdownPlugin[];
 
-export { type CodeBlockOptions, type KunEditorPluginOptions, type MentionUrlConfig, type QuoteReference, type UploadPluginOptions, applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, 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

@@ -8,12 +8,12 @@ import { indent } from '@milkdown/kit/plugin/indent';
 import { trailing } from '@milkdown/kit/plugin/trailing';
 import { expectDomTypeError } from '@milkdown/kit/exception';
 import { InputRule, textblockTypeInputRule } from '@milkdown/kit/prose/inputrules';
-import { $nodeAttr, $nodeSchema, $command, $inputRule, $remark, $useKeymap } from '@milkdown/kit/utils';
+import { $nodeAttr, $nodeSchema, $command, $inputRule, $remark, $useKeymap, $prose } from '@milkdown/kit/utils';
 import { visit } from 'unist-util-visit';
-import { commandsCtx } from '@milkdown/kit/core';
+import { commandsCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
 import { setBlockType } from '@milkdown/kit/prose/commands';
 import { findNodeInSelection, nodeRule } from '@milkdown/kit/prose';
-import { NodeSelection, TextSelection } 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 } 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,132 @@ 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",
+  "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 = $prose(
+    (ctx) => new Plugin({
+      key: new PluginKey("KUN_PLACEHOLDER"),
+      props: {
+        decorations: (state) => {
+          if (!text) {
+            return null;
+          }
+          const editable = ctx.get(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 DecorationSet.create(state.doc, [
+            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 = {}) => {
@@ -1015,12 +1144,21 @@ 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();
 };
 
-export { applyCodeBlockConfig, applyUploadConfig, blockKatexSchema, chevronDownIcon, clearIcon, copyIcon, createCodeBlockPlugins, createHeadingPlugin, createKatexPlugins, createKunEditorPlugins, createMentionPlugin, 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