@milkdown/crepe 7.19.1 → 7.20.0

package/lib/cjs/index.js

@@ -40,6 +40,7 @@ var history$1 = require('@milkdown/kit/plugin/history');
 var indent = require('@milkdown/kit/plugin/indent');
 var listener = require('@milkdown/kit/plugin/listener');
 var trailing = require('@milkdown/kit/plugin/trailing');
+var upload = require('@milkdown/kit/plugin/upload');
 
 var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["CodeMirror"] = "code-mirror";
@@ -52,6 +53,7 @@ var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["Placeholder"] = "placeholder";
   CrepeFeature2["Table"] = "table";
   CrepeFeature2["Latex"] = "latex";
+  CrepeFeature2["TopBar"] = "top-bar";
   return CrepeFeature2;
 })(CrepeFeature || {});
 const defaultFeatures = {
@@ -64,7 +66,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 = `
@@ -268,6 +271,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"
@@ -770,22 +786,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) => {
@@ -807,23 +823,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);
@@ -1090,7 +1109,7 @@ function getGroups$1(filter, config, ctx) {
           commands.call(commonmark.clearTextInCurrentBlockCommand.key);
           commands.call(commonmark.addBlockTypeCommand.key, {
             nodeType: codeBlock,
-            attrs: { language: "LaTex" }
+            attrs: { language: "LaTeX" }
           });
         }
       });
@@ -1126,6 +1145,7 @@ function getGroups$1(filter, config, ctx) {
   };
 }
 
+keepAlive(vue.h);
 const Menu = vue.defineComponent({
   props: {
     ctx: {
@@ -1151,7 +1171,7 @@ const Menu = vue.defineComponent({
   },
   setup({ ctx, show, filter, hide, config }) {
     const host = vue.ref();
-    const groupInfo = vue.computed(() => getGroups$1(filter.value, config, ctx));
+    const groupInfo = vue.computed(() => getGroups$2(filter.value, config, ctx));
     const hoverIndex = vue.ref(0);
     const prevMousePosition = vue.ref({ x: -999, y: -999 });
     const onPointerMove = (e) => {
@@ -1180,7 +1200,7 @@ const Menu = vue.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) => {
@@ -1284,14 +1304,14 @@ const Menu = vue.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 = slash.slashFactory("CREPE_MENU");
 const menuAPI = utils.$ctx(
   {
@@ -1309,33 +1329,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 = vue.ref(false);
     const filter = vue.ref("");
-    __privateSet$4(this, _filter, filter);
+    __privateSet$5(this, _filter, filter);
     const hide = this.hide;
     const app = vue.createApp(Menu, {
       ctx,
@@ -1344,12 +1364,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 slash.SlashProvider({
-      content: __privateGet$4(this, _content$3),
+    __privateSet$5(this, _slashProvider, new slash.SlashProvider({
+      content: __privateGet$5(this, _content$3),
       debounce: 20,
       shouldShow(view2) {
         if (isInCodeBlock(view2.state.selection) || isInList(view2.state.selection))
@@ -1362,13 +1382,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;
@@ -1378,10 +1398,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);
@@ -1392,7 +1412,7 @@ class MenuView {
   }
 }
 _content$3 = new WeakMap();
-_app$3 = new WeakMap();
+_app$4 = new WeakMap();
 _filter = new WeakMap();
 _slashProvider = new WeakMap();
 _programmaticallyPos = new WeakMap();
@@ -1404,6 +1424,7 @@ function isSelectionAtEndOfNode(selection) {
   return offset === parent.content.size;
 }
 
+keepAlive(vue.h, vue.Fragment);
 const BlockHandle = vue.defineComponent({
   props: {
     onAdd: {
@@ -1447,45 +1468,45 @@ const BlockHandle = vue.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(core.editorViewCtx);
       if (!view.hasFocus()) view.focus();
       const { state: state$1, 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$1.tr.insert(pos, commonmark.paragraphSchema.type(ctx).create());
       tr = tr.setSelection(state.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 = vue.createApp(BlockHandle, {
@@ -1494,10 +1515,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 block.BlockProvider({
+    __privateSet$4(this, _provider$1, new block.BlockProvider({
       ctx,
       content,
       getOffset: () => 16,
@@ -1524,7 +1545,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(block.blockConfig.key, {
@@ -1630,7 +1651,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(imageBlock$1.imageBlockComponent).use(imageInline.imageInlineComponent);
@@ -1747,6 +1770,7 @@ const toggleLatexCommand = utils.$command("ToggleLatex", (ctx) => {
 
 const inlineLatexTooltip = tooltip.tooltipFactory("INLINE_LATEX");
 
+keepAlive(vue.h);
 const LatexTooltip = vue.defineComponent({
   props: {
     config: {
@@ -1782,31 +1806,31 @@ const LatexTooltip = vue.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, vue.shallowRef(null));
-    __privateAdd$2(this, _updateValue, vue.shallowRef(() => {
+    __privateAdd$3(this, _content$1);
+    __privateAdd$3(this, _provider);
+    __privateAdd$3(this, _dom);
+    __privateAdd$3(this, _innerView, vue.shallowRef(null));
+    __privateAdd$3(this, _updateValue, vue.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;
@@ -1818,7 +1842,7 @@ class LatexInlineTooltip {
           null,
           schema.text(node.attrs.value)
         );
-        const innerView = new view$1.EditorView(__privateGet$2(this, _dom), {
+        const innerView = new view$1.EditorView(__privateGet$3(this, _dom), {
           state: state.EditorState.create({
             doc: paragraph,
             schema: new model.Schema({
@@ -1845,15 +1869,15 @@ class LatexInlineTooltip {
                 "Mod-Z": history.redo,
                 "Mod-y": history.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);
@@ -1864,37 +1888,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, vue.createApp(LatexTooltip, {
+    __privateSet$3(this, _content$1, content);
+    __privateSet$3(this, _app$2, vue.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 tooltip.TooltipProvider({
+    __privateGet$3(this, _app$2).mount(content);
+    __privateSet$3(this, _provider, new tooltip.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();
@@ -1902,7 +1926,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();
 
@@ -2107,7 +2131,7 @@ const table = (editor, config) => {
   }).use(tableBlock.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", {
@@ -2195,6 +2219,7 @@ function getGroups(config, ctx) {
   return groupBuilder.build();
 }
 
+keepAlive(vue.h, vue.Fragment);
 const Toolbar = vue.defineComponent({
   props: {
     ctx: {
@@ -2222,15 +2247,17 @@ const Toolbar = vue.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(core.editorCtx).status;
       if (status !== core.EditorStatus.Created) return false;
       return checker(ctx);
     }
-    const groupInfo = vue.computed(() => getGroups(config, ctx));
+    const groupInfo = vue.computed(() => getGroups$1(config, ctx));
     return () => {
       return /* @__PURE__ */ vue.h(vue.Fragment, null, groupInfo.value.map((group) => {
         return group.items.map((item) => {
@@ -2259,49 +2286,49 @@ const Toolbar = vue.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 = tooltip.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, vue.ref(false));
+    __privateAdd$2(this, _tooltipProvider);
+    __privateAdd$2(this, _content);
+    __privateAdd$2(this, _app$1);
+    __privateAdd$2(this, _selection);
+    __privateAdd$2(this, _show, vue.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, vue.shallowRef(view.state.selection));
+    __privateSet$2(this, _selection, vue.shallowRef(view.state.selection));
     const app = vue.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 tooltip.TooltipProvider({
-      content: __privateGet$1(this, _content),
+    __privateSet$2(this, _content, content);
+    __privateSet$2(this, _app$1, app);
+    __privateSet$2(this, _tooltipProvider, new tooltip.TooltipProvider({
+      content: __privateGet$2(this, _content),
       debounce: 20,
       offset: 10,
       shouldShow(view2) {
@@ -2318,18 +2345,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) => {
@@ -2340,6 +2367,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(core.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 === commonmark.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(core.commandsCtx);
+  if (level === null || level === void 0) {
+    const paragraph = commonmark.paragraphSchema.type(ctx);
+    commands.call(commonmark.setBlockTypeCommand.key, { nodeType: paragraph });
+  } else {
+    const heading = commonmark.headingSchema.type(ctx);
+    commands.call(commonmark.setBlockTypeCommand.key, {
+      nodeType: heading,
+      attrs: { level }
+    });
+  }
+}
+function isMarkActive(ctx, markType) {
+  const commands = ctx.get(core.commandsCtx);
+  const selected = commands.call(commonmark.isMarkSelectedCommand.key, markType);
+  if (selected) return true;
+  const view = ctx.get(core.editorViewCtx);
+  const { state: state$1 } = view;
+  if (state$1.storedMarks) {
+    return state$1.storedMarks.some((m) => m.type === markType);
+  }
+  if (state$1.selection instanceof state.TextSelection) {
+    const { $cursor } = state$1.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, commonmark.strongSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleStrongCommand.key);
+    }
+  }).addItem("italic", {
+    icon: (_b = config == null ? void 0 : config.italicIcon) != null ? _b : italicIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.emphasisSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleEmphasisCommand.key);
+    }
+  }).addItem("strikethrough", {
+    icon: (_c = config == null ? void 0 : config.strikethroughIcon) != null ? _c : strikethroughIcon,
+    active: (ctx2) => isMarkActive(ctx2, gfm.strikethroughSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(gfm.toggleStrikethroughCommand.key);
+    }
+  }).addItem("code", {
+    icon: (_d = config == null ? void 0 : config.codeIcon) != null ? _d : codeIcon,
+    active: (ctx2) => isMarkActive(ctx2, commonmark.inlineCodeSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(core.editorViewCtx);
+      const { state } = view;
+      if (state.selection.empty) {
+        const markType = commonmark.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(core.commandsCtx);
+        commands.call(commonmark.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(core.commandsCtx);
+      const bulletList = commonmark.bulletListSchema.type(ctx2);
+      commands.call(commonmark.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(core.commandsCtx);
+      const orderedList = commonmark.orderedListSchema.type(ctx2);
+      commands.call(commonmark.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(core.commandsCtx);
+      const listItem = commonmark.listItemSchema.type(ctx2);
+      commands.call(commonmark.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, commonmark.linkSchema.type(ctx2)),
+    onRun: (ctx2) => {
+      const view = ctx2.get(core.editorViewCtx);
+      const { state } = view;
+      const markType = commonmark.linkSchema.type(ctx2);
+      if (state.selection.empty && isMarkActive(ctx2, markType)) {
+        view.dispatch(state.tr.removeStoredMark(markType));
+        return;
+      }
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(linkTooltip$1.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(core.commandsCtx);
+        const imageBlock = imageBlock$1.imageBlockSchema.type(ctx2);
+        commands.call(commonmark.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(core.commandsCtx);
+        const view = ctx2.get(core.editorViewCtx);
+        const { from } = view.state.selection;
+        commands.call(commonmark.addBlockTypeCommand.key, {
+          nodeType: gfm.createTable(ctx2, 3, 3)
+        });
+        commands.call(commonmark.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(core.commandsCtx);
+      const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+      commands.call(commonmark.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(core.commandsCtx);
+        const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+        commands.call(commonmark.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(core.commandsCtx);
+      const blockquote = commonmark.blockquoteSchema.type(ctx2);
+      commands.call(commonmark.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(core.commandsCtx);
+      const hr = commonmark.hrSchema.type(ctx2);
+      commands.call(commonmark.addBlockTypeCommand.key, { nodeType: hr });
+    }
+  });
+  (_o = config == null ? void 0 : config.buildTopBar) == null ? void 0 : _o.call(config, groupBuilder);
+  return groupBuilder.build();
+}
+
+keepAlive(vue.h, vue.Fragment);
+const TopBar = vue.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 = vue.ref(null);
+    const onClick = (fn) => (e) => {
+      e.preventDefault();
+      if (ctx) {
+        fn(ctx);
+      }
+    };
+    function isReady() {
+      const status = ctx.get(core.editorCtx).status;
+      return status === core.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;
+    };
+    vue.onMounted(() => {
+      window.addEventListener("pointerdown", clickOutsideHandler);
+    });
+    vue.onUnmounted(() => {
+      window.removeEventListener("pointerdown", clickOutsideHandler);
+    });
+    const groupInfo = vue.computed(() => getGroups(config, ctx));
+    function renderSelector(itemKey, selector) {
+      const isOpen = openSelectorKey.value === itemKey;
+      const activeLabel = getSelectorLabel(selector);
+      return /* @__PURE__ */ vue.h("div", { key: itemKey, class: "top-bar-heading-selector" }, /* @__PURE__ */ vue.h(
+        "button",
+        {
+          type: "button",
+          class: "top-bar-heading-button",
+          onPointerdown: (e) => onToggleSelector(itemKey, e)
+        },
+        /* @__PURE__ */ vue.h("span", { class: "top-bar-heading-label" }, activeLabel),
+        selector.chevronIcon && /* @__PURE__ */ vue.h("span", { class: "top-bar-chevron" }, /* @__PURE__ */ vue.h(component.Icon, { icon: selector.chevronIcon }))
+      ), isOpen && /* @__PURE__ */ vue.h("div", { class: "top-bar-heading-dropdown" }, selector.options.map((option, index) => /* @__PURE__ */ vue.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__ */ vue.h(
+        "button",
+        {
+          key: item.key,
+          type: "button",
+          class: clsx("top-bar-item", checkActive(item.active) && "active"),
+          onPointerdown: onClick(item.onRun)
+        },
+        /* @__PURE__ */ vue.h(component.Icon, { icon: item.icon })
+      );
+    }
+    return () => {
+      const view = isReady() ? ctx.get(core.editorViewCtx) : null;
+      const isReadonly = view ? !view.editable : false;
+      if (isReadonly) return null;
+      return /* @__PURE__ */ vue.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__ */ vue.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 state.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, vue.ref(0));
+    const container = document.createElement("div");
+    container.className = "milkdown-top-bar";
+    const app = vue.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 = utils.$ctx(
+  {
+    view: () => ({
+      update: () => {
+      },
+      destroy: () => {
+      }
+    })
+  },
+  "topBarConfig"
+);
+const topBarPlugin = utils.$prose((ctx) => {
+  const config = ctx.get(topBarSlice.key);
+  return new state.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: {
@@ -2372,6 +2835,9 @@ function loadFeature(feature, editor, config) {
     case CrepeFeature.Latex: {
       return latex(editor, config);
     }
+    case CrepeFeature.TopBar: {
+      return topBar(editor, config);
+    }
   }
 }
 
@@ -2453,7 +2919,29 @@ class CrepeBuilder {
         ...value,
         size: 4
       }));
-    }).use(commonmark.commonmark).use(listener.listener).use(history$1.history).use(indent.indent).use(trailing.trailing).use(clipboard.clipboard).use(gfm.gfm));
+      ctx.update(upload.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(imageBlock$1.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.commonmark).use(listener.listener).use(history$1.history).use(indent.indent).use(trailing.trailing).use(clipboard.clipboard).use(upload.upload).use(gfm.gfm));
   }
   /// Get the milkdown editor instance.
   get editor() {