@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.2

package/dist/esm/components/MarkdownEditor/novel/extensions/slash-command.mjs

@@ -0,0 +1,79 @@
+import { EditorCommandOut } from "../components/editor-command.mjs";
+import { ReactRenderer } from "@tiptap/react";
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+
+//#region src/components/MarkdownEditor/novel/extensions/slash-command.tsx
+const Command = Extension.create({
+	name: "slash-command",
+	addOptions() {
+		return { suggestion: {
+			char: "/",
+			command: ({ editor, range, props }) => {
+				props.command({
+					editor,
+					range
+				});
+			}
+		} };
+	},
+	addProseMirrorPlugins() {
+		return [Suggestion({
+			editor: this.editor,
+			...this.options.suggestion
+		})];
+	}
+});
+const renderItems = (elementRef) => {
+	let component = null;
+	let popup = null;
+	return {
+		onStart: (props) => {
+			component = new ReactRenderer(EditorCommandOut, {
+				props,
+				editor: props.editor
+			});
+			const { selection } = props.editor.state;
+			if (selection.$from.node(selection.$from.depth).type.name === "codeBlock") return false;
+			popup = tippy("body", {
+				getReferenceClientRect: props.clientRect,
+				appendTo: () => elementRef ? elementRef.current : document.body,
+				content: component.element,
+				showOnCreate: true,
+				interactive: true,
+				trigger: "manual",
+				placement: "bottom-start"
+			});
+		},
+		onUpdate: (props) => {
+			component?.updateProps(props);
+			popup?.[0]?.setProps({ getReferenceClientRect: props.clientRect });
+		},
+		onKeyDown: (props) => {
+			if (props.event.key === "Escape") {
+				popup?.[0]?.hide();
+				return true;
+			}
+			return component?.ref?.onKeyDown(props);
+		},
+		onExit: () => {
+			popup?.[0]?.destroy();
+			component?.destroy();
+		}
+	};
+};
+const createSuggestionItems = (items) => items;
+const handleCommandNavigation = (event) => {
+	if ([
+		"ArrowUp",
+		"ArrowDown",
+		"Enter"
+	].includes(event.key)) {
+		if (document.querySelector("#slash-command")) return true;
+	}
+};
+
+//#endregion
+export { Command, createSuggestionItems, handleCommandNavigation, renderItems };
+//# sourceMappingURL=slash-command.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/slash-command.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slash-command.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/slash-command.tsx"],"sourcesContent":["import type { Editor, Range } from '@tiptap/core';\nimport { Extension } from '@tiptap/core';\nimport { ReactRenderer } from '@tiptap/react';\nimport Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';\nimport type { ReactNode, RefObject } from 'react';\nimport tippy, {\n  type GetReferenceClientRect,\n  type Instance,\n  type Props,\n} from 'tippy.js';\nimport { EditorCommandOut } from '../components/editor-command';\n\nconst Command = Extension.create({\n  name: 'slash-command',\n  addOptions() {\n    return {\n      suggestion: {\n        char: '/',\n        command: ({ editor, range, props }) => {\n          props.command({ editor, range });\n        },\n      } as SuggestionOptions,\n    };\n  },\n  addProseMirrorPlugins() {\n    return [\n      Suggestion({\n        editor: this.editor,\n        ...this.options.suggestion,\n      }),\n    ];\n  },\n});\n\nconst renderItems = (elementRef?: RefObject<Element> | null) => {\n  let component: ReactRenderer | null = null;\n  let popup: Instance<Props>[] | null = null;\n\n  return {\n    onStart: (props: { editor: Editor; clientRect: DOMRect }) => {\n      component = new ReactRenderer(EditorCommandOut, {\n        props,\n        editor: props.editor,\n      });\n\n      const { selection } = props.editor.state;\n\n      const parentNode = selection.$from.node(selection.$from.depth);\n      const blockType = parentNode.type.name;\n\n      if (blockType === 'codeBlock') {\n        return false;\n      }\n\n      // @ts-ignore\n      popup = tippy('body', {\n        getReferenceClientRect: props.clientRect,\n        appendTo: () => (elementRef ? elementRef.current : document.body),\n        content: component.element,\n        showOnCreate: true,\n        interactive: true,\n        trigger: 'manual',\n        placement: 'bottom-start',\n      });\n    },\n    onUpdate: (props: {\n      editor: Editor;\n      clientRect: GetReferenceClientRect;\n    }) => {\n      component?.updateProps(props);\n\n      popup?.[0]?.setProps({\n        getReferenceClientRect: props.clientRect,\n      });\n    },\n\n    onKeyDown: (props: { event: KeyboardEvent }) => {\n      if (props.event.key === 'Escape') {\n        popup?.[0]?.hide();\n\n        return true;\n      }\n\n      // @ts-ignore\n      return component?.ref?.onKeyDown(props);\n    },\n    onExit: () => {\n      popup?.[0]?.destroy();\n      component?.destroy();\n    },\n  };\n};\n\nexport interface SuggestionItem {\n  title: string;\n  description: string;\n  icon: ReactNode;\n  searchTerms?: string[];\n  command?: (props: { editor: Editor; range: Range }) => void;\n}\n\nexport const createSuggestionItems = (items: SuggestionItem[]) => items;\n\nexport const handleCommandNavigation = (event: KeyboardEvent) => {\n  if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n    const slashCommand = document.querySelector('#slash-command');\n    if (slashCommand) {\n      return true;\n    }\n  }\n};\n\nexport { Command, renderItems };\n"],"mappings":";;;;;;;AAYA,MAAM,UAAU,UAAU,OAAO;CAC/B,MAAM;CACN,aAAa;AACX,SAAO,EACL,YAAY;GACV,MAAM;GACN,UAAU,EAAE,QAAQ,OAAO,YAAY;AACrC,UAAM,QAAQ;KAAE;KAAQ;KAAO,CAAC;;GAEnC,EACF;;CAEH,wBAAwB;AACtB,SAAO,CACL,WAAW;GACT,QAAQ,KAAK;GACb,GAAG,KAAK,QAAQ;GACjB,CAAC,CACH;;CAEJ,CAAC;AAEF,MAAM,eAAe,eAA2C;CAC9D,IAAI,YAAkC;CACtC,IAAI,QAAkC;AAEtC,QAAO;EACL,UAAU,UAAmD;AAC3D,eAAY,IAAI,cAAc,kBAAkB;IAC9C;IACA,QAAQ,MAAM;IACf,CAAC;GAEF,MAAM,EAAE,cAAc,MAAM,OAAO;AAKnC,OAHmB,UAAU,MAAM,KAAK,UAAU,MAAM,MAC5B,CAAC,KAAK,SAEhB,YAChB,QAAO;AAIT,WAAQ,MAAM,QAAQ;IACpB,wBAAwB,MAAM;IAC9B,gBAAiB,aAAa,WAAW,UAAU,SAAS;IAC5D,SAAS,UAAU;IACnB,cAAc;IACd,aAAa;IACb,SAAS;IACT,WAAW;IACZ,CAAC;;EAEJ,WAAW,UAGL;AACJ,cAAW,YAAY,MAAM;AAE7B,WAAQ,IAAI,SAAS,EACnB,wBAAwB,MAAM,YAC/B,CAAC;;EAGJ,YAAY,UAAoC;AAC9C,OAAI,MAAM,MAAM,QAAQ,UAAU;AAChC,YAAQ,IAAI,MAAM;AAElB,WAAO;;AAIT,UAAO,WAAW,KAAK,UAAU,MAAM;;EAEzC,cAAc;AACZ,WAAQ,IAAI,SAAS;AACrB,cAAW,SAAS;;EAEvB;;AAWH,MAAa,yBAAyB,UAA4B;AAElE,MAAa,2BAA2B,UAAyB;AAC/D,KAAI;EAAC;EAAW;EAAa;EAAQ,CAAC,SAAS,MAAM,IAAI,EAEvD;MADqB,SAAS,cAAc,iBAC5B,CACd,QAAO"}

package/dist/esm/components/MarkdownEditor/novel/extensions/updated-image.mjs

@@ -0,0 +1,17 @@
+import Image from "@tiptap/extension-image";
+
+//#region src/components/MarkdownEditor/novel/extensions/updated-image.ts
+const UpdatedImage = Image.extend({
+	name: "image",
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			width: { default: null },
+			height: { default: null }
+		};
+	}
+});
+
+//#endregion
+export { UpdatedImage as default };
+//# sourceMappingURL=updated-image.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/updated-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"updated-image.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/updated-image.ts"],"sourcesContent":["import Image from '@tiptap/extension-image';\n\nconst UpdatedImage = Image.extend({\n  name: 'image',\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      width: {\n        default: null,\n      },\n      height: {\n        default: null,\n      },\n    };\n  },\n});\n\nexport default UpdatedImage;\n"],"mappings":";;;AAEA,MAAM,eAAe,MAAM,OAAO;CAChC,MAAM;CACN,gBAAgB;AACd,SAAO;GACL,GAAG,KAAK,UAAU;GAClB,OAAO,EACL,SAAS,MACV;GACD,QAAQ,EACN,SAAS,MACV;GACF;;CAEJ,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/index.mjs

@@ -0,0 +1,17 @@
+import { queryStore, rangeStore, useQuery, useRange } from "./utils/atoms.mjs";
+import { EditorCommand, EditorCommandList } from "./components/editor-command.mjs";
+import { EditorContent, EditorRoot } from "./components/editor.mjs";
+import { EditorBubble } from "./components/editor-bubble.mjs";
+import { EditorBubbleItem } from "./components/editor-bubble-item.mjs";
+import { EditorCommandEmpty, EditorCommandItem } from "./components/editor-command-item.mjs";
+import { useEditor } from "./components/index.mjs";
+import CustomKeymap from "./extensions/custom-keymap.mjs";
+import { ImageResizer } from "./extensions/image-resizer.mjs";
+import UpdatedImage from "./extensions/updated-image.mjs";
+import { AIHighlight, addAIHighlight, removeAIHighlight } from "./extensions/ai-highlight.mjs";
+import { Command, createSuggestionItems, handleCommandNavigation, renderItems } from "./extensions/slash-command.mjs";
+import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, InputRule, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./extensions/index.mjs";
+import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from "./plugins/upload-images.mjs";
+import { getAllContent, getPrevText, getUrlFromString, isValidUrl } from "./utils/index.mjs";
+
+export { AIHighlight, CharacterCount, Color, Command, CustomKeymap, EditorBubble, EditorBubbleItem, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorCommandList, EditorContent, EditorRoot, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, UploadImagesPlugin, Youtube, addAIHighlight, createImageUpload, createSuggestionItems, getAllContent, getPrevText, getUrlFromString, handleCommandNavigation, handleImageDrop, handleImagePaste, isValidUrl, queryStore, rangeStore, removeAIHighlight, renderItems, useEditor, useQuery, useRange };

package/dist/esm/components/MarkdownEditor/novel/plugins/index.mjs

@@ -0,0 +1,3 @@
+import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from "./upload-images.mjs";
+
+export { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste };

package/dist/esm/components/MarkdownEditor/novel/plugins/upload-images.mjs

@@ -0,0 +1,92 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+//#region src/components/MarkdownEditor/novel/plugins/upload-images.tsx
+const uploadKey = new PluginKey("upload-image");
+const UploadImagesPlugin = ({ imageClass }) => new Plugin({
+	key: uploadKey,
+	state: {
+		init() {
+			return DecorationSet.empty;
+		},
+		apply(tr, set) {
+			set = set.map(tr.mapping, tr.doc);
+			const action = tr.getMeta(this);
+			if (action?.add) {
+				const { id, pos, src } = action.add;
+				const placeholder = document.createElement("div");
+				placeholder.setAttribute("class", "img-placeholder");
+				const image = document.createElement("img");
+				image.setAttribute("class", imageClass);
+				image.src = src;
+				placeholder.appendChild(image);
+				const deco = Decoration.widget(pos + 1, placeholder, { id });
+				set = set.add(tr.doc, [deco]);
+			} else if (action?.remove) set = set.remove(set.find(void 0, void 0, (spec) => spec.id === action.remove.id));
+			return set;
+		}
+	},
+	props: { decorations(state) {
+		return this.getState(state);
+	} }
+});
+function findPlaceholder(state, id) {
+	const found = uploadKey.getState(state).find(void 0, void 0, (spec) => spec.id === id);
+	return found.length ? found[0]?.from : null;
+}
+const createImageUpload = ({ validateFn, onUpload }) => (file, view, pos) => {
+	if (!validateFn?.(file)) return;
+	const id = {};
+	const tr = view.state.tr;
+	if (!tr.selection.empty) tr.deleteSelection();
+	const reader = new FileReader();
+	reader.readAsDataURL(file);
+	reader.onload = () => {
+		tr.setMeta(uploadKey, { add: {
+			id,
+			pos,
+			src: reader.result
+		} });
+		view.dispatch(tr);
+	};
+	onUpload(file).then((src) => {
+		const { schema } = view.state;
+		const pos = findPlaceholder(view.state, id);
+		if (pos == null) return;
+		const imageSrc = typeof src === "object" ? reader.result : src;
+		const node = schema.nodes.image?.create({ src: imageSrc });
+		if (!node) return;
+		const transaction = view.state.tr.replaceWith(pos, pos, node).setMeta(uploadKey, { remove: { id } });
+		view.dispatch(transaction);
+	}, () => {
+		const transaction = view.state.tr.delete(pos, pos).setMeta(uploadKey, { remove: { id } });
+		view.dispatch(transaction);
+	});
+};
+const handleImagePaste = (view, event, uploadFn) => {
+	if (event.clipboardData?.files.length) {
+		event.preventDefault();
+		const [file] = Array.from(event.clipboardData.files);
+		const pos = view.state.selection.from;
+		if (file) uploadFn(file, view, pos);
+		return true;
+	}
+	return false;
+};
+const handleImageDrop = (view, event, moved, uploadFn) => {
+	if (!moved && event.dataTransfer?.files.length) {
+		event.preventDefault();
+		const [file] = Array.from(event.dataTransfer.files);
+		const coordinates = view.posAtCoords({
+			left: event.clientX,
+			top: event.clientY
+		});
+		if (file) uploadFn(file, view, coordinates?.pos ?? -1);
+		return true;
+	}
+	return false;
+};
+
+//#endregion
+export { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste };
+//# sourceMappingURL=upload-images.mjs.map

package/dist/esm/components/MarkdownEditor/novel/plugins/upload-images.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload-images.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/plugins/upload-images.tsx"],"sourcesContent":["import { type EditorState, Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view';\n\nconst uploadKey = new PluginKey('upload-image');\n\nexport const UploadImagesPlugin = ({ imageClass }: { imageClass: string }) =>\n  new Plugin({\n    key: uploadKey,\n    state: {\n      init() {\n        return DecorationSet.empty;\n      },\n      apply(tr, set) {\n        set = set.map(tr.mapping, tr.doc);\n        // See if the transaction adds or removes any placeholders\n        //@ts-expect-error - not yet sure what the type I need here\n        const action = tr.getMeta(this);\n        if (action?.add) {\n          const { id, pos, src } = action.add;\n\n          const placeholder = document.createElement('div');\n          placeholder.setAttribute('class', 'img-placeholder');\n          const image = document.createElement('img');\n          image.setAttribute('class', imageClass);\n          image.src = src;\n          placeholder.appendChild(image);\n          const deco = Decoration.widget(pos + 1, placeholder, {\n            id,\n          });\n          set = set.add(tr.doc, [deco]);\n        } else if (action?.remove) {\n          set = set.remove(\n            set.find(\n              undefined,\n              undefined,\n              (spec) => spec.id === action.remove.id\n            )\n          );\n        }\n        return set;\n      },\n    },\n    props: {\n      decorations(state) {\n        return this.getState(state);\n      },\n    },\n  });\n\nfunction findPlaceholder(state: EditorState, id: object) {\n  const decos = uploadKey.getState(state) as DecorationSet;\n  const found = decos.find(undefined, undefined, (spec) => spec.id === id);\n  return found.length ? found[0]?.from : null;\n}\n\nexport interface ImageUploadOptions {\n  validateFn?: (file: File) => void;\n  onUpload: (file: File) => Promise<unknown>;\n}\n\nexport const createImageUpload =\n  ({ validateFn, onUpload }: ImageUploadOptions): UploadFn =>\n  (file, view, pos) => {\n    // check if the file is an image\n    const validated = validateFn?.(file);\n    if (!validated) return;\n    // A fresh object to act as the ID for this upload\n    const id = {};\n\n    // Replace the selection with a placeholder\n    const tr = view.state.tr;\n    if (!tr.selection.empty) tr.deleteSelection();\n\n    const reader = new FileReader();\n    reader.readAsDataURL(file);\n    reader.onload = () => {\n      tr.setMeta(uploadKey, {\n        add: {\n          id,\n          pos,\n          src: reader.result,\n        },\n      });\n      view.dispatch(tr);\n    };\n\n    onUpload(file).then(\n      (src) => {\n        const { schema } = view.state;\n\n        const pos = findPlaceholder(view.state, id);\n\n        // If the content around the placeholder has been deleted, drop\n        // the image\n        if (pos == null) return;\n\n        // Otherwise, insert it at the placeholder's position, and remove\n        // the placeholder\n\n        // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read\n        // the image locally\n        const imageSrc = typeof src === 'object' ? reader.result : src;\n\n        const node = schema.nodes.image?.create({ src: imageSrc });\n        if (!node) return;\n\n        const transaction = view.state.tr\n          .replaceWith(pos, pos, node)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      },\n      () => {\n        // Deletes the image placeholder on error\n        const transaction = view.state.tr\n          .delete(pos, pos)\n          .setMeta(uploadKey, { remove: { id } });\n        view.dispatch(transaction);\n      }\n    );\n  };\n\nexport type UploadFn = (file: File, view: EditorView, pos: number) => void;\n\nexport const handleImagePaste = (\n  view: EditorView,\n  event: ClipboardEvent,\n  uploadFn: UploadFn\n) => {\n  if (event.clipboardData?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.clipboardData.files);\n    const pos = view.state.selection.from;\n\n    if (file) uploadFn(file, view, pos);\n    return true;\n  }\n  return false;\n};\n\nexport const handleImageDrop = (\n  view: EditorView,\n  event: DragEvent,\n  moved: boolean,\n  uploadFn: UploadFn\n) => {\n  if (!moved && event.dataTransfer?.files.length) {\n    event.preventDefault();\n    const [file] = Array.from(event.dataTransfer.files);\n    const coordinates = view.posAtCoords({\n      left: event.clientX,\n      top: event.clientY,\n    });\n    // here we deduct 1 from the pos or else the image will create an extra node\n    if (file) uploadFn(file, view, coordinates?.pos ?? 0 - 1);\n    return true;\n  }\n  return false;\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/novel/utils/atoms.mjs

@@ -0,0 +1,39 @@
+import { useSyncExternalStore } from "react";
+
+//#region src/components/MarkdownEditor/novel/utils/atoms.ts
+/**
+* Minimal module-level observable store.
+*
+* rendered by Tiptap in a separate React root (outside the editor's provider
+* tree), so the query/range state has to live in a plain module singleton that
+* both roots can read and write — no shared React context needed. This is what
+* `useSyncExternalStore` store removes the dependency with identical behaviour.
+*/
+const createExternalStore = (initialValue) => {
+	let value = initialValue;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getSnapshot: () => value,
+		setValue: (next) => {
+			if (Object.is(next, value)) return;
+			value = next;
+			for (const listener of listeners) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+const queryStore = createExternalStore("");
+const rangeStore = createExternalStore(null);
+/** Subscribe to the current slash-command query string. */
+const useQuery = () => useSyncExternalStore(queryStore.subscribe, queryStore.getSnapshot, queryStore.getSnapshot);
+/** Subscribe to the current slash-command range. */
+const useRange = () => useSyncExternalStore(rangeStore.subscribe, rangeStore.getSnapshot, rangeStore.getSnapshot);
+
+//#endregion
+export { queryStore, rangeStore, useQuery, useRange };
+//# sourceMappingURL=atoms.mjs.map

package/dist/esm/components/MarkdownEditor/novel/utils/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/atoms.ts"],"sourcesContent":["import type { Range } from '@tiptap/core';\nimport { useSyncExternalStore } from 'react';\n\ntype Listener = () => void;\n\n/**\n * Minimal module-level observable store.\n *\n * rendered by Tiptap in a separate React root (outside the editor's provider\n * tree), so the query/range state has to live in a plain module singleton that\n * both roots can read and write — no shared React context needed. This is what\n * `useSyncExternalStore` store removes the dependency with identical behaviour.\n */\nconst createExternalStore = <T>(initialValue: T) => {\n  let value = initialValue;\n  const listeners = new Set<Listener>();\n\n  return {\n    getSnapshot: (): T => value,\n    setValue: (next: T): void => {\n      if (Object.is(next, value)) return;\n      value = next;\n      for (const listener of listeners) listener();\n    },\n    subscribe: (listener: Listener): (() => void) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n};\n\nexport const queryStore = createExternalStore('');\nexport const rangeStore = createExternalStore<Range | null>(null);\n\n/** Subscribe to the current slash-command query string. */\nexport const useQuery = (): string =>\n  useSyncExternalStore(\n    queryStore.subscribe,\n    queryStore.getSnapshot,\n    queryStore.getSnapshot\n  );\n\n/** Subscribe to the current slash-command range. */\nexport const useRange = (): Range | null =>\n  useSyncExternalStore(\n    rangeStore.subscribe,\n    rangeStore.getSnapshot,\n    rangeStore.getSnapshot\n  );\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,uBAA0B,iBAAoB;CAClD,IAAI,QAAQ;CACZ,MAAM,4BAAY,IAAI,KAAe;AAErC,QAAO;EACL,mBAAsB;EACtB,WAAW,SAAkB;AAC3B,OAAI,OAAO,GAAG,MAAM,MAAM,CAAE;AAC5B,WAAQ;AACR,QAAK,MAAM,YAAY,UAAW,WAAU;;EAE9C,YAAY,aAAqC;AAC/C,aAAU,IAAI,SAAS;AACvB,gBAAa;AACX,cAAU,OAAO,SAAS;;;EAG/B;;AAGH,MAAa,aAAa,oBAAoB,GAAG;AACjD,MAAa,aAAa,oBAAkC,KAAK;;AAGjE,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,YACZ;;AAGH,MAAa,iBACX,qBACE,WAAW,WACX,WAAW,aACX,WAAW,YACZ"}

package/dist/esm/components/MarkdownEditor/novel/utils/index.mjs

@@ -0,0 +1,38 @@
+import { Fragment } from "@tiptap/pm/model";
+
+//#region src/components/MarkdownEditor/novel/utils/index.ts
+const isValidUrl = (url) => {
+	try {
+		new URL(url);
+		return true;
+	} catch (_e) {
+		return false;
+	}
+};
+const getUrlFromString = (str) => {
+	if (isValidUrl(str)) return str;
+	try {
+		if (str.includes(".") && !str.includes(" ")) return new URL(`https://${str}`).toString();
+	} catch (_e) {
+		return null;
+	}
+};
+const getPrevText = (editor, position) => {
+	const nodes = [];
+	editor.state.doc.forEach((node, pos) => {
+		if (pos >= position) return;
+		nodes.push(node);
+	});
+	const fragment = Fragment.fromArray(nodes);
+	const doc = editor.state.doc.copy(fragment);
+	return editor.storage.markdown.serializer.serialize(doc);
+};
+const getAllContent = (editor) => {
+	const fragment = editor.state.doc.content;
+	const doc = editor.state.doc.copy(fragment);
+	return editor.storage.markdown.serializer.serialize(doc);
+};
+
+//#endregion
+export { getAllContent, getPrevText, getUrlFromString, isValidUrl };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/MarkdownEditor/novel/utils/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/utils/index.ts"],"sourcesContent":["import { Fragment, type Node } from '@tiptap/pm/model';\nimport type { EditorInstance } from '../components';\n\nexport const isValidUrl = (url: string) => {\n  try {\n    new URL(url);\n    return true;\n  } catch (_e) {\n    return false;\n  }\n};\n\nexport const getUrlFromString = (str: string) => {\n  if (isValidUrl(str)) return str;\n  try {\n    if (str.includes('.') && !str.includes(' ')) {\n      return new URL(`https://${str}`).toString();\n    }\n  } catch (_e) {\n    return null;\n  }\n};\n\n// Get the text before a given position in markdown format\nexport const getPrevText = (editor: EditorInstance, position: number) => {\n  const nodes: Node[] = [];\n  editor.state.doc.forEach((node, pos) => {\n    if (pos >= position) return;\n    nodes.push(node);\n  });\n  const fragment = Fragment.fromArray(nodes);\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n\n// Get all content from the editor in markdown format\nexport const getAllContent = (editor: EditorInstance) => {\n  const fragment = editor.state.doc.content;\n  const doc = editor.state.doc.copy(fragment);\n\n  return editor.storage.markdown.serializer.serialize(doc) as string;\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAgB;AACzC,KAAI;AACF,MAAI,IAAI,IAAI;AACZ,SAAO;UACA,IAAI;AACX,SAAO;;;AAIX,MAAa,oBAAoB,QAAgB;AAC/C,KAAI,WAAW,IAAI,CAAE,QAAO;AAC5B,KAAI;AACF,MAAI,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,SAAS,IAAI,CACzC,QAAO,IAAI,IAAI,WAAW,MAAM,CAAC,UAAU;UAEtC,IAAI;AACX,SAAO;;;AAKX,MAAa,eAAe,QAAwB,aAAqB;CACvE,MAAM,QAAgB,EAAE;AACxB,QAAO,MAAM,IAAI,SAAS,MAAM,QAAQ;AACtC,MAAI,OAAO,SAAU;AACrB,QAAM,KAAK,KAAK;GAChB;CACF,MAAM,WAAW,SAAS,UAAU,MAAM;CAC1C,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,SAAS;AAE3C,QAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,IAAI;;AAI1D,MAAa,iBAAiB,WAA2B;CACvD,MAAM,WAAW,OAAO,MAAM,IAAI;CAClC,MAAM,MAAM,OAAO,MAAM,IAAI,KAAK,SAAS;AAE3C,QAAO,OAAO,QAAQ,SAAS,WAAW,UAAU,IAAI"}

package/dist/esm/components/MarkdownEditor/selectors/ColorSelector.mjs

@@ -0,0 +1,176 @@
+'use client';
+
+import { useEditor } from "../novel/components/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/selectors/ColorSelector.tsx
+const TEXT_COLORS = [
+	{
+		name: "Default",
+		color: "var(--color-text)"
+	},
+	{
+		name: "Primary",
+		color: "var(--color-primary-500)"
+	},
+	{
+		name: "Secondary",
+		color: "var(--color-secondary)"
+	},
+	{
+		name: "Success",
+		color: "var(--color-success)"
+	},
+	{
+		name: "Warning",
+		color: "var(--color-warning)"
+	},
+	{
+		name: "Error",
+		color: "var(--color-error)"
+	},
+	{
+		name: "Neutral",
+		color: "var(--color-neutral)"
+	}
+];
+const HIGHLIGHT_COLORS = [
+	{
+		name: "Default",
+		color: "transparent"
+	},
+	{
+		name: "Primary",
+		color: "var(--color-primary-100)"
+	},
+	{
+		name: "Secondary",
+		color: "var(--color-secondary-100)"
+	},
+	{
+		name: "Success",
+		color: "var(--color-success-100)"
+	},
+	{
+		name: "Warning",
+		color: "var(--color-warning-50)"
+	},
+	{
+		name: "Error",
+		color: "var(--color-error-100)"
+	},
+	{
+		name: "Neutral",
+		color: "var(--color-neutral-100)"
+	}
+];
+/**
+* Bubble-menu selector for text color and highlight color.
+*
+* Uses `onMouseDown` + `preventDefault` on every interactive element so the
+* editor's selection is never cleared while the panel is open.
+*/
+const ColorSelector = () => {
+	const { editor } = useEditor();
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	const content = useIntlayer("markdown-editor");
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleOutsideMouseDown = (event) => {
+			if (!containerRef.current?.contains(event.target)) setIsOpen(false);
+		};
+		document.addEventListener("mousedown", handleOutsideMouseDown);
+		return () => document.removeEventListener("mousedown", handleOutsideMouseDown);
+	}, [isOpen]);
+	if (!editor) return null;
+	const activeColorItem = TEXT_COLORS.find(({ color }) => editor.isActive("textStyle", { color }));
+	const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) => editor.isActive("highlight", { color }));
+	const getColorName = (name) => {
+		switch (name) {
+			case "Default": return content.colorDefault.value;
+			case "Primary": return content.colorPrimary.value;
+			case "Secondary": return content.colorSecondary.value;
+			case "Success": return content.colorSuccess.value;
+			case "Warning": return content.colorWarning.value;
+			case "Error": return content.colorError.value;
+			case "Neutral": return content.colorNeutral.value;
+			default: return name;
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onMouseDown: (e) => {
+				e.preventDefault();
+				setIsOpen((prev) => !prev);
+			},
+			className: "flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "rounded-sm px-1 font-medium",
+				style: {
+					color: activeColorItem?.color,
+					backgroundColor: activeHighlightItem?.color
+				},
+				children: "A"
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })]
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			className: "absolute top-[calc(100%+0.5rem)] left-0 z-50 flex w-40 flex-col rounded-md border bg-popover p-1 shadow-md",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-1 px-2 font-semibold text-muted-foreground text-xs",
+					children: content.colorHeading.value
+				}),
+				TEXT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onMouseDown: (e) => {
+						e.preventDefault();
+						editor.commands.unsetColor();
+						if (name !== "Default") editor.chain().focus().setColor(color).run();
+						setIsOpen(false);
+					},
+					className: "flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "rounded-sm border px-1.5 font-medium",
+							style: { color },
+							children: "A"
+						}), /* @__PURE__ */ jsx("span", { children: getColorName(name) })]
+					}), editor.isActive("textStyle", { color }) && /* @__PURE__ */ jsx(Check, { className: "size-3" })]
+				}, name)),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-2 mb-1 px-2 font-semibold text-muted-foreground text-xs",
+					children: content.highlightHeading.value
+				}),
+				HIGHLIGHT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onMouseDown: (e) => {
+						e.preventDefault();
+						editor.commands.unsetHighlight();
+						if (name !== "Default") editor.chain().focus().setHighlight({ color }).run();
+						setIsOpen(false);
+					},
+					className: "flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "rounded-sm border px-1.5 font-medium",
+							style: { backgroundColor: color },
+							children: "A"
+						}), /* @__PURE__ */ jsx("span", { children: getColorName(name) })]
+					}), editor.isActive("highlight", { color }) && /* @__PURE__ */ jsx(Check, { className: "size-3" })]
+				}, name))
+			]
+		})]
+	});
+};
+
+//#endregion
+export { ColorSelector };
+//# sourceMappingURL=ColorSelector.mjs.map

package/dist/esm/components/MarkdownEditor/selectors/ColorSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/ColorSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ChevronDown } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useEditor } from '../novel';\n\nexport type ColorMenuItem = {\n  name: string;\n  color: string;\n};\n\nconst TEXT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'var(--color-text)' },\n  { name: 'Primary', color: 'var(--color-primary-500)' },\n  { name: 'Secondary', color: 'var(--color-secondary)' },\n  { name: 'Success', color: 'var(--color-success)' },\n  { name: 'Warning', color: 'var(--color-warning)' },\n  { name: 'Error', color: 'var(--color-error)' },\n  { name: 'Neutral', color: 'var(--color-neutral)' },\n];\n\nconst HIGHLIGHT_COLORS: ColorMenuItem[] = [\n  { name: 'Default', color: 'transparent' },\n  { name: 'Primary', color: 'var(--color-primary-100)' },\n  { name: 'Secondary', color: 'var(--color-secondary-100)' },\n  { name: 'Success', color: 'var(--color-success-100)' },\n  { name: 'Warning', color: 'var(--color-warning-50)' },\n  { name: 'Error', color: 'var(--color-error-100)' },\n  { name: 'Neutral', color: 'var(--color-neutral-100)' },\n];\n\n/**\n * Bubble-menu selector for text color and highlight color.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const ColorSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeColorItem = TEXT_COLORS.find(({ color }) =>\n    editor.isActive('textStyle', { color })\n  );\n  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>\n    editor.isActive('highlight', { color })\n  );\n\n  const getColorName = (name: string) => {\n    switch (name) {\n      case 'Default':\n        return content.colorDefault.value;\n      case 'Primary':\n        return content.colorPrimary.value;\n      case 'Secondary':\n        return content.colorSecondary.value;\n      case 'Success':\n        return content.colorSuccess.value;\n      case 'Warning':\n        return content.colorWarning.value;\n      case 'Error':\n        return content.colorError.value;\n      case 'Neutral':\n        return content.colorNeutral.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span\n          className=\"rounded-sm px-1 font-medium\"\n          style={{\n            color: activeColorItem?.color,\n            backgroundColor: activeHighlightItem?.color,\n          }}\n        >\n          A\n        </span>\n        <ChevronDown className=\"size-3\" />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 flex w-40 flex-col rounded-md border bg-popover p-1 shadow-md\">\n          <div className=\"mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.colorHeading.value}\n          </div>\n          {TEXT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetColor();\n                if (name !== 'Default') {\n                  editor.chain().focus().setColor(color).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('textStyle', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n\n          <div className=\"mt-2 mb-1 px-2 font-semibold text-muted-foreground text-xs\">\n            {content.highlightHeading.value}\n          </div>\n          {HIGHLIGHT_COLORS.map(({ name, color }) => (\n            <button\n              type=\"button\"\n              key={name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                editor.commands.unsetHighlight();\n                if (name !== 'Default') {\n                  editor.chain().focus().setHighlight({ color }).run();\n                }\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <span\n                  className=\"rounded-sm border px-1.5 font-medium\"\n                  style={{ backgroundColor: color }}\n                >\n                  A\n                </span>\n                <span>{getColorName(name)}</span>\n              </div>\n              {editor.isActive('highlight', { color }) && (\n                <Check className=\"size-3\" />\n              )}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/selectors/LinkSelector.mjs

@@ -0,0 +1,95 @@
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { getUrlFromString } from "../novel/utils/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Check, Link2, Trash } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/selectors/LinkSelector.tsx
+/**
+* Bubble-menu selector for adding / editing / removing a link on the current
+* selection.
+*
+* The trigger uses `onMouseDown` + `preventDefault` to keep the editor
+* selection alive. The input inside the panel is allowed to take real focus
+* (the user needs to type a URL) — the editor re-focuses on submit/remove.
+*/
+const LinkSelector = () => {
+	const { editor } = useEditor();
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	const inputRef = useRef(null);
+	const content = useIntlayer("markdown-editor");
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleOutsideMouseDown = (event) => {
+			if (!containerRef.current?.contains(event.target)) setIsOpen(false);
+		};
+		document.addEventListener("mousedown", handleOutsideMouseDown);
+		inputRef.current?.focus();
+		return () => document.removeEventListener("mousedown", handleOutsideMouseDown);
+	}, [isOpen]);
+	if (!editor) return null;
+	const currentHref = editor.getAttributes("link").href;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onMouseDown: (e) => {
+				e.preventDefault();
+				setIsOpen((prev) => !prev);
+			},
+			className: cn("flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent", editor.isActive("link") && "text-blue-500"),
+			children: [/* @__PURE__ */ jsx(Link2, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "underline decoration-stone-400 underline-offset-4",
+				children: content.link.value
+			})]
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			className: "absolute top-[calc(100%+0.5rem)] left-0 z-50",
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex w-60 gap-1 rounded-md border bg-popover p-1 shadow-md",
+				onSubmit: (event) => {
+					event.preventDefault();
+					const input = event.currentTarget[0];
+					const url = getUrlFromString(input.value);
+					if (url) editor.chain().focus().setLink({ href: url }).run();
+					setIsOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "text",
+					placeholder: content.linkPlaceholder.value,
+					className: "flex-1 bg-transparent p-1 text-sm outline-none",
+					defaultValue: currentHref ?? ""
+				}), currentHref ? /* @__PURE__ */ jsx(Button, {
+					label: content.removeLink.value,
+					type: "button",
+					size: "icon-sm",
+					variant: "outline",
+					color: "error",
+					Icon: Trash,
+					onClick: () => {
+						editor.chain().focus().unsetLink().run();
+						if (inputRef.current) inputRef.current.value = "";
+						setIsOpen(false);
+					}
+				}) : /* @__PURE__ */ jsx(Button, {
+					label: content.applyLink.value,
+					type: "submit",
+					size: "icon-sm",
+					color: "text",
+					Icon: Check
+				})]
+			}, currentHref ?? "no-link")
+		})]
+	});
+};
+
+//#endregion
+export { LinkSelector };
+//# sourceMappingURL=LinkSelector.mjs.map

package/dist/esm/components/MarkdownEditor/selectors/LinkSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/LinkSelector.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport { Check, Link2, Trash } from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { getUrlFromString, useEditor } from '../novel';\n\n/**\n * Bubble-menu selector for adding / editing / removing a link on the current\n * selection.\n *\n * The trigger uses `onMouseDown` + `preventDefault` to keep the editor\n * selection alive. The input inside the panel is allowed to take real focus\n * (the user needs to type a URL) — the editor re-focuses on submit/remove.\n */\nexport const LinkSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n\n    // Programmatically focus the input\n    inputRef.current?.focus();\n\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const currentHref = editor.getAttributes('link').href as string | undefined;\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className={cn(\n          'flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent',\n          editor.isActive('link') && 'text-blue-500'\n        )}\n      >\n        <Link2 className=\"size-4\" />\n        <span className=\"underline decoration-stone-400 underline-offset-4\">\n          {content.link.value}\n        </span>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50\">\n          <form\n            key={currentHref ?? 'no-link'}\n            className=\"flex w-60 gap-1 rounded-md border bg-popover p-1 shadow-md\"\n            onSubmit={(event) => {\n              event.preventDefault();\n              const input = event.currentTarget[0] as HTMLInputElement;\n              const url = getUrlFromString(input.value);\n              if (url) {\n                editor.chain().focus().setLink({ href: url }).run();\n              }\n              setIsOpen(false);\n            }}\n          >\n            <input\n              ref={inputRef}\n              type=\"text\"\n              placeholder={content.linkPlaceholder.value}\n              className=\"flex-1 bg-transparent p-1 text-sm outline-none\"\n              defaultValue={currentHref ?? ''}\n            />\n            {currentHref ? (\n              <Button\n                label={content.removeLink.value}\n                type=\"button\"\n                size=\"icon-sm\"\n                variant=\"outline\"\n                color=\"error\"\n                Icon={Trash}\n                onClick={() => {\n                  editor.chain().focus().unsetLink().run();\n                  if (inputRef.current) inputRef.current.value = '';\n                  setIsOpen(false);\n                }}\n              />\n            ) : (\n              <Button\n                label={content.applyLink.value}\n                type=\"submit\"\n                size=\"icon-sm\"\n                color=\"text\"\n                Icon={Check}\n              />\n            )}\n          </form>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,MAAa,qBAAyB;CACpC,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,YAAY,kBAAkB;AAE9C,iBAAgB;AACd,MAAI,CAAC,OAAQ;EACb,MAAM,0BAA0B,UAAsB;AACpD,OAAI,CAAC,aAAa,SAAS,SAAS,MAAM,OAAe,CACvD,WAAU,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,uBAAuB;AAG9D,WAAS,SAAS,OAAO;AAEzB,eACE,SAAS,oBAAoB,aAAa,uBAAuB;IAClE,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,cAAc,OAAO,cAAc,OAAO,CAAC;AAEjD,QACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAc,MAAM;AAClB,MAAE,gBAAgB;AAClB,eAAW,SAAS,CAAC,KAAK;;GAE5B,WAAW,GACT,8FACA,OAAO,SAAS,OAAO,IAAI,gBAC5B;aATH,CAWE,oBAAC,OAAD,EAAO,WAAU,UAAW,GAC5B,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,KAAK;IACT,EACA;MAER,UACC,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,QAAD;IAEE,WAAU;IACV,WAAW,UAAU;AACnB,WAAM,gBAAgB;KACtB,MAAM,QAAQ,MAAM,cAAc;KAClC,MAAM,MAAM,iBAAiB,MAAM,MAAM;AACzC,SAAI,IACF,QAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,KAAK;AAErD,eAAU,MAAM;;cAVpB,CAaE,oBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACL,aAAa,QAAQ,gBAAgB;KACrC,WAAU;KACV,cAAc,eAAe;KAC7B,GACD,cACC,oBAAC,QAAD;KACE,OAAO,QAAQ,WAAW;KAC1B,MAAK;KACL,MAAK;KACL,SAAQ;KACR,OAAM;KACN,MAAM;KACN,eAAe;AACb,aAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;AACxC,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAC/C,gBAAU,MAAM;;KAElB,IAEF,oBAAC,QAAD;KACE,OAAO,QAAQ,UAAU;KACzB,MAAK;KACL,MAAK;KACL,OAAM;KACN,MAAM;KACN,EAEC;MA1CA,eAAe,UA0Cf;GACH,EAEJ"}