diff --git a/openmetadata-ui/src/main/resources/ui/package.json b/openmetadata-ui/src/main/resources/ui/package.json index 0ddb23de2f0..243c006a27e 100644 --- a/openmetadata-ui/src/main/resources/ui/package.json +++ b/openmetadata-ui/src/main/resources/ui/package.json @@ -60,6 +60,7 @@ "postcss": "^8.3.2", "process": "^0.11.10", "prop-types": "^15.7.2", + "quill-emoji": "^0.2.0", "quill-mention": "^3.1.0", "quilljs-markdown": "^1.1.10", "rc-tree": "^5.4.3", diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css index 1c44f7f0fff..8705005cd9b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css +++ b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.css @@ -1055,3 +1055,11 @@ align-items: center; height: 40px; } + +button.ql-emoji { + vertical-align: bottom; +} +#tab-panel { + gap: 4px; + margin-top: 8px; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx index a819a5f16a7..a5ee1589e03 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx @@ -12,6 +12,8 @@ */ import classNames from 'classnames'; +import Emoji from 'quill-emoji'; +import 'quill-emoji/dist/quill-emoji.css'; import 'quill-mention'; import QuillMarkdown from 'quilljs-markdown'; import React, { @@ -34,6 +36,7 @@ import { editorRef } from '../common/rich-text-editor/RichTextEditor.interface'; import './FeedEditor.css'; Quill.register('modules/markdownOptions', QuillMarkdown); +Quill.register('modules/emoji', Emoji); const Delta = Quill.import('delta'); // eslint-disable-next-line @typescript-eslint/no-explicit-any const strikethrough = (_node: any, delta: typeof Delta) => { @@ -76,6 +79,7 @@ export const FeedEditor = forwardRef( insertRef: insertRef, }, }, + 'emoji-toolbar': true, mention: { allowedChars: MENTION_ALLOWED_CHARS, mentionDenotationChars: MENTION_DENOTATION_CHARS, diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts index 878de33c60a..95d0d8166cf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/feed.constants.ts @@ -55,5 +55,5 @@ export const TOOLBAR_ITEMS = [ ['blockquote', 'code-block'], [{ list: 'ordered' }, { list: 'bullet' }], ['link'], - ['insertMention', 'insertRef'], + ['insertMention', 'insertRef', 'emoji'], ]; diff --git a/openmetadata-ui/src/main/resources/ui/src/react-app-env.d.ts b/openmetadata-ui/src/main/resources/ui/src/react-app-env.d.ts index 8df5cb14a56..f9576a31cda 100644 --- a/openmetadata-ui/src/main/resources/ui/src/react-app-env.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/react-app-env.d.ts @@ -28,3 +28,4 @@ declare module 'dagre'; declare module 'turndown'; declare module 'quilljs-markdown'; declare module 'quill-mention'; +declare module 'quill-emoji'; diff --git a/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js b/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js index 01afb81929c..bf80b07a79a 100644 --- a/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js +++ b/openmetadata-ui/src/main/resources/ui/webpack.config.dev.js @@ -100,6 +100,7 @@ module.exports = { path.resolve(__dirname, 'node_modules/codemirror'), path.resolve(__dirname, 'node_modules/rc-tree'), path.resolve(__dirname, 'node_modules/react-toastify'), + path.resolve(__dirname, 'node_modules/quill-emoji'), ], // May need to handle files outside the source code // (from node_modules) @@ -125,6 +126,7 @@ module.exports = { include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/slick-carousel'), + path.resolve(__dirname, 'node_modules/quill-emoji'), ], // Just the source code }, // Font files to be handled by file-loader diff --git a/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js b/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js index 0812ed9586c..f2c8827189b 100644 --- a/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js +++ b/openmetadata-ui/src/main/resources/ui/webpack.config.prod.js @@ -94,6 +94,7 @@ module.exports = { path.resolve(__dirname, 'node_modules/codemirror'), path.resolve(__dirname, 'node_modules/rc-tree'), path.resolve(__dirname, 'node_modules/react-toastify'), + path.resolve(__dirname, 'node_modules/quill-emoji'), ], // May need to handle files outside the source code // (from node_modules) @@ -119,6 +120,7 @@ module.exports = { include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/slick-carousel'), + path.resolve(__dirname, 'node_modules/quill-emoji'), ], // Just the source code }, // Font files to be handled by file-loader diff --git a/openmetadata-ui/src/main/resources/ui/yarn.lock b/openmetadata-ui/src/main/resources/ui/yarn.lock index 76c5153da30..f820aee4bac 100644 --- a/openmetadata-ui/src/main/resources/ui/yarn.lock +++ b/openmetadata-ui/src/main/resources/ui/yarn.lock @@ -3012,6 +3012,11 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv json-schema-traverse "^0.4.1" uri-js "^4.2.2" +amdefine@>=0.0.4: + version "1.0.1" + resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" + integrity sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg== + ansi-colors@^3.0.0: version "3.2.4" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf" @@ -4071,6 +4076,14 @@ classnames@*, classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^ resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== +clean-css@^3.4.20: + version "3.4.28" + resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-3.4.28.tgz#bf1945e82fc808f55695e6ddeaec01400efd03ff" + integrity sha512-aTWyttSdI2mYi07kWqHi24NUU9YlELFKGOAgFzZjDN1064DMAOy2FBuoyGmkKRlXkbpXd0EVHmiVkbKhKoirTw== + dependencies: + commander "2.8.x" + source-map "0.4.x" + clean-css@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" @@ -4284,6 +4297,13 @@ comma-separated-tokens@^2.0.0: resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.2.tgz#d4c25abb679b7751c880be623c1179780fe1dd98" integrity sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg== +commander@2.8.x: + version "2.8.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4" + integrity sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ= + dependencies: + graceful-readlink ">= 1.0.0" + commander@^2.19.0, commander@^2.20.0: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" @@ -5404,6 +5424,19 @@ emittery@^0.7.1: resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82" integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ== +emoji-data-css@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/emoji-data-css/-/emoji-data-css-1.0.1.tgz#4f95b48394b58571ed3284acfa709ea511875f8f" + integrity sha1-T5W0g5S1hXHtMoSs+nCepRGHX48= + dependencies: + clean-css "^3.4.20" + emoji-datasource "^2.4.4" + +emoji-datasource@^2.4.4: + version "2.4.4" + resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-2.4.4.tgz#b97ac1896bc208ecf1833564a20687a5215d0389" + integrity sha1-uXrBiWvCCOzxgzVkogaHpSFdA4k= + emoji-regex@^7.0.1: version "7.0.3" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -6560,6 +6593,11 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= +fuse.js@^3.3.0: + version "3.6.1" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c" + integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw== + gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" @@ -6745,6 +6783,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== +"graceful-readlink@>= 1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725" + integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU= + grapheme-splitter@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" @@ -11287,6 +11330,14 @@ quill-delta@^3.6.2: extend "^3.0.2" fast-diff "1.1.2" +quill-emoji@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/quill-emoji/-/quill-emoji-0.2.0.tgz#2d8b830cfd3389a408100f3b7de8d656da74d06f" + integrity sha512-0kqHKTFA9hk1Vf5g32KBm/NYZal6n9N/ATmk13Hka/XYsgrEIaShSR84B5VMB7bg5o9+TMeIzc+wey5OP7hv+A== + dependencies: + emoji-data-css "^1.0.1" + fuse.js "^3.3.0" + quill-mention@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/quill-mention/-/quill-mention-3.1.0.tgz#acf0bf21524b627e9304f63534e6d2b8c59ab4fd" @@ -12888,6 +12939,13 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56" integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw== +source-map@0.4.x: + version "0.4.4" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" + integrity sha1-66T12pwNyZneaAMti092FzZSA2s= + dependencies: + amdefine ">=0.0.4" + source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"