@use-kona/editor 0.1.0-rc.0

package/src/examples/LanguageSelector.module.css

@@ -0,0 +1,51 @@
+.root {
+  display: flex;
+  justify-content: space-between;
+  column-gap: 8px;
+  padding: 4px;
+  border-bottom: 1px solid var(--kona-editor-border-color);
+}
+
+.button {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+
+  &:active {
+    transform: scale(0.9);
+  }
+}
+
+.customMenu {
+  max-height: 250px;
+  width: 200px;
+  overflow-y: auto;
+  position: absolute;
+  background-color: var(--kona-editor-background-color);
+  border: 1px solid var(--kona-editor-border-color);
+  z-index: 21;
+  border-radius: 8px;
+  font-size: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+  }
+}

package/src/examples/LanguageSelector.tsx

@@ -0,0 +1,99 @@
+import { forwardRef, useMemo } from 'react';
+import { Node } from 'slate';
+import type { CustomElement } from '../../types';
+import { CheckIcon } from './icons/check';
+import { CopyIcon } from './icons/copy';
+import styles from './LanguageSelector.module.css';
+import { Button } from './ui/Button';
+import { Dropdown } from './ui/Dropdown';
+import { Menu as MenuBase, type MenuConfig } from './ui/Menu';
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  params: {
+    element: CustomElement;
+  };
+};
+
+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' },
+];
+
+export const LanguageSelector = (props: Props) => {
+  const { value: language, onChange, params } = props;
+
+  const handleCopyClick = () => {
+    const text = Array.from(Node.texts(params.element))
+      .map((nodeEntry) => nodeEntry[0].text)
+      .join('\n');
+
+    navigator.clipboard.writeText(text);
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we don't care about other deps
+  const menuConfig: MenuConfig = useMemo(
+    () => ({
+      items: languages.map(({ label, value }) => ({
+        render: () => (
+          <>
+            <MenuBase.Icon>
+              {value === language && <CheckIcon size={16} />}
+            </MenuBase.Icon>
+            <MenuBase.Title>{label}</MenuBase.Title>
+          </>
+        ),
+        onSelect: () => {
+          onChange(value);
+        },
+      })),
+    }),
+    [language],
+  );
+  return (
+    <div className={styles.root}>
+      <Dropdown
+        config={menuConfig}
+        Menu={forwardRef<HTMLDivElement, { className: string }>(
+          (props, ref) => (
+            <div
+              {...props}
+              ref={ref}
+              className={[styles.customMenu, props.className].join(' ')}
+            />
+          ),
+        )}
+      >
+        {({ ref, onClick }) => (
+          <Button ref={ref} size="sm" onClick={onClick}>
+            {languages.find((l) => l.value === language)?.label ||
+              'Select language'}
+          </Button>
+        )}
+      </Dropdown>
+      <Button size="sm" type="button" onClick={handleCopyClick}>
+        <CopyIcon size={16} />
+      </Button>
+    </div>
+  );
+};

package/src/examples/LinksHint.module.css

@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  border-radius: 4px;
+  background-color: var(--kona-editor-background-color, #fff);
+  border: 1px solid var(--kona-editor-border-color, #ddd);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
+}
+
+.button {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+  border: none;
+  opacity: 0.65;
+
+  &:hover {
+    opacity: 1;
+  }
+}

package/src/examples/LinksHint.tsx

@@ -0,0 +1,58 @@
+import { Editor, Transforms } from 'slate';
+import { ReactEditor } from 'slate-react';
+import type { FloatingMenuPlugin, OptionsMethods } from '../plugins';
+import { EditIcon } from './icons/edit';
+import { ExternalIcon } from './icons/external';
+import styles from './LinksHint.module.css';
+import { $store } from './store';
+
+type Props = {
+  methods: OptionsMethods;
+  floatingMenuPlugin: FloatingMenuPlugin;
+};
+
+export const LinksHint = (props: Props) => {
+  const { methods, floatingMenuPlugin } = props;
+
+  return (
+    <div className={styles.root}>
+      <button
+        type="button"
+        className={styles.button}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          const element = methods.getLinkElement();
+          const editor = methods.getEditor();
+          const url = methods.getUrl();
+
+          if (!element) {
+            return;
+          }
+
+          const domElement = ReactEditor.toDOMNode(editor, element);
+          const path = ReactEditor.findPath(editor, element);
+          const range = Editor.range(editor, path);
+          Transforms.select(editor, range);
+
+          floatingMenuPlugin.openOnElement(domElement);
+          $store.setKey('floatingMenuMode', 'link');
+          $store.setKey('isFloatingMenuOpen', true);
+          $store.setKey('url', url);
+        }}
+      >
+        <EditIcon size={16} />
+      </button>
+      <button
+        type="button"
+        className={styles.button}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          const url = methods.getUrl();
+          window.open(url, '_blank');
+        }}
+      >
+        <ExternalIcon size={16} />
+      </button>
+    </div>
+  );
+};

package/src/examples/Menu.module.css

@@ -0,0 +1,37 @@
+.root {
+  padding: 8px;
+  display: flex;
+  column-gap: 4px;
+  background-color: var(--kona-editor-background-color);
+  border-bottom: 1px dotted var(--kona-editor-border-color);
+  color: var(--kona-editor-text-color);
+  width: 100%;
+}
+
+.button {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  opacity: 0.65;
+}
+
+.active {
+  opacity: 1;
+}
+
+.divider {
+  display: inline-block;
+  border-left: 1px solid var(--kona-editor-border-color);
+  width: 1px;
+  height: 20px;
+}

package/src/examples/Menu.tsx

@@ -0,0 +1,80 @@
+import type { Editor } from 'slate';
+import { HeadingsPlugin, ListsPlugin } from '../plugins';
+import { Heading1Icon } from './icons/heading1';
+import { Heading2Icon } from './icons/heading2';
+import { Heading3Icon } from './icons/heading3';
+import { OlIcon } from './icons/ol';
+import { UlIcon } from './icons/ul';
+import styles from './Menu.module.css';
+
+type Props = {
+  editor: Editor;
+};
+
+export const Menu = (props: Props) => {
+  const { editor } = props;
+
+  return (
+    <div className={styles.root}>
+      <button
+        type="button"
+        className={getButtonClassName(HeadingsPlugin.isHeading1Active(editor))}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          HeadingsPlugin.toggleHeading1(editor);
+        }}
+      >
+        <Heading1Icon size={16} />
+      </button>
+      <button
+        type="button"
+        className={getButtonClassName(HeadingsPlugin.isHeading2Active(editor))}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          HeadingsPlugin.toggleHeading2(editor);
+        }}
+      >
+        <Heading2Icon size={16} />
+      </button>
+      <button
+        type="button"
+        className={getButtonClassName(HeadingsPlugin.isHeading3Active(editor))}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          HeadingsPlugin.toggleHeading3(editor);
+        }}
+      >
+        <Heading3Icon size={16} />
+      </button>
+      <span className={styles.divider} />
+      <button
+        type="button"
+        className={getButtonClassName(
+          ListsPlugin.isListActive(editor, ListsPlugin.BULLETED_LIST_ELEMENT),
+        )}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          ListsPlugin.toggleList(editor, ListsPlugin.BULLETED_LIST_ELEMENT);
+        }}
+      >
+        <UlIcon size={16} />
+      </button>
+      <button
+        type="button"
+        className={getButtonClassName(
+          ListsPlugin.isListActive(editor, ListsPlugin.NUMBERED_LIST_ELEMENT),
+        )}
+        onMouseDown={(event) => {
+          event.preventDefault();
+          ListsPlugin.toggleList(editor, ListsPlugin.NUMBERED_LIST_ELEMENT);
+        }}
+      >
+        <OlIcon size={16} />
+      </button>
+    </div>
+  );
+};
+
+const getButtonClassName = (isActive: boolean) => {
+  return isActive ? [styles.button, styles.active].join(' ') : styles.button;
+};

package/src/examples/colors.ts

@@ -0,0 +1,11 @@
+export enum Color {
+  Red = 'red',
+  Blue = 'blue',
+  Yellow = 'yellow',
+}
+
+export const colors = {
+  [Color.Red]: '#ff000055',
+  [Color.Blue]: '#0000ff55',
+  [Color.Yellow]: '#ffff0055',
+};

package/src/examples/getCommands.tsx

@@ -0,0 +1,76 @@
+import { type Command, HeadingsPlugin, ListsPlugin } from '../plugins';
+import { Heading1Icon } from './icons/heading1';
+import { Heading2Icon } from './icons/heading2';
+import { Heading3Icon } from './icons/heading3';
+import { OlIcon } from './icons/ol';
+import { TextIcon } from './icons/text';
+import { UlIcon } from './icons/ul';
+
+export const getCommands = (): Command[] => {
+  return [
+    {
+      name: 'paragraph',
+      title: 'Paragraph',
+      icon: <TextIcon size={16} />,
+      commandName: 'paragraph',
+      action: (actions) => {
+        actions.set({ type: 'paragraph' });
+      },
+    },
+    {
+      name: 'heading-1',
+      title: 'Heading 1',
+      commandName: 'heading1',
+      icon: <Heading1Icon size={16} />,
+      action: (actions) => {
+        actions.set({ type: HeadingsPlugin.HeadingLevel1 });
+      },
+    },
+    {
+      name: 'heading-2',
+      title: 'Heading 2',
+      commandName: 'heading2',
+      icon: <Heading2Icon size={16} />,
+      action: (actions) => {
+        actions.set({ type: HeadingsPlugin.HeadingLevel2 });
+      },
+    },
+    {
+      name: 'heading-3',
+      title: 'Heading 3',
+      commandName: 'heading3',
+      icon: <Heading3Icon size={16} />,
+      action: (actions) => {
+        actions.set({ type: HeadingsPlugin.HeadingLevel3 });
+      },
+    },
+    {
+      name: 'ul',
+      title: 'Bulleted list',
+      commandName: 'bulleted list',
+      icon: <UlIcon size={16} />,
+      action: (actions, editor) => {
+        actions.removeCommand();
+        ListsPlugin.toggleList(
+          editor,
+          ListsPlugin.BULLETED_LIST_ELEMENT,
+          ListsPlugin.LIST_ITEM_ELEMENT,
+        );
+      },
+    },
+    {
+      name: 'ol',
+      title: 'Numbered list',
+      commandName: 'numbered list',
+      icon: <OlIcon size={16} />,
+      action: (actions, editor) => {
+        actions.removeCommand();
+        ListsPlugin.toggleList(
+          editor,
+          ListsPlugin.NUMBERED_LIST_ELEMENT,
+          ListsPlugin.LIST_ITEM_ELEMENT,
+        );
+      },
+    },
+  ];
+};

package/src/examples/getPlugins.tsx

@@ -0,0 +1,143 @@
+import type { Editor } from 'slate';
+import {
+  BasicFormattingPlugin,
+  BreaksPlugin,
+  CodeBlockPlugin,
+  type Commands,
+  CommandsPlugin,
+  DnDPlugin,
+  FloatingMenuPlugin,
+  HeadingsPlugin,
+  HighlightsPlugin,
+  LinksPlugin,
+  ListsPlugin,
+  MenuPlugin,
+  NodeIdPlugin,
+  PlaceholderPlugin,
+  ShortcutsPlugin,
+  TableOfContentsPlugin,
+} from '../plugins';
+import type { CodeElement } from '../plugins/CodeBlockPlugin/types';
+import { Backdrop } from './Backdrop';
+import { colors } from './colors';
+import { DragBlock } from './DragBlock';
+import { FloatingMenu } from './FloatingMenu';
+import { getCommands } from './getCommands';
+import { getShortcuts } from './getShortcuts';
+import { LanguageSelector } from './LanguageSelector';
+import { LinksHint } from './LinksHint';
+import { Menu } from './Menu';
+import { $store } from './store';
+
+export const getPlugins = () => {
+  const floatingMenuPlugin = new FloatingMenuPlugin({
+    ignoreNodes: [CodeBlockPlugin.CODE_ELEMENT],
+    renderMenu: (editor: Editor, commands: Commands) => {
+      return (
+        <FloatingMenu $store={$store} editor={editor} commands={commands} />
+      );
+    },
+    renderBackdrop: (commands) => {
+      const handleClose = () => {
+        commands.onClose();
+        $store.setKey('isFloatingMenuOpen', false);
+      };
+
+      return <Backdrop onClose={handleClose} />;
+    },
+    onShow: () => {
+      $store.setKey('isFloatingMenuOpen', true);
+      return true;
+    },
+    onHide: () => {
+      if ($store.get().floatingMenuMode === 'main') {
+        $store.setKey('isFloatingMenuOpen', false);
+        $store.setKey('url', undefined);
+        return false;
+      }
+
+      return true;
+    },
+  });
+
+  return [
+    new BasicFormattingPlugin(),
+    new PlaceholderPlugin({
+      focused: 'Write / to open command menu',
+      unfocused: 'Write / to open command menu',
+      ignoreNodes: [CodeBlockPlugin.CODE_LINE_ELEMENT],
+    }),
+    new NodeIdPlugin({
+      generateId: () => Math.random().toString(36).substring(2, 15),
+    }),
+    new HeadingsPlugin(),
+    new MenuPlugin({
+      renderMenu: ({ editor }) => {
+        return <Menu editor={editor} />;
+      },
+    }),
+    new DnDPlugin({
+      renderBlock: (params) => {
+        return <DragBlock {...params} />;
+      },
+      onDropFiles: () => {},
+      ignoreNodes: [
+        CodeBlockPlugin.CODE_LINE_ELEMENT,
+        ListsPlugin.BULLETED_LIST_ELEMENT,
+        ListsPlugin.NUMBERED_LIST_ELEMENT,
+      ],
+    }),
+    new ShortcutsPlugin({
+      shortcuts: getShortcuts(),
+      ignoreNodes: [
+        CodeBlockPlugin.CODE_ELEMENT,
+        CodeBlockPlugin.CODE_LINE_ELEMENT,
+      ],
+    }),
+    new LinksPlugin({
+      renderHint: (methods) => (
+        <LinksHint floatingMenuPlugin={floatingMenuPlugin} methods={methods} />
+      ),
+    }),
+    new CommandsPlugin({
+      commands: getCommands(),
+      renderMenu: (children) => {
+        return <div>{children}</div>;
+      },
+      ignoreNodes: [CodeBlockPlugin.CODE_LINE_ELEMENT],
+    }),
+    new TableOfContentsPlugin({
+      levels: {
+        [HeadingsPlugin.HeadingLevel1]: 1,
+        [HeadingsPlugin.HeadingLevel2]: 2,
+        [HeadingsPlugin.HeadingLevel3]: 3,
+      },
+    }),
+    floatingMenuPlugin,
+    new HighlightsPlugin({
+      colors,
+    }),
+    new BreaksPlugin({
+      breakNodes: [
+        HeadingsPlugin.HeadingLevel1,
+        HeadingsPlugin.HeadingLevel2,
+        HeadingsPlugin.HeadingLevel3,
+      ],
+    }),
+    new ListsPlugin({}),
+    new CodeBlockPlugin({
+      renderLanguageSelector: (value, onChange, params) => {
+        return (
+          <LanguageSelector
+            value={value}
+            onChange={onChange}
+            params={{
+              ...params,
+              element: params.element as CodeElement,
+            }}
+          />
+        );
+      },
+    }),
+  ];
+};

package/src/examples/getShortcuts.ts

@@ -0,0 +1,107 @@
+import { Editor, Transforms } from 'slate';
+import { type ChangeMatch, HeadingsPlugin, type Shortcut } from '../plugins';
+
+export const getShortcuts = (): Shortcut[] => {
+  return [
+    {
+      trigger: ' ',
+      before: /\*\*/g,
+      after: /\*\*/g,
+      change(editor: Editor, match) {
+        replaceWithMarkedText(editor, match, 'bold');
+      },
+    },
+    {
+      trigger: ' ',
+      before: /\*/g,
+      after: /\*/g,
+      change(editor: Editor, match) {
+        replaceWithMarkedText(editor, match, 'italic');
+      },
+    },
+    {
+      trigger: ' ',
+      before: /~~/g,
+      after: /~~/g,
+      change(editor: Editor, match) {
+        replaceWithMarkedText(editor, match, 'strikethrough');
+      },
+    },
+    {
+      trigger: ' ',
+      before: /^###/g,
+      change(editor, match) {
+        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel3);
+      },
+    },
+    {
+      trigger: ' ',
+      before: /^##/g,
+      change(editor, match) {
+        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel2);
+      },
+    },
+    {
+      trigger: ' ',
+      before: /^#/g,
+      change(editor, match) {
+        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel1);
+      },
+    },
+  ];
+};
+
+const replaceWithHeading = (
+  editor: Editor,
+  match: ChangeMatch,
+  type: string,
+) => {
+  Editor.withoutNormalizing(editor, () => {
+    const { selection } = editor;
+
+    if (selection) {
+      Transforms.delete(editor, {
+        at: selection.focus,
+        distance: match.before?.[0].length,
+        reverse: true,
+        unit: 'character',
+      });
+
+      Transforms.setNodes(editor, {
+        type,
+      });
+    }
+  });
+};
+
+const replaceWithMarkedText = (
+  editor: Editor,
+  match: ChangeMatch,
+  mark: string,
+) => {
+  Editor.withoutNormalizing(editor, () => {
+    if (!editor.selection) {
+      return;
+    }
+
+    Transforms.delete(editor, {
+      at: editor.selection?.focus,
+      distance: match.text?.length || 0,
+      reverse: true,
+      unit: 'character',
+    });
+    Transforms.insertText(editor, match.cleanText || '');
+    Transforms.setSelection(editor, {
+      anchor: editor.selection?.focus,
+      focus: {
+        path: editor.selection?.focus.path,
+        offset: editor.selection?.focus.offset - (match.cleanText?.length || 0),
+      },
+    });
+    Editor.addMark(editor, mark, true);
+    Transforms.setSelection(editor, {
+      anchor: editor.selection.anchor,
+      focus: editor.selection.anchor,
+    });
+  });
+};