@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/rich-text-editor/slash-commands-extension.ts

@@ -1,230 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-
-// SlashCommand type definition
-export interface SlashCommand {
-  id?: string;
-  command: string;
-  description: string;
-  icon?: string;
-  action?: (text: string) => Promise<{ text?: string; error?: string }>;
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    slashCommands: {
-      selectSlashCommand: (index: number) => ReturnType;
-    };
-  }
-}
-
-interface SlashCommandsOptions {
-  commands: SlashCommand[];
-  onSelectCommand: (command: SlashCommand) => void;
-}
-
-const slashCommandsPluginKey = new PluginKey('slashCommands');
-
-export const SlashCommandsExtension = Extension.create<SlashCommandsOptions>({
-  name: 'slashCommands',
-
-  addOptions() {
-    return {
-      commands: [],
-      onSelectCommand: () => {},
-    };
-  },
-
-  addCommands() {
-    const extension = this;
-    return {
-      selectSlashCommand: (index: number) => ({ editor }) => {
-        const state = slashCommandsPluginKey.getState(editor.state);
-        if (state && state.active && state.filteredCommands[index]) {
-          const command = state.filteredCommands[index];
-          
-          // Clear the slash command
-          const { from, to } = state.range;
-          editor.chain()
-            .deleteRange({ from, to })
-            .focus()
-            .run();
-          
-          // Execute the command
-          extension.options.onSelectCommand(command);
-          
-          return true;
-        }
-        return false;
-      },
-    };
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      ArrowUp: ({ editor }) => {
-        const state = slashCommandsPluginKey.getState(editor.state);
-        if (state && state.active) {
-          const newIndex = state.selectedIndex > 0 ? state.selectedIndex - 1 : state.filteredCommands.length - 1;
-          editor.view.dispatch(
-            editor.state.tr.setMeta(slashCommandsPluginKey, { selectedIndex: newIndex })
-          );
-          return true;
-        }
-        return false;
-      },
-      ArrowDown: ({ editor }) => {
-        const state = slashCommandsPluginKey.getState(editor.state);
-        if (state && state.active) {
-          const newIndex = state.selectedIndex < state.filteredCommands.length - 1 ? state.selectedIndex + 1 : 0;
-          editor.view.dispatch(
-            editor.state.tr.setMeta(slashCommandsPluginKey, { selectedIndex: newIndex })
-          );
-          return true;
-        }
-        return false;
-      },
-      Enter: ({ editor }) => {
-        const state = slashCommandsPluginKey.getState(editor.state);
-        if (state && state.active) {
-          editor.commands.selectSlashCommand(state.selectedIndex);
-          return true;
-        }
-        return false;
-      },
-      Escape: ({ editor }) => {
-        const state = slashCommandsPluginKey.getState(editor.state);
-        if (state && state.active) {
-          editor.view.dispatch(
-            editor.state.tr.setMeta(slashCommandsPluginKey, { active: false })
-          );
-          return true;
-        }
-        return false;
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    const extension = this;
-    return [
-      new Plugin({
-        key: slashCommandsPluginKey,
-        state: {
-          init() {
-            return {
-              active: false,
-              range: { from: 0, to: 0 },
-              query: '',
-              filteredCommands: [],
-              selectedIndex: 0,
-            };
-          },
-          apply(transaction, value, oldState, newState) {
-            const meta = transaction.getMeta(slashCommandsPluginKey);
-            if (meta) {
-              return { ...value, ...meta };
-            }
-
-            // Check for slash character
-            const { selection } = newState;
-            const { empty, $from } = selection;
-            
-            if (!empty) {
-              return { ...value, active: false };
-            }
-
-            const textBefore = $from.parent.textBetween(
-              Math.max(0, $from.parentOffset - 50),
-              $from.parentOffset,
-              null,
-              '\ufffc'
-            );
-
-            const match = textBefore.match(/\/(\w*)$/);
-            
-            if (match) {
-              const query = match[1].toLowerCase();
-              const filteredCommands = extension.options.commands.filter((cmd: SlashCommand) => 
-                cmd.command.toLowerCase().includes(query) ||
-                cmd.description.toLowerCase().includes(query)
-              );
-
-              return {
-                active: true,
-                range: {
-                  from: $from.pos - match[0].length,
-                  to: $from.pos,
-                },
-                query,
-                filteredCommands,
-                selectedIndex: 0,
-              };
-            }
-
-            return { ...value, active: false };
-          },
-        },
-        props: {
-          decorations(state) {
-            const pluginState = this.getState(state);
-            if (!pluginState || !pluginState.active) {
-              return DecorationSet.empty;
-            }
-
-            // Slash menu decoration
-            const { from } = pluginState.range;
-            const decoration = Decoration.widget(from, () => {
-              const container = document.createElement('div');
-              container.className = 'slash-commands-menu';
-
-              pluginState.filteredCommands.forEach((cmd: SlashCommand, index: number) => {
-                const item = document.createElement('div');
-                item.className = `slash-command-item ${index === pluginState.selectedIndex ? 'selected' : ''}`;
-                
-                if (cmd.icon) {
-                  const iconWrapper = document.createElement('div');
-                  iconWrapper.innerHTML = cmd.icon;
-                  item.appendChild(iconWrapper);
-                }
-                
-                const textWrapper = document.createElement('div');
-                
-                const commandName = document.createElement('div');
-                commandName.className = 'command-name';
-                commandName.textContent = `/${cmd.command}`;
-                textWrapper.appendChild(commandName);
-                
-                const commandDesc = document.createElement('div');
-                commandDesc.className = 'command-description';
-                commandDesc.textContent = cmd.description;
-                textWrapper.appendChild(commandDesc);
-                
-                item.appendChild(textWrapper);
-                
-                item.addEventListener('click', () => {
-                  const editor = (state as any).editor;
-                  editor.commands.selectSlashCommand(index);
-                });
-                
-                container.appendChild(item);
-              });
-
-              if (pluginState.filteredCommands.length === 0) {
-                const empty = document.createElement('div');
-                empty.className = 'text-gray-500 p-3 text-sm';
-                empty.textContent = 'No commands found';
-                container.appendChild(empty);
-              }
-
-              return container;
-            });
-
-            return DecorationSet.create(state.doc, [decoration]);
-          },
-        },
-      }),
-    ];
-  },
-});

package/src/components/rich-text-editor/slash-commands.css

@@ -1,35 +0,0 @@
-/* Slash Commands Menu Styles */
-.slash-commands-menu {
-  @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
-  @apply max-h-80 overflow-y-auto min-w-[280px] p-2;
-}
-
-.slash-command-item {
-  @apply flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer;
-  @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
-}
-
-.slash-command-item.selected {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-.slash-command-item svg {
-  @apply w-4 h-4 text-gray-500 dark:text-gray-400;
-}
-
-.slash-command-item > div {
-  @apply flex-1;
-}
-
-.slash-command-item .command-name {
-  @apply font-medium text-gray-900 dark:text-gray-100 text-sm;
-}
-
-.slash-command-item .command-description {
-  @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
-}
-
-/* Dark mode support */
-.dark .slash-commands-menu {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-}

package/src/components/rich-text-editor/table-styles.css

@@ -1,65 +0,0 @@
-/* Table styles for RichTextEditor */
-.ProseMirror table {
-  border-collapse: collapse;
-  margin: 0;
-  overflow: hidden;
-  table-layout: fixed;
-  width: 100%;
-  border: 1px solid #d1d5db;
-}
-
-.ProseMirror table td,
-.ProseMirror table th {
-  border: 1px solid #d1d5db;
-  box-sizing: border-box;
-  min-width: 1em;
-  padding: 6px 8px;
-  position: relative;
-  vertical-align: top;
-}
-
-.ProseMirror table th {
-  background-color: #f9fafb;
-  font-weight: 600;
-  text-align: left;
-}
-
-.ProseMirror table .selectedCell:after {
-  background-color: rgba(59, 130, 246, 0.1);
-  content: '';
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-  position: absolute;
-  z-index: 2;
-}
-
-.ProseMirror table .column-resize-handle {
-  background-color: #3b82f6;
-  bottom: -2px;
-  position: absolute;
-  right: -2px;
-  top: 0;
-  width: 4px;
-  pointer-events: none;
-}
-
-/* Dark mode styles */
-.dark .ProseMirror table {
-  border: 1px solid #374151;
-}
-
-.dark .ProseMirror table td,
-.dark .ProseMirror table th {
-  border: 1px solid #374151;
-}
-
-.dark .ProseMirror table th {
-  background-color: #111827;
-}
-
-.dark .ProseMirror table .selectedCell:after {
-  background-color: rgba(59, 130, 246, 0.2);
-}