@use-kona/editor 0.1.2 → 0.1.4

package/src/plugins/CodeBlockPlugin/CodeBlockPlugin.tsx

@@ -249,57 +249,60 @@ export class CodeBlockPlugin implements IPlugin {
   }
 
   static toggleCodeBlock = (editor: Editor) => {
-    Editor.withoutNormalizing(editor, () => {
-      const node = Editor.above<CustomElement>(editor, {
+    if (!editor.selection) {
+      return;
+    }
+
+    const node = Editor.above<CustomElement>(editor, {
+      match: (n) =>
+        !Editor.isEditor(n) &&
+        (n as CustomElement).type === CodeBlockPlugin.CODE_ELEMENT,
+      mode: 'highest',
+    });
+
+    if (node) {
+      Transforms.setNodes(
+        editor,
+        { type: 'paragraph' },
+        {
+          at: node[1],
+          match: (n) =>
+            (n as CustomElement).type === CodeBlockPlugin.CODE_LINE_ELEMENT,
+          mode: 'lowest',
+        },
+      );
+      Transforms.unwrapNodes(editor, {
+        at: node[1],
         match: (n) =>
-          !Editor.isEditor(n) &&
           (n as CustomElement).type === CodeBlockPlugin.CODE_ELEMENT,
-        mode: 'highest',
+        split: true,
       });
-
-      if (node) {
-        Transforms.setNodes(
-          editor,
-          { type: 'paragraph' },
-          {
-            at: node[1],
-            match: (n) =>
-              (n as CustomElement).type === CodeBlockPlugin.CODE_LINE_ELEMENT,
-            mode: 'lowest',
-          },
-        );
-        Transforms.unwrapNodes(editor, {
-          at: node[1],
+    } else {
+      Transforms.setNodes(
+        editor,
+        {
+          type: CodeBlockPlugin.CODE_LINE_ELEMENT,
+          children: [{ text: '' }],
+        },
+        {
+          mode: 'lowest',
+        },
+      );
+
+      Transforms.wrapNodes(
+        editor,
+        {
+          type: CodeBlockPlugin.CODE_ELEMENT,
+          language: 'javascript',
+          children: [],
+        } as CodeElement,
+        {
+          mode: 'highest',
           match: (n) =>
-            (n as CustomElement).type === CodeBlockPlugin.CODE_ELEMENT,
-          split: true,
-        });
-      } else {
-        Transforms.setNodes(
-          editor,
-          {
-            type: CodeBlockPlugin.CODE_LINE_ELEMENT,
-            children: [{ text: '' }],
-          },
-          {
-            match: (n) =>
-              Editor.isBlock(editor, n as CustomElement) &&
-              (n as CustomElement).type === 'paragraph',
-          },
-        );
-        Transforms.wrapNodes(
-          editor,
-          {
-            type: CodeBlockPlugin.CODE_ELEMENT,
-            language: 'javascript',
-            children: [],
-          } as CodeElement,
-          {
-            match: (n) =>
-              (n as CustomElement).type === CodeBlockPlugin.CODE_LINE_ELEMENT,
-          },
-        );
-      }
-    });
+            (n as CustomElement).type === CodeBlockPlugin.CODE_LINE_ELEMENT,
+          at: editor.selection.focus,
+        },
+      );
+    }
   };
 }

package/src/plugins/CodeBlockPlugin/index.ts

@@ -1 +1,2 @@
 export { CodeBlockPlugin } from './CodeBlockPlugin';
+export type { CodeElement } from './types';

package/src/plugins/EmojiPlugin/EmojiPlugin.tsx

@@ -0,0 +1,116 @@
+import { useStore } from '@nanostores/react';
+import { type MapStore, map } from 'nanostores';
+import type { ReactNode } from 'react';
+import { Editor, Node, Transforms } from 'slate';
+import type { CustomElement } from '../../../types';
+import type { IPlugin } from '../../types';
+import { Menu } from './Menu';
+import styles from './styles.module.css';
+import type { EmojiElement } from './types';
+
+type Options = {
+  onSearch: (query: string) => void;
+  renderMenu: (actions: {
+    insertEmoji: (emoji: string, query: string, editor: Editor) => void;
+  }) => ReactNode;
+  renderEmoji: (emoji: string) => ReactNode;
+  ignoreNodes?: string[];
+};
+
+export class EmojiPlugin implements IPlugin {
+  options: Options;
+  $store: MapStore<{ isOpen: boolean }>;
+
+  constructor(options: Options) {
+    this.options = options;
+    this.$store = map({
+      isOpen: false,
+    });
+  }
+
+  blocks = [
+    {
+      isInline: true,
+      isVoid: true,
+      type: 'emoji',
+      render: (props) => {
+        const children = this.options.renderEmoji(props.element.emoji);
+
+        return (
+          <span {...props.attributes} className={styles.emojiRoot}>
+            {children}
+          </span>
+        );
+      },
+    },
+  ];
+
+  init(editor) {
+    const { insertText, onChange } = editor;
+
+    editor.insertText = (text: string) => {
+      if (text === ':') {
+        this.$store.setKey('isOpen', true);
+      }
+
+      insertText(text);
+    };
+
+    editor.onChange = (...args) => {
+      if (this.$store.get().isOpen) {
+        const query = /:([^:]*$)/.exec(getCurrentText(editor));
+        if (query?.[0]) {
+          this.options.onSearch(query[1]);
+        } else {
+          this.$store.setKey('isOpen', false);
+        }
+      }
+
+      return onChange(...args);
+    };
+
+    return editor;
+  }
+
+  ui() {
+    const { isOpen } = useStore(this.$store);
+
+    if (!isOpen) {
+      return null;
+    }
+
+    return (
+      <Menu isOpen={isOpen}>
+        {this.options.renderMenu({
+          insertEmoji: (emoji, query, editor) => {
+            this.$store.setKey('isOpen', false);
+            Transforms.delete(editor, {
+              at: editor.selection?.focus,
+              distance: query.length + 1,
+              reverse: true,
+              unit: 'character',
+            });
+            Transforms.insertNodes(editor, {
+              type: 'emoji',
+              emoji,
+              children: [{ text: '' }],
+            } as EmojiElement);
+            Transforms.move(editor);
+          },
+        })}
+      </Menu>
+    );
+  }
+}
+
+const getCurrentText = (editor: Editor) => {
+  const entry = Editor.above(editor, {
+    match: (n) => Editor.isBlock(editor, n as CustomElement),
+  });
+
+  if (entry) {
+    return Node.string(entry[0]);
+  } else {
+    return '';
+  }
+};

package/src/plugins/EmojiPlugin/Menu.tsx

@@ -0,0 +1,74 @@
+import {
+  type CSSProperties,
+  type ReactNode,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useFocused, useSlateSelection } from 'slate-react';
+import styles from './styles.module.css';
+
+type Props = {
+  isOpen: boolean;
+  children: ReactNode;
+};
+
+export const Menu = (props: Props) => {
+  const { isOpen, children } = props;
+
+  const isFocused = useFocused();
+  const selection = useSlateSelection();
+
+  const [style, setStyle] = useState<CSSProperties | undefined>({});
+
+  useLayoutEffect(() => {
+    if (!selection || !isFocused) {
+      setStyle(undefined);
+      return;
+    }
+
+    setTimeout(() => {
+      const domSelection = window.getSelection();
+      const domRange = domSelection?.getRangeAt(0);
+      const rect = domRange?.getBoundingClientRect();
+
+      if (isOpen) {
+        setStyle({
+          opacity: 1,
+          transform: 'scale(1)',
+          top: `${(rect?.top || 0) + window.scrollY + (rect?.height || 0) + 2}px`,
+          left: `${(rect?.left || 0) + window.scrollX + (rect?.width || 0) / 2}px`,
+        });
+      } else {
+        setStyle({
+          opacity: 0,
+          transform: 'scale(0.9)',
+        });
+      }
+    }, 0);
+  }, [selection, isFocused, isOpen]);
+
+  const handleMenuLayout = (element: HTMLDivElement) => {
+    if (element) {
+      const { height, top } = element.getBoundingClientRect();
+
+      const domSelection = window.getSelection();
+      const domRange = domSelection?.getRangeAt(0);
+      const rect = domRange?.getBoundingClientRect();
+
+      if (top + height >= window.innerHeight) {
+        setStyle((style) => ({
+          ...style,
+          top: `${top - height - (rect?.height ?? 22)}px`,
+        }));
+      }
+    }
+  };
+
+  return createPortal(
+    <div ref={handleMenuLayout} style={style} className={styles.root}>
+      {children}
+    </div>,
+    document.body,
+  );
+};

package/src/plugins/EmojiPlugin/index.ts

@@ -0,0 +1 @@
+export { EmojiPlugin } from './EmojiPlugin';

package/src/plugins/EmojiPlugin/styles.module.css

@@ -0,0 +1,10 @@
+.root {
+  position: absolute;
+  z-index: 2;
+}
+
+.emoji-root {
+  vertical-align: text-bottom;
+  height: 24px;
+  display: inline-flex;
+}

package/src/plugins/EmojiPlugin/types.ts

@@ -0,0 +1,5 @@
+export type EmojiElement = {
+  type: 'emoji';
+  emoji: string;
+  children: [{ text: string }];
+};

package/src/plugins/FloatingMenuPlugin/FloatingMenu.tsx

@@ -117,28 +117,19 @@ export const FloatingMenu = (props: Props) => {
   }
 
   return createPortal(
-    <>
-      <div
-        onMouseDown={() => {
-          setStyle(undefined);
-        }}
-      >
-        {options.renderBackdrop?.({ onClose, onUpdate: handleUpdate })}
-      </div>
-      <div
-        ref={ref}
-        style={{
-          ...style,
-          display: 'block',
-        }}
-        className={styles.root}
-        onMouseDown={(event) => {
-          event.preventDefault();
-        }}
-      >
-        {options.renderMenu(editor, { onClose, onUpdate: handleUpdate })}
-      </div>
-    </>,
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        display: 'block',
+      }}
+      className={styles.root}
+      onMouseDown={(event) => {
+        event.preventDefault();
+      }}
+    >
+      {options.renderMenu(editor, { onClose, onUpdate: handleUpdate })}
+    </div>,
     document.body,
   );
 };

package/src/plugins/FloatingMenuPlugin/types.ts

@@ -4,7 +4,10 @@ import type { Editor } from 'slate';
 export type Options = {
   ignoreNodes?: string[];
   renderMenu: (editor: Editor, commands: Commands) => ReactNode;
-  renderBackdrop: (commands: {
+  /**
+   * @deprecated
+   */
+  renderBackdrop?: (commands: {
     onClose: () => void;
     onUpdate: () => void;
   }) => ReactNode;

package/src/plugins/HighlightsPlugin/HighlightsPlugin.tsx

@@ -27,6 +27,10 @@ export class HighlightsPlugin implements IPlugin {
     return marks ? marks.highlight === color : false;
   }
 
+  static removeHighlight(editor: Editor) {
+    Editor.removeMark(editor, 'highlight');
+  }
+
   leafs = [
     {
       render: (props: RenderLeafProps) => {

package/src/plugins/ListsPlugin/styles.module.css

@@ -1,5 +1,9 @@
 .list {
   padding: 0;
+
+  & & {
+    margin-left: 32px;
+  }
 }
 
 .listItem {

package/src/plugins/PlaceholderPlugin/PlaceholderPlugin.tsx

@@ -1,4 +1,4 @@
-import { Editor, Node } from 'slate';
+import { type Descendant, Editor, type Element, Node } from 'slate';
 import {
   type RenderLeafProps,
   useFocused,
@@ -26,7 +26,9 @@ export class PlaceholderPlugin implements IPlugin {
         const isFocused = useFocused();
 
         const entity = Editor.above<CustomElement>(editor, {
+          at: editor.selection?.focus,
           mode: 'lowest',
+          voids: true,
         });
 
         const firstEntity = Editor.above(editor, {
@@ -38,7 +40,15 @@ export class PlaceholderPlugin implements IPlugin {
           return props.children;
         }
 
-        const isEmpty = !entity || Node.string(entity[0]) === '';
+        const hasVoids = entity?.[0].children.some((n: Descendant) => {
+          return Editor.isVoid(editor, n as Element);
+        });
+
+        const isEmpty =
+          (!entity || Node.string(entity[0]) === '') &&
+          !hasVoids &&
+          !Editor.isVoid(editor, entity?.[0] as Element);
+
         const isEditorEmpty =
           !firstEntity ||
           (Node.string(firstEntity[0]) === '' && editor.children.length <= 1);
@@ -50,7 +60,7 @@ export class PlaceholderPlugin implements IPlugin {
           <>
             <span {...props.attributes}>
               <span
-                className={isVisible ? styles.placeholder : undefined}
+                className={isVisible ? styles.placeholder : styles.hidden}
                 data-placeholder={
                   isFocused ? this.options.focused : this.options.unfocused
                 }

package/src/plugins/PlaceholderPlugin/styles.module.css

@@ -1,5 +1,5 @@
-.absolute {
-  /*position: absolute;*/
+.hidden.placeholder {
+  display: none;
 }
 
 .placeholder {

package/src/plugins/index.ts

@@ -1,9 +1,10 @@
 export { AttachmentsPlugin } from './AttachmentsPlugin';
 export { BasicFormattingPlugin } from './BasicFormattingPlugin';
 export { BreaksPlugin } from './BreaksPlugin';
-export { CodeBlockPlugin } from './CodeBlockPlugin';
+export { CodeBlockPlugin, type CodeElement } from './CodeBlockPlugin';
 export { type Command, CommandsPlugin } from './CommandsPlugin';
 export { DnDPlugin } from './DnDPlugin';
+export { EmojiPlugin } from './EmojiPlugin';
 export { type Commands, FloatingMenuPlugin } from './FloatingMenuPlugin';
 export { HeadingsPlugin } from './HeadingsPlugin';
 export { HighlightsPlugin } from './HighlightsPlugin';

package/dist/examples/Backdrop.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    onClose: () => void;
-};
-export declare const Backdrop: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/examples/Backdrop.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useStore } from "@nanostores/react";
-import Backdrop_module from "./Backdrop.module.js";
-import { $store } from "./store.js";
-const Backdrop = (props)=>{
-    const { isFloatingMenuOpen } = useStore($store);
-    const { onClose } = props;
-    return isFloatingMenuOpen ? /*#__PURE__*/ jsx("div", {
-        className: Backdrop_module.root,
-        onClick: onClose
-    }) : null;
-};
-export { Backdrop };

package/dist/examples/Backdrop.module.js

@@ -1,5 +0,0 @@
-import "./Backdrop_module.css";
-const Backdrop_module = {
-    root: "root-f5Zwn7"
-};
-export { Backdrop_module as default };

package/dist/examples/Backdrop_module.css

@@ -1,6 +0,0 @@
-.root-f5Zwn7 {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-}
-

package/dist/examples/CodeBlock.d.ts

@@ -1,12 +0,0 @@
-import { type ReactNode } from 'react';
-import type { CustomElement } from '../../types';
-type Props = {
-    value: string;
-    onChange: (value: string) => void;
-    params: {
-        element: CustomElement;
-        Content: () => ReactNode;
-    };
-};
-export declare const CodeBlock: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/examples/CodeBlock.js

@@ -1,163 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { Node } from "slate";
-import CodeBlock_module from "./CodeBlock.module.js";
-import { CheckIcon } from "./icons/check.js";
-import { CopyIcon } from "./icons/copy.js";
-import { Button } from "./ui/Button/index.js";
-import { Dropdown } from "./ui/Dropdown/index.js";
-import { Menu } from "./ui/Menu/index.js";
-const languages = [
-    {
-        value: "javascript",
-        label: 'JavaScript'
-    },
-    {
-        value: "typescript",
-        label: 'TypeScript'
-    },
-    {
-        value: 'jsx',
-        label: 'JSX'
-    },
-    {
-        value: 'tsx',
-        label: 'TSX'
-    },
-    {
-        value: 'html',
-        label: 'HTML'
-    },
-    {
-        value: 'css',
-        label: 'CSS'
-    },
-    {
-        value: 'json',
-        label: 'JSON'
-    },
-    {
-        value: 'python',
-        label: 'Python'
-    },
-    {
-        value: 'java',
-        label: 'Java'
-    },
-    {
-        value: 'c',
-        label: 'C'
-    },
-    {
-        value: 'cpp',
-        label: 'C++'
-    },
-    {
-        value: 'csharp',
-        label: 'C#'
-    },
-    {
-        value: 'go',
-        label: 'Go'
-    },
-    {
-        value: 'rust',
-        label: 'Rust'
-    },
-    {
-        value: 'ruby',
-        label: 'Ruby'
-    },
-    {
-        value: 'php',
-        label: 'PHP'
-    },
-    {
-        value: 'bash',
-        label: 'Bash'
-    },
-    {
-        value: 'sql',
-        label: 'SQL'
-    },
-    {
-        value: 'markdown',
-        label: 'Markdown'
-    },
-    {
-        value: 'yaml',
-        label: 'YAML'
-    },
-    {
-        value: 'plaintext',
-        label: 'Plain Text'
-    }
-];
-const CodeBlock = (props)=>{
-    const { value: language, onChange, params: { element, Content } } = props;
-    const handleCopyClick = ()=>{
-        const text = Array.from(Node.texts(element)).map((nodeEntry)=>nodeEntry[0].text).join('\n');
-        navigator.clipboard.writeText(text);
-    };
-    const menuConfig = useMemo(()=>({
-            items: languages.map(({ label, value })=>({
-                    render: ()=>/*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx(Menu.Icon, {
-                                    children: value === language && /*#__PURE__*/ jsx(CheckIcon, {
-                                        size: 16
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Menu.Title, {
-                                    children: label
-                                })
-                            ]
-                        }),
-                    onSelect: ()=>{
-                        onChange(value);
-                    }
-                }))
-        }), [
-        language
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: CodeBlock_module.root,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: CodeBlock_module.menu,
-                children: [
-                    /*#__PURE__*/ jsx(Dropdown, {
-                        config: menuConfig,
-                        Menu: /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("div", {
-                                ...props,
-                                ref: ref,
-                                className: [
-                                    CodeBlock_module.customMenu,
-                                    props.className
-                                ].join(' ')
-                            })),
-                        children: ({ ref, onClick })=>/*#__PURE__*/ jsx(Button, {
-                                ref: ref,
-                                size: "sm",
-                                onClick: onClick,
-                                children: languages.find((l)=>l.value === language)?.label || 'Select language'
-                            })
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        size: "sm",
-                        type: "button",
-                        onClick: handleCopyClick,
-                        children: /*#__PURE__*/ jsx(CopyIcon, {
-                            size: 16
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: CodeBlock_module.content,
-                children: /*#__PURE__*/ jsx(Content, {})
-            })
-        ]
-    });
-};
-export { CodeBlock };