Edit option (#1447)

* add func to parse html to editor input

* add  plain to html input function

* re-construct markdown

* fix missing return

* fix falsy condition

* fix reading href instead of src of emoji

* add message editor - WIP

* fix plain to editor input func

* add save edit message functionality

* show edited event source code

* focus message input on after editing message

* use del tag for strike-through instead of s

* prevent autocomplete from re-opening after esc

* scroll out of view msg editor in view

* handle up arrow edit

* handle scroll to message editor without effect

* revert prev commit: effect run after editor render

* ignore relation event from editable

* allow data-md tag for del and em in sanitize html

* prevent edit without changes

* ignore previous reply when replying to msg

* fix up arrow edit not working sometime

package.json

@@ -33,13 +33,15 @@
     "classnames": "2.3.2",
     "dateformat": "5.0.3",
     "dayjs": "1.11.10",
+    "domhandler": "5.0.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
     "folds": "1.5.0",
     "formik": "2.2.9",
+    "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",

src/app/components/editor/Editor.tsx

@@ -50,12 +50,13 @@ const withVoid = (editor: Editor): Editor => {
 };
 
 export const useEditor = (): Editor => {
-  const [editor] = useState(withInline(withVoid(withReact(withHistory(createEditor())))));
+  const [editor] = useState(() => withInline(withVoid(withReact(withHistory(createEditor())))));
   return editor;
 };
 
 export type EditorChangeHandler = (value: Descendant[]) => void;
 type CustomEditorProps = {
+  editableName?: string;
   top?: ReactNode;
   bottom?: ReactNode;
   before?: ReactNode;
@@ -71,6 +72,7 @@ type CustomEditorProps = {
 export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
   (
     {
+      editableName,
       top,
       bottom,
       before,
@@ -137,6 +139,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               hideTrack
             >
               <Editable
+                data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
                 renderPlaceholder={renderPlaceholder}

src/app/components/editor/common.ts

@@ -221,3 +221,12 @@ export const getPrevWorldRange = (editor: Editor): BaseRange | undefined => {
   });
   return worldStartPoint && Editor.range(editor, worldStartPoint, cursorPoint);
 };
+
+export const isEmptyEditor = (editor: Editor): boolean => {
+  const firstChildren = editor.children[0];
+  if (firstChildren && Element.isElement(firstChildren)) {
+    const isEmpty = editor.children.length === 1 && Editor.isEmpty(editor, firstChildren);
+    return isEmpty;
+  }
+  return false;
+};

src/app/components/editor/index.ts

@@ -5,3 +5,4 @@ export * from './Elements';
 export * from './keyboard';
 export * from './output';
 export * from './Toolbar';
+export * from './input';