alinea 1.7.0 → 2.0.0-preview.0

package/dist/field/richtext/RichTextInsertMenu.js

@@ -0,0 +1,1014 @@
+import {
+  CellSelection,
+  FloatingMenuPlugin,
+  arrow,
+  autoPlacement,
+  computePosition,
+  flip,
+  hide,
+  inline,
+  offset,
+  shift,
+  size
+} from "../../chunks/chunk-53DZYORR.js";
+import {
+  useCurrentEditor
+} from "../../chunks/chunk-7ORQ7BYK.js";
+import {
+  Extension,
+  NodeSelection,
+  Plugin,
+  PluginKey,
+  isTextSelection,
+  posToDOMRect
+} from "../../chunks/chunk-TL7ZW6BX.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/field/richtext/RichTextInsertMenu.tsx
+import { Button, Icon, Menu, MenuItem } from "alinea/components";
+import { createId } from "alinea/core/Id";
+import { getType } from "alinea/core/Internal";
+import { BlockNode, Node } from "alinea/core/TextDoc";
+import { Type } from "alinea/core/Type";
+import { entries } from "alinea/core/util/Objects";
+import { IcRoundAddCircle } from "alinea/dashboard/icons";
+
+// node_modules/@tiptap/extension-bubble-menu/dist/index.js
+function combineDOMRects(rect1, rect2) {
+  const top = Math.min(rect1.top, rect2.top);
+  const bottom = Math.max(rect1.bottom, rect2.bottom);
+  const left = Math.min(rect1.left, rect2.left);
+  const right = Math.max(rect1.right, rect2.right);
+  const width = right - left;
+  const height = bottom - top;
+  const x = left;
+  const y = top;
+  return new DOMRect(x, y, width, height);
+}
+var BubbleMenuView = class {
+  constructor({
+    editor,
+    element,
+    view,
+    pluginKey = "bubbleMenu",
+    updateDelay = 250,
+    resizeDelay = 60,
+    shouldShow,
+    appendTo,
+    getReferencedVirtualElement,
+    options
+  }) {
+    this.preventHide = false;
+    this.isVisible = false;
+    this.scrollTarget = window;
+    this.floatingUIOptions = {
+      strategy: "absolute",
+      placement: "top",
+      offset: 8,
+      flip: {},
+      shift: {},
+      arrow: false,
+      size: false,
+      autoPlacement: false,
+      hide: false,
+      inline: false,
+      onShow: void 0,
+      onHide: void 0,
+      onUpdate: void 0,
+      onDestroy: void 0
+    };
+    this.shouldShow = ({
+      view: view2,
+      state,
+      from,
+      to
+    }) => {
+      const { doc, selection } = state;
+      const { empty } = selection;
+      const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+      const isChildOfMenu = this.element.contains(document.activeElement);
+      const hasEditorFocus = view2.hasFocus() || isChildOfMenu;
+      if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
+        return false;
+      }
+      return true;
+    };
+    this.mousedownHandler = () => {
+      this.preventHide = true;
+    };
+    this.dragstartHandler = () => {
+      this.hide();
+    };
+    this.resizeHandler = () => {
+      if (this.resizeDebounceTimer) {
+        clearTimeout(this.resizeDebounceTimer);
+      }
+      this.resizeDebounceTimer = window.setTimeout(() => {
+        this.updatePosition();
+      }, this.resizeDelay);
+    };
+    this.focusHandler = () => {
+      setTimeout(() => this.update(this.editor.view));
+    };
+    this.blurHandler = ({ event }) => {
+      var _a2;
+      if (this.editor.isDestroyed) {
+        this.destroy();
+        return;
+      }
+      if (this.preventHide) {
+        this.preventHide = false;
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a2 = this.element.parentNode) == null ? void 0 : _a2.contains(event.relatedTarget))) {
+        return;
+      }
+      if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
+        return;
+      }
+      this.hide();
+    };
+    this.handleDebouncedUpdate = (view2, oldState) => {
+      const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view2.state.selection));
+      const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view2.state.doc));
+      if (!selectionChanged && !docChanged) {
+        return;
+      }
+      if (this.updateDebounceTimer) {
+        clearTimeout(this.updateDebounceTimer);
+      }
+      this.updateDebounceTimer = window.setTimeout(() => {
+        this.updateHandler(view2, selectionChanged, docChanged, oldState);
+      }, this.updateDelay);
+    };
+    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
+      const { composing } = view2;
+      const isSame = !selectionChanged && !docChanged;
+      if (composing || isSame) {
+        return;
+      }
+      const shouldShow2 = this.getShouldShow(oldState);
+      if (!shouldShow2) {
+        this.hide();
+        return;
+      }
+      this.show();
+      this.updatePosition();
+    };
+    this.transactionHandler = ({ transaction: tr }) => {
+      const meta = tr.getMeta(this.pluginKey);
+      if (meta === "updatePosition") {
+        this.updatePosition();
+      } else if (meta && typeof meta === "object" && meta.type === "updateOptions") {
+        this.updateOptions(meta.options);
+      } else if (meta === "hide") {
+        this.hide();
+      } else if (meta === "show") {
+        this.updatePosition();
+        this.show();
+      }
+    };
+    var _a;
+    this.editor = editor;
+    this.element = element;
+    this.view = view;
+    this.pluginKey = pluginKey;
+    this.updateDelay = updateDelay;
+    this.resizeDelay = resizeDelay;
+    this.appendTo = appendTo;
+    this.scrollTarget = (_a = options == null ? void 0 : options.scrollTarget) != null ? _a : window;
+    this.getReferencedVirtualElement = getReferencedVirtualElement;
+    this.floatingUIOptions = {
+      ...this.floatingUIOptions,
+      ...options
+    };
+    this.element.tabIndex = 0;
+    if (shouldShow) {
+      this.shouldShow = shouldShow;
+    }
+    this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.view.dom.addEventListener("dragstart", this.dragstartHandler);
+    this.editor.on("focus", this.focusHandler);
+    this.editor.on("blur", this.blurHandler);
+    this.editor.on("transaction", this.transactionHandler);
+    window.addEventListener("resize", this.resizeHandler);
+    this.scrollTarget.addEventListener("scroll", this.resizeHandler);
+    this.update(view, view.state);
+    if (this.getShouldShow()) {
+      this.show();
+      this.updatePosition();
+    }
+  }
+  get middlewares() {
+    const middlewares = [];
+    if (this.floatingUIOptions.flip) {
+      middlewares.push(
+        flip(
+          typeof this.floatingUIOptions.flip !== "boolean" ? this.floatingUIOptions.flip : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.shift) {
+      middlewares.push(
+        shift(
+          typeof this.floatingUIOptions.shift !== "boolean" ? this.floatingUIOptions.shift : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.offset) {
+      middlewares.push(
+        offset(
+          typeof this.floatingUIOptions.offset !== "boolean" ? this.floatingUIOptions.offset : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.arrow) {
+      middlewares.push(arrow(this.floatingUIOptions.arrow));
+    }
+    if (this.floatingUIOptions.size) {
+      middlewares.push(
+        size(
+          typeof this.floatingUIOptions.size !== "boolean" ? this.floatingUIOptions.size : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.autoPlacement) {
+      middlewares.push(
+        autoPlacement(
+          typeof this.floatingUIOptions.autoPlacement !== "boolean" ? this.floatingUIOptions.autoPlacement : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.hide) {
+      middlewares.push(
+        hide(
+          typeof this.floatingUIOptions.hide !== "boolean" ? this.floatingUIOptions.hide : void 0
+        )
+      );
+    }
+    if (this.floatingUIOptions.inline) {
+      middlewares.push(
+        inline(
+          typeof this.floatingUIOptions.inline !== "boolean" ? this.floatingUIOptions.inline : void 0
+        )
+      );
+    }
+    return middlewares;
+  }
+  get virtualElement() {
+    var _a, _b, _c;
+    const { selection } = this.editor.state;
+    const referencedVirtualElement = (_a = this.getReferencedVirtualElement) == null ? void 0 : _a.call(this);
+    if (referencedVirtualElement) {
+      return referencedVirtualElement;
+    }
+    if (!((_c = (_b = this.view) == null ? void 0 : _b.dom) == null ? void 0 : _c.parentNode)) {
+      return;
+    }
+    const domRect = posToDOMRect(this.view, selection.from, selection.to);
+    let virtualElement = {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect]
+    };
+    if (selection instanceof NodeSelection) {
+      let node = this.view.nodeDOM(selection.from);
+      const nodeViewWrapper = node.dataset.nodeViewWrapper ? node : node.querySelector("[data-node-view-wrapper]");
+      if (nodeViewWrapper) {
+        node = nodeViewWrapper;
+      }
+      if (node) {
+        virtualElement = {
+          getBoundingClientRect: () => node.getBoundingClientRect(),
+          getClientRects: () => [node.getBoundingClientRect()]
+        };
+      }
+    }
+    if (selection instanceof CellSelection) {
+      const { $anchorCell, $headCell } = selection;
+      const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
+      const to = $headCell ? $headCell.pos : $anchorCell.pos;
+      const fromDOM = this.view.nodeDOM(from);
+      const toDOM = this.view.nodeDOM(to);
+      if (!fromDOM || !toDOM) {
+        return;
+      }
+      const clientRect = fromDOM === toDOM ? fromDOM.getBoundingClientRect() : combineDOMRects(
+        fromDOM.getBoundingClientRect(),
+        toDOM.getBoundingClientRect()
+      );
+      virtualElement = {
+        getBoundingClientRect: () => clientRect,
+        getClientRects: () => [clientRect]
+      };
+    }
+    return virtualElement;
+  }
+  updatePosition() {
+    if (!this.isVisible) {
+      return;
+    }
+    const virtualElement = this.virtualElement;
+    if (!virtualElement) {
+      return;
+    }
+    computePosition(virtualElement, this.element, {
+      placement: this.floatingUIOptions.placement,
+      strategy: this.floatingUIOptions.strategy,
+      middleware: this.middlewares
+    }).then(({ x, y, strategy, middlewareData }) => {
+      var _a, _b;
+      if (!this.isVisible || this.editor.isDestroyed || !this.element.isConnected) {
+        return;
+      }
+      if (((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden) || ((_b = middlewareData.hide) == null ? void 0 : _b.escaped)) {
+        this.element.style.visibility = "hidden";
+        return;
+      }
+      this.element.style.visibility = "visible";
+      this.element.style.width = "max-content";
+      this.element.style.position = strategy;
+      this.element.style.left = `${x}px`;
+      this.element.style.top = `${y}px`;
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate();
+      }
+    });
+  }
+  update(view, oldState) {
+    const { state } = view;
+    const hasValidSelection = state.selection.from !== state.selection.to;
+    if (this.updateDelay > 0 && hasValidSelection) {
+      this.handleDebouncedUpdate(view, oldState);
+      return;
+    }
+    const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
+    const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
+    this.updateHandler(view, selectionChanged, docChanged, oldState);
+  }
+  getShouldShow(oldState) {
+    var _a;
+    const { state } = this.view;
+    const { selection } = state;
+    const { ranges } = selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    const shouldShow = (_a = this.shouldShow) == null ? void 0 : _a.call(this, {
+      editor: this.editor,
+      element: this.element,
+      view: this.view,
+      state,
+      oldState,
+      from,
+      to
+    });
+    return shouldShow || false;
+  }
+  show() {
+    var _a;
+    if (this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "visible";
+    this.element.style.opacity = "1";
+    const appendToElement = typeof this.appendTo === "function" ? this.appendTo() : this.appendTo;
+    (_a = appendToElement != null ? appendToElement : this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow();
+    }
+    this.isVisible = true;
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.element.style.visibility = "hidden";
+    this.element.style.opacity = "0";
+    this.element.remove();
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide();
+    }
+    this.isVisible = false;
+  }
+  updateOptions(newProps) {
+    var _a;
+    if (newProps.updateDelay !== void 0) {
+      this.updateDelay = newProps.updateDelay;
+    }
+    if (newProps.resizeDelay !== void 0) {
+      this.resizeDelay = newProps.resizeDelay;
+    }
+    if (newProps.appendTo !== void 0) {
+      this.appendTo = newProps.appendTo;
+    }
+    if (newProps.getReferencedVirtualElement !== void 0) {
+      this.getReferencedVirtualElement = newProps.getReferencedVirtualElement;
+    }
+    if (newProps.shouldShow !== void 0) {
+      if (newProps.shouldShow) {
+        this.shouldShow = newProps.shouldShow;
+      }
+    }
+    if (newProps.options !== void 0) {
+      const newScrollTarget = (_a = newProps.options.scrollTarget) != null ? _a : window;
+      if (newScrollTarget !== this.scrollTarget) {
+        this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
+        this.scrollTarget = newScrollTarget;
+        this.scrollTarget.addEventListener("scroll", this.resizeHandler);
+      }
+      this.floatingUIOptions = {
+        ...this.floatingUIOptions,
+        ...newProps.options
+      };
+    }
+  }
+  destroy() {
+    this.hide();
+    this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
+    this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+    this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
+    this.editor.off("focus", this.focusHandler);
+    this.editor.off("blur", this.blurHandler);
+    this.editor.off("transaction", this.transactionHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
+  }
+};
+var BubbleMenuPlugin = (options) => {
+  return new Plugin({
+    key: typeof options.pluginKey === "string" ? new PluginKey(options.pluginKey) : options.pluginKey,
+    view: (view) => new BubbleMenuView({ view, ...options })
+  });
+};
+var BubbleMenu = Extension.create({
+  name: "bubbleMenu",
+  addOptions() {
+    return {
+      element: null,
+      pluginKey: "bubbleMenu",
+      updateDelay: void 0,
+      appendTo: void 0,
+      shouldShow: null
+    };
+  },
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return [];
+    }
+    return [
+      BubbleMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        updateDelay: this.options.updateDelay,
+        options: this.options.options,
+        appendTo: this.options.appendTo,
+        getReferencedVirtualElement: this.options.getReferencedVirtualElement,
+        shouldShow: this.options.shouldShow
+      })
+    ];
+  }
+});
+
+// node_modules/@tiptap/react/dist/menus/index.js
+import React, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import React2, { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+function getAutoPluginKey(pluginKey, defaultName) {
+  return pluginKey != null ? pluginKey : new PluginKey(defaultName);
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var PLUGIN_MANAGED_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
+  "left",
+  "opacity",
+  "position",
+  "top",
+  "visibility",
+  "width"
+]);
+var UNITLESS_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "columnCount",
+  "columns",
+  "fillOpacity",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "fontWeight",
+  "gridArea",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnStart",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowStart",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom"
+]);
+var ATTRIBUTE_EXCLUSIONS = /* @__PURE__ */ new Set(["children", "className", "style"]);
+var DIRECT_PROPERTY_KEYS = /* @__PURE__ */ new Set(["tabIndex"]);
+var FORWARDED_ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
+  "accessKey",
+  "autoCapitalize",
+  "contentEditable",
+  "contextMenu",
+  "dir",
+  "draggable",
+  "enterKeyHint",
+  "hidden",
+  "id",
+  "lang",
+  "nonce",
+  "role",
+  "slot",
+  "spellCheck",
+  "tabIndex",
+  "title",
+  "translate"
+]);
+var SPECIAL_EVENT_NAMES = {
+  Blur: "focusout",
+  DoubleClick: "dblclick",
+  Focus: "focusin",
+  MouseEnter: "mouseenter",
+  MouseLeave: "mouseleave"
+};
+function isEventProp(key, value) {
+  return /^on[A-Z]/.test(key) && typeof value === "function";
+}
+function toAttributeName(key) {
+  if (key.startsWith("aria-") || key.startsWith("data-")) {
+    return key;
+  }
+  return key;
+}
+function isForwardedAttributeKey(key) {
+  return key.startsWith("aria-") || key.startsWith("data-") || FORWARDED_ATTRIBUTE_KEYS.has(key);
+}
+function toStylePropertyName(key) {
+  if (key.startsWith("--")) {
+    return key;
+  }
+  return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function toEventConfig(key) {
+  var _a;
+  const useCapture = key.endsWith("Capture");
+  const baseKey = useCapture ? key.slice(0, -7) : key;
+  const reactEventName = baseKey.slice(2);
+  const eventName = (_a = SPECIAL_EVENT_NAMES[reactEventName]) != null ? _a : reactEventName.toLowerCase();
+  return {
+    eventName,
+    options: useCapture ? { capture: true } : void 0
+  };
+}
+function createSyntheticEvent(element, nativeEvent) {
+  let defaultPrevented = nativeEvent.defaultPrevented;
+  let propagationStopped = false;
+  const syntheticEvent = Object.create(nativeEvent);
+  Object.defineProperties(syntheticEvent, {
+    nativeEvent: { value: nativeEvent },
+    currentTarget: { value: element },
+    target: { value: nativeEvent.target },
+    persist: { value: () => void 0 },
+    isDefaultPrevented: { value: () => defaultPrevented },
+    isPropagationStopped: { value: () => propagationStopped },
+    preventDefault: {
+      value: () => {
+        defaultPrevented = true;
+        nativeEvent.preventDefault();
+      }
+    },
+    stopPropagation: {
+      value: () => {
+        propagationStopped = true;
+        nativeEvent.stopPropagation();
+      }
+    }
+  });
+  return syntheticEvent;
+}
+function isDirectPropertyKey(key) {
+  return DIRECT_PROPERTY_KEYS.has(key);
+}
+function setDirectProperty(element, key, value) {
+  if (key === "tabIndex") {
+    element.tabIndex = Number(value);
+    return;
+  }
+  ;
+  element[key] = value;
+}
+function clearDirectProperty(element, key) {
+  if (key === "tabIndex") {
+    element.removeAttribute("tabindex");
+    return;
+  }
+  const propertyValue = element[key];
+  if (typeof propertyValue === "boolean") {
+    ;
+    element[key] = false;
+    return;
+  }
+  if (typeof propertyValue === "number") {
+    ;
+    element[key] = 0;
+    return;
+  }
+  ;
+  element[key] = "";
+}
+function toStyleValue(styleName, value) {
+  if (typeof value !== "number" || value === 0 || styleName.startsWith("--") || UNITLESS_STYLE_PROPERTIES.has(styleName)) {
+    return String(value);
+  }
+  return `${value}px`;
+}
+function removeStyleProperty(element, styleName) {
+  if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+    return;
+  }
+  element.style.removeProperty(toStylePropertyName(styleName));
+}
+function applyStyleProperty(element, styleName, value) {
+  if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+    return;
+  }
+  element.style.setProperty(toStylePropertyName(styleName), toStyleValue(styleName, value));
+}
+function syncAttributes(element, prevProps, nextProps) {
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
+  allKeys.forEach((key) => {
+    if (ATTRIBUTE_EXCLUSIONS.has(key) || !isForwardedAttributeKey(key) || isEventProp(key, prevProps[key]) || isEventProp(key, nextProps[key])) {
+      return;
+    }
+    const prevValue = prevProps[key];
+    const nextValue = nextProps[key];
+    if (prevValue === nextValue) {
+      return;
+    }
+    const attributeName = toAttributeName(key);
+    if (nextValue == null || nextValue === false) {
+      if (isDirectPropertyKey(key)) {
+        clearDirectProperty(element, key);
+      }
+      element.removeAttribute(attributeName);
+      return;
+    }
+    if (nextValue === true) {
+      if (isDirectPropertyKey(key)) {
+        setDirectProperty(element, key, true);
+      }
+      element.setAttribute(attributeName, "");
+      return;
+    }
+    if (isDirectPropertyKey(key)) {
+      setDirectProperty(element, key, nextValue);
+      return;
+    }
+    element.setAttribute(attributeName, String(nextValue));
+  });
+}
+function syncClassName(element, prevClassName, nextClassName) {
+  if (prevClassName === nextClassName) {
+    return;
+  }
+  if (nextClassName) {
+    element.className = nextClassName;
+    return;
+  }
+  element.removeAttribute("class");
+}
+function syncStyles(element, prevStyle, nextStyle) {
+  const previousStyle = prevStyle != null ? prevStyle : {};
+  const currentStyle = nextStyle != null ? nextStyle : {};
+  const allStyleNames = /* @__PURE__ */ new Set([...Object.keys(previousStyle), ...Object.keys(currentStyle)]);
+  allStyleNames.forEach((styleName) => {
+    const prevValue = previousStyle[styleName];
+    const nextValue = currentStyle[styleName];
+    if (prevValue === nextValue) {
+      return;
+    }
+    if (nextValue == null) {
+      removeStyleProperty(element, styleName);
+      return;
+    }
+    applyStyleProperty(element, styleName, nextValue);
+  });
+}
+function syncEventListeners(element, prevListeners, nextProps) {
+  prevListeners.forEach(({ eventName, listener, options }) => {
+    element.removeEventListener(eventName, listener, options);
+  });
+  const nextListeners = [];
+  Object.entries(nextProps).forEach(([key, value]) => {
+    if (!isEventProp(key, value)) {
+      return;
+    }
+    const { eventName, options } = toEventConfig(key);
+    const listener = (event) => {
+      value(createSyntheticEvent(element, event));
+    };
+    element.addEventListener(eventName, listener, options);
+    nextListeners.push({ eventName, listener, options });
+  });
+  return nextListeners;
+}
+function useMenuElementProps(element, props) {
+  const previousPropsRef = useRef({});
+  const listenersRef = useRef([]);
+  useIsomorphicLayoutEffect(() => {
+    const previousProps = previousPropsRef.current;
+    syncClassName(element, previousProps.className, props.className);
+    syncStyles(element, previousProps.style, props.style);
+    syncAttributes(element, previousProps, props);
+    listenersRef.current = syncEventListeners(element, listenersRef.current, props);
+    previousPropsRef.current = props;
+    return () => {
+      listenersRef.current.forEach(({ eventName, listener, options }) => {
+        element.removeEventListener(eventName, listener, options);
+      });
+      listenersRef.current = [];
+    };
+  }, [element, props]);
+}
+var BubbleMenu2 = React.forwardRef(
+  ({
+    pluginKey,
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    getReferencedVirtualElement,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = useRef2(document.createElement("div"));
+    const resolvedPluginKey = useRef2(
+      getAutoPluginKey(pluginKey, "bubbleMenu")
+    ).current;
+    useMenuElementProps(menuEl.current, restProps);
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor();
+    const pluginEditor = editor || currentEditor;
+    const bubbleMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey: resolvedPluginKey,
+      shouldShow,
+      getReferencedVirtualElement,
+      options
+    };
+    const bubbleMenuPluginPropsRef = useRef2(bubbleMenuPluginProps);
+    bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState(false);
+    const skipFirstUpdateRef = useRef2(true);
+    useEffect2(() => {
+      if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
+        return;
+      }
+      if (!pluginEditor) {
+        console.warn(
+          "BubbleMenu component is not rendered inside of an editor component or does not have editor prop."
+        );
+        return;
+      }
+      const bubbleMenuElement = menuEl.current;
+      bubbleMenuElement.style.visibility = "hidden";
+      bubbleMenuElement.style.position = "absolute";
+      const plugin = BubbleMenuPlugin({
+        ...bubbleMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: bubbleMenuElement
+      });
+      pluginEditor.registerPlugin(plugin);
+      const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
+      return () => {
+        setPluginInitialized(false);
+        pluginEditor.unregisterPlugin(createdPluginKey);
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+          }
+        });
+      };
+    }, [pluginEditor]);
+    useEffect2(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return;
+      }
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false;
+        return;
+      }
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta(resolvedPluginKey, {
+          type: "updateOptions",
+          options: bubbleMenuPluginPropsRef.current
+        })
+      );
+    }, [
+      pluginInitialized,
+      pluginEditor,
+      updateDelay,
+      resizeDelay,
+      shouldShow,
+      options,
+      appendTo,
+      getReferencedVirtualElement,
+      resolvedPluginKey
+    ]);
+    return createPortal(children, menuEl.current);
+  }
+);
+var FloatingMenu = React2.forwardRef(
+  ({
+    pluginKey,
+    editor,
+    updateDelay,
+    resizeDelay,
+    appendTo,
+    shouldShow = null,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = useRef3(document.createElement("div"));
+    const resolvedPluginKey = useRef3(
+      getAutoPluginKey(pluginKey, "floatingMenu")
+    ).current;
+    useMenuElementProps(menuEl.current, restProps);
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
+    }
+    const { editor: currentEditor } = useCurrentEditor();
+    const pluginEditor = editor || currentEditor;
+    const floatingMenuPluginProps = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey: resolvedPluginKey,
+      shouldShow,
+      options
+    };
+    const floatingMenuPluginPropsRef = useRef3(floatingMenuPluginProps);
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps;
+    const [pluginInitialized, setPluginInitialized] = useState2(false);
+    const skipFirstUpdateRef = useRef3(true);
+    useEffect3(() => {
+      if (pluginEditor == null ? void 0 : pluginEditor.isDestroyed) {
+        return;
+      }
+      if (!pluginEditor) {
+        console.warn(
+          "FloatingMenu component is not rendered inside of an editor component or does not have editor prop."
+        );
+        return;
+      }
+      const floatingMenuElement = menuEl.current;
+      floatingMenuElement.style.visibility = "hidden";
+      floatingMenuElement.style.position = "absolute";
+      const plugin = FloatingMenuPlugin({
+        ...floatingMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: floatingMenuElement
+      });
+      pluginEditor.registerPlugin(plugin);
+      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey;
+      skipFirstUpdateRef.current = true;
+      setPluginInitialized(true);
+      return () => {
+        setPluginInitialized(false);
+        pluginEditor.unregisterPlugin(createdPluginKey);
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement);
+          }
+        });
+      };
+    }, [pluginEditor]);
+    useEffect3(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return;
+      }
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false;
+        return;
+      }
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta(resolvedPluginKey, {
+          type: "updateOptions",
+          options: floatingMenuPluginPropsRef.current
+        })
+      );
+    }, [
+      pluginInitialized,
+      pluginEditor,
+      updateDelay,
+      resizeDelay,
+      shouldShow,
+      options,
+      appendTo,
+      resolvedPluginKey
+    ]);
+    return createPortal2(children, menuEl.current);
+  }
+);
+
+// src/field/richtext/RichTextInsertMenu.module.css
+var RichTextInsertMenu_default = {
+  "RichTextInsertMenu-label": "alinea-RichTextInsertMenu-label",
+  "RichTextInsertMenuLabel": "alinea-RichTextInsertMenu-label",
+  "RichTextInsertMenu-item": "alinea-RichTextInsertMenu-item",
+  "RichTextInsertMenuItem": "alinea-RichTextInsertMenu-item",
+  "RichTextInsertMenu": "alinea-RichTextInsertMenu"
+};
+
+// src/field/richtext/RichTextInsertMenu.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(RichTextInsertMenu_default);
+function RichTextInsertMenu({
+  editor,
+  schema,
+  onInsert
+}) {
+  return /* @__PURE__ */ jsx(
+    FloatingMenu,
+    {
+      editor,
+      className: styles.RichTextInsertMenu(),
+      shouldShow: ({ editor: editor2, state }) => {
+        const { selection } = state;
+        return editor2.isFocused && selection.empty && selection.$from.depth === 1 && selection.$from.parent.isTextblock && selection.$from.parent.content.size === 0;
+      },
+      children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          "aria-label": "Insert block",
+          label: /* @__PURE__ */ jsxs(Button, { appearance: "plain", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: IcRoundAddCircle }),
+            "Insert block"
+          ] }),
+          children: entries(schema).map(([name, type]) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              id: name,
+              textValue: Type.label(type),
+              onAction: () => {
+                onInsert({
+                  [Node.type]: name,
+                  [BlockNode.id]: createId(),
+                  ...Type.initialValue(type)
+                });
+              },
+              children: /* @__PURE__ */ jsxs("span", { className: styles.RichTextInsertMenu.item(), children: [
+                /* @__PURE__ */ jsx(Icon, { icon: getType(type).icon ?? IcRoundAddCircle }),
+                /* @__PURE__ */ jsx("span", { className: styles.RichTextInsertMenu.label(), children: Type.label(type) })
+              ] })
+            },
+            name
+          ))
+        }
+      )
+    }
+  );
+}
+export {
+  RichTextInsertMenu
+};