feat(react/ribbon): port edited notes

apps/client/src/widgets/react/KeyboardShortcut.tsx

@@ -1,6 +1,7 @@
 import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions";
+import { separateByCommas } from "./react_utils";
 
 interface KeyboardShortcutProps {
     actionName: KeyboardActionNames;
@@ -21,13 +22,13 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
         <>
             {action.effectiveShortcuts?.map((shortcut, i) => {
                 const keys = shortcut.split("+");
-                return keys
+                return separateByCommas(keys
                     .map((key, i) => (
                         <>
                             <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}
                         </>
-                    ))
-            }).reduce<any>((acc, item) => (acc.length ? [...acc, ", ", item] : [item]), [])}
+                    )))
+            })}
         </>
     );
 }

apps/client/src/widgets/react/NoteLink.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useMemo, useState } from "preact/hooks";
+import link from "../../services/link";
+import RawHtml from "./RawHtml";
+
+interface NoteLinkOpts {
+    notePath: string | string[];
+    showNotePath?: boolean;
+}
+
+export default function NoteLink({ notePath, showNotePath }: NoteLinkOpts) {
+    const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
+    const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
+
+    useEffect(() => {
+        link.createLink(stringifiedNotePath, { showNotePath: true })
+            .then(setJqueryEl);
+    }, [ stringifiedNotePath, showNotePath ])
+
+    return <RawHtml html={jqueryEl} />
+    
+}

apps/client/src/widgets/react/RawHtml.tsx

@@ -4,7 +4,7 @@ type HTMLElementLike = string | HTMLElement | JQuery<HTMLElement>;
 
 interface RawHtmlProps {
     className?: string;
-    html: HTMLElementLike;
+    html?: HTMLElementLike;
     style?: CSSProperties;
 }
 
@@ -19,7 +19,7 @@ export function RawHtmlBlock(props: RawHtmlProps) {
 function getProps({ className, html, style }: RawHtmlProps) {
     return {
         className: className,
-        dangerouslySetInnerHTML: getHtml(html),
+        dangerouslySetInnerHTML: getHtml(html ?? ""),
         style
     }
 }

apps/client/src/widgets/react/react_utils.tsx

@@ -1,4 +1,4 @@
-import { createContext, render, type JSX, type RefObject } from "preact";
+import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
 import Component from "../../components/component";
 
 export const ParentComponent = createContext<Component | null>(null);
@@ -39,4 +39,9 @@ export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.E
 
 export function disposeReactWidget(container: Element) {
     render(null, container);
+}
+
+export function separateByCommas(components: ComponentChild[]) {
+    return components.reduce<any>((acc, item) =>
+        (acc.length ? [...acc, ", ", item] : [item]), []);
 }