search

outline / rich-markdown-editor

The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:
https://www.getoutline.com
BSD 3-Clause "New" or "Revised" License
2.87k stars 588 forks source link

feat: emoji #514

Closed JiangWeixian closed 2 years ago

JiangWeixian commented 3 years ago

https://github.com/outline/rich-markdown-editor/issues/175

emoji

tommoor commented 3 years ago

Anything I can do to help here? Thanks~

JiangWeixian commented 3 years ago

Anything I can do to help here? Thanks~

😂 sorry, I a little bit busy recently, this pr almost done, i will check some details as quick as possible

tommoor commented 3 years ago

I found this replacement issue when testing:

https://user-images.githubusercontent.com/380914/131065962-d48730f2-2d6b-4b32-90b6-16b839c3f071.mp4

tommoor commented 3 years ago

Hey hey, just testing out the branch and when I go to insert an emoji it always places the text undefined instead…

JiangWeixian commented 3 years ago

Hey hey, just testing out the branch and when I go to insert an emoji it always places the text undefined instead…

https://user-images.githubusercontent.com/6839576/132935748-66123f07-774a-48a3-8099-88a0a75b87c5.mp4

tommoor commented 2 years ago

I had to make a couple of local fixes, but squashed and merged here – bbaf1574d2680e9eedec95d9afee77f849777bdd

Thank you!

tommoor commented 2 years ago

Unfortunately the published version with this merged doesn't seem to work because of gemoji – I haven't yet figured out how to work around it.

[api] node:internal/modules/cjs/loader:1126
[api]       throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
[api]       ^
[api]
[api] Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/tom/Projects/outline/node_modules/gemoji/index.js
[api] require() of ES modules is not supported.
[api] require() of /Users/tom/Projects/outline/node_modules/gemoji/index.js from /Users/tom/Projects/outline/node_modules/rich-markdown-editor/dist/components/EmojiMenu.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
[api] Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/tom/Projects/outline/node_modules/gemoji/package.json.
[api]
JiangWeixian commented 2 years ago

😓 it looks require esm not supported, i will try changed tsconfig.json: module https://www.typescriptlang.org/tsconfig#es6

JiangWeixian commented 2 years ago

its wired, i try it on my webpack project, it works fine

tommoor commented 2 years ago

What did you change? Changing module: es6 here prevents the lib from building

JiangWeixian commented 2 years ago

What did you change? Changing module: es6 here prevents the lib from building

i did not change yet, just download v11.18.0, there is mini app https://github.com/JiangWeixian/esm-app

tommoor commented 2 years ago

Ah, okay. It no longer works in outline, so it likely won't work in many other projects.

JiangWeixian commented 2 years ago

Ah, okay. It no longer works in outline, so it likely won't work in many other projects.

I try it on react-scripts, it works fine. Is there any mini repo contain this error 🙈.

tommoor commented 2 years ago

I'm not sure, Outline is not a complicated build system – https://github.com/outline/outline/blob/main/server/.babelrc

I pretty much lost my whole evening to this, so signing off for now.

JiangWeixian commented 2 years ago

(Maybe) Solution 1

convert outline server to native esm

Solution 2

I lock gemoji version to cjs version https://github.com/outline/rich-markdown-editor/pull/555

guatedude2 commented 2 years ago

Any idea why I'm getting this error when I run tests within my project?

 FAIL  apps/registration/src/legacy/components/WelcomeText/WelcomeText.test.tsx
  ● Test suite failed to run

    Cannot find module 'gemoji/name-to-emoji' from 'node_modules/rich-markdown-editor/dist/nodes/Emoji.js'

    Require stack:
      node_modules/rich-markdown-editor/dist/nodes/Emoji.js
      node_modules/rich-markdown-editor/dist/index.js
      packages/ui/src/components/content/RichContentEditor/BaseEditor.tsx
      packages/ui/src/components/content/Markdown/Markdown.tsx
      packages/ui/src/components/content/Markdown/index.ts
      packages/ui/src/components/index.ts
      apps/registration/src/legacy/components/WelcomeText/WelcomeText.tsx
      apps/registration/src/legacy/components/WelcomeText/index.ts
      apps/registration/src/legacy/components/WelcomeText/WelcomeText.test.tsx

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/rich-markdown-editor/src/nodes/Emoji.tsx:3:1)

Rich Markdown Editor version: "rich-markdown-editor": "^11.18.2"

I tried resetting the lock file and event installing gemoji without success.

JiangWeixian commented 2 years ago

@tommoor @guatedude2 took look at this pr https://github.com/outline/rich-markdown-editor/pull/557, fix this issue....

guatedude2 commented 2 years ago

@tommoor @guatedude2 took look at this pr #557, fix this issue....

Thanks @JiangWeixian I'll keep an eye out on the PR!