milkdown-plugin-image-picker - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

index.d.ts

@@ -1,4 +0,50 @@
-import { Emotion, ThemeManager } from '@milkdown/core';
-import { image } from '@milkdown/preset-commonmark';
+import { MilkdownPlugin, Slice, Attrs, Ctx, Emotion, ThemeManager, RemarkPlugin, CmdTuple, CmdKey, NodeSchema } from '@milkdown/core';
+import { ImageOptions as ImageOptions$1 } from '@milkdown/preset-commonmark';
+import { NodeType } from '@milkdown/prose/model';
+import { NodeViewConstructor, MarkViewConstructor } from '@milkdown/prose/view';
+import { InputRule } from '@milkdown/prose/inputrules';
+import { Plugin } from '@milkdown/prose/state';
 
+declare type Utils = {
+    readonly getClassName: (attrs: Attrs, ...defaultValue: (string | null | undefined)[]) => string;
+    readonly getStyle: (style: (emotion: Emotion) => string | void) => string | undefined;
+    readonly themeManager: ThemeManager;
+};
+declare type UnknownRecord = Record<string, unknown>;
+declare type CommandConfig<T = unknown> = [commandKey: CmdKey<T>, defaultKey: string, args?: T];
+declare type CommonOptions<SupportedKeys extends string = string, Obj = UnknownRecord> = Obj & {
+    className?: (attrs: Attrs, ...defaultValue: (string | null | undefined)[]) => string;
+    keymap?: Partial<Record<SupportedKeys, string | string[]>>;
+    headless?: boolean;
+    view?: (ctx: Ctx) => NodeViewConstructor | MarkViewConstructor;
+};
+declare type Methods<Keys extends string, Type> = {
+    remarkPlugins?: (ctx: Ctx) => RemarkPlugin[];
+    inputRules?: (types: Type, ctx: Ctx) => InputRule[];
+    prosePlugins?: (types: Type, ctx: Ctx) => Plugin[];
+    commands?: (types: Type, ctx: Ctx) => CmdTuple[];
+    shortcuts?: Record<Keys, CommandConfig>;
+};
+declare type GetPlugin<SupportedKeys extends string = string, Options extends UnknownRecord = UnknownRecord> = (options?: Partial<CommonOptions<SupportedKeys, Options>>) => MilkdownPlugin;
+declare type Metadata<Origin = unknown> = {
+    origin: Origin;
+};
+declare type AddMetadata<SupportedKeys extends string = string, Options extends UnknownRecord = UnknownRecord> = (options?: Partial<CommonOptions<SupportedKeys, Options>>) => Metadata<GetPlugin<SupportedKeys, Options>> & MilkdownPlugin;
+declare type Spec<SupportedKeys extends string, Type, Rest> = Methods<SupportedKeys, Type> & Rest;
+declare type Factory<SupportedKeys extends string, Options extends UnknownRecord, Type, Rest> = (utils: Utils, options?: Partial<CommonOptions<SupportedKeys, Options>>) => Spec<SupportedKeys, Type, Rest>;
+declare type Extendable<SupportedKeys extends string, Options extends UnknownRecord, Type, Rest> = {
+    extend: <ExtendedSupportedKeys extends string = SupportedKeys, ExtendedOptions extends UnknownRecord = Options, ExtendedType extends Type = Type, ExtendedRest extends Rest = Rest>(extendFactory: (...args: [
+        original: Spec<SupportedKeys, Type, Rest>,
+        ...rest: Parameters<Factory<ExtendedSupportedKeys, ExtendedOptions, ExtendedType, ExtendedRest>>
+    ]) => Spec<ExtendedSupportedKeys, ExtendedType, ExtendedRest>, inject?: Slice<any>[]) => WithExtend<ExtendedSupportedKeys, ExtendedOptions, Type, Rest>;
+};
+declare type WithExtend<SupportedKeys extends string, Options extends UnknownRecord, Type, Rest> = AddMetadata<SupportedKeys, Options> & Extendable<SupportedKeys, Options, Type, Rest>;
+
+declare type NodeRest = {
+    id: string;
+    schema: (ctx: Ctx) => NodeSchema;
+    view?: (ctx: Ctx) => NodeViewConstructor;
+};
+declare type NodeCreator<SupportedKeys extends string = string, Options extends UnknownRecord = UnknownRecord> = WithExtend<SupportedKeys, Options, NodeType, NodeRest>;
+
 declare type Uploader = (files: FileList) => Promise<{
@@ -10,9 +56,28 @@ alt?: string;
 
-interface ImageOptions {
-    uploader?: Uploader;
-}
-declare const imagePickerPreset: ({ uploader, }?: ImageOptions) => typeof image;
+declare type ImageOptions = ImageOptions$1 & {
+    /**
+     * Setup image upload function.
+     * @default defaultUploader
+     */
+    uploader: Uploader;
+    /**
+     * ### Allows the user to select more than one file.
+     * @default true
+     */
+    multiple: boolean;
+    /**
+     * ### Accept is native properties of the file type input box.
+     * A comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
+     * @default 'image/*'
+     */
+    accept: string;
+};
+declare const imagePickerPreset: () => NodeCreator<string, ImageOptions>;
 
 declare const FileInputName = "file-picker-input";
-declare function createFilePickerButton({ css }: Emotion, manager: ThemeManager): HTMLSpanElement;
+declare function createFilePickerButton({ css }: Emotion, manager: ThemeManager): {
+    fileShell: HTMLSpanElement;
+    fileInput: HTMLInputElement;
+    fileButton: HTMLButtonElement;
+};
 declare const imagePickerView: (emotion: Emotion, manager: ThemeManager) => void;
@@ -19,0 +84,0 @@ declare function getIcon(icon: string, label: string): HTMLElement;

index.js

@@ -40,2 +40,3 @@ // packages/core/src/index.ts
 // packages/core/src/plugins.ts
+var id = "image";
 var inputHandler = (ctx, nodeView, uploader) => {
@@ -61,12 +62,43 @@ const dom = nodeView == null ? void 0 : nodeView.dom;
 };
-var imagePickerPreset = ({
-  uploader = defaultUploader
-} = {}) => image.extend((original, _utils, _options) => {
+var imagePickerPreset = () => image.extend((original, utils, options) => {
+  const {
+    multiple = true,
+    accept = "image/*",
+    uploader = defaultUploader
+  } = options || {};
   return {
     ...original,
-    view: (ctx) => (...args) => {
-      var _a, _b;
-      const viewRes = (_b = (_a = original.view) == null ? void 0 : _a.call(original, ctx)) == null ? void 0 : _b(...args);
-      inputHandler(ctx, viewRes || {}, uploader);
-      return viewRes;
+    view: (ctx) => (node) => {
+      let currNode = node;
+      const placeholder = (options == null ? void 0 : options.placeholder) ?? "Add an Image";
+      const isBlock = (options == null ? void 0 : options.isBlock) ?? false;
+      const renderer = utils.themeManager.get("image", {
+        placeholder,
+        isBlock,
+        ...{
+          multiple,
+          accept
+        }
+      });
+      if (!renderer)
+        return {};
+      const { dom, onUpdate } = renderer;
+      onUpdate(currNode);
+      inputHandler(ctx, { dom }, uploader);
+      return {
+        dom,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== id)
+            return false;
+          currNode = updatedNode;
+          onUpdate(currNode);
+          return true;
+        },
+        selectNode: () => {
+          dom.classList.add("ProseMirror-selectednode");
+        },
+        deselectNode: () => {
+          dom.classList.remove("ProseMirror-selectednode");
+        }
+      };
     }
@@ -86,3 +118,2 @@ };
   input.type = "file";
-  input.multiple = true;
   button.append(icon);
@@ -127,3 +158,7 @@ span.append(input, button);
   button.onclick = () => input == null ? void 0 : input.click();
-  return span;
+  return {
+    fileShell: span,
+    fileInput: input,
+    fileButton: button
+  };
 }
@@ -133,3 +168,5 @@ var imagePickerView = (emotion, manager) => {
   const palette = getPalette(manager);
-  manager.set("image", ({ placeholder, isBlock, onError, onLoad }) => {
+  manager.set("image", (options) => {
+    const { placeholder, isBlock, onError, onLoad } = options;
+    const { multiple, accept } = options;
     const createIcon = (icon2) => {
@@ -244,4 +281,6 @@ var _a;
     };
-    const fileButton = createFilePickerButton(emotion, manager);
-    container.append(icon, fileButton, $placeholder);
+    const { fileShell, fileInput } = createFilePickerButton(emotion, manager);
+    fileInput.accept = accept;
+    fileInput.multiple = multiple;
+    container.append(icon, fileShell, $placeholder);
     const onUpdate = (node) => {
@@ -248,0 +287,0 @@ const { src, alt, title, loading, failed } = node.attrs;

package.json

 {
   "name": "milkdown-plugin-image-picker",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Image file picker plugin for Milkdown",
@@ -5,0 +5,0 @@ "author": "Ayaka Rizumu<https://github.com/LittleSound>",

README.md

@@ -32,5 +32,30 @@ # Image Picker for Milkdown
 
-Editor/* ... */.use(commonmark.replace(image, imagePickerPreset({
+Editor/* ... */.use(commonmark.replace(image, imagePickerPreset()({
   uploader,
-})()))
+})))
 ```
+
+### Options Type
+
+```ts
+import type { ImageOptions as NativeImageOptions } from '@milkdown/preset-commonmark'
+
+export type ImageOptions = NativeImageOptions & {
+  /**
+   * Setup image upload function.
+   * @default defaultUploader
+   */
+  uploader: Uploader
+  /**
+   * ### Allows the user to select more than one file.
+   * @default true
+   */
+  multiple: boolean
+  /**
+   * ### Accept is native properties of the file type input box.
+   * A comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
+   * @default 'image/*'
+   */
+  accept: string
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

25435

increased by36.05%

Lines of code

699

increased by25.27%

Number of lines in readme file

61

increased by69.44%

No dependency changes