@use-kona/editor 0.1.27 → 0.1.29

package/dist/core/createEditable.js

@@ -64,6 +64,7 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                     currentBlock[0]
                 ]);
                 else {
+                    event.preventDefault();
                     selectedNodes.set([]);
                     ReactEditor.blur(editor);
                 }

package/dist/plugins/CommandsPlugin/Menu.js

@@ -196,9 +196,9 @@ const Menu = (props)=>{
                     break;
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keydown', handleKeyDown, true);
         return ()=>{
-            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keydown', handleKeyDown, true);
         };
     }, [
         actions,

package/dist/plugins/LinksPlugin/Link.js

@@ -3,6 +3,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useReadOnly, useSlateStatic } from "slate-react";
 import styles_module from "./styles.module.js";
+import { isSafeLinkUrl } from "./url.js";
 const Link = (props)=>{
     const editor = useSlateStatic();
     const { attributes, as: Component = 'span', children, element, renderHint } = props;
@@ -37,6 +38,11 @@ const Link = (props)=>{
     }, [
         isOpen
     ]);
+    if (!isSafeLinkUrl(element.url)) return /*#__PURE__*/ jsx(Component, {
+        ref: ref,
+        className: styles_module.link,
+        children: children
+    });
     const getLinkElement = ()=>element;
     const getUrl = ()=>element.url;
     const getEditor = ()=>editor;

package/dist/plugins/LinksPlugin/LinksPlugin.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import is_url from "is-url";
 import { Editor, Element, Range, Transforms } from "slate";
 import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 import { LINK_ELEMENT } from "./constants.js";
 import { Link } from "./Link.js";
+import { isSafeLinkUrl } from "./url.js";
 class LinksPlugin {
     options;
     static LINK_TYPE = LINK_ELEMENT;
@@ -13,7 +13,7 @@ class LinksPlugin {
     init(editor) {
         const { insertText } = editor;
         editor.insertText = (text)=>{
-            if (text && is_url(text)) {
+            if (text && isSafeLinkUrl(text)) {
                 const selectedText = window.getSelection()?.toString();
                 if (selectedText) Transforms.wrapNodes(editor, {
                     type: LinksPlugin.LINK_TYPE,
@@ -55,6 +55,7 @@ class LinksPlugin {
             deserialize: (element, children)=>{
                 if ('A' === element.tagName) {
                     const url = element.getAttribute('href') || '';
+                    if (!isSafeLinkUrl(url)) return children;
                     return external_slate_hyperscript_jsx('element', {
                         type: LinksPlugin.LINK_TYPE,
                         url
@@ -64,6 +65,7 @@ class LinksPlugin {
         }
     ];
     static addLink = (editor, url)=>{
+        if (!isSafeLinkUrl(url)) return;
         const { selection } = editor;
         if (!selection) return;
         const isCollapsed = selection && Range.isCollapsed(selection);

package/dist/plugins/LinksPlugin/index.js

@@ -1,2 +1,3 @@
 import { LinksPlugin } from "./LinksPlugin.js";
-export { LinksPlugin };
+import { isSafeLinkUrl } from "./url.js";
+export { LinksPlugin, isSafeLinkUrl };

package/dist/plugins/LinksPlugin/url.js

@@ -0,0 +1,13 @@
+const allowedProtocols = new Set([
+    'http:',
+    'https:',
+    'mailto:'
+]);
+const isSafeLinkUrl = (value)=>{
+    try {
+        return allowedProtocols.has(new URL(value).protocol);
+    } catch  {
+        return false;
+    }
+};
+export { isSafeLinkUrl };

package/dist/plugins/index.js

@@ -8,11 +8,11 @@ import { EmojiPlugin } from "./EmojiPlugin/index.js";
 import { FloatingMenuPlugin } from "./FloatingMenuPlugin/index.js";
 import { HeadingsPlugin } from "./HeadingsPlugin/index.js";
 import { HighlightsPlugin } from "./HighlightsPlugin/index.js";
-import { LinksPlugin } from "./LinksPlugin/index.js";
+import { LinksPlugin, isSafeLinkUrl } from "./LinksPlugin/index.js";
 import { ListsPlugin } from "./ListsPlugin/index.js";
 import { MenuPlugin } from "./MenuPlugin/index.js";
 import { NodeIdPlugin } from "./NodeIdPlugin/index.js";
 import { PlaceholderPlugin } from "./PlaceholderPlugin/index.js";
 import { ShortcutsPlugin } from "./ShortcutsPlugin/index.js";
 import { TableOfContentsPlugin } from "./TableOfContentsPlugin/index.js";
-export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin };
+export { AttachmentsPlugin, BasicFormattingPlugin, BreaksPlugin, CodeBlockPlugin, CommandsPlugin, DnDPlugin, EmojiPlugin, FloatingMenuPlugin, HeadingsPlugin, HighlightsPlugin, LinksPlugin, ListsPlugin, MenuPlugin, NodeIdPlugin, PlaceholderPlugin, ShortcutsPlugin, TableOfContentsPlugin, isSafeLinkUrl };

package/dist/src/plugins/LinksPlugin/LinksPlugin.d.ts

@@ -14,7 +14,7 @@ export declare class LinksPlugin implements IPlugin {
         type: string;
         render: (props: RenderElementProps) => import("react/jsx-runtime").JSX.Element;
         serialize: (element: any, children: any) => string | undefined;
-        deserialize: (element: HTMLElement, children: any) => import("../../../types").CustomElement | undefined;
+        deserialize: (element: HTMLElement, children: any) => any;
     }[];
     static addLink: (editor: Editor, url: string) => void;
     static removeLink: (editor: Editor) => void;

package/dist/src/plugins/LinksPlugin/index.d.ts

@@ -1,2 +1,3 @@
 export { LinksPlugin } from './LinksPlugin';
 export type { OptionsMethods } from './types';
+export { isSafeLinkUrl } from './url';

package/dist/src/plugins/LinksPlugin/url.d.ts

@@ -0,0 +1 @@
+export declare const isSafeLinkUrl: (value: string) => boolean;

package/dist/src/plugins/index.d.ts

@@ -8,7 +8,7 @@ export { EmojiPlugin } from './EmojiPlugin';
 export { type Commands, FloatingMenuPlugin } from './FloatingMenuPlugin';
 export { HeadingsPlugin } from './HeadingsPlugin';
 export { HighlightsPlugin } from './HighlightsPlugin';
-export { LinksPlugin, type OptionsMethods } from './LinksPlugin';
+export { isSafeLinkUrl, LinksPlugin, type OptionsMethods, } from './LinksPlugin';
 export { ListsPlugin } from './ListsPlugin';
 export { MenuPlugin } from './MenuPlugin';
 export { NodeIdPlugin } from './NodeIdPlugin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
@@ -35,7 +35,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/escape-html": "^1.0.4",
-    "@types/is-url": "^1.2.32",
     "@types/react": "^19.1.8",
     "@types/react-dom": "18",
     "jsdom": "^26.1.0",
@@ -70,7 +69,6 @@
     "clsx": "^2.1.1",
     "escape-html": "^1.0.3",
     "is-hotkey": "^0.2.0",
-    "is-url": "^1.2.4",
     "nanostores": "^1.0.1",
     "prismjs": "^1.30.0"
   }

package/src/core/createEditable.tsx

@@ -118,6 +118,7 @@ export const createEditable =
         if ($selectedNodes.length === 0) {
           selectedNodes.set([currentBlock[0]]);
         } else {
+          event.preventDefault();
           selectedNodes.set([]);
           ReactEditor.blur(editor);
         }

package/src/plugins/CommandsPlugin/Menu.spec.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import type { Editor } from 'slate';
+import { describe, expect, it, vi } from 'vitest';
+import { KonaEditor } from '../../editor';
+import type { IPlugin } from '../../types';
+import { CommandsPlugin } from './CommandsPlugin';
+
+Object.assign(globalThis, { React });
+
+const commands = [
+  {
+    name: 'one',
+    commandName: 'one',
+    title: 'One',
+    icon: null,
+    action: () => {},
+  },
+  {
+    name: 'two',
+    commandName: 'two',
+    title: 'Two',
+    icon: null,
+    action: () => {},
+  },
+];
+
+describe('CommandsPlugin keyboard navigation', () => {
+  it('keeps the slash menu open when ArrowDown would select the void block below', async () => {
+    HTMLElement.prototype.scrollIntoView = vi.fn();
+    let editor: Editor;
+    const onKeyDown = vi.fn();
+    const plugin = new CommandsPlugin({
+      commands,
+      renderMenu: (children) => <div>{children}</div>,
+    });
+    const voidPlugin: IPlugin = {
+      init(value) {
+        editor = value;
+        return value;
+      },
+      blocks: [
+        {
+          type: 'void',
+          isVoid: true,
+          render: (props) => <div {...props.attributes}>{props.children}</div>,
+        },
+      ],
+      handlers: { onKeyDown },
+    };
+
+    render(
+      <KonaEditor
+        initialValue={[
+          { type: 'paragraph', children: [{ text: '' }] },
+          { type: 'void', children: [{ text: '' }] },
+        ]}
+        plugins={[plugin, voidPlugin]}
+        onChange={() => {}}
+      />,
+    );
+
+    act(() => editor.insertText('/'));
+    await screen.findByRole('button', { name: 'One' });
+    const before = screen
+      .getAllByRole('button')
+      .map((button) => button.className);
+
+    fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown' });
+
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument(),
+    );
+    expect(
+      screen.getAllByRole('button').map((button) => button.className),
+    ).toEqual([before[1], before[0]]);
+    expect(onKeyDown).not.toHaveBeenCalled();
+  });
+});

package/src/plugins/CommandsPlugin/Menu.tsx

@@ -260,10 +260,10 @@ export const Menu = (props: Props) => {
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keydown', handleKeyDown, true);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keydown', handleKeyDown, true);
     };
   }, [
     actions,

package/src/plugins/LinksPlugin/Link.tsx

@@ -8,6 +8,7 @@ import {
 } from 'slate-react';
 import styles from './styles.module.css';
 import type { LinkElement, Options } from './types';
+import { isSafeLinkUrl } from './url';
 
 type Props = {
   as?: React.ElementType;
@@ -53,6 +54,14 @@ export const Link = (props: Props) => {
     }
   }, [isOpen]);
 
+  if (!isSafeLinkUrl(element.url)) {
+    return (
+      <Component ref={ref} className={styles.link}>
+        {children}
+      </Component>
+    );
+  }
+
   const getLinkElement = () => element;
 
   const getUrl = () => element.url;

package/src/plugins/LinksPlugin/LinksPlugin.spec.tsx

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+
+import { render } from '@testing-library/react';
+import { createEditor as createSlateEditor, Transforms } from 'slate';
+import { describe, expect, it, vi } from 'vitest';
+import { createEditor } from '../../core/createEditor';
+import { deserialize } from '../../core/deserialize';
+import { isSafeLinkUrl } from '../../index';
+import { Link } from './Link';
+import { LinksPlugin } from './LinksPlugin';
+
+vi.mock('slate-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('slate-react')>();
+
+  return {
+    ...actual,
+    useReadOnly: () => true,
+    useSlateStatic: () => createSlateEditor(),
+  };
+});
+
+const createEditorWithLinks = () => {
+  const plugin = new LinksPlugin({});
+  const editor = createEditor([plugin])();
+  editor.children = [{ type: 'paragraph', children: [{ text: '' }] }];
+  Transforms.select(editor, { path: [0, 0], offset: 0 });
+
+  return { editor, plugin };
+};
+
+describe('LinksPlugin', () => {
+  it.each([
+    'https://use-kona.com',
+    'http://use-kona.com',
+    'mailto:hello@use-kona.com',
+  ])('accepts %s', (url) => {
+    expect(isSafeLinkUrl(url)).toBe(true);
+  });
+
+  it('rejects javascript URLs in addLink', () => {
+    const { editor } = createEditorWithLinks();
+
+    LinksPlugin.addLink(editor, 'javascript:alert(1)');
+
+    expect(editor.children).toEqual([
+      { type: 'paragraph', children: [{ text: '' }] },
+    ]);
+  });
+
+  it('rejects javascript URLs typed into the editor', () => {
+    const { editor } = createEditorWithLinks();
+
+    editor.insertText('javascript:alert(1)');
+
+    expect(editor.children).toEqual([
+      { type: 'paragraph', children: [{ text: 'javascript:alert(1)' }] },
+    ]);
+  });
+
+  it('deserializes unsafe anchors as their non-link children', () => {
+    const { plugin } = createEditorWithLinks();
+    const document = new DOMParser().parseFromString(
+      '<a href="javascript:alert(1)">legacy link</a>',
+      'text/html',
+    );
+
+    expect(deserialize([plugin])(document.body)).toEqual({
+      type: 'paragraph',
+      children: [{ text: 'legacy link' }],
+    });
+  });
+
+  it('renders legacy unsafe links without an anchor', () => {
+    const { container } = render(
+      <Link
+        attributes={{ 'data-slate-node': 'element' }}
+        element={{
+          type: LinksPlugin.LINK_TYPE,
+          url: 'javascript:alert(1)',
+          children: [{ text: 'legacy link' }],
+        }}
+        renderHint={() => null}
+      >
+        legacy link
+      </Link>,
+    );
+
+    expect(container.querySelector('a')).toBeNull();
+    expect(container.textContent).toBe('legacy link');
+  });
+});

package/src/plugins/LinksPlugin/LinksPlugin.tsx

@@ -1,4 +1,3 @@
-import isUrl from 'is-url';
 import { Editor, Element, Range, Transforms } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
@@ -6,6 +5,7 @@ import type { IPlugin } from '../../types';
 import { LINK_ELEMENT } from './constants';
 import { Link } from './Link';
 import type { LinkElement, Options } from './types';
+import { isSafeLinkUrl } from './url';
 
 export class LinksPlugin implements IPlugin {
   static LINK_TYPE = LINK_ELEMENT;
@@ -16,7 +16,7 @@ export class LinksPlugin implements IPlugin {
     const { insertText } = editor;
 
     editor.insertText = (text: string) => {
-      if (text && isUrl(text)) {
+      if (text && isSafeLinkUrl(text)) {
         const selectedText = window.getSelection()?.toString();
         if (selectedText) {
           Transforms.wrapNodes(editor, {
@@ -66,6 +66,10 @@ export class LinksPlugin implements IPlugin {
       deserialize: (element: HTMLElement, children) => {
         if (element.tagName === 'A') {
           const url = element.getAttribute('href') || '';
+          if (!isSafeLinkUrl(url)) {
+            return children;
+          }
+
           return jsx(
             'element',
             {
@@ -80,6 +84,10 @@ export class LinksPlugin implements IPlugin {
   ];
 
   static addLink = (editor: Editor, url: string) => {
+    if (!isSafeLinkUrl(url)) {
+      return;
+    }
+
     const { selection } = editor;
 
     if (!selection) {

package/src/plugins/LinksPlugin/index.ts

@@ -1,2 +1,3 @@
 export { LinksPlugin } from './LinksPlugin';
 export type { OptionsMethods } from './types';
+export { isSafeLinkUrl } from './url';

package/src/plugins/LinksPlugin/url.ts

@@ -0,0 +1,9 @@
+const allowedProtocols = new Set(['http:', 'https:', 'mailto:']);
+
+export const isSafeLinkUrl = (value: string): boolean => {
+  try {
+    return allowedProtocols.has(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+};

package/src/plugins/index.ts

@@ -13,7 +13,11 @@ export { EmojiPlugin } from './EmojiPlugin';
 export { type Commands, FloatingMenuPlugin } from './FloatingMenuPlugin';
 export { HeadingsPlugin } from './HeadingsPlugin';
 export { HighlightsPlugin } from './HighlightsPlugin';
-export { LinksPlugin, type OptionsMethods } from './LinksPlugin';
+export {
+  isSafeLinkUrl,
+  LinksPlugin,
+  type OptionsMethods,
+} from './LinksPlugin';
 export { ListsPlugin } from './ListsPlugin';
 export { MenuPlugin } from './MenuPlugin';
 export { NodeIdPlugin } from './NodeIdPlugin';