@btst/components 0.0.0-stage → 1.0.0-beta.0

package/dist/ui/src/components/markdown-editor.cjs

@@ -0,0 +1,180 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const crepe = require('@milkdown/crepe');
+require('@milkdown/crepe/theme/common/style.css');
+require('../../../_private/ui/styles/markdown-editor.css');
+const utils = require('../lib/utils.cjs');
+const throttle = require('../lib/throttle.cjs');
+const core = require('@milkdown/kit/core');
+const listener = require('@milkdown/kit/plugin/listener');
+const model = require('@milkdown/kit/prose/model');
+const state = require('@milkdown/kit/prose/state');
+const React = require('react');
+
+function MarkdownEditor({
+  value,
+  onChange,
+  className,
+  uploadImage,
+  placeholder = "Write something...",
+  insertImageRef,
+  openMediaPickerForImageBlock
+}) {
+  const containerRef = React.useRef(null);
+  const crepeRef = React.useRef(null);
+  const isReadyRef = React.useRef(false);
+  const [isReady, setIsReady] = React.useState(false);
+  const onChangeRef = React.useRef(onChange);
+  const initialValueRef = React.useRef(value ?? "");
+  const openMediaPickerRef = React.useRef(
+    openMediaPickerForImageBlock
+  );
+  const throttledOnChangeRef = React.useRef(null);
+  onChangeRef.current = onChange;
+  openMediaPickerRef.current = openMediaPickerForImageBlock;
+  React.useLayoutEffect(() => {
+    if (crepeRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const hasMediaPicker = !!openMediaPickerRef.current;
+    const imageBlockConfig = {};
+    if (uploadImage) {
+      imageBlockConfig.onUpload = async (file) => uploadImage(file);
+    }
+    if (hasMediaPicker) {
+      imageBlockConfig.blockUploadPlaceholderText = "Media Picker";
+      imageBlockConfig.inlineUploadPlaceholderText = "Media Picker";
+    }
+    const crepe$1 = new crepe.Crepe({
+      root: container,
+      defaultValue: initialValueRef.current,
+      featureConfigs: {
+        [crepe.CrepeFeature.Placeholder]: {
+          text: placeholder
+        },
+        ...Object.keys(imageBlockConfig).length > 0 ? { [crepe.CrepeFeature.ImageBlock]: imageBlockConfig } : {}
+      }
+    });
+    const interceptHandler = (e) => {
+      if (!openMediaPickerRef.current) return;
+      const target = e.target;
+      const inPlaceholder = target.closest(".image-edit .placeholder");
+      if (!inPlaceholder) return;
+      if (target.matches("input")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const imageEdit = inPlaceholder.closest(".image-edit");
+      const linkInput = imageEdit?.querySelector(
+        ".link-input-area"
+      );
+      openMediaPickerRef.current((url) => {
+        if (!linkInput) return;
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeSetter?.call(linkInput, url);
+        linkInput.dispatchEvent(new Event("input", { bubbles: true }));
+        linkInput.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+        );
+      });
+    };
+    container.addEventListener("click", interceptHandler, true);
+    throttledOnChangeRef.current = throttle.throttle((markdown) => {
+      if (onChangeRef.current) onChangeRef.current(markdown);
+    }, 200);
+    crepe$1.editor.config((ctx) => {
+      ctx.get(listener.listenerCtx).markdownUpdated((_, markdown) => {
+        throttledOnChangeRef.current?.(markdown);
+      });
+      ctx.get(listener.listenerCtx).blur(() => {
+        if (!isReadyRef.current) return;
+        throttledOnChangeRef.current?.cancel?.();
+        onChangeRef.current?.(crepe$1.getMarkdown());
+      });
+    }).use(listener.listener);
+    crepe$1.create().then(() => {
+      isReadyRef.current = true;
+      setIsReady(true);
+    });
+    crepeRef.current = crepe$1;
+    return () => {
+      container.removeEventListener("click", interceptHandler, true);
+      try {
+        isReadyRef.current = false;
+        throttledOnChangeRef.current?.cancel?.();
+        throttledOnChangeRef.current = null;
+        crepe$1.destroy();
+      } finally {
+        crepeRef.current = null;
+      }
+    };
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!isReady) return;
+    if (!crepeRef.current) return;
+    if (typeof value !== "string") return;
+    let currentMarkdown;
+    try {
+      currentMarkdown = crepeRef.current?.getMarkdown?.();
+    } catch {
+      return;
+    }
+    if (currentMarkdown === value) return;
+    crepeRef.current.editor.action((ctx) => {
+      const view = ctx.get(core.editorViewCtx);
+      if (view?.hasFocus?.() === true) return;
+      const parser = ctx.get(core.parserCtx);
+      const doc = parser(value);
+      if (!doc) return;
+      const state$1 = view.state;
+      const selection = state$1.selection;
+      const from = selection.from;
+      let tr = state$1.tr;
+      tr = tr.replace(0, state$1.doc.content.size, new model.Slice(doc.content, 0, 0));
+      const docSize = doc.content.size;
+      const safeFrom = Math.max(1, Math.min(from, Math.max(1, docSize - 2)));
+      tr = tr.setSelection(state.Selection.near(tr.doc.resolve(safeFrom)));
+      view.dispatch(tr);
+    });
+  }, [value, isReady]);
+  React.useLayoutEffect(() => {
+    if (!insertImageRef) return;
+    insertImageRef.current = (url) => {
+      if (!crepeRef.current || !isReadyRef.current) return;
+      try {
+        const currentMarkdown = crepeRef.current.getMarkdown?.() ?? "";
+        const imageMarkdown = `
+
+![](${url})
+
+`;
+        const newMarkdown = currentMarkdown.trimEnd() + imageMarkdown;
+        crepeRef.current.editor.action((ctx) => {
+          const view = ctx.get(core.editorViewCtx);
+          const parser = ctx.get(core.parserCtx);
+          const doc = parser(newMarkdown);
+          if (!doc) return;
+          const state = view.state;
+          const tr = state.tr.replace(
+            0,
+            state.doc.content.size,
+            new model.Slice(doc.content, 0, 0)
+          );
+          view.dispatch(tr);
+        });
+        if (onChangeRef.current) onChangeRef.current(newMarkdown);
+      } catch {
+      }
+    };
+    return () => {
+      if (insertImageRef) insertImageRef.current = null;
+    };
+  }, [insertImageRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: utils.cn("milkdown-custom", className) });
+}
+
+exports.MarkdownEditor = MarkdownEditor;

package/dist/ui/src/components/markdown-editor.mjs

@@ -0,0 +1,178 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Crepe, CrepeFeature } from '@milkdown/crepe';
+import '@milkdown/crepe/theme/common/style.css';
+import '../../../_private/ui/styles/markdown-editor.css';
+import { cn } from '../lib/utils.mjs';
+import { throttle } from '../lib/throttle.mjs';
+import { editorViewCtx, parserCtx } from '@milkdown/kit/core';
+import { listenerCtx, listener } from '@milkdown/kit/plugin/listener';
+import { Slice } from '@milkdown/kit/prose/model';
+import { Selection } from '@milkdown/kit/prose/state';
+import { useRef, useState, useLayoutEffect } from 'react';
+
+function MarkdownEditor({
+  value,
+  onChange,
+  className,
+  uploadImage,
+  placeholder = "Write something...",
+  insertImageRef,
+  openMediaPickerForImageBlock
+}) {
+  const containerRef = useRef(null);
+  const crepeRef = useRef(null);
+  const isReadyRef = useRef(false);
+  const [isReady, setIsReady] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const initialValueRef = useRef(value ?? "");
+  const openMediaPickerRef = useRef(
+    openMediaPickerForImageBlock
+  );
+  const throttledOnChangeRef = useRef(null);
+  onChangeRef.current = onChange;
+  openMediaPickerRef.current = openMediaPickerForImageBlock;
+  useLayoutEffect(() => {
+    if (crepeRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const hasMediaPicker = !!openMediaPickerRef.current;
+    const imageBlockConfig = {};
+    if (uploadImage) {
+      imageBlockConfig.onUpload = async (file) => uploadImage(file);
+    }
+    if (hasMediaPicker) {
+      imageBlockConfig.blockUploadPlaceholderText = "Media Picker";
+      imageBlockConfig.inlineUploadPlaceholderText = "Media Picker";
+    }
+    const crepe = new Crepe({
+      root: container,
+      defaultValue: initialValueRef.current,
+      featureConfigs: {
+        [CrepeFeature.Placeholder]: {
+          text: placeholder
+        },
+        ...Object.keys(imageBlockConfig).length > 0 ? { [CrepeFeature.ImageBlock]: imageBlockConfig } : {}
+      }
+    });
+    const interceptHandler = (e) => {
+      if (!openMediaPickerRef.current) return;
+      const target = e.target;
+      const inPlaceholder = target.closest(".image-edit .placeholder");
+      if (!inPlaceholder) return;
+      if (target.matches("input")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const imageEdit = inPlaceholder.closest(".image-edit");
+      const linkInput = imageEdit?.querySelector(
+        ".link-input-area"
+      );
+      openMediaPickerRef.current((url) => {
+        if (!linkInput) return;
+        const nativeSetter = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        nativeSetter?.call(linkInput, url);
+        linkInput.dispatchEvent(new Event("input", { bubbles: true }));
+        linkInput.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+        );
+      });
+    };
+    container.addEventListener("click", interceptHandler, true);
+    throttledOnChangeRef.current = throttle((markdown) => {
+      if (onChangeRef.current) onChangeRef.current(markdown);
+    }, 200);
+    crepe.editor.config((ctx) => {
+      ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+        throttledOnChangeRef.current?.(markdown);
+      });
+      ctx.get(listenerCtx).blur(() => {
+        if (!isReadyRef.current) return;
+        throttledOnChangeRef.current?.cancel?.();
+        onChangeRef.current?.(crepe.getMarkdown());
+      });
+    }).use(listener);
+    crepe.create().then(() => {
+      isReadyRef.current = true;
+      setIsReady(true);
+    });
+    crepeRef.current = crepe;
+    return () => {
+      container.removeEventListener("click", interceptHandler, true);
+      try {
+        isReadyRef.current = false;
+        throttledOnChangeRef.current?.cancel?.();
+        throttledOnChangeRef.current = null;
+        crepe.destroy();
+      } finally {
+        crepeRef.current = null;
+      }
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isReady) return;
+    if (!crepeRef.current) return;
+    if (typeof value !== "string") return;
+    let currentMarkdown;
+    try {
+      currentMarkdown = crepeRef.current?.getMarkdown?.();
+    } catch {
+      return;
+    }
+    if (currentMarkdown === value) return;
+    crepeRef.current.editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      if (view?.hasFocus?.() === true) return;
+      const parser = ctx.get(parserCtx);
+      const doc = parser(value);
+      if (!doc) return;
+      const state = view.state;
+      const selection = state.selection;
+      const from = selection.from;
+      let tr = state.tr;
+      tr = tr.replace(0, state.doc.content.size, new Slice(doc.content, 0, 0));
+      const docSize = doc.content.size;
+      const safeFrom = Math.max(1, Math.min(from, Math.max(1, docSize - 2)));
+      tr = tr.setSelection(Selection.near(tr.doc.resolve(safeFrom)));
+      view.dispatch(tr);
+    });
+  }, [value, isReady]);
+  useLayoutEffect(() => {
+    if (!insertImageRef) return;
+    insertImageRef.current = (url) => {
+      if (!crepeRef.current || !isReadyRef.current) return;
+      try {
+        const currentMarkdown = crepeRef.current.getMarkdown?.() ?? "";
+        const imageMarkdown = `
+
+![](${url})
+
+`;
+        const newMarkdown = currentMarkdown.trimEnd() + imageMarkdown;
+        crepeRef.current.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          const parser = ctx.get(parserCtx);
+          const doc = parser(newMarkdown);
+          if (!doc) return;
+          const state = view.state;
+          const tr = state.tr.replace(
+            0,
+            state.doc.content.size,
+            new Slice(doc.content, 0, 0)
+          );
+          view.dispatch(tr);
+        });
+        if (onChangeRef.current) onChangeRef.current(newMarkdown);
+      } catch {
+      }
+    };
+    return () => {
+      if (insertImageRef) insertImageRef.current = null;
+    };
+  }, [insertImageRef]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("milkdown-custom", className) });
+}
+
+export { MarkdownEditor };