chore: update editor package #659

- moved most dependencies to editor package - left the minimal footprint in ai - ended up adding an alias for #editor for the local package usage - tweaked some tailwind configs - updated some import sorting rules - moved files around to keep tsx together and ts stuff together - moved styled back to ai given the tailwind config setup Closes #659
and-voila · Jan 26, 2024 · d56a72e · d56a72e
1 parent 7e41625
commit d56a72e
Show file tree

Hide file tree

Showing 42 changed files with 155 additions and 171 deletions.
diff --git a/apps/ai/tsconfig.json b/apps/ai/tsconfig.json
@@ -4,51 +4,17 @@
     "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"],
+      "#editor/*": ["../../packages/editor/src/*"],
     },
     "plugins": [{ "name": "next" }],
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json",
   },
   "include": [
     ".",
     ".next/types/**/*.ts",
-    "../../packages/editor/src/components/menus",
-    "../../packages/editor/src/components/panels",
-    "../../packages/editor/src/components/dropdown.tsx",
-    "../../packages/editor/src/components/editor-button.tsx",
-    "../../packages/editor/src/components/icon.tsx",
-    "../../packages/editor/src/components/loader.tsx",
-    "../../packages/editor/src/components/panel.tsx",
-    "../../packages/editor/src/components/popover-menu.tsx",
-    "../../packages/editor/src/components/spinner.tsx",
-    "../../packages/editor/src/components/surface.tsx",
-    "../../packages/editor/src/components/table-of-contents.tsx",
-    "../../packages/editor/src/components/textarea.tsx",
-    "../../packages/editor/src/components/toggle.tsx",
-    "../../packages/editor/src/components/toolbar.tsx",
-    "../../packages/editor/src/components/tooltip.tsx",
-    "../../packages/editor/src/extensions/emoji-suggestion",
-    "../../packages/editor/src/extensions/figcaption",
-    "../../packages/editor/src/extensions/figure",
-    "../../packages/editor/src/extensions/font-size",
-    "../../packages/editor/src/extensions/heading",
-    "../../packages/editor/src/extensions/horizontal-rule",
-    "../../packages/editor/src/extensions/image",
-    "../../packages/editor/src/extensions/image-block",
-    "../../packages/editor/src/extensions/image-upload",
-    "../../packages/editor/src/extensions/trailing-node",
-    "../../packages/editor/src/extensions/extension-kit.ts",
-    "../../packages/editor/src/extensions/blockquote-figure",
-    "../../packages/editor/src/extensions/document",
-    "../../packages/editor/src/extensions/ai-image",
-    "../../packages/editor/src/extensions/ai-writer",
-    "../../packages/editor/src/extensions/embed-input",
-    "../../packages/editor/src/extensions/link",
-    "../../packages/editor/src/extensions/multi-column",
-    "../../packages/editor/src/extensions/selection",
-    "../../packages/editor/src/extensions/slash-command",
-    "../../packages/editor/src/extensions/table",
-    "../../packages/editor/src/extensions/table-of-content-node",
-    "../../packages/editor/src/lib/data",
+    "../../packages/editor/src/**/*.{ts,tsx}",
+    "../../packages/email/src/**/*.{ts,tsx}",
+    "../../packages/utils/src/**/*.{ts,tsx}",
   ],
   "exclude": ["node_modules"],
 }
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -119,4 +119,4 @@
     "y-prosemirror": "^1.2.1",
     "yjs": "^13.6.10"
   }
-}
+}
diff --git a/packages/editor/src/components/ai-image/ai-image-view.tsx b/packages/editor/src/components/ai-image/ai-image-view.tsx
@@ -7,14 +7,14 @@ import { NodeViewWrapper } from '@tiptap/react';
 import toast from 'react-hot-toast';
 import { v4 as uuid } from 'uuid';
 
-import { DropdownButton } from '../dropdown';
-import { Button } from '../editor-button';
-import { Icon } from '../icon';
-import { Loader } from '../loader';
-import { Panel, PanelHeadline } from '../panel';
-import { Surface } from '../surface';
-import { Textarea } from '../textarea';
-import { Toolbar } from '../toolbar';
+import { DropdownButton } from '#editor/components/dropdown';
+import { Button } from '#editor/components/editor-button';
+import { Icon } from '#editor/components/icon';
+import { Loader } from '#editor/components/loader';
+import { Panel, PanelHeadline } from '#editor/components/panel';
+import { Surface } from '#editor/components/surface';
+import { Textarea } from '#editor/components/textarea';
+import { Toolbar } from '#editor/components/toolbar';
 
 const imageStyles = [
   { name: 'photorealistic', label: 'Photorealistic', value: 'photorealistic' },

diff --git a/packages/editor/src/components/ai-writer/ai-writer-view.tsx b/packages/editor/src/components/ai-writer/ai-writer-view.tsx
@@ -1,23 +1,22 @@
 import type { Tone } from '@tiptap-pro/extension-ai';
 import type { Extension, NodeViewWrapperProps } from '@tiptap/react';
+import type { AiToneOption } from '#editor/types';
 
 import { useCallback, useMemo, useState } from 'react';
 import * as Dropdown from '@radix-ui/react-dropdown-menu';
 import { NodeViewWrapper } from '@tiptap/react';
 import toast from 'react-hot-toast';
 import { v4 as uuid } from 'uuid';
 
-import type { AiToneOption } from '../../types';
-
-import { tones } from '../../lib/constants';
-import { DropdownButton } from '../dropdown';
-import { Button } from '../editor-button';
-import { Icon } from '../icon';
-import { Loader } from '../loader';
-import { Panel, PanelHeadline } from '../panel';
-import { Surface } from '../surface';
-import { Textarea } from '../textarea';
-import { Toolbar } from '../toolbar';
+import { DropdownButton } from '#editor/components/dropdown';
+import { Button } from '#editor/components/editor-button';
+import { Icon } from '#editor/components/icon';
+import { Loader } from '#editor/components/loader';
+import { Panel, PanelHeadline } from '#editor/components/panel';
+import { Surface } from '#editor/components/surface';
+import { Textarea } from '#editor/components/textarea';
+import { Toolbar } from '#editor/components/toolbar';
+import { tones } from '#editor/lib/constants';
 
 export interface DataProps {
   text: string;

diff --git a/packages/editor/src/components/image-block/image-block-menu.tsx b/packages/editor/src/components/image-block/image-block-menu.tsx
@@ -1,15 +1,15 @@
+import type { MenuProps } from '#editor/types';
 import type { Instance } from 'tippy.js';
 
 import React, { useCallback, useRef } from 'react';
 import { BubbleMenu as BaseBubbleMenu } from '@tiptap/react';
 import { sticky } from 'tippy.js';
 import { v4 as uuid } from 'uuid';
 
-import type { MenuProps } from '../../types';
+import { Icon } from '#editor/components/icon';
+import { Toolbar } from '#editor/components/toolbar';
+import { getRenderContainer } from '#editor/lib/utils/get-render-container';
 
-import { Icon } from '../../components/icon';
-import { Toolbar } from '../../components/toolbar';
-import { getRenderContainer } from '../../lib/utils/get-render-container';
 import { ImageBlockWidth } from './image-block-width';
 
 export const ImageBlockMenu = ({

diff --git a/packages/editor/src/components/image-upload/image-uploader.tsx b/packages/editor/src/components/image-upload/image-uploader.tsx
@@ -4,14 +4,14 @@ import { useCallback } from 'react';
 
 import { cn } from '@av/ui';
 
+import { Button } from '#editor/components/editor-button';
+import { Icon } from '#editor/components/icon';
+import { Spinner } from '#editor/components/spinner';
 import {
   useDropZone,
   useFileUpload,
   useUploader,
-} from '../../hooks/image-upload/hooks';
-import { Button } from '../editor-button';
-import { Icon } from '../icon';
-import { Spinner } from '../spinner';
+} from '#editor/hooks/image-upload-hooks';
 
 export const ImageUploader = ({
   onUpload,

diff --git a/packages/editor/src/components/menus/columns-menu.tsx b/packages/editor/src/components/menus/columns-menu.tsx
@@ -1,14 +1,14 @@
+import type { MenuProps } from '#editor/types';
+
 import { useCallback } from 'react';
 import { BubbleMenu as BaseBubbleMenu } from '@tiptap/react';
 import { sticky } from 'tippy.js';
 import { v4 as uuid } from 'uuid';
 
-import type { MenuProps } from '../../types';
-
-import { ColumnLayout } from '../../extensions/multi-column/columns';
-import { getRenderContainer } from '../../lib/utils/get-render-container';
-import { Icon } from '../icon';
-import { Toolbar } from '../toolbar';
+import { Icon } from '#editor/components/icon';
+import { Toolbar } from '#editor/components/toolbar';
+import { ColumnLayout } from '#editor/extensions/multi-column/columns';
+import { getRenderContainer } from '#editor/lib/utils/get-render-container';
 
 export const ColumnsMenu = ({ editor, appendTo }: MenuProps) => {
   const getReferenceClientRect = useCallback(() => {

diff --git a/packages/editor/src/components/menus/content-item-menu.tsx b/packages/editor/src/components/menus/content-item-menu.tsx
@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react';
 import * as Popover from '@radix-ui/react-popover';
 import DragHandle from '@tiptap-pro/extension-drag-handle-react';
 
-import useContentItemActions from '../../hooks/content-item-menu/use-content-item-actions';
-import { useData } from '../../hooks/content-item-menu/use-data';
-import { DropdownButton } from '../dropdown';
-import { Icon } from '../icon';
-import { Surface } from '../surface';
-import { Toolbar } from '../toolbar';
+import { DropdownButton } from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
+import useContentItemActions from '#editor/hooks/use-content-item-actions';
+import { useData } from '#editor/hooks/use-data';
 
 export interface ContentItemMenuProps {
   editor: Editor;

diff --git a/packages/editor/src/components/menus/link-menu.tsx b/packages/editor/src/components/menus/link-menu.tsx
@@ -1,10 +1,10 @@
+import type { MenuProps } from '#editor/types';
+
 import React, { useCallback, useState } from 'react';
 import { BubbleMenu as BaseBubbleMenu } from '@tiptap/react';
 
-import type { MenuProps } from '../../types';
-
-import { LinkEditorPanel } from '../panels/link-editor-panel';
-import { LinkPreviewPanel } from '../panels/link-preview-panel';
+import { LinkEditorPanel } from '#editor/components/panels/link-editor-panel';
+import { LinkPreviewPanel } from '#editor/components/panels/link-preview-panel';
 
 export const LinkMenu = ({ editor, appendTo }: MenuProps): JSX.Element => {
   const [showEdit, setShowEdit] = useState(false);

diff --git a/packages/editor/src/components/menus/text-menu.tsx b/packages/editor/src/components/menus/text-menu.tsx
@@ -4,13 +4,14 @@ import { memo } from 'react';
 import * as Popover from '@radix-ui/react-popover';
 import { BubbleMenu } from '@tiptap/react';
 
-import { useTextmenuCommands } from '../../hooks/text-menu/use-text-menu-commands';
-import { useTextmenuContentTypes } from '../../hooks/text-menu/use-text-menu-content-types';
-import { useTextmenuStates } from '../../hooks/text-menu/use-text-menu-states';
-import { Icon } from '../icon';
-import { ColorPicker } from '../panels/color-picker';
-import { Surface } from '../surface';
-import { Toolbar } from '../toolbar';
+import { Icon } from '#editor/components/icon';
+import { ColorPicker } from '#editor/components/panels/color-picker';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
+import { useTextmenuCommands } from '#editor/hooks/use-text-menu-commands';
+import { useTextmenuContentTypes } from '#editor/hooks/use-text-menu-content-types';
+import { useTextmenuStates } from '#editor/hooks/use-text-menu-states';
+
 import { AIDropdown } from './text-menu/ai-dropdown';
 import { ContentTypePicker } from './text-menu/content-type-picker';
 import { EditLinkPopover } from './text-menu/edit-link-popover';

diff --git a/packages/editor/src/components/menus/text-menu/ai-dropdown.tsx b/packages/editor/src/components/menus/text-menu/ai-dropdown.tsx
@@ -3,11 +3,11 @@ import type { Tone } from '@tiptap-pro/extension-ai';
 import { useCallback } from 'react';
 import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
-import { languages, tones } from '../../../lib/constants';
-import { DropdownButton } from '../../dropdown';
-import { Icon } from '../../icon';
-import { Surface } from '../../surface';
-import { Toolbar } from '../../toolbar';
+import { DropdownButton } from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
+import { languages, tones } from '#editor/lib/constants';
 
 export interface AIDropdownProps {
   onSimplify: () => void;

diff --git a/packages/editor/src/components/menus/text-menu/content-type-picker.tsx b/packages/editor/src/components/menus/text-menu/content-type-picker.tsx
@@ -3,10 +3,13 @@ import type { icons } from 'lucide-react';
 import { useMemo } from 'react';
 import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
-import { DropdownButton, DropdownCategoryTitle } from '../../dropdown';
-import { Icon } from '../../icon';
-import { Surface } from '../../surface';
-import { Toolbar } from '../../toolbar';
+import {
+  DropdownButton,
+  DropdownCategoryTitle,
+} from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
 
 export interface ContentTypePickerOption {
   label: string;

diff --git a/packages/editor/src/components/menus/text-menu/edit-link-popover.tsx b/packages/editor/src/components/menus/text-menu/edit-link-popover.tsx
@@ -1,8 +1,8 @@
 import * as Popover from '@radix-ui/react-popover';
 
-import { Icon } from '../../icon';
-import { LinkEditorPanel } from '../../panels/link-editor-panel';
-import { Toolbar } from '../../toolbar';
+import { Icon } from '#editor/components/icon';
+import { LinkEditorPanel } from '#editor/components/panels/link-editor-panel';
+import { Toolbar } from '#editor/components/toolbar';
 
 export interface EditLinkPopoverProps {
   onSetLink: (link: string, openInNewTab?: boolean) => void;

diff --git a/packages/editor/src/components/menus/text-menu/font-family-picker.tsx b/packages/editor/src/components/menus/text-menu/font-family-picker.tsx
@@ -1,10 +1,13 @@
 import { useCallback } from 'react';
 import * as Dropdown from '@radix-ui/react-dropdown-menu';
 
-import { DropdownButton, DropdownCategoryTitle } from '../../dropdown';
-import { Icon } from '../../icon';
-import { Surface } from '../../surface';
-import { Toolbar } from '../../toolbar';
+import {
+  DropdownButton,
+  DropdownCategoryTitle,
+} from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
 
 const FONT_FAMILY_GROUPS = [
   {

diff --git a/packages/editor/src/components/menus/text-menu/font-size-picker.tsx b/packages/editor/src/components/menus/text-menu/font-size-picker.tsx
@@ -4,10 +4,10 @@ import * as Dropdown from '@radix-ui/react-dropdown-menu';
 import {
   DropdownButton,
   // DropdownCategoryTitle,
-} from '../../dropdown';
-import { Icon } from '../../icon';
-import { Surface } from '../../surface';
-import { Toolbar } from '../../toolbar';
+} from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
 
 const FONT_SIZES = [
   { label: 'Smaller', value: '12px' },

diff --git a/packages/editor/src/components/panels/color-picker.tsx b/packages/editor/src/components/panels/color-picker.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 
-import { themeColors } from '../../lib/constants';
-import { Icon } from '../icon';
-import { Toolbar } from '../toolbar';
+import { Icon } from '#editor/components/icon';
+import { Toolbar } from '#editor/components/toolbar';
+import { themeColors } from '#editor/lib/constants';
+
 import { ColorButton } from './color-button';
 
 export interface ColorPickerProps {

diff --git a/packages/editor/src/components/panels/link-editor-panel.tsx b/packages/editor/src/components/panels/link-editor-panel.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../editor-button';
-import { Icon } from '../icon';
-import { Surface } from '../surface';
-import { Toggle } from '../toggle';
+import { Button } from '#editor/components/editor-button';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toggle } from '#editor/components/toggle';
 
 export interface LinkEditorPanelProps {
   initialUrl?: string;

diff --git a/packages/editor/src/components/panels/link-preview-panel.tsx b/packages/editor/src/components/panels/link-preview-panel.tsx
@@ -1,7 +1,7 @@
-import { Icon } from '../icon';
-import { Surface } from '../surface';
-import { Toolbar } from '../toolbar';
-import Tooltip from '../tooltip';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
+import { Toolbar } from '#editor/components/toolbar';
+import Tooltip from '#editor/components/tooltip';
 
 export interface LinkPreviewPanelProps {
   url: string;

diff --git a/packages/editor/src/components/slash-command/command-button.tsx b/packages/editor/src/components/slash-command/command-button.tsx
@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 
 import { cn } from '@av/ui';
 
-import { Icon } from '../../components/icon';
+import { Icon } from '#editor/components/icon';
 
 export interface CommandButtonProps {
   active?: boolean;

diff --git a/packages/editor/src/components/slash-command/menu-list.tsx b/packages/editor/src/components/slash-command/menu-list.tsx
@@ -1,13 +1,13 @@
 import type { Editor } from '@tiptap/core';
+import type { Group } from '#editor/extensions/slash-command/groups';
 import type { icons } from 'lucide-react';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import type { Group } from '../../extensions/slash-command/groups';
+import { DropdownButton } from '#editor/components/dropdown';
+import { Icon } from '#editor/components/icon';
+import { Surface } from '#editor/components/surface';
 
-import { DropdownButton } from '../../components/dropdown';
-import { Icon } from '../../components/icon';
-import { Surface } from '../../components/surface';
 // TODO:
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { CommandButton } from './command-button';