feat: basic button to switch view mode

package.json

@@ -21,6 +21,7 @@
     "esbuild": "0.20.2",
     "esbuild-svelte": "^0.8.0",
     "obsidian": "1.5.7-1",
+    "obsidian-typings": "^1.1.6",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "svelte": "^4.2.15",

package.nix

@@ -14,7 +14,7 @@ in
 
     pnpmDeps = pnpm.fetchDeps {
       inherit (finalAttrs) pname version src;
-      hash = "sha256-yWX539W0b1R4YpIcDEVjCl3GzxI8kkpgT8GkCBrrY60=";
+      hash = "sha256-ZtLBm+5HmITPymR9HpJzw+/jqbUEQw1tm5kf7Gj8/+U=";
     };
 
     nativeBuildInputs = [nodejs pnpm.configHook];

src/Editor.svelte

@@ -1,27 +1,44 @@
 <script lang="ts">
+  import type { MarkdownViewModeType as ViewMode } from "obsidian";
+
   export let data: string;
   export let onChange: (newData: string) => void;
+  export let viewMode: ViewMode = "preview";
 
   $: onChange(data);
 </script>
 
-<div>
-  <pre
-    class="klog-content"
-    contenteditable="true"
-    bind:textContent={data}
-    on:keydown={(e) => {
-      if (e.key === "Enter") {
-        document.execCommand("insertLineBreak");
-        e.preventDefault();
-      }
-    }}>
+<div class="klog-wrapper">
+  <button
+    on:click={() => (viewMode = viewMode === "source" ? "preview" : "source")}
+  >
+    switch to {viewMode === "source" ? "preview" : "source"}
+  </button>
+
+  {#if viewMode === "source"}
+    <pre
+      class="klog-content"
+      contenteditable="true"
+      bind:textContent={data}
+      on:keydown={(e) => {
+        if (e.key === "Enter") {
+          document.execCommand("insertLineBreak");
+          e.preventDefault();
+        }
+      }}>
     {data}
   </pre>
+  {:else}
+    <pre class="klog-content">{data}</pre>
+  {/if}
 </div>
 
 <style>
   .klog-content {
     white-space: pre-wrap;
   }
+
+  .klog-content:not([contenteditable]) {
+    user-select: text;
+  }
 </style>

src/main.ts

@@ -1,4 +1,8 @@
-import { TextFileView, Plugin } from "obsidian";
+import {
+  TextFileView,
+  Plugin,
+  type MarkdownViewModeType as ViewMode,
+} from "obsidian";
 import Editor from "./Editor.svelte";
 
 export default class Klog extends Plugin {
@@ -39,12 +43,14 @@ class KlogView extends TextFileView {
       this.contentEl.empty();
     }
 
+    const viewMode = this.app.vault.getConfig("defaultViewMode") as ViewMode;
     const container = this.contentEl.createEl("div");
     const el = new Editor({
       target: container,
       props: {
         data: this.data,
         onChange: (data: string) => (this.data = data),
+        viewMode,
       },
     });
     this.#editor = el;

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "types": ["svelte", "node"],
+    "types": ["svelte", "node", "obsidian-typings"],
     "baseUrl": ".",
     "inlineSources": true,
     "module": "ESNext",