editor-refactored-2

src/components/Editor/BubbleMenu/TextBubbleMenu.tsx

@@ -7,9 +7,9 @@ import { Popover } from '~/components/_shared/Popover'
 import { useLocalize } from '~/context/localize'
 import { InsertLinkForm } from '../EditorToolbar/InsertLinkForm'
 
-import styles from './TextBubbleMenu.module.scss'
+import styles from '../TextBubbleMenu/TextBubbleMenu.module.scss'
 
-const MiniEditor = lazy(() => import('../../Editor/MiniEditor/MiniEditor'))
+const MiniEditor = lazy(() => import('../MiniEditor/MiniEditor'))
 
 type BubbleMenuProps = {
   editor: Editor

src/components/Editor/Editor.tsx

@@ -18,10 +18,10 @@ import { base, custom, extended } from '~/lib/editorExtensions'
 import { handleImageUpload } from '~/lib/handleImageUpload'
 import { renderUploadedImage } from '../Upload/renderUploadedImage'
 import { BlockquoteBubbleMenu, FigureBubbleMenu, IncutBubbleMenu } from './BubbleMenu'
+import { TextBubbleMenu } from './BubbleMenu/TextBubbleMenu'
 import { EditorFloatingMenu } from './EditorFloatingMenu'
-import { TextBubbleMenu } from './TextBubbleMenu'
 
-import './Prosemirror.scss'
+import './Editor.module.scss'
 
 export type EditorComponentProps = {
   shoutId: number

src/components/Editor/EditorToolbar/EditorToolbar.tsx

@@ -12,7 +12,7 @@ import { UploadedFile } from '~/types/upload'
 import { InsertLinkForm } from './InsertLinkForm'
 import { ToolbarControl as Control } from './ToolbarControl'
 
-import styles from '../SimplifiedEditor.module.scss'
+import styles from '../MiniEditor/MiniEditor.module.scss'
 
 interface EditorToolbarProps {
   editor: Accessor<Editor | undefined>

src/components/Editor/EditorToolbar/InsertLinkForm.tsx

@@ -1,6 +1,5 @@
 import { Editor } from '@tiptap/core'
 import { createEffect, createSignal, onCleanup } from 'solid-js'
-
 import { useLocalize } from '~/context/localize'
 import { validateUrl } from '~/utils/validate'
 import { InlineForm } from '../../_shared/InlineForm'

src/components/Editor/EditorToolbar/SimplifiedToolbar.tsx

@@ -1,133 +0,0 @@
-import clsx from 'clsx'
-import { Show } from 'solid-js'
-import { createEditorTransaction, useEditorHTML, useEditorIsEmpty } from 'solid-tiptap'
-import { useEditorContext } from '~/context/editor'
-import { useLocalize } from '~/context/localize'
-import { useUI } from '~/context/ui'
-import { Button } from '../../_shared/Button'
-import { Icon } from '../../_shared/Icon'
-import { Loading } from '../../_shared/Loading'
-import { Popover } from '../../_shared/Popover'
-import { SimplifiedEditorProps } from '../SimplifiedEditor'
-
-import styles from '../SimplifiedEditor.module.scss'
-
-export const ToolbarControls = (
-  props: SimplifiedEditorProps & { setShouldShowLinkBubbleMenu: (x: boolean) => void }
-) => {
-  const { t } = useLocalize()
-  const { showModal } = useUI()
-  const { editor } = useEditorContext()
-  const isActive = (name: string) => createEditorTransaction(editor, (ed) => ed?.isActive(name))
-  const isBold = isActive('bold')
-  const isItalic = isActive('italic')
-  const isLink = isActive('link')
-  const isBlockquote = isActive('blockquote')
-  const isEmpty = useEditorIsEmpty(editor)
-  const html = useEditorHTML(editor)
-
-  const handleClear = () => {
-    props.onCancel?.()
-    editor()?.commands.clearContent(true)
-  }
-
-  const handleShowLinkBubble = () => {
-    editor()?.chain().focus().run()
-    props.setShouldShowLinkBubbleMenu(true)
-  }
-
-  return (
-    <Show when={!props.hideToolbar}>
-      {/* Only show controls if 'hideToolbar' is false */}
-      <div class={clsx(styles.controls, { [styles.alwaysVisible]: props.controlsAlwaysVisible })}>
-        <div class={styles.actions}>
-          {/* Bold button */}
-          <Popover content={t('Bold')}>
-            {(triggerRef: (el: HTMLElement) => void) => (
-              <button
-                ref={triggerRef}
-                type="button"
-                class={clsx(styles.actionButton, { [styles.active]: isBold() })}
-                onClick={() => editor()?.chain().focus().toggleBold().run()}
-              >
-                <Icon name="editor-bold" />
-              </button>
-            )}
-          </Popover>
-          {/* Italic button */}
-          <Popover content={t('Italic')}>
-            {(triggerRef) => (
-              <button
-                ref={triggerRef}
-                type="button"
-                class={clsx(styles.actionButton, { [styles.active]: isItalic() })}
-                onClick={() => editor()?.chain().focus().toggleItalic().run()}
-              >
-                <Icon name="editor-italic" />
-              </button>
-            )}
-          </Popover>
-          {/* Link button */}
-          <Popover content={t('Add url')}>
-            {(triggerRef) => (
-              <button
-                ref={triggerRef}
-                type="button"
-                onClick={handleShowLinkBubble}
-                class={clsx(styles.actionButton, { [styles.active]: isLink() })}
-              >
-                <Icon name="editor-link" />
-              </button>
-            )}
-          </Popover>
-          {/* Blockquote button (optional) */}
-          <Show when={props.quoteEnabled}>
-            <Popover content={t('Add blockquote')}>
-              {(triggerRef) => (
-                <button
-                  ref={triggerRef}
-                  type="button"
-                  onClick={() => editor()?.chain().focus().toggleBlockquote().run()}
-                  class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
-                >
-                  <Icon name="editor-quote" />
-                </button>
-              )}
-            </Popover>
-          </Show>
-          {/* Image button (optional) */}
-          <Show when={props.imageEnabled}>
-            <Popover content={t('Add image')}>
-              {(triggerRef) => (
-                <button
-                  ref={triggerRef}
-                  type="button"
-                  onClick={() => showModal('simplifiedEditorUploadImage')}
-                  class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
-                >
-                  <Icon name="editor-image-dd-full" />
-                </button>
-              )}
-            </Popover>
-          </Show>
-        </div>
-        {/* Cancel and submit buttons */}
-        <Show when={!props.onChange}>
-          <div class={styles.buttons}>
-            <Show when={props.isCancelButtonVisible}>
-              <Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
-            </Show>
-            <Show when={!props.isPosting} fallback={<Loading />}>
-              <Button
-                value={props.submitButtonText ?? t('Send')}
-                variant="primary"
-                disabled={isEmpty()}
-                onClick={() => props.onSubmit?.(html() || '')}
-              />
-            </Show>
-          </div>
-        </Show>
-      </div>
-    </Show>
-  )
-}

src/components/Editor/EditorToolbar/ToolbarControl.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import { JSX } from 'solid-js'
 import { Popover } from '~/components/_shared/Popover'
 
-import styles from '../SimplifiedEditor.module.scss'
+import styles from '../MiniEditor/MiniEditor.module.scss'
 
 interface ControlProps {
   editor: Editor

src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.scss

@@ -1,4 +0,0 @@
-.LinkBubbleMenu {
-  background: var(--editor-bubble-menu-background);
-  box-shadow: 0 4px 10px rgba(#000, 0.25);
-}

src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.tsx

@@ -1,19 +0,0 @@
-import type { Editor } from '@tiptap/core'
-
-import { InsertLinkForm } from '../InsertLinkForm'
-
-import styles from './LinkBubbleMenu.module.scss'
-
-type Props = {
-  editor: Editor
-  ref: (el: HTMLDivElement) => void
-  onClose: () => void
-}
-
-export const LinkBubbleMenuModule = (props: Props) => {
-  return (
-    <div ref={props.ref} class={styles.LinkBubbleMenu}>
-      <InsertLinkForm editor={props.editor} onClose={props.onClose} />
-    </div>
-  )
-}

src/components/Editor/LinkBubbleMenu/index.ts

@@ -1 +0,0 @@
-export { LinkBubbleMenuModule } from './LinkBubbleMenu.module'

src/components/Editor/MicroEditor/MicroEditor.tsx

@@ -5,7 +5,7 @@ import { createTiptapEditor, useEditorHTML, useEditorIsFocused } from 'solid-tip
 import { minimal } from '~/lib/editorExtensions'
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar'
 
-import styles from '../SimplifiedEditor.module.scss'
+import styles from '../MiniEditor/MiniEditor.module.scss'
 
 interface MicroEditorProps {
   content?: string
@@ -36,7 +36,7 @@ export const MicroEditor = (props: MicroEditorProps): JSX.Element => {
   createEffect(on(html, (c?: string) => c && props.onChange?.(c)))
 
   return (
-    <div class={clsx(styles.SimplifiedEditor, styles.bordered, { [styles.isFocused]: isFocused() })}>
+    <div class={clsx(styles.MiniEditor, styles.bordered, { [styles.isFocused]: isFocused() })}>
       <div>
         <EditorToolbar editor={editor} mode={'micro'} />
         <div id="micro-editor" ref={setEditorElement} style={styles.minimal} />

src/components/Editor/MiniEditor/MiniEditor.module.scss

@@ -1,4 +1,4 @@
-.SimplifiedEditor {
+.MiniEditor {
   width: 100%;
   display: flex;
   flex-direction: column;

src/components/Editor/MiniEditor/MiniEditor.tsx

@@ -3,12 +3,12 @@ import Placeholder from '@tiptap/extension-placeholder'
 import clsx from 'clsx'
 import { type JSX, Show, createEffect, createSignal, on } from 'solid-js'
 import { createEditorTransaction, createTiptapEditor, useEditorHTML } from 'solid-tiptap'
+import { Button } from '~/components/_shared/Button'
+import { useLocalize } from '~/context/localize'
 import { base } from '~/lib/editorExtensions'
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar'
 
-import { Button } from '~/components/_shared/Button'
+import styles from './MiniEditor.module.scss'
-import { useLocalize } from '~/context/localize'
-import styles from '../SimplifiedEditor.module.scss'
 
 interface MiniEditorProps {
   content?: string
@@ -58,7 +58,7 @@ export default function MiniEditor(props: MiniEditorProps): JSX.Element {
   }
 
   return (
-    <div class={clsx(styles.SimplifiedEditor, styles.bordered, { [styles.isFocused]: isFocused() })}>
+    <div class={clsx(styles.MiniEditor, styles.bordered, { [styles.isFocused]: isFocused() })}>
       <div>
         <div id="mini-editor" ref={setEditorElement} />
 

src/components/Editor/SimplifiedEditor.tsx

@@ -1,244 +0,0 @@
-import { Editor, FocusPosition } from '@tiptap/core'
-import { BubbleMenu } from '@tiptap/extension-bubble-menu'
-import { CharacterCount } from '@tiptap/extension-character-count'
-import { Placeholder } from '@tiptap/extension-placeholder'
-import { clsx } from 'clsx'
-import { Show, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import { createEditorTransaction, useEditorHTML, useEditorIsEmpty, useEditorIsFocused } from 'solid-tiptap'
-import { useEditorContext } from '~/context/editor'
-import { useUI } from '~/context/ui'
-import { base, custom } from '~/lib/editorExtensions'
-import { useEscKeyDownHandler } from '~/lib/useEscKeyDownHandler'
-import { UploadedFile } from '~/types/upload'
-import { UploadModalContent } from '../Upload/UploadModalContent'
-import { renderUploadedImage } from '../Upload/renderUploadedImage'
-import { Modal } from '../_shared/Modal/Modal'
-import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
-import { ToolbarControls } from './EditorToolbar/SimplifiedToolbar'
-import { LinkBubbleMenuModule } from './LinkBubbleMenu'
-import { TextBubbleMenu } from './TextBubbleMenu'
-
-import styles from './Editor.module.scss'
-
-export type SimplifiedEditorProps = {
-  placeholder: string
-  initialContent?: string
-  label?: string
-  onSubmit?: (text: string) => void
-  onCancel?: () => void
-  onChange?: (text: string) => void
-  variant?: 'minimal' | 'bordered'
-  maxLength?: number
-  noLimits?: boolean
-  maxHeight?: number
-  submitButtonText?: string
-  quoteEnabled?: boolean
-  imageEnabled?: boolean
-  setClear?: boolean
-  resetToInitial?: boolean
-  smallHeight?: boolean
-  submitByCtrlEnter?: boolean
-  hideToolbar?: boolean
-  controlsAlwaysVisible?: boolean
-  autoFocus?: boolean
-  isCancelButtonVisible?: boolean
-  isPosting?: boolean
-}
-
-const DEFAULT_MAX_LENGTH = 400
-
-const SimplifiedEditor = (props: SimplifiedEditorProps) => {
-  // local signals
-  const [counter, setCounter] = createSignal<number>(0)
-  const [shouldShowLinkBubbleMenu, setShouldShowLinkBubbleMenu] = createSignal(false)
-  const [shouldShowTextBubbleMenu, setShouldShowTextBubbleMenu] = createSignal(false)
-  const [editorElement, setEditorElement] = createSignal<HTMLDivElement | undefined>()
-  const [textBubbleMenuRef, setTextBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
-  const [linkBubbleMenuRef, setLinkBubbleMenuRef] = createSignal<HTMLDivElement | undefined>()
-
-  // contexts
-  const { hideModal } = useUI()
-  const { editor, createEditor } = useEditorContext()
-
-  const initEditor = (element?: HTMLElement) => {
-    if (element instanceof HTMLElement && editor()?.options.element !== element) {
-      const opts = {
-        element,
-        extensions: [
-          // common extensions
-          ...base,
-          ...custom,
-
-          // setup from component props
-          Placeholder.configure({ emptyNodeClass: styles.emptyNode, placeholder: props.placeholder }),
-          CharacterCount.configure({ limit: props.noLimits ? undefined : props.maxLength }),
-
-          // bubble menu 1
-          BubbleMenu.configure({
-            pluginKey: 'bubble-menu',
-            element: textBubbleMenuRef(),
-            shouldShow: ({ view }) => view.hasFocus() && shouldShowTextBubbleMenu()
-          }),
-
-          // bubble menu 2
-          BubbleMenu.configure({
-            pluginKey: 'bubble-link-input',
-            element: linkBubbleMenuRef(),
-            shouldShow: ({ state }) => !state.selection.empty && shouldShowLinkBubbleMenu(),
-            tippyOptions: { placement: 'bottom' }
-          })
-        ],
-        editorProps: {
-          attributes: { class: styles.simplifiedEditorField }
-        },
-        content: props.initialContent || '',
-        onCreate: () => console.info('[SimplifiedEditor] created'),
-        onContentError: console.error,
-        autofocus: (props.autoFocus && 'end') as FocusPosition | undefined,
-        editable: true,
-        enableCoreExtensions: true,
-        enableContentCheck: true,
-        injectNonce: undefined, // TODO: can be useful copyright/copyleft mark
-        parseOptions: undefined // see: https://prosemirror.net/docs/ref/#model.ParseOptions
-      }
-
-      createEditor(opts)
-    }
-  }
-
-  // editor observers
-  const isEmpty = useEditorIsEmpty(editor)
-  const isFocused = useEditorIsFocused(editor)
-  const selection = createEditorTransaction(editor, (ed) => ed?.state.selection)
-  const html = useEditorHTML(editor)
-
-  /// EFFECTS ///
-
-  // Mount event listeners for handling key events and clean up on component unmount
-  onMount(() => {
-    window.addEventListener('keydown', handleKeyDown)
-    onCleanup(() => {
-      window.removeEventListener('keydown', handleKeyDown)
-      editor()?.destroy()
-    })
-  })
-
-  // watch changes
-  createEffect(on(editorElement, initEditor, { defer: true })) // element -> editorOptions -> set editor
-  createEffect(
-    on(selection, (s?: Editor['state']['selection']) => s && setShouldShowTextBubbleMenu(!s?.empty))
-  )
-  createEffect(
-    on(
-      () => props.setClear,
-      (x?: boolean) => x && editor()?.commands.clearContent(true)
-    )
-  )
-  createEffect(
-    on(
-      () => props.resetToInitial,
-      (x?: boolean) => x && editor()?.commands.setContent(props.initialContent || '')
-    )
-  )
-  createEffect(on([html, () => props.onChange], ([c, handler]) => c && handler && handler(c))) // onChange
-  createEffect(on(html, (c?: string) => c && setCounter(editor()?.storage.characterCount.characters()))) //counter
-
-  /// HANDLERS ///
-
-  const handleImageRender = (image?: UploadedFile) => {
-    image && renderUploadedImage(editor() as Editor, image)
-    hideModal()
-  }
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (
-      isFocused() &&
-      !isEmpty() &&
-      event.code === 'Enter' &&
-      props.submitByCtrlEnter &&
-      (event.metaKey || event.ctrlKey)
-    ) {
-      event.preventDefault()
-      props.onSubmit?.(html() || '')
-    }
-  }
-
-  const handleHideLinkBubble = () => {
-    editor()?.commands.focus()
-    setShouldShowLinkBubbleMenu(false)
-  }
-
-  useEscKeyDownHandler(handleHideLinkBubble)
-
-  return (
-    <ShowOnlyOnClient>
-      <div
-        class={clsx(styles.SimplifiedEditor, {
-          [styles.smallHeight]: props.smallHeight,
-          [styles.minimal]: props.variant === 'minimal',
-          [styles.bordered]: props.variant === 'bordered',
-          [styles.isFocused]: isFocused() || !isEmpty(),
-          [styles.labelVisible]: props.label && counter() > 0
-        })}
-      >
-        {/* Display label when applicable */}
-        <Show when={props.label && counter() > 0}>
-          <div class={styles.label}>{props.label}</div>
-        </Show>
-
-        <Show
-          when={props.hideToolbar}
-          fallback={
-            <ToolbarControls {...props} setShouldShowLinkBubbleMenu={setShouldShowLinkBubbleMenu} />
-          }
-        >
-          <TextBubbleMenu
-            editor={editor() as Editor}
-            ref={setTextBubbleMenuRef}
-            shouldShow={shouldShowTextBubbleMenu()}
-            isCommonMarkup={true}
-          />
-
-          {/* Link bubble menu */}
-          <Show when={shouldShowLinkBubbleMenu()}>
-            <LinkBubbleMenuModule
-              editor={editor() as Editor}
-              ref={setLinkBubbleMenuRef}
-              onClose={handleHideLinkBubble}
-            />
-          </Show>
-        </Show>
-
-        {/* editor element */}
-        <div
-          style={
-            props.maxHeight
-              ? {
-                  overflow: 'auto',
-                  'max-height': `${props.maxHeight}px`
-                }
-              : undefined
-          }
-          ref={setEditorElement}
-        />
-
-        {/* Display character limit if maxLength is provided */}
-        <Show when={props.maxLength && editor()}>
-          <div class={styles.limit}>{(props.maxLength || DEFAULT_MAX_LENGTH) - counter()}</div>
-        </Show>
-
-        {/* Image upload modal (show/hide) */}
-        <Show when={props.imageEnabled}>
-          <Portal>
-            <Modal variant="narrow" name="simplifiedEditorUploadImage">
-              <UploadModalContent onClose={handleImageRender} />
-            </Modal>
-          </Portal>
-        </Show>
-      </div>
-    </ShowOnlyOnClient>
-  )
-}
-
-export default SimplifiedEditor // Export component for lazy loading

src/components/Editor/TextBubbleMenu/index.ts

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

src/components/Editor/index.ts

@@ -1,4 +0,0 @@
-export { EditorComponent as Editor } from './Editor'
-export { Panel } from './Panel'
-export { TopicSelect } from '../TopicSelect'
-export { UploadModalContent } from '../Upload/UploadModalContent'

src/components/Views/EditView/EditSettingsView.tsx

@@ -3,6 +3,7 @@ import deepEqual from 'fast-deep-equal'
 import { Show, createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { debounce } from 'throttle-debounce'
+import { Panel } from '~/components/Editor/Panel/Panel'
 import { Icon } from '~/components/_shared/Icon'
 import { InviteMembers } from '~/components/_shared/InviteMembers'
 import { ShoutForm, useEditorContext } from '~/context/editor'
@@ -12,7 +13,6 @@ import getMyShoutQuery from '~/graphql/query/core/article-my'
 import type { Shout, Topic } from '~/graphql/schema/core.gen'
 import { isDesktop } from '~/lib/mediaQuery'
 import { clone } from '~/utils/clone'
-import { Panel } from '../../Editor'
 import { AutoSaveNotice } from '../../Editor/AutoSaveNotice'
 import { Modal } from '../../_shared/Modal'
 import { TableOfContents } from '../../_shared/TableOfContents'

src/components/Views/EditView/EditView.tsx

@@ -3,6 +3,8 @@ import deepEqual from 'fast-deep-equal'
 import { Show, createEffect, createSignal, lazy, on, onCleanup, onMount } from 'solid-js'
 import { createStore } from 'solid-js/store'
 import { debounce } from 'throttle-debounce'
+import { EditorComponent } from '~/components/Editor/Editor'
+import { Panel } from '~/components/Editor/Panel/Panel'
 import { DropArea } from '~/components/_shared/DropArea'
 import { Icon } from '~/components/_shared/Icon'
 import { InviteMembers } from '~/components/_shared/InviteMembers'
@@ -20,7 +22,6 @@ import { isDesktop } from '~/lib/mediaQuery'
 import { LayoutType } from '~/types/common'
 import { MediaItem } from '~/types/mediaitem'
 import { clone } from '~/utils/clone'
-import { Editor as EditorComponent, Panel } from '../../Editor'
 import { AutoSaveNotice } from '../../Editor/AutoSaveNotice'
 import { AudioUploader } from '../../Upload/AudioUploader'
 import { VideoUploader } from '../../Upload/VideoUploader'

src/components/Views/PublishSettings/PublishSettings.tsx

@@ -12,9 +12,10 @@ import { useTopics } from '~/context/topics'
 import { useSnackbar, useUI } from '~/context/ui'
 import { Topic } from '~/graphql/schema/core.gen'
 import { UploadedFile } from '~/types/upload'
-import { TopicSelect, UploadModalContent } from '../../Editor'
 import { Modal } from '../../_shared/Modal'
 
+import { TopicSelect } from '~/components/TopicSelect/TopicSelect'
+import { UploadModalContent } from '~/components/Upload/UploadModalContent/UploadModalContent'
 import stylesBeside from '../../Feed/Beside.module.scss'
 import styles from './PublishSettings.module.scss'