@milkdown/crepe 7.19.1 → 7.20.0

package/lib/esm/index.js

@@ -7,7 +7,7 @@ import { commandsCtx, editorViewCtx, editorCtx, EditorStatus, Editor, rootCtx, d
 import { paragraphSchema, clearTextInCurrentBlockCommand, setBlockTypeCommand, headingSchema, blockquoteSchema, wrapInBlockTypeCommand, hrSchema, addBlockTypeCommand, bulletListSchema, orderedListSchema, listItemSchema, codeBlockSchema, selectTextNearPosCommand, toggleStrongCommand, isMarkSelectedCommand, strongSchema, toggleEmphasisCommand, emphasisSchema, toggleInlineCodeCommand, inlineCodeSchema, isNodeSelectedCommand, linkSchema, commonmark } from '@milkdown/kit/preset/commonmark';
 import { findParent, findNodeInSelection, nodeRule } from '@milkdown/kit/prose';
 import { TextSelection, NodeSelection, EditorState, Plugin, PluginKey } from '@milkdown/kit/prose/state';
-import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment, shallowRef } from 'vue';
+import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment, shallowRef, onMounted } from 'vue';
 import { slashFactory, SlashProvider } from '@milkdown/kit/plugin/slash';
 import { $ctx, $prose, $nodeSchema, $command, $inputRule, $remark, getMarkdown } from '@milkdown/kit/utils';
 import { Icon } from '@milkdown/kit/component';
@@ -38,6 +38,7 @@ import { history } from '@milkdown/kit/plugin/history';
 import { indentConfig, indent } from '@milkdown/kit/plugin/indent';
 import { listenerCtx, listener } from '@milkdown/kit/plugin/listener';
 import { trailing } from '@milkdown/kit/plugin/trailing';
+import { uploadConfig, upload } from '@milkdown/kit/plugin/upload';
 
 var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["CodeMirror"] = "code-mirror";
@@ -50,6 +51,7 @@ var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["Placeholder"] = "placeholder";
   CrepeFeature2["Table"] = "table";
   CrepeFeature2["Latex"] = "latex";
+  CrepeFeature2["TopBar"] = "top-bar";
   return CrepeFeature2;
 })(CrepeFeature || {});
 const defaultFeatures = {
@@ -62,7 +64,8 @@ const defaultFeatures = {
   ["toolbar" /* Toolbar */]: true,
   ["code-mirror" /* CodeMirror */]: true,
   ["table" /* Table */]: true,
-  ["latex" /* Latex */]: true
+  ["latex" /* Latex */]: true,
+  ["top-bar" /* TopBar */]: false
 };
 
 const alignCenterIcon = `
@@ -266,6 +269,19 @@ const codeIcon = `
   </svg>
 `;
 
+const codeBlockIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495 12l-4.242 4.243-1.415-1.415L8.667 12z"
+    />
+  </svg>
+`;
+
 const confirmIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -768,22 +784,22 @@ function isInList(selection) {
   return (type == null ? void 0 : type.name) === "list_item";
 }
 
-var __typeError$5 = (msg) => {
+var __typeError$6 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
+var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
 var _groups, _getGroupInstance;
 class GroupBuilder {
   constructor() {
-    __privateAdd$5(this, _groups, []);
+    __privateAdd$6(this, _groups, []);
     this.clear = () => {
-      __privateSet$5(this, _groups, []);
+      __privateSet$6(this, _groups, []);
       return this;
     };
-    __privateAdd$5(this, _getGroupInstance, (group) => {
+    __privateAdd$6(this, _getGroupInstance, (group) => {
       const groupInstance = {
         group,
         addItem: (key, item) => {
@@ -805,23 +821,26 @@ class GroupBuilder {
         label,
         items
       };
-      __privateGet$5(this, _groups).push(group);
-      return __privateGet$5(this, _getGroupInstance).call(this, group);
+      __privateGet$6(this, _groups).push(group);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
     };
     this.getGroup = (key) => {
-      const group = __privateGet$5(this, _groups).find((group2) => group2.key === key);
+      const group = __privateGet$6(this, _groups).find((group2) => group2.key === key);
       if (!group) throw new Error(`Group with key ${key} not found`);
-      return __privateGet$5(this, _getGroupInstance).call(this, group);
+      return __privateGet$6(this, _getGroupInstance).call(this, group);
     };
     this.build = () => {
-      return __privateGet$5(this, _groups);
+      return __privateGet$6(this, _groups);
     };
   }
 }
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
-function getGroups$1(filter, config, ctx) {
+function keepAlive(..._args) {
+}
+
+function getGroups$2(filter, config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb;
   const flags = ctx && useCrepeFeatures(ctx).get();
   const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
@@ -1088,7 +1107,7 @@ function getGroups$1(filter, config, ctx) {
           commands.call(clearTextInCurrentBlockCommand.key);
           commands.call(addBlockTypeCommand.key, {
             nodeType: codeBlock,
-            attrs: { language: "LaTex" }
+            attrs: { language: "LaTeX" }
           });
         }
       });
@@ -1124,6 +1143,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
+keepAlive(h);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -1149,7 +1169,7 @@ const Menu = defineComponent({
   },
   setup({ ctx, show, filter, hide, config }) {
     const host = ref();
-    const groupInfo = computed(() => getGroups$1(filter.value, config, ctx));
+    const groupInfo = computed(() => getGroups$2(filter.value, config, ctx));
     const hoverIndex = ref(0);
     const prevMousePosition = ref({ x: -999, y: -999 });
     const onPointerMove = (e) => {
@@ -1178,7 +1198,7 @@ const Menu = defineComponent({
     };
     const runByIndex = (index) => {
       const item = groupInfo.value.groups.flatMap((group) => group.items).at(index);
-      if (item && ctx) item.onRun(ctx);
+      if ((item == null ? void 0 : item.onRun) && ctx) item.onRun(ctx);
       hide();
     };
     const onKeydown = (e) => {
@@ -1282,14 +1302,14 @@ const Menu = defineComponent({
   }
 });
 
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$3, _app$3, _filter, _slashProvider, _programmaticallyPos;
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$3, _app$4, _filter, _slashProvider, _programmaticallyPos;
 const menu = slashFactory("CREPE_MENU");
 const menuAPI = $ctx(
   {
@@ -1307,33 +1327,33 @@ function configureMenu(ctx, config) {
 }
 class MenuView {
   constructor(ctx, view, config) {
-    __privateAdd$4(this, _content$3);
-    __privateAdd$4(this, _app$3);
-    __privateAdd$4(this, _filter);
-    __privateAdd$4(this, _slashProvider);
-    __privateAdd$4(this, _programmaticallyPos, null);
+    __privateAdd$5(this, _content$3);
+    __privateAdd$5(this, _app$4);
+    __privateAdd$5(this, _filter);
+    __privateAdd$5(this, _slashProvider);
+    __privateAdd$5(this, _programmaticallyPos, null);
     this.update = (view) => {
-      __privateGet$4(this, _slashProvider).update(view);
+      __privateGet$5(this, _slashProvider).update(view);
     };
     this.show = (pos) => {
-      __privateSet$4(this, _programmaticallyPos, pos);
-      __privateGet$4(this, _filter).value = "";
-      __privateGet$4(this, _slashProvider).show();
+      __privateSet$5(this, _programmaticallyPos, pos);
+      __privateGet$5(this, _filter).value = "";
+      __privateGet$5(this, _slashProvider).show();
     };
     this.hide = () => {
-      __privateSet$4(this, _programmaticallyPos, null);
-      __privateGet$4(this, _slashProvider).hide();
+      __privateSet$5(this, _programmaticallyPos, null);
+      __privateGet$5(this, _slashProvider).hide();
     };
     this.destroy = () => {
-      __privateGet$4(this, _slashProvider).destroy();
-      __privateGet$4(this, _app$3).unmount();
-      __privateGet$4(this, _content$3).remove();
+      __privateGet$5(this, _slashProvider).destroy();
+      __privateGet$5(this, _app$4).unmount();
+      __privateGet$5(this, _content$3).remove();
     };
     const content = document.createElement("div");
     content.classList.add("milkdown-slash-menu");
     const show = ref(false);
     const filter = ref("");
-    __privateSet$4(this, _filter, filter);
+    __privateSet$5(this, _filter, filter);
     const hide = this.hide;
     const app = createApp(Menu, {
       ctx,
@@ -1342,12 +1362,12 @@ class MenuView {
       filter,
       hide
     });
-    __privateSet$4(this, _app$3, app);
+    __privateSet$5(this, _app$4, app);
     app.mount(content);
-    __privateSet$4(this, _content$3, content);
+    __privateSet$5(this, _content$3, content);
     const self = this;
-    __privateSet$4(this, _slashProvider, new SlashProvider({
-      content: __privateGet$4(this, _content$3),
+    __privateSet$5(this, _slashProvider, new SlashProvider({
+      content: __privateGet$5(this, _content$3),
       debounce: 20,
       shouldShow(view2) {
         if (isInCodeBlock(view2.state.selection) || isInList(view2.state.selection))
@@ -1360,13 +1380,13 @@ class MenuView {
         if (!isSelectionAtEndOfNode(view2.state.selection)) {
           return false;
         }
-        const pos = __privateGet$4(self, _programmaticallyPos);
+        const pos = __privateGet$5(self, _programmaticallyPos);
         filter.value = currentText.startsWith("/") ? currentText.slice(1) : currentText;
         if (typeof pos === "number") {
           const maxSize = view2.state.doc.nodeSize - 2;
           const validPos = Math.min(pos, maxSize);
           if (view2.state.doc.resolve(validPos).node() !== view2.state.doc.resolve(view2.state.selection.from).node()) {
-            __privateSet$4(self, _programmaticallyPos, null);
+            __privateSet$5(self, _programmaticallyPos, null);
             return false;
           }
           return true;
@@ -1376,10 +1396,10 @@ class MenuView {
       },
       offset: 10
     }));
-    __privateGet$4(this, _slashProvider).onShow = () => {
+    __privateGet$5(this, _slashProvider).onShow = () => {
       show.value = true;
     };
-    __privateGet$4(this, _slashProvider).onHide = () => {
+    __privateGet$5(this, _slashProvider).onHide = () => {
       show.value = false;
     };
     this.update(view);
@@ -1390,7 +1410,7 @@ class MenuView {
   }
 }
 _content$3 = new WeakMap();
-_app$3 = new WeakMap();
+_app$4 = new WeakMap();
 _filter = new WeakMap();
 _slashProvider = new WeakMap();
 _programmaticallyPos = new WeakMap();
@@ -1402,6 +1422,7 @@ function isSelectionAtEndOfNode(selection) {
   return offset === parent.content.size;
 }
 
+keepAlive(h, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {
@@ -1445,45 +1466,45 @@ const BlockHandle = defineComponent({
   }
 });
 
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _provider$1, _app$2, _ctx;
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$2, _provider$1, _app$3, _ctx;
 class BlockHandleView {
   constructor(ctx, config) {
-    __privateAdd$3(this, _content$2);
-    __privateAdd$3(this, _provider$1);
-    __privateAdd$3(this, _app$2);
-    __privateAdd$3(this, _ctx);
+    __privateAdd$4(this, _content$2);
+    __privateAdd$4(this, _provider$1);
+    __privateAdd$4(this, _app$3);
+    __privateAdd$4(this, _ctx);
     this.update = () => {
-      __privateGet$3(this, _provider$1).update();
+      __privateGet$4(this, _provider$1).update();
     };
     this.destroy = () => {
-      __privateGet$3(this, _provider$1).destroy();
-      __privateGet$3(this, _content$2).remove();
-      __privateGet$3(this, _app$2).unmount();
+      __privateGet$4(this, _provider$1).destroy();
+      __privateGet$4(this, _content$2).remove();
+      __privateGet$4(this, _app$3).unmount();
     };
     this.onAdd = () => {
-      const ctx = __privateGet$3(this, _ctx);
+      const ctx = __privateGet$4(this, _ctx);
       const view = ctx.get(editorViewCtx);
       if (!view.hasFocus()) view.focus();
       const { state, dispatch } = view;
-      const active = __privateGet$3(this, _provider$1).active;
+      const active = __privateGet$4(this, _provider$1).active;
       if (!active) return;
       const $pos = active.$pos;
       const pos = $pos.pos + active.node.nodeSize;
       let tr = state.tr.insert(pos, paragraphSchema.type(ctx).create());
       tr = tr.setSelection(TextSelection.near(tr.doc.resolve(pos)));
       dispatch(tr.scrollIntoView());
-      __privateGet$3(this, _provider$1).hide();
+      __privateGet$4(this, _provider$1).hide();
       ctx.get(menuAPI.key).show(tr.selection.from);
     };
     var _a, _b, _c;
-    __privateSet$3(this, _ctx, ctx);
+    __privateSet$4(this, _ctx, ctx);
     const content = document.createElement("div");
     content.classList.add("milkdown-block-handle");
     const app = createApp(BlockHandle, {
@@ -1492,10 +1513,10 @@ class BlockHandleView {
       handleIcon: (_b = config == null ? void 0 : config.handleDragIcon) != null ? _b : menuIcon
     });
     app.mount(content);
-    __privateSet$3(this, _app$2, app);
-    __privateSet$3(this, _content$2, content);
+    __privateSet$4(this, _app$3, app);
+    __privateSet$4(this, _content$2, content);
     const blockProviderOptions = (_c = config == null ? void 0 : config.blockHandle) != null ? _c : {};
-    __privateSet$3(this, _provider$1, new BlockProvider({
+    __privateSet$4(this, _provider$1, new BlockProvider({
       ctx,
       content,
       getOffset: () => 16,
@@ -1522,7 +1543,7 @@ class BlockHandleView {
 }
 _content$2 = new WeakMap();
 _provider$1 = new WeakMap();
-_app$2 = new WeakMap();
+_app$3 = new WeakMap();
 _ctx = new WeakMap();
 function configureBlockHandle(ctx, config) {
   ctx.set(blockConfig.key, {
@@ -1628,7 +1649,9 @@ const imageBlock = (editor, config) => {
         uploadPlaceholderText: (_f = config == null ? void 0 : config.blockUploadPlaceholderText) != null ? _f : "or paste link",
         onUpload: (_h = (_g = config == null ? void 0 : config.blockOnUpload) != null ? _g : config == null ? void 0 : config.onUpload) != null ? _h : value.onUpload,
         proxyDomURL: config == null ? void 0 : config.proxyDomURL,
-        onImageLoadError: (_i = config == null ? void 0 : config.onImageLoadError) != null ? _i : value.onImageLoadError
+        onImageLoadError: (_i = config == null ? void 0 : config.onImageLoadError) != null ? _i : value.onImageLoadError,
+        maxWidth: config == null ? void 0 : config.maxWidth,
+        maxHeight: config == null ? void 0 : config.maxHeight
       };
     });
   }).use(imageBlockComponent).use(imageInlineComponent);
@@ -1745,6 +1768,7 @@ const toggleLatexCommand = $command("ToggleLatex", (ctx) => {
 
 const inlineLatexTooltip = tooltipFactory("INLINE_LATEX");
 
+keepAlive(h);
 const LatexTooltip = defineComponent({
   props: {
     config: {
@@ -1780,31 +1804,31 @@ const LatexTooltip = defineComponent({
   }
 });
 
-var __typeError$2 = (msg) => {
+var __typeError$3 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$1, _provider, _dom, _innerView, _updateValue, _app$1, _onHide, _shouldShow;
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var _content$1, _provider, _dom, _innerView, _updateValue, _app$2, _onHide, _shouldShow;
 class LatexInlineTooltip {
   constructor(ctx, view, config) {
     this.ctx = ctx;
-    __privateAdd$2(this, _content$1);
-    __privateAdd$2(this, _provider);
-    __privateAdd$2(this, _dom);
-    __privateAdd$2(this, _innerView, shallowRef(null));
-    __privateAdd$2(this, _updateValue, shallowRef(() => {
+    __privateAdd$3(this, _content$1);
+    __privateAdd$3(this, _provider);
+    __privateAdd$3(this, _dom);
+    __privateAdd$3(this, _innerView, shallowRef(null));
+    __privateAdd$3(this, _updateValue, shallowRef(() => {
     }));
-    __privateAdd$2(this, _app$1);
-    __privateAdd$2(this, _onHide, () => {
-      if (__privateGet$2(this, _innerView).value) {
-        __privateGet$2(this, _innerView).value.destroy();
-        __privateGet$2(this, _innerView).value = null;
+    __privateAdd$3(this, _app$2);
+    __privateAdd$3(this, _onHide, () => {
+      if (__privateGet$3(this, _innerView).value) {
+        __privateGet$3(this, _innerView).value.destroy();
+        __privateGet$3(this, _innerView).value = null;
       }
     });
-    __privateAdd$2(this, _shouldShow, (view) => {
+    __privateAdd$3(this, _shouldShow, (view) => {
       const shouldShow = () => {
         const { selection, schema } = view.state;
         if (selection.empty) return false;
@@ -1816,7 +1840,7 @@ class LatexInlineTooltip {
           null,
           schema.text(node.attrs.value)
         );
-        const innerView = new EditorView(__privateGet$2(this, _dom), {
+        const innerView = new EditorView(__privateGet$3(this, _dom), {
           state: EditorState.create({
             doc: paragraph,
             schema: new Schema({
@@ -1843,15 +1867,15 @@ class LatexInlineTooltip {
                 "Mod-Z": redo,
                 "Mod-y": redo,
                 Enter: () => {
-                  __privateGet$2(this, _updateValue).value();
+                  __privateGet$3(this, _updateValue).value();
                   return true;
                 }
               })
             ]
           })
         });
-        __privateGet$2(this, _innerView).value = innerView;
-        __privateGet$2(this, _updateValue).value = () => {
+        __privateGet$3(this, _innerView).value = innerView;
+        __privateGet$3(this, _updateValue).value = () => {
           const { tr } = view.state;
           tr.setNodeAttribute(textFrom, "value", innerView.state.doc.textContent);
           view.dispatch(tr);
@@ -1862,37 +1886,37 @@ class LatexInlineTooltip {
         return true;
       };
       const show = shouldShow();
-      if (!show) __privateGet$2(this, _onHide).call(this);
+      if (!show) __privateGet$3(this, _onHide).call(this);
       return show;
     });
     this.update = (view, prevState) => {
-      __privateGet$2(this, _provider).update(view, prevState);
+      __privateGet$3(this, _provider).update(view, prevState);
     };
     this.destroy = () => {
-      __privateGet$2(this, _app$1).unmount();
-      __privateGet$2(this, _provider).destroy();
-      __privateGet$2(this, _content$1).remove();
+      __privateGet$3(this, _app$2).unmount();
+      __privateGet$3(this, _provider).destroy();
+      __privateGet$3(this, _content$1).remove();
     };
     const content = document.createElement("div");
     content.className = "milkdown-latex-inline-edit";
-    __privateSet$2(this, _content$1, content);
-    __privateSet$2(this, _app$1, createApp(LatexTooltip, {
+    __privateSet$3(this, _content$1, content);
+    __privateSet$3(this, _app$2, createApp(LatexTooltip, {
       config,
-      innerView: __privateGet$2(this, _innerView),
-      updateValue: __privateGet$2(this, _updateValue)
+      innerView: __privateGet$3(this, _innerView),
+      updateValue: __privateGet$3(this, _updateValue)
     }));
-    __privateGet$2(this, _app$1).mount(content);
-    __privateSet$2(this, _provider, new TooltipProvider({
+    __privateGet$3(this, _app$2).mount(content);
+    __privateSet$3(this, _provider, new TooltipProvider({
       debounce: 0,
-      content: __privateGet$2(this, _content$1),
-      shouldShow: __privateGet$2(this, _shouldShow),
+      content: __privateGet$3(this, _content$1),
+      shouldShow: __privateGet$3(this, _shouldShow),
       offset: 10,
       floatingUIOptions: {
         placement: "bottom"
       }
     }));
-    __privateGet$2(this, _provider).update(view);
-    __privateSet$2(this, _dom, document.createElement("div"));
+    __privateGet$3(this, _provider).update(view);
+    __privateSet$3(this, _dom, document.createElement("div"));
   }
 }
 _content$1 = new WeakMap();
@@ -1900,7 +1924,7 @@ _provider = new WeakMap();
 _dom = new WeakMap();
 _innerView = new WeakMap();
 _updateValue = new WeakMap();
-_app$1 = new WeakMap();
+_app$2 = new WeakMap();
 _onHide = new WeakMap();
 _shouldShow = new WeakMap();
 
@@ -2105,7 +2129,7 @@ const table = (editor, config) => {
   }).use(tableBlock);
 };
 
-function getGroups(config, ctx) {
+function getGroups$1(config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g;
   const groupBuilder = new GroupBuilder();
   groupBuilder.addGroup("formatting", "Formatting").addItem("bold", {
@@ -2193,6 +2217,7 @@ function getGroups(config, ctx) {
   return groupBuilder.build();
 }
 
+keepAlive(h, Fragment);
 const Toolbar = defineComponent({
   props: {
     ctx: {
@@ -2220,15 +2245,17 @@ const Toolbar = defineComponent({
     const { ctx, config } = props;
     const onClick = (fn) => (e) => {
       e.preventDefault();
-      ctx && fn(ctx);
+      if (ctx) {
+        fn == null ? void 0 : fn(ctx);
+      }
     };
     function checkActive(checker) {
-      props.selection.value;
+      keepAlive(props.selection.value);
       const status = ctx.get(editorCtx).status;
       if (status !== EditorStatus.Created) return false;
       return checker(ctx);
     }
-    const groupInfo = computed(() => getGroups(config, ctx));
+    const groupInfo = computed(() => getGroups$1(config, ctx));
     return () => {
       return /* @__PURE__ */ h(Fragment, null, groupInfo.value.map((group) => {
         return group.items.map((item) => {
@@ -2257,49 +2284,49 @@ const Toolbar = defineComponent({
   }
 });
 
-var __typeError$1 = (msg) => {
+var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _tooltipProvider, _content, _app, _selection, _show;
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var _tooltipProvider, _content, _app$1, _selection, _show;
 const toolbarTooltip = tooltipFactory("CREPE_TOOLBAR");
 class ToolbarView {
   constructor(ctx, view, config) {
-    __privateAdd$1(this, _tooltipProvider);
-    __privateAdd$1(this, _content);
-    __privateAdd$1(this, _app);
-    __privateAdd$1(this, _selection);
-    __privateAdd$1(this, _show, ref(false));
+    __privateAdd$2(this, _tooltipProvider);
+    __privateAdd$2(this, _content);
+    __privateAdd$2(this, _app$1);
+    __privateAdd$2(this, _selection);
+    __privateAdd$2(this, _show, ref(false));
     this.update = (view, prevState) => {
-      __privateGet$1(this, _tooltipProvider).update(view, prevState);
-      __privateGet$1(this, _selection).value = view.state.selection;
+      __privateGet$2(this, _tooltipProvider).update(view, prevState);
+      __privateGet$2(this, _selection).value = view.state.selection;
     };
     this.destroy = () => {
-      __privateGet$1(this, _tooltipProvider).destroy();
-      __privateGet$1(this, _app).unmount();
-      __privateGet$1(this, _content).remove();
+      __privateGet$2(this, _tooltipProvider).destroy();
+      __privateGet$2(this, _app$1).unmount();
+      __privateGet$2(this, _content).remove();
     };
     this.hide = () => {
-      __privateGet$1(this, _tooltipProvider).hide();
+      __privateGet$2(this, _tooltipProvider).hide();
     };
     const content = document.createElement("div");
     content.className = "milkdown-toolbar";
-    __privateSet$1(this, _selection, shallowRef(view.state.selection));
+    __privateSet$2(this, _selection, shallowRef(view.state.selection));
     const app = createApp(Toolbar, {
       ctx,
       hide: this.hide,
       config,
-      selection: __privateGet$1(this, _selection),
-      show: __privateGet$1(this, _show)
+      selection: __privateGet$2(this, _selection),
+      show: __privateGet$2(this, _show)
     });
     app.mount(content);
-    __privateSet$1(this, _content, content);
-    __privateSet$1(this, _app, app);
-    __privateSet$1(this, _tooltipProvider, new TooltipProvider({
-      content: __privateGet$1(this, _content),
+    __privateSet$2(this, _content, content);
+    __privateSet$2(this, _app$1, app);
+    __privateSet$2(this, _tooltipProvider, new TooltipProvider({
+      content: __privateGet$2(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow(view2) {
@@ -2316,18 +2343,18 @@ class ToolbarView {
         return true;
       }
     }));
-    __privateGet$1(this, _tooltipProvider).onShow = () => {
-      __privateGet$1(this, _show).value = true;
+    __privateGet$2(this, _tooltipProvider).onShow = () => {
+      __privateGet$2(this, _show).value = true;
     };
-    __privateGet$1(this, _tooltipProvider).onHide = () => {
-      __privateGet$1(this, _show).value = false;
+    __privateGet$2(this, _tooltipProvider).onHide = () => {
+      __privateGet$2(this, _show).value = false;
     };
     this.update(view);
   }
 }
 _tooltipProvider = new WeakMap();
 _content = new WeakMap();
-_app = new WeakMap();
+_app$1 = new WeakMap();
 _selection = new WeakMap();
 _show = new WeakMap();
 const toolbar = (editor, config) => {
@@ -2338,6 +2365,442 @@ const toolbar = (editor, config) => {
   }).use(toolbarTooltip);
 };
 
+const defaultHeadingOptions = [
+  { label: "Paragraph", level: null },
+  { label: "Heading 1", level: 1 },
+  { label: "Heading 2", level: 2 },
+  { label: "Heading 3", level: 3 },
+  { label: "Heading 4", level: 4 },
+  { label: "Heading 5", level: 5 },
+  { label: "Heading 6", level: 6 }
+];
+function getCurrentHeading(ctx, options) {
+  var _a, _b;
+  const headingOptions = options != null ? options : defaultHeadingOptions;
+  const view = ctx.get(editorViewCtx);
+  const { $from } = view.state.selection;
+  const node = $from.parent;
+  const paragraphOption = (_a = headingOptions.find((o) => o.level === null)) != null ? _a : headingOptions[0];
+  if (node.type === headingSchema.type(ctx)) {
+    const level = node.attrs.level;
+    return (_b = headingOptions.find((o) => o.level === level)) != null ? _b : paragraphOption;
+  }
+  return paragraphOption;
+}
+function setHeading(ctx, level) {
+  const commands = ctx.get(commandsCtx);
+  if (level === null || level === void 0) {
+    const paragraph = paragraphSchema.type(ctx);
+    commands.call(setBlockTypeCommand.key, { nodeType: paragraph });
+  } else {
+    const heading = headingSchema.type(ctx);
+    commands.call(setBlockTypeCommand.key, {
+      nodeType: heading,
+      attrs: { level }
+    });
+  }
+}
+function isMarkActive(ctx, markType) {
+  const commands = ctx.get(commandsCtx);
+  const selected = commands.call(isMarkSelectedCommand.key, markType);
+  if (selected) return true;
+  const view = ctx.get(editorViewCtx);
+  const { state } = view;
+  if (state.storedMarks) {
+    return state.storedMarks.some((m) => m.type === markType);
+  }
+  if (state.selection instanceof TextSelection) {
+    const { $cursor } = state.selection;
+    if ($cursor) {
+      return $cursor.marks().some((m) => m.type === markType);
+    }
+  }
+  return false;
+}
+function buildHeadingSelector(headingOptions, chevronIcon) {
+  const options = headingOptions != null ? headingOptions : defaultHeadingOptions;
+  return {
+    icon: "",
+    active: () => false,
+    selector: {
+      chevronIcon: chevronIcon != null ? chevronIcon : chevronDownIcon,
+      activeLabel: (ctx) => getCurrentHeading(ctx, options).label,
+      options: options.map((opt) => ({
+        label: opt.label,
+        onSelect: (ctx) => setHeading(ctx, opt.level)
+      }))
+    }
+  };
+}
+function getGroups(config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const flags = ctx && useCrepeFeatures(ctx).get();
+  const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
+  const isImageBlockEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.ImageBlock);
+  const isTableEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Table);
+  const groupBuilder = new GroupBuilder();
+  groupBuilder.addGroup("heading", "Heading").addItem("heading-selector", {
+    ...buildHeadingSelector(config == null ? void 0 : config.headingOptions, config == null ? void 0 : config.chevronDownIcon)
+  });
+  groupBuilder.addGroup("formatting", "Formatting").addItem("bold", {
+    icon: (_a = config == null ? void 0 : config.boldIcon) != null ? _a : boldIcon,
+    active: (ctx2) => isMarkActive(ctx2, strongSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleStrongCommand.key);
+    }
+  }).addItem("italic", {
+    icon: (_b = config == null ? void 0 : config.italicIcon) != null ? _b : italicIcon,
+    active: (ctx2) => isMarkActive(ctx2, emphasisSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleEmphasisCommand.key);
+    }
+  }).addItem("strikethrough", {
+    icon: (_c = config == null ? void 0 : config.strikethroughIcon) != null ? _c : strikethroughIcon,
+    active: (ctx2) => isMarkActive(ctx2, strikethroughSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleStrikethroughCommand.key);
+    }
+  }).addItem("code", {
+    icon: (_d = config == null ? void 0 : config.codeIcon) != null ? _d : codeIcon,
+    active: (ctx2) => isMarkActive(ctx2, inlineCodeSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(editorViewCtx);
+      const { state } = view;
+      if (state.selection.empty) {
+        const markType = inlineCodeSchema.type(ctx2);
+        const has = isMarkActive(ctx2, markType);
+        if (has) {
+          view.dispatch(state.tr.removeStoredMark(markType));
+        } else {
+          view.dispatch(state.tr.addStoredMark(markType.create()));
+        }
+      } else {
+        const commands = ctx2.get(commandsCtx);
+        commands.call(toggleInlineCodeCommand.key);
+      }
+    }
+  });
+  groupBuilder.addGroup("list", "List").addItem("bullet-list", {
+    icon: (_e = config == null ? void 0 : config.bulletListIcon) != null ? _e : bulletListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const bulletList = bulletListSchema.type(ctx2);
+      commands.call(wrapInBlockTypeCommand.key, { nodeType: bulletList });
+    }
+  }).addItem("ordered-list", {
+    icon: (_f = config == null ? void 0 : config.orderedListIcon) != null ? _f : orderedListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const orderedList = orderedListSchema.type(ctx2);
+      commands.call(wrapInBlockTypeCommand.key, { nodeType: orderedList });
+    }
+  }).addItem("task-list", {
+    icon: (_g = config == null ? void 0 : config.taskListIcon) != null ? _g : todoListIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const listItem = listItemSchema.type(ctx2);
+      commands.call(wrapInBlockTypeCommand.key, {
+        nodeType: listItem,
+        attrs: { checked: false }
+      });
+    }
+  });
+  const insertGroup = groupBuilder.addGroup("insert", "Insert");
+  insertGroup.addItem("link", {
+    icon: (_h = config == null ? void 0 : config.linkIcon) != null ? _h : linkIcon,
+    active: (ctx2) => isMarkActive(ctx2, linkSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(editorViewCtx);
+      const { state } = view;
+      const markType = linkSchema.type(ctx2);
+      if (state.selection.empty && isMarkActive(ctx2, markType)) {
+        view.dispatch(state.tr.removeStoredMark(markType));
+        return;
+      }
+      const commands = ctx2.get(commandsCtx);
+      commands.call(toggleLinkCommand.key);
+    }
+  });
+  if (isImageBlockEnabled) {
+    insertGroup.addItem("image", {
+      icon: (_i = config == null ? void 0 : config.imageIcon) != null ? _i : imageIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        const imageBlock = imageBlockSchema.type(ctx2);
+        commands.call(addBlockTypeCommand.key, { nodeType: imageBlock });
+      }
+    });
+  }
+  if (isTableEnabled) {
+    insertGroup.addItem("table", {
+      icon: (_j = config == null ? void 0 : config.tableIcon) != null ? _j : tableIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        const view = ctx2.get(editorViewCtx);
+        const { from } = view.state.selection;
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: createTable(ctx2, 3, 3)
+        });
+        commands.call(selectTextNearPosCommand.key, { pos: from });
+      }
+    });
+  }
+  const blockGroup = groupBuilder.addGroup("block", "Block");
+  blockGroup.addItem("code-block", {
+    icon: (_k = config == null ? void 0 : config.codeBlockIcon) != null ? _k : codeBlockIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const codeBlock = codeBlockSchema.type(ctx2);
+      commands.call(setBlockTypeCommand.key, { nodeType: codeBlock });
+    }
+  });
+  if (isLatexEnabled) {
+    blockGroup.addItem("math", {
+      icon: (_l = config == null ? void 0 : config.mathIcon) != null ? _l : functionsIcon,
+      active: () => false,
+      onRun: (ctx2) => {
+        const commands = ctx2.get(commandsCtx);
+        const codeBlock = codeBlockSchema.type(ctx2);
+        commands.call(addBlockTypeCommand.key, {
+          nodeType: codeBlock,
+          attrs: { language: "LaTeX" }
+        });
+      }
+    });
+  }
+  groupBuilder.addGroup("more", "More").addItem("quote", {
+    icon: (_m = config == null ? void 0 : config.quoteIcon) != null ? _m : quoteIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const blockquote = blockquoteSchema.type(ctx2);
+      commands.call(wrapInBlockTypeCommand.key, { nodeType: blockquote });
+    }
+  }).addItem("hr", {
+    icon: (_n = config == null ? void 0 : config.hrIcon) != null ? _n : dividerIcon,
+    active: () => false,
+    onRun: (ctx2) => {
+      const commands = ctx2.get(commandsCtx);
+      const hr = hrSchema.type(ctx2);
+      commands.call(addBlockTypeCommand.key, { nodeType: hr });
+    }
+  });
+  (_o = config == null ? void 0 : config.buildTopBar) == null ? void 0 : _o.call(config, groupBuilder);
+  return groupBuilder.build();
+}
+
+keepAlive(h, Fragment);
+const TopBar = defineComponent({
+  props: {
+    ctx: {
+      type: Object,
+      required: true
+    },
+    version: {
+      type: Object,
+      required: true
+    },
+    config: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(props) {
+    const { ctx, config } = props;
+    const openSelectorKey = ref(null);
+    const onClick = (fn) => (e) => {
+      e.preventDefault();
+      if (ctx) {
+        fn(ctx);
+      }
+    };
+    function isReady() {
+      const status = ctx.get(editorCtx).status;
+      return status === EditorStatus.Created;
+    }
+    function subscribeState() {
+      keepAlive(props.version.value);
+    }
+    function checkActive(checker) {
+      subscribeState();
+      if (!isReady()) return false;
+      return checker(ctx);
+    }
+    function getSelectorLabel(selector) {
+      var _a, _b;
+      subscribeState();
+      if (!isReady()) return (_b = (_a = selector.options[0]) == null ? void 0 : _a.label) != null ? _b : "";
+      return selector.activeLabel(ctx);
+    }
+    function onToggleSelector(key, e) {
+      e.preventDefault();
+      e.stopPropagation();
+      openSelectorKey.value = openSelectorKey.value === key ? null : key;
+    }
+    const clickOutsideHandler = (e) => {
+      const target = e.target;
+      if (target.closest(".top-bar-heading-selector")) return;
+      openSelectorKey.value = null;
+    };
+    onMounted(() => {
+      window.addEventListener("pointerdown", clickOutsideHandler);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("pointerdown", clickOutsideHandler);
+    });
+    const groupInfo = computed(() => getGroups(config, ctx));
+    function renderSelector(itemKey, selector) {
+      const isOpen = openSelectorKey.value === itemKey;
+      const activeLabel = getSelectorLabel(selector);
+      return /* @__PURE__ */ h("div", { key: itemKey, class: "top-bar-heading-selector" }, /* @__PURE__ */ h(
+        "button",
+        {
+          type: "button",
+          class: "top-bar-heading-button",
+          onPointerdown: (e) => onToggleSelector(itemKey, e)
+        },
+        /* @__PURE__ */ h("span", { class: "top-bar-heading-label" }, activeLabel),
+        selector.chevronIcon && /* @__PURE__ */ h("span", { class: "top-bar-chevron" }, /* @__PURE__ */ h(Icon, { icon: selector.chevronIcon }))
+      ), isOpen && /* @__PURE__ */ h("div", { class: "top-bar-heading-dropdown" }, selector.options.map((option, index) => /* @__PURE__ */ h(
+        "button",
+        {
+          key: `${itemKey}-${index}`,
+          type: "button",
+          class: clsx(
+            "top-bar-heading-option",
+            activeLabel === option.label && "active"
+          ),
+          onPointerdown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openSelectorKey.value = null;
+            option.onSelect(ctx);
+          }
+        },
+        option.label
+      ))));
+    }
+    function renderButton(item) {
+      return /* @__PURE__ */ h(
+        "button",
+        {
+          key: item.key,
+          type: "button",
+          class: clsx("top-bar-item", checkActive(item.active) && "active"),
+          onPointerdown: onClick(item.onRun)
+        },
+        /* @__PURE__ */ h(Icon, { icon: item.icon })
+      );
+    }
+    return () => {
+      const view = isReady() ? ctx.get(editorViewCtx) : null;
+      const isReadonly = view ? !view.editable : false;
+      if (isReadonly) return null;
+      return /* @__PURE__ */ h("div", { class: "top-bar-inner" }, groupInfo.value.map((group) => {
+        return group.items.map((item) => {
+          if (item.selector) {
+            return renderSelector(item.key, item.selector);
+          }
+          if (!item.onRun) return null;
+          return renderButton(
+            item
+          );
+        });
+      }).reduce((acc, curr, index) => {
+        var _a, _b;
+        if (index === 0) {
+          acc.push(...curr);
+        } else {
+          const groupKey = (_b = (_a = groupInfo.value[index]) == null ? void 0 : _a.key) != null ? _b : index;
+          acc.push(
+            /* @__PURE__ */ h("div", { key: `divider-${groupKey}`, class: "top-bar-divider" }),
+            ...curr
+          );
+        }
+        return acc;
+      }, []));
+    };
+  }
+});
+
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var _container, _app, _version;
+const topBarPluginKey = new PluginKey("CREPE_TOP_BAR");
+class TopBarView {
+  constructor(ctx, view, config) {
+    __privateAdd$1(this, _container);
+    __privateAdd$1(this, _app);
+    __privateAdd$1(this, _version);
+    this.update = (view, _prevState) => {
+      __privateGet$1(this, _container).style.display = view.editable ? "" : "none";
+      __privateGet$1(this, _version).value++;
+    };
+    this.destroy = () => {
+      __privateGet$1(this, _app).unmount();
+      __privateGet$1(this, _container).remove();
+    };
+    __privateSet$1(this, _version, ref(0));
+    const container = document.createElement("div");
+    container.className = "milkdown-top-bar";
+    const app = createApp(TopBar, {
+      ctx,
+      config,
+      version: __privateGet$1(this, _version)
+    });
+    app.mount(container);
+    __privateSet$1(this, _container, container);
+    __privateSet$1(this, _app, app);
+    const editorRoot = view.dom.parentElement;
+    if (editorRoot) {
+      editorRoot.insertBefore(container, editorRoot.firstChild);
+    }
+    this.update(view);
+  }
+}
+_container = new WeakMap();
+_app = new WeakMap();
+_version = new WeakMap();
+const topBarSlice = $ctx(
+  {
+    view: () => ({
+      update: () => {
+      },
+      destroy: () => {
+      }
+    })
+  },
+  "topBarConfig"
+);
+const topBarPlugin = $prose((ctx) => {
+  const config = ctx.get(topBarSlice.key);
+  return new Plugin({
+    key: topBarPluginKey,
+    view: config.view
+  });
+});
+const topBar = (editor, config) => {
+  editor.config(crepeFeatureConfig(CrepeFeature.TopBar)).config((ctx) => {
+    ctx.set(topBarSlice.key, {
+      view: (view) => new TopBarView(ctx, view, config)
+    });
+  }).use(topBarSlice).use(topBarPlugin);
+};
+
 function loadFeature(feature, editor, config) {
   switch (feature) {
     case CrepeFeature.CodeMirror: {
@@ -2370,6 +2833,9 @@ function loadFeature(feature, editor, config) {
     case CrepeFeature.Latex: {
       return latex(editor, config);
     }
+    case CrepeFeature.TopBar: {
+      return topBar(editor, config);
+    }
   }
 }
 
@@ -2451,7 +2917,29 @@ class CrepeBuilder {
         ...value,
         size: 4
       }));
-    }).use(commonmark).use(listener).use(history).use(indent).use(trailing).use(clipboard).use(gfm));
+      ctx.update(uploadConfig.key, (prev) => ({
+        ...prev,
+        uploader: async (files, schema, ctx2) => {
+          const features = useCrepeFeatures(ctx2).get();
+          const hasImageBlock = features.includes(CrepeFeature.ImageBlock);
+          const nodeType = hasImageBlock ? schema.nodes["image-block"] : schema.nodes["image"];
+          if (!nodeType) return [];
+          const onUpload = hasImageBlock ? ctx2.get(imageBlockConfig.key).onUpload : void 0;
+          const images = [];
+          for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            if (file && file.type.includes("image")) images.push(file);
+          }
+          const nodes = await Promise.all(
+            images.map(async (file) => {
+              const src = onUpload ? await onUpload(file) : URL.createObjectURL(file);
+              return nodeType.createAndFill({ src });
+            })
+          );
+          return nodes;
+        }
+      }));
+    }).use(commonmark).use(listener).use(history).use(indent).use(trailing).use(clipboard).use(upload).use(gfm));
   }
   /// Get the milkdown editor instance.
   get editor() {