markdown preview

NEARBuilders · Jan 29, 2024 · 37830b4 · 37830b4
1 parent 67b932c
commit 37830b4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 28 deletions.
diff --git a/apps/editor/widget/app.jsx b/apps/editor/widget/app.jsx
@@ -1,3 +1,7 @@
+const { MarkdownViewer } = VM.require("devs.near/widget/markdown.view") || {
+  MarkdownViewer: () => null,
+};
+
 const PageContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -93,6 +97,8 @@ const handleToggleViewMode = () => {
   const newMode = viewMode === "single" ? "split" : "single";
   set("viewMode", newMode);
   setViewMode(newMode);
+  set("preview", false);
+  setShowPreview(false);
 };
 
 const handleTogglePreview = () => {
@@ -277,9 +283,9 @@ return (
       </Select>
     </div>
     {viewMode === "single" ? (
-      <EditorWrapper>
+      <EditorWrapper key={editor}>
         {showPreview ? (
-          <PreviewContent>{content}</PreviewContent>
+          <MarkdownViewer value={content} />
         ) : (
           <>
             {editor ? (
@@ -319,14 +325,40 @@ return (
     ) : (
       <div style={{ display: "flex", height: "100%" }}>
         <EditorWrapper>
-          <EditorTextarea
-            placeholder="Start typing..."
-            value={content}
-            onChange={(e) => setContent(e.target.value)}
-          />
+          {editor ? (
+            <Widget
+              src={editor}
+              props={{
+                value: { content },
+                onChange: (v) => {
+                  setContent(v);
+                  set(draftKey, v);
+                },
+              }}
+            />
+          ) : (
+            <DefaultEditor
+              value={content}
+              onBlur={() => {
+                let v;
+                if (language === "json") {
+                  v = JSON.stringify(JSON.parse(content), null, 2);
+                  if (v !== "null") {
+                    setContent(v);
+                    set(draftKey, v);
+                  }
+                }
+              }}
+              onChange={(e) => {
+                let v = e.target.value;
+                setContent(v);
+                Storage.privateSet(draftKey, v);
+              }}
+            />
+          )}
         </EditorWrapper>
         <EditorWrapper>
-          <PreviewContent>{content}</PreviewContent>
+          <MarkdownViewer value={content} />
         </EditorWrapper>
       </div>
     )}

diff --git a/apps/editor/widget/markdown/view.jsx b/apps/editor/widget/markdown/view.jsx
@@ -34,23 +34,31 @@ const Embedded = styled.span`
   }
 `;
 
-const renderMention =
-  props.renderMention ??
-  ((accountId) => (
-    <span key={accountId} className="d-inline-flex" style={{ fontWeight: 500 }}>
-      <Widget
-        src="neardevgov.near/widget/ProfileLine"
-        props={{
-          accountId: accountId.toLowerCase(),
-          hideAccountId: true,
-          tooltip: true,
-        }}
-      />
-    </span>
-  ));
-
-return (
-  <Wrapper>
-    <Markdown text={props.value} onMention={renderMention} />
-  </Wrapper>
-);
+function MarkdownViewer(props) {
+  const renderMention =
+    props.renderMention ??
+    ((accountId) => (
+      <span
+        key={accountId}
+        className="d-inline-flex"
+        style={{ fontWeight: 500 }}
+      >
+        <Widget
+          src="mob.near/widget/ProfileLine"
+          props={{
+            accountId: accountId.toLowerCase(),
+            hideAccountId: true,
+            tooltip: true,
+          }}
+        />
+      </span>
+    ));
+
+  return (
+    <Wrapper>
+      <Markdown text={props.value} onMention={renderMention} />
+    </Wrapper>
+  );
+}
+
+return { MarkdownViewer };