Feature/post metadata management

src/common/api/mutations/pin-reply.ts

@@ -1,26 +1,22 @@
 import { useMutation } from "@tanstack/react-query";
 import { Entry } from "../../store/entries/types";
-import { createPatch, makeJsonMetaDataReply } from "../../helper/posting";
-import { version } from "../../../../package.json";
 import { useUpdateReply } from "./update-reply";
-import { MetaData } from "../operations";
+import { EntryBodyManagement, EntryMetadataManagement } from "../../features/entry-management";
 
 export function usePinReply(reply: Entry, parent: Entry) {
   const { mutateAsync: updateReply } = useUpdateReply(parent);
 
   return useMutation(["reply-pin", reply, parent], async ({ pin }: { pin: boolean }) => {
-    const meta = makeJsonMetaDataReply(
-      parent.json_metadata.tags || ["ecency"],
-      version
-    ) as MetaData;
-
-    let newBody = parent.body.replace(/[\x00-\x09\x0B-\x0C\x0E-\x1F\x7F-\x9F]/g, "");
-    const patch = createPatch(parent.body, newBody.trim());
-    if (patch && patch.length < Buffer.from(parent.body, "utf-8").length) {
-      newBody = patch;
-    }
-
-    meta.pinned_reply = pin ? `${reply.author}/${reply.permlink}` : undefined;
-    return updateReply({ text: newBody, point: true, jsonMeta: meta });
+    return updateReply({
+      text: EntryBodyManagement.EntryBodyManager.shared
+        .builder()
+        .buildPatchFrom(parent, parent.body),
+      point: true,
+      jsonMeta: EntryMetadataManagement.EntryMetadataManager.shared
+        .builder()
+        .extend(parent)
+        .withPinnedReply(reply, pin)
+        .build()
+    });
   });
 }

src/common/api/operations.ts

@@ -38,7 +38,7 @@ export interface MetaData {
   app?: string;
   format?: string;
   community?: string;
-  description?: string;
+  description?: string | null;
   video?: any;
   type?: string;
   pinned_reply?: string; // author/permlink

src/common/components/comment/__snapshots__/index.spec.tsx.snap

@@ -220,7 +220,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-ad7f74fc-7d16-4049-a59a-3b2511f7738b"
+      id="editor-tool-emoji-picker-4ca1051d-065c-49cc-a682-101c3b7fc211"
       role="none"
       title="Emoji"
     >
@@ -586,7 +586,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-4ccdcb56-8dff-4dfe-9898-dfdf7c3d7fc6"
+      id="editor-tool-emoji-picker-560914da-c8a4-4201-8ebd-1bd4353555f8"
       role="none"
       title="Emoji"
     >

src/common/components/community-card/__snapshots__/index.spec.tsx.snap

@@ -61,10 +61,10 @@ exports[`(1) Default render 1`] = `
           className="preview-body markdown-view"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "<p><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
-<p>You can post in languages other than English.</p>
-<p>There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
-<p>Join our discord group to keep yourself updated:<br />
+              "__html": "<p dir=\\"auto\\"><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
+<p dir=\\"auto\\">You can post in languages other than English.</p>
+<p dir=\\"auto\\">There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
+<p dir=\\"auto\\">Join our discord group to keep yourself updated:<br />
 <a class=\\"markdown-external-link\\" data-href=\\"https://discord.gg/n98Kpmm\\">https://discord.gg/n98Kpmm</a></p>",
             }
           }
@@ -214,10 +214,10 @@ exports[`(2) Should show edit buttons with nsfw label 1`] = `
           className="preview-body markdown-view"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "<p><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
-<p>You can post in languages other than English.</p>
-<p>There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
-<p>Join our discord group to keep yourself updated:<br />
+              "__html": "<p dir=\\"auto\\"><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
+<p dir=\\"auto\\">You can post in languages other than English.</p>
+<p dir=\\"auto\\">There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
+<p dir=\\"auto\\">Join our discord group to keep yourself updated:<br />
 <a class=\\"markdown-external-link\\" data-href=\\"https://discord.gg/n98Kpmm\\">https://discord.gg/n98Kpmm</a></p>",
             }
           }
@@ -432,10 +432,10 @@ exports[`(3) usePrivate = false 1`] = `
           className="preview-body markdown-view"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "<p><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
-<p>You can post in languages other than English.</p>
-<p>There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
-<p>Join our discord group to keep yourself updated:<br />
+              "__html": "<p dir=\\"auto\\"><span>This is a collective curation community formed by <a class=\\"markdown-author-link\\" data-author=\\"appreciator\\">@appreciator</a>, <a class=\\"markdown-author-link\\" data-author=\\"rocky1\\">@rocky1</a> and <a class=\\"markdown-author-link\\" data-author=\\"upmewhale\\">@upmewhale</a>. You can post your genuine and creative content in this community to get more support.</span></p>
+<p dir=\\"auto\\">You can post in languages other than English.</p>
+<p dir=\\"auto\\">There are not many restrictions but just few simple ones and we expect you to adhere to them</p>
+<p dir=\\"auto\\">Join our discord group to keep yourself updated:<br />
 <a class=\\"markdown-external-link\\" data-href=\\"https://discord.gg/n98Kpmm\\">https://discord.gg/n98Kpmm</a></p>",
             }
           }

src/common/components/entry-list-item/__snapshots__/index.spec.tsx.snap

@@ -175,7 +175,9 @@ exports[`(1) Default render 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"
@@ -463,7 +465,9 @@ exports[`(2) Grid view 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"
@@ -776,7 +780,9 @@ exports[`(3) Nsfw 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"
@@ -1089,7 +1095,9 @@ exports[`(4) Nsfw with active user 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"
@@ -1402,7 +1410,9 @@ exports[`(5) Nsfw but allowed 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"
@@ -1725,7 +1735,9 @@ exports[`(6) Cross post. Bottom menu 1`] = `
           </div>
         </div>
       </div>
-      <div>
+      <div
+        className="noselection"
+      >
         <div />
         <div
           className="entry-payout notranslate"

src/common/components/entry-payout/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`(1) Default render 1`] = `
-<div>
+<div
+  className="noselection"
+>
   <div />
   <div
     className="entry-payout notranslate"
@@ -236,7 +238,9 @@ exports[`(4) Detail render with max payout 1`] = `
 `;
 
 exports[`(5) Default with max payout 1`] = `
-<div>
+<div
+  className="noselection"
+>
   <div />
   <div
     className="entry-payout payout-limit-hit notranslate"

src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap

@@ -42,13 +42,21 @@ Array [
       className="slider slider-up"
     >
       <div
-        className="ecency-vote-input relative"
+        className="ecency-vote-input rounded-full overflow-hidden relative"
+        onMouseDown={[Function]}
+        onMouseMove={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
       >
         <div
-          className="ecency-input-group flex items-stretch w-full [&>input]:rounded-[0] [&>input:first-child]:rounded-l-full [&>input:last-child]:rounded-r-full [&>.ecency-input-group-part>button]:rounded-tl-none [&>.ecency-input-group-part>button]:rounded-bl-none [&>.ecency-input-group-part>button]:h-[2.75rem]"
+          className="ecency-input-group flex items-stretch w-full relative z-10 [&>input]:rounded-[0] [&>input:first-child]:rounded-l-full [&>input:last-child]:rounded-r-full [&>.ecency-input-group-part>button]:rounded-tl-none [&>.ecency-input-group-part>button]:rounded-bl-none [&>.ecency-input-group-part>button]:h-[2.75rem]"
         >
           <input
             className="border-2 rounded-3xl py-2 px-3 w-full outline-none shadow-0 focus:border-gray-500 hover:border-gray-300 duration-300 dark:border-gray-700 dark:hover:border-gray-600 dark:bg-gray-800 aria-invalid:border-red"
+            max={100}
+            min={0}
             onChange={[Function]}
             step="0.1"
             type="number"
@@ -62,11 +70,20 @@ Array [
           </div>
         </div>
         <div
-          className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center"
+          className="absolute bg-opacity-25 top-[1px] left-[1px] bottom-[1px] bg-blue-dark-sky"
+          style={
+            Object {
+              "width": "86%",
+            }
+          }
+        />
+        <div
+          className="absolute z-[11] right-10 top-0 bottom-0 flex flex-col justify-center items-center"
         >
           <div
             className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
             onClick={[Function]}
+            onMouseDown={[Function]}
           >
             <svg
               fill="currentColor"
@@ -83,6 +100,7 @@ Array [
           <div
             className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
             onClick={[Function]}
+            onMouseDown={[Function]}
           >
             <svg
               fill="currentColor"

src/common/components/witness-card/__snapshots__/index.spec.tsx.snap

@@ -115,7 +115,7 @@ exports[`(1) renders witness card successfully 1`] = `
         $
         2
          | 
-        23y
+        24y
       </span>
     </div>
     <div

src/common/features/decks/deck-threads-form/api/use-community-api.ts

@@ -1,15 +1,10 @@
 import { useMappedStore } from "../../../../store/use-mapped-store";
 import { FullAccount } from "../../../../store/accounts/types";
-import {
-  createPermlink,
-  extractMetaData,
-  makeCommentOptions,
-  makeJsonMetaData
-} from "../../../../helper/posting";
+import { createPermlink, makeCommentOptions } from "../../../../helper/posting";
 import { comment } from "../../../../api/operations";
-import { version } from "../../../../../../package.json";
 import tempEntry from "../../../../helper/temp-entry";
 import { Entry } from "../../../../store/entries/types";
+import { EntryMetadataManagement } from "../../../entry-management";
 
 export function useCommunityApi() {
   const { activeUser, addEntry } = useMappedStore();
@@ -32,9 +27,15 @@ export function useCommunityApi() {
     const permlink = editingEntry?.permlink ?? createPermlink("", true);
     const options = makeCommentOptions(author, permlink, "default");
 
-    const { thumbnails, ...meta } = extractMetaData(raw);
-    const tags = raw.match(/\#[a-zA-Z0-9]+/g)?.map((tag) => tag.replace("#", "")) ?? ["ecency"];
-    const jsonMeta = makeJsonMetaData(meta, [hostTag, ...tags], null, version);
+    const jsonMeta = EntryMetadataManagement.EntryMetadataManager.shared
+      .builder()
+      .default()
+      .extractFromBody(raw)
+      .withTags([
+        hostTag,
+        ...(raw.match(/\#[a-zA-Z0-9]+/g)?.map((tag) => tag.replace("#", "")) ?? ["ecency"])
+      ])
+      .build();
 
     await comment(author, "", hostTag, permlink, "", cleanedRaw, jsonMeta, options, true);
 

src/common/features/entry-management/entry-body-manager.ts

@@ -0,0 +1,39 @@
+import { diff_match_patch } from "diff-match-patch";
+import { Entry } from "../../store/entries/types";
+
+export namespace EntryBodyManagement {
+  class EntryBodyBuilder {
+    public buildClearBody(param: string): string;
+    public buildClearBody(param: Entry): string;
+    public buildClearBody(param: Entry | string): string {
+      if (typeof param === "string") {
+        return param.replace(/[\x00-\x09\x0B-\x0C\x0E-\x1F\x7F-\x9F]/g, "");
+      }
+      return param.body.replace(/[\x00-\x09\x0B-\x0C\x0E-\x1F\x7F-\x9F]/g, "");
+    }
+
+    public buildPatchFrom(entry: Entry, newBody: string) {
+      const dmp = new diff_match_patch();
+      if (entry.body === "") {
+        return "";
+      }
+      const clearBody = this.buildClearBody(entry);
+      const patches = dmp.patch_make(clearBody, newBody);
+      const patch = dmp.patch_toText(patches);
+
+      if (patch && patch.length < Buffer.from(clearBody, "utf-8").length) {
+        return patch;
+      }
+
+      return newBody;
+    }
+  }
+
+  export class EntryBodyManager {
+    public static shared = new EntryBodyManager();
+
+    public builder(): EntryBodyBuilder {
+      return new EntryBodyBuilder();
+    }
+  }
+}