This is some initial content in the editor.
' + content: 'This is some initial content', + limit: 500, + placeholder: 'Start typing here...' + } +} + +export const WithCharacterLimit: Story = { + args: { + content: '', + limit: 50, + placeholder: 'You have a 50 character limit...' + } +} + +export const WithCustomPlaceholder: Story = { + args: { + content: '', + limit: 500, + placeholder: 'Custom placeholder here...' } } diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 81d31163..b49b2799 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -4,14 +4,7 @@ import { BubbleMenu } from '@tiptap/extension-bubble-menu' import { CharacterCount } from '@tiptap/extension-character-count' import { Collaboration } from '@tiptap/extension-collaboration' import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor' -import { Dropcursor } from '@tiptap/extension-dropcursor' import { FloatingMenu } from '@tiptap/extension-floating-menu' -import Focus from '@tiptap/extension-focus' -import { Gapcursor } from '@tiptap/extension-gapcursor' -import { HardBreak } from '@tiptap/extension-hard-break' -import { Highlight } from '@tiptap/extension-highlight' -import { HorizontalRule } from '@tiptap/extension-horizontal-rule' -import { Image } from '@tiptap/extension-image' import { Placeholder } from '@tiptap/extension-placeholder' import { Show, createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js' import uniqolor from 'uniqolor' @@ -21,23 +14,14 @@ import { useLocalize } from '~/context/localize' import { useSession } from '~/context/session' import { useSnackbar } from '~/context/ui' import { Author } from '~/graphql/schema/core.gen' +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 { ArticleNode } from './extensions/Article' -import { CustomBlockquote } from './extensions/CustomBlockquote' -import { Figcaption } from './extensions/Figcaption' -import { Figure } from './extensions/Figure' -import { Footnote } from './extensions/Footnote' -import { Iframe } from './extensions/Iframe' -import { Span } from './extensions/Span' -import { ToggleTextWrap } from './extensions/ToggleTextWrap' -import { TrailingNode } from './extensions/TrailingNode' -import { renderUploadedImage } from './renderUploadedImage' -import './Prosemirror.scss' -import { base } from '~/lib/editorOptions' +import './Editor.module.scss' export type EditorComponentProps = { shoutId: number @@ -118,26 +102,11 @@ export const EditorComponent = (props: EditorComponentProps) => { }, extensions: [ ...base, + ...custom, + ...extended, - HorizontalRule.configure({ HTMLAttributes: { class: 'horizontalRule' } }), - Dropcursor, - CustomBlockquote, - Span, - ToggleTextWrap, Placeholder.configure({ placeholder: t('Add a link or click plus to embed media') }), - Focus, - Gapcursor, - HardBreak, - Highlight.configure({ multicolor: true, HTMLAttributes: { class: 'highlight' } }), - Image, - Iframe, - Figure, - Figcaption, - Footnote, - ToggleTextWrap, CharacterCount.configure(), // https://github.com/ueberdosis/tiptap/issues/2589#issuecomment-1093084689 - TrailingNode, - ArticleNode, // menus diff --git a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx index c455a053..b2a2876a 100644 --- a/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx +++ b/src/components/Editor/EditorFloatingMenu/EditorFloatingMenu.tsx @@ -1,15 +1,14 @@ import type { Editor } from '@tiptap/core' import { Show, createEffect, createSignal } from 'solid-js' - -import { renderUploadedImage } from '~/components/Editor/renderUploadedImage' +import { renderUploadedImage } from '~/components/Upload/renderUploadedImage' import { Icon } from '~/components/_shared/Icon' import { useLocalize } from '~/context/localize' import { useUI } from '~/context/ui' import { useOutsideClickHandler } from '~/lib/useOutsideClickHandler' import { UploadedFile } from '~/types/upload' +import { UploadModalContent } from '../../Upload/UploadModalContent' +import { InlineForm } from '../../_shared/InlineForm' import { Modal } from '../../_shared/Modal' -import { InlineForm } from '../InlineForm' -import { UploadModalContent } from '../UploadModalContent' import { Menu } from './Menu' import type { MenuItem } from './Menu/Menu' diff --git a/src/components/Editor/EditorToolbar.tsx b/src/components/Editor/EditorToolbar.tsx deleted file mode 100644 index ec4c2f2b..00000000 --- a/src/components/Editor/EditorToolbar.tsx +++ /dev/null @@ -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 ( -