@rebasepro/admin 0.2.1 → 0.2.4

package/src/editor/components/table-bubble.tsx

@@ -1,6 +1,14 @@
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
-import { autoUpdate, computePosition, flip, offset, shift, type VirtualElement } from "@floating-ui/dom";
+import {
+    autoUpdate,
+    computePosition,
+    flip,
+    offset,
+    shift,
+    type VirtualElement,
+    type Placement
+} from "@floating-ui/dom";
 import { IconButton, Tooltip, defaultBorderMixin, cls } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 import {
@@ -14,9 +22,8 @@ import {
 } from "prosemirror-tables";
 import { EditorState } from "prosemirror-state";
 
-
 export interface TableBubbleProps {
-    options?: any;
+    options?: { placement?: Placement; offset?: number };
     className?: string;
 }
 
@@ -35,8 +42,14 @@ const isSelectionInTable = (state: EditorState) => {
 // Wait, I will use generic SVGs for these since I don't know if @rebasepro/ui has them.
 
 export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
-    ({ options, className }, ref) => {
-        const { view, state } = useProseMirrorContext();
+    ({
+         options,
+         className
+     }, ref) => {
+        const {
+            view,
+            state
+        } = useProseMirrorContext();
         const { t } = useTranslation();
         const menuRef = useRef<HTMLDivElement>(null);
         const [show, setShow] = useState(false);
@@ -49,7 +62,10 @@ export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
         useEffect(() => {
             if (!show || !view || !state || !menuRef.current) return;
 
-            const { from, to } = state.selection;
+            const {
+                from,
+                to
+            } = state.selection;
 
             // Safety measure: if view.docView is destroyed, coordsAtPos might crash
             if (view.isDestroyed) return;
@@ -90,7 +106,10 @@ export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
                     placement: options?.placement || "top",
                     middleware: [offset(options?.offset || 8), flip(), shift()],
                     strategy: "fixed"
-                }).then(({ x, y }) => {
+                }).then(({
+                             x,
+                             y
+                         }) => {
                     if (menuRef.current) {
                         Object.assign(menuRef.current.style, {
                             left: `${x}px`,
@@ -113,9 +132,11 @@ export const TableBubble = forwardRef<HTMLDivElement, TableBubbleProps>(
         return (
             <div
                 ref={menuRef}
-                style={{ visibility: "hidden",
-position: "fixed",
-zIndex: 50 }}
+                style={{
+                    visibility: "hidden",
+                    position: "fixed",
+                    zIndex: 50
+                }}
                 className={cls("flex flex-row gap-1 p-1 rounded-lg border bg-white dark:bg-surface-800 shadow-lg", defaultBorderMixin, className)}
                 onMouseDown={(e) => {
                     // Prevent mousedown from stealing focus from the editor
@@ -125,17 +146,34 @@ zIndex: 50 }}
                 <div className="flex gap-1 border-r pr-1 mr-1 dark:border-gray-700">
                     <Tooltip title={t("add_row_before")}>
                         <IconButton size="small" onClick={() => executeCommand(addRowBefore)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line><line x1="3" y1="9" x2="21" y2="9"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="12" y1="8" x2="12" y2="16"></line>
+                                <line x1="8" y1="12" x2="16" y2="12"></line>
+                                <line x1="3" y1="9" x2="21" y2="9"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                     <Tooltip title={t("add_row_after")}>
                         <IconButton size="small" onClick={() => executeCommand(addRowAfter)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="12" x2="12" y2="20"></line><line x1="8" y1="16" x2="16" y2="16"></line><line x1="3" y1="15" x2="21" y2="15"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="12" y1="12" x2="12" y2="20"></line>
+                                <line x1="8" y1="16" x2="16" y2="16"></line>
+                                <line x1="3" y1="15" x2="21" y2="15"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                     <Tooltip title={t("delete_row")}>
                         <IconButton size="small" onClick={() => executeCommand(deleteRow)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="12" x2="21" y2="12"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="3" y1="12" x2="21" y2="12"></line>
+                                <line x1="8" y1="12" x2="16" y2="12"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                 </div>
@@ -143,24 +181,48 @@ zIndex: 50 }}
                 <div className="flex gap-1 border-r pr-1 mr-1 dark:border-gray-700">
                     <Tooltip title={t("add_column_before")}>
                         <IconButton size="small" onClick={() => executeCommand(addColumnBefore)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line><line x1="12" y1="8" x2="12" y2="16"></line><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="8" y1="12" x2="16" y2="12"></line>
+                                <line x1="12" y1="8" x2="12" y2="16"></line>
+                                <line x1="9" y1="3" x2="9" y2="21"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                     <Tooltip title={t("add_column_after")}>
                         <IconButton size="small" onClick={() => executeCommand(addColumnAfter)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="12" x2="20" y2="12"></line><line x1="16" y1="8" x2="16" y2="16"></line><line x1="15" y1="3" x2="15" y2="21"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="12" y1="12" x2="20" y2="12"></line>
+                                <line x1="16" y1="8" x2="16" y2="16"></line>
+                                <line x1="15" y1="3" x2="15" y2="21"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                     <Tooltip title={t("delete_column")}>
                         <IconButton size="small" onClick={() => executeCommand(deleteColumn)}>
-                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="3" x2="12" y2="21"></line><line x1="12" y1="8" x2="12" y2="16"></line></svg>
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                 strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <line x1="12" y1="3" x2="12" y2="21"></line>
+                                <line x1="12" y1="8" x2="12" y2="16"></line>
+                            </svg>
                         </IconButton>
                     </Tooltip>
                 </div>
 
                 <Tooltip title={t("delete_table")}>
                     <IconButton size="small" onClick={() => executeCommand(deleteTable)}>
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                             strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="3 6 5 6 21 6"></polyline>
+                            <path
+                                d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                            <line x1="10" y1="11" x2="10" y2="17"></line>
+                            <line x1="14" y1="11" x2="14" y2="17"></line>
+                        </svg>
                     </IconButton>
                 </Tooltip>
             </div>

package/src/editor/extensions/HighlightDecorationExtension.ts

@@ -1,5 +1,6 @@
 import { Plugin, PluginKey, Transaction, EditorState } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { Node as ProseMirrorNode } from "prosemirror-model";
 
 export interface HighlightRange {
     from: number
@@ -13,8 +14,8 @@ interface AutocompleteHighlightState {
 
 export const highlightDecorationKey = new PluginKey<AutocompleteHighlightState>("highlightDecoration");
 
-function buildDecorationSet(highlight: any, doc: any) {
-    const decorations: [any?] = [];
+function buildDecorationSet(highlight: HighlightRange | undefined, doc: ProseMirrorNode) {
+    const decorations: Decoration[] = [];
 
     if (highlight) {
         decorations.push(

package/src/editor/nodeViews/ReactNodeView.tsx

@@ -80,7 +80,7 @@ export class ReactNodeView implements NodeView {
         this.root.unmount();
     }
 
-    ignoreMutation(mutation: any) {
+    ignoreMutation(mutation: MutationRecord | { type: "selection"; target: Node }) {
         if (!this.contentDOM) {
             return true;
         }

package/src/editor/nodeViews/TaskItemComponent.tsx

@@ -1,29 +1,30 @@
 import React from "react";
+import { Checkbox, Label } from "@rebasepro/ui";
 import { ReactNodeViewProps } from "./ReactNodeView";
 
 export const TaskItemComponent: React.FC<ReactNodeViewProps> = ({ node, view, getPos }) => {
     const checked = node.attrs.checked;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleCheckedChange = (isChecked: boolean) => {
         const pos = getPos();
         if (typeof pos !== "number") return;
 
         view.dispatch(
             view.state.tr.setNodeMarkup(pos, undefined, {
                 ...node.attrs,
-                checked: e.target.checked
+                checked: isChecked
             })
         );
     };
 
     return (
-        <label contentEditable={false} className="flex items-start select-none px-1">
-            <input
-                type="checkbox"
+        <Label contentEditable={false} className="flex items-start select-none px-1 cursor-pointer">
+            <Checkbox
                 checked={checked}
-                onChange={handleChange}
-                className="mt-1 flex-shrink-0 cursor-pointer"
+                onCheckedChange={handleCheckedChange}
+                padding={false}
+                size="small"
             />
-        </label>
+        </Label>
     );
 };

package/src/editor/schema.ts

@@ -23,41 +23,65 @@ const marks: { [key: string]: MarkSpec } = {
             }
         ],
         toDOM(node) {
-            const { href, title, target } = node.attrs;
-            return ["a", { href,
-title,
-target,
-class: "text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" }, 0];
+            const {
+                href,
+                title,
+                target
+            } = node.attrs;
+            return ["a", {
+                href,
+                title,
+                target,
+                class: "text-surface-700 dark:text-surface-accent-200 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
+            }, 0];
         }
     },
     bold: {
         parseDOM: [
             { tag: "strong" },
-            { tag: "b",
-getAttrs: (node: HTMLElement | string) => typeof node !== "string" && node.style.fontWeight !== "normal" && null },
-            { style: "font-weight=400",
-clearMark: m => m.type.name === "bold" },
-            { style: "font-weight",
-getAttrs: (value: string | HTMLElement) => typeof value === "string" && /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null }
+            {
+                tag: "b",
+                getAttrs: (node: HTMLElement | string) => typeof node !== "string" && node.style.fontWeight !== "normal" && null
+            },
+            {
+                style: "font-weight=400",
+                clearMark: m => m.type.name === "bold"
+            },
+            {
+                style: "font-weight",
+                getAttrs: (value: string | HTMLElement) => typeof value === "string" && /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+            }
         ],
-        toDOM() { return ["strong", 0]; }
+        toDOM() {
+            return ["strong", 0];
+        }
     },
     italic: {
         parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
-        toDOM() { return ["em", 0]; }
+        toDOM() {
+            return ["em", 0];
+        }
     },
     strike: {
         parseDOM: [{ tag: "s" }, { tag: "del" }, { tag: "strike" }, { style: "text-decoration=line-through" }],
-        toDOM() { return ["s", 0]; }
+        toDOM() {
+            return ["s", 0];
+        }
     },
     underline: {
         parseDOM: [{ tag: "u" }, { style: "text-decoration=underline" }],
-        toDOM() { return ["u", 0]; }
+        toDOM() {
+            return ["u", 0];
+        }
     },
     code: {
         parseDOM: [{ tag: "code" }],
-        toDOM() { return ["code", { class: "rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium",
-spellcheck: "false" }, 0]; }
+        toDOM() {
+            return ["code", {
+                class: "rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium",
+                spellcheck: "false"
+            }, 0];
+        }
     },
     textStyle: {
         attrs: { color: { default: null } },
@@ -88,8 +112,10 @@ spellcheck: "false" }, 0]; }
             }
         ],
         toDOM(mark) {
-            return ["mark", mark.attrs.color ? { style: `background-color: ${mark.attrs.color}; color: inherit;`,
-"data-color": mark.attrs.color } : {}, 0];
+            return ["mark", mark.attrs.color ? {
+                style: `background-color: ${mark.attrs.color}; color: inherit;`,
+                "data-color": mark.attrs.color
+            } : {}, 0];
         }
     }
 };
@@ -102,7 +128,9 @@ const nodes: { [key: string]: NodeSpec } = {
         content: "inline*",
         group: "block",
         parseDOM: [{ tag: "p" }],
-        toDOM() { return ["p", 0]; }
+        toDOM() {
+            return ["p", 0];
+        }
     },
     text: {
         group: "inline"
@@ -112,7 +140,9 @@ const nodes: { [key: string]: NodeSpec } = {
         group: "block",
         defining: true,
         parseDOM: [{ tag: "blockquote" }],
-        toDOM() { return ["blockquote", { class: "border-l-4 border-primary" }, 0]; }
+        toDOM() {
+            return ["blockquote", { class: "border-l-4 border-primary" }, 0];
+        }
     },
     heading: {
         attrs: { level: { default: 1 } },
@@ -120,25 +150,41 @@ const nodes: { [key: string]: NodeSpec } = {
         group: "block",
         defining: true,
         parseDOM: [
-            { tag: "h1",
-attrs: { level: 1 } },
-            { tag: "h2",
-attrs: { level: 2 } },
-            { tag: "h3",
-attrs: { level: 3 } },
-            { tag: "h4",
-attrs: { level: 4 } },
-            { tag: "h5",
-attrs: { level: 5 } },
-            { tag: "h6",
-attrs: { level: 6 } }
+            {
+                tag: "h1",
+                attrs: { level: 1 }
+            },
+            {
+                tag: "h2",
+                attrs: { level: 2 }
+            },
+            {
+                tag: "h3",
+                attrs: { level: 3 }
+            },
+            {
+                tag: "h4",
+                attrs: { level: 4 }
+            },
+            {
+                tag: "h5",
+                attrs: { level: 5 }
+            },
+            {
+                tag: "h6",
+                attrs: { level: 6 }
+            }
         ],
-        toDOM(node) { return ["h" + node.attrs.level, 0]; }
+        toDOM(node) {
+            return ["h" + node.attrs.level, 0];
+        }
     },
     horizontal_rule: {
         group: "block",
         parseDOM: [{ tag: "hr" }],
-        toDOM() { return ["hr", { class: "mt-4 mb-6 border-t border-solid border-gray-200 dark:border-gray-800" }]; }
+        toDOM() {
+            return ["hr", { class: "mt-4 mb-6 border-t border-solid border-gray-200 dark:border-gray-800" }];
+        }
     },
     code_block: {
         content: "text*",
@@ -148,10 +194,14 @@ attrs: { level: 6 } }
         defining: true,
         attrs: { language: { default: null } },
         parseDOM: [
-            { tag: "pre",
-preserveWhitespace: "full" }
+            {
+                tag: "pre",
+                preserveWhitespace: "full"
+            }
         ],
-        toDOM(node) { return ["pre", { class: "rounded bg-blue-50 dark:bg-surface-700 border border-solid border-gray-200 dark:border-gray-800 p-5 font-mono font-medium text-gray-800 dark:text-gray-200" }, ["code", 0]]; }
+        toDOM(node) {
+            return ["pre", { class: "rounded bg-blue-50 dark:bg-surface-700 border border-solid border-gray-200 dark:border-gray-800 p-5 font-mono font-medium text-gray-800 dark:text-gray-200" }, ["code", 0]];
+        }
     },
     image: {
         inline: false,
@@ -176,18 +226,26 @@ preserveWhitespace: "full" }
             }
         ],
         toDOM(node) {
-            const { src, alt, title } = node.attrs;
-            return ["img", { src,
-alt,
-title,
-class: "rounded-lg max-w-full !m-0" }];
+            const {
+                src,
+                alt,
+                title
+            } = node.attrs;
+            return ["img", {
+                src,
+                alt,
+                title,
+                class: "rounded-lg max-w-full !m-0"
+            }];
         }
     },
     bullet_list: {
         content: "list_item+",
         group: "block",
         parseDOM: [{ tag: "ul" }],
-        toDOM() { return ["ul", { class: "list-disc list-outside leading-3 -mt-2" }, 0]; }
+        toDOM() {
+            return ["ul", { class: "list-disc list-outside leading-3 -mt-2" }, 0];
+        }
     },
     ordered_list: {
         content: "list_item+",
@@ -203,22 +261,30 @@ class: "rounded-lg max-w-full !m-0" }];
             }
         ],
         toDOM(node) {
-            return node.attrs.order === 1 ? ["ol", { class: "list-decimal list-outside leading-3 -mt-2" }, 0] : ["ol", { start: node.attrs.order,
-class: "list-decimal list-outside leading-3 -mt-2" }, 0];
+            return node.attrs.order === 1 ? ["ol", { class: "list-decimal list-outside leading-3 -mt-2" }, 0] : ["ol", {
+                start: node.attrs.order,
+                class: "list-decimal list-outside leading-3 -mt-2"
+            }, 0];
         }
     },
     list_item: {
         content: "paragraph block*",
         parseDOM: [{ tag: "li" }],
-        toDOM() { return ["li", { class: "leading-normal -mb-2" }, 0]; },
+        toDOM() {
+            return ["li", { class: "leading-normal -mb-2" }, 0];
+        },
         defining: true
     },
     task_list: {
         group: "block",
         content: "task_item+",
-        parseDOM: [{ tag: 'ul[data-type="taskList"]' }],
-        toDOM() { return ["ul", { "data-type": "taskList",
-class: "not-prose" }, 0]; }
+        parseDOM: [{ tag: "ul[data-type=\"taskList\"]" }],
+        toDOM() {
+            return ["ul", {
+                "data-type": "taskList",
+                class: "not-prose"
+            }, 0];
+        }
     },
     task_item: {
         content: "paragraph block*",
@@ -226,7 +292,7 @@ class: "not-prose" }, 0]; }
         attrs: { checked: { default: false } },
         parseDOM: [
             {
-                tag: 'li[data-type="taskItem"]',
+                tag: "li[data-type=\"taskItem\"]",
                 getAttrs(dom: HTMLElement | string) {
                     if (typeof dom === "string") return false;
                     return { checked: dom.getAttribute("data-checked") === "true" };
@@ -234,9 +300,11 @@ class: "not-prose" }, 0]; }
             }
         ],
         toDOM(node) {
-            return ["li", { "data-type": "taskItem",
-"data-checked": node.attrs.checked ? "true" : "false",
-class: "flex items-start my-4" }, 0];
+            return ["li", {
+                "data-type": "taskItem",
+                "data-checked": node.attrs.checked ? "true" : "false",
+                class: "flex items-start my-4"
+            }, 0];
         }
     },
     hard_break: {
@@ -244,7 +312,9 @@ class: "flex items-start my-4" }, 0];
         group: "inline",
         selectable: false,
         parseDOM: [{ tag: "br" }],
-        toDOM() { return ["br"]; }
+        toDOM() {
+            return ["br"];
+        }
     },
     ...tableNodes({
         tableGroup: "block",
@@ -252,12 +322,18 @@ class: "flex items-start my-4" }, 0];
         cellAttributes: {
             background: {
                 default: null,
-                getFromDOM(dom: HTMLElement) { return dom.style.backgroundColor || null },
-                setDOMAttr(value: any, attrs: any) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
+                getFromDOM(dom: HTMLElement) {
+                    return dom.style.backgroundColor || null
+                },
+                setDOMAttr(value: unknown, attrs: any) {
+                    if (value && typeof value === "string") attrs.style = (attrs.style || "") + `background-color: ${value};`
+                }
             }
         }
     })
 };
 
-export const schema = new Schema({ nodes,
-marks });
+export const schema = new Schema({
+    nodes,
+    marks
+});

package/src/editor/selectors/link-selector.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Button, CheckIcon, cls, focusedDisabled, iconSize, Popover, Trash2Icon } from "@rebasepro/ui";
+import { Button, CheckIcon, cls, focusedDisabled, iconSize, Popover, TextField, Trash2Icon } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 import { useProseMirrorContext } from "../hooks/useProseMirrorContext";
 import { getMarkAttributes, isMarkActive, setMark, unsetMark } from "../utils/prosemirror-utils";
@@ -48,7 +48,7 @@ export const LinkSelector = ({
 
     if (!state || !view) return null;
 
-    const handleSubmit = (e: any) => {
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         const value = inputRef.current?.value;
         if (!value) return;
@@ -87,12 +87,15 @@ export const LinkSelector = ({
                 onSubmit={handleSubmit}
                 className="flex p-1 gap-1"
             >
-                <input
-                    ref={inputRef}
+                <TextField
+                    inputRef={inputRef}
                     autoFocus={open}
                     placeholder={t("editor_paste_or_type_link")}
                     defaultValue={href}
-                    className={cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", focusedDisabled)}/>
+                    size="small"
+                    className="flex-grow text-surface-900 dark:text-white"
+                    inputClassName={cls("bg-transparent p-1 text-sm outline-none", focusedDisabled)}
+                />
 
                 {href ? (
                     <Button

package/src/editor/useProseMirror.ts

@@ -7,11 +7,11 @@ import { removeClassesFromJson } from "./utils/remove_classes";
 import { DOMParser as ProseMirrorDOMParser, DOMSerializer } from "prosemirror-model";
 
 export interface UseProseMirrorOptions {
-    content?: any;
+    content?: unknown;
     plugins?: Plugin[];
     editable?: boolean;
     onMarkdownContentChange?: (content: string) => void;
-    onJsonContentChange?: (content: any | null) => void;
+    onJsonContentChange?: (content: unknown | null) => void;
     onHtmlContentChange?: (content: string) => void;
     version?: number;
 }

package/src/editor/utils/remove_classes.ts

@@ -1,16 +1,17 @@
-export function removeClassesFromJson(jsonObj: any): any {
+export function removeClassesFromJson(jsonObj: unknown): unknown {
     // If it's an array, apply the function to each element
     if (Array.isArray(jsonObj)) {
         return jsonObj.map(item => removeClassesFromJson(item));
     } else if (typeof jsonObj === "object" && jsonObj !== null) { // If it's an object, recurse through its properties
+        const obj = jsonObj as Record<string, unknown>;
         // If the object has an `attrs` property and `class` field, delete the `class` field
-        if (jsonObj.attrs && typeof jsonObj.attrs === "object" && "class" in jsonObj.attrs) {
-            delete jsonObj.attrs.class;
+        if (obj.attrs && typeof obj.attrs === "object" && obj.attrs !== null && "class" in (obj.attrs as Record<string, unknown>)) {
+            delete (obj.attrs as Record<string, unknown>).class;
         }
 
         // Apply the function recursively to object properties
-        Object.keys(jsonObj).forEach(key => {
-            jsonObj[key] = removeClassesFromJson(jsonObj[key]);
+        Object.keys(obj).forEach(key => {
+            obj[key] = removeClassesFromJson(obj[key]);
         });
     }
     return jsonObj;