feat: emoji #514

JiangWeixian · 2021-08-04T15:02:57Z

#175

tommoor · 2021-08-12T05:29:58Z

Anything I can do to help here? Thanks~

JiangWeixian · 2021-08-12T15:09:24Z

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

src/nodes/Blockquote.ts

tommoor · 2021-08-27T03:10:01Z

I found this replacement issue when testing:

Kapture.2021-08-26.at.19.34.12.mp4

tommoor · 2021-08-27T02:34:41Z

package.json

@@ -9,6 +9,7 @@
  "scripts": {
    "test": "jest",
    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet",
+    "lint:fox": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",


Please remove as lint --fix works

tommoor · 2021-08-27T02:36:41Z

src/components/EmojiMenu.tsx

+  insertItem = item => {
+    this.insertBlock(item);
+  };


This method isn't needed, insertEmoji?

tommoor · 2021-08-27T02:39:00Z

src/components/EmojiMenu.tsx

+        >
+          <List>
+            {items.map((item, index) => {
+              if (item.name === "separator") {


I love that you've made it look like the block insert menu, a lot of this is copied straight over which means it's begging for an abstraction so that the code can be reused between popover menus such as @mentions in the future too

Thx, i will make an abstraction to reused code between emoji and block

tommoor · 2021-08-27T03:11:06Z

src/components/EmojiMenuItem.tsx

+      onClick={disabled ? undefined : onClick}
+      ref={ref}
+    >
+      &nbsp;&nbsp;{title}


I think the title needs to include the string eg "grinning" next to the emoji, kind of like GitHub – it will help it to look a little nicer too. The emoji might want bumping up in size a touch.

now, it look like this

poitch · 2021-08-29T01:54:05Z

src/index.tsx

@@ -314,6 +318,10 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
            dictionary,
            onShowToast: this.props.onShowToast,
          }),
+          new Emoji({


You will need add emoji to disableExtensions in props.

thx, i will~

poitch · 2021-08-29T02:00:34Z

src/plugins/EmojiTrigger.tsx

+        console.log(
+          match &&
+            state.selection.$from.parent.type.name === "paragraph" &&
+            !isInTable(state),
+          match
+        );


Another debug statement left behind

JiangWeixian · 2021-08-29T14:09:20Z

src/plugins/EmojiTrigger.tsx

@@ -0,0 +1,92 @@
+import { InputRule } from "prosemirror-inputrules";


BlockMenuTrigger and EmojiTrigger has lot of copy/paste code, but i not sure to create a common plugin or common trigger extension

src/components/BlockMenuItem.tsx

JiangWeixian · 2021-08-29T14:13:40Z

src/components/BlockMenu.tsx

-  selectedIndex: number;
-};
-
-class BlockMenu extends React.Component<Props, State> {


this maybe a big change, EmojiMenu BlockMenu wii reuse CommonBlockMenu

JiangWeixian · 2021-08-29T14:14:12Z

src/components/CommonBlockMenu.tsx

+      onClick: () => void;
+    }
+  ) => React.ReactNode;
+  filterable?: boolean;


filter items by search

JiangWeixian · 2021-08-29T14:14:24Z

src/components/CommonBlockMenu.tsx

+    }
+  ) => React.ReactNode;
+  filterable?: boolean;
+  items: T[];


render menu item list

JiangWeixian · 2021-08-29T14:15:11Z

src/components/CommonBlockMenu.tsx

+  onShowToast?: (message: string, id: string) => void;
+  onLinkToolbarOpen?: () => void;
+  onClose: () => void;
+  onClearSearch: () => void;


emojimenu and blockmenu has different clearsearch behavior

JiangWeixian · 2021-08-31T00:02:55Z

src/components/CommonBlockMenu.tsx

+
+    const ref = this.menuRef.current;
+    const offsetHeight = ref ? ref.offsetHeight : 0;
+    const node = findDomRefAtPos(selection.from, domAtPos);


emoji should allow insert inside para

tommoor

This is great – getting so close!

tommoor · 2021-08-31T06:17:57Z

package.json

@@ -26,8 +26,12 @@
  },
  "dependencies": {
    "copy-to-clipboard": "^3.0.8",
+    "fuzzy-search": "^3.2.1",
+    "gemoji": "^7.0.0",
+    "install": "^0.13.0",


Suggested change

"install": "^0.13.0",

Not needed, right?

src/nodes/Blockquote.ts

src/nodes/Emoji.tsx

tommoor · 2021-08-31T06:27:39Z

src/plugins/EmojiTrigger.tsx

+import Extension from "../lib/Extension";
+import { run } from "./BlockMenuTrigger";
+
+const OPEN_REGEX = /:([0-9a-zA-Z_]+)?$/;


I think we need to account for ":+" and ":-" starts in the regex here for thumbs up/down

src/nodes/Emoji.tsx

tommoor · 2021-08-31T06:31:39Z

src/components/EmojiMenuItem.tsx

+}) => {
+  return (
+    <Title>
+      {emoji}


Can we wrap the emoji to give it 16px size but keep the text size the same as the other menu?

tommoor · 2021-08-31T06:32:07Z

src/components/EmojiMenuItem.tsx

+  );
+}
+
+export default withTheme(EmojiMenuItem);


Suggested change

export default withTheme(EmojiMenuItem);

export default EmojiMenuItem;

Shouldn't need withTheme here

tommoor · 2021-08-31T06:33:08Z

src/components/EmojiMenu.tsx

+      return {
+        ...item,
+        name: "emoji",
+        title: name,


Is it possible to use "description" from gemoji here so that the text doesn't contain "_"?

maybe not.. gemoji description longer than name

{ "emoji": "😍", "names": ["heart_eyes"], "tags": ["love", "crush"], "description": "smiling face with heart-eyes", "category": "Smileys & Emotion" }

Mm, maybe we can humanize the name then? (Capitalize, remove underscores)

Feels very strange to show underscores in user facing UI. I know GitHub does it, but GitHub is weird.

maybe you are right, i will try it later.

tommoor · 2021-09-11T02:46:28Z

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

Co-authored-by: Tom Moor <tom.moor@gmail.com>

emoji component; regex; typo

JiangWeixian · 2021-09-11T03:40:09Z

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

emoji.mp4

tommoor · 2021-09-25T23:39:22Z

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

Thank you!

tommoor · 2021-09-26T02:08:17Z

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 · 2021-09-26T03:01:33Z

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

JiangWeixian · 2021-09-26T03:24:09Z

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

tommoor · 2021-09-26T03:30:03Z

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

JiangWeixian · 2021-09-26T03:39:31Z

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 · 2021-09-26T03:53:38Z

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

JiangWeixian · 2021-09-26T04:03:08Z

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 · 2021-09-26T04:39:57Z

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 · 2021-09-26T12:31:29Z

(Maybe) Solution 1

convert outline server to native esm

Solution 2

I lock gemoji version to cjs version #555

guatedude2 · 2021-09-27T02:12:08Z

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 · 2021-09-27T02:48:03Z

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

guatedude2 · 2021-09-27T02:52:40Z

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

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

JiangWeixian changed the title ~~chore: wip~~ feat: emoji Aug 4, 2021

JiangWeixian force-pushed the emoji branch from 9bde8c9 to da54f62 Compare August 14, 2021 02:46

JiangWeixian marked this pull request as ready for review August 14, 2021 02:49

poitch reviewed Aug 27, 2021

View reviewed changes

src/nodes/Blockquote.ts Outdated Show resolved Hide resolved

tommoor reviewed Aug 27, 2021

View reviewed changes

poitch reviewed Aug 29, 2021

View reviewed changes

JiangWeixian commented Aug 29, 2021

View reviewed changes

src/components/BlockMenuItem.tsx Show resolved Hide resolved

JiangWeixian commented Aug 29, 2021

View reviewed changes

src/components/CommonBlockMenu.tsx

}

) => React.ReactNode;

filterable?: boolean;

items: T[];

Copy link

Contributor Author

JiangWeixian Aug 29, 2021

Choose a reason for hiding this comment

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

render menu item list

JiangWeixian commented Aug 29, 2021

View reviewed changes

JiangWeixian commented Aug 31, 2021

View reviewed changes

JiangWeixian force-pushed the emoji branch from adb361f to 21ba26b Compare August 31, 2021 00:15

JiangWeixian requested a review from tommoor August 31, 2021 00:23

tommoor reviewed Aug 31, 2021

View reviewed changes

JiangWeixian requested a review from tommoor September 4, 2021 13:02

JiangWeixian added 8 commits September 11, 2021 11:19

chore: wip

034bd42

chore: add markdown it emoji

72c6976

feat: enable insert inline p

3706348

perf: use data-name

b421dcd

chore: lint fix

cbbace1

perf: remove debug code

9ad0907

fix: openregex

b0205cf

perf: common menu

982811d

JiangWeixian and others added 12 commits September 11, 2021 11:20

perf: trigger dom at pos

34a5999

feat: allow disable emoji

9f9911f

chore: lintfix

7c96571

fix: emoji should allow insert in table

fd0355e

Update src/nodes/Emoji.tsx

174152a

Co-authored-by: Tom Moor <tom.moor@gmail.com>

Update src/nodes/Emoji.tsx

8f1bb69

Co-authored-by: Tom Moor <tom.moor@gmail.com>

perf: emoji

80b23da

emoji component; regex; typo

perf: add containerid into deps

fc71122

fix: inputrules regex

9be8ff1

perf: use item description

044623a

fix: use item.name

114f992

chore: update latest blockmenu

5c73d1e

JiangWeixian force-pushed the emoji branch from 37b128d to 5c73d1e Compare September 11, 2021 03:25

fix: command mode undefined insert

26a2af0

JiangWeixian force-pushed the emoji branch from 739fa49 to 26a2af0 Compare September 11, 2021 04:04

tommoor closed this Sep 25, 2021

		@@ -0,0 +1,92 @@
		import { InputRule } from "prosemirror-inputrules";

	export default withTheme(EmojiMenuItem);
	export default EmojiMenuItem;

Uh oh!

feat: emoji #514

feat: emoji #514

Uh oh!

Conversation

JiangWeixian commented Aug 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tommoor commented Aug 12, 2021

Uh oh!

JiangWeixian commented Aug 12, 2021

Uh oh!

Uh oh!

tommoor commented Aug 27, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JiangWeixian Aug 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tommoor left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tommoor commented Sep 11, 2021

Uh oh!

JiangWeixian commented Aug 4, 2021 •

edited

Loading

JiangWeixian Aug 29, 2021 •

edited

Loading

JiangWeixian commented Sep 11, 2021 •

edited

Loading

tommoor commented Sep 26, 2021 •

edited

Loading

tommoor commented Sep 26, 2021 •

edited

Loading

guatedude2 commented Sep 27, 2021 •

edited

Loading

JiangWeixian commented Sep 27, 2021 •

edited

Loading