@use-kona/editor 0.1.0-rc.0

package/src/examples/ui/Menu/SafeSpace.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+
+type Props = {
+  debug?: boolean;
+  rect?: DOMRect;
+};
+
+export const SafeSpace = (props: Props) => {
+  const { rect, debug } = props;
+
+  const { x = 0, y = 0, height: h = 0, width: w = 0 } = rect || {};
+
+  const [mouseX, mouseY] = useMousePosition();
+
+  const isReversed = mouseX > x + w;
+  const width = isReversed ? mouseX - x - w : x - mouseX;
+  const height = h;
+
+  const style = {
+    width,
+    height: h,
+    top: y,
+    left: isReversed ? x + w : mouseX,
+  };
+
+  const points = isReversed
+    ? `0,0 ${width + 10},${mouseY - y} 0,${height}`
+    : `0,${mouseY - y} ${width},0 ${width},${height}`;
+
+  return (
+    <svg
+      style={{
+        ...style,
+        pointerEvents: 'none',
+        zIndex: 20,
+        position: 'fixed',
+      }}
+    >
+      {/* Safe Area */}
+      <polygon
+        points={points}
+        fill={debug ? 'rgba(0,0,0,0.25)' : 'transparent'}
+        pointerEvents="all"
+      />
+    </svg>
+  );
+};
+
+const useMousePosition = () => {
+  const [mousePosition, setMousePosition] = useState([0, 0]);
+
+  useEffect(() => {
+    const updateMousePosition = (ev: MouseEvent) => {
+      setMousePosition([ev.clientX, ev.clientY]);
+    };
+
+    const throttledUpdateMousePosition = throttle(updateMousePosition, 500);
+
+    document.addEventListener('mousemove', updateMousePosition, {
+      once: true,
+    });
+    document.addEventListener('mousemove', throttledUpdateMousePosition);
+
+    return () => {
+      document.removeEventListener('mousemove', updateMousePosition);
+      document.removeEventListener('mousemove', throttledUpdateMousePosition);
+    };
+  }, []);
+
+  return mousePosition;
+};
+
+function throttle(callback: (...args: any[]) => void, delay: number) {
+  let previousCall = Date.now();
+
+  return function (this: any, ...args: any[]) {
+    const time = Date.now();
+
+    if (time - previousCall >= delay) {
+      previousCall = time;
+      callback.apply(this, args);
+    }
+  };
+}

package/src/examples/ui/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuConfig, MenuItem } from './types';

package/src/examples/ui/Menu/styles.module.css

@@ -0,0 +1,143 @@
+.delimiter {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--kona-editor-border-color);
+  width: 100%;
+  height: 1px;
+  margin: 0;
+}
+
+/* MenuItem styles */
+.menuItemRoot {
+  list-style: none;
+  cursor: pointer;
+  padding: 0 4px;
+  margin: 0;
+  border-radius: 4px;
+}
+
+.menuItemRootNonSelectable {
+  cursor: default;
+}
+
+.menuItemContent {
+  border-radius: 4px;
+  padding: 8px 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  user-select: none;
+  color: var(--kona-editor-text-color);
+  background-color: transparent;
+}
+
+.menuItemContentSelected {
+  color: #0066cc;
+  background-color: #e6f0ff;
+}
+
+.menuItemContentDanger {
+  color: #cc0000;
+}
+
+/* MenuIcon styles */
+.menuIcon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+/* MenuTitle styles */
+.menuTitle {
+  flex-grow: 1;
+  min-width: 70px;
+  color: inherit;
+}
+
+/* MenuHotkey styles */
+.menuHotkey {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+/* Menu styles */
+.menu {
+  position: absolute;
+  z-index: 13;
+  margin: 0;
+  padding: 4px 0;
+  background-color: var(--kona-editor-background-color);
+  border: 1px solid var(--kona-editor-border-color);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.menuVisible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menuBody {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.menuScrollable {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+}
+
+.menuScrollable::-webkit-scrollbar {
+  background: #f5f5f5;
+  width: 6px;
+  border-radius: 8px;
+}
+
+.menuScrollable::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 8px;
+}
+
+.menuBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background-color: rgba(0, 0, 0, 0.025);
+}
+
+.menuEnterAnimation {
+  animation: menuEnter 0.2s ease-in forwards;
+}
+
+@keyframes menuEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes menuExit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/src/examples/ui/Menu/types.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export type MenuConfig = {
+  items?: MenuItem[];
+  header?: () => ReactNode;
+  footer?: () => ReactNode;
+  onOpen?: () => void;
+  onFocus?: () => void;
+}
+
+export type MenuItem = {
+  render: () => ReactNode;
+  selectable?: boolean;
+  autoClose?: boolean;
+  config?: MenuConfig;
+  danger?: boolean;
+  onSelect?: () => void;
+}

package/src/examples/ui/useMenuPosition.ts

@@ -0,0 +1,72 @@
+import { useCallback, useState } from 'react';
+
+export type Coords = [number, number];
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+class Context {
+  private readonly p: Point;
+  private rect: DOMRect;
+
+  constructor(p: Point, rect: DOMRect) {
+    this.p = { x: p.x, y: p.y };
+    this.rect = rect;
+  }
+
+  get point() {
+    return this.p;
+  }
+
+  helpers = {
+    isWithinWindow: (): [boolean, boolean] => {
+      const left = this.p.x + this.rect.width;
+
+      return [
+        left < document.documentElement.clientWidth,
+        this.p.y + this.rect.height < document.documentElement.clientHeight,
+      ];
+    },
+  };
+
+  flip = ([horizontal, vertical]: [boolean, boolean]) => {
+    if (horizontal) {
+      this.p.x -= this.rect.width;
+    }
+    if (vertical) {
+      this.p.y -= this.rect.height;
+    }
+
+    return this;
+  };
+
+  move = (x: number, y: number) => {
+    this.p.x += x;
+    this.p.y += y;
+
+    return this;
+  };
+}
+
+export const useMenuPosition = (point: Point, transform: (context: Context) => Point) => {
+  const [coords, setCoords] = useState<Point>(point);
+
+  const ref = useCallback(
+    (element: HTMLElement) => {
+      if (!element) {
+        return;
+      }
+
+      const rect = element.getBoundingClientRect();
+      const newCoords = transform(new Context(point, rect));
+      if (coords.x !== newCoords.x || coords.y !== newCoords.y) {
+        setCoords(newCoords);
+      }
+    },
+    [point.x, point.y],
+  );
+
+  return [ref, coords] as const;
+};

package/src/examples/ui/useMergeRefs.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+/**
+ * Merges multiple React refs into a single ref callback.
+ *
+ * @template T The type of the ref value
+ * @param {React.Ref<T>[]} refs Array of refs to merge (can be both callback refs and object refs)
+ * @returns {React.RefCallback<T> | null} A merged ref callback or null if all input refs are null
+ *
+ * @example
+ * function Component() {
+ *   const firstRef = useRef<HTMLDivElement>(null)
+ *   const secondRef = useRef<HTMLDivElement>(null)
+ *   const forwardedRef = useForwardedRef<HTMLDivElement>(null)
+ *
+ *   const mergedRef = useMergeRefs([firstRef, secondRef, forwardedRef])
+ *
+ *   return (
+ *     <div ref={mergedRef}>
+ *       This div will be referenced by all three refs
+ *     </div>
+ *   )
+ * }
+ */
+export const useMergeRefs = <T>(refs: React.Ref<T>[]) =>
+  useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (refValue: T) => {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(refValue);
+        } else if (ref != null) {
+          (ref as React.MutableRefObject<T | null>).current = refValue;
+        }
+      });
+    };
+  }, []);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './editor';
+export { ExampleEditor } from './examples/Editor';

package/src/plugins/AttachmentsPlugin/AttachmentsPlugin.tsx

@@ -0,0 +1,41 @@
+import type { Editor } from 'slate';
+import type { RenderElementProps } from 'slate-react';
+import type { IPlugin } from '../../types';
+import type { Options } from './types';
+
+export class AttachmentsPlugin implements IPlugin {
+  constructor(private options: Options) {}
+
+  static ATTACHMENT_ELEMENT = 'attach';
+
+  handlers = {
+    onPaste: (event: ClipboardEvent, editor: Editor) => {
+      const items = Array.from(event.clipboardData?.items || []);
+      for (const item of items) {
+        if (item?.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) {
+            this.options.onPaste?.(editor, file);
+          }
+        }
+      }
+    },
+  };
+
+  blocks = [
+    {
+      type: AttachmentsPlugin.ATTACHMENT_ELEMENT,
+      isVoid: true,
+      render: (props: RenderElementProps) => {
+        const { Attachment } = this.options;
+
+        return (
+          <div {...props.attributes} contentEditable={false}>
+            {props.children}
+            <Attachment {...props} />
+          </div>
+        );
+      },
+    },
+  ];
+}

package/src/plugins/AttachmentsPlugin/index.ts

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

package/src/plugins/AttachmentsPlugin/types.ts

@@ -0,0 +1,12 @@
+import { Editor } from 'slate';
+import { RenderElementProps } from 'slate-react';
+import { ReactNode } from 'react';
+
+export type Options = {
+  onDragEnter?: () => void;
+  onDragLeave?: () => void;
+  onPaste?: (editor: Editor, file: File) => void;
+  onDelete?: (editor: Editor, fileId?: string) => void;
+  onDownload?: (fileId: string) => void;
+  Attachment: (props: RenderElementProps) => ReactNode;
+};

package/src/plugins/BasicFormattingPlugin/BasicFormattingPlugin.tsx

@@ -0,0 +1,100 @@
+import { Editor } from 'slate';
+import type { CustomElement, CustomText } from '../../../types';
+import type { IPlugin } from '../../types';
+
+type CustomLeaf = CustomText & {
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+};
+
+export class BasicFormattingPlugin
+  implements IPlugin<Editor, CustomElement, CustomLeaf>
+{
+  hotkeys = [
+    ['cmd+b', (_, editor) => BasicFormattingPlugin.toggleBold(editor)] as const,
+    [
+      'ctrl+b',
+      (_, editor) => BasicFormattingPlugin.toggleBold(editor),
+    ] as const,
+
+    [
+      'cmd+i',
+      (_, editor) => BasicFormattingPlugin.toggleItalic(editor),
+    ] as const,
+    [
+      'ctrl+i',
+      (_, editor) => BasicFormattingPlugin.toggleItalic(editor),
+    ] as const,
+
+    [
+      'cmd+u',
+      (_, editor) => BasicFormattingPlugin.toggleUnderline(editor),
+    ] as const,
+    [
+      'ctrl+u',
+      (_, editor) => BasicFormattingPlugin.toggleUnderline(editor),
+    ] as const,
+  ];
+
+  leafs: IPlugin<Editor, CustomElement, CustomLeaf>['leafs'] = [
+    {
+      render: (props) => {
+        const { leaf, attributes, children } = props;
+
+        let content = children;
+
+        if (leaf.bold) {
+          content = <strong>{content}</strong>;
+        }
+
+        if (leaf.italic) {
+          content = <em>{content}</em>;
+        }
+
+        if (leaf.underline) {
+          content = <u>{content}</u>;
+        }
+
+        if (leaf.strikethrough) {
+          content = <s>{content}</s>;
+        }
+
+        return <span {...attributes}>{content}</span>;
+      },
+    },
+  ];
+
+  static isMarkActive(editor: Editor, mark: keyof CustomLeaf) {
+    const marks: Record<string, boolean> | null = Editor.marks(editor);
+
+    return marks ? marks[mark] === true : false;
+  }
+
+  static toggleMark(editor: Editor, mark: keyof CustomLeaf) {
+    const isActive = BasicFormattingPlugin.isMarkActive(editor, mark);
+
+    if (isActive) {
+      editor.removeMark(mark);
+    } else {
+      editor.addMark(mark, true);
+    }
+  }
+
+  static toggleBold(editor: Editor) {
+    BasicFormattingPlugin.toggleMark(editor, 'bold');
+  }
+
+  static toggleItalic(editor: Editor) {
+    BasicFormattingPlugin.toggleMark(editor, 'italic');
+  }
+
+  static toggleUnderline(editor: Editor) {
+    BasicFormattingPlugin.toggleMark(editor, 'underline');
+  }
+
+  static toggleStrikethrough(editor: Editor) {
+    BasicFormattingPlugin.toggleMark(editor, 'strikethrough');
+  }
+}

package/src/plugins/BasicFormattingPlugin/index.ts

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

package/src/plugins/BreaksPlugin/BreaksPlugin.tsx

@@ -0,0 +1,70 @@
+import type { KeyboardEvent } from 'react';
+import { Editor, Transforms } from 'slate';
+import type { CustomElement } from '../../../types';
+import type { IPlugin } from '../../types';
+
+type Options = {
+  breakNodes: string[];
+};
+
+export class BreaksPlugin implements IPlugin {
+  constructor(private options: Options) {}
+
+  init(editor: Editor) {
+    const { insertBreak } = editor;
+
+    editor.insertBreak = () => {
+      const node = Editor.above<CustomElement>(editor, {
+        match: (n) => Editor.isBlock(editor, n as CustomElement),
+        mode: 'lowest',
+      });
+
+      if (!node) {
+        insertBreak();
+        return;
+      }
+
+      const [element, path] = node;
+
+      const { selection } = editor;
+      if (!selection) {
+        insertBreak();
+        return;
+      }
+
+      if (this.options.breakNodes.includes(element.type)) {
+        const { anchor } = selection;
+
+        const isStart = Editor.isStart(editor, anchor, path);
+
+        if (isStart) {
+          Transforms.insertNodes(editor, {
+            type: 'paragraph',
+            children: [{ text: '' }],
+          });
+          Transforms.move(editor);
+          return;
+        } else {
+          insertBreak();
+
+          Transforms.setNodes(editor, {
+            type: 'paragraph',
+          });
+        }
+      } else {
+        insertBreak();
+      }
+    };
+
+    return editor;
+  }
+
+  handlers = {
+    onKeyDown: (event: KeyboardEvent, editor: Editor) => {
+      if (event.key === 'Enter' && event.shiftKey) {
+        event.preventDefault();
+        editor.insertText('\n');
+      }
+    },
+  };
+}

package/src/plugins/BreaksPlugin/index.ts

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

package/src/plugins/CodeBlockPlugin/CodeBlock.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { RenderElementProps } from 'slate-react';
+import styles from './styles.module.css';
+import type { CodeElement } from './types';
+
+type Props = RenderElementProps & {
+  element: CodeElement;
+  renderLanguageSelector: (element: CodeElement) => ReactNode;
+};
+
+export const CodeBlock = (props: Props) => {
+  return (
+    <div {...props.attributes} className={styles.code} spellCheck={false}>
+      <div contentEditable={false}>
+        {props.renderLanguageSelector(props.element)}
+      </div>
+      <div className={styles.content}>{props.children}</div>
+    </div>
+  );
+};

package/src/plugins/CodeBlockPlugin/CodeBlockLine.tsx

@@ -0,0 +1,7 @@
+import { RenderElementProps } from 'slate-react';
+
+export const CodeBlockLine = (props: RenderElementProps) => (
+  <div {...props.attributes} style={{ position: 'relative' }}>
+    {props.children}
+  </div>
+);