wysimark-lite 0.25.13 → 0.25.16

package/dist/index.mjs

@@ -5,14 +5,14 @@ import {
   createRef,
   useCallback as useCallback19,
   useImperativeHandle,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState14
 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/entry/index.tsx
 import throttle2 from "lodash.throttle";
-import { useCallback as useCallback18, useRef as useRef15, useState as useState13 } from "react";
+import { useCallback as useCallback18, useRef as useRef16, useState as useState13 } from "react";
 import { Editor as Editor67, Transforms as Transforms49 } from "slate";
 import { ReactEditor as ReactEditor18, Slate as Slate2 } from "slate-react";
 
@@ -2486,7 +2486,7 @@ function normalizeNode(editor, entry) {
 
 // src/anchor-plugin/render-element/anchor.tsx
 import { clsx } from "clsx";
-import { useEffect as useEffect3, useRef as useRef5 } from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
 import { useSelected, useSlate } from "slate-react";
 
 // src/use-layer/layers.tsx
@@ -2608,7 +2608,7 @@ var $ProgressBarFill = styled2("span")`
 
 // src/anchor-plugin/render-element/AnchorDialog.tsx
 import styled15 from "@emotion/styled";
-import { useCallback as useCallback5, useState as useState4 } from "react";
+import { useCallback as useCallback5, useRef as useRef5, useState as useState4 } from "react";
 import { useSlateStatic as useSlateStatic4 } from "slate-react";
 
 // src/shared-overlays/components/CloseMask/index.tsx
@@ -2851,6 +2851,9 @@ var $Panel = styled4(SinkReset)`
   filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07))
     drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   background: white;
+  color: #333;
+  max-width: calc(100vw - 32px);
+  box-sizing: border-box;
   /**
    * If you are tempted to add the transitions back in, here's why we left
    * them off:
@@ -3479,17 +3482,23 @@ function AnchorEditDialog({
   element
 }) {
   const dialog = useLayer("dialog");
+  const ref = useRef4(null);
   const [dragOffset, setDragOffset] = useState3({ x: 0, y: 0 });
   const handleDrag = useCallback4((deltaX, deltaY) => {
     setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
   }, []);
   const baseStyle = useAbsoluteReposition(
-    { destAnchor, destStartEdge },
-    ({ destAnchor: destAnchor2, destStartEdge: destStartEdge2 }) => {
-      return {
-        left: destStartEdge2.left,
-        top: destAnchor2.top + destAnchor2.height
-      };
+    { src: ref, destAnchor, destStartEdge },
+    ({ src, destAnchor: destAnchor2, destStartEdge: destStartEdge2 }, viewport) => {
+      return positionInside(
+        src,
+        viewport,
+        {
+          left: destStartEdge2.left,
+          top: destAnchor2.top + destAnchor2.height
+        },
+        { margin: 16 }
+      );
     }
   );
   const style = {
@@ -3527,7 +3536,7 @@ function AnchorEditDialog({
     editor.anchor.editLink({ href: href2, text: text2, title: title2 }, { at: element });
     openAnchorDialog();
   }, [openAnchorDialog]);
-  return /* @__PURE__ */ jsxs5($AnchorEditDialog, { contentEditable: false, style, children: [
+  return /* @__PURE__ */ jsxs5($AnchorEditDialog, { ref, contentEditable: false, style, children: [
     /* @__PURE__ */ jsx12(DraggableHeader, { onDrag: handleDrag }),
     /* @__PURE__ */ jsxs5("div", { style: { padding: "1em" }, children: [
       /* @__PURE__ */ jsxs5($FormGroup, { children: [
@@ -3576,7 +3585,8 @@ var $AnchorDialog2 = styled15($Panel)`
   .--link {
     text-decoration: none;
     display: flex;
-    flex: 0 0 14em;
+    flex: 1 1 auto;
+    min-width: 0;
     overflow: hidden;
     color: var(--shade-400);
     &:hover {
@@ -3589,7 +3599,7 @@ var $AnchorDialog2 = styled15($Panel)`
     margin-left: 0.5em;
     .--hostname {
       font-size: 0.875em;
-      width: 14em;
+      max-width: 14em;
       line-height: 1.5em;
       color: var(--blue-600);
       overflow-wrap: break-word;
@@ -3601,7 +3611,7 @@ var $AnchorDialog2 = styled15($Panel)`
     .--pathname {
       margin-top: 0.125em;
       font-size: 0.75em;
-      width: 16.25em;
+      max-width: 16.25em;
       line-height: 1.5em;
       overflow-wrap: break-word;
     }
@@ -3610,7 +3620,7 @@ var $AnchorDialog2 = styled15($Panel)`
       position: relative;
       margin-top: 1em;
       font-size: 0.875em;
-      width: 14em;
+      max-width: 14em;
       line-height: 1.5em;
       background: var(--shade-200);
       border-radius: 0.5em;
@@ -3659,18 +3669,24 @@ function AnchorDialog({
 }) {
   const dialog = useLayer("dialog");
   const editor = useSlateStatic4();
+  const ref = useRef5(null);
   const url = parseUrl2(element.href);
   const [dragOffset, setDragOffset] = useState4({ x: 0, y: 0 });
   const handleDrag = useCallback5((deltaX, deltaY) => {
     setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
   }, []);
   const baseStyle = useAbsoluteReposition(
-    { destAnchor, destStartEdge },
-    ({ destAnchor: destAnchor2, destStartEdge: destStartEdge2 }) => {
-      return {
-        left: destStartEdge2.left,
-        top: destAnchor2.top + destAnchor2.height
-      };
+    { src: ref, destAnchor, destStartEdge },
+    ({ src, destAnchor: destAnchor2, destStartEdge: destStartEdge2 }, viewport) => {
+      return positionInside(
+        src,
+        viewport,
+        {
+          left: destStartEdge2.left,
+          top: destAnchor2.top + destAnchor2.height
+        },
+        { margin: 16 }
+      );
     }
   );
   const style = {
@@ -3701,7 +3717,7 @@ function AnchorDialog({
       );
     });
   }, [destAnchor, destStartEdge, element]);
-  return /* @__PURE__ */ jsxs6($AnchorDialog2, { contentEditable: false, style, children: [
+  return /* @__PURE__ */ jsxs6($AnchorDialog2, { ref, contentEditable: false, style, children: [
     /* @__PURE__ */ jsx14(DraggableHeader, { onDrag: handleDrag }),
     /* @__PURE__ */ jsxs6("div", { style: { display: "flex", padding: "1em" }, children: [
       /* @__PURE__ */ jsxs6(
@@ -3764,8 +3780,8 @@ function Anchor({
   attributes,
   children
 }) {
-  const startEdgeRef = useRef5(null);
-  const anchorRef = useRef5(null);
+  const startEdgeRef = useRef6(null);
+  const anchorRef = useRef6(null);
   const selected = useSelected();
   const editor = useSlate();
   const dialog = useLayer("dialog");
@@ -4019,7 +4035,7 @@ var $Image = styled17("img")`
 
 // src/image-plugin/render-element/image-with-controls/image-resize-controls/image-resize-control.tsx
 import { clsx as clsx2 } from "clsx";
-import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef7 } from "react";
 import { Transforms as Transforms13 } from "slate";
 import { ReactEditor as ReactEditor5, useSlateStatic as useSlateStatic5 } from "slate-react";
 
@@ -4234,10 +4250,10 @@ function ImageResizeControl({
   setIsDragging
 }) {
   const editor = useSlateStatic5();
-  const mouseMoveRef = useRef6(null);
-  const mouseUpRef = useRef6(null);
-  const touchMoveRef = useRef6(null);
-  const touchEndRef = useRef6(null);
+  const mouseMoveRef = useRef7(null);
+  const mouseUpRef = useRef7(null);
+  const touchMoveRef = useRef7(null);
+  const touchEndRef = useRef7(null);
   useResizeBrowser();
   const editorWidth = getEditorWidth(editor);
   const width = size.width;
@@ -5305,7 +5321,7 @@ function normalizeNode3(editor, entry) {
 }
 
 // src/code-block-plugin/render-element/CodeBlock.tsx
-import { useCallback as useCallback10, useRef as useRef7 } from "react";
+import { useCallback as useCallback10, useRef as useRef8 } from "react";
 import { useSelected as useSelected3 } from "slate-react";
 
 // src/code-block-plugin/icons/ChevronDownIcon.tsx
@@ -5398,7 +5414,7 @@ function CodeBlock({
   attributes,
   children
 }) {
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   const selected = useSelected3();
   const dropdown = useLayer("code-block-dropdown");
   const onClick = useCallback10(() => {
@@ -7724,7 +7740,7 @@ import { useContext as useContext2 } from "react";
 import { useSelected as useSelected8 } from "slate-react";
 
 // src/table-plugin/render-element/table-cell/column-menu/index.tsx
-import { useCallback as useCallback12, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback12, useRef as useRef9, useState as useState6 } from "react";
 import { useSlateStatic as useSlateStatic14 } from "slate-react";
 
 // src/table-plugin/icons.tsx
@@ -7777,7 +7793,7 @@ import { Fragment as Fragment5, jsx as jsx51, jsxs as jsxs23 } from "react/jsx-r
 function ColumnMenu({ cellElement }) {
   const editor = useSlateStatic14();
   const menu = useLayer("column-menu");
-  const buttonRef = useRef8(null);
+  const buttonRef = useRef9(null);
   const [hover, setHover] = useState6(false);
   const onMouseEnter = useCallback12(() => {
     setHover(true);
@@ -8182,13 +8198,13 @@ var ThemePlugin = createPlugin((editor) => {
 
 // src/toolbar-plugin/render-editable/index.tsx
 import { clsx as clsx10 } from "clsx";
-import { useCallback as useCallback17, useRef as useRef14 } from "react";
+import { useCallback as useCallback17, useRef as useRef15 } from "react";
 import { Editor as Editor63, Transforms as Transforms45 } from "slate";
 import { ReactEditor as ReactEditor16, useFocused, useSlateStatic as useSlateStatic21 } from "slate-react";
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
 import { clsx as clsx8 } from "clsx";
-import { useCallback as useCallback13, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback13, useRef as useRef10, useState as useState8 } from "react";
 import { ReactEditor as ReactEditor13, useSlateStatic as useSlateStatic16 } from "slate-react";
 
 // src/toolbar-plugin/styles/table-styles.ts
@@ -8225,7 +8241,7 @@ function TableDialog({
 }) {
   const [hover, setHover] = useState8({ x: 0, y: 0 });
   const editor = useSlateStatic16();
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   const style = useAbsoluteReposition({ src: ref, dest }, ({ dest: dest2 }) => {
     if (!dest2) return { left: 0, top: 0 };
     return { left: dest2.left - 8, top: dest2.top + dest2.height };
@@ -8266,7 +8282,7 @@ function TableDialog({
 }
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
-import { useEffect as useEffect9, useRef as useRef13, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef14, useState as useState11 } from "react";
 import { useSlateStatic as useSlateStatic20 } from "slate-react";
 
 // src/toolbar-plugin/icons.tsx
@@ -8379,7 +8395,7 @@ var compactBlockItems = [
 ];
 
 // src/toolbar-plugin/components/dialog/image-url-dialog.tsx
-import { useState as useState9, useRef as useRef10, useEffect as useEffect8, useCallback as useCallback14 } from "react";
+import { useState as useState9, useRef as useRef11, useEffect as useEffect8, useCallback as useCallback14 } from "react";
 import { useSlateStatic as useSlateStatic17 } from "slate-react";
 
 // src/toolbar-plugin/styles/file-dialog-styles.ts
@@ -8397,8 +8413,8 @@ function ImageUrlDialog({
   close
 }) {
   const editor = useSlateStatic17();
-  const ref = useRef10(null);
-  const fileInputRef = useRef10(null);
+  const ref = useRef11(null);
+  const fileInputRef = useRef11(null);
   const [dragOffset, setDragOffset] = useState9({ x: 0, y: 0 });
   const handleDrag = useCallback14((deltaX, deltaY) => {
     setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
@@ -8724,7 +8740,7 @@ import { isHotkey as isHotkey3 } from "is-hotkey";
 import {
   useCallback as useCallback15,
   useMemo as useMemo3,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState10
 } from "react";
 import { Editor as Editor60, Range as Range10 } from "slate";
@@ -8772,7 +8788,7 @@ function AnchorDialog2({
   close
 }) {
   const editor = useSlateStatic18();
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const [dragOffset, setDragOffset] = useState10({ x: 0, y: 0 });
   const handleDrag = useCallback15((deltaX, deltaY) => {
     setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
@@ -9151,7 +9167,7 @@ var itemSets = [largeItems, mediumItems, smallItems];
 
 // src/toolbar-plugin/components/toolbar/toolbar-button.tsx
 import { clsx as clsx9 } from "clsx";
-import { useCallback as useCallback16, useRef as useRef12 } from "react";
+import { useCallback as useCallback16, useRef as useRef13 } from "react";
 import { ReactEditor as ReactEditor15, useSlate as useSlate2, useSlateStatic as useSlateStatic19 } from "slate-react";
 import { jsx as jsx63, jsxs as jsxs31 } from "react/jsx-runtime";
 function ToolbarButton({
@@ -9160,7 +9176,7 @@ function ToolbarButton({
   const staticEditor = useSlateStatic19();
   const editor = useSlate2();
   const isActive = item.active ? item.active(editor) : false;
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const tooltip = useTooltip({
     title: item.title,
     hotkey: () => item.hotkey ? formatHotkey(item.hotkey) : void 0
@@ -9251,7 +9267,7 @@ function measureItemSetWidth(items, buttonWidth, dividerWidth) {
 }
 var WIDTH_BUFFER_PX = 4;
 function Toolbar() {
-  const ref = useRef13(null);
+  const ref = useRef14(null);
   const [items, setItems] = useState11(initialItems);
   useEffect9(() => {
     const toolbar = ref.current;
@@ -9290,7 +9306,7 @@ function Toolbar() {
 // src/toolbar-plugin/render-editable/index.tsx
 import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
 function renderEditable({ attributes, Editable: Editable3 }) {
-  const outerContainerRef = useRef14(null);
+  const outerContainerRef = useRef15(null);
   const editor = useSlateStatic21();
   const focused = useFocused();
   const onClickOuterContainer = useCallback17(
@@ -9538,11 +9554,11 @@ function Editable2({
 }) {
   const [isRawMode, setIsRawMode] = useState13(false);
   const [rawText, setRawText] = useState13(value);
-  const ignoreNextChangeRef = useRef15(false);
-  const initialValueRef = useRef15(void 0);
-  const prevValueRef = useRef15(void 0);
-  const pendingRawTextRef = useRef15(null);
-  const onChangeRef = useRef15(onChange);
+  const ignoreNextChangeRef = useRef16(false);
+  const initialValueRef = useRef16(void 0);
+  const prevValueRef = useRef16(void 0);
+  const pendingRawTextRef = useRef16(null);
+  const onChangeRef = useRef16(onChange);
   onChangeRef.current = onChange;
   const onThrottledSlateChange = useCallback18(
     throttle2(
@@ -9750,7 +9766,7 @@ function StandaloneEditor({
   standaloneMethodsRef
 }) {
   const [markdown, setMarkdown] = useState14(options.initialMarkdown || "");
-  const markdownRef = useRef16(markdown);
+  const markdownRef = useRef17(markdown);
   const editor = useEditor(options);
   markdownRef.current = markdown;
   useImperativeHandle(