Skip to content

Added Emoji Support in Inline and Side Menu in Collaborative Text Editor #5825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Added Emoji Support in Inline and Side Menu in Collaborative Text Editor #5825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/text-editor/src/components/CollaborativeTextEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
themeStore
} from '@hcengineering/ui'
import view from '@hcengineering/view'
import activity from '../../../../plugins/activity'
import { AnyExtension, Editor, FocusPosition, mergeAttributes } from '@tiptap/core'
import Collaboration, { isChangeOrigin } from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
Expand Down Expand Up @@ -202,6 +203,9 @@
insertSeparatorLine: () => {
editor?.commands.setHorizontalRule()
},
insertEmoji: () => {
editor?.commands.setHorizontalRule()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you call setHorizontalRule here?

Copy link
Author

@namanvats namanvats Jun 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically, it was built to showcase that the functionality can be extended to add emoji support so adding it as place holder for review purposes if required, it can be easily extended to support emoji popups. The screenshot shows that emoji command can be added to this document and popups too can be called in place of setHorizontalRule which is a placeholder command for now

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even though we implemented it in this way, I don't think that's the right way of extending this menu.

  1. Currently this menu is supposed to insert only block elements. An emoji is an inline element and I don't see much value in inserting an emoji in the beginning of the line.
  2. The way we use to extend the menu requires a lot of boilerplate. I believe we need to have a single list of commands that will be used in both bubble menu, inline menu and this side menu.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On # 1 : Agree with you but many users are using it to start tech docs or quick start guides that's why added it in inline commands as well.

On # 2 : I followed the existing implementation flow as it was done and tried to extend this support but based upon your comment looks like there might be a need to implement it differently let me know if I can try that way.

},
focus: () => {
focus()
}
Expand Down Expand Up @@ -308,7 +312,8 @@
...(canEmbedImages ? [{ id: 'image', label: textEditorPlugin.string.Image, icon: view.icon.Image }] : []),
{ id: 'table', label: textEditorPlugin.string.Table, icon: view.icon.Table2 },
{ id: 'code-block', label: textEditorPlugin.string.CodeBlock, icon: view.icon.CodeBlock },
{ id: 'separator-line', label: textEditorPlugin.string.SeparatorLine, icon: view.icon.SeparatorLine }
{ id: 'separator-line', label: textEditorPlugin.string.SeparatorLine, icon: view.icon.SeparatorLine },
{ id: 'emoji', label: textEditorPlugin.string.Emoji, icon: activity.icon.Emoji }
],
handleSelect: handleLeftMenuClick
})
Expand Down Expand Up @@ -405,6 +410,9 @@
case 'separator-line':
editor.commands.setHorizontalRule()
break
case 'emoji':
editor.commands.setHorizontalRule()
break
}
}

Expand Down
3 changes: 3 additions & 0 deletions packages/text-editor/src/components/ReferenceInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,9 @@
insertSeparatorLine: () => {
textEditor?.insertSeparatorLine()
},
insertEmoji: () => {
textEditor?.insertSeparatorLine()
},
insertContent: (content) => {
textEditor?.insertContent(content)
},
Expand Down
3 changes: 3 additions & 0 deletions packages/text-editor/src/components/StyledTextBox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,9 @@
case 'separator-line':
textEditor.editorHandler.insertSeparatorLine()
break
case 'emoji':
textEditor.editorHandler.insertSeparatorLine()
break
}
}

Expand Down
3 changes: 3 additions & 0 deletions packages/text-editor/src/components/StyledTextEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@
insertSeparatorLine: () => {
textEditor?.insertSeparatorLine()
},
insertEmoji() {
textEditor?.insertSeparatorLine()
},
insertContent: (value, options) => {
textEditor?.insertContent(value, options)
},
Expand Down
5 changes: 5 additions & 0 deletions packages/text-editor/src/components/TextEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@
export function insertSeparatorLine (): void {
editor.commands.setHorizontalRule()
}

export function insertEmoji (): void {
editor.commands.setHorizontalRule()
}

export function insertContent (
value: Content,
options?: {
Expand Down
6 changes: 4 additions & 2 deletions packages/text-editor/src/components/extensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
//

import view from '@hcengineering/view'
import activity from '../../../../plugins/activity'
import { type Editor, type Range } from '@tiptap/core'

import { type CompletionOptions } from '../Completion'
Expand Down Expand Up @@ -129,7 +130,7 @@ export const completionConfig: Partial<CompletionOptions> = {
}
}

const inlineCommandsIds = ['image', 'table', 'code-block', 'separator-line'] as const
const inlineCommandsIds = ['image', 'table', 'code-block', 'separator-line', 'emoji'] as const
export type InlineCommandId = (typeof inlineCommandsIds)[number]

/**
Expand All @@ -146,7 +147,8 @@ export function inlineCommandsConfig (
{ id: 'image', label: plugin.string.Image, icon: view.icon.Image },
{ id: 'table', label: plugin.string.Table, icon: view.icon.Table2 },
{ id: 'code-block', label: plugin.string.CodeBlock, icon: view.icon.CodeBlock },
{ id: 'separator-line', label: plugin.string.SeparatorLine, icon: view.icon.SeparatorLine }
{ id: 'separator-line', label: plugin.string.SeparatorLine, icon: view.icon.SeparatorLine },
{ id: 'emoji', label: plugin.string.Emoji, icon: activity.icon.Emoji}
].filter(({ id }) => !excludedCommands.includes(id as InlineCommandId))
},
command: ({ editor, range, props }: { editor: Editor, range: Range, props: any }) => {
Expand Down
1 change: 1 addition & 0 deletions packages/text-editor/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface TextEditorHandler {
insertTable: (options: { rows?: number, cols?: number, withHeaderRow?: boolean }) => void
insertCodeBlock: (pos?: number) => void
insertSeparatorLine: () => void
insertEmoji: () => void
insertContent: (
value: Content,
options?: {
Expand Down