Changed permlink to wave-ntz for Waves page

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@ecency/ns-query": "^1.2.11-next",
     "@ecency/render-helper": "^2.2.36",
+    "@ecency/renderer": "../ecency-renderer",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@firebase/analytics": "^0.10.0",
@@ -33,6 +34,7 @@
     "@webscopeio/react-textarea-autocomplete": "^4.9.2",
     "axios": "1.6.2",
     "bs58": "^4.0.1",
+    "clsx": "^2.1.1",
     "currency-symbol-map": "^5.1.0",
     "date-fns": "^2.30.0",
     "diff-match-patch": "^1.0.5",

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-body-viewer.tsx

@@ -1,10 +1,11 @@
+"use client";
+
 import { Entry } from "@/entities";
 import { PollWidget, useEntryPollExtractor } from "@/features/polls";
-import { renderPostBody } from "@ecency/render-helper";
-import { useGlobalStore } from "@/core/global-store";
 import { EntryPageEdit } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-edit";
 import { SelectionPopover } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/selection-popover";
 import { EntryPageViewerManager } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-viewer-manager";
+import { EcencyRenderer } from "@ecency/renderer";
 
 interface Props {
   entry: Entry;
@@ -13,25 +14,16 @@ interface Props {
 }
 
 export function EntryPageBodyViewer({ entry, rawParam, isEdit }: Props) {
-  const canUseWebp = useGlobalStore((s) => s.canUseWebp);
-
   const postPoll = useEntryPollExtractor(entry);
 
   const preparedEntryBody = entry.body.replace(/<a id="/g, '<a data-id="');
-  const renderedBody = {
-    __html: renderPostBody(preparedEntryBody, false, canUseWebp)
-  };
 
   return (
     <EntryPageViewerManager entry={entry}>
       {!isEdit && (
         <>
           <SelectionPopover postUrl={entry.url}>
-            <div
-              itemProp="articleBody"
-              className="entry-body markdown-view user-selectable"
-              dangerouslySetInnerHTML={renderedBody}
-            />
+            <EcencyRenderer value={preparedEntryBody} />
             {postPoll && (
               <div className="pb-6">
                 <PollWidget entry={entry} poll={postPoll} isReadOnly={false} />

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/index.ts

@@ -4,7 +4,6 @@ export * from "./entry-page-loading-screen";
 export * from "./similar-entries";
 export * from "./md-handler";
 export * from "./entry-read-time";
-export * from "./entry-body-extra";
 export * from "./entry-tags";
 export * from "./entry-footer-info";
 export * from "./entry-footer-controls";

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx

@@ -1,7 +1,6 @@
 import { getAccountFullQuery, getDeletedEntryQuery, getPostQuery } from "@/api/queries";
 import {
   DeletedPostScreen,
-  EntryBodyExtra,
   EntryPageContent,
   EntryPageContextProvider,
   EntryPageCrossPostHeader,
@@ -77,7 +76,6 @@ export default async function EntryPage({ params, searchParams }: Props) {
           </div>
         </div>
         <EntryPageEditHistory entry={entry} />
-        <EntryBodyExtra entry={entry} />
       </EntryPageContextProvider>
     </HydrationBoundary>
   );

src/app/waves/[author]/[permlink]/_components/wave-view-details.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { WavesListItemHeader } from "@/app/waves/_components/waves-list-item-header";
-import { renderPostBody } from "@ecency/render-helper";
-import { useRenderWaveBody, WaveActions, WaveForm } from "@/features/waves";
+import { WaveActions, WaveForm } from "@/features/waves";
 import { WaveEntry } from "@/entities";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Modal, ModalHeader } from "@ui/modal";
 import i18next from "i18next";
 import { EcencyEntriesCacheManagement } from "@/core/caches";
-import uuid from "tus-js-client/lib.esm/uuid";
+import { EcencyRenderer } from "@ecency/renderer";
 
 interface Props {
   entry: WaveEntry;
@@ -18,26 +17,17 @@ export function WaveViewDetails({ entry: initialEntry }: Props) {
   const renderAreaRef = useRef<HTMLDivElement>(null);
 
   const { data: entry } = EcencyEntriesCacheManagement.getEntryQuery(initialEntry).useClientQuery();
-  const renderBody = useRenderWaveBody(renderAreaRef, entry!, {});
 
   const [showEditModal, setShowEditModal] = useState(false);
 
   const status = "default";
 
-  useEffect(() => {
-    if (renderAreaRef.current && entry) {
-      renderAreaRef.current.innerHTML = renderPostBody({
-        ...entry,
-        permlink: entry.permlink + uuid() // Trigger cache resetting
-      });
-      renderBody();
-    }
-  }, [entry, renderBody]);
-
   return (
     <div className="relative z-10 rounded-2xl bg-white dark:bg-dark-200 cursor-pointer">
       <WavesListItemHeader entry={entry!} hasParent={false} pure={false} status={status} />
-      <div className="p-4 thread-render" ref={renderAreaRef} />
+      <div className="p-4">
+        <EcencyRenderer value={entry?.body ?? ""} />
+      </div>
       <WaveActions
         showStats={true}
         status={status}

src/app/waves/_components/waves-list-item.tsx

@@ -3,8 +3,7 @@
 import { WaveEntry } from "@/entities";
 import { WavesListItemHeader } from "@/app/waves/_components/waves-list-item-header";
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { useRenderWaveBody, WaveActions, WaveForm } from "@/features/waves";
-import { renderPostBody } from "@ecency/render-helper";
+import { WaveActions, WaveForm } from "@/features/waves";
 import { EcencyEntriesCacheManagement } from "@/core/caches";
 import { motion } from "framer-motion";
 import "./waves-list-item.scss";
@@ -13,9 +12,9 @@ import { classNameObject } from "@ui/util";
 import { PollWidget, useEntryPollExtractor } from "@/features/polls";
 import { Modal, ModalHeader } from "@ui/modal";
 import i18next from "i18next";
-import uuid from "tus-js-client/lib.esm/uuid";
 import { useInViewport } from "react-in-viewport";
 import { useCollectPageViewEvent } from "@/api/mutations";
+import { EcencyRenderer } from "@ecency/renderer";
 
 interface Props {
   item: WaveEntry;
@@ -42,7 +41,6 @@ export function WavesListItem({
     EcencyEntriesCacheManagement.getEntryQuery<WaveEntry>(item).useClientQuery();
 
   const poll = useEntryPollExtractor(entry);
-  const renderBody = useRenderWaveBody(renderAreaRef, entry as WaveEntry, {});
   const { mutateAsync: collectPageView } = useCollectPageViewEvent(
     `@${item.author}/${item.permlink}`
   );
@@ -53,16 +51,6 @@ export function WavesListItem({
     }
   }, [collectPageView, inViewport]);
 
-  useEffect(() => {
-    if (renderAreaRef.current && entry) {
-      renderAreaRef.current.innerHTML = renderPostBody({
-        ...entry,
-        permlink: entry.permlink + uuid() // Trigger cache resetting
-      });
-      renderBody();
-    }
-  }, [entry, renderBody]);
-
   const status = "default";
 
   const onClick = useCallback(
@@ -100,7 +88,9 @@ export function WavesListItem({
       onClick={onClick}
     >
       <WavesListItemHeader entry={entry!} hasParent={false} pure={false} status={status} />
-      <div className="p-4 thread-render" ref={renderAreaRef} onClick={(e) => e.stopPropagation()} />
+      <div className="p-4" onClick={(e) => e.stopPropagation()}>
+        <EcencyRenderer value={entry?.body ?? ""} />
+      </div>
       {poll && (
         <div onClick={(e) => e.stopPropagation()} className="p-4">
           <PollWidget entry={entry} compact={true} poll={poll} isReadOnly={false} />

src/features/waves/components/wave-form/api/use-wave-create.ts

@@ -45,7 +45,7 @@ export function useWaveCreate() {
       const entry = hostEntries[0];
       return {
         host,
-        entry: (await generalApiRequest({ entry, raw, editingEntry })) as WaveEntry,
+        entry: (await generalApiRequest({ entry, raw, editingEntry, host })) as WaveEntry,
         isEditing: !!editingEntry
       };
     },

src/features/waves/components/wave-form/api/use-waves-api.ts

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { useGlobalStore } from "@/core/global-store";
 import { PollsContext } from "@/features/polls";
 import { Entry, FullAccount, WaveEntry } from "@/entities";
-import { createReplyPermlink, tempEntry } from "@/utils";
+import { createReplyPermlink, createWavePermlink, tempEntry } from "@/utils";
 import { EntryMetadataManagement } from "@/features/entry-management";
 import { comment } from "@/api/operations";
 import { EcencyEntriesCacheManagement } from "@/core/caches";
@@ -24,19 +24,25 @@ export function useWavesApi() {
     mutationFn: async ({
       entry,
       raw,
-      editingEntry
+      editingEntry,
+      host
     }: {
       entry: Entry;
       raw: string;
       editingEntry?: WaveEntry;
+      host?: string;
     }) => {
       if (!activeUser || !activeUser.data.__loaded) {
         throw new Error("[Wave][Thread-base][API] – No active user");
       }
       const parentAuthor = editingEntry?.parent_author ?? entry.author;
       const parentPermlink = editingEntry?.parent_permlink ?? entry.permlink;
 
-      const permlink = editingEntry?.permlink ?? createReplyPermlink(entry.author);
+      let permlink = editingEntry?.permlink ?? createReplyPermlink(entry.author);
+
+      if (host === "ecency.waves" && !editingEntry) {
+        permlink = createWavePermlink();
+      }
       const tags = raw.match(/\#[a-zA-Z0-9]+/g)?.map((tag) => tag.replace("#", "")) ?? ["ecency"];
 
       const jsonMeta = EntryMetadataManagement.EntryMetadataManager.shared

src/styles/_components.scss

@@ -20,3 +20,11 @@
   margin-top: 1px;
 }
 
+.medium-zoom--opened .medium-zoom-overlay {
+  z-index: 20;
+  opacity: 0.75 !important;
+}
+
+.medium-zoom-image--opened {
+  z-index: 20;
+}

src/styles/style.scss

@@ -1,3 +1,5 @@
+@import "@ecency/renderer/style.css";
+
 @tailwind base;
 @tailwind components;
 

src/utils/posting.ts

@@ -131,6 +131,18 @@ export const createReplyPermlink = (toAuthor?: string) => {
   return `re-${toAuthor?.replace(/\./g, "")}-${timeFormat}`;
 };
 
+export function createWavePermlink() {
+  const t = new Date(Date.now());
+
+  const timeFormat = `${t.getFullYear().toString()}${(t.getMonth() + 1).toString()}${t
+    .getDate()
+    .toString()}t${t.getHours().toString()}${t.getMinutes().toString()}${t
+    .getSeconds()
+    .toString()}${t.getMilliseconds().toString()}z`;
+
+  return `wave-${timeFormat}`;
+}
+
 export const createPatch = (text1: string, text2: string): string | undefined => {
   const dmp = new diff_match_patch();
   if (text1 === "") return undefined;

yarn.lock

@@ -1197,6 +1197,13 @@
     xmldom "^0.5.0"
     xss "^1.0.9"
 
+"@ecency/renderer@../ecency-renderer":
+  version "1.0.0"
+  dependencies:
+    "@ecency/render-helper" "^2.2.36"
+    clsx "^2.1.1"
+    medium-zoom "^1.1.0"
+
 "@emnapi/runtime@^1.2.0":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"
@@ -4305,6 +4312,11 @@ clsx@^2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"